@nolwenture/formik-jsonschema-form 0.26.2 → 0.26.4

package/dist/cjs/pdfTemplates/CollapsibleObjectFieldTemplate.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleObjectFieldTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const utils_1 = require("../utils");
+const hooks_1 = require("../hooks");
+const styledComponents_1 = require("../styledComponents");
+const CollapsibleObjectFieldTemplate = (props) => {
+    const { components: { FieldDescription, CollapsibleObjectFieldTitle, CollapsibleObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { children, name, uiSchema } = props;
+    const title = (0, utils_1.getTitle)(props);
+    const description = (0, utils_1.getDescription)(props);
+    const { help, info, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    // error: errorProps,
+     } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const [collapsed, setCollapsed] = (0, react_1.useState)(isCollapsedOnLoad);
+    const hide = collapsed;
+    return ((0, jsx_runtime_1.jsxs)(CollapsibleObjectFieldWrapper, { ...wrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(styledComponents_1.CollapsibleToggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(CollapsibleObjectFieldTitle, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(styledComponents_1.RequiredIndicator, { children: "*" }), (0, jsx_runtime_1.jsx)(styledComponents_1.Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(InfoFieldButton, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(styledComponents_1.CollapsibleChildWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help })] }));
+};
+exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

package/dist/cjs/pdfTemplates/FieldTemplate.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormPdf_1 = require("../FormPdf");
+const utils_1 = require("../utils");
+const hooks_1 = require("../hooks");
+const FieldTemplate = (props) => {
+    const { components: { FieldWrapper, FieldTitle, FieldDescription, FieldHelp, RequiredIndicator, }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
+    const { name, uiSchema, children } = props;
+    const title = (0, utils_1.getTitle)(props);
+    const description = (0, utils_1.getDescription)(props);
+    const { help, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...wrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, { children: "*" })] })), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help })] }));
+};
+exports.FieldTemplate = FieldTemplate;

package/dist/cjs/pdfTemplates/ObjectFieldTemplate.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectFieldTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormPdf_1 = require("../FormPdf");
+const utils_1 = require("../utils");
+const hooks_1 = require("../hooks");
+const styledComponents_1 = require("../styledComponents");
+const ObjectFieldTemplate = (props) => {
+    const { components: { FieldDescription, ObjectFieldTitle, ObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
+    const { children, uiSchema } = props;
+    const title = (0, utils_1.getTitle)(props);
+    const description = (0, utils_1.getDescription)(props);
+    const { help, info, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps,
+    // error: errorProps,
+     } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    return ((0, jsx_runtime_1.jsxs)(ObjectFieldWrapper, { ...wrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(ObjectFieldTitle, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(styledComponents_1.RequiredIndicator, { children: "*" })] })), info && (0, jsx_runtime_1.jsx)(InfoFieldButton, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help })] }));
+};
+exports.ObjectFieldTemplate = ObjectFieldTemplate;

package/dist/cjs/pdfTemplates/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ArrayFieldTemplate"), exports);
+__exportStar(require("./FieldTemplate"), exports);
+__exportStar(require("./ObjectFieldTemplate"), exports);
+__exportStar(require("./CollapsibleObjectFieldTemplate"), exports);

package/dist/cjs/sampleData/ageFieldDefinition.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ageFieldDefinition = void 0;
+exports.ageFieldDefinition = {
+    type: "number",
+    title: "Age",
+    description: "The schema for this field got imported from a separate file",
+};

package/dist/cjs/sampleData/collapsibleSchema.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapsibleUiSchema = exports.collapsibleSchema = void 0;
+exports.collapsibleSchema = {
+    title: "TITLE",
+    properties: {
+        colObject: {
+            type: "object",
+            title: "Collapsible Object",
+            properties: { summer: { type: "string" }, winter: { type: "string" } },
+        },
+        secondColObject: {
+            type: "object",
+            title: "Second collapsible Object",
+            properties: { spring: { type: "string" }, fall: { type: "string" } },
+        },
+    },
+};
+exports.collapsibleUiSchema = {
+    "ui:description": "Description text",
+    colObject: { props: { isCollapsible: true, isCollapsedOnLoad: false } },
+    secondColObject: {
+        props: {
+            isCollapsible: true,
+            isCollapsedOnLoad: true,
+            openIcon: "-",
+            collapsedIcon: "+",
+        },
+    },
+};

