@nolwenture/formik-jsonschema-form 0.26.3 → 0.26.4

package/dist/cjs/FileUploadContext.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadContext = void 0;
+const react_1 = require("react");
+exports.FileUploadContext = (0, react_1.createContext)({
+    uploadFile: () => {
+        console.error("Lacking upload from FileUploadContext");
+        return Promise.reject();
+    },
+    fetchFile: (value) => Promise.resolve(value),
+    removeFile: () => {
+        console.error("Lacking remove from FileUploadContext");
+        return Promise.reject();
+    },
+});

package/dist/cjs/Form.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = exports.FormRegistry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const formik_1 = require("formik");
+const defaultComponents = __importStar(require("./styledComponents"));
+const utils_1 = require("./utils");
+const defaultFields = __importStar(require("./fields"));
+const defaultTemplates = __importStar(require("./templates"));
+exports.FormRegistry = react_1.default.createContext({
+    fields: defaultFields,
+    templates: defaultTemplates,
+    components: defaultComponents,
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});
+const Form = (props) => {
+    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
+        "schema",
+        "onSubmit",
+        "uiSchema",
+        "className",
+        "formData",
+        "className",
+        "children",
+        "fields",
+        "formContext",
+        "components",
+        "hideUnmarkedAdditionalProperties",
+    ]);
+    const { isSubmitting } = (0, formik_1.useFormikContext)();
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const schemaDefinitions = schema.definitions;
+    const uiSchemaDefinitions = uiSchema.definitions;
+    const registry = {
+        fields: { ...defaultFields, ...fields },
+        templates: { ...defaultTemplates, ...templates },
+        components: { ...defaultComponents, ...components },
+        definitions: schemaDefinitions,
+        uiSchemaDefinitions,
+        formContext,
+        useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties,
+    };
+    const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
+    const SchemaField = registry.fields.SchemaField;
+    return ((0, jsx_runtime_1.jsx)(exports.FormRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsxs)(FormEl, { className: className, children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : ((0, jsx_runtime_1.jsx)(FormButtonWrapper, { children: !hideSubmit && ((0, jsx_runtime_1.jsx)(FormButton, { type: "submit", disabled: isSubmitting, children: "Send" })) }))] }) }));
+};
+exports.Form = Form;

package/dist/cjs/Form.stories.js

