DateTimePicker

import { DashForm } from '@dashforge/forms';
import { DateTimePicker } from '@dashforge/ui';

function AppointmentScheduler() {
  const handleSubmit = (data: FormData) => {
    console.log('Scheduled:', data);
    // All values are ISO 8601 UTC strings or null
  };

  return (
    <DashForm
      defaultValues={{ 
        appointmentDate: null,
        deadlineDate: null,
        meetingTime: null
      }}
      onSubmit={handleSubmit}
      mode="onBlur"
    >
      <DateTimePicker
        name="appointmentDate"
        label="Appointment date & time"
        mode="datetime"
        rules={{
          required: 'Please select an appointment time'
        }}
      />
      <DateTimePicker
        name="deadlineDate"
        label="Project deadline"
        mode="date"
        rules={{
          required: 'Please select a deadline'
        }}
      />
      <DateTimePicker
        name="meetingTime"
        label="Daily meeting time"
        mode="time"
        helperText="Select your preferred meeting time"
      />
      <button type="submit">Schedule</button>
    </DashForm>
  );
}

// DateTimePicker automatically:
// - Registers with React Hook Form
// - Syncs value from form state (ISO 8601 UTC)
// - Returns ISO strings on submit
// - Shows errors only after touched OR submit
// - Tracks touched state on blur

import { DashForm } from '@dashforge/forms';
import { DateTimePicker, Select, Switch } from '@dashforge/ui';

function EventCreator() {
  return (
    <DashForm 
      defaultValues={{ 
        eventType: '',
        enableReminder: false,
        eventDate: null,
        reminderTime: null
      }}
    >
      <Select
        name="eventType"
        label="Event type"
        options={[
          { label: 'Meeting', value: 'meeting' },
          { label: 'Deadline', value: 'deadline' },
          { label: 'Reminder', value: 'reminder' }
        ]}
      />

      {/* Event date: appears when event type is selected */}
      <DateTimePicker
        name="eventDate"
        label="Event date"
        mode="date"
        visibleWhen={(engine) => {
          const eventType = engine.getNode('eventType')?.value;
          return eventType !== '' && eventType !== null;
        }}
      />

      <Switch
        name="enableReminder"
        label="Enable reminder"
      />

      {/* Reminder time: appears only when enabled */}
      <DateTimePicker
        name="reminderTime"
        label="Reminder date & time"
        mode="datetime"
        visibleWhen={(engine) => {
          const enabled = engine.getNode('enableReminder')?.value;
          return enabled === true;
        }}
      />
    </DashForm>
  );
}

// The Engine API provides:
// - getNode(name): Access any field's state
// - Component re-renders on dependency changes
// - Component makes rendering decision (engine provides state)