@k3-universe/react-kit 0.0.2 → 0.0.4

package/src/kit/builder/form/components/fields/ArrayField.tsx

@@ -0,0 +1,222 @@
+import { useFieldArray } from 'react-hook-form'
+import type { FieldArrayPath, FieldValues } from 'react-hook-form'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../../shadcn/ui/card'
+import { Button } from '../../../../../shadcn/ui/button'
+import { Input } from '../../../../../shadcn/ui/input'
+import { GripVertical, Plus, Trash2 } from 'lucide-react'
+import { cn } from '../../../../../shadcn/lib/utils'
+import type { FieldRenderProps } from './types'
+import { FormBuilderField } from '../FormBuilderField'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../../shadcn/ui/table'
+
+export function ArrayField({ field, control, fieldPath, value, onChange }: FieldRenderProps) {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: fieldPath as FieldArrayPath<FieldValues>,
+  })
+
+  const addItem = () => {
+    // For custom layout, prefer appending an object so useFieldArray can generate stable IDs
+    if (field.arrayLayout === 'custom') {
+      append({} as never)
+      return
+    }
+    if (field.fields && field.fields.length === 1) {
+      const defaultValue = field.fields[0].defaultValue ?? ''
+      append(defaultValue as never)
+    } else if (field.fields) {
+      const defaultObject: Record<string, unknown> = {}
+      field.fields.forEach((subField) => {
+        defaultObject[subField.name] = subField.defaultValue ?? ''
+      })
+      append(defaultObject as never)
+    } else {
+      append('' as never)
+    }
+  }
+
+  const removeItem = (index: number) => remove(index)
+
+  // Custom layout hook
+  if (field.arrayLayout === 'custom' && typeof field.arrayRender === 'function') {
+    return (
+      <>{field.arrayRender({ field, control, fieldPath, value, onChange, addItem, removeItem, disabled: field.disabled, rows: fields })}</>
+    )
+  }
+
+  // Table layout
+  if (field.arrayLayout === 'table') {
+    const hasNested = Array.isArray(field.fields) && field.fields.length > 0
+    const fFields = field.fields ?? []
+    const singleNested = hasNested && fFields.length === 1
+    const headerBg = field.arrayColors?.headerBgClass ?? 'bg-primary'
+    const headerText = field.arrayColors?.headerTextClass ?? 'text-primary-foreground'
+    const altRow = field.arrayColors?.rowAltBgClass ?? 'bg-muted/40'
+
+    return (
+      <Card className={cn(field.className, 'py-3 rounded-md gap-3')}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-base">{field.label}</CardTitle>
+              {field.description && (
+                <p className="text-sm text-muted-foreground">{field.description}</p>
+              )}
+            </div>
+            <Button type="button" variant="outline" size="sm" onClick={addItem} disabled={field.disabled}>
+              <Plus className="h-4 w-4 mr-1" />
+              Add Item
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {fields.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-2">
+              No items added yet. Click "Add Item" to get started.
+            </p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow className={cn(headerBg, headerText)}>
+                  {hasNested ? (
+                    singleNested ? (
+                      <TableHead className={cn(headerText)}>{fFields[0]?.label || 'Value'}</TableHead>
+                    ) : (
+                      fFields.map(sf => (
+                        <TableHead key={sf.name} className={cn(headerText)}>{sf.label || sf.name}</TableHead>
+                      ))
+                    )
+                  ) : (
+                    <TableHead className={cn(headerText)}>Value</TableHead>
+                  )}
+                  <TableHead className={cn(headerText)}>Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {fields.map((item, index) => (
+                  <TableRow key={item.id} className={cn(index % 2 === 1 && altRow)}>
+                    {hasNested ? (
+                      singleNested ? (
+                        <TableCell>
+                          <FormBuilderField
+                            field={{ ...fFields[0], name: fFields[0]?.name, label: fFields[0]?.label || 'Value' }}
+                            control={control}
+                            parentPath={`${fieldPath}.${index}`}
+                          />
+                        </TableCell>
+                      ) : (
+                        fFields.map(subField => (
+                          <TableCell key={subField.name}>
+                            <FormBuilderField
+                              field={subField}
+                              control={control}
+                              parentPath={`${fieldPath}.${index}`}
+                            />
+                          </TableCell>
+                        ))
+                      )
+                    ) : (
+                      <TableCell>
+                        <Input
+                          value={String(((value as unknown[] | undefined)?.[index] ?? ''))}
+                          onChange={(e) => {
+                            const current = (value as unknown[] | undefined) ?? []
+                            const newArray = [...current]
+                            newArray[index] = e.target.value
+                            onChange(newArray)
+                          }}
+                          placeholder={`Item ${index + 1}`}
+                          disabled={field.disabled}
+                        />
+                      </TableCell>
+                    )}
+                    <TableCell className="w-1 text-right">
+                      <Button type="button" variant="destructive" size="sm" onClick={() => remove(index)} disabled={field.disabled}>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Default: card layout (existing UI)
+  return (
+    <Card className={cn(field.className, 'py-3 rounded-md gap-3')}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base">{field.label}</CardTitle>
+            {field.description && (
+              <p className="text-sm text-muted-foreground">{field.description}</p>
+            )}
+          </div>
+          <Button type="button" variant="outline" size="sm" onClick={addItem} disabled={field.disabled}>
+            <Plus className="h-4 w-4 mr-1" />
+            Add Item
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {fields.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-2">
+            No items added yet. Click "Add Item" to get started.
+          </p>
+        ) : (
+          fields.map((item, index) => (
+            <Card key={item.id} className="relative py-3 rounded-md gap-3">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <GripVertical className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Item {index + 1}</span>
+                  </div>
+                  <Button type="button" variant="ghost" size="sm" onClick={() => remove(index)} disabled={field.disabled}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                {field.fields && field.fields.length === 1 ? (
+                  <FormBuilderField
+                    field={{ ...field.fields[0], name: field.fields[0].name, label: field.fields[0].label || 'Value' }}
+                    control={control}
+                    parentPath={`${fieldPath}.${index}`}
+                  />
+                ) : field.fields ? (
+                  <div className="grid gap-2 md:grid-cols-2">
+                    {field.fields.map(subField => (
+                      <FormBuilderField
+                        key={subField.name}
+                        field={subField}
+                        control={control}
+                        parentPath={`${fieldPath}.${index}`}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <Input
+                    value={String(((value as unknown[] | undefined)?.[index] ?? ''))}
+                    onChange={(e) => {
+                      const current = (value as unknown[] | undefined) ?? []
+                      const newArray = [...current]
+                      newArray[index] = e.target.value
+                      onChange(newArray)
+                    }}
+                    placeholder={`Item ${index + 1}`}
+                    disabled={field.disabled}
+                  />
+                )}
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/kit/builder/form/components/fields/AutocompleteField.tsx

@@ -0,0 +1,25 @@
+import { Autocomplete } from '../../../../../kit/components/autocomplete/Autocomplete'
+import type { AutocompleteOption } from '../../../../../kit/components/autocomplete/types'
+import type { FieldRenderProps } from './types'
+
+export function AutocompleteField({ field, value, onChange, className }: FieldRenderProps) {
+  const options: AutocompleteOption[] = (field.options ?? [])
+    .filter((o): o is { label: string; value: string | number } => o.value !== null && o.value !== undefined)
+    .map(o => ({ label: o.label, value: o.value as string | number }))
+
+  return (
+    <Autocomplete
+      mode={field.autocompleteMode ?? 'client'}
+      options={options}
+      fetcher={field.fetcher}
+      pageSize={field.pageSize}
+      value={(value as string | number | null) ?? null}
+      onChange={(val) => onChange(val)}
+      placeholder={field.placeholder}
+      searchPlaceholder={field.searchPlaceholder}
+      renderOption={field.renderOption}
+      disabled={field.disabled}
+      className={className}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/CheckboxField.tsx

@@ -0,0 +1,56 @@
+import { Checkbox } from '../../../../../shadcn/ui/checkbox'
+import { Label } from '../../../../../shadcn/ui/label'
+import { cn } from '../../../../../shadcn/lib/utils'
+import type { FieldRenderProps } from './types'
+
+export function CheckboxField({ field, fieldPath, value, onChange, className }: FieldRenderProps) {
+  const placement = field.labelPlacement ?? 'inline'
+
+  if (placement === 'stacked') {
+    const labelId = `${fieldPath}-label`
+    return (
+      <div className="space-y-2">
+        <Label id={labelId} className="text-sm font-medium">
+          {field.label}
+          {field.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+        <Checkbox
+          aria-labelledby={labelId}
+          id={fieldPath}
+          checked={(value as boolean) || false}
+          onCheckedChange={onChange as (val: boolean) => void}
+          disabled={field.disabled}
+          className={cn(className)}
+        />
+      </div>
+    )
+  }
+
+  if (placement === 'hidden') {
+    return (
+      <Checkbox
+        id={fieldPath}
+        checked={(value as boolean) || false}
+        onCheckedChange={onChange as (val: boolean) => void}
+        disabled={field.disabled}
+        className={cn(className)}
+      />
+    )
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox
+        id={fieldPath}
+        checked={(value as boolean) || false}
+        onCheckedChange={onChange as (val: boolean) => void}
+        disabled={field.disabled}
+        className={cn(className)}
+      />
+      <Label htmlFor={fieldPath} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {field.label}
+        {field.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+    </div>
+  )
+}

package/src/kit/builder/form/components/fields/DateField.tsx

@@ -0,0 +1,15 @@
+import { Input } from '../../../../../shadcn/ui/input'
+import type { FieldRenderProps } from './types'
+
+export function DateField({ field, value, onChange, className }: FieldRenderProps) {
+  return (
+    <Input
+      className={className}
+      disabled={field.disabled}
+      placeholder={field.placeholder}
+      type="date"
+      value={value ? new Date(value as Date | string).toISOString().split('T')[0] : ''}
+      onChange={(e) => onChange(e.target.value ? new Date(e.target.value) : null)}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/FileField.tsx

@@ -0,0 +1,14 @@
+import { Input } from '../../../../../shadcn/ui/input'
+import type { FieldRenderProps } from './types'
+
+export function FileField({ field, onChange, className }: FieldRenderProps) {
+  return (
+    <Input
+      className={className}
+      disabled={field.disabled}
+      placeholder={field.placeholder}
+      type="file"
+      onChange={(e) => onChange((e.target as HTMLInputElement).files?.[0] || null)}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/NumberField.tsx

@@ -0,0 +1,15 @@
+import { Input } from '../../../../../shadcn/ui/input'
+import type { FieldRenderProps } from './types'
+
+export function NumberField({ field, value, onChange, className }: FieldRenderProps) {
+  return (
+    <Input
+      className={className}
+      disabled={field.disabled}
+      placeholder={field.placeholder}
+      type="number"
+      value={(value as number | string) ?? ''}
+      onChange={(e) => onChange(Number(e.target.value))}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/ObjectField.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../../shadcn/ui/card'
+import { cn } from '../../../../../shadcn/lib/utils'
+import type { FieldRenderProps } from './types'
+import { FormBuilderField } from '../FormBuilderField'
+
+export function ObjectField({ field, control, fieldPath }: FieldRenderProps) {
+  if (!field.fields) return null
+  return (
+    <Card className={cn(field.className)}>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">{field.label}</CardTitle>
+        {field.description && (
+          <p className="text-sm text-muted-foreground">{field.description}</p>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          {field.fields.map(subField => (
+            <FormBuilderField
+              key={subField.name}
+              field={subField}
+              control={control}
+              parentPath={fieldPath}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/kit/builder/form/components/fields/RadioField.tsx

@@ -0,0 +1,29 @@
+import { RadioGroup, RadioGroupItem } from '../../../../../shadcn/ui/radio-group'
+import { Label } from '../../../../../shadcn/ui/label'
+import type { FieldRenderProps } from './types'
+
+const NULL_SENTINEL = '__NULL__'
+
+export function RadioField({ field, value, onChange, className, fieldPath }: FieldRenderProps) {
+  const toUiValue = (val: unknown) => (val === null || val === undefined ? NULL_SENTINEL : String(val))
+  const fromUiValue = (val: string) => {
+    const match = field.options?.find(opt => toUiValue(opt.value) === val)
+    return match ? match.value : null
+  }
+
+  return (
+    <RadioGroup
+      value={toUiValue(value)}
+      onValueChange={(val) => onChange(fromUiValue(val))}
+      disabled={field.disabled}
+      className={className}
+    >
+      {field.options?.map(option => (
+        <div key={toUiValue(option.value)} className="flex items-center space-x-2">
+          <RadioGroupItem value={toUiValue(option.value)} id={`${fieldPath}-${toUiValue(option.value)}`} />
+          <Label htmlFor={`${fieldPath}-${toUiValue(option.value)}`}>{option.label}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  )
+}

package/src/kit/builder/form/components/fields/SelectField.tsx

@@ -0,0 +1,31 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../../shadcn/ui/select'
+import type { FieldRenderProps } from './types'
+
+const NULL_SENTINEL = '__NULL__'
+
+export function SelectField({ field, value, onChange, className }: FieldRenderProps) {
+  const toUiValue = (val: unknown) => (val === null || val === undefined ? NULL_SENTINEL : String(val))
+  const fromUiValue = (val: string) => {
+    const match = field.options?.find(opt => toUiValue(opt.value) === val)
+    return match ? match.value : null
+  }
+
+  return (
+    <Select
+      value={toUiValue(value)}
+      onValueChange={(val) => onChange(fromUiValue(val))}
+      disabled={field.disabled}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={field.placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {field.options?.map(option => (
+          <SelectItem key={toUiValue(option.value)} value={toUiValue(option.value)}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/kit/builder/form/components/fields/SwitchField.tsx

@@ -0,0 +1,56 @@
+import { Switch } from '../../../../../shadcn/ui/switch'
+import { Label } from '../../../../../shadcn/ui/label'
+import { cn } from '../../../../../shadcn/lib/utils'
+import type { FieldRenderProps } from './types'
+
+export function SwitchField({ field, fieldPath, value, onChange, className }: FieldRenderProps) {
+  const placement = field.labelPlacement ?? 'inline'
+
+  if (placement === 'stacked') {
+    const labelId = `${fieldPath}-label`
+    return (
+      <div className="space-y-2">
+        <Label id={labelId} className="text-sm font-medium">
+          {field.label}
+          {field.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+        <Switch
+          aria-labelledby={labelId}
+          id={fieldPath}
+          checked={(value as boolean) || false}
+          onCheckedChange={onChange as (val: boolean) => void}
+          disabled={field.disabled}
+          className={cn(className)}
+        />
+      </div>
+    )
+  }
+
+  if (placement === 'hidden') {
+    return (
+      <Switch
+        id={fieldPath}
+        checked={(value as boolean) || false}
+        onCheckedChange={onChange as (val: boolean) => void}
+        disabled={field.disabled}
+        className={cn(className)}
+      />
+    )
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id={fieldPath}
+        checked={(value as boolean) || false}
+        onCheckedChange={onChange as (val: boolean) => void}
+        disabled={field.disabled}
+        className={cn(className)}
+      />
+      <Label htmlFor={fieldPath} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {field.label}
+        {field.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+    </div>
+  )
+}

package/src/kit/builder/form/components/fields/TextField.tsx

@@ -0,0 +1,18 @@
+import { Input } from '../../../../../shadcn/ui/input'
+import type { FieldRenderProps } from './types'
+
+export function TextField({ field, fieldPath, value, onChange, className }: FieldRenderProps) {
+  const type: 'text' | 'email' | 'password' =
+    field.type === 'email' || field.type === 'password' ? field.type : 'text'
+  return (
+    <Input
+      id={fieldPath}
+      className={className}
+      disabled={field.disabled}
+      placeholder={field.placeholder}
+      type={type}
+      value={(value as string) || ''}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/TextareaField.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from '../../../../../shadcn/ui/textarea'
+import type { FieldRenderProps } from './types'
+
+export function TextareaField({ field, value, onChange, className }: FieldRenderProps) {
+  return (
+    <Textarea
+      className={className}
+      disabled={field.disabled}
+      placeholder={field.placeholder}
+      value={(value as string) || ''}
+      onChange={(e) => onChange(e.target.value)}
+      rows={4}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/index.ts

@@ -0,0 +1,13 @@
+export * from './types'
+export * from './AutocompleteField'
+export * from './TextField'
+export * from './NumberField'
+export * from './TextareaField'
+export * from './SelectField'
+export * from './CheckboxField'
+export * from './SwitchField'
+export * from './RadioField'
+export * from './DateField'
+export * from './FileField'
+export * from './ObjectField'
+export * from './ArrayField'

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

@@ -0,0 +1,14 @@
+import type { Control, FieldValues } from 'react-hook-form'
+import type { FormBuilderFieldConfig } from '../FormBuilder'
+
+export interface FieldRenderProps {
+  field: FormBuilderFieldConfig
+  control: Control<FieldValues>
+  fieldPath: string
+  value: unknown
+  onChange: (value: unknown) => void
+  className?: string
+  disabled?: boolean
+  errorMessage?: string
+  onFieldChange?: (name: string, value: unknown, allValues: Record<string, unknown>) => void
+}

package/src/kit/builder/form/utils/field-factories.ts

@@ -93,6 +93,19 @@ export const createField = {
     ...options,
   }),
 
+  switch: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'switch',
+    required: false,
+    defaultValue: false,
+    ...options,
+  }),
+
   radio: (
     name: string,
     label: string,