@k3-universe/react-kit 0.0.1

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

@@ -0,0 +1,395 @@
+import { useCallback } from 'react';
+import { Control, useController, useFieldArray } from 'react-hook-form';
+import { cn } from '../../../../shadcn/lib/utils';
+import { Button } from '../../../../shadcn/ui/button';
+import { Input } from '../../../../shadcn/ui/input';
+import { Textarea } from '../../../../shadcn/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../shadcn/ui/select';
+import { Checkbox } from '../../../../shadcn/ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '../../../../shadcn/ui/radio-group';
+import { Label } from '../../../../shadcn/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../shadcn/ui/card';
+import { Plus, Trash2, GripVertical } from 'lucide-react';
+import { FormBuilderFieldConfig } from './FormBuilder';
+import { Autocomplete } from '../../../components/autocomplete/Autocomplete';
+import type { AutocompleteOption } from '../../../components/autocomplete/types';
+
+export interface FormFieldProps {
+  field: FormBuilderFieldConfig;
+  control: Control<any>;
+  onChange?: (value: any) => void;
+  onFieldChange?: (name: string, value: any, allValues: Record<string, any>) => void;
+  parentPath?: string;
+}
+
+export function FormField({ field, control, onChange, onFieldChange, parentPath }: FormFieldProps) {
+  const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+  const NULL_SENTINEL = '__NULL__';
+
+  const {
+    field: controllerField,
+    fieldState: { error },
+  } = useController({
+    name: fieldPath,
+    control,
+    disabled: field.disabled,
+  });
+
+  const handleChange = useCallback((value: any) => {
+    controllerField.onChange(value);
+    onChange?.(value);
+  }, [controllerField.onChange, onChange]);
+
+  const renderBasicField = () => {
+    const baseProps = {
+      id: fieldPath,
+      disabled: field.disabled,
+      placeholder: field.placeholder,
+      className: cn(
+        error && 'border-destructive focus-visible:ring-destructive',
+        field.className,
+      ),
+    };
+
+    switch (field.type) {
+      case 'autocomplete': {
+        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 }));
+        return (
+          <Autocomplete
+            mode={field.autocompleteMode ?? 'client'}
+            options={options}
+            fetcher={field.fetcher}
+            pageSize={field.pageSize}
+            value={(controllerField.value as string | number | null) ?? null}
+            onChange={(val) => handleChange(val)}
+            placeholder={field.placeholder}
+            searchPlaceholder={field.searchPlaceholder}
+            renderOption={field.renderOption}
+            disabled={field.disabled}
+            className={baseProps.className}
+          />
+        );
+      }
+      case 'text':
+      case 'email':
+      case 'password':
+        return (
+          <Input
+            {...baseProps}
+            type={field.type}
+            value={controllerField.value || ''}
+            onChange={e => handleChange(e.target.value)}
+          />
+        );
+
+      case 'number':
+        return (
+          <Input
+            {...baseProps}
+            type="number"
+            value={controllerField.value || ''}
+            onChange={e => handleChange(Number(e.target.value))}
+          />
+        );
+
+      case 'textarea':
+        return (
+          <Textarea
+            {...baseProps}
+            value={controllerField.value || ''}
+            onChange={e => handleChange(e.target.value)}
+            rows={4}
+          />
+        );
+
+      case 'select': {
+        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(controllerField.value)}
+            onValueChange={val => handleChange(fromUiValue(val))}
+            disabled={field.disabled}
+          >
+            <SelectTrigger className={baseProps.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>
+        );
+      }
+
+      case 'checkbox':
+        return (
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id={fieldPath}
+              checked={controllerField.value || false}
+              onCheckedChange={handleChange}
+              disabled={field.disabled}
+              className={cn(error && 'border-destructive', field.className)}
+            />
+            <Label htmlFor={fieldPath} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              {field.label}
+            </Label>
+          </div>
+        );
+
+      case 'radio': {
+        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(controllerField.value)}
+            onValueChange={val => handleChange(fromUiValue(val))}
+            disabled={field.disabled}
+            className={field.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>
+        );
+      }
+
+      case 'date':
+        return (
+          <Input
+            {...baseProps}
+            type="date"
+            value={controllerField.value ? new Date(controllerField.value).toISOString().split('T')[0] : ''}
+            onChange={e => handleChange(e.target.value ? new Date(e.target.value) : null)}
+          />
+        );
+
+      case 'file':
+        return (
+          <Input
+            {...baseProps}
+            type="file"
+            onChange={e => handleChange(e.target.files?.[0] || null)}
+          />
+        );
+
+      default:
+        return (
+          <Input
+            {...baseProps}
+            value={controllerField.value || ''}
+            onChange={e => handleChange(e.target.value)}
+          />
+        );
+    }
+  };
+
+  const renderObjectField = () => {
+    if (!field.fields) return null;
+
+    return (
+      <Card className={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 => (
+              <FormField
+                key={subField.name}
+                field={subField}
+                control={control}
+                parentPath={fieldPath}
+                onChange={onChange}
+                onFieldChange={onFieldChange}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+
+  const renderArrayField = () => {
+    const { fields, append, remove } = useFieldArray({
+      control,
+      name: fieldPath,
+    });
+
+    const addItem = () => {
+      if (field.fields && field.fields.length === 1) {
+        // Single field array (e.g., array of strings)
+        const defaultValue = field.fields[0].defaultValue || '';
+        append(defaultValue);
+      }
+      else if (field.fields) {
+        // Object array
+        const defaultObject: Record<string, any> = {};
+        field.fields.forEach((subField) => {
+          defaultObject[subField.name] = subField.defaultValue || '';
+        });
+        append(defaultObject);
+      }
+      else {
+        append('');
+      }
+    };
+
+    return (
+      <Card className={field.className}>
+        <CardHeader className="pb-3">
+          <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-4">
+              No items added yet. Click "Add Item" to get started.
+            </p>
+          ) : (
+            fields.map((item, index) => (
+              <Card key={item.id} className="relative">
+                <CardHeader className="pb-3">
+                  <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 ? (
+                    // Single field array
+                    <FormField
+                      field={{
+                        ...field.fields[0],
+                        name: field.fields[0].name,
+                        label: field.fields[0].label || 'Value',
+                      }}
+                      control={control}
+                      parentPath={`${fieldPath}.${index}`}
+                      onChange={onChange}
+                    />
+                  ) : field.fields ? (
+                    // Object array
+                    <div className="grid gap-4 md:grid-cols-2">
+                      {field.fields.map(subField => (
+                        <FormField
+                          key={subField.name}
+                          field={subField}
+                          control={control}
+                          parentPath={`${fieldPath}.${index}`}
+                          onChange={onChange}
+                          onFieldChange={onFieldChange}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    // Fallback for arrays without field definitions
+                    <Input
+                      value={controllerField.value?.[index] || ''}
+                      onChange={(e) => {
+                        const newArray = [...(controllerField.value || [])];
+                        newArray[index] = e.target.value;
+                        handleChange(newArray);
+                      }}
+                      placeholder={`Item ${index + 1}`}
+                      disabled={field.disabled}
+                    />
+                  )}
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </CardContent>
+      </Card>
+    );
+  };
+
+  if (field.type === 'object') {
+    return renderObjectField();
+  }
+
+  if (field.type === 'array') {
+    return renderArrayField();
+  }
+
+  // For checkbox, we don't need the label wrapper since it's handled internally
+  if (field.type === 'checkbox') {
+    return (
+      <div className={cn('space-y-2', field.gridCols && `md:col-span-${field.gridCols}`)}>
+        {renderBasicField()}
+        {field.description && (
+          <p className="text-sm text-muted-foreground">{field.description}</p>
+        )}
+        {error && (
+          <p className="text-sm text-destructive">{error.message}</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-2', field.gridCols && `md:col-span-${field.gridCols}`)}>
+      <Label htmlFor={fieldPath} className="text-sm font-medium">
+        {field.label}
+        {field.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      {renderBasicField()}
+      {field.description && (
+        <p className="text-sm text-muted-foreground">{field.description}</p>
+      )}
+      {error && (
+        <p className="text-sm text-destructive">{error.message}</p>
+      )}
+    </div>
+  );
+}
+
+export default FormField;

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../../shadcn/ui/card';
+import { Separator } from '../../../../shadcn/ui/separator';
+import { cn } from '../../../../shadcn/lib/utils';
+
+export interface FormSectionProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  variant?: 'card' | 'separator' | 'plain';
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+}
+
+export interface FormSectionConfig extends FormSectionProps {
+  id: string;
+}
+
+export function FormSection({
+  title,
+  description,
+  children,
+  variant = 'card',
+  className,
+  headerClassName,
+  contentClassName,
+}: FormSectionProps) {
+  const renderHeader = () => {
+    if (!title && !description) return null;
+
+    return (
+      <div className={cn('space-y-1', headerClassName)}>
+        {title && (
+          <h3 className="text-lg font-medium leading-none">{title}</h3>
+        )}
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+    );
+  };
+
+  const renderContent = () => (
+    <div className={cn('space-y-4', contentClassName)}>
+      {children}
+    </div>
+  );
+
+  switch (variant) {
+    case 'card':
+      return (
+        <Card className={className}>
+          {(title || description) && (
+            <CardHeader>
+              {title && <CardTitle>{title}</CardTitle>}
+              {description && <CardDescription>{description}</CardDescription>}
+            </CardHeader>
+          )}
+          <CardContent className={cn(!title && !description && 'pt-6')}>
+            {renderContent()}
+          </CardContent>
+        </Card>
+      );
+
+    case 'separator':
+      return (
+        <div className={cn('space-y-6', className)}>
+          {(title || description) && (
+            <>
+              {renderHeader()}
+              <Separator />
+            </>
+          )}
+          {renderContent()}
+        </div>
+      );
+
+    case 'plain':
+    default:
+      return (
+        <div className={cn('space-y-6', className)}>
+          {renderHeader()}
+          {renderContent()}
+        </div>
+      );
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './FormActions';
+export * from './FormBuilder';
+export * from './FormField';
+export * from './FormSection';

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

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

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

@@ -0,0 +1,68 @@
+import { FormBuilderSectionConfig } from '../components/FormBuilder';
+import { createField } from './field-factories';
+import { createSection } from './section-factories';
+import { commonValidations } from './validations';
+
+// Pre-built common form configurations
+export const commonForms = {
+  // User registration form
+  userRegistration: (): FormBuilderSectionConfig[] => [
+    createSection.card('Personal Information', [
+      createField.text('firstName', 'First Name', { required: true }),
+      createField.text('lastName', 'Last Name', { required: true }),
+      createField.email('email', 'Email Address', { required: true }),
+      createField.password('password', 'Password', { required: true }),
+      createField.password('confirmPassword', 'Confirm Password', {
+        required: true,
+      }),
+    ]),
+    createSection.card('Additional Information', [
+      createField.text('phone', 'Phone Number', {
+        validation: commonValidations.phone,
+      }),
+      createField.date('dateOfBirth', 'Date of Birth'),
+      createField.checkbox(
+        'agreeToTerms',
+        'I agree to the terms and conditions',
+        { required: true },
+      ),
+    ]),
+  ],
+
+  // Contact form
+  contact: (): FormBuilderSectionConfig[] => [
+    createSection.plain([
+      createField.text('name', 'Full Name', { required: true }),
+      createField.email('email', 'Email Address', { required: true }),
+      createField.text('subject', 'Subject', { required: true }),
+      createField.textarea('message', 'Message', {
+        required: true,
+        gridCols: 2,
+      }),
+    ]),
+  ],
+
+  // Address form
+  address: (): FormBuilderSectionConfig[] => [
+    createSection.card('Address Information', [
+      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' },
+          // Add more countries as needed
+        ],
+        { required: true },
+      ),
+    ]),
+  ],
+};

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

@@ -0,0 +1,56 @@
+// Dependency helpers
+export const createDependency = {
+  showWhen: (field: string, condition: (value: any) => boolean) => ({
+    field,
+    condition,
+    action: 'show' as const,
+  }),
+
+  hideWhen: (field: string, condition: (value: any) => boolean) => ({
+    field,
+    condition,
+    action: 'hide' as const,
+  }),
+
+  enableWhen: (field: string, condition: (value: any) => boolean) => ({
+    field,
+    condition,
+    action: 'enable' as const,
+  }),
+
+  disableWhen: (field: string, condition: (value: any) => boolean) => ({
+    field,
+    condition,
+    action: 'disable' as const,
+  }),
+
+  setValueWhen: (
+    field: string,
+    condition: (value: any) => boolean,
+    value: any,
+  ) => ({
+    field,
+    condition,
+    action: 'setValue' as const,
+    value,
+  }),
+};
+
+// Common condition helpers
+export const conditions = {
+  equals: (value: any) => (fieldValue: any) => fieldValue === value,
+  notEquals: (value: any) => (fieldValue: any) => fieldValue !== value,
+  includes: (value: any) => (fieldValue: any) =>
+    Array.isArray(fieldValue) && fieldValue.includes(value),
+  notIncludes: (value: any) => (fieldValue: any) =>
+    Array.isArray(fieldValue) && !fieldValue.includes(value),
+  isEmpty: () => (fieldValue: any) =>
+    !fieldValue || (Array.isArray(fieldValue) && fieldValue.length === 0),
+  isNotEmpty: () => (fieldValue: any) =>
+    fieldValue && (!Array.isArray(fieldValue) || fieldValue.length > 0),
+  greaterThan: (value: number) => (fieldValue: any) =>
+    Number(fieldValue) > value,
+  lessThan: (value: number) => (fieldValue: any) => Number(fieldValue) < value,
+  isTrue: () => (fieldValue: any) => fieldValue === true,
+  isFalse: () => (fieldValue: any) => fieldValue === false,
+};