From d90f14c707ea8ce31ebb87e558f36c14b42b8caf Mon Sep 17 00:00:00 2001 From: dswbx Date: Tue, 11 Mar 2025 10:17:07 +0100 Subject: [PATCH] upgrade hook form resolvers --- app/package.json | 2 +- .../flows/components/FlowCreateModal.tsx | 2 +- app/src/ui/routes/test/index.tsx | 2 - .../routes/test/tests/entity-fields-form.tsx | 296 ------------------ bun.lock | 6 +- 5 files changed, 6 insertions(+), 302 deletions(-) delete mode 100644 app/src/ui/routes/test/tests/entity-fields-form.tsx diff --git a/app/package.json b/app/package.json index c73c7f8..f82c87a 100644 --- a/app/package.json +++ b/app/package.json @@ -66,7 +66,7 @@ "@dagrejs/dagre": "^1.1.4", "@hono/typebox-validator": "^0.3.2", "@hono/vite-dev-server": "^0.19.0", - "@hookform/resolvers": "^3.9.1", + "@hookform/resolvers": "^4.1.3", "@libsql/kysely-libsql": "^0.4.1", "@mantine/modals": "^7.17.1", "@mantine/notifications": "^7.17.1", diff --git a/app/src/ui/routes/flows/components/FlowCreateModal.tsx b/app/src/ui/routes/flows/components/FlowCreateModal.tsx index 4ac3ad4..1159436 100644 --- a/app/src/ui/routes/flows/components/FlowCreateModal.tsx +++ b/app/src/ui/routes/flows/components/FlowCreateModal.tsx @@ -70,7 +70,7 @@ export function StepCreate() { name: "", trigger: "manual", mode: "async", - }, + } as Static, mode: "onSubmit", }); diff --git a/app/src/ui/routes/test/index.tsx b/app/src/ui/routes/test/index.tsx index 6246a60..e4d61f0 100644 --- a/app/src/ui/routes/test/index.tsx +++ b/app/src/ui/routes/test/index.tsx @@ -16,7 +16,6 @@ import ModalTest from "../../routes/test/tests/modal-test"; import QueryJsonFormTest from "../../routes/test/tests/query-jsonform"; import DropdownTest from "./tests/dropdown-test"; import DropzoneElementTest from "./tests/dropzone-element-test"; -import EntityFieldsForm from "./tests/entity-fields-form"; import FlowsTest from "./tests/flows-test"; import JsonSchemaForm3 from "./tests/json-schema-form3"; import JsonFormTest from "./tests/jsonform-test"; @@ -42,7 +41,6 @@ const tests = { SqlAiTest, SortableTest, ReactHookErrors, - EntityFieldsForm, FlowsTest, AppShellAccordionsTest, SwaggerTest, diff --git a/app/src/ui/routes/test/tests/entity-fields-form.tsx b/app/src/ui/routes/test/tests/entity-fields-form.tsx deleted file mode 100644 index 12677ec..0000000 --- a/app/src/ui/routes/test/tests/entity-fields-form.tsx +++ /dev/null @@ -1,296 +0,0 @@ -import { typeboxResolver } from "@hookform/resolvers/typebox"; -import { Select, Switch, Tabs, TextInput, Textarea, Tooltip } from "@mantine/core"; -import { useDisclosure } from "@mantine/hooks"; -import { Type } from "@sinclair/typebox"; -import { StringEnum, StringIdentifier, transformObject } from "core/utils"; -import { FieldClassMap } from "data"; -import { omit } from "lodash-es"; -import { - type FieldArrayWithId, - type FieldValues, - type UseControllerProps, - type UseFormReturn, - useController, - useFieldArray, - useForm, -} from "react-hook-form"; -import { TbChevronDown, TbChevronUp, TbGripVertical, TbTrash } from "react-icons/tb"; -import { Button } from "../../../components/buttons/Button"; -import { IconButton } from "../../../components/buttons/IconButton"; -import { MantineSelect } from "../../../components/form/hook-form-mantine/MantineSelect"; - -const fieldSchemas = transformObject(omit(FieldClassMap, ["primary"]), (value) => value.schema); -const fieldSchema = Type.Union( - Object.entries(fieldSchemas).map(([type, schema]) => - Type.Object( - { - type: Type.Const(type), - name: StringIdentifier, - config: Type.Optional(schema), - }, - { - additionalProperties: false, - }, - ), - ), -); -const schema = Type.Object({ - fields: Type.Array(fieldSchema), -}); - -const fieldSchema2 = Type.Object({ - type: StringEnum(Object.keys(fieldSchemas)), - name: StringIdentifier, -}); - -function specificFieldSchema(type: keyof typeof fieldSchemas) { - return Type.Omit(fieldSchemas[type], [ - "label", - "description", - "required", - "fillable", - "hidden", - "virtual", - ]); -} - -export default function EntityFieldsForm() { - const { - control, - formState: { isValid, errors }, - getValues, - handleSubmit, - watch, - register, - setValue, - } = useForm({ - mode: "onTouched", - resolver: typeboxResolver(schema), - defaultValues: { - fields: [{ type: "text", name: "", config: {} }], - sort: { by: "-1", dir: "asc" }, - }, - }); - const defaultType = Object.keys(fieldSchemas)[0]; - const { fields, append, prepend, remove, swap, move, insert, update } = useFieldArray({ - control, // control props comes from useForm (optional: if you are using FormProvider) - name: "fields", // unique name for your Field Array - }); - - function handleAppend() { - append({ type: "text", name: "", config: {} }); - } - - return ( -
- {/*{fields.map((field, index) => ( - - ))}*/} - {fields.map((field, index) => ( - - ))} - - - -
- 
{JSON.stringify(watch(), null, 2)}
-
-
- ); -} - -function EntityFieldForm({ update, index, value }) { - const { - register, - handleSubmit, - control, - formState: { errors }, - } = useForm({ - mode: "onBlur", - resolver: typeboxResolver( - Type.Object({ - type: StringEnum(Object.keys(fieldSchemas)), - name: Type.String({ minLength: 1, maxLength: 3 }), - }), - ), - defaultValues: value, - }); - - function handleUpdate({ id, ...data }) { - console.log("data", data); - update(index, data); - } - - return ( -
- - - - ); -} - -function EntityFieldController({ - name, - control, - defaultValue, - rules, - shouldUnregister, -}: UseControllerProps & { - index: number; -}) { - const { - field: { value, onChange: fieldOnChange, ...field }, - fieldState, - } = useController({ - name, - control, - defaultValue, - rules, - shouldUnregister, - }); - - return
field
; -} - -function EntityField({ - field, - index, - form: { watch, register, setValue, getValues, control }, - remove, - defaultType, -}: { - field: FieldArrayWithId; - index: number; - form: Pick, "watch" | "register" | "setValue" | "getValues" | "control">; - remove: (index: number) => void; - defaultType: string; -}) { - const [opened, handlers] = useDisclosure(false); - const prefix = `fields.${index}` as const; - const name = watch(`${prefix}.name`); - const enabled = name?.length > 0; - const type = watch(`${prefix}.type`); - //const config = watch(`${prefix}.config`); - const selectFieldRegister = register(`${prefix}.type`); - //console.log("type", type, specificFieldSchema(type as any)); - - function handleDelete(index: number) { - return () => { - if (name.length === 0) { - remove(index); - return; - } - window.confirm(`Sure to delete "${name}"?`) && remove(index); - }; - } - - return ( -
-
-
- -
-
-
-