inlined JSON schema form library and updated related references to address bundling and React static asset issues

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

@@ -1,4 +1,5 @@
 import AppShellAccordionsTest from "ui/routes/test/tests/appshell-accordions-test";
+import JsonSchemaFormReactTest from "ui/routes/test/tests/json-schema-form-react-test";
 import SwaggerTest from "ui/routes/test/tests/swagger-test";
 import SWRAndAPI from "ui/routes/test/tests/swr-and-api";
 import SwrAndDataApi from "ui/routes/test/tests/swr-and-data-api";
@@ -43,7 +44,8 @@ const tests = {
    SwaggerTest,
    SWRAndAPI,
    SwrAndDataApi,
-   DropzoneElementTest
+   DropzoneElementTest,
+   JsonSchemaFormReactTest
 } as const;
 
 export default function TestRoutes() {

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

@@ -0,0 +1,54 @@
+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>
+      </>
+   );
+}