@nolwenture/formik-jsonschema-form 0.8.0 → 0.9.0

package/README.md

@@ -578,6 +578,130 @@ export const conditionsSchema = {
 };
 ```
 
+Another option to give conditional fields is using `dependencies`-object inside the main schema.
+Dependencies can either be triggered by the conditional-giving property being present in the form values, or by the conditional-giving property having a certain value.
+
+To have value-dependent conditionals, the `dependencies`-object needs to have an `oneOf`-array listing the possible conditional-giving values matching the enum-values of the conditional-giving field. Each case in in the `oneOf` array can either have no conditional fields, then the only key-value pair given inside `properties` is the matching conditional (see "no type"), or an unlimited amount of conditional fields listed after the matching conditional.
+
+```tsx
+export const refDefSchema: Schema = {
+  type: "object",
+  properties: {
+    creditCard: {
+      type: "number",
+      title: "Credit card number",
+      description:
+        "Giving any input to this field will trigger its dependent field 'billing_address'",
+    },
+    fieldType: {
+      type: "string",
+      description:
+        "Selecting an option in this field will render the correct dependent field from the provided oneOf-array",
+      enum: ["string", "object", "array"],
+    },
+  },
+  dependencies: {
+    creditCard: {
+      properties: {
+        billing_address: {
+          type: "object",
+          description: "This object depends on creditCard field input",
+          properties: {
+            street: { type: "string", title: "Street" },
+            city: { type: "string", title: "City" },
+            postalCode: { type: "number", title: "Postal code" },
+          },
+        },
+      },
+      required: ["billing_address"],
+    },
+    fieldType: {
+      oneOf: [
+        {
+          properties: {
+            fieldType: {
+              enum: ["no type"],
+            },
+          },
+        },
+        {
+          properties: {
+            fieldType: {
+              enum: ["string"],
+            },
+            stringField: {
+              type: "string",
+              title: "StringField",
+            },
+          },
+        },
+        {
+          properties: {
+            fieldType: {
+              enum: ["object"],
+            },
+            objectField: {
+              type: "object",
+              properties: {
+                objectString: {
+                  type: "string",
+                  title: "StringField in Object",
+                },
+              },
+            },
+          },
+        },
+        {
+          properties: {
+            fieldType: {
+              enum: ["array"],
+            },
+            arrayField: {
+              type: "array",
+              items: [{ type: "string", title: "StringField in fixed array" }],
+            },
+          },
+        },
+      ],
+    },
+  },
+};
+```
+
+Using `if-else-then` or `dependencies` depends mostly on the use case. For recursion, a combination of `$ref` and `dependencies`is recommended.
+
+### Schema reference $ref
+
+Schemas can be referenced. A referenced schema can be given to a property using `$ref` keyword. The definition for the referenced schema needs to be inside `definitions` object inside the main schema. The value-string given to $ref-key must always look like this:
+`'#/definitions/{addMatchingKeyHere}'`
+
+```tsx
+const ageFieldDefinition: Schema = {
+  type: "number",
+  title: "Age",
+};
+
+export const refDefSchema: Schema = {
+  title: "References and Definitions",
+  type: "object",
+  properties: {
+    name: {
+      $ref: "#/definitions/name",
+    },
+    age: {
+      $ref: "#/definitions/age",
+    },
+  },
+  definitions: {
+    name: {
+      type: "string",
+      title: "Name",
+    },
+    age: ageFieldDefinition,
+  },
+};
+```
+
 ### Ordering fields
 
 The order of fields can be set using `"ui:order": ["fieldName"]` inside the uiSchema.

package/dist/Form.js

@@ -30,11 +30,12 @@ export const Form = (props) => {
     ]);
     const { isSubmitting } = useFormikContext();
     const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const schemaDefinitions = schema.definitions;
     const registry = {
         fields: Object.assign(Object.assign({}, defaultFields), fields),
         templates: Object.assign(Object.assign({}, defaultTemplates), templates),
         components: Object.assign(Object.assign({}, defaultComponents), components),
-        definitions: {},
+        definitions: schemaDefinitions,
         formContext,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,

package/dist/Form.stories.d.ts

@@ -11,4 +11,5 @@ export declare const StylesCustomized: () => import("react/jsx-runtime").JSX.Ele
 export declare const WithGeneratedSchema: Story;
 export declare const WithRequiredInput: Story;
 export declare const WithConditions: Story;
+export declare const WithRefAndDefinitions: Story;
 export declare const MultipleChoice: Story;

package/dist/Form.stories.js

@@ -25,6 +25,7 @@ import { Formik, useFormikContext } from "formik";
 import { InfoFieldButton, SearchableMultiTagSelectField, } from "./styledComponents";
 import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, conditionsSchema, conditionsUiSchema, } from "./sampleData";
 import { Form, styledComponents } from "./";
+import { refDefSchema, refDefUiSchema } from "./sampleData/refDefSchema";
 import { multipleChoiceSchema, multipleChoiceUiSchema, } from "./sampleData/multipleChoiceSchema";
 const meta = {
     title: "Form",
@@ -185,6 +186,12 @@ export const WithConditions = {
         hideUnmarkedAdditionalProperties: true,
     },
 };
+export const WithRefAndDefinitions = {
+    args: {
+        schema: refDefSchema,
+        uiSchema: refDefUiSchema,
+    },
+};
 export const MultipleChoice = {
     args: {
         schema: multipleChoiceSchema,

package/dist/fields/ArrayField.js

@@ -93,7 +93,8 @@ export const ArrayField = (props) => {
     // );
     // Bacwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
-    return (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
+    const valueArray = Array.isArray(value) ? value : undefined;
+    return (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
                                     ? additionalItems
                                     : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [GetArrayFieldButton({
                                         purpose: ArrayFieldButtonPurpose.REMOVE,

package/dist/fields/MultipleChoiceField.js

@@ -9,7 +9,5 @@ export const MultipleChoiceField = (props) => {
     const { name, uiSchema } = props;
     const { props: inputProps, option } = useExtractUiSchema(uiSchema);
     const enums = useMemo(() => getEnums(props), [props]);
-    console.log("option", option);
-    console.log("uiSchema", uiSchema);
     return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: option === null || option === void 0 ? void 0 : option.style }) })));
 };

package/dist/fields/SchemaField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { getSchemaType } from "../utils";
+import { useContext, useMemo } from "react";
+import { getSchemaType, solveReferences } from "../utils";
 import { useExtractUiSchema } from "../hooks";
 import { FormRegistry } from "../Form";
 import { COMPONENT_TYPES } from "./types";
@@ -23,7 +23,9 @@ const useFieldComponent = (schema, uiSchema, fields) => {
 };
 export const SchemaField = (props) => {
     const { schema, uiSchema } = props;
-    const { fields } = useContext(FormRegistry);
-    const FieldComponent = useFieldComponent(schema, uiSchema, fields);
-    return _jsx(FieldComponent, Object.assign({}, props));
+    const { fields, definitions } = useContext(FormRegistry);
+    const schemaSolvedForReferences = useMemo(() => solveReferences(schema, definitions), [schema, definitions]);
+    const FieldComponent = useFieldComponent(schemaSolvedForReferences, uiSchema, fields);
+    const newProps = Object.assign(Object.assign({}, props), { schema: schemaSolvedForReferences });
+    return _jsx(FieldComponent, Object.assign({}, newProps));
 };

package/dist/fields/stories/AnyField.stories.js

@@ -12,7 +12,7 @@ import { within, userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { AnyField } from "./../AnyField";
 export default {
-    title: "Components/AnyField",
+    title: "Fields/AnyField",
     component: AnyField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { dynamicField: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/ArrayField.stories.js

@@ -12,7 +12,7 @@ import { within, userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { ArrayField } from "./../ArrayField";
 export default {
-    title: "Components/ArrayField",
+    title: "Fields/ArrayField",
     component: ArrayField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { itemsList: [] }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/BooleanField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { BooleanField } from "./../BooleanField";
 export default {
-    title: "Components/BooleanField",
+    title: "Fields/BooleanField",
     component: BooleanField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { acceptTerms: false }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/DateField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { DateField } from "./../DateField";
 export default {
-    title: "Components/DateField",
+    title: "Fields/DateField",
     component: DateField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { birthDate: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/NullField.stories.js

@@ -12,7 +12,7 @@ import { within, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { NullField } from "./../NullField";
 export default {
-    title: "Components/NullField",
+    title: "Fields/NullField",
     component: NullField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { someField: null }, onSubmit: (values) => console.log(values), children: _jsxs(Form, { children: [Story(), _jsx("button", { type: "submit", children: "Submit" })] }) })),

package/dist/fields/stories/NumberField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { NumberField } from "./../NumberField";
 export default {
-    title: "Components/NumberField",
+    title: "Fields/NumberField",
     component: NumberField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { numberInput: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/ObjectField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { ObjectField } from "./../ObjectField";
 export default {
-    title: "Components/ObjectField",
+    title: "Fields/ObjectField",
     component: ObjectField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/RadioField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { RadioField } from "./../RadioField";
 import { Formik, Form } from "formik";
 export default {
-    title: "Components/RadioField",
+    title: "Fields/RadioField",
     component: RadioField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/SchemaField.stories.d.ts

@@ -1671,3 +1671,46 @@ export declare const NumberField: {
     tags?: string[] | undefined;
     story?: Omit<import("@storybook/types").StoryAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps, Partial<import("../../types").FieldProps>>, "story"> | undefined;
 };
+export declare const ReferenceAndInitialValues: {
+    args: {
+        schema: {
+            title: string;
+            type: string;
+            required: string[];
+            properties: {
+                name: {
+                    $ref: string;
+                };
+                age: {
+                    type: string;
+                    title: string;
+                };
+                creditCard: {
+                    type: string;
+                };
+            };
+            dependencies: {
+                creditCard: {
+                    properties: {
+                        billing_address: {
+                            $ref: string;
+                        };
+                    };
+                    required: string[];
+                };
+            };
+            definitions: {
+                name: {
+                    type: string;
+                    title: string;
+                };
+                address: {
+                    type: string;
+                };
+            };
+        };
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};

package/dist/fields/stories/SchemaField.stories.js

@@ -11,11 +11,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { userEvent, expect } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { SchemaField } from "./../SchemaField";
+const initialValues = {
+    name: "Test name",
+    age: "50",
+    creditCard: "test card",
+    billing_address: "Street 1",
+};
 export default {
     title: "Fields/SchemaField",
     component: SchemaField,
     decorators: [
-        (Story) => (_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+        (Story) => (_jsx(Formik, { initialValues: initialValues, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
     ],
 };
 const Template = {
@@ -37,3 +43,43 @@ export const NumberField = Object.assign(Object.assign({}, Template), { args: Ob
         yield userEvent.type(input, "123");
         expect(input).toHaveValue(123);
     }) });
+export const ReferenceAndInitialValues = {
+    args: {
+        schema: {
+            title: "References and Definitions",
+            type: "object",
+            required: ["string", "number", "boolean", "enum"],
+            properties: {
+                name: { $ref: "#/definitions/name" },
+                age: { type: "number", title: "Age" },
+                creditCard: {
+                    type: "string",
+                },
+            },
+            dependencies: {
+                creditCard: {
+                    properties: {
+                        billing_address: {
+                            $ref: "#/definitions/address",
+                        },
+                    },
+                    required: ["billing_address"],
+                },
+            },
+            definitions: {
+                name: { type: "string", title: "Name" },
+                address: { type: "string" },
+            },
+        },
+    },
+    play: (_c) => __awaiter(void 0, [_c], void 0, function* ({ canvasElement }) {
+        const nameField = canvasElement.querySelector('input[name="name"]');
+        const ageField = canvasElement.querySelector('input[name="age"]');
+        const creditCardField = canvasElement.querySelector('input[name="creditCard"]');
+        const addressField = canvasElement.querySelector('input[name="billing_address"]');
+        expect(nameField).toHaveValue(initialValues.name);
+        expect(ageField).toHaveValue(parseInt(initialValues.age));
+        expect(creditCardField).toHaveValue(initialValues.creditCard);
+        expect(addressField).toHaveValue(initialValues.billing_address);
+    }),
+};

package/dist/fields/stories/SearchMultiTagSelectField.stories.js

@@ -12,7 +12,7 @@ import { within, userEvent, expect } from "@storybook/test";
 import { SearchMultiTagSelectField } from "./../SearchMultiTagSelectField";
 import { Formik, Form } from "formik";
 export default {
-    title: "Components/SearchMultiTagSelectField",
+    title: "Fields/SearchMultiTagSelectField",
     component: SearchMultiTagSelectField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { tags: [] }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/StringField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { StringField } from "./../StringField";
 import { Formik, Form } from "formik";
 export default {
-    title: "Components/StringField",
+    title: "Fields/StringField",
     component: StringField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { name: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),

package/dist/fields/stories/ToggleField.stories.js

@@ -12,7 +12,7 @@ import { userEvent, expect } from "@storybook/test";
 import { ToggleField } from "../ToggleField";
 import { Formik, Form } from "formik";
 export default {
-    title: "Components/ToggleField",
+    title: "Fields/ToggleField",
     component: ToggleField,
     decorators: [
         (Story) => (_jsx(Formik, { initialValues: { toggle: false }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),

package/dist/formEditorSchemas.js

@@ -1,35 +1,191 @@
+const fieldObject = {
+    type: {
+        type: "string",
+        title: "Field type",
+        oneOf: [
+            { const: "string", title: "String" },
+            { const: "number", title: "Number" },
+            { const: "array", title: "Array" },
+            { const: "object", title: "Object" },
+            { const: "boolean", title: "Boolean" },
+            { const: "null", title: "Null" },
+            { const: "any", title: "Any" },
+        ],
+    },
+    title: {
+        type: "string",
+        title: "Field title",
+    },
+    key: { type: "string", title: "Object Key" },
+};
 const field = {
     type: "object",
-    properties: {
-        type: {
-            type: "string",
-            title: "Field type",
-            oneOf: [
-                { const: "string", title: "String" },
-                { const: "number", title: "Number" },
-                { const: "array", title: "Array" },
-                { const: "object", title: "Object" },
-            ],
+    properties: fieldObject,
+    allOf: [
+        {
+            if: {
+                properties: {
+                    type: {
+                        const: "array",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    hasFixedFields: {
+                        type: "string",
+                        title: "Fixed fields?",
+                        oneOf: [
+                            { const: "true", title: "Yes" },
+                            { const: "false", title: "No" },
+                        ],
+                    },
+                    additionalItemsSchema: {
+                        type: "array",
+                        items: { type: "object", properties: fieldObject },
+                        additionalItems: { type: "object", properties: fieldObject },
+                    },
+                },
+            },
         },
-        title: {
-            type: "string",
-            title: "Field title",
+        {
+            if: {
+                properties: {
+                    type: {
+                        const: "object",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    hasAdditionalProperties: {
+                        type: "string",
+                        title: "Additional fields?",
+                        oneOf: [
+                            { const: "true", title: "Yes" },
+                            { const: "false", title: "No" },
+                        ],
+                    },
+                    objectField: {
+                        type: "array",
+                        items: { type: "object", properties: fieldObject },
+                        additionalItems: { type: "object", properties: fieldObject },
+                    },
+                },
+            },
         },
-    },
+        {
+            if: {
+                properties: {
+                    hasAdditionalProperties: {
+                        const: "true",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    additionalItemsSchema: {
+                        type: "array",
+                        items: { type: "object", properties: fieldObject },
+                        additionalItems: { type: "object", properties: fieldObject },
+                    },
+                },
+            },
+        },
+        {
+            if: {
+                properties: {
+                    hasFixedFields: {
+                        const: "true",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    fixedArrayField: {
+                        type: "array",
+                        items: { type: "object", properties: fieldObject },
+                        additionalItems: { type: "object", properties: fieldObject },
+                    },
+                },
+            },
+        },
+    ],
 };
 export const schema = {
+    // type: "object",
+    // properties: {
+    //   "schema.type": {
+    //     type: "string",
+    //     default: "object",
+    //   },
+    //   "schema.title": {
+    //     type: "string",
+    //     title: "Form title",
+    //   },
+    //   "schema.properties": { type: "array", additionalItems: field },
+    // },
+    //$ref needs to get implemented correctly, so that this would work. Works in the playground, though
     type: "object",
     properties: {
-        "schema.type": {
-            type: "string",
-            default: "object",
+        tree: {
+            $ref: "#/definitions/tree",
         },
-        "schema.title": {
-            type: "string",
-            title: "Form title",
+    },
+    definitions: {
+        tree: {
+            type: "object",
+            properties: {
+                fieldType: {
+                    type: "string",
+                    enum: ["string", "object", "array"],
+                    default: "string",
+                },
+            },
+            dependencies: {
+                fieldType: {
+                    oneOf: [
+                        {
+                            properties: {
+                                fieldType: {
+                                    enum: ["string"],
+                                },
+                                field: {
+                                    type: "string",
+                                },
+                            },
+                        },
+                        {
+                            properties: {
+                                fieldType: {
+                                    enum: ["object"],
+                                },
+                                field: {
+                                    $ref: "#/definitions/tree",
+                                },
+                            },
+                        },
+                        {
+                            properties: {
+                                fieldType: {
+                                    enum: ["array"],
+                                },
+                                field: {
+                                    type: "array",
+                                    items: {
+                                        $ref: "#/definitions/tree",
+                                    },
+                                    additionalItems: {
+                                        $ref: "#/definitions/tree",
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                },
+            },
         },
     },
-    additionalProperties: field,
 };
 export const uiSchema = {
     "schema.type": { props: { type: "hidden" } },

package/dist/sampleData/ageFieldDefinition.d.ts

@@ -0,0 +1,2 @@
+import type { Schema } from "../types";
+export declare const ageFieldDefinition: Schema;

package/dist/sampleData/ageFieldDefinition.js

@@ -0,0 +1,5 @@
+export const ageFieldDefinition = {
+    type: "number",
+    title: "Age",
+    description: "The schema for this field got imported from a separate file",
+};