@nolwenture/formik-jsonschema-form 0.11.0 → 0.12.0

package/README.md

@@ -365,6 +365,10 @@ export function MyFormComponent() {
 Enum fields are fields with multiple options to either choose `oneOf` or `anyOf` from.
 There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchMultiTagSelectField"` results in a searchable multi tag select field.
 
+The type of the field holding the enum is defined by its return value. `oneOf` enums will only return a single value and therefore, the type of the returned value is used as the field type (in the following example, "number" is the correct field type).
+
+`anyOf`enums will return the value(s) inside an array, even if only one option was selected. Therefore, the correct field type for the field holding the `anyOf`-enum is "array".
+
 ```tsx
 const schema = {
   properties: {
@@ -384,7 +388,7 @@ const schema = {
       ],
     },
     enumAnyOf: {
-      type: "number",
+      type: "array",
       title: "Enum anyOf (non-standard)",
       anyOf: [
         { const: 1, title: "one" },
@@ -394,7 +398,7 @@ const schema = {
       ],
     },
     enumTagSelectAnyOf: {
-      type: "string",
+      type: "array",
       title: "Enum searchable tag select anyOf",
       anyOf: [
         { const: 1, title: "one" },
@@ -420,7 +424,7 @@ const uiSchema = {
 ### Alternative fields
 
 There are alternative fields available for certain types.
-For `type: "string"` there is `DateField`, `MultipleChoiceField` and `TextAreaField`.
+For `type: "string"` there is `DateField`, `TextAreaField` and partly `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.
 
@@ -436,7 +440,28 @@ 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.
+`TextAreaField` gives more space for a longer string input.
+
+```tsx
+const schema = {
+  properties: {
+    story: { type: "string", title: "A short story" },
+  },
+};
+
+const uiSchema = {
+  story: { "ui:field": "TextAreaField" },
+};
+```
+
+`MultipleChoiceField` takes an array of `oneOf` or `anyOf`.
+If you are creating a schema using `oneOf`, the type of the field is the value returned by the chosen enum option (e.g. "string" or "number").
+If you are creating a schema using `anyOf`, the type of the field is "array", since the returned value will be in an array format, even if only one option is selected.
+
+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
@@ -452,6 +477,19 @@ const schema = {
         { const: "nope", title: "Please don't even ask..." },
       ],
     },
+    food: {
+      type: "array",
+      title: "What would you like to eat today? (style: oneColumn)",
+      anyOf: [
+        { const: "breakfast", title: "Breakfast" },
+        { const: "secondBreakfast", title: "What about second breakfast?" },
+        { const: "elevenses", title: "Elevenses" },
+        { const: "luncheon", title: "Luncheon" },
+        { const: "afternoonTea", title: "Afternoon tea" },
+        { const: "dinner", title: "Dinner" },
+        { const: "supper", title: "Supper" },
+      ],
+    },
   },
 };
 
@@ -462,21 +500,13 @@ const uiSchema = {
       style: "twoColumns",
     },
   },
