@k3-universe/react-kit 0.0.41 → 0.0.42

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

@@ -1,75 +1,75 @@
-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',
-  component: FormBuilder,
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof FormBuilder>;
-
-export const Pickers: Story = {
-  name: 'Pickers (Date, Date Range, Month, Month Range)',
-  args: {
-    sections: [
-      {
-        title: 'Pickers',
-        description:
-          'Showcase of DatePicker, DateRangePicker, MonthPicker, and MonthRangePicker via FormBuilder fields',
-        variant: 'card',
-        layout: 'grid',
-        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
-        fields: [
-          {
-            name: 'dateSingle',
-            label: 'Date (DatePicker)',
-            type: 'date_picker',
-            placeholder: 'Select a date',
-            minDate: new Date(new Date().getFullYear(), 0, 1),
-            maxDate: new Date(new Date().getFullYear(), 11, 31),
-          },
-          {
-            name: 'dateRange',
-            label: 'Date Range (DateRangePicker)',
-            type: 'date_range',
-            placeholder: 'Select a date range',
-            numberOfMonths: 2,
-            popoverSide: 'bottom',
-          },
-          {
-            name: 'monthSingle',
-            label: 'Month (MonthPicker)',
-            type: 'month',
-            placeholder: 'Select a month',
-            minDate: new Date(new Date().getFullYear() - 1, 0, 1),
-            maxDate: new Date(new Date().getFullYear() + 1, 11, 31),
-          },
-          {
-            name: 'monthRange',
-            label: 'Month Range (MonthRangePicker)',
-            type: 'month_range',
-            placeholder: 'Select a start and end month',
-          },
-        ],
-      },
-    ],
-    onSubmit: (data: unknown) => {
-      console.log('Submit (pickers):', data);
-    },
-    showActions: true,
-  } satisfies Partial<FormBuilderProps>,
-  render: (args) => (
-    <div className="max-w-4xl mx-auto p-6">
-      <FormBuilder {...(args as FormBuilderProps)} />
-    </div>
-  ),
-};
+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',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormBuilder>;
+
+export const Pickers: Story = {
+  name: 'Pickers (Date, Date Range, Month, Month Range)',
+  args: {
+    sections: [
+      {
+        title: 'Pickers',
+        description:
+          'Showcase of DatePicker, DateRangePicker, MonthPicker, and MonthRangePicker via FormBuilder fields',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'dateSingle',
+            label: 'Date (DatePicker)',
+            type: 'date_picker',
+            placeholder: 'Select a date',
+            minDate: new Date(new Date().getFullYear(), 0, 1),
+            maxDate: new Date(new Date().getFullYear(), 11, 31),
+          },
+          {
+            name: 'dateRange',
+            label: 'Date Range (DateRangePicker)',
+            type: 'date_range',
+            placeholder: 'Select a date range',
+            numberOfMonths: 2,
+            popoverSide: 'bottom',
+          },
+          {
+            name: 'monthSingle',
+            label: 'Month (MonthPicker)',
+            type: 'month',
+            placeholder: 'Select a month',
+            minDate: new Date(new Date().getFullYear() - 1, 0, 1),
+            maxDate: new Date(new Date().getFullYear() + 1, 11, 31),
+          },
+          {
+            name: 'monthRange',
+            label: 'Month Range (MonthRangePicker)',
+            type: 'month_range',
+            placeholder: 'Select a start and end month',
+          },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (pickers):', 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/Form.Simple.stories.tsx

@@ -1,91 +1,91 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
-import {
-  createSection,
-  createField,
-  commonValidations,
-} from '../../../kit/builder/form/utils';
-
-const meta: Meta<typeof FormBuilder> = {
-  title: 'Kit/Builder/Form',
-  component: FormBuilder,
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof FormBuilder>;
-
-export const SimpleExample: Story = {
-  name: 'Simple example',
-  render: () => {
-    const handleSubmit = (data: unknown) => {
-      console.log('Form submitted:', data);
-    };
-
-    const sections = [
-      createSection.card('Contact Information', [
-        createField.text('name', 'Full Name', {
-          required: true,
-          placeholder: 'Enter your full name',
-        }),
-        createField.email('email', 'Email Address', {
-          required: true,
-          placeholder: 'Enter your email address',
-        }),
-        createField.text('phone', 'Phone Number', {
-          validation: commonValidations.phone,
-          placeholder: '+1 (555) 123-4567',
-        }),
-        createField.select(
-          'subject',
-          'Subject',
-          [
-            { label: 'General Inquiry', value: 'general' },
-            { label: 'Technical Support', value: 'support' },
-            { label: 'Sales Question', value: 'sales' },
-            { label: 'Partnership', value: 'partnership' },
-          ],
-          {
-            required: true,
-            placeholder: 'Select a subject',
-          },
-        ),
-        createField.textarea('message', 'Message', {
-          required: true,
-          placeholder: 'Enter your message here...',
-          gridCols: 2,
-        }),
-        createField.checkbox('subscribe', 'Subscribe to newsletter', {
-          defaultValue: false,
-          gridCols: 2,
-        }),
-        createField.switch('contactPermission', 'Allow contact by phone', {
-          defaultValue: false,
-          gridCols: 2,
-        }),
-      ]),
-    ];
-
-    return (
-      <div className="max-w-2xl mx-auto p-6">
-        <div className="mb-6">
-          <h1 className="text-2xl font-bold text-gray-900">Contact Us</h1>
-          <p className="text-gray-600 mt-2">
-            Fill out the form below and we'll get back to you as soon as
-            possible.
-          </p>
-        </div>
-
-        <FormBuilder
-          sections={sections}
-          onSubmit={handleSubmit}
-          className="space-y-6"
-        />
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import {
+  createSection,
+  createField,
+  commonValidations,
+} from '../../../kit/builder/form/utils';
+
+const meta: Meta<typeof FormBuilder> = {
+  title: 'Kit/Builder/Form',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormBuilder>;
+
+export const SimpleExample: Story = {
+  name: 'Simple example',
+  render: () => {
+    const handleSubmit = (data: unknown) => {
+      console.log('Form submitted:', data);
+    };
+
+    const sections = [
+      createSection.card('Contact Information', [
+        createField.text('name', 'Full Name', {
+          required: true,
+          placeholder: 'Enter your full name',
+        }),
+        createField.email('email', 'Email Address', {
+          required: true,
+          placeholder: 'Enter your email address',
+        }),
+        createField.text('phone', 'Phone Number', {
+          validation: commonValidations.phone,
+          placeholder: '+1 (555) 123-4567',
+        }),
+        createField.select(
+          'subject',
+          'Subject',
+          [
+            { label: 'General Inquiry', value: 'general' },
+            { label: 'Technical Support', value: 'support' },
+            { label: 'Sales Question', value: 'sales' },
+            { label: 'Partnership', value: 'partnership' },
+          ],
+          {
+            required: true,
+            placeholder: 'Select a subject',
+          },
+        ),
+        createField.textarea('message', 'Message', {
+          required: true,
+          placeholder: 'Enter your message here...',
+          gridCols: 2,
+        }),
+        createField.checkbox('subscribe', 'Subscribe to newsletter', {
+          defaultValue: false,
+          gridCols: 2,
+        }),
+        createField.switch('contactPermission', 'Allow contact by phone', {
+          defaultValue: false,
+          gridCols: 2,
+        }),
+      ]),
+    ];
+
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-gray-900">Contact Us</h1>
+          <p className="text-gray-600 mt-2">
+            Fill out the form below and we'll get back to you as soon as
+            possible.
+          </p>
+        </div>
+
+        <FormBuilder
+          sections={sections}
+          onSubmit={handleSubmit}
+          className="space-y-6"
+        />
+      </div>
+    );
+  },
+};

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

@@ -1,68 +1,68 @@
-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',
-  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>
-  ),
-};
+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',
+  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>
+  ),
+};