package/dist/cjs/sampleData/completeSchema.js

@@ -0,0 +1,351 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.completePdfUiSchema = exports.completeUiSchema = exports.completeSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+exports.completeSchema = {
+    title: "Inventory",
+    type: "object",
+    required: ["string", "number", "boolean", "enum", "textArea"],
+    properties: {
+        string: {
+            type: "string",
+            title: "String",
+            description: "String description",
+        },
+        number: {
+            type: "number",
+            title: "Number",
+            description: "Number description",
+        },
+        date: {
+            type: "string",
+            title: "Date",
+            description: "Date description",
+        },
+        boolean: {
+            type: "boolean",
+            title: "Boolean",
+            description: "Boolean description",
+            default: false,
+        },
+        enum: {
+            type: "number",
+            title: "Enum",
+            description: "Enum description",
+            enum: [1, 2, 3, 4],
+            default: 1,
+        },
+        enumOneOf: {
+            type: "number",
+            title: "Enum oneOf (non-standard)",
+            description: "Enum oneOf description",
+            oneOf: [
+                { const: 1, title: "one" },
+                { const: 2, title: "two" },
+                { const: 3, title: "three" },
+                { const: 4, title: "four" },
+            ],
+        },
+        enumAnyOf: {
+            type: "array",
+            title: "Enum anyOf (non-standard)",
+            description: "Enum anyOf description",
+            anyOf: [
+                { const: 1, title: "one" },
+                { const: 2, title: "two" },
+                { const: 3, title: "three" },
+                { const: 4, title: "four" },
+            ],
+        },
+        enumTagSelectAnyOf: {
+            type: "array",
+            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" },
+            ],
+        },
+        searchableSelect: {
+            type: "string",
+            title: "Enum searchable select oneOf",
+            description: "Enum searchable select oneOf description",
+            oneOf: [
+                { 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" },
+                { const: "lizard", title: "lizard" },
+                { const: "frog", title: "frog" },
+                { const: "parrot", title: "parrot" },
+                { const: "turtle", title: "turtle" },
+                { const: "raccoon", title: "raccoon" },
+                { const: "tiger", title: "tiger" },
+                { const: "lion", title: "lion" },
+            ],
+        },
+        null: { type: "null", title: "Null", description: "Null description" },
+        nested: {
+            type: "object",
+            title: "Nested object",
+            description: "Nested object description",
+            properties: {
+                string: {
+                    type: "string",
+                    title: "Nested String",
+                    description: "Nested String description",
+                },
+                number: {
+                    type: "number",
+                    title: "Nested Number",
+                    description: "Nested Number description",
+                },
+                date: {
+                    type: "string",
+                    title: "Date",
+                    description: "Date description",
+                },
+                boolean: {
+                    type: "boolean",
+                    title: "Nested Boolean",
+                    description: "Nested Boolean description",
+                    default: false,
+                },
+                enum: {
+                    type: "number",
+                    title: "Nested Enum",
+                    description: "Nested Enum description",
+                    enum: [1, 2, 3, 4],
+                },
+                null: {
+                    type: "null",
+                    title: "Nested Null",
+                    description: "Nested Null description",
+                },
+            },
+            additionalProperties: {
+                type: "string",
+            },
+        },
+        array: {
+            type: "array",
+            title: "Array",
+            description: "Array description",
+            additionalItems: {
+                type: "string",
+            },
+        },
+        partiallyFixedArray: {
+            type: "array",
+            title: "Partially fixed array",
+            description: "Partially fixed array description",
+            items: [{ type: "string", default: "Hello" }, { type: "string" }],
+            additionalItems: {
+                type: "string",
+                default: "defaultForAdditional",
+            },
+        },
+        enumArray: {
+            type: "array",
+            title: "Enum array",
+            description: "Enum array description",
+            additionalItems: {
+                type: "string",
+                oneOf: [
+                    { const: 1, title: "one" },
+                    { const: 2, title: "two" },
+                    { const: 3, title: "three" },
+                    { const: 4, title: "four" },
+                ],
+            },
+        },
+        objectArray: {
+            type: "array",
+            title: "Object array",
+            description: "Object array description",
+            additionalItems: {
+                type: "object",
+                title: "Array object",
+                description: "Array object description",
+                properties: {
+                    string: {
+                        type: "string",
+                        title: "Array String",
+                        description: "Array String description",
+                    },
+                    number: {
+                        type: "number",
+                        title: "Array Number",
+                        description: "Array Number description",
+                    },
+                    date: {
+                        type: "string",
+                        title: "Date",
+                        description: "Date description",
+                    },
+                    boolean: {
+                        type: "boolean",
+                        title: "Array Boolean",
+                        description: "Array Boolean description",
+                        default: false,
+                    },
+                    enum: {
+                        type: "array",
+                        title: "Array Enum",
+                        description: "Array Enum description",
+                        items: {
+                            type: "number",
+                            enum: [1, 2, 3, 4],
+                        },
+                    },
+                    enumWithTitle: {
+                        type: "number",
+                        title: "Array Enum with titles",
+                        description: "Array Enum with titles description",
+                        oneOf: [
+                            { const: 1, title: "first option" },
+                            { const: 2, title: "second option" },
+                            { const: 3, title: "third option" },
+                            { const: 4, title: "fourth option" },
+                        ],
+                    },
+                    null: {
+                        type: "null",
+                        title: "Array Null",
+                        description: "Array Null description",
+                    },
+                },
+            },
+            default: [{ string: "Hello" }],
+        },
+        textArea: {
+            type: "string",
+            title: "TextArea Field",
+            description: "TextArea field description",
+        },
+        radio: { type: "boolean", title: "Are you ready?" },
+        toggle: { type: "boolean", title: "Toggle mode" },
+    },
+};
+exports.completeUiSchema = {
+    string: {
+        "ui:help": "String help",
+        "ui:options": {
+            placeholder: "String placeholder",
+        },
+    },
+    number: {
+        "ui:help": "Number help",
+        "ui:options": {
+            placeholder: "Number placeholder",
+        },
+    },
+    date: {
+        "ui:field": "DateField",
+        "ui:help": "Date help",
+    },
+    boolean: {
+        "ui:help": "Boolean help",
+        "ui:options": {
+            valueDescription: "Boolean specific label",
+        },
+    },
+    enum: {
+        "ui:help": "Enum help",
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+    enumOneOf: {
+        placeholder: "Select one",
+    },
+    null: {
+        "ui:help": "Null help",
+    },
+    nested: {
+        string: {
+            "ui:help": "String help",
+            "ui:options": {
+                placeholder: "String placeholder",
+            },
+        },
+        number: {
+            "ui:help": "Number help",
+            "ui:options": {
+                placeholder: "Number placeholder",
+            },
+        },
+        date: {
+            "ui:field": "DateField",
+            "ui:help": "Date help",
+        },
+        boolean: {
+            "ui:help": "Boolean help",
+            "ui:options": {
+                valueDescription: "Boolean specific label",
+            },
+        },
+        enum: {
+            "ui:help": "Enum help",
+        },
+        null: {
+            "ui:help": "Null help",
+        },
+        "ui:addButtonOptions": {
+            content: (0, jsx_runtime_1.jsx)("b", { children: "Hello in an Object!" }),
+            props: { style: { background: "pink" } },
+        },
+    },
+    partiallyFixedArray: {
+        "ui:addButtonOptions": {
+            content: (0, jsx_runtime_1.jsx)("b", { children: "Hello!" }),
+            props: { style: { background: "green" } },
+        },
+        "ui:removeButtonOptions": {
+            content: (0, jsx_runtime_1.jsx)("span", { children: "-" }),
+            props: {
+                style: {
+                    height: "25px",
+                    width: "25px",
+                    background: "red",
+                    borderRadius: "50%",
+                    display: "inline-block",
+                    border: "unset",
+                    padding: "unset",
+                    color: "white",
+                    fontWeight: "bolder",
+                    textAlign: "center",
+                    lineHeight: "1.4em",
+                },
+            },
+        },
+    },
+    enumTagSelectAnyOf: {
+        "ui:field": "SearchMultiTagSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            emptySearchMessage: "...no matching results found",
+        },
+    },
+    searchableSelect: {
+        "ui:field": "SearchableSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            clearButtonText: "X",
+            expandText: "More results",
+            emptySearchMessage: "...no matching results found",
+        },
+    },
+    textArea: { "ui:field": "TextAreaField" },
+    radio: { "ui:field": "RadioField", "ui:label": { true: "yes", false: "no" } },
+    toggle: { "ui:field": "ToggleField" },
+};
+exports.completePdfUiSchema = {};

