@k3-universe/react-kit 0.0.10 → 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/components/TimePicker.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as React from 'react'
+import { TimePicker } from '../../../kit/components/timepicker/TimePicker'
+
+const meta: Meta<typeof TimePicker> = {
+  title: 'Kit/Components/TimePicker',
+  component: TimePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TimePicker>
+
+export const Basic: Story = {
+  name: 'Basic (HH:mm, 24h)',
+  args: {
+    precision: 'minute',
+    hourCycle: 24,
+  },
+  render: (args) => {
+    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</div>
+          <div className="font-medium">{value?.toLocaleTimeString?.() ?? '—'}</div>
+        </div>
+        <TimePicker {...args} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+export const HourOnly12h: Story = {
+  name: 'Hour only (12h)',
+  args: {
+    precision: 'hour',
+    hourCycle: 12,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<Date | null>(new Date())
+    return (
+      <div className="p-6 space-y-4">
+        <TimePicker {...args} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+export const WithSeconds: Story = {
+  name: 'With seconds (HH:mm:ss, 24h)',
+  args: {
+    precision: 'second',
+    hourCycle: 24,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<Date | null>(new Date())
+    return (
+      <div className="p-6 space-y-4">
+        <TimePicker {...args} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as React from 'react'
+import { TimeRangePicker } from '../../../kit/components/timepicker/TimeRangePicker'
+
+const meta: Meta<typeof TimeRangePicker> = {
+  title: 'Kit/Components/TimeRangePicker',
+  component: TimeRangePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TimeRangePicker>
+
+export const Basic: Story = {
+  name: 'Basic (HH:mm – HH:mm, 24h)',
+  args: {
+    precision: 'minute',
+    hourCycle: 24,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<{ from?: Date | null; to?: Date | null } | null>({
+      from: new Date(),
+      to: new Date(new Date().getTime() + 60 * 60 * 1000),
+    })
+
+    return (
+      <div className="p-6 space-y-4">
+        <TimeRangePicker {...args} value={value} onChange={setValue} />
+        <div className="text-xs text-muted-foreground">Value: {value?.from?.toLocaleTimeString?.()} – {value?.to?.toLocaleTimeString?.()}</div>
+      </div>
+    )
+  },
+}