Add generic Field components and refactor ObjectForm

Introduces a set of reusable field components (TextField, NumberField, BooleanField, SelectField, DateField, TextAreaField) and a generic Field wrapper in the UI package. Refactors ObjectForm to use these new field components via react-hook-form's Controller, improving form flexibility and consistency. Also updates Checkbox to use Radix UI primitives.

Author: hotlong

packages/client/src/components/dashboard/ObjectForm.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { Button, Input, Label, Spinner } from '@objectql/ui';
+import { useForm, Controller } from 'react-hook-form';
+import { Button, Spinner, Field } from '@objectql/ui';
 
 interface ObjectFormProps {
     objectName: string;
@@ -12,7 +12,7 @@ interface ObjectFormProps {
 
 export function ObjectForm({ objectName, initialValues, onSubmit, onCancel, headers }: ObjectFormProps) {
     const [schema, setSchema] = useState<any>(null);
-    const { register, handleSubmit, reset } = useForm({
+    const { control, handleSubmit, reset } = useForm({
         defaultValues: initialValues || {}
     });
 
@@ -38,14 +38,25 @@ export function ObjectForm({ objectName, initialValues, onSubmit, onCancel, head
                 if (['id', '_id', 'createdAt', 'updatedAt', 'createdBy', 'updatedBy'].includes(key)) return null;
 
                 return (
-                    <div key={key} className="space-y-2">
-                        <Label htmlFor={key}>{field.label || field.title || key}</Label>
-                        <Input 
-                            id={key}
-                            {...register(key, { required: !field.optional })} 
-                            type={field.type === 'number' || field.type === 'integer' || field.type === 'float' ? 'number' : field.type === 'password' ? 'password' : 'text'}
-                        />
-                    </div>
+                    <Controller
+                        key={key}
+                        name={key}
+                        control={control}
+                        rules={{ required: field.required }}
+                        render={({ field: { value, onChange }, fieldState: { error } }) => (
+                            <Field
+                                name={key}
+                                label={field.label || field.title || key}
+                                type={field.type}
+                                value={value}
+                                onChange={onChange}
+                                error={error?.message}
+                                required={field.required}
+                                description={field.description}
+                                options={field.options}
+                            />
+                        )}
+                    />
                 );
             })}
             <div className="flex justify-end gap-2 pt-4">

packages/ui/src/components/fields/BooleanField.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { Checkbox } from "../ui/checkbox"
+import { Label } from "../ui/label"
+import { cn } from "@/lib/utils"
+import { FieldProps } from "./types"
+
+export function BooleanField({
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  className,
+  error,
+  label,
+  required,
+  description,
+  name,
+}: FieldProps<boolean>) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={name}
+          checked={value}
+          onCheckedChange={(checked) => {
+            if (readOnly) return;
+            onChange?.(checked as boolean)
+          }}
+          disabled={disabled || readOnly}
+          className={cn(error && "border-destructive")}
+        />
+        {label && (
+          <Label htmlFor={name} className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive")}>
+            {label}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Label>
+        )}
+      </div>
+      {description && !error && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

packages/ui/src/components/fields/DateField.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "../ui/button"
+import { Calendar } from "../ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../ui/popover"
+import { Label } from "../ui/label"
+import { FieldProps } from "./types"
+
+export function DateField({
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  className,
+  placeholder,
+  error,
+  label,
+  required,
+  description,
+  name,
+}: FieldProps<Date>) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      {label && (
+        <Label htmlFor={name} className={cn(error && "text-destructive")}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id={name}
+            variant={"outline"}
+            disabled={disabled || readOnly}
+            className={cn(
+              "w-full justify-start text-left font-normal",
+              !value && "text-muted-foreground",
+              error && "border-destructive focus-visible:ring-destructive"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value ? format(value, "PPP") : <span>{placeholder || "Pick a date"}</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0">
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={onChange}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+      {description && !error && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

packages/ui/src/components/fields/Field.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { FieldProps } from './types'
+import { TextField } from './TextField'
+import { NumberField } from './NumberField'
+import { BooleanField } from './BooleanField'
+import { SelectField } from './SelectField'
+import { DateField } from './DateField'
+import { TextAreaField } from './TextAreaField'
+
+export interface GenericFieldProps extends FieldProps {
+    type: string
+}
+
+export function Field({ type, ...props }: GenericFieldProps) {
+    switch (type) {
+        case 'text':
+        case 'string':
+        case 'email':
+        case 'url':
+        case 'password':
+        case 'tel':
+            return <TextField type={type === 'string' ? 'text' : type as any} {...props} />
+        case 'number':
+        case 'integer':
+        case 'float':
+        case 'currency':
+        case 'percent':
+            return <NumberField {...props} />
+        case 'boolean':
+            return <BooleanField {...props} />
+        case 'date':
+        case 'datetime':
+            return <DateField {...props} />
+        case 'select':
+            return <SelectField {...props} />
+        case 'textarea':
+        case 'longtext':
+            return <TextAreaField {...props} />
+        default:
+            return <TextField {...props} />
+    }
+}

packages/ui/src/components/fields/NumberField.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import { cn } from "@/lib/utils"
+import { FieldProps } from "./types"
+
+export interface NumberFieldProps extends FieldProps<number> {
+  min?: number
+  max?: number
+  step?: number
+}
+
+export function NumberField({
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  className,
+  placeholder,
+  error,
+  label,
+  required,
+  description,
+  name,
+  min,
+  max,
+  step
+}: NumberFieldProps) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      {label && (
+        <Label htmlFor={name} className={cn(error && "text-destructive")}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      <Input
+        id={name}
+        type="number"
+        value={value ?? ""}
+        onChange={(e) => {
+          const val = e.target.value === "" ? undefined : Number(e.target.value)
+          // Handle NaN if necessary, but type="number" blocks most non-numbers
+          onChange?.(val as number)
+        }}
+        disabled={disabled}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        min={min}
+        max={max}
+        step={step}
+        className={cn(error && "border-destructive focus-visible:ring-destructive")}
+      />
+      {description && !error && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

packages/ui/src/components/fields/SelectField.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { Label } from "../ui/label"
+import { cn } from "@/lib/utils"
+import { FieldProps } from "./types"
+
+export function SelectField({
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  className,
+  placeholder,
+  error,
+  label,
+  required,
+  description,
+  name,
+  options = [],
+}: FieldProps<string | number>) {
+  const normalizedOptions = React.useMemo(() => {
+    return options.map((option) => {
+      if (typeof option === "object" && option !== null && "value" in option) {
+        return option
+      }
+      return { label: String(option), value: option }
+    })
+  }, [options])
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      {label && (
+        <Label htmlFor={name} className={cn(error && "text-destructive")}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      <Select
+        value={value?.toString()}
+        onValueChange={onChange}
+        disabled={disabled || readOnly}
+      >
+        <SelectTrigger 
+            id={name}
+            className={cn(error && "border-destructive focus:ring-destructive")}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {normalizedOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value?.toString() ?? ""}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {description && !error && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

packages/ui/src/components/fields/TextAreaField.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { Textarea } from "../ui/textarea"
+import { Label } from "../ui/label"
+import { cn } from "@/lib/utils"
+import { FieldProps } from "./types"
+
+export function TextAreaField({
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  className,
+  placeholder,
+  error,
+  label,
+  required,
+  description,
+  name,
+}: FieldProps<string>) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      {label && (
+        <Label htmlFor={name} className={cn(error && "text-destructive")}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      <Textarea
+        id={name}
+        value={value || ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        className={cn(error && "border-destructive focus-visible:ring-destructive", "min-h-[80px]")}
+      />
+      {description && !error && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}