@nolwenture/formik-jsonschema-form 0.7.1 → 0.8.0

package/README.md

@@ -14,6 +14,26 @@ With yarn:
 yarn add @nolwenture/formik-jsonschema-form
 ```
 
+## Testing
+
+Run unit tests:
+
+```text
+npm run test
+```
+
+To run storybook tests make sure you have Playwright installed:
+
+```text
+npx playwright install
+```
+
+Run storybook tests:
+
+```text
+npm run test-storybook
+```
+
 ## Usage
 
 ### Basic usage
@@ -400,7 +420,9 @@ const uiSchema = {
 ### Alternative fields
 
 There are alternative fields available for certain types.
-For `type: "string"` there is `DateField`, that has a "dd.mm.yyyy" date input field and a calendar date picker and will save the date input as "yyyy-mm-dd" string.
+For `type: "string"` there is `DateField` and `MultipleChoiceField`.
+
+`DateField` has a "dd.mm.yyyy" date input field and a calendar date picker and will save the date input as "yyyy-mm-dd" string.
 
 ```tsx
 const schema = {
@@ -414,6 +436,35 @@ const uiSchema = {
 };
 ```
 
+`MultipleChoiceField` takes an array of `oneOf` or `anyOf`. The choices provided inside an `oneOf`array will be presented on the UI as Radio button selectables and only one of the given values can be selected. The choices provided inside an `anyOf` array will be presented on the UI as Checkbox selectables and multiple values can be selected.
+`MultipleChoiceField` comes with a small number of predefined styles, which are `inline`, `oneColumn`, `twoColumns` and `threeColumns`. When no style is given, the choice options are listed in a row under the title.
+
+```tsx
+const schema = {
+  properties: {
+    feeling: {
+      type: "string",
+      title: "How are you feeling today?",
+      oneOf: [
+        { const: "happy", title: "Happy" },
+        { const: "creative", title: "Creative" },
+        { const: "tired", title: "Tired" },
+        { const: "nope", title: "Please don't even ask..." },
+      ],
+    },
+  },
+};
+
+const uiSchema = {
+  feeling: {
+    "ui:field": "MultipleChoiceField",
+    "ui:option": {
+      style: "twoColumns",
+    },
+  },
+};
+```
+
 For `type: "boolean"` there is `RadioField` and `ToggleField`.
 `RadioField` can take labels for the "true" and "false" options. If left empty, the default labels will be "true" and "false".
 

package/dist/Form.stories.d.ts

@@ -11,3 +11,4 @@ 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 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 { multipleChoiceSchema, multipleChoiceUiSchema, } from "./sampleData/multipleChoiceSchema";
 const meta = {
     title: "Form",
     component: Form,
@@ -46,6 +47,7 @@ export default meta;
 export const Simple = {
     args: {
         schema: simpleSchema,
+        uiSchema: simpleUiSchema,
     },
 };
 const InfoFieldButtonNew = styled(InfoFieldButton) `
@@ -183,3 +185,9 @@ export const WithConditions = {
         hideUnmarkedAdditionalProperties: true,
     },
 };
+export const MultipleChoice = {
+    args: {
+        schema: multipleChoiceSchema,
+        uiSchema: multipleChoiceUiSchema,
+    },
+};

package/dist/Form.test.d.ts

@@ -1 +1 @@
-export {};
+import "@testing-library/jest-dom";

package/dist/Form.test.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
+import { Formik } from "formik";
 import { Form } from "./Form";
 import { simpleSchema } from "./sampleData";
 test("renders title", () => {
-    render(_jsx(Form, { schema: simpleSchema }));
+    render(_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { schema: simpleSchema }) }));
     const titleElement = screen.getByText(/TITLE/i);
     expect(titleElement).toBeInTheDocument();
 });

package/dist/fields/MultipleChoiceField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const MultipleChoiceField: React.FC<FieldProps>;

