@nolwenture/formik-jsonschema-form 0.4.2 → 0.6.0

package/dist/fields/RadioField.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const RadioField = (props) => {
+    const { templates: { FieldTemplate }, components: { RadioButtonField }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { label, props: inputProps } = useExtractUiSchema(uiSchema);
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(RadioButtonField, { inputProps: inputProps, label: label, name: name }) })));
+};

package/dist/fields/SchemaField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function SchemaField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const SchemaField: React.FC<FieldProps>;

package/dist/fields/SchemaField.js

@@ -1,39 +1,29 @@
-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 { useContext } from "react";
-import { useExtractUiSchema, getSchemaType } from "../utils";
+import { getSchemaType } from "../utils";
+import { useExtractUiSchema } from "../hooks";
 import { FormRegistry } from "../Form";
 import { COMPONENT_TYPES } from "./types";
-function useFieldComponent(schema, uiSchema, fields) {
-    var field = useExtractUiSchema(uiSchema).field;
+const useFieldComponent = (schema, uiSchema, fields) => {
+    const { field } = useExtractUiSchema(uiSchema);
     if (typeof field === "function") {
         return field;
     }
     if (typeof field === "string" && field in fields) {
         return fields[field];
     }
-    var schemaType = getSchemaType(schema);
+    let schemaType = getSchemaType(schema);
     if (Array.isArray(schemaType)) {
         schemaType = schemaType[0];
     }
-    var componentName = COMPONENT_TYPES[schemaType || "any"];
+    const componentName = COMPONENT_TYPES[schemaType || "any"];
     return componentName in fields
         ? fields[componentName]
         : fields.UnsupportedField;
-}
-export function SchemaField(props) {
-    var schema = props.schema, uiSchema = props.uiSchema;
-    var fields = useContext(FormRegistry).fields;
-    var FieldComponent = useFieldComponent(schema, uiSchema, fields);
-    return _jsx(FieldComponent, __assign({}, props));
-}
+};
+export const SchemaField = (props) => {
+    const { schema, uiSchema } = props;
+    const { fields } = useContext(FormRegistry);
+    const FieldComponent = useFieldComponent(schema, uiSchema, fields);
+    return _jsx(FieldComponent, Object.assign({}, props));
+};

package/dist/fields/SearchMultiTagSelectField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const SearchMultiTagSelectField: React.FC<FieldProps>;

package/dist/fields/SearchMultiTagSelectField.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { FormRegistry } from "../Form";
+import { getEnums } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { SearchableMultiTagSelectField } from "../styledComponents";
+export const SearchMultiTagSelectField = (props) => {
+    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { placeholder, emptySearchMessage, props: inputProps, } = useExtractUiSchema(uiSchema);
+    const enums = useMemo(() => getEnums(props), [props]);
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(SearchableMultiTagSelectField, Object.assign({}, inputProps, { name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums })) })));
+};

package/dist/fields/StringField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function StringField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const StringField: React.FC<FieldProps>;

package/dist/fields/StringField.js

@@ -1,60 +1,22 @@
-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 { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../utils";
-function getEnums(_a) {
-    var schema = _a.schema;
-    var numberOfDefined = [schema.enum, schema.oneOf, schema.anyOf].filter(function (x) { return x; }).length;
-    if (numberOfDefined === 0) {
-        return;
-    }
-    if (numberOfDefined > 1) {
-        throw new Error('Only one of "enum", "oneOf" or "anyOf" can be defined!');
-    }
-    if (schema.enum) {
-        return {
-            type: "select",
-            values: schema.enum.map(function (option) { return ({
-                const: option,
-                title: "".concat(option),
-            }); }),
-        };
-    }
-    if (schema.oneOf) {
-        return {
-            type: "select",
-            values: schema.oneOf,
-        };
-    }
-    if (schema.anyOf) {
-        return {
-            type: "multiSelect",
-            values: schema.anyOf,
-        };
-    }
-}
-export function StringField(props) {
-    var _a = useContext(FormRegistry), FieldTemplate = _a.templates.FieldTemplate, FieldInput = _a.components.FieldInput;
+import { getEnums } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const StringField = (props) => {
+    var _a;
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
-    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
-    var _b = useExtractUiSchema(uiSchema), type = _b.type, placeholder = _b.placeholder, inputProps = _b.props;
-    var enums = useMemo(function () { return getEnums(props); }, [props]);
+    const { name, uiSchema = {}, schema } = props;
+    const { type, placeholder, props: inputProps } = useExtractUiSchema(uiSchema);
+    const enums = useMemo(() => getEnums(props), [props]);
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
         case "multiSelect":
-            return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, { children: [enums.type !== "multiSelect" && (_jsx("option", __assign({ value: "", disabled: true, selected: true, hidden: true }, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map(function (option, index) { return (_jsx("option", __assign({ value: option.const }, { children: option.title }), index)); })] })) })));
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, (enums.type !== "multiSelect" ? { defaultValue: "" } : {}), { children: [enums.type !== "multiSelect" && (_jsx("option", Object.assign({ value: "", disabled: true,
+                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
         default:
-            return (_jsx(FieldTemplate, __assign({}, props, { children: _jsx(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name })) })));
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type,
+                    placeholder }, inputProps, { name: name })) })));
     }
