@nolwenture/formik-jsonschema-form 0.1.0 → 0.1.2

package/src/_sampleData.js

@@ -0,0 +1,262 @@
+export var simpleSchema = {
+    title: "TITLE",
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+    },
+};
+export var simpleUiSchema = {
+    "ui:description": "Description text",
+};
+export var completeSchema = {
+    title: "Inventory",
+    type: "object",
+    required: ["string", "number", "boolean", "enum"],
+    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],
+        },
+        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: "number",
+            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" },
+            ],
+        },
+        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: "number",
+                enum: [1, 2, 3, 4],
+            },
+        },
+        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],
+                        },
+                    },
+                    null: {
+                        type: "null",
+                        title: "Array Null",
+                        description: "Array Null description",
+                    },
+                },
+            },
+        },
+    },
+};
+export var 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",
+    },
+    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",
+        },
+    },
+};
+export var generatedSchema = {
+    type: "object",
+    properties: {
+        object: {
+            type: "object",
+            additionalProperties: {},
+        },
+        value: {},
+        array: {
+            type: "array",
+            items: {},
+        },
+        property: {
+            type: "string",
+        },
+    },
+    required: ["object", "value", "property"],
+    additionalProperties: false,
+};

package/src/fields/AnyField.d.ts

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

package/src/fields/AnyField.js

