@nolwenture/formik-jsonschema-form 0.4.2 → 0.5.0

package/README.md

@@ -340,6 +340,119 @@ export function MyFormComponent() {
 }
 ```
 
+### Enum fields
+
+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.
+
+```tsx
+const schema = {
+  properties: {
+    enum: {
+      type: "number",
+      title: "Enum",
+      enum: [1, 2, 3, 4],
+    },
+    enumOneOf: {
+      type: "number",
+      title: "Enum oneOf (non-standard)",
+      oneOf: [
+        { const: 1, title: "one" },
+        { const: 2, title: "two" },
+        { const: 3, title: "three" },
+        { const: 4, title: "four" },
+      ],
+    },
+    enumAnyOf: {
+      type: "number",
+      title: "Enum anyOf (non-standard)",
+      anyOf: [
+        { const: 1, title: "one" },
+        { const: 2, title: "two" },
+        { const: 3, title: "three" },
+        { const: 4, title: "four" },
+      ],
+    },
+    enumTagSelectAnyOf: {
+      type: "string",
+      title: "Enum searchable tag select anyOf",
+      anyOf: [
+        { const: 1, title: "one" },
+        { const: 2, title: "two" },
+        { const: 3, title: "three" },
+        { const: 4, title: "four" },
+      ],
+    },
+  },
+};
+
+const uiSchema = {
+  enumTagSelectAnyOf: {
+    "ui:field": "SearchMultiTagSelectField",
+    "ui:options": {
+      placeholder: "Search...",
+      emptySearchMessage: "...no matching results found",
+    },
+  },
+};
+```
+
+### 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.
+
+```tsx
+const schema = {
+  properties: {
+    date: { type: "string", title: "Date" },
+  },
+};
+
+const uiSchema = {
+  date: { "ui:field": "DateField" },
+};
+```
+
+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".
+
+```tsx
+const schema = {
+  properties: {
+    question: { type: "boolean", title: "Are you ready?" },
+    mode: { type: "boolean", title: "Toggle mode" },
+  },
+};
+
+const uiSchema = {
+  question: {
+    "ui:field": "RadioField",
+    "ui:label": { true: "yes", false: "no" },
+  },
+  mode: { "ui:field": "ToggleField" },
+};
+```
+
+The alternative fields are customisable. The customisable elements are:
+
+```tsx
+ToggleSwitchField.styles = {
+  ToggleLabelStyle: ToggleLabel,
+  ToggleFieldInputStyle: ToggleFieldInput,
+  ToggleStyle: Toggle,
+};
+
+RadioButtonField.styles = {
+  RadioButtonFieldContainerStyle: RadioButtonFieldContainer,
+  RadioButtonFieldElementStyle: RadioButtonFieldElement,
+  RadioButtonFieldInputStyle: RadioButtonFieldInput,
+  ButtonLabelStyle: ButtonLabel,
+  ButtonLabelTrueStyle: ButtonLabelTrue,
+  ButtonLabelFalseStyle: ButtonLabelFalse,
+};
+```
+
 ## Props
 
 `Form` component props:

package/dist/Form.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useFormikContext } from "formik";
@@ -16,7 +5,7 @@ import * as defaultComponents from "./styledComponents";
 import { warnFromUnsupportedKeys } from "./utils";
 import * as defaultFields from "./fields";
 import * as defaultTemplates from "./templates";
-export var FormRegistry = React.createContext({
+export const FormRegistry = React.createContext({
     fields: defaultFields,
     templates: defaultTemplates,
     components: defaultComponents,
@@ -39,18 +28,18 @@ export function Form(props) {
         "components",
         "hideUnmarkedAdditionalProperties",
     ]);
-    var isSubmitting = useFormikContext().isSubmitting;
-    var schema = props.schema, _a = props.uiSchema, uiSchema = _a === void 0 ? {} : _a, className = props.className, children = props.children, _b = props.fields, fields = _b === void 0 ? {} : _b, _c = props.templates, templates = _c === void 0 ? {} : _c, _d = props.components, components = _d === void 0 ? {} : _d, _e = props.formContext, formContext = _e === void 0 ? {} : _e, _f = props.useItemsAsAdditionalItems, useItemsAsAdditionalItems = _f === void 0 ? false : _f, _g = props.hideUnmarkedAdditionalProperties, hideUnmarkedAdditionalProperties = _g === void 0 ? false : _g;
-    var registry = {
-        fields: __assign(__assign({}, defaultFields), fields),
-        templates: __assign(__assign({}, defaultTemplates), templates),
-        components: __assign(__assign({}, defaultComponents), components),
+    const { isSubmitting } = useFormikContext();
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const registry = {
+        fields: Object.assign(Object.assign({}, defaultFields), fields),
+        templates: Object.assign(Object.assign({}, defaultTemplates), templates),
+        components: Object.assign(Object.assign({}, defaultComponents), components),
         definitions: {},
-        formContext: formContext,
-        useItemsAsAdditionalItems: useItemsAsAdditionalItems,
-        hideUnmarkedAdditionalProperties: hideUnmarkedAdditionalProperties,
+        formContext,
+        useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties,
     };
-    var _h = registry.components, FormEl = _h.Form, FormButton = _h.FormButton, FormButtonWrapper = _h.FormButtonWrapper;
-    var _SchemaField = registry.fields.SchemaField;
-    return (_jsx(FormRegistry.Provider, __assign({ value: registry }, { children: _jsxs(FormEl, __assign({ className: className }, { children: [_jsx(_SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, __assign({ type: "submit", disabled: isSubmitting }, { children: "Send" })) }))] })) })));
+    const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
+    const _SchemaField = registry.fields.SchemaField;
+    return (_jsx(FormRegistry.Provider, Object.assign({ value: registry }, { children: _jsxs(FormEl, Object.assign({ className: className }, { children: [_jsx(_SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, Object.assign({ type: "submit", disabled: isSubmitting }, { children: "Send" })) }))] })) })));
 }

package/dist/Form.stories.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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) {
@@ -22,39 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
 import { Formik, useFormikContext } from "formik";
-import { InfoFieldButton } from "./styledComponents";
-import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, } from "./_sampleData";
+import { InfoFieldButton, SearchableMultiTagSelectField, } from "./styledComponents";
+import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, } from "./_sampleData";
 import { Form, styledComponents } from "./";
 export default {
     title: "Form",
@@ -65,59 +23,80 @@ export default {
         uiSchema: { control: { type: "object" } },
     },
 };
-var Template = function (args) { return (_jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            action("onSubmit(_, formHelper)")(formikHelpers);
-            action("onSubmit(values)")(values);
-            formikHelpers.setSubmitting(false);
-            return [2 /*return*/];
-        });
-    }); } }, { children: _jsx(Form, __assign({}, args)) }))); };
-export var Simple = Template.bind({});
+const Template = (args) => (_jsx(Formik, Object.assign({ initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+        action("onSubmit(_, formHelper)")(formikHelpers);
+        action("onSubmit(values)")(values);
+        formikHelpers.setSubmitting(false);
+    }) }, { children: _jsx(Form, Object.assign({}, args)) })));
+export const Simple = Template.bind({});
 Simple.args = {
     schema: simpleSchema,
 };
-var InfoFieldButtonNew = styled(InfoFieldButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  outline: 2px red solid;\n  margin: 0.5em;\n  ", " {\n    min-width: 200px;\n    background: orange;\n    color: blue;\n  }\n  ", " {\n    color: green;\n  }\n"], ["\n  outline: 2px red solid;\n  margin: 0.5em;\n  ", " {\n    min-width: 200px;\n    background: orange;\n    color: blue;\n  }\n  ", " {\n    color: green;\n  }\n"])), InfoFieldButton.styles.InfoFieldBoxInnerElementStyle, InfoFieldButton.styles.InfoFieldLabelStyle);
-export var WithUiSchema = Template.bind({});
+const InfoFieldButtonNew = styled(InfoFieldButton) `
+  outline: 2px red solid;
+  margin: 0.5em;
+  ${InfoFieldButton.styles.InfoFieldBoxInnerElementStyle} {
+    min-width: 200px;
+    background: orange;
+    color: blue;
+  }
+  ${InfoFieldButton.styles.InfoFieldLabelStyle} {
+    color: green;
+  }
+`;
+export const WithUiSchema = Template.bind({});
 WithUiSchema.args = {
     schema: simpleSchema,
     uiSchema: simpleUiSchema,
     components: { InfoFieldButton: InfoFieldButtonNew },
 };
-export var CompleteSchema = Template.bind({});
+// TODO: get customisable styling to work
+const MyStyledSearchField = styled(SearchableMultiTagSelectField) `
+  ${SearchableMultiTagSelectField.styles.MultiSelectInputStyle} {
+    height: 2.5em;
+  }
+  ${SearchableMultiTagSelectField.styles.MultiSelectBadgeStyle} {
+    background: blue;
+  }
+`;
+export const CompleteSchema = Template.bind({});
 CompleteSchema.args = {
     schema: completeSchema,
     uiSchema: completeUiSchema,
+    components: { SearchableMultiTagSelectField: MyStyledSearchField },
 };
-export var StrictlyTyped = function () {
-    return (_jsx(Formik, __assign({ initialValues: { firstName: "", lastName: "" }, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                action("onSubmit(_, formHelper)")(formikHelpers);
-                action("onSubmit(values)")(values);
-                formikHelpers.setSubmitting(false);
-                return [2 /*return*/];
-            });
-        }); } }, { children: _jsx(Form, { schema: simpleSchema }) })));
+export const StrictlyTyped = () => {
+    return (_jsx(Formik, Object.assign({ initialValues: { firstName: "", lastName: "" }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+            action("onSubmit(_, formHelper)")(formikHelpers);
+            action("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+        }) }, { children: _jsx(Form, { schema: simpleSchema }) })));
 };
 /*** CUSTOMIZATION  ***/
-var CustomizedForm = styled(Form)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    color: red;\n  }\n"], ["\n  ", " {\n    color: red;\n  }\n"])), styledComponents.FieldTitle);
-var CustomizedFieldWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: 2px solid\n    ", ";\n"], ["\n  outline: 2px solid\n    ", ";\n"])), function (props) { return (props.title === "ABC" ? "blue" : "transparent"); });
-var CustomizedErrorMessage = function (props) {
-    var name = props.name;
-    var errors = useFormikContext().errors;
-    var error = errors[name];
+const CustomizedForm = styled(Form) `
+  ${styledComponents.FieldTitle} {
+    color: red;
+  }
+`;
+const CustomizedFieldWrapper = styled.div `
+  outline: 2px solid
+    ${(props) => (props.title === "ABC" ? "blue" : "transparent")};
+`;
+const CustomizedErrorMessage = (props) => {
+    const { name } = props;
+    const { errors } = useFormikContext();
+    const error = errors[name];
     return error ? _jsx("p", { children: error }) : _jsx("p", { children: "Hurray! No errors" });
 };
-var CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: aqua;\n"], ["\n  color: aqua;\n"])));
-export var StylesCustomized = function () {
-    return (_jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                action("onSubmit(_, formHelper)")(formikHelpers);
-                action("onSubmit(values)")(values);
-                formikHelpers.setSubmitting(false);
-                return [2 /*return*/];
-            });
-        }); } }, { children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
+const CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator) `
+  color: aqua;
+`;
+export const StylesCustomized = () => {
+    return (_jsx(Formik, Object.assign({ initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+            action("onSubmit(_, formHelper)")(formikHelpers);
+            action("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+        }) }, { children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
                 age: {
                     props: {
                         wrapper: {
@@ -138,15 +117,42 @@ export var StylesCustomized = function () {
                 RequiredIndicator: CustomizedRequiredIndicator,
             } }) })));
 };
-export var WithGeneratedSchema = Template.bind({});
+export const WithGeneratedSchema = Template.bind({});
 WithGeneratedSchema.args = {
     schema: generatedSchema,
     uiSchema: {},
     useItemsAsAdditionalItems: true,
 };
-export var WithRequiredInput = Template.bind({});
+// Test to add style to RadioButtonField and ToggleSwitchField
+// const MyRadioButtonField = styled(RadioButtonField)`
+//   border: 1px solid purple;
+//   ${RadioButtonField.styles.RadioButtonFieldElementStyle} {
+//     font-family: sans-serif;
+//     font-weight: bold;
+//   }
+//   ${RadioButtonField.styles.ButtonLabelTrueStyle} {
+//     color: green;
+//   }
+//   ${RadioButtonField.styles.ButtonLabelFalseStyle} {
+//     color: red;
+//   }
+// `;
+// const MyToggleSwitchField = styled(ToggleSwitchField)`
+//   margin-left: 0.5em;
+//   ${ToggleSwitchField.styles.ToggleStyle}:before {
+//     background: green;
+//   }
+//   ${ToggleSwitchField.styles.ToggleFieldInputStyle}:checked +${ToggleSwitchField
+//     .styles.ToggleStyle} {
+//     background: pink;
+//   }
+// `;
+export const WithRequiredInput = Template.bind({});
 WithRequiredInput.args = {
     schema: requiredInputSchema,
-    uiSchema: {},
+    uiSchema: requiredInputUiSchema,
+    // components: {
+    //   RadioButtonField: MyRadioButtonField,
+    //   ToggleSwitchField: MyToggleSwitchField,
+    // },
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/Form.test.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import { Form } from "./Form";
 import { simpleSchema } from "./_sampleData";
-test("renders title", function () {
+test("renders title", () => {
     render(_jsx(Form, { schema: simpleSchema }));
-    var titleElement = screen.getByText(/TITLE/i);
+    const titleElement = screen.getByText(/TITLE/i);
     expect(titleElement).toBeInTheDocument();
 });

package/dist/FormEditor.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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) {
@@ -18,57 +7,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Formik } from "formik";
 import { useEffect, useState } from "react";
 import { Form } from "./Form";
 import * as formEditorSchemas from "./formEditorSchemas";
 export function FormEditor(props) {
-    var _this = this;
-    var _a = useState({
+    const [editorGeneratedSchemas, setEditorGeneratedSchemas] = useState({
         schema: {},
         uiSchema: {},
-    }), editorGeneratedSchemas = _a[0], setEditorGeneratedSchemas = _a[1];
-    useEffect(function () { return console.log(editorGeneratedSchemas); }, [editorGeneratedSchemas]);
-    return (_jsxs("div", __assign({ style: { display: "flex", justifyContent: "space-between" } }, { children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, __assign({ initialValues: { schema: {}, uiSchema: {} }, onSubmit: function (values, formikHelpers) { return __awaiter(_this, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                setEditorGeneratedSchemas(values);
-                                formikHelpers.setSubmitting(false);
-                                return [2 /*return*/];
-                            });
-                        }); } }, { children: _jsx(Form, __assign({}, formEditorSchemas)) }))] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(_this, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                // action("onSubmit(_, formHelper)")(formikHelpers);
-                                // action("onSubmit(values)")(values);
-                                formikHelpers.setSubmitting(false);
-                                return [2 /*return*/];
-                            });
-                        }); } }, { children: _jsx(Form, __assign({}, editorGeneratedSchemas)) }))] })] })));
+    });
+    useEffect(() => console.log(editorGeneratedSchemas), [editorGeneratedSchemas]);
+    return (_jsxs("div", Object.assign({ style: { display: "flex", justifyContent: "space-between" } }, { children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, Object.assign({ initialValues: { schema: {}, uiSchema: {} }, onSubmit: (values, formikHelpers) => __awaiter(this, void 0, void 0, function* () {
+                            setEditorGeneratedSchemas(values);
+                            formikHelpers.setSubmitting(false);
+                        }) }, { children: _jsx(Form, Object.assign({}, formEditorSchemas)) }))] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, Object.assign({ initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(this, void 0, void 0, function* () {
+                            // action("onSubmit(_, formHelper)")(formikHelpers);
+                            // action("onSubmit(values)")(values);
+                            formikHelpers.setSubmitting(false);
+                        }) }, { children: _jsx(Form, Object.assign({}, editorGeneratedSchemas)) }))] })] })));
 }

