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

package/dist/Form.js

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

package/dist/Form.stories.d.ts

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

package/dist/Form.stories.js

@@ -25,6 +25,8 @@ import { Formik, useFormikContext } from "formik";
 import { InfoFieldButton, SearchableMultiTagSelectField, } from "./styledComponents";
 import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, conditionsSchema, conditionsUiSchema, } from "./sampleData";
 import { Form, styledComponents } from "./";
+import { refDefSchema, refDefUiSchema } from "./sampleData/refDefSchema";
+import { multipleChoiceSchema, multipleChoiceUiSchema, } from "./sampleData/multipleChoiceSchema";
 const meta = {
     title: "Form",
     component: Form,
@@ -46,6 +48,7 @@ export default meta;
 export const Simple = {
     args: {
         schema: simpleSchema,
+        uiSchema: simpleUiSchema,
     },
 };
 const InfoFieldButtonNew = styled(InfoFieldButton) `
@@ -183,3 +186,15 @@ export const WithConditions = {
         hideUnmarkedAdditionalProperties: true,
     },
 };
+export const WithRefAndDefinitions = {
+    args: {
+        schema: refDefSchema,
+        uiSchema: refDefUiSchema,
+    },
+};
+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/ArrayField.js

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

package/dist/fields/MultipleChoiceField.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,13 @@
+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]);
+    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/SchemaField.js

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

package/dist/fields/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: "Fields/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: "Fields/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>;