@k3-universe/react-kit 0.0.27 → 0.0.29

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

@@ -1,4 +1,4 @@
-import type React from 'react'
+import type React from 'react';
 import type {
   Control,
   DeepPartial,
@@ -8,13 +8,23 @@ import type {
   UseFormReturn,
   UseFormSetValue,
   DefaultValues,
-} from 'react-hook-form'
-import type { z } from 'zod'
-import type { Accept } from 'react-dropzone'
-import type { SectionFlexOptions, SectionGridOptions, SectionLayout } from '../section/types'
-import type { AutocompleteFetcher, AutocompleteOption } from '../../components/autocomplete/types'
-import type { FileRecord, FileUploaderLayout } from '../../components/fileuploader/types'
-import { ReactNode } from 'react'
+} from 'react-hook-form';
+import type { z } from 'zod';
+import type { Accept } from 'react-dropzone';
+import type {
+  SectionFlexOptions,
+  SectionGridOptions,
+  SectionLayout,
+} from '../section/types';
+import type {
+  AutocompleteFetcher,
+  AutocompleteOption,
+} from '../../components/autocomplete/types';
+import type {
+  FileRecord,
+  FileUploaderLayout,
+} from '../../components/fileuploader/types';
+import type { ReactNode } from 'react';
 
 export type FieldType =
   | 'text'
@@ -40,178 +50,193 @@ export type FieldType =
   | 'hidden'
   | 'object'
   | 'array'
-  | 'custom_field'
+  | 'custom_field';
 
 export interface Dependency<TFieldValues extends FieldValues> {
-  field: Path<TFieldValues>
-  condition: (value: unknown) => boolean
-  action: 'show' | 'hide' | 'enable' | 'disable' | 'setValue'
-  value?: unknown
+  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>
+  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 | boolean | null }[]
-  autocompleteMode?: 'client' | 'server'
-  fetcher?: AutocompleteFetcher
-  fetcherFilter?: () => Record<string, string | number | boolean | null>
-  pageSize?: number
-  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[]>
+  id?: string;
+  name: TName;
+  label: string;
+  type: FieldType;
+  placeholder?: string;
+  description?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { label: string; value: string | number | boolean | null }[];
+  autocompleteMode?: 'client' | 'server';
+  fetcher?: AutocompleteFetcher;
+  fetcherFilter?: () => Record<string, string | number | boolean | null>;
+  pageSize?: number;
+  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 }
-      }
+        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
+  defaultValue?: unknown;
   // For nested object/array fields, use relative names (eg. 'uomName')
-  fields?: Array<FormBuilderFieldConfig<TFieldValues, string>>
-  dependencies?: Array<Dependency<TFieldValues>>
+  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'
+    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
+    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
-  }
+    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
+    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;
   customRender?: (fieldControl: {
-    field: FormBuilderFieldConfig<TFieldValues, string>,
-    fieldPath: string,
-    control: Control<TFieldValues>,
-    value: TFieldValues,
-    handleChange: (value: unknown, ...extras: unknown[]) => void,
-  }) => React.ReactNode
+    field: FormBuilderFieldConfig<TFieldValues, string>;
+    fieldPath: string;
+    control: Control<TFieldValues>;
+    value: TFieldValues;
+    handleChange: (value: unknown, ...extras: unknown[]) => void;
+  }) => React.ReactNode;
 }
 
-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
+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: ReactNode,
-    sections: Array<FormBuilderSectionConfig<TFieldValues>>
-    className?: string
-    contentClassName?: string
-  }>
-  defaultTabId?: string
-  tabsListClassName?: string
-  tabsContentClassName?: string
+    id: string;
+    label: ReactNode;
+    sections: Array<FormBuilderSectionConfig<TFieldValues>>;
+    className?: string;
+    contentClassName?: string;
+  }>;
+  defaultTabId?: string;
+  tabsListClassName?: string;
+  tabsContentClassName?: string;
 }
 
