@nolwenture/formik-jsonschema-form 0.5.0 → 0.6.0

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,9 +1,10 @@
 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) {
+const useFieldComponent = (schema, uiSchema, fields) => {
     const { field } = useExtractUiSchema(uiSchema);
     if (typeof field === "function") {
         return field;
@@ -19,10 +20,10 @@ function useFieldComponent(schema, uiSchema, fields) {
     return componentName in fields
         ? fields[componentName]
         : fields.UnsupportedField;
-}
-export function SchemaField(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

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

package/dist/fields/SearchMultiTagSelectField.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { getEnums, useExtractUiSchema, useSetDefault } from "../utils";
+import { getEnums } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
 import { SearchableMultiTagSelectField } from "../styledComponents";
-export function SearchMultiTagSelectField(props) {
+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,20 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { getEnums, useExtractUiSchema, useSetDefault } from "../utils";
-export function StringField(props) {
+import { getEnums } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const StringField = (props) => {
     var _a;
     const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
-    const { name, uiSchema } = 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, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({}, 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: "" }, Object.assign({ 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", Object.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, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({}, Object.assign({ type,
-                    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

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

package/dist/fields/ToggleField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../utils";
-export function ToggleField(props) {
+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/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/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,20 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const simpleSchema = {
-    title: "TITLE",
-    properties: {
-        firstName: { type: "string", title: "First name" },
-        lastName: { type: "string", title: "Last name" },
-        age: { type: "number", title: "Age" },
-    },
-};
-export const simpleUiSchema = {
-    "ui:description": "Description text",
-    firstName: {
-        "ui:info": {
-            content: "A small info",
-        },
-    },
-};
 export const completeSchema = {
     title: "Inventory",
     type: "object",
@@ -305,94 +289,3 @@ export const completeUiSchema = {
         },
     },
 };
-export const generatedSchema = {
-    type: "object",
-    properties: {
-        object: {
-            type: "object",
-            additionalProperties: {},
-        },
-        value: {},
-        array: {
-            type: "array",
-            items: {},
-        },
-        property: {
-            type: "string",
-        },
-    },
-    required: ["object", "value", "property"],
-    additionalProperties: false,
-};
-export const requiredInputSchema = {
-    title: "TITLE",
-    required: ["lastName", "requiredNestedObject", "requiredArray"],
-    properties: {
-        firstName: { type: "string", title: "First name" },
-        lastName: { type: "string", title: "Last name" },
-        feeling: { type: "boolean", title: "Feeling happy today?" },
-        vibes: { type: "boolean", title: "Turn on the good vibes" },
-        arrayOfObject: {
-            type: "array",
-            title: "Array of objects",
-            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",
-            },
-        },
-    },
-};
-export const requiredInputUiSchema = {
-    feeling: {
-        "ui:field": "RadioField",
-        "ui:label": { true: "yes", false: "no" },
-    },
-    vibes: {
-        "ui:field": "ToggleField",
-    },
-};

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;

package/dist/sampleData/requiredInputSchema.js

@@ -0,0 +1,72 @@
+export const requiredInputSchema = {
+    title: "TITLE",
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        feeling: { type: "boolean", title: "Feeling happy today?" },
+        vibes: { type: "boolean", title: "Turn on the good vibes" },
+        arrayOfObject: {
+            type: "array",
+            title: "Array of objects",
+            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",
+            },
+        },
+    },
+};
+export const requiredInputUiSchema = {
+    feeling: {
+        "ui:field": "RadioField",
+        "ui:label": { true: "yes", false: "no" },
+    },
+    vibes: {
+        "ui:field": "ToggleField",
+    },
+};

package/dist/sampleData/simpleData.d.ts

@@ -0,0 +1,7 @@
+import type { Schema, UiSchema } from "../types";
+export type SimpleFormDataType = {
+    firstName: string;
+    lastName: string;
+};
+export declare const simpleSchema: Schema;
+export declare const simpleUiSchema: UiSchema;

package/dist/sampleData/simpleData.js

@@ -0,0 +1,16 @@
+export const simpleSchema = {
+    title: "TITLE",
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        age: { type: "number", title: "Age" },
+    },
+};
+export const simpleUiSchema = {
+    "ui:description": "Description text",
+    firstName: {
+        "ui:info": {
+            content: "A small info",
+        },
+    },
+};