package/dist/FormEditor.stories.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormEditor } from "./FormEditor";
 export default {
@@ -17,6 +6,6 @@ export default {
     // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
     argTypes: {},
 };
-var Template = function (args) { return (_jsx(FormEditor, __assign({}, args))); };
-export var Default = Template.bind({});
+const Template = (args) => (_jsx(FormEditor, Object.assign({}, args)));
+export const Default = Template.bind({});
 Default.args = {};

package/dist/_sampleData.d.ts

@@ -9,3 +9,4 @@ export declare const completeSchema: Schema;
 export declare const completeUiSchema: UiSchema;
 export declare const generatedSchema: Schema;
 export declare const requiredInputSchema: Schema;
+export declare const requiredInputUiSchema: UiSchema;

package/dist/_sampleData.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var simpleSchema = {
+export const simpleSchema = {
     title: "TITLE",
     properties: {
         firstName: { type: "string", title: "First name" },
@@ -7,7 +7,7 @@ export var simpleSchema = {
         age: { type: "number", title: "Age" },
     },
 };
-export var simpleUiSchema = {
+export const simpleUiSchema = {
     "ui:description": "Description text",
     firstName: {
         "ui:info": {
@@ -15,7 +15,7 @@ export var simpleUiSchema = {
         },
     },
 };
-export var completeSchema = {
+export const completeSchema = {
     title: "Inventory",
     type: "object",
     required: ["string", "number", "boolean", "enum"],
@@ -46,6 +46,7 @@ export var completeSchema = {
             title: "Enum",
             description: "Enum description",
             enum: [1, 2, 3, 4],
+            default: 1,
         },
         enumOneOf: {
             type: "number",
@@ -69,6 +70,20 @@ export var completeSchema = {
                 { const: 4, title: "four" },
             ],
         },
+        enumTagSelectAnyOf: {
+            type: "string",
+            title: "Enum searchable tag select anyOf",
+            description: "Enum searchable tag select anyOf description",
+            anyOf: [
+                { const: "cat", title: "cat" },
+                { const: "dog", title: "dog" },
+                { const: "bunny", title: "bunny" },
+                { const: "canary", title: "canary" },
+                { const: "hamster", title: "hamster" },
+                { const: "goldfish", title: "goldfish" },
+                { const: "dragon", title: "dragon" },
+            ],
+        },
         null: { type: "null", title: "Null", description: "Null description" },
         nested: {
             type: "object",
@@ -189,7 +204,7 @@ export var completeSchema = {
         },
     },
 };
-export var completeUiSchema = {
+export const completeUiSchema = {
     string: {
         "ui:help": "String help",
         "ui:options": {
@@ -214,8 +229,13 @@ export var completeUiSchema = {
     },
     enum: {
         "ui:help": "Enum help",
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+    enumOneOf: {
+        placeholder: "Select one",
     },
-    enumOneOf: { placeholder: "Select one" },
     null: {
         "ui:help": "Null help",
     },
@@ -277,8 +297,15 @@ export var completeUiSchema = {
             },
         },
     },
+    enumTagSelectAnyOf: {
+        "ui:field": "SearchMultiTagSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            emptySearchMessage: "...no matching results found",
+        },
+    },
 };
-export var generatedSchema = {
+export const generatedSchema = {
     type: "object",
     properties: {
         object: {
@@ -297,12 +324,14 @@ export var generatedSchema = {
     required: ["object", "value", "property"],
     additionalProperties: false,
 };
-export var requiredInputSchema = {
+export const requiredInputSchema = {
     title: "TITLE",
     required: ["lastName", "requiredNestedObject", "requiredArray"],
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
+        feeling: { type: "boolean", title: "Feeling happy today?" },
+        vibes: { type: "boolean", title: "Turn on the good vibes" },
         arrayOfObject: {
             type: "array",
             title: "Array of objects",
@@ -358,3 +387,12 @@ export var requiredInputSchema = {
         },
     },
 };
+export const requiredInputUiSchema = {
+    feeling: {
+        "ui:field": "RadioField",
+        "ui:label": { true: "yes", false: "no" },
+    },
+    vibes: {
+        "ui:field": "ToggleField",
+    },
+};