From 2154b66e703dffaecc4736241004b781434c3793 Mon Sep 17 00:00:00 2001 From: Bennett Date: Sat, 19 Oct 2024 22:28:55 +0200 Subject: [PATCH 01/18] Migrate to react-hook-form --- apps/docs/pages/docs/react/_meta.ts | 1 + apps/docs/pages/docs/react/api.mdx | 29 ++++ .../pages/docs/react/custom-integration.mdx | 63 +------- .../docs/pages/docs/react/getting-started.mdx | 32 ++-- apps/docs/pages/docs/react/migration.mdx | 22 +++ apps/web/components/Basics.tsx | 3 + packages/core/src/label.ts | 4 + packages/core/src/logic.ts | 31 +++- .../mantine/src/components/BooleanField.tsx | 15 +- packages/mantine/src/components/DateField.tsx | 14 +- .../mantine/src/components/NumberField.tsx | 14 +- .../mantine/src/components/SelectField.tsx | 8 +- .../mantine/src/components/StringField.tsx | 10 +- packages/mui/src/components/BooleanField.tsx | 17 +-- packages/mui/src/components/DateField.tsx | 8 +- packages/mui/src/components/FieldWrapper.tsx | 1 + packages/mui/src/components/NumberField.tsx | 15 +- packages/mui/src/components/SelectField.tsx | 11 +- packages/mui/src/components/StringField.tsx | 15 +- packages/react/src/ArrayField.tsx | 76 ++++------ packages/react/src/AutoForm.tsx | 141 ++++++------------ packages/react/src/AutoFormField.tsx | 49 +++--- packages/react/src/ObjectField.tsx | 39 ++--- packages/react/src/types.ts | 23 ++- packages/react/src/utils.ts | 12 ++ .../ui/autoform/components/BooleanField.tsx | 10 +- .../ui/autoform/components/DateField.tsx | 8 +- .../ui/autoform/components/FieldWrapper.tsx | 1 - .../ui/autoform/components/NumberField.tsx | 8 +- .../ui/autoform/components/SelectField.tsx | 5 +- .../ui/autoform/components/StringField.tsx | 8 +- 31 files changed, 281 insertions(+), 412 deletions(-) create mode 100644 apps/docs/pages/docs/react/api.mdx diff --git a/apps/docs/pages/docs/react/_meta.ts b/apps/docs/pages/docs/react/_meta.ts index 4f20cd7..7a27e95 100644 --- a/apps/docs/pages/docs/react/_meta.ts +++ b/apps/docs/pages/docs/react/_meta.ts @@ -3,4 +3,5 @@ export default { migration: "Migration from v1", customization: "Customization", "custom-integration": "Custom integration", + api: "API", }; diff --git a/apps/docs/pages/docs/react/api.mdx b/apps/docs/pages/docs/react/api.mdx new file mode 100644 index 0000000..90739f6 --- /dev/null +++ b/apps/docs/pages/docs/react/api.mdx @@ -0,0 +1,29 @@ +# API + +## schema: SchemaProvider + +The `schema` prop is used to pass the schema to the form. It can be a `ZodProvider` or a `YupProvider`. + +## onSubmit?: (values: T, form: FormInstance) => void + +The `onSubmit` prop is called when the form is submitted and the data is valid. It receives the form data and the form instance from react-hook-form. + +## onFormInit?: (form: FormInstance) => void + +The `onFormInit` prop is called when the form is initialized. It receives the form instance from react-hook-form. + +## withSubmit?: boolean + +The `withSubmit` prop is used to automatically add a submit button to the form. It defaults to `false`. + +## defaultValues?: Partial\ + +The `defaultValues` prop is used to set the initial values of the form. + +## values: Partial\ + +The `values` prop is used to set the values of the form. It is a controlled input. + +## children: React.ReactNode + +All children passed to the `AutoForm` component will be rendered below the form. diff --git a/apps/docs/pages/docs/react/custom-integration.mdx b/apps/docs/pages/docs/react/custom-integration.mdx index dd8ab0c..875c7c3 100644 --- a/apps/docs/pages/docs/react/custom-integration.mdx +++ b/apps/docs/pages/docs/react/custom-integration.mdx @@ -129,19 +129,10 @@ import { AutoFormFieldProps } from "@autoform/react"; export const StringField: React.FC = ({ field, - value, - onChange, + inputProps, error, id, -}) => ( - onChange(e.target.value)} - {...field.fieldConfig?.inputProps} - /> -); +}) => ; ``` ```tsx @@ -151,19 +142,9 @@ import { AutoFormFieldProps } from "@autoform/react"; export const NumberField: React.FC = ({ field, - value, - onChange, - error, + inputProps, id, -}) => ( - onChange(Number(e.target.value))} - {...field.fieldConfig?.inputProps} - /> -); +}) => ; ``` ```tsx @@ -173,19 +154,9 @@ import { AutoFormFieldProps } from "@autoform/react"; export const DateField: React.FC = ({ field, - value, - onChange, - error, + inputProps, id, -}) => ( - onChange(new Date(e.target.value))} - {...field.fieldConfig?.inputProps} - /> -); +}) => ; ``` Additionally, you can create custom field components for other types like checkboxes, radio buttons, etc. These can later be used by setting a custom `fieldType` in the schema. @@ -234,28 +205,6 @@ export function AutoForm>( } ``` -## Implement utility functions - -To provide type-safety when selecting field types, you should create a custom wrapper for the `fieldConfig` function. - -Create a new file called `src/utils.ts`: - -```tsx -// src/utils.ts -import { FieldConfig } from "@autoform/core"; -import { SuperRefineFunction } from "@autoform/zod"; -import { fieldConfig as baseFieldConfig } from "@autoform/react"; -import { ReactNode } from "react"; - -type FieldTypes = "string" | "number" | "date" | string; - -export function fieldConfig( - config: FieldConfig -): SuperRefineFunction { - return baseFieldConfig(config); -} -``` - ## Add custom field types (optional) If you want to add custom field types, you can create new components and add them to the `formComponents` object in `src/AutoForm.tsx`. For example: diff --git a/apps/docs/pages/docs/react/getting-started.mdx b/apps/docs/pages/docs/react/getting-started.mdx index 89a5609..d35e170 100644 --- a/apps/docs/pages/docs/react/getting-started.mdx +++ b/apps/docs/pages/docs/react/getting-started.mdx @@ -46,7 +46,7 @@ function MyForm() { return ( { + onSubmit={(data, form) => { console.log(data); }} withSubmit @@ -81,7 +81,7 @@ export default function MyForm() { ## Accessing the form data -There are two ways to access the form data: +The form data is managed by react-hook-form. There are two ways to access the form data: ### onSubmit @@ -89,26 +89,38 @@ The preferred way is to use the `onSubmit` prop. This will be called when the fo ```tsx { + onSubmit={(data, form) => { // Do something with the data // Data is validated and coerced with zod automatically - // You can use setError to set errors for the fields - // You can run clearForm() to clear the form + // You can use the "form" prop to access the underlying "react-hook-form" instance + // for further information and control over the form }} /> ``` -### Controlled form +### Using onFormInit and `values` -You can also use the `values` and `setValues` props to control the form data yourself. +If you need more control over the form, you can use the `onFormInit` and `values` props to get access to the react-hook-form instance and control data directly: ```tsx -const [values, setValues] = useState>>({}); +const [values, setValues] = useState({}); -; + { + // You can use the "form" prop to access the underlying "react-hook-form" instance + // https://www.react-hook-form.com/api/useform/ + form.watch((data) => { + setValues(data); + }); + + // You can freely save the form instance to a state or context and use it later to access the form state + form.formState.isDirty; // => true + }} + values={values} +/>; ``` -Please note that the data is not validated or coerced when using this method as they update immediately. +This allows you to access form methods and state from the parent component. You can use the `onFormInit` prop independent of controlled forms to access the form instance. ## Submitting the form diff --git a/apps/docs/pages/docs/react/migration.mdx b/apps/docs/pages/docs/react/migration.mdx index 4952845..748c037 100644 --- a/apps/docs/pages/docs/react/migration.mdx +++ b/apps/docs/pages/docs/react/migration.mdx @@ -93,4 +93,26 @@ const formSchema = z.object({ }); ``` +## Update callbacks + +If you are only using `onSubmit`, your code should be able to work without any changes. If you are using controlled input instead, you need to update your code to use the new `onFormInit` prop to get manual access to the form instance. + +```tsx +const [values, setValues] = useState({}); + + { + // You can use the "form" prop to access the underlying "react-hook-form" instance + // https://www.react-hook-form.com/api/useform/ + form.watch((data) => { + setValues(data); + }); + + // You can freely save the form instance to a state or context and use it later to access the form state + form.formState.isDirty; // => true + }} + values={values} +/>; +``` + diff --git a/apps/web/components/Basics.tsx b/apps/web/components/Basics.tsx index d54993e..7708aa4 100644 --- a/apps/web/components/Basics.tsx +++ b/apps/web/components/Basics.tsx @@ -9,6 +9,9 @@ function Basics() { onSubmit={(data) => { console.log(JSON.stringify(data, null, 2)); }} + onFormInit={(form) => { + console.log("Form initialized", form); + }} withSubmit /> ); diff --git a/packages/core/src/label.ts b/packages/core/src/label.ts index c04b663..f905d1c 100644 --- a/packages/core/src/label.ts +++ b/packages/core/src/label.ts @@ -14,6 +14,10 @@ export function getLabel(field: ParsedField) { } function beautifyLabel(label: string) { + if (!label) { + return ""; + } + let output = label.replace(/([A-Z])/g, " $1"); output = output.charAt(0).toUpperCase() + output.slice(1); diff --git a/packages/core/src/logic.ts b/packages/core/src/logic.ts index fe4ce33..743582d 100644 --- a/packages/core/src/logic.ts +++ b/packages/core/src/logic.ts @@ -10,7 +10,36 @@ export function validateSchema(schemaProvider: SchemaProvider, values: any) { } export function getDefaultValues( - schemaProvider: SchemaProvider, + schemaProvider: SchemaProvider ): Record { return schemaProvider.getDefaultValues(); } + +// Recursively remove empty values from an object (null, undefined, "", [], {}) +export function removeEmptyValues>( + values: T +): Partial { + const result: Partial = {}; + for (const key in values) { + const value = values[key]; + if ([null, undefined, "", [], {}].includes(value)) { + continue; + } + + if (Array.isArray(value)) { + const newArray = value.map((item: any) => { + if (typeof item === "object") { + return removeEmptyValues(item); + } + return item; + }); + result[key] = newArray.filter((item: any) => item !== null); + } else if (typeof value === "object") { + result[key] = removeEmptyValues(value) as any; + } else { + result[key] = value; + } + } + + return result; +} diff --git a/packages/mantine/src/components/BooleanField.tsx b/packages/mantine/src/components/BooleanField.tsx index ba06713..edab15b 100644 --- a/packages/mantine/src/components/BooleanField.tsx +++ b/packages/mantine/src/components/BooleanField.tsx @@ -3,17 +3,6 @@ import { Checkbox } from "@mantine/core"; import { AutoFormFieldProps } from "@autoform/react"; export const BooleanField: React.FC = ({ - field, - value, - onChange, + inputProps, label, -}) => ( - onChange(e.currentTarget.checked)} - label={label} - required={field.required} - description={field.description} - {...field.fieldConfig?.inputProps} - /> -); +}) => ; diff --git a/packages/mantine/src/components/DateField.tsx b/packages/mantine/src/components/DateField.tsx index bf5ea4f..5760dbe 100644 --- a/packages/mantine/src/components/DateField.tsx +++ b/packages/mantine/src/components/DateField.tsx @@ -4,18 +4,8 @@ import { AutoFormFieldProps } from "@autoform/react"; export const DateField: React.FC = ({ field, - value, - onChange, - error, + inputProps, label, }) => ( - onChange(date)} - error={!!error} - label={label} - required={field.required} - description={field.description} - {...field.fieldConfig?.inputProps} - /> + ); diff --git a/packages/mantine/src/components/NumberField.tsx b/packages/mantine/src/components/NumberField.tsx index f436592..00f1a9f 100644 --- a/packages/mantine/src/components/NumberField.tsx +++ b/packages/mantine/src/components/NumberField.tsx @@ -4,18 +4,8 @@ import { AutoFormFieldProps } from "@autoform/react"; export const NumberField: React.FC = ({ field, - value, - onChange, - error, + inputProps, label, }) => ( - onChange(val)} - error={!!error} - label={label} - required={field.required} - description={field.description} - {...field.fieldConfig?.inputProps} - /> + ); diff --git a/packages/mantine/src/components/SelectField.tsx b/packages/mantine/src/components/SelectField.tsx index 5cdd51e..63c7c00 100644 --- a/packages/mantine/src/components/SelectField.tsx +++ b/packages/mantine/src/components/SelectField.tsx @@ -4,19 +4,15 @@ import { AutoFormFieldProps } from "@autoform/react"; export const SelectField: React.FC = ({ field, - value, - onChange, error, + inputProps, label, }) => ( onChange(Number(e.target.value))} - error={!!error} - fullWidth - {...field.fieldConfig?.inputProps} - /> -); + inputProps, +}) => ; diff --git a/packages/mui/src/components/SelectField.tsx b/packages/mui/src/components/SelectField.tsx index e3a00ad..03368b2 100644 --- a/packages/mui/src/components/SelectField.tsx +++ b/packages/mui/src/components/SelectField.tsx @@ -5,17 +5,10 @@ import { AutoFormFieldProps } from "@autoform/react"; export const SelectField: React.FC = ({ field, - value, - onChange, + inputProps, error, }) => ( - {(field.options || []).map(([key, label]) => ( {label} diff --git a/packages/mui/src/components/StringField.tsx b/packages/mui/src/components/StringField.tsx index dd7fc2d..522f83d 100644 --- a/packages/mui/src/components/StringField.tsx +++ b/packages/mui/src/components/StringField.tsx @@ -3,18 +3,7 @@ import Input from "@mui/material/Input"; import { AutoFormFieldProps } from "@autoform/react"; export const StringField: React.FC = ({ - field, - value, - onChange, error, id, -}) => ( - onChange(e.target.value)} - error={!!error} - fullWidth - {...field.fieldConfig?.inputProps} - /> -); + inputProps, +}) => ; diff --git a/packages/react/src/ArrayField.tsx b/packages/react/src/ArrayField.tsx index b5aed97..fafa1f2 100644 --- a/packages/react/src/ArrayField.tsx +++ b/packages/react/src/ArrayField.tsx @@ -1,64 +1,46 @@ import React from "react"; -import { AutoFormFieldProps } from "./types"; +import { useFieldArray, useFormContext } from "react-hook-form"; import { AutoFormField } from "./AutoFormField"; import { useAutoForm } from "./context"; -import { getLabel } from "@autoform/core"; +import { getLabel, ParsedField } from "@autoform/core"; -export const ArrayField: React.FC = ({ field, path }) => { - const { uiComponents, setFieldValue, getError, getFieldValue } = - useAutoForm(); +export const ArrayField: React.FC<{ + field: ParsedField; + path: string[]; +}> = ({ field, path }) => { + const { uiComponents } = useAutoForm(); + const { control } = useFormContext(); + const { fields, append, remove } = useFieldArray({ + control, + name: path.join("."), + }); - const fullPath = path || []; - const fieldPathString = fullPath.join("."); - const value = getFieldValue(fieldPathString) || []; - - const handleAddItem = () => { - const subFieldType = field.schema?.[0]?.type; - let defaultValue: any; - if (subFieldType === "object") { - defaultValue = {}; - } else if (subFieldType === "array") { - defaultValue = []; - } else { - defaultValue = null; - } - - const newValue = [...value, defaultValue]; - setFieldValue(fieldPathString, newValue); - }; - - const handleRemoveItem = (index: number) => { - const newValue = value.filter((_: any, i: number) => i !== index); - setFieldValue(fieldPathString, newValue); - }; + const subFieldType = field.schema?.[0]?.type; + let defaultValue: any; + if (subFieldType === "object") { + defaultValue = {}; + } else if (subFieldType === "array") { + defaultValue = []; + } else { + defaultValue = null; + } return ( append(defaultValue)} > - {value.map((item: any, index: number) => ( + {fields.map((item, index) => ( handleRemoveItem(index)} + key={item.id} + onRemove={() => remove(index)} index={index} > - {field.schema![0] && ( - { - const newArray = [...value]; - newArray[index] = newValue; - setFieldValue(fieldPathString, newArray); - }} - error={getError(`${fieldPathString}.${index}`)} - id={`${fieldPathString}.${index}`} - label={`${getLabel(field)} ${index + 1}`} - path={[...fullPath, index.toString()]} - /> - )} + ))} diff --git a/packages/react/src/AutoForm.tsx b/packages/react/src/AutoForm.tsx index 302c99d..7755ee3 100644 --- a/packages/react/src/AutoForm.tsx +++ b/packages/react/src/AutoForm.tsx @@ -1,9 +1,9 @@ -import React, { useState } from "react"; +import React, { useEffect } from "react"; +import { useForm, FormProvider, DefaultValues } from "react-hook-form"; import { parseSchema, - validateSchema, getDefaultValues, - getLabel, + removeEmptyValues, } from "@autoform/core"; import { AutoFormProps } from "./types"; import { AutoFormProvider } from "./context"; @@ -13,119 +13,66 @@ export function AutoForm>({ schema, onSubmit = () => {}, defaultValues, + values, children, uiComponents, formComponents, withSubmit = false, - - setValues: externalSetValues, - values: externalValues, + onFormInit = () => {}, }: AutoFormProps) { const parsedSchema = parseSchema(schema); - const [internalValues, internalSetValues] = useState>(() => ({ - ...(getDefaultValues(schema) as T), - ...defaultValues, - })); - - const values = externalValues ?? internalValues; - const setValues = externalSetValues ?? internalSetValues; - - const [errors, setErrors] = useState>({}); - - const getFieldValue = (name: string) => { - const keys = name.split("."); - let current = values as any; - for (const key of keys) { - current = current[key]; + const methods = useForm({ + defaultValues: { + ...(getDefaultValues(schema) as Partial), + ...defaultValues, + } as DefaultValues, + values: values as T, + }); - if (current === undefined) { - return undefined; - } + useEffect(() => { + if (onFormInit) { + onFormInit(methods); } - return current; - }; - - const setFieldValue = (name: string, value: any) => { - setValues((prev) => { - const keys = name.split("."); - const lastKey = keys.pop()!; - let current = { ...prev } as any; - const currentRoot = current; - - for (const key of keys) { - if (current[key] === undefined) { - current[key] = {}; - } - current = current[key]; - } - current[lastKey] = value; + }, [onFormInit, methods]); - return currentRoot; - }); - }; - - const getError = (name: string) => { - return errors[name]; - }; - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - setErrors({}); - - const validationResult = validateSchema(schema, values); + const handleSubmit = async (dataRaw: T) => { + const data = removeEmptyValues(dataRaw); + const validationResult = schema.validateSchema(data as T); if (validationResult.success) { - await onSubmit(validationResult.data, { - setErrors, - clearForm: () => { - setValues(getDefaultValues(schema) as T); - }, - }); + await onSubmit(validationResult.data, methods); } else { const newErrors: Record = {}; + methods.clearErrors(); validationResult.errors?.forEach((error) => { const path = error.path.join("."); newErrors[path] = error.message; - - // For some custom errors, zod adds the final element twice for some reason - const correctedPath = error.path.slice(0, -1); - if (correctedPath.length > 0) { - newErrors[correctedPath.join(".")] = error.message; - } + methods.setError(path as any, { + type: "custom", + message: error.message, + }); }); - setErrors(newErrors); } }; return ( - - - {parsedSchema.fields.map((field) => ( - setFieldValue(field.key, value)} - id={field.key} - label={getLabel(field)} - path={[field.key]} - /> - ))} - {withSubmit && ( - Submit - )} - {children} - - + + + + {parsedSchema.fields.map((field) => ( + + ))} + {withSubmit && ( + Submit + )} + {children} + + + ); } diff --git a/packages/react/src/AutoFormField.tsx b/packages/react/src/AutoFormField.tsx index 890591b..1462923 100644 --- a/packages/react/src/AutoFormField.tsx +++ b/packages/react/src/AutoFormField.tsx @@ -1,27 +1,26 @@ import React from "react"; +import { useFormContext } from "react-hook-form"; import { useAutoForm } from "./context"; -import { AutoFormFieldProps } from "./types"; -import { getLabel } from "@autoform/core"; +import { getLabel, ParsedField } from "@autoform/core"; import { ObjectField } from "./ObjectField"; import { ArrayField } from "./ArrayField"; +import { AutoFormFieldProps } from "./types"; +import { getPathInObject } from "./utils"; -export function AutoFormField({ field, path }: AutoFormFieldProps) { +export const AutoFormField: React.FC<{ + field: ParsedField; + path: string[]; +}> = ({ field, path }) => { + const { formComponents, uiComponents } = useAutoForm(); const { - getFieldValue, - setFieldValue, - getError, - formComponents, - uiComponents, - } = useAutoForm(); - - const fieldPathString = path.join("."); + register, + formState: { errors }, + getValues, + } = useFormContext(); - const value = getFieldValue(fieldPathString); - const error = getError(fieldPathString); - - const onChange = (newValue: any) => { - setFieldValue(fieldPathString, newValue); - }; + const fullPath = path.join("."); + const error = getPathInObject(errors, path)?.message as string | undefined; + const value = getValues(fullPath); let FieldComponent: React.ComponentType = () => ( - {error && } ); -} +}; diff --git a/packages/react/src/ObjectField.tsx b/packages/react/src/ObjectField.tsx index bfd1690..53077e5 100644 --- a/packages/react/src/ObjectField.tsx +++ b/packages/react/src/ObjectField.tsx @@ -1,36 +1,23 @@ import React from "react"; -import { AutoFormFieldProps } from "./types"; import { AutoFormField } from "./AutoFormField"; import { useAutoForm } from "./context"; -import { getLabel } from "@autoform/core"; +import { getLabel, ParsedField } from "@autoform/core"; -export const ObjectField: React.FC = ({ field, path }) => { - const { uiComponents, setFieldValue, getError, getFieldValue } = - useAutoForm(); - - const fullPath = path || []; +export const ObjectField: React.FC<{ + field: ParsedField; + path: string[]; +}> = ({ field, path }) => { + const { uiComponents } = useAutoForm(); return ( - {Object.entries(field.schema!).map(([key, subField]) => { - const fullKey = [...fullPath, subField.key]; - const fullKeyString = fullKey.join("."); - - return ( - { - setFieldValue(fullKeyString, newValue); - }} - error={getError(fullKeyString)} - id={fullKeyString} - path={fullKey} - /> - ); - })} + {Object.entries(field.schema!).map(([key, subField]) => ( + + ))} ); }; diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 608136a..9b7b0f0 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -5,24 +5,23 @@ import { Renderable, SchemaProvider, } from "@autoform/core"; +import { FieldValues, UseFormReturn } from "react-hook-form"; -export interface AutoFormProps { +export interface AutoFormProps { schema: SchemaProvider; onSubmit?: ( values: T, - extra: { - setErrors: React.Dispatch>>; - clearForm: () => void; - } + form: UseFormReturn ) => void | Promise; + defaultValues?: Partial; + values?: Partial; + children?: ReactNode; uiComponents: AutoFormUIComponents; formComponents: AutoFormFieldComponents; withSubmit?: boolean; - - setValues?: React.Dispatch>>; - values?: Partial; + onFormInit?: (form: UseFormReturn) => void; } export interface AutoFormUIComponents { @@ -73,19 +72,15 @@ export interface AutoFormFieldProps { label: Renderable; field: ParsedField; value: any; - onChange: (value: any) => void; error?: string; id: string; path: string[]; + + inputProps: any; } export interface AutoFormContextType { schema: ParsedSchema; - values: Record; - errors: Record; - getFieldValue: (name: string) => any; - setFieldValue: (name: string, value: any) => void; - getError: (name: string) => string | undefined; uiComponents: AutoFormUIComponents; formComponents: AutoFormFieldComponents; } diff --git a/packages/react/src/utils.ts b/packages/react/src/utils.ts index 2921a49..5731fa6 100644 --- a/packages/react/src/utils.ts +++ b/packages/react/src/utils.ts @@ -13,3 +13,15 @@ export function fieldConfig( ): SuperRefineFunction { return baseFieldConfig(config); } + +export function getPathInObject(obj: any, path: string[]): any { + let current = obj; + for (const key of path) { + current = current[key]; + + if (current === undefined) { + return undefined; + } + } + return current; +} diff --git a/packages/shadcn/src/components/ui/autoform/components/BooleanField.tsx b/packages/shadcn/src/components/ui/autoform/components/BooleanField.tsx index 5fe8dfb..6ccf2fa 100644 --- a/packages/shadcn/src/components/ui/autoform/components/BooleanField.tsx +++ b/packages/shadcn/src/components/ui/autoform/components/BooleanField.tsx @@ -5,18 +5,12 @@ import { Label } from "../../label"; export const BooleanField: React.FC = ({ field, - value, - onChange, label, id, + inputProps, }) => (
- onChange(checked)} - {...field.fieldConfig?.inputProps} - /> +