@tribepad/themis 1.0.0

package/src/elements/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,341 @@
+/**
+ * DatePicker Component Stories
+ *
+ * Storybook stories demonstrating all DatePicker, DateRangePicker,
+ * DateField, and Calendar variants and use cases.
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState } from 'react';
+import { DatePicker, DateRangePicker, DateField, Calendar } from './index';
+import { parseDate, today, getLocalTimeZone, isWeekend } from '@internationalized/date';
+import type { DateValue } from 'react-aria-components';
+
+// =============================================================================
+// DatePicker Stories
+// =============================================================================
+
+const datePickerMeta: Meta<typeof DatePicker> = {
+  title: 'Elements/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A fully accessible date picker combining keyboard-editable date segments with a calendar popover. WCAG 2.2 AAA compliant.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant of the date picker',
+    },
+    granularity: {
+      control: 'select',
+      options: ['day', 'hour', 'minute', 'second'],
+      description: 'Controls which date/time segments are displayed',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the date picker is disabled',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Whether the date picker is read-only',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the date picker is required',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the date picker is in an invalid state',
+    },
+  },
+};
+
+export default datePickerMeta;
+type DatePickerStory = StoryObj<typeof DatePicker>;
+
+export const Default: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+  },
+};
+
+export const WithDescription: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    description: 'Select the date for your event',
+  },
+};
+
+export const WithDefaultValue: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    defaultValue: parseDate('2025-06-15'),
+  },
+};
+
+export const Controlled: DatePickerStory = {
+  render: function ControlledDatePicker() {
+    const [value, setValue] = useState<DateValue | null>(parseDate('2025-06-15'));
+    return (
+      <div className="space-y-4">
+        <DatePicker label="Event Date" value={value} onChange={setValue} />
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Selected: {value?.toString() ?? 'None'}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const SizeSmall: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    size: 'sm',
+    description: 'Compact size (36px cells) - desktop only, not AAA compliant',
+  },
+};
+
+export const SizeLarge: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    size: 'lg',
+    description: 'Large size (56px cells) - AAA compliant',
+  },
+};
+
+export const Required: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    isRequired: true,
+  },
+};
+
+export const Disabled: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    isDisabled: true,
+    defaultValue: parseDate('2025-06-15'),
+  },
+};
+
+export const ReadOnly: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    isReadOnly: true,
+    defaultValue: parseDate('2025-06-15'),
+  },
+};
+
+export const Invalid: DatePickerStory = {
+  args: {
+    label: 'Event Date',
+    isInvalid: true,
+    errorMessage: 'Please select a valid date',
+    defaultValue: parseDate('2025-06-15'),
+  },
+};
+
+export const WithMinMaxDates: DatePickerStory = {
+  args: {
+    label: 'Appointment Date',
+    description: 'Select a date between June 10 and June 20, 2025',
+    minValue: parseDate('2025-06-10'),
+    maxValue: parseDate('2025-06-20'),
+    defaultValue: parseDate('2025-06-15'),
+  },
+};
+
+export const WithUnavailableDates: DatePickerStory = {
+  args: {
+    label: 'Appointment Date',
+    description: 'Weekends are unavailable',
+    isDateUnavailable: (date: DateValue) => isWeekend(date, 'en-US'),
+  },
+};
+
+export const WithTimeGranularity: DatePickerStory = {
+  args: {
+    label: 'Meeting Time',
+    granularity: 'minute',
+    description: 'Select date and time',
+  },
+};
+
+// =============================================================================
+// DateRangePicker Stories
+// =============================================================================
+
+export const DateRangePickerDefault: StoryObj<typeof DateRangePicker> = {
+  render: () => <DateRangePicker label="Stay Duration" />,
+  name: 'DateRangePicker - Default',
+};
+
+export const DateRangePickerWithDescription: StoryObj<typeof DateRangePicker> = {
+  render: () => (
+    <DateRangePicker
+      label="Stay Duration"
+      description="Select check-in and check-out dates"
+    />
+  ),
+  name: 'DateRangePicker - With Description',
+};
+
+export const DateRangePickerWithDefaultValue: StoryObj<typeof DateRangePicker> = {
+  render: () => (
+    <DateRangePicker
+      label="Stay Duration"
+      defaultValue={{
+        start: parseDate('2025-06-15'),
+        end: parseDate('2025-06-20'),
+      }}
+    />
+  ),
+  name: 'DateRangePicker - With Default Value',
+};
+
+export const DateRangePickerSizes: StoryObj<typeof DateRangePicker> = {
+  render: () => (
+    <div className="space-y-8">
+      <DateRangePicker label="Small" size="sm" />
+      <DateRangePicker label="Default" size="default" />
+      <DateRangePicker label="Large" size="lg" />
+    </div>
+  ),
+  name: 'DateRangePicker - All Sizes',
+};
+
+// =============================================================================
+// DateField Stories
+// =============================================================================
+
+export const DateFieldDefault: StoryObj<typeof DateField> = {
+  render: () => <DateField label="Birth Date" />,
+  name: 'DateField - Default',
+};
+
+export const DateFieldWithDescription: StoryObj<typeof DateField> = {
+  render: () => (
+    <DateField label="Birth Date" description="Enter your date of birth" />
+  ),
+  name: 'DateField - With Description',
+};
+
+export const DateFieldSizes: StoryObj<typeof DateField> = {
+  render: () => (
+    <div className="space-y-8">
+      <DateField label="Small" size="sm" />
+      <DateField label="Default" size="default" />
+      <DateField label="Large" size="lg" />
+    </div>
+  ),
+  name: 'DateField - All Sizes',
+};
+
+export const DateFieldWithValue: StoryObj<typeof DateField> = {
+  render: () => (
+    <DateField label="Birth Date" defaultValue={parseDate('1990-01-15')} />
+  ),
+  name: 'DateField - With Default Value',
+};
+
+// =============================================================================
+// Calendar Stories
+// =============================================================================
+
+export const CalendarDefault: StoryObj<typeof Calendar> = {
+  render: () => <Calendar />,
+  name: 'Calendar - Default',
+};
+
+export const CalendarWithValue: StoryObj<typeof Calendar> = {
+  render: () => <Calendar defaultValue={parseDate('2025-06-15')} />,
+  name: 'Calendar - With Default Value',
+};
+
+export const CalendarSizes: StoryObj<typeof Calendar> = {
+  render: () => (
+    <div className="flex gap-8">
+      <div>
+        <p className="mb-2 text-sm font-medium">Small (36px)</p>
+        <Calendar size="sm" />
+      </div>
+      <div>
+        <p className="mb-2 text-sm font-medium">Default (44px)</p>
+        <Calendar size="default" />
+      </div>
+      <div>
+        <p className="mb-2 text-sm font-medium">Large (56px)</p>
+        <Calendar size="lg" />
+      </div>
+    </div>
+  ),
+  name: 'Calendar - All Sizes',
+};
+
+export const CalendarWithMinMax: StoryObj<typeof Calendar> = {
+  render: () => (
+    <Calendar
+      minValue={parseDate('2025-06-10')}
+      maxValue={parseDate('2025-06-20')}
+      defaultValue={parseDate('2025-06-15')}
+    />
+  ),
+  name: 'Calendar - With Min/Max',
+};
+
+export const CalendarControlled: StoryObj<typeof Calendar> = {
+  render: function ControlledCalendar() {
+    const [value, setValue] = useState<DateValue | null>(parseDate('2025-06-15'));
+    return (
+      <div className="space-y-4">
+        <Calendar value={value} onChange={setValue} />
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Selected: {value?.toString() ?? 'None'}
+        </p>
+      </div>
+    );
+  },
+  name: 'Calendar - Controlled',
+};
+
+// =============================================================================
+// All Variants Overview
+// =============================================================================
+
+export const AllComponents: StoryObj = {
+  render: () => (
+    <div className="space-y-12">
+      <section>
+        <h2 className="mb-4 text-lg font-semibold">DatePicker</h2>
+        <DatePicker label="Event Date" description="Select a date for your event" />
+      </section>
+
+      <section>
+        <h2 className="mb-4 text-lg font-semibold">DateRangePicker</h2>
+        <DateRangePicker
+          label="Stay Duration"
+          description="Select check-in and check-out dates"
+        />
+      </section>
+
+      <section>
+        <h2 className="mb-4 text-lg font-semibold">DateField</h2>
+        <DateField label="Birth Date" description="Enter your date of birth" />
+      </section>
+
+      <section>
+        <h2 className="mb-4 text-lg font-semibold">Calendar</h2>
+        <Calendar />
+      </section>
+    </div>
+  ),
+  name: 'All Components Overview',
+};