@k3-universe/react-kit 0.0.13 → 0.0.14

package/src/kit/builder/form/components/FormBuilderField.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
-import type { Control, FieldValues } from 'react-hook-form';
+import type { Control, FieldValues, Path } from 'react-hook-form';
 import { useController } from 'react-hook-form';
 import { cn } from '../../../../shadcn/lib/utils';
 import { Label } from '../../../../shadcn/ui/label';
-import type { FormBuilderFieldConfig } from './FormBuilder';
+import type { FormBuilderFieldConfig } from '../types';
 import {
   AutocompleteField,
   TextField,
@@ -27,29 +27,37 @@ import {
   ArrayField,
 } from './fields';
 
-export interface FormBuilderFieldProps {
-  field: FormBuilderFieldConfig;
-  control: Control<FieldValues>;
-  onChange?: (value: unknown) => void;
-  onFieldChange?: (name: string, value: unknown, allValues: Record<string, unknown>) => void;
+export interface FormBuilderFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends string | Path<TFieldValues> = Path<TFieldValues>
+> {
+  field: FormBuilderFieldConfig<TFieldValues, TName>;
+  control: Control<TFieldValues>;
+  onChange?: (value: unknown, ...extras: unknown[]) => void;
+  onFieldChange?: (name: import('react-hook-form').Path<TFieldValues> | string, value: unknown, allValues: TFieldValues) => void;
   parentPath?: string;
 }
 
-export function FormBuilderField({ field, control, onChange, parentPath }: FormBuilderFieldProps) {
-  const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+export function FormBuilderField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends string | Path<TFieldValues> = Path<TFieldValues>
+>({ field, control, onChange, parentPath }: FormBuilderFieldProps<TFieldValues, TName>) {
+  const fieldPath = parentPath ? `${parentPath}.${field.name}` : (field.name as string);
 
   const {
     field: controllerField,
     fieldState: { error },
-  } = useController({
-    name: fieldPath,
+  } = useController<TFieldValues>({
+    name: fieldPath as unknown as Path<TFieldValues>,
     control,
     disabled: field.disabled,
   });
 
-  const handleChange = useCallback((value: unknown) => {
+  const handleChange = useCallback((value: unknown, ...extras: unknown[]) => {
+    // Only patch the RHF value with the first argument (the canonical value)
     controllerField.onChange(value);
-    onChange?.(value);
+    // Forward any extra metadata upstream (e.g., option, raw)
+    onChange?.(value, ...extras);
   }, [controllerField, onChange]);
   const baseClassName = cn(
     error && 'border-destructive focus-visible:ring-destructive',
@@ -62,7 +70,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <AutocompleteField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -75,7 +83,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TextField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -86,7 +94,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <NumberField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -97,7 +105,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TextareaField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -108,7 +116,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <SelectField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -119,7 +127,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <CheckboxField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -130,7 +138,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <SwitchField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -141,7 +149,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <RadioField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -152,7 +160,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -163,7 +171,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DatePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -174,7 +182,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -185,7 +193,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <MonthPickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -196,7 +204,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <MonthRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -207,7 +215,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TimePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -218,7 +226,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TimeRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -229,7 +237,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateTimePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -240,7 +248,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateTimeRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -251,7 +259,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <FileField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -262,7 +270,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <ObjectField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -273,7 +281,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <ArrayField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -284,7 +292,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TextField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}

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

@@ -5,7 +5,7 @@ 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 }))
+    .map(o => ({ label: o.label, value: o.value as string | number, raw: (o as unknown as AutocompleteOption).raw }))
 
   // Shape defaultValue according to single/multiple
   let defaultValueShaped: string | number | null | Array<string | number> | undefined = undefined
@@ -42,7 +42,7 @@ export function AutocompleteField({ field, value, onChange, className }: FieldRe
       initialSelectedOptions={field.initialSelectedOptions ?? null}
       loadSelected={field.loadSelected}
       value={field.multiple ? ((Array.isArray(value) ? value : (value ? [value] : [])) as Array<string | number>) : ((value as string | number | null) ?? null)}
-      onChange={(val) => onChange(val)}
+      onChange={(val, option, raw) => onChange(val, option, raw)}
       placeholder={field.placeholder}
       searchPlaceholder={field.searchPlaceholder}
       renderOption={field.renderOption}

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

@@ -1,12 +1,12 @@
 import type { Control, FieldValues } from 'react-hook-form'
-import type { FormBuilderFieldConfig } from '../FormBuilder'
+import type { FormBuilderFieldConfig } from '../../types'
 
 export interface FieldRenderProps {
-  field: FormBuilderFieldConfig
+  field: FormBuilderFieldConfig<any, any>
   control: Control<FieldValues>
   fieldPath: string
   value: unknown
-  onChange: (value: unknown) => void
+  onChange: (value: unknown, ...extras: unknown[]) => void
   className?: string
   disabled?: boolean
   errorMessage?: string

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

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utils';
+export * from './types';

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

@@ -0,0 +1,198 @@
+import type React from 'react'
+import type {
+  Control,
+  DeepPartial,
+  FieldValues,
+  Path,
+  UseFormGetValues,
+  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 { AutocompleteFetcher, AutocompleteOption } from '../../components/autocomplete/types'
+import type { FileRecord, FileUploaderLayout } from '../../components/fileuploader/types'
+
+export type FieldType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'textarea'
+  | 'select'
+  | 'autocomplete'
+  | 'checkbox'
+  | 'switch'
+  | 'radio'
+  | 'date'
+  | 'date_picker'
+  | 'date_range'
+  | 'month'
+  | 'month_range'
+  | 'time'
+  | 'time_range'
+  | 'date_time'
+  | 'date_time_range'
+  | 'file'
+  | 'object'
+  | 'array'
+
+export interface Dependency<TFieldValues extends FieldValues> {
+  field: Path<TFieldValues>
+  condition: (value: unknown) => boolean
+  action: 'show' | 'hide' | 'enable' | 'disable' | 'setValue'
+  value?: unknown
+}
+
+export interface FormBuilderFieldConfig<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends Path<TFieldValues> | string = Path<TFieldValues>
+> {
+  id?: string
+  name: TName
+  label: string
+  type: FieldType
+  placeholder?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+  options?: { label: string; value: string | number | null }[]
+  autocompleteMode?: 'client' | 'server'
+  fetcher?: AutocompleteFetcher
+  pageSize?: number
+  searchPlaceholder?: string
+  renderOption?: (option: AutocompleteOption, selected: boolean) => React.ReactNode
+  multiple?: boolean
+  allowCustomValue?: boolean
+  chipVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  chipClassName?: string
+  clearable?: boolean
+  initialSelectedOptions?: AutocompleteOption | AutocompleteOption[] | null
+  loadSelected?: (values: Array<string | number>) => Promise<AutocompleteOption[]>
+  validation?:
+    | z.ZodType<unknown>
+    | {
+        pattern?: { value: RegExp; message: string }
+        min?: { value: number; message: string }
+        max?: { value: number; message: string }
+        minLength?: { value: number; message: string }
+        maxLength?: { value: number; message: string }
+        minItems?: { value: number; message: string }
+        maxItems?: { value: number; message: string }
+      }
+  // Accept any for defaultValue to support relative string names for nested fields
+  defaultValue?: unknown
+  // For nested object/array fields, use relative names (eg. 'uomName')
+  fields?: Array<FormBuilderFieldConfig<TFieldValues, string>>
+  dependencies?: Array<Dependency<TFieldValues>>
+  onChange?: (
+    value: unknown,
+    extras: unknown,
+    setValue: UseFormSetValue<TFieldValues>,
+    getValues: UseFormGetValues<TFieldValues>
+  ) => void
+  className?: string
+  gridCols?: number
+  rows?: number
+  itemType?: string
+  arrayLayout?: 'card' | 'table' | 'custom'
+  arrayRender?: (params: {
+    field: FormBuilderFieldConfig<TFieldValues>
+    control: Control<TFieldValues>
+    fieldPath: string
+    value: unknown
+    onChange: (value: unknown) => void
+    addItem: () => void
+    removeItem: (index: number) => void
+    disabled?: boolean
+    rows?: { id: string }[]
+  }) => React.ReactNode
+  arrayColors?: {
+    headerBgClass?: string
+    headerTextClass?: string
+    rowAltBgClass?: string
+  }
+  conditional?: {
+    field: Path<TFieldValues>
+    value: unknown
+  }
+  hidden?: boolean
+  labelPlacement?: 'stacked' | 'inline' | 'hidden'
+  wrapperClassName?: string
+  minDate?: Date
+  maxDate?: Date
+  disabledDates?: Array<Date | { from: Date; to: Date }>
+  numberOfMonths?: number
+  popoverSide?: 'top' | 'right' | 'bottom' | 'left'
+  showFooter?: boolean
+  cancelLabel?: string
+  applyLabel?: string
+  timePrecision?: 'hour' | 'minute' | 'second'
+  hourCycle?: 12 | 24
+  minuteStep?: number
+  secondStep?: number
+  fileMultiple?: boolean
+  fileMaxFiles?: number
+  fileAccept?: Accept
+  fileLayout?: FileUploaderLayout
+  fileWithDownload?: boolean
+  fileUploader?: (file: File, onProgress: (pct: number) => void) => Promise<Partial<FileRecord>>
+  fileOnUploadSuccess?: (file: FileRecord) => void
+  fileOnUploadError?: (file: FileRecord, error: unknown) => void
+  fileOnRemove?: (file: FileRecord) => void | Promise<void>
+  fileOnRetry?: (file: FileRecord) => void
+  fileOnRetryAll?: (files: FileRecord[]) => void
+}
+
+export interface FormBuilderSectionConfig<TFieldValues extends FieldValues = FieldValues> {
+  id?: string
+  title?: string
+  description?: string
+  fields?: Array<FormBuilderFieldConfig<TFieldValues>>
+  variant?: 'card' | 'separator' | 'plain'
+  className?: string
+  collapsible?: boolean
+  defaultCollapsed?: boolean
+  layout?: SectionLayout
+  grid?: SectionGridOptions
+  flex?: SectionFlexOptions
+  hidden?: boolean
+  tabs?: Array<{
+    id: string
+    label: React.ReactNode
+    sections: Array<FormBuilderSectionConfig<TFieldValues>>
+    className?: string
+    contentClassName?: string
+  }>
+  defaultTabId?: string
+  tabsListClassName?: string
+  tabsContentClassName?: string
+}
+
+export interface FormBuilderProps<TFieldValues extends FieldValues = FieldValues> {
+  sections: Array<FormBuilderSectionConfig<TFieldValues>>
+  schema?: z.ZodType<TFieldValues>
+  defaultValues?: DeepPartial<TFieldValues> | DefaultValues<TFieldValues> | null
+  onSubmit: (data: TFieldValues) => void | Promise<void>
+  onCancel?: () => void
+  onReset?: () => void
+  onFieldChange?: (
+    name: Path<TFieldValues> | string,
+    value: unknown,
+    allValues: TFieldValues
+  ) => void
+  submitLabel?: string
+  cancelLabel?: string
+  resetLabel?: string
+  isSubmitting?: boolean
+  className?: string
+  formClassName?: string
+  actionsClassName?: string
+  showActions?: boolean
+  customActions?: React.ReactNode
+  showActionsSeparator?: boolean
+}
+
+// Re-export for external consumers that build custom section nodes
+export type { SectionNode }

package/src/kit/builder/form/utils/common-forms.ts

@@ -1,4 +1,4 @@
-import { FormBuilderSectionConfig } from '../components/FormBuilder';
+import type { FormBuilderSectionConfig } from '../types';
 import { createField } from './field-factories';
 import { createSection } from './section-factories';
 import { commonValidations } from './validations';

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

@@ -1,4 +1,4 @@
-import { FormBuilderFieldConfig } from '../components/FormBuilder';
+import type { FormBuilderFieldConfig } from '../types';
 import { commonValidations } from './validations';
 
 // Field factory functions
@@ -7,7 +7,7 @@ export const createField = {
     name: string,
     label: string,
     options: Partial<FormBuilderFieldConfig> = {},
-  ): FormBuilderFieldConfig => ({
+  ): FormBuilderFieldConfig<any> => ({
     name,
     label,
     type: 'text',
@@ -147,9 +147,9 @@ export const createField = {
   object: (
     name: string,
     label: string,
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderFieldConfig> = {},
-  ): FormBuilderFieldConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderFieldConfig<any>> = {},
+  ): FormBuilderFieldConfig<any> => ({
     name,
     label,
     type: 'object',

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

@@ -1,12 +1,12 @@
-import { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../components/FormBuilder';
+import type { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../types';
 
 // Section factory functions
 export const createSection = {
   card: (
     title: string,
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderSectionConfig> = {},
-  ): FormBuilderSectionConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderSectionConfig<any>> = {},
+  ): FormBuilderSectionConfig<any> => ({
     title,
     fields,
     variant: 'card',
@@ -15,9 +15,9 @@ export const createSection = {
 
   separator: (
     title: string,
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderSectionConfig> = {},
-  ): FormBuilderSectionConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderSectionConfig<any>> = {},
+  ): FormBuilderSectionConfig<any> => ({
     title,
     fields,
     variant: 'separator',
@@ -25,9 +25,9 @@ export const createSection = {
   }),
 
   plain: (
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderSectionConfig> = {},
-  ): FormBuilderSectionConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderSectionConfig<any>> = {},
+  ): FormBuilderSectionConfig<any> => ({
     fields,
     variant: 'plain',
     ...options,

package/src/kit/builder/stack-dialog/provider.tsx

@@ -27,7 +27,8 @@ export function StackDialogContextProvider(props: PropsWithChildren) {
   const handleCloseDialog = useCallback((id?: string) => {
     setActiveDialogs(prev => {
       const clone = [...prev];
-      clone.splice(clone.findIndex(d => d.id === (id || '')));
+      if (!id) clone.splice(clone.length - 1, 1);
+      else clone.splice(clone.findIndex((d) => (d.id === id)));
       return clone;
     });
   }, [setActiveDialogs]);

package/src/kit/builder/stack-dialog/renderer.tsx

@@ -1,5 +1,4 @@
-import { DialogContent } from '@radix-ui/react-dialog';
-import { Dialog } from '../../../shadcn/ui/dialog';
+import { Dialog, DialogContent } from '../../../shadcn/ui/dialog';
 import { StackDialogInstance } from './types';
 
 export function StackDialogRenderer(props: {
@@ -10,19 +9,19 @@ export function StackDialogRenderer(props: {
     props.closeDialog(id)
   }
 
-  return props.dialogs.map((dialog) => (
+  return props.dialogs.map((dialog, i) => (
     (
       <Dialog
-        open
-        onOpenChange={(open) => (!open && handleCloseDialog(dialog.id))}
+        open={!!props.dialogs[i]}
+        onOpenChange={handleCloseDialog(dialog.id)}
         key={dialog.id}
       >
         <DialogContent
           onEscapeKeyDown={e => {
-            if (!dialog.closeOnEscapePressed) e.preventDefault();
+            if (dialog.closeOnEscapePressed === false) e.preventDefault();
           }}
           onInteractOutside={e => {
-            if (!dialog.closeOnInteractOutside) e.preventDefault();
+            if (dialog.closeOnInteractOutside === false) e.preventDefault();
           }}
         >
           {dialog.template}