@emara/ui 1.1.0

package/components/ui/date-picker.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { DatePicker } from "./date-picker";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Forms/DatePicker",
+  component: DatePicker,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: { control: "select", options: ["xs", "sm", "md", "lg", "xl"] },
+    invalid: { control: "boolean" },
+    clearable: { control: "boolean" },
+    disabled: { control: "boolean" },
+    locale: { control: "select", options: ["en-US", "fr-FR", "fr-MA", "ar-MA"] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-72">
+      <DatePicker {...args} />
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [date, setDate] = useState<Date | null>(null);
+      return (
+        <div className="w-72 space-y-2">
+          <DatePicker value={date} onValueChange={setDate} clearable />
+          <p className="text-muted-foreground text-xs">
+            value: {date ? date.toISOString().slice(0, 10) : "null"}
+          </p>
+        </div>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <DatePicker size="xs" placeholder="xs" />
+      <DatePicker size="sm" placeholder="sm" />
+      <DatePicker size="md" placeholder="md" />
+      <DatePicker size="lg" placeholder="lg" />
+      <DatePicker size="xl" placeholder="xl" />
+    </div>
+  ),
+};
+
+export const FrenchLocale: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker locale="fr-FR" defaultValue={new Date(2026, 0, 15)} format="PPP" />
+    </div>
+  ),
+};
+
+export const ArabicLocale: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker locale="ar-MA" defaultValue={new Date(2026, 0, 15)} format="PPP" />
+    </div>
+  ),
+};
+
+export const Clearable: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker clearable defaultValue={new Date()} />
+    </div>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker invalid defaultValue={new Date()} />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker disabled defaultValue={new Date()} />
+    </div>
+  ),
+};
+
+export const MinMax: Story = {
+  render: () => {
+    const today = new Date();
+    const oneMonthAgo = new Date(today);
+    oneMonthAgo.setMonth(today.getMonth() - 1);
+    const oneMonthFromNow = new Date(today);
+    oneMonthFromNow.setMonth(today.getMonth() + 1);
+    return (
+      <div className="w-72">
+        <DatePicker min={oneMonthAgo} max={oneMonthFromNow} placeholder="Within ±1 month" />
+      </div>
+    );
+  },
+};
+
+export const CustomFormat: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker defaultValue={new Date(2026, 0, 15)} format="EEEE, MMMM do yyyy" />
+    </div>
+  ),
+};
+
+export const WeekStartsOnMonday: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker weekStartsOn={1} defaultValue={new Date()} />
+    </div>
+  ),
+};
+
+export const WithWeekNumbers: Story = {
+  render: () => (
+    <div className="w-72">
+      <DatePicker showWeekNumbers defaultValue={new Date()} />
+    </div>
+  ),
+};
+
+/**
+ * Range mode. Pick a start date, then an end date — in-range days fill with
+ * `--accent`, endpoints with `--primary`. While only the start is picked,
+ * the trigger shows the start followed by `rangeEndPlaceholder` ("Pick end
+ * date" by default).
+ */
+export const RangeMode: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [value, setValue] = useState<{ from: Date | undefined; to?: Date | undefined } | null>({
+        from: new Date(2026, 0, 5),
+        to: new Date(2026, 0, 12),
+      });
+      return (
+        <div className="w-80 space-y-2">
+          <DatePicker mode="range" value={value} onValueChange={(v) => setValue(v)} clearable />
+          <p className="text-muted-foreground text-xs">
+            value:{" "}
+            {value
+              ? JSON.stringify({ from: value.from?.toDateString(), to: value.to?.toDateString() })
+              : "null"}
+          </p>
+        </div>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+/**
+ * Range mode rendered inline (no popover). Useful for filter sidebars.
+ */
+export const RangeModeInline: Story = {
+  render: () => <DatePicker mode="range" inline defaultValue={{ from: new Date(2026, 0, 5) }} />,
+};
+
+/**
+ * Range mode with quick-pick presets in a side column. Clicking a preset
+ * applies a {from, to} pair and closes the popover.
+ */
+export const RangeWithPresets: Story = {
+  render: () => {
+    const today = new Date();
+    const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const minusDays = (n: number) => {
+      const d = new Date(startOfToday);
+      d.setDate(d.getDate() - n);
+      return d;
+    };
+    return (
+      <div className="w-[28rem]">
+        <DatePicker
+          mode="range"
+          presets={[
+            { label: "Today", value: { from: startOfToday, to: startOfToday } },
+            { label: "Yesterday", value: { from: minusDays(1), to: minusDays(1) } },
+            { label: "Last 7 days", value: { from: minusDays(6), to: startOfToday } },
+            { label: "Last 30 days", value: { from: minusDays(29), to: startOfToday } },
+            {
+              label: "This month",
+              value: { from: new Date(today.getFullYear(), today.getMonth(), 1), to: startOfToday },
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Multiple mode — pick any number of individual dates. Trigger shows the
+ * first two by default and collapses the rest into "+N more". Popover
+ * stays open after each pick so users can keep adding.
+ */
+export const MultipleMode: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [value, setValue] = useState<Date[]>([new Date(2026, 0, 5), new Date(2026, 0, 12)]);
+      return (
+        <div className="w-80 space-y-2">
+          <DatePicker mode="multiple" value={value} onValueChange={setValue} clearable />
+          <p className="text-muted-foreground text-xs">count: {value.length}</p>
+        </div>
+      );
+    };
+    return <Wrapper />;
+  },
+};