-}
+};

package/dist/fields/ToggleField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const ToggleField: React.FC<FieldProps>;

package/dist/fields/ToggleField.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const ToggleField = (props) => {
+    const { templates: { FieldTemplate }, components: { ToggleSwitchField }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = useExtractUiSchema(uiSchema);
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(ToggleSwitchField, Object.assign({}, inputProps, { name: name })) })));
+};

package/dist/fields/index.d.ts

@@ -7,3 +7,6 @@ export * from "./ObjectField";
 export * from "./SchemaField";
 export * from "./StringField";
 export * from "./AnyField";
+export * from "./RadioField";
+export * from "./ToggleField";
+export * from "./SearchMultiTagSelectField";

package/dist/fields/index.js

@@ -7,3 +7,6 @@ export * from "./ObjectField";
 export * from "./SchemaField";
 export * from "./StringField";
 export * from "./AnyField";
+export * from "./RadioField";
+export * from "./ToggleField";
+export * from "./SearchMultiTagSelectField";

package/dist/fields/types.js

@@ -1,4 +1,4 @@
-export var COMPONENT_TYPES = {
+export const COMPONENT_TYPES = {
     array: "ArrayField",
     boolean: "BooleanField",
     integer: "NumberField",

package/dist/formEditorSchemas.d.ts

@@ -1,3 +1,3 @@
-import { Schema, UiSchema } from "./types";
+import type { Schema, UiSchema } from "./types";
 export declare const schema: Schema;
 export declare const uiSchema: UiSchema;

package/dist/formEditorSchemas.js

@@ -1,4 +1,4 @@
-var field = {
+const field = {
     type: "object",
     properties: {
         type: {
@@ -17,7 +17,7 @@ var field = {
         },
     },
 };
-export var schema = {
+export const schema = {
     type: "object",
     properties: {
         "schema.type": {
@@ -31,6 +31,6 @@ export var schema = {
     },
     additionalProperties: field,
 };
-export var uiSchema = {
+export const uiSchema = {
     "schema.type": { props: { type: "hidden" } },
 };

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useExtractUiSchema";
+export * from "./useSetDefault";

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./useExtractUiSchema";
+export * from "./useSetDefault";

package/dist/hooks/useExtractUiSchema.d.ts

@@ -0,0 +1,8 @@
+import type { UiSchema } from "../types";
+export declare const useExtractUiSchema: (props?: UiSchema | undefined) => {
+    [name: string]: any;
+    field?: UiSchema["ui:field"];
+    props?: UiSchema["ui:props"];
+    help?: UiSchema["ui:help"];
+    info?: UiSchema["ui:info"];
+};

package/dist/hooks/useExtractUiSchema.js

@@ -0,0 +1,22 @@
+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 { useMemo } from "react";
+export const useExtractUiSchema = (props = {}) => {
+    var _a, _b;
+    if (props.props !== undefined) {
+        props["ui:props"] = Object.assign(Object.assign({}, ((_a = props["ui:props"]) !== null && _a !== void 0 ? _a : {})), ((_b = props.props) !== null && _b !== void 0 ? _b : {}));
+    }
+    return useMemo(() => {
+        const { "ui:options": options = {} } = props, uiSchema = __rest(props, ["ui:options"]);
+        return Object.assign(Object.assign({}, Object.keys(uiSchema || {}).reduce((result, key) => (Object.assign(Object.assign({}, result), { [key.replace("ui:", "")]: uiSchema[key] })), {})), options);
+    }, [props]);
+};

package/dist/hooks/useSetDefault.d.ts

@@ -0,0 +1,2 @@
+import type { FieldProps } from "../types";
+export declare const useSetDefault: (props: FieldProps) => void;

package/dist/hooks/useSetDefault.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useField } from "formik";
+import { getDefaultValueForType } from "../utils";
+export const useSetDefault = (props) => {
+    const [{ value }, _, { setValue }] = useField(props.name);
+    useEffect(() => {
+        if (!value) {
+            if (props.schema.default) {
+                setValue(props.schema.default);
+            }
+            else if (props.forceDefaultValue) {
+                setValue(getDefaultValueForType(props.schema.type));
+            }
+        }
+    }, []);
+};

package/dist/sampleData/completeSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const completeSchema: Schema;
+export declare const completeUiSchema: UiSchema;

package/dist/{_sampleData.js → sampleData/completeSchema.js}

@@ -1,21 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var simpleSchema = {
-    title: "TITLE",
-    properties: {
-        firstName: { type: "string", title: "First name" },
-        lastName: { type: "string", title: "Last name" },
-        age: { type: "number", title: "Age" },
-    },
-};
-export var simpleUiSchema = {
-    "ui:description": "Description text",
-    firstName: {
-        "ui:info": {
-            content: "A small info",
-        },
-    },
-};
-export var completeSchema = {
+export const completeSchema = {
     title: "Inventory",
     type: "object",
     required: ["string", "number", "boolean", "enum"],
@@ -46,6 +30,7 @@ export var completeSchema = {
             title: "Enum",
             description: "Enum description",
             enum: [1, 2, 3, 4],
+            default: 1,
         },
         enumOneOf: {
             type: "number",
@@ -69,6 +54,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 +188,7 @@ export var completeSchema = {
         },
     },
 };
-export var completeUiSchema = {
+export const completeUiSchema = {
     string: {
         "ui:help": "String help",
         "ui:options": {
@@ -214,8 +213,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,84 +281,11 @@ export var completeUiSchema = {
             },
         },
     },
-};
-export var generatedSchema = {
-    type: "object",
-    properties: {
-        object: {
-            type: "object",
-            additionalProperties: {},
-        },
-        value: {},
-        array: {
-            type: "array",
-            items: {},
-        },
-        property: {
-            type: "string",
-        },
-    },
-    required: ["object", "value", "property"],
-    additionalProperties: false,
-};
-export var requiredInputSchema = {
-    title: "TITLE",
-    required: ["lastName", "requiredNestedObject", "requiredArray"],
-    properties: {
-        firstName: { type: "string", title: "First name" },
-        lastName: { type: "string", title: "Last name" },
-        arrayOfObject: {
-            type: "array",
-            title: "Array of objects",
-            items: {
-                type: "object",
-                title: "Favourites",
-                required: ["favouriteFood"],
-                properties: {
-                    favouriteFood: { type: "string", title: "Favourite food" },
-                    favouriteSong: { type: "string", title: "Favourite song" },
-                },
-            },
-            additionalItems: {
-                type: "object",
-                title: "Second favourites",
-                required: ["secondFavouriteSong"],
-                properties: {
-                    anotherFavouriteFood: {
-                        type: "string",
-                        title: "Another favourite food",
-                    },
-                    anotherFavouriteSong: {
-                        type: "string",
-                        title: "Another favourite song",
-                    },
-                },
-            },
-        },
-        nestedObject: {
-            type: "object",
-            title: "Nested Object",
-            required: ["tasks"],
-            properties: {
-                hobbies: { type: "string", title: "Hobbies" },
-                tasks: { type: "string", title: "Tasks" },
-            },
-        },
-        requiredNestedObject: {
-            type: "object",
-            title: "Required Nested Object",
-            properties: {
-                plans: { type: "string", title: "Future plans" },
-                past: { type: "string", title: "Past achievements" },
-            },
-        },
-        requiredArray: {
-            type: "array",
-            title: "Required Array",
-            description: "Array description for required array",
-            additionalItems: {
-                type: "string",
-            },
+    enumTagSelectAnyOf: {
+        "ui:field": "SearchMultiTagSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            emptySearchMessage: "...no matching results found",
         },
     },
 };

package/dist/sampleData/conditionsSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const conditionsSchema: Schema;
+export declare const conditionsUiSchema: UiSchema;

package/dist/sampleData/conditionsSchema.js

@@ -0,0 +1,80 @@
+export const 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" },
+            ],
+        },
+    },
+    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"],
+        },
+    ],
+};
+export const conditionsUiSchema = {
+    animal: {
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+    food: {
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+};

package/dist/sampleData/generatedSchema.d.ts

@@ -0,0 +1,2 @@
+import type { Schema } from "../types";
+export declare const generatedSchema: Schema;

package/dist/sampleData/generatedSchema.js

@@ -0,0 +1,19 @@
+export const generatedSchema = {
+    type: "object",
+    properties: {
+        object: {
+            type: "object",
+            additionalProperties: {},
+        },
+        value: {},
+        array: {
+            type: "array",
+            items: {},
+        },
+        property: {
+            type: "string",
+        },
+    },
+    required: ["object", "value", "property"],
+    additionalProperties: false,
+};

package/dist/sampleData/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./simpleData";
+export * from "./completeSchema";
+export * from "./generatedSchema";
+export * from "./requiredInputSchema";
+export * from "./conditionsSchema";

package/dist/sampleData/index.js

@@ -0,0 +1,5 @@
+export * from "./simpleData";
+export * from "./completeSchema";
+export * from "./generatedSchema";
+export * from "./requiredInputSchema";
+export * from "./conditionsSchema";

package/dist/sampleData/requiredInputSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const requiredInputSchema: Schema;
+export declare const requiredInputUiSchema: UiSchema;