package/dist/cjs/sampleData/conditionsSchema.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.conditionsUiSchema = exports.conditionsSchema = void 0;
+exports.conditionsSchema = {
+    type: "object",
+    properties: {
+        animal: {
+            type: "string",
+            oneOf: [
+                { const: "cat", title: "Cat" },
+                { const: "fish", title: "Fish" },
+                { const: "dog", title: "Dog" },
+                { const: "horse", title: "Horse" },
+                { const: "hamster", title: "Hamster" },
+            ],
+        },
+        otherField: { type: "string", title: "Other field" },
+    },
+    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"],
+        },
+    ],
+};
+exports.conditionsUiSchema = {
+    animal: {
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+    food: {
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+    "ui:order": ["animal", "water", "food", "otherField"],
+};

package/dist/cjs/sampleData/ejsSchema.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ejsTestValues = exports.ejsUiSchema = exports.ejsSchema = void 0;
+exports.ejsSchema = {
+    title: "TITLE",
+    properties: {
+        ejsTest: { type: "array", title: "EJS title" },
+    },
+};
+exports.ejsUiSchema = {
+    "ui:description": "Description text",
+    ejsTest: {
+        "ui:field": "EJSField",
+        "ui:description": "Just a short description",
+        "ui:options": {
+            template: `<div>
+    <div><%= title %></div>
+    <div><%= description %></div>
+    <div>
+        <% value.forEach(function(v) { %>
+            <span><%= v %></span>
+        <% }); %>
+    </div>
+</div>`,
+        },
+    },
+};
+exports.ejsTestValues = { ejsTest: ["flammable", "corrosive"] };

package/dist/cjs/sampleData/fileUpload.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploadUiSchema = exports.fileUploadSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+exports.fileUploadSchema = {
+    title: "File Upload Form",
+    properties: {
+        file: { type: "object", title: "Single upload field" },
+        fileArray: { type: "array", additionalItems: { type: "object" } },
+    },
+};
+exports.fileUploadUiSchema = {
+    "ui:description": "File upload form with on single field and one array field for uploads",
+    file: {
+        "ui:field": "FileUploadField",
+        "ui:removeButton": {
+            content: (0, jsx_runtime_1.jsx)("span", { children: "-" }),
+            props: {
+                style: {
+                    height: "25px",
+                    width: "25px",
+                    background: "red",
+                    borderRadius: "50%",
+                    display: "inline-block",
+                    border: "unset",
+                    padding: "unset",
+                    color: "white",
+                    fontWeight: "bolder",
+                    textAlign: "center",
+                    lineHeight: "1.4em",
+                },
+            },
+        },
+    },
+    fileArray: {
+        items: {
+            "ui:field": "FileUploadField",
+            "ui:uploadButtonText": "Add?",
+            "ui:infoText": "There's nothing here",
+            props: { removeButton: { hidden: true } },
+        },
+    },
+};

package/dist/cjs/sampleData/generatedSchema.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatedSchema = void 0;
+exports.generatedSchema = {
+    type: "object",
+    properties: {
+        object: {
+            type: "object",
+            additionalProperties: {},
+        },
+        value: {},
+        array: {
+            type: "array",
+            items: {},
+        },
+        property: {
+            type: "string",
+        },
+    },
+    required: ["object", "value", "property"],
+    additionalProperties: false,
+};