enhance form field components and add JsonEditor support

- Updated `ObjectField`, `ArrayField`, and `FieldWrapper` components to improve flexibility and integration options by supporting additional props like `wrapperProps`.
- Added `JsonEditor` for enhanced object editing capabilities with state management and safety checks.
- Refactored utility functions and error handling for improved stability and developer experience.
- Introduced new test cases to validate `JsonEditor` functionality and schema-based forms handling.

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

@@ -56,6 +56,14 @@ const authSchema = {
    },
 } as const satisfies JSONSchema;
 
+const objectCodeSchema = {
+   type: "object",
+   properties: {
+      name: { type: "string" },
+      config: { type: "object", properties: {} },
+   },
+};
+
 const formOptions = {
    debug: true,
 };
@@ -77,6 +85,45 @@ export default function JsonSchemaForm3() {
             {/* <Form schema={_schema.auth.toJSON()} options={formOptions} /> */}
 
             <Form
+               schema={objectCodeSchema as any}
+               options={formOptions}
+               initialValues={{
+                  name: "Peter",
+                  config: {
+                     foo: "bar",
+                  },
+               }}
+            />
+            <Form
+               schema={s
+                  .object({
+                     name: s.string(),
+                     props: s.array(
+                        s.object({
+                           age: s.number(),
+                           config: s.object({}),
+                        }),
+                     ),
+                  })
+                  .toJSON()}
+               options={formOptions}
+               initialValues={{
+                  name: "Peter",
+                  props: [{ age: 20, config: { foo: "bar" } }],
+               }}
+            />
+
+            <Form
+               schema={s
+                  .object({
+                     name: s.string(),
+                     props: s.array(s.anyOf([s.string(), s.number()])),
+                  })
+                  .toJSON()}
+               options={formOptions}
+            />
+
+            {/* <Form
                options={{
                   anyOfNoneSelectedMode: "first",
                   debug: true,
@@ -98,7 +145,7 @@ export default function JsonSchemaForm3() {
                         .optional(),
                   })
                   .toJSON()}
-            />
+            /> */}
 
             {/*<Form
                onChange={(data) => console.log("change", data)}