@k3-universe/react-kit 0.0.9 → 0.0.10

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>
+    );
+  },
+};

package/storybook-static/assets/Accordion.stories-KU4JBR8U.js

@@ -0,0 +1,52 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{A as n,a as o,b as r,c as i}from"./accordion-DVgwQcnw.js";import{r as T}from"./iframe-v7iAhKit.js";import"./index-CDY5kTx5.js";import"./index-Bv9yk470.js";import"./index-DbaA6-o1.js";import"./index-DW48STyt.js";import"./index-ByqivBWx.js";import"./index-D8RXF03I.js";import"./index-Tp9IdbR8.js";import"./index-DrN5n71E.js";import"./index-CwBdPBFz.js";import"./index-CGnyVRgB.js";import"./index-AvwFFKJc.js";import"./index-BfiCOk42.js";import"./index-B_qx7A5T.js";import"./utils-D-KgF5mV.js";import"./chevron-down-D_37S6il.js";import"./createLucideIcon-BrHXro7t.js";import"./preload-helper-Dp1pzeXC.js";const G={title:"Shadcn/UI/Accordion",component:n},c={args:{type:"single",collapsible:!0},render:t=>e.jsxs(n,{...t,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Is it accessible?"}),e.jsx(i,{children:"Yes. It adheres to WAI-ARIA design patterns."})]}),e.jsxs(o,{value:"item-2",children:[e.jsx(r,{children:"Is it styled?"}),e.jsx(i,{children:"Yes. It comes with default styles that can be overridden."})]}),e.jsxs(o,{value:"item-3",children:[e.jsx(r,{children:"Is it animated?"}),e.jsx(i,{children:"Yes. It uses utility classes for smooth animations."})]})]})},s={args:{type:"multiple",defaultValue:["item-1"]},render:t=>e.jsxs(n,{...t,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Open multiple items?"}),e.jsx(i,{children:"Yes. In multiple mode you can keep several sections open."})]}),e.jsxs(o,{value:"item-2",children:[e.jsx(r,{children:"Keeps state independent?"}),e.jsx(i,{children:"Each item can be toggled independently in multiple mode."})]}),e.jsxs(o,{value:"item-3",children:[e.jsx(r,{children:"Works with defaultValue?"}),e.jsx(i,{children:"Provide an array of values to open initially."})]})]})},d={render:t=>e.jsxs(n,{...t,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Interactable item"}),e.jsx(i,{children:"This item can be toggled as usual."})]}),e.jsxs(o,{value:"item-2",disabled:!0,children:[e.jsx(r,{children:"Disabled item"}),e.jsx(i,{children:"This content cannot be toggled because the item is disabled."})]})]})};function y(){const[t,C]=T.useState("item-1");return e.jsxs(n,{type:"single",collapsible:!0,value:t,onValueChange:C,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Controlled: Item 1"}),e.jsx(i,{children:"Clicking again will collapse because collapsible is true."})]}),e.jsxs(o,{value:"item-2",children:[e.jsx(r,{children:"Controlled: Item 2"}),e.jsx(i,{children:"State is managed via value/onValueChange."})]})]})}const a={render:()=>e.jsx(y,{})};var l,m,u;c.parameters={...c.parameters,docs:{...(l=c.parameters)==null?void 0:l.docs,source:{originalSource:`{
+  args: {
+    type: 'single',
+    collapsible: true
+  },
+  render: args => <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to WAI-ARIA design patterns.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>Yes. It comes with default styles that can be overridden.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>Yes. It uses utility classes for smooth animations.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+}`,...(u=(m=c.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var p,g,A;s.parameters={...s.parameters,docs:{...(p=s.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  args: {
+    type: 'multiple',
+    defaultValue: ['item-1']
+  },
+  render: args => <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Open multiple items?</AccordionTrigger>
+        <AccordionContent>Yes. In multiple mode you can keep several sections open.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Keeps state independent?</AccordionTrigger>
+        <AccordionContent>Each item can be toggled independently in multiple mode.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Works with defaultValue?</AccordionTrigger>
+        <AccordionContent>Provide an array of values to open initially.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+}`,...(A=(g=s.parameters)==null?void 0:g.docs)==null?void 0:A.source}}};var h,I,x;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  render: args => <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Interactable item</AccordionTrigger>
+        <AccordionContent>This item can be toggled as usual.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" disabled>
+        <AccordionTrigger>Disabled item</AccordionTrigger>
+        <AccordionContent>This content cannot be toggled because the item is disabled.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+}`,...(x=(I=d.parameters)==null?void 0:I.docs)==null?void 0:x.source}}};var j,v,b;a.parameters={...a.parameters,docs:{...(j=a.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  render: () => <ControlledAccordionDemo />
+}`,...(b=(v=a.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};const H=["Basic","Multiple","DisabledItem","Controlled"];export{c as Basic,a as Controlled,d as DisabledItem,s as Multiple,H as __namedExportsOrder,G as default};