@@ -0,0 +1,230 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideSubmitButton = exports.FileUploadForm = exports.proExample = exports.Collapsible = exports.MultipleChoice = exports.WithRefAndDefinitions = exports.WithConditions = exports.WithRequiredInput = exports.WithGeneratedSchema = exports.StylesCustomized = exports.StrictlyTyped = exports.CompleteSchema = exports.WithUiSchema = exports.Simple = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const addon_actions_1 = require("@storybook/addon-actions");
+const styled_components_1 = __importDefault(require("styled-components"));
+const formik_1 = require("formik");
+const styledComponents_1 = require("./styledComponents");
+const sampleData_1 = require("./sampleData");
+const _1 = require("./");
+const pdfProExampleSchema_1 = require("./sampleData/pdfProExampleSchema");
+const fileUpload_1 = require("./sampleData/fileUpload");
+const FileUploadContext_1 = require("./FileUploadContext");
+const FileUploadField_stories_1 = require("./fields/stories/FileUploadField.stories");
+const MockFileUploadProvider = ({ children, }) => {
+    return ((0, jsx_runtime_1.jsx)(FileUploadContext_1.FileUploadContext.Provider, { value: {
+            uploadFile: FileUploadField_stories_1.mockUploadFile,
+            fetchFile: FileUploadField_stories_1.mockFetchFile,
+            removeFile: FileUploadField_stories_1.mockRemoveFile,
+        }, children: children }));
+};
+const meta = {
+    title: "Form",
+    component: _1.Form,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        schema: { control: { type: "object" } },
+        uiSchema: { control: { type: "object" } },
+    },
+    render: ({ ...args }) => ((0, jsx_runtime_1.jsx)(MockFileUploadProvider, { children: (0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {}, onSubmit: async (values, formikHelpers) => {
+                (0, addon_actions_1.action)("onSubmit(_, formHelper)")(formikHelpers);
+                (0, addon_actions_1.action)("onSubmit(values)")(values);
+                formikHelpers.setSubmitting(false);
+            }, children: (0, jsx_runtime_1.jsx)(_1.Form, { ...args }) }) })),
+};
+exports.default = meta;
+exports.Simple = {
+    args: {
+        schema: sampleData_1.simpleSchema,
+        uiSchema: sampleData_1.simpleUiSchema,
+    },
+};
+const InfoFieldButtonNew = (0, styled_components_1.default)(styledComponents_1.InfoFieldButton) `
+  outline: 2px red solid;
+  margin: 0.5em;
+  ${styledComponents_1.InfoFieldButton.styles.InfoFieldBoxInnerElementStyle} {
+    min-width: 200px;
+    background: orange;
+    color: blue;
+  }
+  ${styledComponents_1.InfoFieldButton.styles.InfoFieldLabelStyle} {
+    color: green;
+  }
+`;
+exports.WithUiSchema = {
+    args: {
+        schema: sampleData_1.simpleSchema,
+        uiSchema: sampleData_1.simpleUiSchema,
+        components: { InfoFieldButton: InfoFieldButtonNew },
+    },
+};
+// TODO: get customisable styling to work
+const MyStyledSearchField = (0, styled_components_1.default)(styledComponents_1.SearchableMultiTagSelectField) `
+  ${styledComponents_1.SearchableMultiTagSelectField.styles.MultiSelectInputStyle} {
+    height: 2.5em;
+  }
+  ${styledComponents_1.SearchableMultiTagSelectField.styles.MultiSelectBadgeStyle} {
+    background: blue;
+  }
+`;
+exports.CompleteSchema = {
+    args: {
+        schema: sampleData_1.completeSchema,
+        uiSchema: sampleData_1.completeUiSchema,
+        components: { SearchableMultiTagSelectField: MyStyledSearchField },
+    },
+};
+const StrictlyTyped = () => {
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { firstName: "", lastName: "" }, onSubmit: async (values, formikHelpers) => {
+            (0, addon_actions_1.action)("onSubmit(_, formHelper)")(formikHelpers);
+            (0, addon_actions_1.action)("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+        }, children: (0, jsx_runtime_1.jsx)(_1.Form, { schema: sampleData_1.simpleSchema }) }));
+};
+exports.StrictlyTyped = StrictlyTyped;
+/*** CUSTOMIZATION  ***/
+const CustomizedForm = (0, styled_components_1.default)(_1.Form) `
+  ${_1.styledComponents.FieldTitle} {
+    color: red;
+  }
+`;
+const CustomizedFieldWrapper = styled_components_1.default.div `
+  outline: 2px solid
+    ${(props) => (props.title === "ABC" ? "blue" : "transparent")};
+`;
+const CustomizedErrorMessage = (props) => {
+    const { name } = props;
+    const { errors } = (0, formik_1.useFormikContext)();
+    const error = errors[name];
+    return error ? (0, jsx_runtime_1.jsx)("p", { children: error }) : (0, jsx_runtime_1.jsx)("p", { children: "Hurray! No errors" });
+};
+const CustomizedRequiredIndicator = (0, styled_components_1.default)(_1.styledComponents.RequiredIndicator) `
+  color: aqua;
+`;
+const StylesCustomized = () => {
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {}, onSubmit: async (values, formikHelpers) => {
+            (0, addon_actions_1.action)("onSubmit(_, formHelper)")(formikHelpers);
+            (0, addon_actions_1.action)("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+        }, children: (0, jsx_runtime_1.jsx)(CustomizedForm, { schema: sampleData_1.simpleSchema, uiSchema: {
+                age: {
+                    props: {
+                        wrapper: {
+                            title: "ABC",
+                        },
+                    },
+                },
+                firstName: {
+                    props: {
+                        wrapper: {
+                            title: "ABC",
+                        },
+                    },
+                },
+            }, components: {
+                FieldWrapper: CustomizedFieldWrapper,
+                ErrorMessage: CustomizedErrorMessage,
+                RequiredIndicator: CustomizedRequiredIndicator,
+            } }) }));
+};
+exports.StylesCustomized = StylesCustomized;
+exports.WithGeneratedSchema = {
+    args: {
+        schema: sampleData_1.generatedSchema,
+        uiSchema: {},
+        useItemsAsAdditionalItems: true,
+    },
+};
+// 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;
+//   }
+// `;
+exports.WithRequiredInput = {
+    args: {
+        schema: sampleData_1.requiredInputSchema,
+        uiSchema: sampleData_1.requiredInputUiSchema,
+        // components: {
+        //   RadioButtonField: MyRadioButtonField,
+        //   ToggleSwitchField: MyToggleSwitchField,
+        // },
+    },
+};
+exports.WithConditions = {
+    args: {
+        schema: sampleData_1.conditionsSchema,
+        uiSchema: sampleData_1.conditionsUiSchema,
+        hideUnmarkedAdditionalProperties: true,
+    },
+};
+exports.WithRefAndDefinitions = {
+    args: {
+        schema: sampleData_1.refDefSchema,
+        uiSchema: sampleData_1.refDefUiSchema,
+    },
+};
+// Test to add style to MultipleChoiceField
+// const MyMultipleChoiceField = styled(MultipleChoiceField)`
+//   background: lavender;
+//   ${MultipleChoiceField.styles.MultipleChoiceFieldLabelStyle} {
+//     color: purple;
+//   }
+//   ${MultipleChoiceField.styles.MultipleChoiceFieldElementStyle} {
+//     background: lightblue;
+//   }
+//   ${MultipleChoiceField.styles.MultipleChoiceFieldInputStyle}:checked {
+//     accent-color: yellow;
+//   }
+// `;
+exports.MultipleChoice = {
+    args: {
+        schema: sampleData_1.multipleChoiceSchema,
+        uiSchema: sampleData_1.multipleChoiceUiSchema,
+        //components: { MultipleChoiceField: MyMultipleChoiceField },
+    },
+};
+exports.Collapsible = {
+    args: {
+        schema: sampleData_1.collapsibleSchema,
+        uiSchema: sampleData_1.collapsibleUiSchema,
+    },
+};
+exports.proExample = {
+    args: { schema: pdfProExampleSchema_1.pdfProExampleSchema, uiSchema: pdfProExampleSchema_1.pdfProExampleUiSchema },
+};
+exports.FileUploadForm = {
+    args: {
+        schema: fileUpload_1.fileUploadSchema,
+        uiSchema: fileUpload_1.fileUploadUiSchema,
+    },
+};
+exports.HideSubmitButton = {
+    args: {
+        schema: sampleData_1.simpleSchema,
+        uiSchema: sampleData_1.simpleUiSchema,
+        hideSubmit: true,
+    },
+};

