@k3-universe/react-kit 0.0.27 → 0.0.29

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

@@ -1,7 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
 import type { FormBuilderSectionConfig } from '../../../kit/builder/form/components/FormBuilder';
-import { createSection, createField, commonValidations, createDependency, conditions, validators } from '../../../kit/builder/form/utils';
+import {
+  createSection,
+  createField,
+  commonValidations,
+  createDependency,
+  conditions,
+  validators,
+} from '../../../kit/builder/form/utils';
 
 const meta: Meta<typeof FormBuilder> = {
   title: 'Kit/Builder/Form',
@@ -19,21 +26,33 @@ type Story = StoryObj<typeof FormBuilder>;
 export const ComplexExample: Story = {
   name: 'Complex example',
   render: () => {
-
     const handleSubmit = (data: unknown) => {
       console.log('Complex form submitted:', data);
     };
 
-    const handleFieldChange = (name: string, value: unknown, allValues: Record<string, unknown>) => {
+    const handleFieldChange = (
+      name: string,
+      value: unknown,
+      allValues: Record<string, unknown>,
+    ) => {
       console.log(`Field ${name} changed to:`, value);
       console.log('All form values:', allValues);
     };
 
     const sections = [
       createSection.card('Personal Information', [
-        createField.text('firstName', 'First Name', { required: true, placeholder: 'Enter first name' }),
-        createField.text('lastName', 'Last Name', { required: true, placeholder: 'Enter last name' }),
-        createField.email('email', 'Email Address', { required: true, placeholder: 'Enter email address' }),
+        createField.text('firstName', 'First Name', {
+          required: true,
+          placeholder: 'Enter first name',
+        }),
+        createField.text('lastName', 'Last Name', {
+          required: true,
+          placeholder: 'Enter last name',
+        }),
+        createField.email('email', 'Email Address', {
+          required: true,
+          placeholder: 'Enter email address',
+        }),
         createField.date('dateOfBirth', 'Date of Birth', { required: true }),
         createField.select(
           'gender',
@@ -49,46 +68,88 @@ export const ComplexExample: Story = {
       ]),
 
       createSection.card('Address Information', [
-        createField.object('address', 'Primary Address', [
-          createField.text('street', 'Street Address', { required: true, placeholder: '123 Main St', gridCols: 2 }),
-          createField.text('city', 'City', { required: true, placeholder: 'New York' }),
-          createField.text('state', 'State/Province', { required: true, placeholder: 'NY' }),
-          createField.text('postalCode', 'Postal Code', { required: true, placeholder: '10001' }),
-          createField.select(
-            'country',
-            'Country',
-            [
-              { label: 'United States', value: 'US' },
-              { label: 'Canada', value: 'CA' },
-              { label: 'United Kingdom', value: 'UK' },
-              { label: 'Australia', value: 'AU' },
-            ],
-            { required: true, defaultValue: 'US' },
-          ),
-        ], { gridCols: 2 }),
+        createField.object(
+          'address',
+          'Primary Address',
+          [
+            createField.text('street', 'Street Address', {
+              required: true,
+              placeholder: '123 Main St',
+              gridCols: 2,
+            }),
+            createField.text('city', 'City', {
+              required: true,
+              placeholder: 'New York',
+            }),
+            createField.text('state', 'State/Province', {
+              required: true,
+              placeholder: 'NY',
+            }),
+            createField.text('postalCode', 'Postal Code', {
+              required: true,
+              placeholder: '10001',
+            }),
+            createField.select(
+              'country',
+              'Country',
+              [
+                { label: 'United States', value: 'US' },
+                { label: 'Canada', value: 'CA' },
+                { label: 'United Kingdom', value: 'UK' },
+                { label: 'Australia', value: 'AU' },
+              ],
+              { required: true, defaultValue: 'US' },
+            ),
+          ],
+          { gridCols: 2 },
+        ),
 
-        createField.checkbox('sameAsShipping', 'Billing address same as shipping', { defaultValue: true, gridCols: 2 }),
+        createField.checkbox(
+          'sameAsShipping',
+          'Billing address same as shipping',
+          { defaultValue: true, gridCols: 2 },
+        ),
 
-        createField.object('billingAddress', 'Billing Address', [
-          createField.text('street', 'Street Address', { required: true, placeholder: '123 Main St', gridCols: 2 }),
-          createField.text('city', 'City', { required: true, placeholder: 'New York' }),
-          createField.text('state', 'State/Province', { required: true, placeholder: 'NY' }),
-          createField.text('postalCode', 'Postal Code', { required: true, placeholder: '10001' }),
-          createField.select(
-            'country',
-            'Country',
-            [
-              { label: 'United States', value: 'US' },
-              { label: 'Canada', value: 'CA' },
-              { label: 'United Kingdom', value: 'UK' },
-              { label: 'Australia', value: 'AU' },
+        createField.object(
+          'billingAddress',
+          'Billing Address',
+          [
+            createField.text('street', 'Street Address', {
+              required: true,
+              placeholder: '123 Main St',
+              gridCols: 2,
+            }),
+            createField.text('city', 'City', {
+              required: true,
+              placeholder: 'New York',
+            }),
+            createField.text('state', 'State/Province', {
+              required: true,
+              placeholder: 'NY',
+            }),
+            createField.text('postalCode', 'Postal Code', {
+              required: true,
+              placeholder: '10001',
+            }),
+            createField.select(
+              'country',
+              'Country',
+              [
+                { label: 'United States', value: 'US' },
+                { label: 'Canada', value: 'CA' },
+                { label: 'United Kingdom', value: 'UK' },
+                { label: 'Australia', value: 'AU' },
+              ],
+              { required: true, defaultValue: 'US' },
+            ),
+          ],
+          {
+            gridCols: 2,
+            dependencies: [
+              createDependency.showWhen('sameAsShipping', conditions.isFalse()),
             ],
-            { required: true, defaultValue: 'US' },
-          ),
-        ], {
-          gridCols: 2,
-          dependencies: [createDependency.showWhen('sameAsShipping', conditions.isFalse())],
-        }),
+          },
+        ),
       ]),
 
       createSection.card('Employment Information', [
@@ -108,42 +169,74 @@ export const ComplexExample: Story = {
         createField.text('company', 'Company Name', {
           required: true,
           placeholder: 'Enter company name',
-          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))],
+          dependencies: [
+            createDependency.showWhen(
+              'employmentStatus',
+              conditions.equals('employed'),
+            ),
+          ],
         }),
 
         createField.text('jobTitle', 'Job Title', {
           required: true,
           placeholder: 'Enter job title',
-          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))],
+          dependencies: [
+            createDependency.showWhen(
+              'employmentStatus',
+              conditions.equals('employed'),
+            ),
+          ],
         }),
 
         createField.text('businessName', 'Business Name', {
           required: true,
           placeholder: 'Enter business name',
-          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))],
+          dependencies: [
+            createDependency.showWhen(
+              'employmentStatus',
+              conditions.equals('self_employed'),
+            ),
+          ],
         }),
 
         createField.text('businessType', 'Type of Business', {
           placeholder: 'e.g., Consulting, Retail, etc.',
-          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))],
+          dependencies: [
+            createDependency.showWhen(
+              'employmentStatus',
+              conditions.equals('self_employed'),
+            ),
+          ],
         }),
 
         createField.text('school', 'School/University', {
           required: true,
           placeholder: 'Enter school name',
-          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))],
+          dependencies: [
+            createDependency.showWhen(
+              'employmentStatus',
+              conditions.equals('student'),
+            ),
+          ],
         }),
 
         createField.text('major', 'Major/Field of Study', {
           placeholder: 'Enter your major',
-          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))],
+          dependencies: [
+            createDependency.showWhen(
+              'employmentStatus',
+              conditions.equals('student'),
+            ),
+          ],
         }),
 
         createField.number('annualIncome', 'Annual Income', {
           placeholder: '50000',
           validation: validators.minItems(0, 'Income must be positive'),
           dependencies: [
-            createDependency.showWhen('employmentStatus', value => ['employed', 'self_employed'].includes(value)),
+            createDependency.showWhen('employmentStatus', (value) =>
+              ['employed', 'self_employed'].includes(value),
+            ),
           ],
         }),
       ]),
