@k3-universe/react-kit 0.0.14 → 0.0.15

package/src/kit/builder/form/types.ts

@@ -5,12 +5,13 @@ import type {
   FieldValues,
   Path,
   UseFormGetValues,
+  UseFormReturn,
   UseFormSetValue,
   DefaultValues,
 } from 'react-hook-form'
 import type { z } from 'zod'
 import type { Accept } from 'react-dropzone'
-import type { SectionFlexOptions, SectionGridOptions, SectionLayout, SectionNode } from '../section/types'
+import type { SectionFlexOptions, SectionGridOptions, SectionLayout } from '../section/types'
 import type { AutocompleteFetcher, AutocompleteOption } from '../../components/autocomplete/types'
 import type { FileRecord, FileUploaderLayout } from '../../components/fileuploader/types'
 
@@ -192,7 +193,8 @@ export interface FormBuilderProps<TFieldValues extends FieldValues = FieldValues
   showActions?: boolean
   customActions?: React.ReactNode
   showActionsSeparator?: boolean
+  form?: UseFormReturn<TFieldValues>
 }
 
 // Re-export for external consumers that build custom section nodes
-export type { SectionNode }
+export type { SectionNode } from '../section/types'

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

@@ -419,7 +419,7 @@ export function Autocomplete<T = unknown>({
 						tabIndex={disabled ? -1 : 0}
 						aria-disabled={disabled || undefined}
 						className={cn(
-							"w-full inline-flex items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm transition-colors",
+							"w-full inline-flex items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm shadow-sm transition-colors",
 							"hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 							disabled && "opacity-50 pointer-events-none",
 							className,

package/src/kit/themes/default.css

@@ -19,7 +19,7 @@
   --destructive: oklch(0.6368 0.2078 25.3313);
   --destructive-foreground: oklch(1.0000 0 0);
   --border: oklch(0.9197 0.0040 286.3202);
-  --input: oklch(0.9197 0.0040 286.3202);
+  --input: oklch(1.0000 0 0);
   --ring: oklch(0.5234 0.1347 144.1672);
   --chart-1: oklch(0.5234 0.1347 144.1672);
   --chart-2: oklch(0.6731 0.1624 144.2083);

package/src/shadcn/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-border dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:

package/src/shadcn/ui/command.tsx

@@ -67,7 +67,7 @@ function CommandInput({
   return (
     <div
       data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
+      className="flex h-9 items-center gap-2 border-b border-border px-3"
     >
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input

package/src/shadcn/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-border flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className

package/src/shadcn/ui/popover.tsx

@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className
         )}
         {...props}

package/src/shadcn/ui/select.tsx

@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/shadcn/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}

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

@@ -0,0 +1,335 @@
+import { useMemo } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { useForm } from 'react-hook-form'
+import { FormBuilder } from '../../../index'
+import type { FormBuilderSectionConfig } from '../../../kit/builder/form/types'
+
+interface SplitFormValues {
+  firstName: string
+  lastName: string
+  email: string
+  accountType: 'individual' | 'business'
+  companyName?: string
+  address: {
+    street: string
+    city: string
+    zip: string
+  }
+  marketingOptIn: boolean
+  preferredContactMethod: 'email' | 'phone'
+  phoneNumber?: string
+  newsletterTopics: string[]
+  complianceContactEmail?: string
+  eventsWebhookUrl?: string
+  smsOptIn: boolean
+  smsFrequency?: 'daily' | 'weekly' | 'monthly'
+  timezone: string
+}
+
+const generalInfoSections: FormBuilderSectionConfig<SplitFormValues>[] = [
+  {
+    title: 'Profile',
+    layout: 'grid',
+    grid: { cols: 2, gap: 'gap-4' },
+    fields: [
+      {
+        name: 'firstName',
+        label: 'First name',
+        type: 'text',
+        required: true,
+      },
+      {
+        name: 'lastName',
+        label: 'Last name',
+        type: 'text',
+        required: true,
+      },
+      {
+        name: 'email',
+        label: 'Email',
+        type: 'email',
+        required: true,
+        gridCols: 2,
+      },
+      {
+        name: 'accountType',
+        label: 'Account type',
+        type: 'radio',
+        options: [
+          { label: 'Individual', value: 'individual' },
+          { label: 'Business', value: 'business' },
+        ],
+        defaultValue: 'individual',
+        gridCols: 2,
+        description: 'Switch to Business to reveal additional company details.',
+      },
+      {
+        name: 'companyName',
+        label: 'Company name',
+        type: 'text',
+        placeholder: 'Acme Inc.',
+        dependencies: [
+          {
+            field: 'accountType',
+            condition: (value) => value === 'business',
+            action: 'show',
+          },
+        ],
+        gridCols: 2,
+      },
+    ],
+  },
+  {
+    title: 'Address',
+    layout: 'grid',
+    grid: { cols: 3, gap: 'gap-4' },
+    fields: [
+      {
+        name: 'address.street',
+        label: 'Street',
+        type: 'text',
+        required: true,
+        gridCols: 3,
+      },
+      {
+        name: 'address.city',
+        label: 'City',
+        type: 'text',
+        required: true,
+        gridCols: 2,
+      },
+      {
+        name: 'address.zip',
+        label: 'ZIP code',
+        type: 'text',
+        required: true,
+      },
+    ],
+  },
+]
+
+const preferencesSections: FormBuilderSectionConfig<SplitFormValues>[] = [
+  {
+    title: 'Preferences',
+    layout: 'grid',
+    grid: { cols: 2, gap: 'gap-4' },
+    fields: [
+      {
+        name: 'marketingOptIn',
+        label: 'Marketing emails',
+        type: 'switch',
+        defaultValue: true,
+        description: 'Receive occasional product updates and tips.',
+      },
+      {
+        name: 'newsletterTopics',
+        label: 'Topics of interest',
+        type: 'select',
+        options: [
+          { label: 'Product releases', value: 'product' },
+          { label: 'Best practices', value: 'best-practices' },
+          { label: 'Events', value: 'events' },
+          { label: 'Integrations', value: 'integrations' },
+        ],
+        multiple: true,
+        placeholder: 'Choose one or more topics',
+        dependencies: [
+          {
+            field: 'marketingOptIn',
+            condition: (value) => Boolean(value),
+            action: 'show',
+          },
+          {
+            field: 'marketingOptIn',
+            condition: (value) => !value,
+            action: 'setValue',
+            value: [],
+          },
+        ],
+      },
+      {
+        name: 'eventsWebhookUrl',
+        label: 'Events webhook URL',
+        type: 'text',
+        placeholder: 'https://example.com/webhooks/events',
+        description: 'Provide a webhook to receive notifications about upcoming events.',
+        dependencies: [
+          {
+            field: 'newsletterTopics',
+            condition: (value) => Array.isArray(value) && value.includes('events'),
+            action: 'show',
+          },
+        ],
+      },
+      {
+        name: 'preferredContactMethod',
+        label: 'Preferred contact method',
+        type: 'radio',
+        options: [
+          { label: 'Email', value: 'email' },
+          { label: 'Phone', value: 'phone' },
+        ],
+        defaultValue: 'email',
+      },
+      {
+        name: 'phoneNumber',
+        label: 'Phone number',
+        type: 'text',
+        placeholder: '(555) 123-4567',
+        dependencies: [
+          {
+            field: 'preferredContactMethod',
+            condition: (value) => value === 'phone',
+            action: 'show',
+          },
+        ],
+      },
+      {
+        name: 'smsOptIn',
+        label: 'SMS updates',
+        type: 'switch',
+        defaultValue: false,
+        description: 'Get real-time notifications via SMS.',
+        dependencies: [
+          {
+            field: 'preferredContactMethod',
+            condition: (value) => value === 'phone',
+            action: 'show',
+          },
+        ],
+      },
+      {
+        name: 'smsFrequency',
+        label: 'SMS frequency',
+        type: 'select',
+        options: [
+          { label: 'Daily recap', value: 'daily' },
+          { label: 'Weekly summary', value: 'weekly' },
+          { label: 'Monthly digest', value: 'monthly' },
+        ],
+        placeholder: 'Choose how often we should text you',
+        dependencies: [
+          {
+            field: 'smsOptIn',
+            condition: (value) => Boolean(value),
+            action: 'show',
+          },
+        ],
+      },
+      {
+        name: 'complianceContactEmail',
+        label: 'Compliance contact email',
+        type: 'email',
+        placeholder: 'compliance@company.com',
+        description: 'Required for business accounts to receive compliance updates.',
+        dependencies: [
+          {
+            field: 'accountType',
+            condition: (value) => value === 'business',
+            action: 'show',
+          },
+        ],
+        gridCols: 2,
+      },
+      {
+        name: 'timezone',
+        label: 'Timezone',
+        type: 'select',
+        options: [
+          { label: 'UTC−08:00 Pacific', value: 'America/Los_Angeles' },
+          { label: 'UTC−05:00 Eastern', value: 'America/New_York' },
+          { label: 'UTC+00:00 London', value: 'Europe/London' },
+          { label: 'UTC+07:00 Jakarta', value: 'Asia/Jakarta' },
+        ],
+        required: true,
+      },
+    ],
+  },
+]
+
+const SplitFormExample = () => {
+  const form = useForm<SplitFormValues>({
+    defaultValues: {
+      firstName: 'Jane',
+      lastName: 'Doe',
+      email: 'jane.doe@example.com',
+      accountType: 'individual',
+      companyName: '',
+      address: {
+        street: '123 Storybook Way',
+        city: 'Componentville',
+        zip: '90210',
+      },
+      marketingOptIn: true,
+      newsletterTopics: ['product'],
+      eventsWebhookUrl: '',
+      preferredContactMethod: 'email',
+      phoneNumber: '',
+      smsOptIn: false,
+      smsFrequency: undefined,
+      complianceContactEmail: '',
+      timezone: 'Asia/Jakarta',
+    },
+    mode: 'onSubmit',
+  })
+
+  const logSubmit = useMemo(
+    () =>
+      form.handleSubmit((values) => {
+        console.log('Story submit', values)
+      }),
+    [form],
+  )
+
+  return (
+    <div className="space-y-6">
+      <FormBuilder
+        form={form}
+        sections={generalInfoSections}
+        onSubmit={async () => {
+          /* handled by explicit button */
+        }}
+        showActions={false}
+      />
+
+      <FormBuilder
+        form={form}
+        sections={preferencesSections}
+        onSubmit={async () => {
+          /* handled by explicit button */
+        }}
+        customActions={(
+          <button
+            type="button"
+            className="px-4 py-2 text-sm font-medium text-white bg-primary rounded-md"
+            onClick={logSubmit}
+          >
+            Save all sections
+          </button>
+        )}
+      />
+    </div>
+  )
+}
+
+const meta: Meta<typeof SplitFormExample> = {
+  title: 'Kit/Builder/Form',
+  component: SplitFormExample,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Demonstrates sharing a single `react-hook-form` instance across multiple `FormBuilder` blocks using the new `form` prop.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof SplitFormExample>
+
+export const SharedFormInstance: Story = {
+  name: 'Shared form instance across sections',
+  render: () => <SplitFormExample />,
+}