@@ -0,0 +1,34 @@
+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 { useMemo } from "react";
+import { useState } from "react";
+import { useField } from "formik";
+import { SchemaField } from "./SchemaField";
+import { guessType } from "../utils";
+import { COMPONENT_TYPES } from "./types";
+export function AnyField(props) {
+    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
+    var value = useField(name)[0].value;
+    var _a = useState(value !== undefined ? guessType(value) : "string"), type = _a[0], setType = _a[1];
+    var enrichedSchema = useMemo(function () {
+        switch (type) {
+            case "object":
+                return __assign(__assign({}, (schema || {})), { type: type, additionalProperties: {} });
+            case "array":
+                return __assign(__assign({}, (schema || {})), { type: type, additionalItems: {} });
+            default:
+                return __assign(__assign({}, (schema || {})), { type: type });
+        }
+    }, [type, schema]);
+    return (_jsxs("div", { children: [_jsx("select", __assign({ value: type, onChange: function (event) { return setType(event.target.value); } }, { children: Object.keys(COMPONENT_TYPES).map(function (type) { return (_jsx("option", __assign({ value: type }, { children: type }), type)); }) })), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+}

package/src/fields/ArrayField.d.ts

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

package/src/fields/ArrayField.js

@@ -0,0 +1,119 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { FormRegistry } from "../Form";
+import { useField } from "formik";
+import { ArrayFieldButtonPurpose } from "../types";
+import { useExtractUiSchema } from "../utils";
+function appendArray(values) {
+    return values ? __spreadArray(__spreadArray([], values, true), [""], false) : [""];
+}
+function removeFromArray(values, index) {
+    return __spreadArray(__spreadArray([], values.slice(0, index), true), values.slice(index + 1), true);
+}
+function moveInArray(values, index, direction) {
+    if (direction === -1) {
+        return __spreadArray(__spreadArray(__spreadArray([], values.slice(0, index - 1), true), [
+            values[index],
+            values[index - 1]
+        ], false), values.slice(index + 1), true);
+    }
+    else {
+        return __spreadArray(__spreadArray(__spreadArray([], values.slice(0, index), true), [
+            values[index + 1],
+            values[index]
+        ], false), values.slice(index + 2), true);
+    }
+}
+export function ArrayField(props) {
+    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ArrayFieldTemplate = _a.templates.ArrayFieldTemplate, _b = _a.components, ArrayFieldItem = _b.ArrayFieldItem, ArrayFieldList = _b.ArrayFieldList, ArrayFieldItemButtons = _b.ArrayFieldItemButtons, ArrayFieldButton = _b.ArrayFieldButton, useItemsAsAdditionalItems = _a.useItemsAsAdditionalItems;
+    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
+    var _c = useField(name), value = _c[0].value, _ = _c[1], setValue = _c[2].setValue;
+    var _d = useMemo(function () {
+        var items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
+        if (!Array.isArray(items)) {
+            items = [items];
+        }
+        return useItemsAsAdditionalItems && !schema.additionalItems
+            ? {
+                items: [],
+                additionalItems: items.filter(function (item) { return typeof item !== "boolean"; })[0],
+            }
+            : {
+                items: items.filter(function (item) { return typeof item !== "boolean"; }),
+                additionalItems: typeof schema.additionalItems !== "boolean"
+                    ? schema.additionalItems
+                    : undefined,
+            };
+    }, [schema]), items = _d.items, additionalItems = _d.additionalItems;
+    //This whole mess would give backwards compatibility, but maybe we don't do it
+    // const {
+    //   items,
+    //   additionalItems,
+    // }: {
+    //   items: Schema[];
+    //   additionalItems: Schema | undefined;
+    // } = useMemo(
+    //   () =>
+    //     !schema.additionalItems
+    //       ? {
+    //           additionalItems:
+    //             typeof schema.items !== "boolean"
+    //               ? Array.isArray(schema.items)
+    //                 ? typeof schema.items[0] !== "boolean"
+    //                   ? schema.items[0]
+    //                   : undefined
+    //                 : typeof schema.items !== "boolean"
+    //                 ? schema.items
+    //                 : undefined
+    //               : undefined,
+    //           items: [],
+    //         }
+    //       : {
+    //           additionalItems:
+    //             typeof schema.additionalItems !== "boolean"
+    //               ? schema.additionalItems
+    //               : undefined,
+    //           items: schema.items
+    //             ? Array.isArray(schema.items)
+    //               ? (schema.items.filter(
+    //                   (item) => typeof item !== "boolean"
+    //                 ) as Schema[])
+    //               : typeof schema.items !== "boolean"
+    //               ? [schema.items]
+    //               : []
+    //             : [],
+    //         },
+    //   [schema]
+    // );
+    // Bacwards compatibility ends
+    var _e = useExtractUiSchema(uiSchema), inputProps = _e.props, disabled = _e.disabled;
+    return (_jsxs(ArrayFieldTemplate, __assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map(function (itemSchema, index) { return (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: "".concat(name, "[").concat(index, "]"), schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items) }, index) })); }), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map(function (_, index) { return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, __assign({}, __assign({ disabled: disabled }, inputProps), { name: "".concat(name, "[").concat(index + items.length, "]"), schema: additionalItems && typeof additionalItems !== "boolean"
+                                    ? additionalItems
+                                    : {}, uiSchema: __assign({ disabled: disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), index), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.REMOVE, onClick: function () {
+                                            return setValue(removeFromArray(value, index + items.length));
+                                        } }), value.length > 1 && index > 0 && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.MOVE_UP, onClick: function () {
+                                            return setValue(moveInArray(value, index + items.length, -1));
+                                        } })), value.length > 1 && index < value.length - 1 && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.MOVE_DOWN, onClick: function () {
+                                            return setValue(moveInArray(value, index + items.length, 1));
+                                        } }))] })] })); })] }), additionalItems && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.ADD, onClick: function () { return setValue(appendArray(value)); } }))] })));
+}

package/src/fields/BooleanField.d.ts

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

package/src/fields/BooleanField.js