@@ -153,7 +246,10 @@ export const ComplexExample: Story = {
           'skills',
           'Skills',
           [
-            createField.text('name', 'Skill Name', { required: true, placeholder: 'e.g., JavaScript, Project Management' }),
+            createField.text('name', 'Skill Name', {
+              required: true,
+              placeholder: 'e.g., JavaScript, Project Management',
+            }),
             createField.select(
               'level',
               'Proficiency Level',
@@ -170,21 +266,43 @@ export const ComplexExample: Story = {
               validation: validators.minItems(0, 'Years must be positive'),
             }),
           ],
-          { gridCols: 2, defaultValue: [{ name: '', level: '', yearsOfExperience: 0 }] },
+          {
+            gridCols: 2,
+            defaultValue: [{ name: '', level: '', yearsOfExperience: 0 }],
+          },
         ),
       ]),
 
       createSection.card('Professional References', [
-        createField.checkbox('hasReferences', 'I have professional references', { defaultValue: false, gridCols: 2 }),
+        createField.checkbox(
+          'hasReferences',
+          'I have professional references',
+          { defaultValue: false, gridCols: 2 },
+        ),
         createField.array(
           'references',
           'References',
           [
-            createField.text('name', 'Full Name', { required: true, placeholder: 'John Doe' }),
-            createField.text('title', 'Job Title', { required: true, placeholder: 'Senior Manager' }),
-            createField.text('company', 'Company', { required: true, placeholder: 'ABC Corporation' }),
-            createField.email('email', 'Email', { required: true, placeholder: 'john.doe@company.com' }),
-            createField.text('phone', 'Phone', { validation: commonValidations.phone, placeholder: '+1 (555) 123-4567' }),
+            createField.text('name', 'Full Name', {
+              required: true,
+              placeholder: 'John Doe',
+            }),
+            createField.text('title', 'Job Title', {
+              required: true,
+              placeholder: 'Senior Manager',
+            }),
+            createField.text('company', 'Company', {
+              required: true,
+              placeholder: 'ABC Corporation',
+            }),
+            createField.email('email', 'Email', {
+              required: true,
+              placeholder: 'john.doe@company.com',
+            }),
+            createField.text('phone', 'Phone', {
+              validation: commonValidations.phone,
+              placeholder: '+1 (555) 123-4567',
+            }),
             createField.select(
               'relationship',
               'Relationship',
@@ -197,30 +315,55 @@ export const ComplexExample: Story = {
               { required: true, placeholder: 'Select relationship' },
             ),
           ],
-          { gridCols: 2, defaultValue: [], dependencies: [createDependency.showWhen('hasReferences', conditions.isTrue())] },
+          {
+            gridCols: 2,
+            defaultValue: [],
+            dependencies: [
+              createDependency.showWhen('hasReferences', conditions.isTrue()),
+            ],
+          },
         ),
       ]),
 
       createSection.card('Additional Information', [
-        createField.textarea('additionalInfo', 'Additional Comments', { placeholder: "Any additional information you'd like to share...", gridCols: 2 }),
-        createField.checkbox('agreeToTerms', 'I agree to the terms and conditions', { required: true, gridCols: 2 }),
-        createField.checkbox('allowMarketing', 'I agree to receive marketing communications', { defaultValue: false, gridCols: 2 }),
+        createField.textarea('additionalInfo', 'Additional Comments', {
+          placeholder: "Any additional information you'd like to share...",
+          gridCols: 2,
+        }),
+        createField.checkbox(
+          'agreeToTerms',
+          'I agree to the terms and conditions',
+          { required: true, gridCols: 2 },
+        ),
+        createField.checkbox(
+          'allowMarketing',
+          'I agree to receive marketing communications',
+          { defaultValue: false, gridCols: 2 },
+        ),
       ]),
     ];
 
     return (
       <div className="max-w-4xl mx-auto p-6">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Professional Profile</h1>
+          <h1 className="text-3xl font-bold text-gray-900">
+            Professional Profile
+          </h1>
           <p className="text-gray-600 mt-2">
-            Complete your professional profile with detailed information. This form demonstrates complex nested structures and field dependencies.
+            Complete your professional profile with detailed information. This
+            form demonstrates complex nested structures and field dependencies.
           </p>
         </div>
 
-        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} className="space-y-8" />
+        <FormBuilder
+          sections={sections}
+          onSubmit={handleSubmit}
+          onFieldChange={handleFieldChange}
+          className="space-y-8"
+        />
       </div>
     );
