@nolwenture/formik-jsonschema-form 0.7.1 → 0.9.0

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

@@ -0,0 +1,85 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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: initialValues, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+const Template = {
+    args: {
+        name: "myField",
+        schema: {
+            type: "string",
+        },
+        uiSchema: {},
+    },
+};
+export const StringField = Object.assign(Object.assign({}, Template), { args: Object.assign(Object.assign({}, Template.args), { schema: { type: "string", title: "My String Field" }, uiSchema: { "ui:help": "Enter a string" } }), play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('input[name="myField"]');
+        yield userEvent.type(input, "Hello World");
+        expect(input).toHaveValue("Hello World");
+    }) });
+export const NumberField = Object.assign(Object.assign({}, Template), { args: Object.assign(Object.assign({}, Template.args), { schema: { type: "number", title: "My Number Field" }, uiSchema: { "ui:help": "Enter a number" } }), play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('input[name="myField"]');
+        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.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { SearchMultiTagSelectField } from "./../SearchMultiTagSelectField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof SearchMultiTagSelectField>;

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

@@ -0,0 +1,58 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { within, userEvent, expect } from "@storybook/test";
+import { SearchMultiTagSelectField } from "./../SearchMultiTagSelectField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Fields/SearchMultiTagSelectField",
+    component: SearchMultiTagSelectField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { tags: [] }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "tags",
+        schema: {
+            type: "string",
+            title: "Enum searchable tag select anyOf",
+            anyOf: [
+                { const: "1", title: "First tag" },
+                { const: "2", title: "Second tag" },
+                { const: "3", title: "Third tag" },
+            ],
+        },
+        uiSchema: {
+            "ui:placeholder": "Search tags...",
+            "ui:emptySearchMessage": "No tags found",
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const input = canvas.getByPlaceholderText("Search tags...");
+        yield userEvent.type(input, "First tag");
+        const option = yield canvas.findByText("First tag");
+        yield userEvent.click(option);
+        yield userEvent.type(input, "Third tag");
+        const option2 = yield canvas.findByText("Third tag");
+        yield userEvent.click(option2);
+        const firstTag = canvas.queryByText("First tag");
+        const secondTag = canvas.queryByText("Second tag");
+        const thirdTag = canvas.queryByText("Third tag");
+        expect(firstTag).toBeInTheDocument();
+        expect(secondTag).not.toBeInTheDocument();
+        expect(thirdTag).toBeInTheDocument();
+        // await userEvent.click(firstTag.nextElementSibling as Element);
+        // await userEvent.click(thirdTag.nextSibling as Element);
+        // expect(firstTag).not.toBeInTheDocument();
+        // expect(thirdTag).not.toBeInTheDocument();
+    }),
+};

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

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { StringField } from "./../StringField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const TextInput: StoryObj<typeof StringField>;
+export declare const SelectInput: StoryObj<typeof StringField>;
+export declare const MultiSelect: StoryObj<typeof StringField>;

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