package/dist/cjs/Form.test.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const formik_1 = require("formik");
+const Form_1 = require("./Form");
+const sampleData_1 = require("./sampleData");
+test("renders title", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {}, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(Form_1.Form, { schema: sampleData_1.simpleSchema }) }));
+    const titleElement = react_1.screen.getByText(/TITLE/i);
+    expect(titleElement).toBeInTheDocument();
+});

package/dist/cjs/FormEditor.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const Form_1 = require("./Form");
+const formEditorSchemas = __importStar(require("./formEditorSchemas"));
+const FormEditor = (props) => {
+    const [editorGeneratedSchemas, setEditorGeneratedSchemas] = (0, react_1.useState)({
+        schema: {},
+        uiSchema: {},
+    });
+    (0, react_1.useEffect)(() => console.log(editorGeneratedSchemas), [editorGeneratedSchemas]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Editor" }), (0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { schema: {}, uiSchema: {} }, onSubmit: async (values, formikHelpers) => {
+                            setEditorGeneratedSchemas(values);
+                            formikHelpers.setSubmitting(false);
+                        }, children: (0, jsx_runtime_1.jsx)(Form_1.Form, { ...formEditorSchemas }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Preview" }), (0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {}, onSubmit: async (values, formikHelpers) => {
+                            // action("onSubmit(_, formHelper)")(formikHelpers);
+                            // action("onSubmit(values)")(values);
+                            formikHelpers.setSubmitting(false);
+                        }, children: (0, jsx_runtime_1.jsx)(Form_1.Form, { ...editorGeneratedSchemas }) })] })] }));
+};
+exports.FormEditor = FormEditor;