-  }
+  },
 };
 
 export const ComplexTabsExample: Story = {
@@ -230,7 +373,11 @@ export const ComplexTabsExample: Story = {
       console.log('Complex tabs form submitted:', data);
     };
 
-    const handleFieldChange = (name: string, value: unknown, allValues: Record<string, unknown>) => {
+    const handleFieldChange = (
+      name: string,
+      value: unknown,
+      allValues: Record<string, unknown>,
+    ) => {
       console.log(`[Tabs] Field ${name} changed to:`, value);
       console.log('[Tabs] All form values:', allValues);
     };
@@ -248,12 +395,22 @@ export const ComplexTabsExample: Story = {
             id: 'basic',
             label: 'Basic Info',
             sections: [
-              createSection.card('Basic Information', [
-                createField.text('firstName', 'First Name', { required: true }),
-                createField.text('lastName', 'Last Name', { required: true }),
-                createField.email('email', 'Email Address', { required: true }),
-                createField.date('dateOfBirth', 'Date of Birth', { required: true }),
-              ], { grid: { cols: 1, mdCols: 2, gap: 'gap-4' } }),
+              createSection.card(
+                'Basic Information',
+                [
+                  createField.text('firstName', 'First Name', {
+                    required: true,
+                  }),
+                  createField.text('lastName', 'Last Name', { required: true }),
+                  createField.email('email', 'Email Address', {
+                    required: true,
+                  }),
+                  createField.date('dateOfBirth', 'Date of Birth', {
+                    required: true,
+                  }),
+                ],
+                { grid: { cols: 1, mdCols: 2, gap: 'gap-4' } },
+              ),
             ],
           },
           {
@@ -261,31 +418,77 @@ export const ComplexTabsExample: Story = {
             label: 'Addresses',
             sections: [
               createSection.card('Address Information', [
-                createField.object('address', 'Primary Address', [
-                  createField.text('street', 'Street Address', { required: true, gridCols: 2 }),
-                  createField.text('city', 'City', { required: true }),
-                  createField.text('state', 'State/Province', { required: true }),
-                  createField.text('postalCode', 'Postal Code', { required: true }),
-                  createField.select('country', 'Country', [
-                    { label: 'United States', value: 'US' },
-                    { label: 'Canada', value: 'CA' },
-                    { label: 'United Kingdom', value: 'UK' },
-                    { label: 'Australia', value: 'AU' },
-                  ], { required: true, defaultValue: 'US' }),
-                ], { gridCols: 2 }),
-                createField.checkbox('sameAsShipping', 'Billing same as shipping', { defaultValue: true, gridCols: 2 }),
-                createField.object('billingAddress', 'Billing Address', [
-                  createField.text('street', 'Street Address', { required: true, gridCols: 2 }),
-                  createField.text('city', 'City', { required: true }),
-                  createField.text('state', 'State/Province', { required: true }),
-                  createField.text('postalCode', 'Postal Code', { required: true }),
-                  createField.select('country', 'Country', [
-                    { label: 'United States', value: 'US' },
-                    { label: 'Canada', value: 'CA' },
-                    { label: 'United Kingdom', value: 'UK' },
-                    { label: 'Australia', value: 'AU' },
-                  ], { required: true, defaultValue: 'US' }),
-                ], { gridCols: 2, dependencies: [createDependency.showWhen('sameAsShipping', conditions.isFalse())] }),
+                createField.object(
+                  'address',
+                  'Primary Address',
+                  [
+                    createField.text('street', 'Street Address', {
+                      required: true,
+                      gridCols: 2,
+                    }),
+                    createField.text('city', 'City', { required: true }),
+                    createField.text('state', 'State/Province', {
+                      required: true,
+                    }),
+                    createField.text('postalCode', 'Postal Code', {
+                      required: true,
+                    }),
+                    createField.select(
+                      'country',
+                      'Country',
+                      [
+                        { label: 'United States', value: 'US' },
+                        { label: 'Canada', value: 'CA' },
+                        { label: 'United Kingdom', value: 'UK' },
+                        { label: 'Australia', value: 'AU' },
+                      ],
+                      { required: true, defaultValue: 'US' },
+                    ),
+                  ],
+                  { gridCols: 2 },
+                ),
+                createField.checkbox(
+                  'sameAsShipping',
+                  'Billing same as shipping',
+                  { defaultValue: true, gridCols: 2 },
+                ),
+                createField.object(
+                  'billingAddress',
+                  'Billing Address',
+                  [
+                    createField.text('street', 'Street Address', {
+                      required: true,
+                      gridCols: 2,
+                    }),
+                    createField.text('city', 'City', { required: true }),
+                    createField.text('state', 'State/Province', {
+                      required: true,
+                    }),
+                    createField.text('postalCode', 'Postal Code', {
+                      required: true,
+                    }),
+                    createField.select(
+                      'country',
+                      'Country',
+                      [
+                        { label: 'United States', value: 'US' },
+                        { label: 'Canada', value: 'CA' },
+                        { label: 'United Kingdom', value: 'UK' },
+                        { label: 'Australia', value: 'AU' },
+                      ],
+                      { required: true, defaultValue: 'US' },
+                    ),
+                  ],
+                  {
+                    gridCols: 2,
+                    dependencies: [
+                      createDependency.showWhen(
+                        'sameAsShipping',
+                        conditions.isFalse(),
+                      ),
+                    ],
+                  },
+                ),
               ]),
             ],
           },
@@ -294,16 +497,49 @@ export const ComplexTabsExample: Story = {
             label: 'Employment',
             sections: [
               createSection.card('Employment Information', [
-                createField.select('employmentStatus', 'Employment Status', [
-                  { label: 'Employed', value: 'employed' },
-                  { label: 'Self-employed', value: 'self_employed' },
-                  { label: 'Unemployed', value: 'unemployed' },
-                  { label: 'Student', value: 'student' },
-                ], { required: true }),
-                createField.text('company', 'Company Name', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))] }),
-                createField.text('jobTitle', 'Job Title', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))] }),
-                createField.text('businessName', 'Business Name', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))] }),
-                createField.text('school', 'School/University', { dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))] }),
+                createField.select(
+                  'employmentStatus',
+                  'Employment Status',
+                  [
+                    { label: 'Employed', value: 'employed' },
+                    { label: 'Self-employed', value: 'self_employed' },
+                    { label: 'Unemployed', value: 'unemployed' },
+                    { label: 'Student', value: 'student' },
+                  ],
+                  { required: true },
+                ),
+                createField.text('company', 'Company Name', {
+                  dependencies: [
+                    createDependency.showWhen(
+                      'employmentStatus',
+                      conditions.equals('employed'),
+                    ),
+                  ],
+                }),
+                createField.text('jobTitle', 'Job Title', {
+                  dependencies: [
+                    createDependency.showWhen(
+                      'employmentStatus',
+                      conditions.equals('employed'),
+                    ),
+                  ],
+                }),
+                createField.text('businessName', 'Business Name', {
+                  dependencies: [
+                    createDependency.showWhen(
+                      'employmentStatus',
+                      conditions.equals('self_employed'),
+                    ),
+                  ],
+                }),
+                createField.text('school', 'School/University', {
+                  dependencies: [
+                    createDependency.showWhen(
+                      'employmentStatus',
+                      conditions.equals('student'),
+                    ),
+                  ],
+                }),
               ]),
             ],
           },