-};
-```
-
-`TextAreaField` gives more space for a longer string input.
-
-```tsx
-const schema = {
-  properties: {
-    story: { type: "string", title: "A short story" },
+  food: {
+    "ui:field": "MultipleChoiceField",
+    "ui:options": {
+      style: "oneColumn",
+    },
   },
 };
-
-const uiSchema = {
-  story: { "ui:field": "TextAreaField" },
-};
 ```
 
 For `type: "boolean"` there is `RadioField` and `ToggleField`.

package/dist/fields/ArrayField.js

@@ -4,7 +4,9 @@ import { useField } from "formik";
 import { FormRegistry } from "../Form";
 import { ArrayFieldButtonPurpose } from "../types";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { GetArrayFieldButton } from "../styledComponents";
+import { FieldInput, GetArrayFieldButton } from "../styledComponents";
+import { FieldTemplate } from "../templates";
+import { getEnums } from "../utils";
 const appendArray = (values) => {
     return values ? [...values, ""] : [""];
 };
@@ -33,6 +35,7 @@ export const ArrayField = (props) => {
     const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
+    const { type, props: inputProps } = useExtractUiSchema(uiSchema);
     const [{ value }, _, { setValue }] = useField(name);
     const { items, additionalItems, } = useMemo(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -51,6 +54,7 @@ export const ArrayField = (props) => {
                     : undefined,
             };
     }, [schema]);
+    const enums = useMemo(() => getEnums(props), [props]);
     //This whole mess would give backwards compatibility, but maybe we don't do it
     // const {
     //   items,
@@ -91,10 +95,10 @@ export const ArrayField = (props) => {
     //         },
     //   [schema]
     // );
-    // Bacwards compatibility ends
+    // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     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"
+    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_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/StringField.js

@@ -12,9 +12,8 @@ export const StringField = (props) => {
     const enums = useMemo(() => getEnums(props), [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", 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)))] })) })));
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_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,
                     placeholder }, inputProps, { name: name })) })));

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

@@ -5,3 +5,4 @@ export default _default;
 export declare const BasicArray: StoryObj<typeof ArrayField>;
 export declare const EnumArray: StoryObj<typeof ArrayField>;
 export declare const ObjectArray: StoryObj<typeof ArrayField>;
+export declare const AnyOfArray: StoryObj<typeof ArrayField>;

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

@@ -189,3 +189,36 @@ export const ObjectArray = {
         expect(allLabelsAfterRemove.length).toEqual(0);
     }),
 };
+export const 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: (_d) => __awaiter(void 0, [_d], void 0, function* ({ 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"]');
+        expect(anyOfSelectField).toBeInTheDocument();
+        expect(optionOne).toBeInTheDocument();
+        expect(optionTwo).toBeInTheDocument();
+        expect(optionThree).toBeInTheDocument();
+        expect(optionFour).toBeInTheDocument();
+        yield userEvent.selectOptions(anyOfSelectField, optionOne);
+        yield userEvent.selectOptions(anyOfSelectField, optionThree);
+        yield userEvent.click(optionThree);
+        yield expect(anyOfSelectField).toHaveValue(["1", "3"]);
+    }),
+};

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

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

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

@@ -0,0 +1,86 @@
+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 { MultipleChoiceField } from "../MultipleChoiceField";
+export default {
+    title: "Fields/MultipleChoiceField",
+    component: MultipleChoiceField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { choicesAnyOf: [], choicesOneOf: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const 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: (_a) => __awaiter(void 0, [_a], void 0, function* ({ 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"]');
+        yield userEvent.click(optionSunny);
+        yield expect(optionSunny).toBeChecked();
+        yield expect(optionCloudy).not.toBeChecked();
+        yield expect(optionRainy).not.toBeChecked();
+        yield expect(optionWindy).not.toBeChecked();
+        yield userEvent.click(optionCloudy);
+        yield expect(optionCloudy).toBeChecked();
+        yield expect(optionSunny).not.toBeChecked();
+        yield expect(optionRainy).not.toBeChecked();
+        yield expect(optionWindy).not.toBeChecked();
+    }),
+};
+export const 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: (_b) => __awaiter(void 0, [_b], void 0, function* ({ 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"]');
+        yield userEvent.click(optionIris);
+        yield expect(optionIris).toBeChecked();
+        yield expect(optionRose).not.toBeChecked();
+        yield expect(optionLily).not.toBeChecked();
+        yield expect(optionDaisy).not.toBeChecked();
+        yield userEvent.click(optionRose);
+        yield expect(optionIris).toBeChecked();
+        yield expect(optionRose).toBeChecked();
+        yield expect(optionLily).not.toBeChecked();
+        yield expect(optionDaisy).not.toBeChecked();
+    }),
+};

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

@@ -22,7 +22,7 @@ export const Default = {
     args: {
         name: "tags",
         schema: {
-            type: "string",
+            type: "array",
             title: "Enum searchable tag select anyOf",
             anyOf: [
                 { const: "1", title: "First tag" },

package/dist/sampleData/completeSchema.js

@@ -44,7 +44,7 @@ export const completeSchema = {
             ],
         },
         enumAnyOf: {
-            type: "number",
+            type: "array",
             title: "Enum anyOf (non-standard)",
             description: "Enum anyOf description",
             anyOf: [
@@ -55,7 +55,7 @@ export const completeSchema = {
             ],
         },
         enumTagSelectAnyOf: {
-            type: "string",
+            type: "array",
             title: "Enum searchable tag select anyOf",
             description: "Enum searchable tag select anyOf description",
             anyOf: [

package/dist/sampleData/multipleChoiceSchema.js

@@ -23,7 +23,7 @@ export const multipleChoiceSchema = {
             ],
         },
         food: {
-            type: "string",
+            type: "array",
             title: "What would you like to eat today? (style: oneColumn)",
             anyOf: [
                 { const: "breakfast", title: "Breakfast" },
@@ -36,7 +36,7 @@ export const multipleChoiceSchema = {
             ],
         },
         drinks: {
-            type: "string",
+            type: "array",
             title: "What would you like to drink today? (style: twoColumns)",
             anyOf: [
                 { const: "water", title: "Water" },
@@ -53,7 +53,7 @@ export const multipleChoiceSchema = {
             ],
         },
         flowers: {
-            type: "string",
+            type: "array",
             title: "Pick some flowers (style: threeColumns)",
             anyOf: [
                 { const: "lily", title: "Lily" },

package/dist/styledComponents.js

@@ -362,7 +362,7 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
     };
     return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
                             setSearch(e.currentTarget.value);
                         }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [