@nolwenture/formik-jsonschema-form 0.26.2 → 0.26.4

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const formik_1 = require("formik");
+const ObjectField_1 = require("./../ObjectField");
+exports.default = {
+    title: "Fields/ObjectField",
+    component: ObjectField_1.ObjectField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {}, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "object",
+        schema: {
+            type: "object",
+            title: "Object field test",
+            properties: {
+                string: {
+                    type: "string",
+                    title: "stringField",
+                    description: "String description",
+                },
+                number: {
+                    type: "number",
+                    title: "numberField",
+                    description: "Number description",
+                },
+                boolean: {
+                    type: "boolean",
+                    title: "booleanField",
+                    description: "Boolean description",
+                    default: false,
+                },
+                enum: {
+                    type: "array",
+                    title: "Array Enum",
+                    description: "Array Enum description",
+                    items: {
+                        type: "number",
+                        enum: [1, 2, 3, 4],
+                    },
+                },
+                null: {
+                    type: "null",
+                    title: "nullField",
+                    description: "Null description",
+                },
+                collapsibleObject: {
+                    type: "object",
+                    title: "nestedCollapsibleObject",
+                    properties: {
+                        insideCollapsibleObject: { type: "string" },
+                        alsoInsideCollapsibleObject: { type: "number" },
+                    },
+                },
+            },
+        },
+        uiSchema: { collapsibleObject: { props: { isCollapsible: true } } },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const stringField = canvasElement.querySelector('input[name="object.string"]');
+        const numberField = canvasElement.querySelector('input[name="object.number"]');
+        const booleanField = canvasElement.querySelector('input[name="object.boolean"]');
+        const enumField = canvasElement.querySelector('select[name="object.enum[0]"]');
+        const collapsibleObjectButton = canvas.getByLabelText("object.collapsibleObject");
+        (0, test_1.expect)(collapsibleObjectButton).toBeInTheDocument();
+        await test_1.userEvent.type(stringField, "string");
+        await test_1.userEvent.type(numberField, "123");
+        await test_1.userEvent.click(booleanField);
+        await test_1.userEvent.selectOptions(enumField, "2");
+        await test_1.userEvent.click(collapsibleObjectButton);
+        const stringFieldInCollapsibleObject = (await (0, test_1.waitFor)(() => canvasElement.querySelector('input[name="object.collapsibleObject.insideCollapsibleObject"]')));
+        const numberFieldInCollapsibleObject = (await (0, test_1.waitFor)(() => canvasElement.querySelector('input[name="object.collapsibleObject.alsoInsideCollapsibleObject"]')));
+        await test_1.userEvent.type(stringFieldInCollapsibleObject, "string in collapsible object");
+        await test_1.userEvent.type(numberFieldInCollapsibleObject, "313");
+        (0, test_1.expect)(stringField).toHaveValue("string");
+        (0, test_1.expect)(numberField).toHaveValue(123);
+        (0, test_1.expect)(booleanField).toBeChecked();
+        (0, test_1.expect)(enumField).toHaveValue("2");
+        (0, test_1.expect)(stringFieldInCollapsibleObject).toHaveValue("string in collapsible object");
+        (0, test_1.expect)(numberFieldInCollapsibleObject).toHaveValue(313);
+    },
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const RadioField_1 = require("./../RadioField");
+const formik_1 = require("formik");
+exports.default = {
+    title: "Fields/RadioField",
+    component: RadioField_1.RadioField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {}, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "RadioField",
+        title: "Radio field test",
+        schema: {
+            type: "boolean",
+        },
+        uiSchema: {
+            "ui:label": { true: "yes", false: "no" },
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const radioTrue = canvasElement.querySelector('input[type="radio"][name="RadioField"][value="true"]');
+        const radioFalse = canvasElement.querySelector('input[type="radio"][name="RadioField"][value="false"]');
+        await test_1.userEvent.click(radioTrue);
+        await (0, test_1.expect)(radioTrue).toBeChecked();
+        await (0, test_1.expect)(radioFalse).not.toBeChecked();
+        await test_1.userEvent.click(radioFalse);
+        await (0, test_1.expect)(radioFalse).toBeChecked();
+        await (0, test_1.expect)(radioTrue).not.toBeChecked();
+    },
+};

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReferenceAndInitialValues = exports.NumberField = exports.StringField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const formik_1 = require("formik");
+const SchemaField_1 = require("./../SchemaField");
+const initialValues = {
+    name: "Test name",
+    age: "50",
+    creditCard: "test card",
+    billing_address: "Street 1",
+};
+exports.default = {
+    title: "Fields/SchemaField",
+    component: SchemaField_1.SchemaField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: initialValues, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+const Template = {
+    args: {
+        name: "myField",
+        schema: {
+            type: "string",
+        },
+        uiSchema: {},
+    },
+};
+exports.StringField = {
+    ...Template,
+    args: {
+        ...Template.args,
+        schema: { type: "string", title: "My String Field" },
+        uiSchema: { "ui:help": "Enter a string" },
+    },
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('input[name="myField"]');
+        await test_1.userEvent.type(input, "Hello World");
+        (0, test_1.expect)(input).toHaveValue("Hello World");
+    },
+};
+exports.NumberField = {
+    ...Template,
+    args: {
+        ...Template.args,
+        schema: { type: "number", title: "My Number Field" },
+        uiSchema: { "ui:help": "Enter a number" },
+    },
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('input[name="myField"]');
+        await test_1.userEvent.type(input, "123");
+        (0, test_1.expect)(input).toHaveValue(123);
+    },
+};
+exports.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: async ({ 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"]');
+        (0, test_1.expect)(nameField).toHaveValue(initialValues.name);
+        (0, test_1.expect)(ageField).toHaveValue(parseInt(initialValues.age));
+        (0, test_1.expect)(creditCardField).toHaveValue(initialValues.creditCard);
+        (0, test_1.expect)(addressField).toHaveValue(initialValues.billing_address);
+    },
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const SearchMultiTagSelectField_1 = require("./../SearchMultiTagSelectField");
+const formik_1 = require("formik");
+exports.default = {
+    title: "Fields/SearchMultiTagSelectField",
+    component: SearchMultiTagSelectField_1.SearchMultiTagSelectField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { tags: [] }, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "tags",
+        schema: {
+            type: "array",
+            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: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const input = canvas.getByPlaceholderText("Search tags...");
+        await test_1.userEvent.type(input, "First tag");
+        const option = await canvas.findByText("First tag");
+        await test_1.userEvent.click(option);
+        await test_1.userEvent.type(input, "Third tag");
+        const option2 = await canvas.findByText("Third tag");
+        await test_1.userEvent.click(option2);
+        const firstTag = canvas.queryByText("First tag");
+        const secondTag = canvas.queryByText("Second tag");
+        const thirdTag = canvas.queryByText("Third tag");
+        (0, test_1.expect)(firstTag).toBeInTheDocument();
+        (0, test_1.expect)(secondTag).not.toBeInTheDocument();
+        (0, test_1.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/cjs/fields/stories/StringField.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = exports.SelectInput = exports.TextInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const StringField_1 = require("./../StringField");
+const formik_1 = require("formik");
+exports.default = {
+    title: "Fields/StringField",
+    component: StringField_1.StringField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { name: "" }, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+// Story for a regular text input
+exports.TextInput = {
+    args: {
+        name: "name",
+        schema: { type: "string" },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('input[name="name"]');
+        await test_1.userEvent.type(input, "John Doe");
+        await (0, test_1.expect)(input).toHaveValue("John Doe");
+    },
+};
+exports.SelectInput = {
+    args: {
+        name: "select",
+        schema: {
+            type: "string",
+            oneOf: [
+                { const: "1", title: "Option 1" },
+                { const: "2", title: "Option 2" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const select = canvasElement.querySelector('select[name="select"]');
+        await test_1.userEvent.selectOptions(select, "1");
+        await (0, test_1.expect)(select).toHaveValue("1");
+        await (0, test_1.expect)(select).toHaveDisplayValue("Option 1");
+        await test_1.userEvent.selectOptions(select, "2");
+        await (0, test_1.expect)(select).toHaveValue("2");
+        await (0, test_1.expect)(select).toHaveDisplayValue("Option 2");
+    },
+};
+exports.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: async ({ canvasElement }) => {
+        const multiSelect = canvasElement.querySelector('select[name="multiSelect"]');
+        await test_1.userEvent.selectOptions(multiSelect, ["1", "3"]);
+        await (0, test_1.expect)(multiSelect).toHaveValue(["1", "3"]);
+        await (0, test_1.expect)(multiSelect).not.toHaveValue(["2"]);
+    },
+};

package/dist/cjs/fields/stories/TextAreaField.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextAreaInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const TextAreaField_1 = require("../TextAreaField");
+const formik_1 = require("formik");
+exports.default = {
+    title: "Fields/StringField",
+    component: TextAreaField_1.TextAreaField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { name: "" }, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+// Story for a regular text input
+exports.TextAreaInput = {
+    args: {
+        name: "TextAreaField",
+        schema: { type: "string" },
+        uiSchema: { "ui:field": "TextAreaField" },
+    },
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('textarea[name="TextAreaField"]');
+        (0, test_1.expect)(input).toBeInTheDocument();
+        await test_1.userEvent.type(input, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu felis bibendum ut tristique et egestas quis. Urna duis convallis convallis tellus id interdum velit laoreet. Nisl condimentum id venenatis a condimentum vitae sapien. Massa sed elementum tempus egestas sed sed risus pretium. Nec feugiat nisl pretium fusce id velit. Vitae aliquet nec ullamcorper sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Tellus mauris a diam maecenas. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id diam vel quam elementum pulvinar etiam. Urna id volutpat lacus laoreet non curabitur gravida. Faucibus purus in massa tempor nec feugiat nisl pretium. In hac habitasse platea dictumst vestibulum. Dui accumsan sit amet nulla. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.");
+        await (0, test_1.expect)(input).toHaveValue("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu felis bibendum ut tristique et egestas quis. Urna duis convallis convallis tellus id interdum velit laoreet. Nisl condimentum id venenatis a condimentum vitae sapien. Massa sed elementum tempus egestas sed sed risus pretium. Nec feugiat nisl pretium fusce id velit. Vitae aliquet nec ullamcorper sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Tellus mauris a diam maecenas. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id diam vel quam elementum pulvinar etiam. Urna id volutpat lacus laoreet non curabitur gravida. Faucibus purus in massa tempor nec feugiat nisl pretium. In hac habitasse platea dictumst vestibulum. Dui accumsan sit amet nulla. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.");
+    },
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const ToggleField_1 = require("../ToggleField");
+const formik_1 = require("formik");
+exports.default = {
+    title: "Fields/ToggleField",
+    component: ToggleField_1.ToggleField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { toggle: false }, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "toggle",
+        schema: { type: "boolean", default: false },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const toggleSwitch = canvasElement.querySelector('input[type="checkbox"][name="toggle"]');
+        await test_1.userEvent.click(toggleSwitch);
+        await (0, test_1.expect)(toggleSwitch).toBeChecked();
+        await test_1.userEvent.click(toggleSwitch);
+        await (0, test_1.expect)(toggleSwitch).not.toBeChecked();
+    },
+};

package/dist/cjs/fields/types.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMPONENT_TYPES = void 0;
+exports.COMPONENT_TYPES = {
+    array: "ArrayField",
+    boolean: "BooleanField",
+    integer: "NumberField",
+    number: "NumberField",
+    object: "ObjectField",
+    string: "StringField",
+    null: "NullField",
+    any: "AnyField",
+};

package/dist/cjs/formEditorSchemas.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uiSchema = exports.schema = void 0;
+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: 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 },
+                    },
+                },
+            },
+        },
+        {
+            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 },
+                    },
+                },
+            },
+        },
+    ],
+};
+exports.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: {
+        tree: {
+            $ref: "#/definitions/tree",
+        },
+    },
+    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",
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    },
+};
+exports.uiSchema = {
+    "schema.type": { props: { type: "hidden" } },
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const useExtractUiSchema_1 = require("../useExtractUiSchema"); // Adjust the import path as needed
+describe("useExtractUiSchema", () => {
+    it("should return an empty object when provided with an empty object", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, useExtractUiSchema_1.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 } = (0, react_1.renderHook)(() => (0, useExtractUiSchema_1.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 } = (0, react_1.renderHook)(() => (0, useExtractUiSchema_1.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 } = (0, react_1.renderHook)(() => (0, useExtractUiSchema_1.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 } = (0, react_1.renderHook)(() => (0, useExtractUiSchema_1.useExtractUiSchema)(frozen));
+        expect(result.current.props).toEqual({ not: { freezed: true } });
+        const uiSchema2 = { props: { is: { extendable: true } } };
+        const notExtendable = Object.preventExtensions(uiSchema2);
+        const { result: result2 } = (0, react_1.renderHook)(() => (0, useExtractUiSchema_1.useExtractUiSchema)(notExtendable));
+        expect(result2.current.props).toEqual({ is: { extendable: true } });
+    });
+});