@@ -314,10 +550,19 @@ export const ComplexTabsExample: Story = {
     return (
       <div className="max-w-4xl mx-auto p-6">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Professional Profile (Tabs)</h1>
-          <p className="text-gray-600 mt-2">This story shows how to organize complex forms into tabs.</p>
+          <h1 className="text-3xl font-bold text-gray-900">
+            Professional Profile (Tabs)
+          </h1>
+          <p className="text-gray-600 mt-2">
+            This story shows how to organize complex forms into tabs.
+          </p>
         </div>
-        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} className="space-y-8" />
+        <FormBuilder
+          sections={sections}
+          onSubmit={handleSubmit}
+          onFieldChange={handleFieldChange}
+          className="space-y-8"
+        />
       </div>
     );
   },

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

@@ -1,5 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
+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',
@@ -8,11 +11,11 @@ const meta: Meta<typeof FormBuilder> = {
     controls: { expanded: true },
     backgrounds: { disable: true },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof FormBuilder>
+type Story = StoryObj<typeof FormBuilder>;
 
 export const DateTimeFields: Story = {
   name: 'Date/Time fields',
@@ -20,7 +23,8 @@ export const DateTimeFields: Story = {
     sections: [
       {
         title: 'Date & Time',
-        description: 'Examples of DateTimePicker, DateTimeRangePicker and TimeRangePicker fields',
+        description:
+          'Examples of DateTimePicker, DateTimeRangePicker and TimeRangePicker fields',
         variant: 'card',
         layout: 'grid',
         grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
@@ -54,7 +58,7 @@ export const DateTimeFields: Story = {
     onSubmit: (data: unknown) => {
       // Showing output in console for demo
       // eslint-disable-next-line no-console
-      console.log('Submit (date/time):', data)
+      console.log('Submit (date/time):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -63,4 +67,4 @@ export const DateTimeFields: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};