package/dist/cjs/FormEditor.stories.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const FormEditor_1 = require("./FormEditor");
+const meta = {
+    title: "FormEditor",
+    component: FormEditor_1.FormEditor,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {},
+};
+exports.default = meta;
+exports.Default = {};

package/dist/cjs/FormPdf.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPdf = exports.FormPdfRegistry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const defaultComponents = __importStar(require("./styledComponents"));
+const utils_1 = require("./utils");
+const defaultFields = __importStar(require("./pdfFields"));
+const defaultTemplates = __importStar(require("./pdfTemplates"));
+exports.FormPdfRegistry = react_1.default.createContext({
+    fields: defaultFields,
+    templates: defaultTemplates,
+    components: defaultComponents,
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});
+const FormPdf = (props) => {
+    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
+        "schema",
+        "onSubmit",
+        "uiSchema",
+        "className",
+        "formData",
+        "className",
+        "children",
+        "fields",
+        "formContext",
+        "components",
+        "hideUnmarkedAdditionalProperties",
+        "values",
+    ]);
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, values = {}, } = props;
+    const schemaDefinitions = schema.definitions;
+    const uiSchemaDefinitions = uiSchema.definitions;
+    const registry = {
+        fields: { ...defaultFields, ...fields },
+        templates: { ...defaultTemplates, ...templates },
+        components: { ...defaultComponents, ...components },
+        definitions: schemaDefinitions,
+        uiSchemaDefinitions,
+        formContext,
+        useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties,
+    };
+    const { Form: FormEl } = registry.components;
+    const SchemaField = registry.fields.SchemaField;
+    return ((0, jsx_runtime_1.jsx)(exports.FormPdfRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+};
+exports.FormPdf = FormPdf;

package/dist/cjs/FormPdf.stories.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiChoice = exports.EJSTest = exports.ProExamplePdf = exports.StylesCustomized = exports.CompletePdfSchema = exports.SimplePdf = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const addon_actions_1 = require("@storybook/addon-actions");
+const formik_1 = require("formik");
+const sampleData_1 = require("./sampleData");
+const _1 = require("./");
+const styledComponents_1 = require("./styledComponents");
+const styled_components_1 = require("styled-components");
+const pdfProExampleSchema_1 = require("./sampleData/pdfProExampleSchema");
+const ejsSchema_1 = require("./sampleData/ejsSchema");
+const meta = {
+    title: "FormPdf",
+    component: _1.FormPdf,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        schema: { control: { type: "object" } },
+        uiSchema: { control: { type: "object" } },
+        values: {},
+    },
+    render: ({ ...args }) => ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: args.values, onSubmit: async (values, formikHelpers) => {
+            (0, addon_actions_1.action)("onSubmit(_, formHelper)")(formikHelpers);
+            (0, addon_actions_1.action)("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+        }, children: (0, jsx_runtime_1.jsx)(_1.FormPdf, { ...args }) })),
+};
+exports.default = meta;
+exports.SimplePdf = {
+    args: {
+        schema: sampleData_1.simpleSchema,
+        uiSchema: {},
+        values: { firstName: "Doro", lastName: "Heck", age: 31, pet: "dog" },
+    },
+};
+exports.CompletePdfSchema = {
+    args: {
+        schema: sampleData_1.completeSchema,
+        uiSchema: sampleData_1.completeUiSchema,
+        values: {
+            string: "This is a string value",
+            number: 123,
+            date: "2024-09-13",
+            boolean: true,
+            enum: 3,
+            enumOneOf: 4,
+            enumAnyOf: [1, 3],
+            enumTagSelectAnyOf: ["dog", "cat"],
+            searchableSelect: "hamster",
+            array: ["First field", "Second field"],
+            partiallyFixedArray: ["Hello", "To you"],
+            enumArray: [2, 4],
+            nested: {
+                string: "This is a string inside a nested object",
+                number: 987,
+                date: "2021-12-09",
+                enum: 1,
+            },
+            objectArray: [
+                {
+                    string: "this is a string in an object in an array",
+                    number: 1,
+                    date: "2020-09-20",
+                    boolean: false,
+                    enum: [3],
+                    enumWithTitle: 2,
+                },
+            ],
+            textArea: "This is a little longer text, but not really that long. Just a little longer to test out this text area.",
+            radio: true,
+            toggle: false,
+        },
+    },
+};
+/*** CUSTOMIZATION  ***/
+const CustomizedForm = (0, styled_components_1.styled)(_1.FormPdf) `
+  ${_1.styledComponents.FieldTitle} {
+    color: red;
+  }
+`;
+const CustomizedFieldWrapper = styled_components_1.styled.div `
+  outline: 2px solid
+    ${(props) => (props.title === "ABC" ? "blue" : "transparent")};
+`;
+const CustomizedStringFieldPdf = (0, styled_components_1.styled)(styledComponents_1.StringFieldPdf) `
+  color: purple;
+`;
+const StylesCustomized = () => {
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { firstName: "Doro", lastName: "Heck", age: 31 }, onSubmit: async (values, formikHelpers) => {
+            (0, addon_actions_1.action)("onSubmit(_, formHelper)")(formikHelpers);
+            (0, addon_actions_1.action)("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+        }, children: (0, jsx_runtime_1.jsx)(CustomizedForm, { schema: sampleData_1.simpleSchema, uiSchema: {
+                age: {
+                    props: {
+                        wrapper: {
+                            title: "ABC",
+                        },
+                    },
+                },
+                firstName: {
+                    props: {
+                        wrapper: {
+                            title: "ABC",
+                        },
+                    },
+                },
+            }, components: {
+                FieldWrapper: CustomizedFieldWrapper,
+                StringFieldPdf: CustomizedStringFieldPdf,
+            }, values: { firstName: "Doro", lastName: "Heck", age: 31 } }) }));
+};
+exports.StylesCustomized = StylesCustomized;
+exports.ProExamplePdf = {
+    args: {
+        schema: pdfProExampleSchema_1.pdfProExampleSchema,
+        uiSchema: pdfProExampleSchema_1.pdfProExampleUiSchema,
+        values: pdfProExampleSchema_1.pdfProExampleData,
+    },
+};
+exports.EJSTest = {
+    args: {
+        schema: ejsSchema_1.ejsSchema,
+        uiSchema: ejsSchema_1.ejsUiSchema,
+        values: ejsSchema_1.ejsTestValues,
+    },
+};
+exports.MultiChoice = {
+    args: {
+        schema: sampleData_1.multipleChoiceSchema,
+        uiSchema: sampleData_1.multipleChoiceUiSchema,
+        values: sampleData_1.multipleChoiceValue,
+    },
+};

