@urbint/cl 1.0.1

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,623 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { View } from 'react-native';
+import { spacing } from '../../styles/tokens';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Forms/DatePicker',
+  component: DatePicker,
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['date', 'time', 'datetime'],
+    },
+    variant: {
+      control: 'select',
+      options: ['outline', 'filled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isInvalid: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    use24HourFormat: { control: 'boolean' },
+    showNowButton: { control: 'boolean' },
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+  args: {
+    mode: 'date',
+    variant: 'outline',
+    size: 'md',
+    showNowButton: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+// ============================================================================
+// BASIC STORIES
+// ============================================================================
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={{ width: 300 }}>
+      <DatePicker {...args} />
+    </View>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <DatePicker
+        label="Date of Birth"
+        placeholder="Select your birth date"
+        mode="date"
+      />
+      <DatePicker
+        label="Appointment Time"
+        placeholder="Select time"
+        mode="time"
+      />
+      <DatePicker
+        label="Event Date & Time"
+        placeholder="Select date and time"
+        mode="datetime"
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// MODE VARIANTS
+// ============================================================================
+
+export const DateOnly: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Date Picker Only</Text>
+      <DatePicker
+        label="Select Date"
+        mode="date"
+        placeholder="Choose a date..."
+        helperText="Select any date from the calendar"
+      />
+    </VStack>
+  ),
+};
+
+export const TimeOnly: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Time Picker Only</Text>
+      <DatePicker
+        label="Select Time"
+        mode="time"
+        placeholder="Choose a time..."
+        helperText="Select hour and minute"
+      />
+    </VStack>
+  ),
+};
+
+export const DateTime: Story = {
+  args: {
+    size: "sm"
+  },
+
+  render: () => (
+    <VStack space={16} style={{ width: 400 }}>
+      <Text weight="semiBold">Date & Time Picker</Text>
+      <Text size="caption" color="secondary">
+        Calendar and time picker shown side by side for easy selection
+      </Text>
+      <DatePicker
+        label="Select Date & Time"
+        mode="datetime"
+        placeholder="Choose date and time..."
+        helperText="Click 'Now' to select current date/time, 'OK' to confirm"
+      />
+    </VStack>
+  )
+};
+
+// ============================================================================
+// VARIANTS
+// ============================================================================
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">DatePicker Variants</Text>
+      <DatePicker
+        label="Outline"
+        variant="outline"
+        mode="date"
+        placeholder="Select date..."
+      />
+      <DatePicker
+        label="Filled"
+        variant="filled"
+        mode="date"
+        placeholder="Select date..."
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// SIZES
+// ============================================================================
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">DatePicker Sizes</Text>
+      <DatePicker
+        label="Small"
+        size="sm"
+        mode="date"
+        placeholder="Small picker..."
+      />
+      <DatePicker
+        label="Medium"
+        size="md"
+        mode="date"
+        placeholder="Medium picker..."
+      />
+      <DatePicker
+        label="Large"
+        size="lg"
+        mode="date"
+        placeholder="Large picker..."
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// STATES
+// ============================================================================
+
+export const States: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">DatePicker States</Text>
+      <DatePicker
+        label="Normal"
+        mode="date"
+        placeholder="Select date..."
+      />
+      <DatePicker
+        label="With Default Value"
+        mode="date"
+        defaultValue={new Date()}
+      />
+      <DatePicker
+        label="Disabled"
+        mode="date"
+        placeholder="Select date..."
+        isDisabled
+      />
+      <DatePicker
+        label="Required"
+        mode="date"
+        placeholder="Select date..."
+        isRequired
+      />
+    </VStack>
+  ),
+};
+
+export const Validation: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Validation States</Text>
+      <DatePicker
+        label="Valid Date"
+        mode="date"
+        defaultValue={new Date()}
+        helperText="Date has been saved"
+      />
+      <DatePicker
+        label="Invalid Date"
+        mode="date"
+        placeholder="Select date..."
+        isInvalid
+        errorMessage="Please select a valid date"
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// DATE CONSTRAINTS
+// ============================================================================
+
+export const WithMinMaxDate: Story = {
+  render: () => {
+    const today = new Date();
+    const minDate = new Date(today);
+    minDate.setDate(today.getDate() - 7);
+    const maxDate = new Date(today);
+    maxDate.setDate(today.getDate() + 30);
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Date Constraints</Text>
+        <DatePicker
+          label="Limited Date Range"
+          mode="date"
+          minDate={minDate}
+          maxDate={maxDate}
+          helperText="Select a date within the next 30 days (past 7 days available)"
+        />
+      </VStack>
+    );
+  },
+};
+
+export const FutureDatesOnly: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Future Dates Only</Text>
+      <DatePicker
+        label="Appointment Date"
+        mode="date"
+        minDate={new Date()}
+        helperText="Only future dates can be selected"
+      />
+    </VStack>
+  ),
+};
+
+export const PastDatesOnly: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Past Dates Only</Text>
+      <DatePicker
+        label="Birth Date"
+        mode="date"
+        maxDate={new Date()}
+        helperText="Only past dates can be selected"
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// TIME FORMATS
+// ============================================================================
+
+export const TimeFormats: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Time Formats</Text>
+      <DatePicker
+        label="12-Hour Format (Default)"
+        mode="time"
+        placeholder="Select time..."
+        use24HourFormat={false}
+      />
+      <DatePicker
+        label="24-Hour Format"
+        mode="time"
+        placeholder="Select time..."
+        use24HourFormat={true}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// FIRST DAY OF WEEK
+// ============================================================================
+
+export const FirstDayOfWeek: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">First Day of Week</Text>
+      <DatePicker
+        label="Sunday First (Default)"
+        mode="date"
+        firstDayOfWeek={0}
+      />
+      <DatePicker
+        label="Monday First"
+        mode="date"
+        firstDayOfWeek={1}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// CONTROLLED
+// ============================================================================
+
+export const ControlledDate: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Controlled Date Picker</Text>
+        <DatePicker
+          label="Select Date"
+          mode="date"
+          value={date}
+          onChange={setDate}
+        />
+        <Text size="caption" color="secondary">
+          Selected: {date ? date.toLocaleDateString() : 'None'}
+        </Text>
+      </VStack>
+    );
+  },
+};
+
+export const ControlledTime: Story = {
+  render: () => {
+    const [time, setTime] = useState<Date | undefined>(new Date());
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Controlled Time Picker</Text>
+        <DatePicker
+          label="Select Time"
+          mode="time"
+          value={time}
+          onChange={setTime}
+        />
+        <Text size="caption" color="secondary">
+          Selected: {time ? time.toLocaleTimeString() : 'None'}
+        </Text>
+      </VStack>
+    );
+  },
+};
+
+export const ControlledDateTime: Story = {
+  render: () => {
+    const [datetime, setDatetime] = useState<Date | undefined>(new Date());
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Controlled DateTime Picker</Text>
+        <DatePicker
+          label="Select Date & Time"
+          mode="datetime"
+          value={datetime}
+          onChange={setDatetime}
+        />
+        <Text size="caption" color="secondary">
+          Selected: {datetime ? datetime.toLocaleString() : 'None'}
+        </Text>
+      </VStack>
+    );
+  },
+};
+
+// ============================================================================
+// CUSTOM FORMAT
+// ============================================================================
+
+export const CustomFormat: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 300 }}>
+      <Text weight="semiBold">Custom Date Format</Text>
+      <DatePicker
+        label="European Format (DD/MM/YYYY)"
+        mode="date"
+        defaultValue={new Date()}
+        formatDate={(date) => {
+          const day = date.getDate().toString().padStart(2, '0');
+          const month = (date.getMonth() + 1).toString().padStart(2, '0');
+          const year = date.getFullYear();
+          return `${day}/${month}/${year}`;
+        }}
+      />
+      <DatePicker
+        label="Long Format"
+        mode="date"
+        defaultValue={new Date()}
+        formatDate={(date) => {
+          return date.toLocaleDateString('en-US', {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          });
+        }}
+      />
+      <DatePicker
+        label="ISO Format"
+        mode="date"
+        defaultValue={new Date()}
+        formatDate={(date) => date.toISOString().split('T')[0]}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// FORM EXAMPLES
+// ============================================================================
+
+export const BookingForm: Story = {
+  render: () => {
+    const [checkIn, setCheckIn] = useState<Date | undefined>();
+    const [checkOut, setCheckOut] = useState<Date | undefined>();
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Hotel Booking</Text>
+        <DatePicker
+          label="Check-in Date"
+          mode="date"
+          value={checkIn}
+          onChange={setCheckIn}
+          minDate={new Date()}
+          isRequired
+          placeholder="Select check-in date"
+        />
+        <DatePicker
+          label="Check-out Date"
+          mode="date"
+          value={checkOut}
+          onChange={setCheckOut}
+          minDate={checkIn || new Date()}
+          isRequired
+          placeholder="Select check-out date"
+          isDisabled={!checkIn}
+          helperText={!checkIn ? 'Select check-in date first' : undefined}
+        />
+      </VStack>
+    );
+  },
+};
+
+export const AppointmentForm: Story = {
+  render: () => {
+    const [appointmentDate, setAppointmentDate] = useState<Date | undefined>();
+    const [appointmentTime, setAppointmentTime] = useState<Date | undefined>();
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Schedule Appointment</Text>
+        <DatePicker
+          label="Appointment Date"
+          mode="date"
+          value={appointmentDate}
+          onChange={setAppointmentDate}
+          minDate={new Date()}
+          isRequired
+        />
+        <DatePicker
+          label="Appointment Time"
+          mode="time"
+          value={appointmentTime}
+          onChange={setAppointmentTime}
+          isRequired
+          isDisabled={!appointmentDate}
+        />
+        {appointmentDate && appointmentTime && (
+          <Text size="caption" color="secondary">
+            Appointment scheduled for:{'\n'}
+            {appointmentDate.toLocaleDateString()} at {appointmentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+          </Text>
+        )}
+      </VStack>
+    );
+  },
+};
+
+export const EventForm: Story = {
+  render: () => {
+    const [startDateTime, setStartDateTime] = useState<Date | undefined>();
+    const [endDateTime, setEndDateTime] = useState<Date | undefined>();
+
+    return (
+      <VStack space={16} style={{ width: 300 }}>
+        <Text weight="semiBold">Create Event</Text>
+        <DatePicker
+          label="Start Date & Time"
+          mode="datetime"
+          value={startDateTime}
+          onChange={setStartDateTime}
+          minDate={new Date()}
+          isRequired
+        />
+        <DatePicker
+          label="End Date & Time"
+          mode="datetime"
+          value={endDateTime}
+          onChange={setEndDateTime}
+          minDate={startDateTime || new Date()}
+          isRequired
+          isDisabled={!startDateTime}
+        />
+      </VStack>
+    );
+  },
+};
+
+// ============================================================================
+// ALL MODES COMPARISON
+// ============================================================================
+
+export const AllModes: Story = {
+  render: () => (
+    <VStack space={24} style={{ width: 400 }}>
+      <Text weight="semiBold">All DatePicker Modes</Text>
+      
+      <VStack space={8}>
+        <Text size="caption" weight="medium">Date Only</Text>
+        <DatePicker
+          mode="date"
+          placeholder="Select date..."
+          defaultValue={new Date()}
+        />
+      </VStack>
+
+      <VStack space={8}>
+        <Text size="caption" weight="medium">Time Only</Text>
+        <DatePicker
+          mode="time"
+          placeholder="Select time..."
+          defaultValue={new Date()}
+        />
+      </VStack>
+
+      <VStack space={8}>
+        <Text size="caption" weight="medium">Date & Time (Side by Side)</Text>
+        <DatePicker
+          mode="datetime"
+          placeholder="Select date & time..."
+          defaultValue={new Date()}
+        />
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const DateTimeWithoutNowButton: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 400 }}>
+      <Text weight="semiBold">DateTime without Now Button</Text>
+      <DatePicker
+        label="Select Date & Time"
+        mode="datetime"
+        showNowButton={false}
+        placeholder="Choose date and time..."
+      />
+    </VStack>
+  ),
+};
+
+export const DateTime24Hour: Story = {
+  render: () => (
+    <VStack space={16} style={{ width: 400 }}>
+      <Text weight="semiBold">DateTime with 24-Hour Format</Text>
+      <DatePicker
+        label="Select Date & Time"
+        mode="datetime"
+        use24HourFormat={true}
+        placeholder="Choose date and time..."
+        helperText="Time displayed in 24-hour format"
+      />
+    </VStack>
+  ),
+};
+