@@ -0,0 +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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../utils";
+export function BooleanField(props) {
+    var _a = useContext(FormRegistry), FieldTemplate = _a.templates.FieldTemplate, FieldInput = _a.components.FieldInput;
+    useSetDefault(props);
+    var name = props.name, uiSchema = props.uiSchema;
+    var _b = useExtractUiSchema(uiSchema), label = _b.label, inputProps = _b.props;
+    return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(_Fragment, { children: [_jsx(FieldInput, __assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
+}

package/src/fields/DateField.d.ts

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

package/src/fields/DateField.js

@@ -0,0 +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 } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../utils";
+export function DateField(props) {
+    var _a = useContext(FormRegistry), FieldTemplate = _a.templates.FieldTemplate, FieldInput = _a.components.FieldInput;
+    useSetDefault(props);
+    var name = props.name, uiSchema = props.uiSchema;
+    var inputProps = useExtractUiSchema(uiSchema).props;
+    return (_jsx(FieldTemplate, __assign({}, props, { children: _jsx(FieldInput, __assign({}, inputProps, { name: name, type: "date" })) })));
+}

package/src/fields/NullField.d.ts

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

package/src/fields/NullField.js

@@ -0,0 +1,19 @@
+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 { FormRegistry } from "../Form";
+export function NullField(props) {
+    var FieldTemplate = useContext(FormRegistry).templates.FieldTemplate;
+    var name = props.name;
+    return _jsx(FieldTemplate, __assign({}, props));
+}

package/src/fields/NumberField.d.ts

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

package/src/fields/NumberField.js

@@ -0,0 +1,17 @@
+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 { StringField } from "./StringField";
+export function NumberField(props) {
+    var _a;
+    return (_jsx(StringField, __assign({}, props, { uiSchema: __assign(__assign({}, props.uiSchema), { "ui:props": __assign(__assign({}, (((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a["ui:props"]) || {})), { type: "number" }) }) })));
+}

package/src/fields/ObjectField.d.ts

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

package/src/fields/ObjectField.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from "formik";
+import { useContext, useMemo } from "react";
+import { FormRegistry } from "../Form";
+import { ObjectFieldButtonPurpose } from "../types";
+export function ObjectField(props) {
+    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ObjectFieldTemplate = _a.templates.ObjectFieldTemplate, _b = _a.components, ObjectFieldItem = _b.ObjectFieldItem, ObjectFieldList = _b.ObjectFieldList, ObjectFieldItemButtons = _b.ObjectFieldItemButtons, ObjectFieldButton = _b.ObjectFieldButton;
+    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
+    var _c = useField(name), value = _c[0].value, _ = _c[1], setValue = _c[2].setValue;
+    var properties = schema.properties, additionalProperties = schema.additionalProperties;
+    var propertyKeys = useMemo(function () { return Object.keys(properties || {}); }, [properties]);
+    var additionalValues = useMemo(function () {
+        return Object.fromEntries(Object.entries(value || {}).filter(function (_a) {
+            var key = _a[0], value = _a[1];
+            return !propertyKeys.includes(key);
+        }));
+    }, [value, propertyKeys]);
+    return (_jsxs(ObjectFieldTemplate, __assign({}, props, { children: [Object.entries(properties || {}).map(function (_a) {
+                var childName = _a[0], childSchema = _a[1];
+                return (_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
+            }), Object.entries(additionalValues || {}).map(function (_a) {
+                var childName = _a[0], childSchema = _a[1];
+                return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: _jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.REMOVE, onClick: function () {
+                                    var _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                                    setValue(newValue);
+                                } }) })] }));
+            }), additionalProperties && (_jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.ADD, onClick: function () {
+                    var _a;
+                    var key = prompt("Give key");
+                    if (key) {
+                        setValue(__assign(__assign({}, value), (_a = {}, _a[key] = undefined, _a)));
+                    }
+                } }))] })));
+}

package/src/fields/SchemaField.d.ts

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

package/src/fields/SchemaField.js

@@ -0,0 +1,39 @@
+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 { FormRegistry } from "../Form";
+import { COMPONENT_TYPES } from "./types";
+function getFieldComponent(schema, uiSchema, fields) {
+    var field = useExtractUiSchema(uiSchema).field;
+    if (typeof field === "function") {
+        return field;
+    }
+    if (typeof field === "string" && field in fields) {
+        return fields[field];
+    }
+    var schemaType = getSchemaType(schema);
+    if (Array.isArray(schemaType)) {
+        schemaType = schemaType[0];
+    }
+    var 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 = getFieldComponent(schema, uiSchema, fields);
+    return _jsx(FieldComponent, __assign({}, props));
+}

package/src/fields/StringField.d.ts

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