added validator for rjsf, hook form via standard schema

app/src/ui/routes/auth/forms/role.form.tsx

@@ -1,4 +1,3 @@
-//import { typeboxResolver } from "@hookform/resolvers/typebox";
 import { Input, Switch, Tooltip } from "@mantine/core";
 import { guardRoleSchema } from "auth/auth-schema";
 import { ucFirst } from "core/utils";
@@ -8,6 +7,7 @@ import { useBknd } from "ui/client/bknd";
 import { Button } from "ui/components/buttons/Button";
 import { MantineSwitch } from "ui/components/form/hook-form-mantine/MantineSwitch";
 import type { s } from "core/object/schema";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 
 const schema = guardRoleSchema;
 type Role = s.Static<typeof guardRoleSchema>;
@@ -34,8 +34,7 @@ export const AuthRoleForm = forwardRef<
       reset,
       getValues,
    } = useForm({
-      // @todo: add resolver
-      //resolver: typeboxResolver(schema),
+      resolver: standardSchemaResolver(schema),
       defaultValues: role,
    });
 

app/src/ui/routes/data/forms/entity.fields.form.tsx

@@ -22,6 +22,7 @@ import { useRoutePathState } from "ui/hooks/use-route-path-state";
 import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
 import type { TPrimaryFieldFormat } from "data/fields/PrimaryField";
 import { s, stringIdentifier } from "core/object/schema";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 
 const fieldsSchemaObject = originalFieldsSchemaObject;
 const fieldsSchema = s.anyOf(Object.values(fieldsSchemaObject));
@@ -88,8 +89,7 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
          reset,
       } = useForm({
          mode: "all",
-         // @todo: add resolver
-         //resolver: typeboxResolver(schema),
+         resolver: standardSchemaResolver(schema),
          defaultValues: {
             fields: entityFields,
          } as TFieldsFormSchema,

app/src/ui/routes/flows/components/FlowCreateModal.tsx

@@ -14,6 +14,7 @@ import {
 } from "../../../components/modal/Modal2";
 import { Step, Steps, useStepContext } from "../../../components/steps/Steps";
 import { s, stringIdentifier } from "core/object/schema";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 
 export type TCreateFlowModalSchema = any;
 const triggerNames = Object.keys(TRIGGERS) as unknown as (keyof typeof TRIGGERS)[];
@@ -55,8 +56,7 @@ export function StepCreate() {
       register,
       formState: { isValid, errors },
    } = useForm({
-      // @todo: implement resolver
-      //resolver: typeboxResolver(schema),
+      resolver: standardSchemaResolver(schema),
       defaultValues: {
          name: "",
          trigger: "manual",

app/src/ui/routes/test/index.tsx

@@ -1,5 +1,4 @@
 import AppShellAccordionsTest from "ui/routes/test/tests/appshell-accordions-test";
-import JsonSchemaFormReactTest from "ui/routes/test/tests/json-schema-form-react-test";
 
 import FormyTest from "ui/routes/test/tests/formy-test";
 import HtmlFormTest from "ui/routes/test/tests/html-form-test";
@@ -49,7 +48,6 @@ const tests = {
    SWRAndAPI,
    SwrAndDataApi,
    DropzoneElementTest,
-   JsonSchemaFormReactTest,
    JsonSchemaForm3,
    FormyTest,
    HtmlFormTest,

app/src/ui/routes/test/tests/json-schema-form-react-test.tsx

@@ -1,54 +0,0 @@
-import { Form, type Validator } from "json-schema-form-react";
-import { useState } from "react";
-
-import { type TSchema, Type } from "@sinclair/typebox";
-import { Value, type ValueError } from "@sinclair/typebox/value";
-
-class TypeboxValidator implements Validator<ValueError> {
-   async validate(schema: TSchema, data: any) {
-      return Value.Check(schema, data) ? [] : [...Value.Errors(schema, data)];
-   }
-}
-const validator = new TypeboxValidator();
-
-const schema = Type.Object({
-   name: Type.String(),
-   age: Type.Optional(Type.Number()),
-});
-
-export default function JsonSchemaFormReactTest() {
-   const [data, setData] = useState(null);
-
-   return (
-      <>
-         <Form
-            schema={schema}
-            /*onChange={setData}
-            onSubmit={setData}*/
-            validator={validator}
-            validationMode="change"
-         >
-            {({ errors, dirty, reset }) => (
-               <>
-                  <div>
-                     <b>
-                        Form {dirty ? "*" : ""} (valid: {errors.length === 0 ? "valid" : "invalid"})
-                     </b>
-                  </div>
-                  <div>
-                     <input type="text" name="name" />
-                     <input type="number" name="age" />
-                  </div>
-                  <div>
-                     <button type="submit">submit</button>
-                     <button type="button" onClick={reset}>
-                        reset
-                     </button>
-                  </div>
-               </>
-            )}
-         </Form>
-         <pre>{JSON.stringify(data, null, 2)}</pre>
-      </>
-   );
-}

app/src/ui/routes/test/tests/react-hook-errors.tsx

@@ -1,11 +1,11 @@
-import { typeboxResolver } from "@hookform/resolvers/typebox";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 import { TextInput } from "@mantine/core";
-import { Type } from "@sinclair/typebox";
 import { useForm } from "react-hook-form";
+import { s } from "core/object/schema";
 
-const schema = Type.Object({
-   example: Type.Optional(Type.String()),
-   exampleRequired: Type.String({ minLength: 2 }),
+const schema = s.object({
+   example: s.string().optional(),
+   exampleRequired: s.string({ minLength: 2 }),
 });
 
 export default function ReactHookErrors() {
@@ -15,8 +15,10 @@ export default function ReactHookErrors() {
       watch,
       formState: { errors },
    } = useForm({
-      resolver: typeboxResolver(schema),
+      resolver: standardSchemaResolver(schema),
    });
+   const data = watch();
+
    const onSubmit = (data) => console.log(data);
 
    console.log(watch("example")); // watch input value by passing the name of it