@k3-universe/react-kit 0.0.9 → 0.0.11

package/src/stories/kit/builder/Form.Time.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
+
+const meta: Meta<typeof FormBuilder> = {
+  title: 'Kit/Builder/Form (Time)',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof FormBuilder>
+
+export const TimeFields: Story = {
+  name: 'Time fields (12/24h, precision)',
+  args: {
+    sections: [
+      {
+        title: 'Time',
+        description: 'TimePicker fields with different precisions and hour cycles',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'time24h',
+            label: 'Time (24h HH:mm)',
+            type: 'time',
+            timePrecision: 'minute',
+            hourCycle: 24,
+            minuteStep: 5,
+          },
+          {
+            name: 'time12h',
+            label: 'Time (12h hour only)',
+            type: 'time',
+            timePrecision: 'hour',
+            hourCycle: 12,
+          },
+          {
+            name: 'timeWithSeconds',
+            label: 'Time (24h HH:mm:ss)',
+            type: 'time',
+            timePrecision: 'second',
+            hourCycle: 24,
+            secondStep: 10,
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (time):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-4xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}

package/src/stories/kit/builder/Section.stories.tsx

@@ -12,10 +12,66 @@ const meta: Meta<typeof SectionBuilder> = {
   render: (args) => <SectionBuilder {...args} />,
 };
 
-export default meta;
-
 type Story = StoryObj<typeof SectionBuilder>;
 
+export const TabsLayout: Story = {
+  name: 'Tabs layout',
+  args: {
+    sections: [
+      {
+        id: 'tabs-1',
+        title: 'Tabbed Section',
+        subtitle: 'Demonstrates tabs with nested sections',
+        variant: 'card',
+        layout: 'tabs',
+        tabsListClassName: 'w-full',
+        tabsContentClassName: 'mt-2',
+        tabs: [
+          {
+            id: 'tab-a',
+            label: 'Overview',
+            node: {
+              id: 'tab-a-node',
+              layout: 'grid',
+              grid: { cols: 1, mdCols: 12, gap: 'gap-4' },
+              children: [
+                { key: 't1', content: demoBox('Overview content A'), span: { md: 6 } },
+                { key: 't2', content: demoBox('Overview content B'), span: { md: 6 } },
+              ],
+            },
+          },
+          {
+            id: 'tab-b',
+            label: 'Details',
+            node: {
+              id: 'tab-b-node',
+              layout: 'grid',
+              grid: { cols: 1, mdCols: 12, gap: 'gap-4' },
+              children: [
+                {
+                  id: 'inner-details',
+                  title: 'Inner details section',
+                  variant: 'separator',
+                  layout: 'grid',
+                  grid: { cols: 1, mdCols: 12 },
+                  children: [
+                    { key: 'd1', content: demoBox('Detail 1'), span: { md: 4 } },
+                    { key: 'd2', content: demoBox('Detail 2'), span: { md: 4 } },
+                    { key: 'd3', content: demoBox('Detail 3'), span: { md: 4 } },
+                  ],
+                } as unknown as SectionNode,
+              ],
+            },
+          },
+        ],
+      } as unknown as SectionNode,
+    ],
+  },
+  render: (args) => <SectionBuilder {...args} />,
+};
+
+export default meta;
+
 function demoBox(text: string, className?: string) {
   return (
     <div className={['rounded border p-3 text-sm', className].filter(Boolean).join(' ')}>

package/src/stories/kit/components/Autocomplete.stories.tsx

@@ -96,3 +96,30 @@ export const CustomRender: Story = {
   } satisfies Partial<AutocompleteProps>,
   render: (args) => <Autocomplete {...args} />,
 };
+
+export const MultiSelectWithChips: Story = {
+  name: 'Multi select with chips',
+  args: {
+    mode: 'client',
+    options: CITY_OPTIONS,
+    multiple: true,
+    placeholder: 'Select cities...',
+    searchPlaceholder: 'Type to search cities...',
+    chipVariant: 'secondary',
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};
+
+export const TaggingNoOptions: Story = {
+  name: 'Tagging (no options)',
+  args: {
+    mode: 'client',
+    options: [],
+    multiple: true,
+    allowCustomValue: true,
+    placeholder: 'Type and press Enter to add tags',
+    searchPlaceholder: 'Type a tag and press Enter',
+    chipVariant: 'outline',
+  } satisfies Partial<AutocompleteProps>,
+  render: (args) => <Autocomplete {...args} />,
+};

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

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { DatePicker } from '../../../kit/components/datepicker/DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Kit/Components/DatePicker',
+  component: DatePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const WithConstraints: Story = {
+  name: 'With constraints',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const now = new Date();
+      const minDate = new Date(now.getFullYear(), now.getMonth(), 5);
+      const maxDate = new Date(now.getFullYear(), now.getMonth(), 25);
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} minDate={minDate} maxDate={maxDate} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const DisabledSingleDates: Story = {
+  name: 'Disabled single dates',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const today = new Date();
+      const d1 = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const d2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+      const d3 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} disabledDates={[d1, d2, d3]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const DisabledDateRanges: Story = {
+  name: 'Disabled date ranges',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const base = new Date();
+      const range1 = { from: new Date(base.getFullYear(), base.getMonth(), 10), to: new Date(base.getFullYear(), base.getMonth(), 15) };
+      const range2 = { from: new Date(base.getFullYear(), base.getMonth(), 20), to: new Date(base.getFullYear(), base.getMonth(), 22) };
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected date</div>
+            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+          </div>
+          <DatePicker value={value} onChange={setValue} disabledDates={[range1, range2]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const ControlledOpen: Story = {
+  name: 'Controlled open + custom footer labels',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<Date | null>(new Date());
+      const [open, setOpen] = React.useState(false);
+      return (
+        <div className="p-6 space-y-4">
+          <button type="button" className="underline text-sm" onClick={() => setOpen((o) => !o)}>
+            Toggle popover
+          </button>
+          <DatePicker
+            value={value}
+            onChange={setValue}
+            open={open}
+            onOpenChange={setOpen}
+            clearLabel="Reset"
+            closeLabel="Done"
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/stories/kit/components/DateRangePicker.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { DateRangePicker } from '../../../kit/components/datepicker/DateRangePicker';
+import type { DateRange } from 'react-day-picker';
+
+const meta: Meta<typeof DateRangePicker> = {
+  title: 'Kit/Components/DateRangePicker',
+  component: DateRangePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DateRangePicker>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => {
+    function Demo() {
+      const [value, setValue] = React.useState<DateRange | null>({
+        from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+        to: new Date(new Date().getFullYear(), new Date().getMonth(), 15),
+      });
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected range</div>
+            <div className="font-medium">
+              {value?.from
+                ? `${value.from.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' })} \t– ${value?.to?.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) ?? '…'}`
+                : '—'}
+            </div>
+          </div>
+          <DateRangePicker value={value} onChange={setValue} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const DisabledSingleDates: Story = {
+  name: 'Disabled single dates',
+  render: () => {
+    function Demo() {
+      const today = new Date();
+      const d1 = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const d2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+      const d3 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      const [value, setValue] = React.useState<DateRange | null>(null);
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected range</div>
+            <div className="font-medium">
+              {value?.from
+                ? `${value.from.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' })} \t– ${value?.to?.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) ?? '…'}`
+                : '—'}
+            </div>
+          </div>
+          <DateRangePicker value={value} onChange={setValue} disabledDates={[d1, d2, d3]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const DisabledDateRanges: Story = {
+  name: 'Disabled date ranges',
+  render: () => {
+    function Demo() {
+      const base = new Date();
+      const range1 = { from: new Date(base.getFullYear(), base.getMonth(), 10), to: new Date(base.getFullYear(), base.getMonth(), 15) };
+      const range2 = { from: new Date(base.getFullYear(), base.getMonth(), 20), to: new Date(base.getFullYear(), base.getMonth(), 22) };
+      const [value, setValue] = React.useState<DateRange | null>({ from: range1.from, to: range1.from });
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected range</div>
+            <div className="font-medium">
+              {value?.from
+                ? `${value.from.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' })} \t– ${value?.to?.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) ?? '…'}`
+                : '—'}
+            </div>
+          </div>
+          <DateRangePicker value={value} onChange={setValue} disabledDates={[range1, range2]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const WithConstraints: Story = {
+  name: 'With constraints',
+  render: () => {
+    function Demo() {
+      const now = new Date();
+      const minDate = new Date(now.getFullYear(), now.getMonth(), 1);
+      const maxDate = new Date(now.getFullYear(), now.getMonth(), 28);
+      const [value, setValue] = React.useState<DateRange | null>({ from: minDate, to: maxDate });
+      return (
+        <div className="p-6 space-y-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Selected range</div>
+            <div className="font-medium">
+              {value?.from
+                ? `${value.from.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' })} \t– ${value?.to?.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) ?? '…'}`
+                : '—'}
+            </div>
+          </div>
+          <DateRangePicker value={value} onChange={setValue} minDate={minDate} maxDate={maxDate} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const PresetsPanelApplyMode: Story = {
+  name: 'Presets panel + apply mode',
+  render: () => {
+    function Demo() {
+      const now = new Date();
+      const [value, setValue] = React.useState<DateRange | null>({
+        from: new Date(now.getFullYear(), now.getMonth(), 1),
+        to: new Date(now.getFullYear(), now.getMonth(), 1),
+      });
+      const [open, setOpen] = React.useState<boolean>(false);
+      return (
+        <div className="p-6 space-y-4">
+          <button type="button" className="underline text-sm" onClick={() => setOpen((o) => !o)}>
+            Toggle popover
+          </button>
+          <DateRangePicker
+            value={value}
+            onChange={setValue}
+            open={open}
+            onOpenChange={setOpen}
+            presetsPanel
+            numberOfMonths={2}
+            cancelLabel="Cancel"
+            applyLabel="Update"
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/stories/kit/components/MonthPicker.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { MonthPicker } from '../../../kit/components/monthpicker/MonthPicker';
+
+const meta: Meta<typeof MonthPicker> = {
+  title: 'Kit/Components/MonthPicker',
+  component: MonthPicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MonthPicker>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => {
+    const [selected, setSelected] = React.useState<Date | undefined>(new Date());
+
+    return (
+      <div className="p-6">
+        <div className="mb-4">
+          <div className="text-sm text-muted-foreground">Selected month</div>
+          <div className="font-medium">{selected?.toLocaleString(undefined, { month: 'long', year: 'numeric' })}</div>
+        </div>
+        <MonthPicker
+          selectedMonth={selected}
+          onMonthSelect={(d) => setSelected(d)}
+          callbacks={{
+            yearLabel: (y) => `${y}`,
+            monthLabel: (m) => m.name,
+          }}
+          variant={{
+            calendar: { main: 'ghost', selected: 'default' },
+            chevrons: 'outline',
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithConstraints: Story = {
+  name: 'With constraints',
+  render: () => {
+    const [selected, setSelected] = React.useState<Date | undefined>(new Date());
+
+    const now = new Date();
+    const minDate = new Date(now.getFullYear(), 2); // Mar this year
+    const maxDate = new Date(now.getFullYear(), 9); // Oct this year
+    const disabledDates = [
+      new Date(now.getFullYear(), 4), // May
+      new Date(now.getFullYear(), 5), // Jun
+    ];
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground">Selected month</div>
+          <div className="font-medium">{selected?.toLocaleString(undefined, { month: 'long', year: 'numeric' })}</div>
+        </div>
+        <MonthPicker
+          selectedMonth={selected}
+          onMonthSelect={(d) => setSelected(d)}
+          minDate={minDate}
+          maxDate={maxDate}
+          disabledDates={disabledDates}
+          callbacks={{ yearLabel: (y) => `FY ${y}`, monthLabel: (m) => m.name }}
+          variant={{ calendar: { main: 'ghost', selected: 'default' }, chevrons: 'outline' }}
+        />
+        <div className="text-xs text-muted-foreground">
+          Allowed months: {minDate.toLocaleString(undefined, { month: 'short' })} - {maxDate.toLocaleString(undefined, { month: 'short' })} ({minDate.getFullYear()})
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/kit/components/MonthRangePicker.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { MonthRangePicker } from '../../../kit/components/monthpicker/MonthRangePicker';
+
+const meta: Meta<typeof MonthRangePicker> = {
+  title: 'Kit/Components/MonthRangePicker',
+  component: MonthRangePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MonthRangePicker>;
+
+export const Basic: Story = {
+  name: 'Basic',
+  render: () => {
+    const [range, setRange] = React.useState<{ start: Date; end: Date } | undefined>({
+      start: new Date(new Date().getFullYear(), 0),
+      end: new Date(new Date().getFullYear(), 11),
+    });
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground">Selected range</div>
+          <div className="font-medium">
+            {range
+              ? `${range.start.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → ${range.end.toLocaleString(undefined, { month: 'short', year: 'numeric' })}`
+              : '—'}
+          </div>
+        </div>
+        <MonthRangePicker
+          selectedMonthRange={range}
+          onMonthRangeSelect={(r) => setRange(r)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithQuickSelectorsAndConstraints: Story = {
+  name: 'With quick selectors + constraints',
+  render: () => {
+    const [range, setRange] = React.useState<{ start: Date; end: Date } | undefined>();
+
+    const now = new Date();
+    const minDate = new Date(now.getFullYear() - 1, 0); // Jan last year
+    const maxDate = new Date(now.getFullYear() + 1, 11); // Dec next year
+
+    const customSelectors = [
+      {
+        label: 'This year',
+        startMonth: new Date(now.getFullYear(), 0),
+        endMonth: new Date(now.getFullYear(), 11),
+      },
+      {
+        label: 'YTD',
+        startMonth: new Date(now.getFullYear(), 0),
+        endMonth: new Date(now.getFullYear(), now.getMonth()),
+      },
+      {
+        label: 'Last 6 months',
+        startMonth: new Date(now.getFullYear(), Math.max(0, now.getMonth() - 5)),
+        endMonth: new Date(now.getFullYear(), now.getMonth()),
+      },
+    ];
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground">Selected range</div>
+          <div className="font-medium">
+            {range
+              ? `${range.start.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → ${range.end.toLocaleString(undefined, { month: 'short', year: 'numeric' })}`
+              : '—'}
+          </div>
+        </div>
+        <MonthRangePicker
+          selectedMonthRange={range}
+          onMonthRangeSelect={(r) => setRange(r)}
+          minDate={minDate}
+          maxDate={maxDate}
+          quickSelectors={customSelectors}
+          showQuickSelectors
+          callbacks={{ yearLabel: (y) => `${y}` }}
+          variant={{ calendar: { main: 'ghost', selected: 'default' }, chevrons: 'outline' }}
+        />
+        <div className="text-xs text-muted-foreground">
+          Allowed: {minDate.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → {maxDate.toLocaleString(undefined, { month: 'short', year: 'numeric' })}
+        </div>
+      </div>
+    );
+  },
+};