@nolwenture/formik-jsonschema-form 0.4.2 → 0.6.0

package/README.md

@@ -340,6 +340,193 @@ 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,
+};
+```
+
+### Conditional fields
+
+Conditional fields depending on a parent field input can be given with an `if-then-else` logic inside the schema making use of `allOf`. While `if`and `then` are required to make the condition work, `else` is optional.
+
+```tsx
+export const conditionsSchema = {
+  type: "object",
+  properties: {
+    animal: {
+      type: "string",
+      oneOf: [
+        { const: "cat", title: "Cat" },
+        { const: "fish", title: "Fish" },
+        { const: "dog", title: "Dog" },
+      ],
+    },
+  },
+  allOf: [
+    {
+      if: {
+        properties: {
+          animal: {
+            const: "cat",
+          },
+        },
+      },
+      then: {
+        properties: {
+          food: {
+            type: "string",
+            enum: ["meat", "grass", "fish"],
+          },
+        },
+        required: ["food"],
+      },
+    },
+    {
+      if: {
+        properties: {
+          animal: {
+            const: "fish",
+          },
+        },
+      },
+      then: {
+        properties: {
+          food: {
+            type: "string",
+            enum: ["insect", "worms"],
+          },
+          water: {
+            type: "string",
+            enum: ["lake", "sea"],
+          },
+        },
+        required: ["food", "water"],
+      },
+      else: {
+        properties: {
+          likesWalkiesWhere: {
+            type: "string",
+            enum: ["park", "forest", "garden"],
+          },
+        },
+      },
+    },
+
+    {
+      required: ["animal"],
+    },
+  ],
+};
+```
+
 ## Props
 
 `Form` component props:

package/dist/Form.d.ts

@@ -1,4 +1,4 @@
+import type { FormProps, FormRegistryContextValue } from "./types";
 import React from "react";
-import { FormProps, FormRegistryContextValue } from "./types";
 export declare const FormRegistry: React.Context<FormRegistryContextValue>;
-export declare function Form<T>(props: FormProps<T>): JSX.Element;
+export declare const Form: <T>(props: FormProps<T>) => import("react/jsx-runtime").JSX.Element;

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,
@@ -25,7 +14,7 @@ export var FormRegistry = React.createContext({
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });
-export function Form(props) {
+export const Form = (props) => {
     warnFromUnsupportedKeys("Form", props, [
         "schema",
         "onSubmit",
@@ -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, { value: registry, children: _jsxs(FormEl, { className: className, children: [_jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, { type: "submit", disabled: isSubmitting, children: "Send" }) }))] }) }));
+};

package/dist/Form.stories.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react";
 import { Form } from "./";
-declare const _default: ComponentMeta<typeof Form>;
-export default _default;
-export declare const Simple: ComponentStory<typeof Form>;
-export declare const WithUiSchema: ComponentStory<typeof Form>;
-export declare const CompleteSchema: ComponentStory<typeof Form>;
-export declare const StrictlyTyped: () => JSX.Element;
-export declare const StylesCustomized: () => JSX.Element;
-export declare const WithGeneratedSchema: ComponentStory<typeof Form>;
-export declare const WithRequiredInput: ComponentStory<typeof Form>;
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Simple: Story;
+export declare const WithUiSchema: Story;
+export declare const CompleteSchema: Story;
+export declare const StrictlyTyped: () => import("react/jsx-runtime").JSX.Element;
+export declare const StylesCustomized: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithGeneratedSchema: Story;
+export declare const WithRequiredInput: Story;
+export declare const WithConditions: Story;

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,41 +7,25 @@ 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 };
-    }
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 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, conditionsSchema, conditionsUiSchema, } from "./sampleData";
 import { Form, styledComponents } from "./";
-export default {
+const meta = {
     title: "Form",
     component: Form,
     // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
@@ -64,60 +33,88 @@ export default {
         schema: { control: { type: "object" } },
         uiSchema: { control: { type: "object" } },
     },
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return (_jsx(Formik, { 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)) }));
+    },
 };
-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({});
-Simple.args = {
-    schema: simpleSchema,
+export default meta;
+export const 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({});
-WithUiSchema.args = {
-    schema: simpleSchema,
-    uiSchema: simpleUiSchema,
-    components: { InfoFieldButton: InfoFieldButtonNew },
+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 = {
+    args: {
+        schema: simpleSchema,
+        uiSchema: simpleUiSchema,
+        components: { InfoFieldButton: InfoFieldButtonNew },
+    },
 };
-export var CompleteSchema = Template.bind({});
-CompleteSchema.args = {
-    schema: completeSchema,
-    uiSchema: completeUiSchema,
+// TODO: get customisable styling to work
+const MyStyledSearchField = styled(SearchableMultiTagSelectField) `
+  ${SearchableMultiTagSelectField.styles.MultiSelectInputStyle} {
+    height: 2.5em;
+  }
+  ${SearchableMultiTagSelectField.styles.MultiSelectBadgeStyle} {
+    background: blue;
+  }
+`;
+export const 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, { 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, { 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: {
@@ -136,17 +133,53 @@ export var StylesCustomized = function () {
                 FieldWrapper: CustomizedFieldWrapper,
                 ErrorMessage: CustomizedErrorMessage,
                 RequiredIndicator: CustomizedRequiredIndicator,
-            } }) })));
+            } }) }));
 };
-export var WithGeneratedSchema = Template.bind({});
-WithGeneratedSchema.args = {
-    schema: generatedSchema,
-    uiSchema: {},
-    useItemsAsAdditionalItems: true,
+export const WithGeneratedSchema = {
+    args: {
+        schema: generatedSchema,
+        uiSchema: {},
+        useItemsAsAdditionalItems: true,
+    },
 };
-export var WithRequiredInput = Template.bind({});
-WithRequiredInput.args = {
-    schema: requiredInputSchema,
-    uiSchema: {},
+// 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 = {
+    args: {
+        schema: requiredInputSchema,
+        uiSchema: requiredInputUiSchema,
+        // components: {
+        //   RadioButtonField: MyRadioButtonField,
+        //   ToggleSwitchField: MyToggleSwitchField,
+        // },
+    },
+};
+export const WithConditions = {
+    args: {
+        schema: conditionsSchema,
+        uiSchema: conditionsUiSchema,
+        hideUnmarkedAdditionalProperties: true,
+    },
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/Form.test.js

@@ -1,9 +1,9 @@
 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 () {
+import { simpleSchema } from "./sampleData";
+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.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { Schema, UiSchema } from "./types";
+import type { Schema, UiSchema } from "./types";
+import React from "react";
 export type FormEditorProps = {};
 export type FormEditorValues = {
     schema: Schema;
     uiSchema: UiSchema;
 };
-export declare function FormEditor(props: FormEditorProps): JSX.Element;
+export declare const FormEditor: React.FC<FormEditorProps>;