package/dist/cjs/FormPdf.test.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const formik_1 = require("formik");
+const FormPdf_1 = require("./FormPdf");
+const sampleData_1 = require("./sampleData");
+test("renders title", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: { firstName: "Lisa" }, onSubmit: () => { }, children: (0, jsx_runtime_1.jsx)(FormPdf_1.FormPdf, { schema: sampleData_1.simpleSchema, values: { firstName: "Lisa" } }) }));
+    const titleElement = react_1.screen.getByText(/TITLE/i);
+    const valueElement = react_1.screen.getByText("Lisa");
+    expect(titleElement).toBeInTheDocument();
+    expect(valueElement).toBeInTheDocument();
+});

package/dist/cjs/fields/AnyField.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnyField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const utils_1 = require("../utils");
+const SchemaField_1 = require("./SchemaField");
+const types_1 = require("./types");
+const AnyField = (props) => {
+    const { name, schema, uiSchema } = props;
+    const [{ value }] = (0, formik_1.useField)(name);
+    const [type, setType] = (0, react_1.useState)(value !== undefined ? (0, utils_1.guessType)(value) : "string");
+    const enrichedSchema = (0, react_1.useMemo)(() => {
+        switch (type) {
+            case "object":
+                return { ...(schema || {}), type, additionalProperties: {} };
+            case "array":
+                return { ...(schema || {}), type, additionalItems: {} };
+            default:
+                return { ...(schema || {}), type };
+        }
+    }, [type, schema]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(types_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+};
+exports.AnyField = AnyField;