package/dist/fields/MultipleChoiceField.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { getEnums } from "../utils/getEnums";
+export const MultipleChoiceField = (props) => {
+    const { templates: { FieldTemplate }, components: { MultipleChoiceField }, } = useContext(FormRegistry);
+    useSetDefault(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/ObjectField.js

@@ -53,7 +53,9 @@ export const ObjectField = (props) => {
                 return (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                Object.entries(additionalValues || {}).map(([childName, childSchema]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
+                                ? schema.additionalProperties
+                                : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: ObjectFieldButtonPurpose.REMOVE,
                                 onClick: () => {
                                     const _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);

package/dist/fields/StringField.js

@@ -13,7 +13,7 @@ export const StringField = (props) => {
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
         case "multiSelect":
-            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, (enums.type !== "multiSelect" ? { defaultValue: "" } : {}), { children: [enums.type !== "multiSelect" && (_jsx("option", Object.assign({ value: "", disabled: true,
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: enums.type === "multiSelect", children: [enums.type !== "multiSelect" && (_jsx("option", Object.assign({ value: "", disabled: true,
                             hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
         default:
             return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type,

package/dist/fields/index.d.ts

@@ -10,3 +10,4 @@ export * from "./AnyField";
 export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
+export * from "./MultipleChoiceField";

package/dist/fields/index.js

@@ -10,3 +10,4 @@ export * from "./AnyField";
 export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
+export * from "./MultipleChoiceField";

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

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

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

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

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

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

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

@@ -0,0 +1,191 @@
+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 { Formik, Form } from "formik";
+import { ArrayField } from "./../ArrayField";
+export default {
+    title: "Components/ArrayField",
+    component: ArrayField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { itemsList: [] }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const BasicArray = {
+    args: {
+        name: "itemsList",
+        schema: {
+            type: "array",
+            title: "Array",
+            description: "Array description",
+            additionalItems: { type: "boolean" },
+        },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        // Add three items
+        const addButton = canvas.getByText("+");
+        yield userEvent.click(addButton);
+        yield userEvent.click(addButton);
+        yield 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["]');
+        expect(allLabelsAfterAdd.length).toEqual(3);
+        // Check that moving items work
+        yield userEvent.click(firstCheckbox);
+        expect(firstCheckbox).toBeChecked();
+        expect(secondCheckbox).not.toBeChecked();
+        expect(thirdCheckbox).not.toBeChecked();
+        yield userEvent.click(allDownArrows[0]);
+        expect(firstCheckbox).not.toBeChecked();
+        expect(secondCheckbox).toBeChecked();
+        expect(thirdCheckbox).not.toBeChecked();
+        yield userEvent.click(allDownArrows[1]);
+        expect(firstCheckbox).not.toBeChecked();
+        expect(secondCheckbox).not.toBeChecked();
+        expect(thirdCheckbox).toBeChecked();
+        yield userEvent.click(allUpArrows[1]);
+        expect(firstCheckbox).not.toBeChecked();
+        expect(secondCheckbox).toBeChecked();
+        expect(thirdCheckbox).not.toBeChecked();
+        // Remove items
+        const removeButton = canvas.queryAllByText("-");
+        yield userEvent.click(removeButton[2]);
+        yield userEvent.click(removeButton[1]);
+        yield userEvent.click(removeButton[0]);
+        const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
+        expect(allLabelsAfterRemove.length).toEqual(0);
+    }),
+};
+export const EnumArray = {
+    args: {
+        name: "itemsList",
+        schema: {
+            type: "array",
+            title: "Enum array",
+            description: "Enum array description",
+            additionalItems: {
+                type: "number",
+                enum: [1, 2, 3, 4],
+            },
+        },
+        uiSchema: {},
+    },
+    play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        // Add three items
+        const addButton = canvas.getByText("+");
+        yield userEvent.click(addButton);
+        yield userEvent.click(addButton);
+        yield 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["]');
+        expect(allLabelsAfterAdd.length).toEqual(3);
+        yield userEvent.selectOptions(firstSelect, "1");
+        yield userEvent.selectOptions(secondSelect, "2");
+        yield userEvent.selectOptions(thirdSelect, "3");
+        // Check that moving items work
+        yield expect(firstSelect).toHaveValue("1");
+        yield expect(secondSelect).toHaveValue("2");
+        yield expect(thirdSelect).toHaveValue("3");
+        yield userEvent.click(allDownArrows[0]);
+        yield expect(firstSelect).toHaveValue("2");
+        yield expect(secondSelect).toHaveValue("1");
+        yield expect(thirdSelect).toHaveValue("3");
+        yield userEvent.click(allDownArrows[1]);
+        yield expect(firstSelect).toHaveValue("2");
+        yield expect(secondSelect).toHaveValue("3");
+        yield expect(thirdSelect).toHaveValue("1");
+        yield userEvent.click(allUpArrows[1]);
+        yield expect(firstSelect).toHaveValue("2");
+        yield expect(secondSelect).toHaveValue("1");
+        yield expect(thirdSelect).toHaveValue("3");
+        // Remove items
+        const removeButton = canvas.queryAllByText("-");
+        yield userEvent.click(removeButton[2]);
+        yield userEvent.click(removeButton[1]);
+        yield userEvent.click(removeButton[0]);
+        const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
+        expect(allLabelsAfterRemove.length).toEqual(0);
+    }),
+};
+export const 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: (_c) => __awaiter(void 0, [_c], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        // Add two items
+        const addButton = canvas.getByText("+");
+        yield userEvent.click(addButton);
+        yield 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["]');
+        expect(allLabelsAfterAdd.length).toEqual(4);
+        yield userEvent.type(firstStringInput, "first");
+        yield userEvent.type(firstNumberInput, "1");
+        yield userEvent.type(secondStringInput, "second");
+        yield userEvent.type(secondNumberInput, "2");
+        // Check that moving items work
+        yield userEvent.click(allDownArrows[0]);
+        yield expect(firstStringInput).toHaveValue("second");
+        yield expect(firstNumberInput).toHaveValue(2);
+        yield expect(secondStringInput).toHaveValue("first");
+        yield expect(secondNumberInput).toHaveValue(1);
+        yield userEvent.click(allUpArrows[0]);
+        yield expect(firstStringInput).toHaveValue("first");
+        yield expect(firstNumberInput).toHaveValue(1);
+        yield expect(secondStringInput).toHaveValue("second");
+        yield expect(secondNumberInput).toHaveValue(2);
+        // Remove items
+        const removeButton = canvas.queryAllByText("-");
+        yield userEvent.click(removeButton[1]);
+        yield userEvent.click(removeButton[0]);
+        const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
+        expect(allLabelsAfterRemove.length).toEqual(0);
+    }),
+};

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

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

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

@@ -0,0 +1,36 @@
+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 { BooleanField } from "./../BooleanField";
+export default {
+    title: "Components/BooleanField",
+    component: BooleanField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { acceptTerms: false }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "acceptTerms",
+        schema: { type: "boolean" },
+        uiSchema: {
+            "ui:label": "I accept the terms and conditions",
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const checkbox = canvasElement.querySelector('input[type="checkbox"][name="acceptTerms"]');
+        yield userEvent.click(checkbox);
+        yield expect(checkbox).toBeChecked();
+        yield userEvent.click(checkbox);
+        yield expect(checkbox).not.toBeChecked();
+    }),
+};

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

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

package/dist/fields/stories/DateField.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 { Formik, Form } from "formik";
+import { DateField } from "./../DateField";
+export default {
+    title: "Components/DateField",
+    component: DateField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { birthDate: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "birthDate",
+        schema: { type: "string", format: "date" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const dateInput = canvasElement.querySelector('input[name="birthDate"]');
+        expect(dateInput).toBeInTheDocument();
+        const dateToInput = "2023-02-01";
+        yield userEvent.type(dateInput, dateToInput);
+        yield expect(dateInput).toHaveValue(dateToInput);
+    }),
+};

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

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

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

@@ -0,0 +1,38 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { within, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { NullField } from "./../NullField";
+export default {
+    title: "Components/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" })] }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "nullField",
+        description: "Additional info",
+        schema: { type: "null", title: "Null Field" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const title = canvasElement.querySelector('label[for="nullField"]');
+        const submitButton = canvasElement.querySelector('button[type="submit"]');
+        const additionalInfo = yield canvas.findByText("Additional info");
+        expect(title).toBeInTheDocument();
+        expect(title.textContent).toBeTruthy();
+        expect(additionalInfo).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+    }),
+};

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

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

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

@@ -0,0 +1,33 @@
+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 { NumberField } from "./../NumberField";
+export default {
+    title: "Components/NumberField",
+    component: NumberField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { numberInput: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "numberInput",
+        schema: { type: "number" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const numberInput = canvasElement.querySelector('input[name="numberInput"]');
+        yield userEvent.type(numberInput, "asd123");
+        yield expect(numberInput).toHaveValue(123);
+        // Add tests, such as validation adn incrementing/decrementing the value
+    }),
+};

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

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