@@ -0,0 +1,75 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { StringField } from "./../StringField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Fields/StringField",
+    component: StringField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { name: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+// Story for a regular text input
+export const TextInput = {
+    args: {
+        name: "name",
+        schema: { type: "string" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('input[name="name"]');
+        yield userEvent.type(input, "John Doe");
+        yield expect(input).toHaveValue("John Doe");
+    }),
+};
+export const SelectInput = {
+    args: {
+        name: "select",
+        schema: {
+            type: "string",
+            oneOf: [
+                { const: "1", title: "Option 1" },
+                { const: "2", title: "Option 2" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const select = canvasElement.querySelector('select[name="select"]');
+        yield userEvent.selectOptions(select, "1");
+        yield expect(select).toHaveValue("1");
+        yield expect(select).toHaveDisplayValue("Option 1");
+        yield userEvent.selectOptions(select, "2");
+        yield expect(select).toHaveValue("2");
+        yield expect(select).toHaveDisplayValue("Option 2");
+    }),
+};
+export const MultiSelect = {
+    args: {
+        name: "multiSelect",
+        schema: {
+            type: "array",
+            anyOf: [
+                { const: "1", title: "Option 1" },
+                { const: "2", title: "Option 2" },
+                { const: "3", title: "Option 3" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: (_c) => __awaiter(void 0, [_c], void 0, function* ({ canvasElement }) {
+        const multiSelect = canvasElement.querySelector('select[name="multiSelect"]');
+        yield userEvent.selectOptions(multiSelect, ["1", "3"]);
+        yield expect(multiSelect).toHaveValue(["1", "3"]);
+        yield expect(multiSelect).not.toHaveValue(["2"]);
+    }),
+};

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

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { ToggleField } from "../ToggleField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof ToggleField>;

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

@@ -0,0 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { ToggleField } from "../ToggleField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Fields/ToggleField",
+    component: ToggleField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { toggle: false }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "toggle",
+        schema: { type: "boolean", default: false },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const toggleSwitch = canvasElement.querySelector('input[type="checkbox"][name="toggle"]');
+        yield userEvent.click(toggleSwitch);
+        yield expect(toggleSwitch).toBeChecked();
+        yield userEvent.click(toggleSwitch);
+        yield expect(toggleSwitch).not.toBeChecked();
+    }),
+};

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/hooks/__tests__/useExtractUiSchema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/useExtractUiSchema.test.js

@@ -0,0 +1,45 @@
+import { renderHook } from "@testing-library/react";
+import { useExtractUiSchema } from "../useExtractUiSchema"; // Adjust the import path as needed
+describe("useExtractUiSchema", () => {
+    it("should return an empty object when provided with an empty object", () => {
+        const { result } = renderHook(() => useExtractUiSchema({}));
+        expect(result.current).toEqual({});
+    });
+    it("should correctly extract ui:field and ui:props", () => {
+        const uiSchema = {
+            "ui:field": "TextField",
+            "ui:props": { className: "test-class" },
+        };
+        const { result } = renderHook(() => useExtractUiSchema(uiSchema));
+        expect(result.current.field).toBe("TextField");
+        expect(result.current.props).toEqual({ className: "test-class" });
+    });
+    it("should handle ui:options and merge them into the result", () => {
+        const uiSchema = {
+            "ui:options": {
+                anotherProp: "value",
+            },
+        };
+        const { result } = renderHook(() => useExtractUiSchema(uiSchema));
+        expect(result.current.anotherProp).toBe("value");
+    });
+    it("should remove 'ui:' prefix from keys", () => {
+        const uiSchema = {
+            "ui:title": "Test Title",
+            "ui:description": "Test Description",
+        };
+        const { result } = renderHook(() => useExtractUiSchema(uiSchema));
+        expect(result.current.title).toBe("Test Title");
+        expect(result.current.description).toBe("Test Description");
+    });
+    it("does not crash if schema is frozen by React", () => {
+        const uiSchema = { props: { not: { freezed: true } } };
+        const frozen = Object.freeze(uiSchema);
+        const { result } = renderHook(() => useExtractUiSchema(frozen));
+        expect(result.current.props).toEqual({ not: { freezed: true } });
+        const uiSchema2 = { props: { is: { extendable: true } } };
+        const notExtendable = Object.preventExtensions(uiSchema2);
+        const { result: result2 } = renderHook(() => useExtractUiSchema(notExtendable));
+        expect(result2.current.props).toEqual({ is: { extendable: true } });
+    });
+});

package/dist/hooks/__tests__/useSetDefault.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/useSetDefault.test.js

@@ -0,0 +1,65 @@
+import { renderHook } from "@testing-library/react";
+import { useField } from "formik";
+import { useSetDefault } from "../useSetDefault";
+import { getDefaultValueForType } from "../../utils/getTypes";
+jest.mock("formik", () => ({
+    useField: jest.fn(),
+}));
+jest.mock("../../utils/getTypes", () => ({
+    getDefaultValueForType: jest.fn(),
+}));
+describe("useSetDefault", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test("sets default value from schema if present", () => {
+        const mockSetValue = jest.fn();
+        useField.mockReturnValue([
+            { value: "" },
+            {},
+            { setValue: mockSetValue },
+        ]);
+        const fieldProps = {
+            name: "testField",
+            schema: { default: "defaultValue" },
+            uiSchema: {},
+            forceDefaultValue: false,
+        };
+        renderHook(() => useSetDefault(fieldProps));
+        expect(mockSetValue).toHaveBeenCalledWith("defaultValue");
+    });
+    test("sets default value using getDefaultValueForType if forceDefaultValue is true and no default is provided in schema", () => {
+        const mockSetValue = jest.fn();
+        useField.mockReturnValue([
+            { value: "" },
+            {},
+            { setValue: mockSetValue },
+        ]);
+        getDefaultValueForType.mockReturnValue("generatedDefaultValue");
+        const fieldProps = {
+            name: "testField",
+            schema: { type: [] },
+            uiSchema: {},
+            forceDefaultValue: true,
+        };
+        renderHook(() => useSetDefault(fieldProps));
+        expect(mockSetValue).toHaveBeenCalledWith("generatedDefaultValue");
+        expect(getDefaultValueForType).toHaveBeenCalledWith([]);
+    });
+    test("does not set default value if value is already set", () => {
+        const mockSetValue = jest.fn();
+        useField.mockReturnValue([
+            { value: "existingValue" },
+            {},
+            { setValue: mockSetValue },
+        ]);
+        const fieldProps = {
+            name: "testField",
+            schema: { default: "defaultValue" },
+            uiSchema: {},
+            forceDefaultValue: true,
+        };
+        renderHook(() => useSetDefault(fieldProps));
+        expect(mockSetValue).not.toHaveBeenCalled();
+    });
+});

package/dist/hooks/useExtractUiSchema.js

@@ -12,11 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useMemo } from "react";
 export const useExtractUiSchema = (props = {}) => {
     var _a, _b;
-    if (props.props !== undefined) {
-        props["ui:props"] = Object.assign(Object.assign({}, ((_a = props["ui:props"]) !== null && _a !== void 0 ? _a : {})), ((_b = props.props) !== null && _b !== void 0 ? _b : {}));
+    // props is frozen by React, so it needs to be copied
+    const schema = Object.assign({}, props);
+    if (schema.props !== undefined) {
+        schema["ui:props"] = Object.assign(Object.assign({}, ((_a = schema["ui:props"]) !== null && _a !== void 0 ? _a : {})), ((_b = schema.props) !== null && _b !== void 0 ? _b : {}));
     }
     return useMemo(() => {
-        const { "ui:options": options = {} } = props, uiSchema = __rest(props, ["ui:options"]);
+        const { "ui:options": options = {} } = schema, uiSchema = __rest(schema, ["ui:options"]);
         return Object.assign(Object.assign({}, Object.keys(uiSchema || {}).reduce((result, key) => (Object.assign(Object.assign({}, result), { [key.replace("ui:", "")]: uiSchema[key] })), {})), options);
+        // Input props needs to be relied, not schema. Otherwise, it will be recomputed on every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props]);
 };

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",
+};

package/dist/sampleData/multipleChoiceSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const multipleChoiceSchema: Schema;
+export declare const multipleChoiceUiSchema: UiSchema;