-export interface FormBuilderProps<TFieldValues extends FieldValues = FieldValues> {
+export interface FormBuilderProps<
+  TFieldValues extends FieldValues = FieldValues,
+> {
   // Accept form from useFormBuilder hook
-  form?: UseFormReturn<TFieldValues>
-  sections: Array<FormBuilderSectionConfig<TFieldValues>>
-  
+  form?: UseFormReturn<TFieldValues>;
+  sections: Array<FormBuilderSectionConfig<TFieldValues>>;
+
   // Optional overrides (for backward compatibility)
-  schema?: z.ZodType<TFieldValues>
-  defaultValues?: DeepPartial<TFieldValues> | DefaultValues<TFieldValues> | null
-  
+  schema?: z.ZodType<TFieldValues>;
+  defaultValues?:
+    | DeepPartial<TFieldValues>
+    | DefaultValues<TFieldValues>
+    | null;
+
   // Handlers
-  onSubmit: (data: TFieldValues) => void | Promise<void>
-  onCancel?: () => void
-  onReset?: () => void
+  onSubmit: (data: TFieldValues) => void | Promise<void>;
+  onCancel?: () => void;
+  onReset?: () => void;
   onFieldChange?: (
     name: Path<TFieldValues> | string,
     value: unknown,
-    allValues: TFieldValues
-  ) => void
-  
+    allValues: TFieldValues,
+  ) => void;
+
   // UI customization
-  submitLabel?: string
-  cancelLabel?: string
-  resetLabel?: string
-  isSubmitting?: boolean
-  className?: string
-  formClassName?: string
-  actionsClassName?: string
-  showActions?: boolean
-  customActions?: React.ReactNode
-  showActionsSeparator?: boolean
+  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 } from '../section/types'
+export type { SectionNode } from '../section/types';

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

@@ -1,4 +1,7 @@
-import type { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../types';
+import type {
+  FormBuilderFieldConfig,
+  FormBuilderSectionConfig,
+} from '../types';
 
 // Section factory functions
 export const createSection = {

package/src/kit/builder/form/utils/transformers.ts

@@ -6,7 +6,7 @@ export const transformers = {
       if (Array.isArray(obj)) {
         return obj
           .map(clean)
-          .filter(item => item !== null && item !== undefined);
+          .filter((item) => item !== null && item !== undefined);
       }
 
       if (obj && typeof obj === 'object') {
@@ -47,11 +47,11 @@ export const transformers = {
           result[key] = parseValue(obj[key], [...path, key]);
 
           if (
-            numberFields.includes(currentPath)
-            && typeof result[key] === 'string'
+            numberFields.includes(currentPath) &&
+            typeof result[key] === 'string'
           ) {
             const num = Number(result[key]);
-            if (!isNaN(num)) {
+            if (!Number.isNaN(num)) {
               result[key] = num;
             }
           }

package/src/kit/builder/form/utils/validations.ts

@@ -5,7 +5,7 @@ export const commonValidations = {
   email: z.string().email('Please enter a valid email address'),
   phone: z
     .string()
-    .regex(/^[\+]?[1-9][\d]{0,15}$/, 'Please enter a valid phone number'),
+    .regex(/^[+]?[1-9][\d]{0,15}$/, 'Please enter a valid phone number'),
   url: z.string().url('Please enter a valid URL'),
   password: z.string().min(8, 'Password must be at least 8 characters'),
   strongPassword: z

package/src/kit/builder/page/Page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { Button, buttonVariants } from '../../../shadcn/ui/button';
 import {
   DropdownMenu,
@@ -37,7 +37,7 @@ export type PageDropdownAction = {
   type: 'dropdown';
   key?: string;
   trigger: Omit<PageButtonAction, 'type'>;
-  items: (PageDropdownActionItem | { type: 'separator'; key?: string; })[];
+  items: (PageDropdownActionItem | { type: 'separator'; key?: string })[];
 };
 
 export type PageAction = PageButtonAction | PageDropdownAction;
@@ -65,7 +65,16 @@ const widthToClass: Record<PageContainerWidth, string> = {
 
 function renderAction(action: PageAction) {
   if (action.type === 'button') {
-    const { label, onClick, variant, size, leftIcon, rightIcon, disabled, className } = action;
+    const {
+      label,
+      onClick,
+      variant,
+      size,
+      leftIcon,
+      rightIcon,
+      disabled,
+      className,
+    } = action;
     return (
       <Button
         key={action.key ?? String(label)}
@@ -90,7 +99,7 @@ function renderAction(action: PageAction) {
           type="button"
           className={cn(
             buttonVariants({ variant: trigger.variant, size: trigger.size }),
-            trigger.className
+            trigger.className,
           )}
           onClick={trigger.onClick}
           disabled={trigger.disabled}
@@ -143,8 +152,19 @@ export function Page({
 }: PageProps) {
   return (
     <div className={cn('w-full', className)}>
-      <div className={cn('px-4 sm:px-6 lg:px-8', widthToClass[containerWidth], 'mx-auto')}>
-        <header className={cn('flex items-start justify-between gap-3 py-6', headerClassName)}>
+      <div
+        className={cn(
+          'px-4 sm:px-6 lg:px-8',
+          widthToClass[containerWidth],
+          'mx-auto',
+        )}
+      >
+        <header
+          className={cn(
+            'flex items-start justify-between gap-3 py-6',
+            headerClassName,
+          )}
+        >
           <div className="flex min-w-0 flex-col gap-1">
             <h1 className="text-2xl font-semibold leading-none tracking-tight text-foreground">
               {title}

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

@@ -1 +1 @@
-export * from './Page'
+export * from './Page';