@nolwenture/formik-jsonschema-form 0.26.3 → 0.26.4

package/dist/cjs/fields/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ArrayField"), exports);
+__exportStar(require("./BooleanField"), exports);
+__exportStar(require("./DateField"), exports);
+__exportStar(require("./NullField"), exports);
+__exportStar(require("./NumberField"), exports);
+__exportStar(require("./ObjectField"), exports);
+__exportStar(require("./SchemaField"), exports);
+__exportStar(require("./StringField"), exports);
+__exportStar(require("./AnyField"), exports);
+__exportStar(require("./RadioField"), exports);
+__exportStar(require("./ToggleField"), exports);
+__exportStar(require("./SearchMultiTagSelectField"), exports);
+__exportStar(require("./SearchableSelectField"), exports);
+__exportStar(require("./MultipleChoiceField"), exports);
+__exportStar(require("./TextAreaField"), exports);
+__exportStar(require("./FileUploadField"), exports);

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

@@ -0,0 +1,73 @@
+"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 AnyField_1 = require("./../AnyField");
+exports.default = {
+    title: "Fields/AnyField",
+    component: AnyField_1.AnyField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { dynamicField: "" }, onSubmit: (values) => console.log(values), children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "dynamicField",
+        schema: {},
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const select = canvasElement.querySelector("select");
+        // Null
+        await test_1.userEvent.selectOptions(select, "null");
+        const allInputs = canvasElement.querySelectorAll("input");
+        (0, test_1.expect)(allInputs).toHaveLength(0);
+        // AnyField
+        await test_1.userEvent.selectOptions(select, "any");
+        const anySelect = canvasElement.querySelectorAll("select");
+        const input = canvasElement.querySelector('input[name="dynamicField"]');
+        await test_1.userEvent.type(input, "testString");
+        (0, test_1.expect)(input).toHaveValue("testString");
+        await test_1.userEvent.selectOptions(anySelect[1], "boolean");
+        await test_1.userEvent.click(input);
+        (0, test_1.expect)(input).toBeChecked;
+        // StringField
+        await test_1.userEvent.selectOptions(select, "string");
+        await test_1.userEvent.type(input, "testString");
+        (0, test_1.expect)(input).toHaveValue("testString");
+        // IntegerField
+        await test_1.userEvent.selectOptions(select, "integer");
+        const integerInput = canvasElement.querySelector('input[name="dynamicField"]');
+        await test_1.userEvent.type(integerInput, "321");
+        (0, test_1.expect)(integerInput).toHaveValue(321);
+        // NumberField
+        await test_1.userEvent.selectOptions(select, "number");
+        const numberInput = canvasElement.querySelector('input[name="dynamicField"]');
+        await test_1.userEvent.clear(numberInput);
+        await test_1.userEvent.type(numberInput, "123");
+        (0, test_1.expect)(numberInput).toHaveValue(123);
+        // BooleanField
+        await test_1.userEvent.selectOptions(select, "boolean");
+        const checkBox = canvasElement.querySelector('input[name="dynamicField"]');
+        await test_1.userEvent.click(checkBox);
+        (0, test_1.expect)(checkBox).toBeChecked();
+        // ObjectField
+        //  TODO Find out how to handle modal
+        // ArrayField
+        await test_1.userEvent.selectOptions(select, "array");
+        const addButton = canvas.getByText("+");
+        await test_1.userEvent.click(addButton);
+        await test_1.userEvent.click(addButton);
+        const downArrow = canvas.queryAllByText("↓");
+        const inputFirst = canvasElement.querySelector('input[name="dynamicField[0]"]');
+        const inputSecond = canvasElement.querySelector('input[name="dynamicField[1]"]');
+        await test_1.userEvent.type(inputFirst, "first");
+        await test_1.userEvent.type(inputSecond, "second");
+        await test_1.userEvent.click(downArrow[0]);
+        (0, test_1.expect)(inputFirst).toHaveValue("second");
+        (0, test_1.expect)(inputSecond).toHaveValue("first");
+    },
+};

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

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnyOfArray = exports.ObjectArray = exports.EnumArray = exports.BasicArray = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const formik_1 = require("formik");
+const ArrayField_1 = require("./../ArrayField");
+exports.default = {
+    title: "Fields/ArrayField",
+    component: ArrayField_1.ArrayField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { itemsList: [] }, onSubmit: (values) => console.log(values), children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.BasicArray = {
+    args: {
+        name: "itemsList",
+        schema: {
+            type: "array",
+            title: "Array",
+            description: "Array description",
+            additionalItems: { type: "boolean" },
+        },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        // Add three items
+        const addButton = canvas.getByText("+");
+        await test_1.userEvent.click(addButton);
+        await test_1.userEvent.click(addButton);
+        await test_1.userEvent.click(addButton);
+        const allDownArrows = canvas.queryAllByText("↓");
+        const allUpArrows = canvas.queryAllByText("↑");
+        const firstCheckbox = canvasElement.querySelector('input[name="itemsList[0]"]');
+        const secondCheckbox = canvasElement.querySelector('input[name="itemsList[1]"]');
+        const thirdCheckbox = canvasElement.querySelector('input[name="itemsList[2]"]');
+        const allLabelsAfterAdd = canvasElement.querySelectorAll('[name^="itemsList["]');
+        (0, test_1.expect)(allLabelsAfterAdd.length).toEqual(3);
+        // Check that moving items work
+        await test_1.userEvent.click(firstCheckbox);
+        (0, test_1.expect)(firstCheckbox).toBeChecked();
+        (0, test_1.expect)(secondCheckbox).not.toBeChecked();
+        (0, test_1.expect)(thirdCheckbox).not.toBeChecked();
+        await test_1.userEvent.click(allDownArrows[0]);
+        (0, test_1.expect)(firstCheckbox).not.toBeChecked();
+        (0, test_1.expect)(secondCheckbox).toBeChecked();
+        (0, test_1.expect)(thirdCheckbox).not.toBeChecked();
+        await test_1.userEvent.click(allDownArrows[1]);
+        (0, test_1.expect)(firstCheckbox).not.toBeChecked();
+        (0, test_1.expect)(secondCheckbox).not.toBeChecked();
+        (0, test_1.expect)(thirdCheckbox).toBeChecked();
+        await test_1.userEvent.click(allUpArrows[1]);
+        (0, test_1.expect)(firstCheckbox).not.toBeChecked();
+        (0, test_1.expect)(secondCheckbox).toBeChecked();
+        (0, test_1.expect)(thirdCheckbox).not.toBeChecked();
+        // Remove items
+        const removeButton = canvas.queryAllByText("-");
+        await test_1.userEvent.click(removeButton[2]);
+        await test_1.userEvent.click(removeButton[1]);
+        await test_1.userEvent.click(removeButton[0]);
+        const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
+        (0, test_1.expect)(allLabelsAfterRemove.length).toEqual(0);
+    },
+};
+exports.EnumArray = {
+    args: {
+        name: "itemsList",
+        schema: {
+            type: "array",
+            title: "Enum array",
+            description: "Enum array description",
+            additionalItems: {
+                type: "number",
+                enum: [1, 2, 3, 4],
+            },
+        },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        // Add three items
+        const addButton = canvas.getByText("+");
+        await test_1.userEvent.click(addButton);
+        await test_1.userEvent.click(addButton);
+        await test_1.userEvent.click(addButton);
+        const allDownArrows = canvas.queryAllByText("↓");
+        const allUpArrows = canvas.queryAllByText("↑");
+        const firstSelect = canvasElement.querySelector('select[name="itemsList[0]"]');
+        const secondSelect = canvasElement.querySelector('select[name="itemsList[1]"]');
+        const thirdSelect = canvasElement.querySelector('select[name="itemsList[2]"]');
+        const allLabelsAfterAdd = canvasElement.querySelectorAll('[name^="itemsList["]');
+        (0, test_1.expect)(allLabelsAfterAdd.length).toEqual(3);
+        await test_1.userEvent.selectOptions(firstSelect, "1");
+        await test_1.userEvent.selectOptions(secondSelect, "2");
+        await test_1.userEvent.selectOptions(thirdSelect, "3");
+        // Check that moving items work
+        await (0, test_1.expect)(firstSelect).toHaveValue("1");
+        await (0, test_1.expect)(secondSelect).toHaveValue("2");
+        await (0, test_1.expect)(thirdSelect).toHaveValue("3");
+        await test_1.userEvent.click(allDownArrows[0]);
+        await (0, test_1.expect)(firstSelect).toHaveValue("2");
+        await (0, test_1.expect)(secondSelect).toHaveValue("1");
+        await (0, test_1.expect)(thirdSelect).toHaveValue("3");
+        await test_1.userEvent.click(allDownArrows[1]);
+        await (0, test_1.expect)(firstSelect).toHaveValue("2");
+        await (0, test_1.expect)(secondSelect).toHaveValue("3");
+        await (0, test_1.expect)(thirdSelect).toHaveValue("1");
+        await test_1.userEvent.click(allUpArrows[1]);
+        await (0, test_1.expect)(firstSelect).toHaveValue("2");
+        await (0, test_1.expect)(secondSelect).toHaveValue("1");
+        await (0, test_1.expect)(thirdSelect).toHaveValue("3");
+        // Remove items
+        const removeButton = canvas.queryAllByText("-");
+        await test_1.userEvent.click(removeButton[2]);
+        await test_1.userEvent.click(removeButton[1]);
+        await test_1.userEvent.click(removeButton[0]);
+        const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
+        (0, test_1.expect)(allLabelsAfterRemove.length).toEqual(0);
+    },
+};
+exports.ObjectArray = {
+    args: {
+        name: "itemsList",
+        schema: {
+            type: "array",
+            title: "Object array",
+            description: "Object array description",
+            additionalItems: {
+                type: "object",
+                title: "Item title",
+                description: "Item description",
+                properties: {
+                    string: {
+                        type: "string",
+                        title: "String field",
+                        description: "String description",
+                    },
+                    number: {
+                        type: "number",
+                        title: "Number field",
+                        description: "Number description",
+                    },
+                },
+            },
+        },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        // Add two items
+        const addButton = canvas.getByText("+");
+        await test_1.userEvent.click(addButton);
+        await test_1.userEvent.click(addButton);
+        const allDownArrows = canvas.queryAllByText("↓");
+        const allUpArrows = canvas.queryAllByText("↑");
+        const firstStringInput = canvasElement.querySelector('input[name="itemsList[0].string"]');
+        const secondStringInput = canvasElement.querySelector('input[name="itemsList[1].string"]');
+        const firstNumberInput = canvasElement.querySelector('input[name="itemsList[0].number"]');
+        const secondNumberInput = canvasElement.querySelector('input[name="itemsList[1].number"]');
+        const allLabelsAfterAdd = canvasElement.querySelectorAll('[name^="itemsList["]');
+        (0, test_1.expect)(allLabelsAfterAdd.length).toEqual(4);
+        await test_1.userEvent.type(firstStringInput, "first");
+        await test_1.userEvent.type(firstNumberInput, "1");
+        await test_1.userEvent.type(secondStringInput, "second");
+        await test_1.userEvent.type(secondNumberInput, "2");
+        // Check that moving items work
+        await test_1.userEvent.click(allDownArrows[0]);
+        await (0, test_1.expect)(firstStringInput).toHaveValue("second");
+        await (0, test_1.expect)(firstNumberInput).toHaveValue(2);
+        await (0, test_1.expect)(secondStringInput).toHaveValue("first");
+        await (0, test_1.expect)(secondNumberInput).toHaveValue(1);
+        await test_1.userEvent.click(allUpArrows[0]);
+        await (0, test_1.expect)(firstStringInput).toHaveValue("first");
+        await (0, test_1.expect)(firstNumberInput).toHaveValue(1);
+        await (0, test_1.expect)(secondStringInput).toHaveValue("second");
+        await (0, test_1.expect)(secondNumberInput).toHaveValue(2);
+        // Remove items
+        const removeButton = canvas.queryAllByText("-");
+        await test_1.userEvent.click(removeButton[1]);
+        await test_1.userEvent.click(removeButton[0]);
+        const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
+        (0, test_1.expect)(allLabelsAfterRemove.length).toEqual(0);
+    },
+};
+exports.AnyOfArray = {
+    args: {
+        name: "anyOf Select",
+        schema: {
+            type: "array",
+            title: "Array with anyOf-enum",
+            description: "Array description",
+            anyOf: [
+                { const: 1, title: "one" },
+                { const: 2, title: "two" },
+                { const: 3, title: "three" },
+                { const: 4, title: "four" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const anyOfSelectField = canvasElement.querySelector('select[name="anyOf Select"]');
+        const optionOne = canvasElement.querySelector('option[value="1"]');
+        const optionTwo = canvasElement.querySelector('option[value="2"]');
+        const optionThree = canvasElement.querySelector('option[value="3"]');
+        const optionFour = canvasElement.querySelector('option[value="4"]');
+        (0, test_1.expect)(anyOfSelectField).toBeInTheDocument();
+        (0, test_1.expect)(optionOne).toBeInTheDocument();
+        (0, test_1.expect)(optionTwo).toBeInTheDocument();
+        (0, test_1.expect)(optionThree).toBeInTheDocument();
+        (0, test_1.expect)(optionFour).toBeInTheDocument();
+        await test_1.userEvent.selectOptions(anyOfSelectField, optionOne);
+        await test_1.userEvent.selectOptions(anyOfSelectField, optionThree);
+        await test_1.userEvent.click(optionThree);
+        await (0, test_1.expect)(anyOfSelectField).toHaveValue(["1", "3"]);
+    },
+};

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

@@ -0,0 +1,30 @@
+"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 BooleanField_1 = require("./../BooleanField");
+exports.default = {
+    title: "Fields/BooleanField",
+    component: BooleanField_1.BooleanField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { acceptTerms: false }, onSubmit: (values) => console.log(values), children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "acceptTerms",
+        schema: { type: "boolean" },
+        uiSchema: {
+            "ui:label": "I accept the terms and conditions",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const checkbox = canvasElement.querySelector('input[type="checkbox"][name="acceptTerms"]');
+        await test_1.userEvent.click(checkbox);
+        await (0, test_1.expect)(checkbox).toBeChecked();
+        await test_1.userEvent.click(checkbox);
+        await (0, test_1.expect)(checkbox).not.toBeChecked();
+    },
+};

package/dist/cjs/fields/stories/DateField.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 formik_1 = require("formik");
+const DateField_1 = require("./../DateField");
+exports.default = {
+    title: "Fields/DateField",
+    component: DateField_1.DateField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { birthDate: "" }, onSubmit: (values) => console.log(values), children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "birthDate",
+        schema: { type: "string", format: "date" },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const dateInput = canvasElement.querySelector('input[name="birthDate"]');
+        (0, test_1.expect)(dateInput).toBeInTheDocument();
+        const dateToInput = "2023-02-01";
+        await test_1.userEvent.type(dateInput, dateToInput);
+        await (0, test_1.expect)(dateInput).toHaveValue(dateToInput);
+    },
+};

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = exports.mockRemoveFile = exports.mockFetchFile = exports.mockUploadFile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
+const FileUploadField_1 = require("../FileUploadField");
+const FileUploadContext_1 = require("../../FileUploadContext");
+let isFileUploaded = false;
+let mockFileName = "";
+const mockUploadFile = async ({ data, onUploadProgress, }) => {
+    const file = data.get("file");
+    mockFileName = file?.name || "unknown";
+    console.log("Mock uploadFile called with FormData:", data);
+    const mockFileId = file?.name || "mockFileId";
+    setTimeout(() => {
+        isFileUploaded = true;
+    }, 1000);
+    let progress = 0;
+    const interval = setInterval(() => {
+        progress += 10;
+        if (onUploadProgress) {
+            onUploadProgress({ loaded: progress, total: 100 });
+        }
+        if (progress >= 100)
+            clearInterval(interval);
+    }, 100);
+    return mockFileId;
+};
+exports.mockUploadFile = mockUploadFile;
+const mockFetchFile = async (fileId) => {
+    console.log("Mock fetchFile called with fileId:", fileId);
+    if (!isFileUploaded) {
+        return new Promise((resolve) => setTimeout(() => resolve({ name: mockFileName }), 0));
+    }
+    return new Promise((resolve) => setTimeout(() => resolve({ name: mockFileName }), 500));
+};
+exports.mockFetchFile = mockFetchFile;
+const mockRemoveFile = async (fileName) => {
+    console.log("Mock removeFile called with fileName:", fileName);
+    isFileUploaded = false;
+    mockFileName = "";
+    return { success: true };
+};
+exports.mockRemoveFile = mockRemoveFile;
+exports.default = {
+    title: "Fields/FileUploadField",
+    component: FileUploadField_1.FileUploadField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(FileUploadContext_1.FileUploadContext.Provider, { value: {
+                uploadFile: exports.mockUploadFile,
+                fetchFile: exports.mockFetchFile,
+                removeFile: exports.mockRemoveFile,
+            }, children: (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: "file",
+        schema: { type: "object" },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => { },
+};

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnyOf = exports.OneOf = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const formik_1 = require("formik");
+const MultipleChoiceField_1 = require("../MultipleChoiceField");
+exports.default = {
+    title: "Fields/MultipleChoiceField",
+    component: MultipleChoiceField_1.MultipleChoiceField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { choicesAnyOf: [], choicesOneOf: "" }, onSubmit: (values) => console.log(values), children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.OneOf = {
+    args: {
+        name: "choicesOneOf",
+        schema: {
+            type: "string",
+            oneOf: [
+                { const: "sunny", title: "Sunny" },
+                { const: "cloudy", title: "Cloudy" },
+                { const: "rainy", title: "Rainy" },
+                { const: "windy", title: "Windy" },
+            ],
+        },
+        uiSchema: {
+            "ui:field": "MultipleChoiceField",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const optionSunny = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="sunny"]');
+        const optionCloudy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="cloudy"]');
+        const optionRainy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="rainy"]');
+        const optionWindy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="windy"]');
+        await test_1.userEvent.click(optionSunny);
+        await (0, test_1.expect)(optionSunny).toBeChecked();
+        await (0, test_1.expect)(optionCloudy).not.toBeChecked();
+        await (0, test_1.expect)(optionRainy).not.toBeChecked();
+        await (0, test_1.expect)(optionWindy).not.toBeChecked();
+        await test_1.userEvent.click(optionCloudy);
+        await (0, test_1.expect)(optionCloudy).toBeChecked();
+        await (0, test_1.expect)(optionSunny).not.toBeChecked();
+        await (0, test_1.expect)(optionRainy).not.toBeChecked();
+        await (0, test_1.expect)(optionWindy).not.toBeChecked();
+    },
+};
+exports.AnyOf = {
+    args: {
+        name: "choicesAnyOf",
+        schema: {
+            type: "array",
+            anyOf: [
+                { const: "lily", title: "Lily" },
+                { const: "rose", title: "Rose" },
+                { const: "iris", title: "Iris" },
+                { const: "daisy", title: "Daisy" },
+            ],
+        },
+        uiSchema: {
+            "ui:field": "MultipleChoiceField",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const optionLily = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="lily"]');
+        const optionRose = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="rose"]');
+        const optionIris = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="iris"]');
+        const optionDaisy = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="daisy"]');
+        await test_1.userEvent.click(optionIris);
+        await (0, test_1.expect)(optionIris).toBeChecked();
+        await (0, test_1.expect)(optionRose).not.toBeChecked();
+        await (0, test_1.expect)(optionLily).not.toBeChecked();
+        await (0, test_1.expect)(optionDaisy).not.toBeChecked();
+        await test_1.userEvent.click(optionRose);
+        await (0, test_1.expect)(optionIris).toBeChecked();
+        await (0, test_1.expect)(optionRose).toBeChecked();
+        await (0, test_1.expect)(optionLily).not.toBeChecked();
+        await (0, test_1.expect)(optionDaisy).not.toBeChecked();
+    },
+};

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

@@ -0,0 +1,32 @@
+"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 NullField_1 = require("./../NullField");
+exports.default = {
+    title: "Fields/NullField",
+    component: NullField_1.NullField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { someField: null }, onSubmit: (values) => console.log(values), children: (0, jsx_runtime_1.jsxs)(formik_1.Form, { children: [Story(), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Submit" })] }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "nullField",
+        description: "Additional info",
+        schema: { type: "null", title: "Null Field" },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const title = canvasElement.querySelector('label[for="nullField"]');
+        const submitButton = canvasElement.querySelector('button[type="submit"]');
+        const additionalInfo = await canvas.findByText("Additional info");
+        (0, test_1.expect)(title).toBeInTheDocument();
+        (0, test_1.expect)(title.textContent).toBeTruthy();
+        (0, test_1.expect)(additionalInfo).toBeInTheDocument();
+        (0, test_1.expect)(submitButton).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,27 @@
+"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 NumberField_1 = require("./../NumberField");
+exports.default = {
+    title: "Fields/NumberField",
+    component: NumberField_1.NumberField,
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { numberInput: "" }, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(formik_1.Form, { children: Story() }) })),
+    ],
+};
+exports.Default = {
+    args: {
+        name: "numberInput",
+        schema: { type: "number" },
+        uiSchema: {},
+    },
+    play: async ({ canvasElement }) => {
+        const numberInput = canvasElement.querySelector('input[name="numberInput"]');
+        await test_1.userEvent.type(numberInput, "asd123");
+        await (0, test_1.expect)(numberInput).toHaveValue(123);
+        // Add tests, such as validation adn incrementing/decrementing the value
+    },
+};