@nolwenture/formik-jsonschema-form 0.1.0 → 0.1.2

package/src/fields/StringField.js

@@ -0,0 +1,60 @@
+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;
+    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]);
+    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", { value: "" }), enums === null || enums === void 0 ? void 0 : enums.values.map(function (option, index) { return (_jsx("option", __assign({ 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 })) })));
+    }
+}

package/src/fields/index.js

@@ -0,0 +1,9 @@
+export * from "./ArrayField";
+export * from "./BooleanField";
+export * from "./DateField";
+export * from "./NullField";
+export * from "./NumberField";
+export * from "./ObjectField";
+export * from "./SchemaField";
+export * from "./StringField";
+export * from "./AnyField";

package/src/fields/types.d.ts

@@ -0,0 +1,10 @@
+export declare const COMPONENT_TYPES: {
+    array: string;
+    boolean: string;
+    integer: string;
+    number: string;
+    object: string;
+    string: string;
+    null: string;
+    any: string;
+};

package/src/fields/types.js

@@ -0,0 +1,10 @@
+export var COMPONENT_TYPES = {
+    array: "ArrayField",
+    boolean: "BooleanField",
+    integer: "NumberField",
+    number: "NumberField",
+    object: "ObjectField",
+    string: "StringField",
+    null: "NullField",
+    any: "AnyField",
+};

package/src/formEditorSchemas.d.ts

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

package/src/formEditorSchemas.js

@@ -0,0 +1,36 @@
+var field = {
+    type: "object",
+    properties: {
+        type: {
+            type: "string",
+            title: "Field type",
+            oneOf: [
+                { const: "string", title: "String" },
+                { const: "number", title: "Number" },
+                { const: "array", title: "Array" },
+                { const: "object", title: "Object" },
+            ],
+        },
+        title: {
+            type: "string",
+            title: "Field title",
+        },
+    },
+};
+export var schema = {
+    type: "object",
+    properties: {
+        "schema.type": {
+            type: "string",
+            default: "object",
+        },
+        "schema.title": {
+            type: "string",
+            title: "Form title",
+        },
+    },
+    additionalProperties: field,
+};
+export var uiSchema = {
+    "schema.type": { props: { type: "hidden" } },
+};

package/src/index.js

@@ -0,0 +1,5 @@
+export * from "./Form";
+export * as styledComponents from "./styledComponents";
+export * as fields from "./fields";
+export * as templates from "./templates";
+export * from "./FormEditor";

package/src/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/styledComponents.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import * as formik from "formik";
+import { ArrayFieldButtonProps, ObjectFieldButtonProps } from "./types";
+export declare const Form: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "noValidate" | "target" | "key"> & import("react").RefAttributes<HTMLFormElement>>, any, {}, never>;
+export declare const FormButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ObjectFieldWrapper: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
+export declare const ObjectFieldTitle: import("styled-components").StyledComponent<"legend", any, {}, never>;
+export declare const ObjectFieldList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const ObjectFieldItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const ObjectFieldItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ObjectFieldButtonEl: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function ObjectFieldButton({ purpose, onClick, }: ObjectFieldButtonProps): JSX.Element;
+export declare const ArrayFieldWrapper: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
+export declare const ArrayFieldTitle: import("styled-components").StyledComponent<"legend", any, {}, never>;
+export declare const ArrayFieldList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const ArrayFieldItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const ArrayFieldItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ArrayFieldButtonEl: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function ArrayFieldButton({ purpose, onClick }: ArrayFieldButtonProps): JSX.Element;
+export declare const FieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FieldTitle: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const FieldDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const FieldHelp: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<import("react").ComponentType<formik.ErrorMessageProps>, any, {}, never>;
+export declare const FieldInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;

package/src/styledComponents.js

@@ -0,0 +1,89 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 } from "react/jsx-runtime";
+import styled from "styled-components";
+import * as formik from "formik";
+import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose, } from "./types";
+export var Form = styled(formik.Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var FormButtonWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var FormButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var ObjectFieldWrapper = styled.fieldset(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var ObjectFieldTitle = styled.legend(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+export var ObjectFieldList = styled.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  list-style-type: none;\n  padding: 0;\n"], ["\n  list-style-type: none;\n  padding: 0;\n"])));
+export var ObjectFieldItem = styled.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var ObjectFieldItemButtons = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin: 0.5rem;\n"], ["\n  display: flex;\n  margin: 0.5rem;\n"])));
+export var ObjectFieldButtonEl = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  display: block;\n  line-height: 1em;\n  height: 1em;\n  width: 1em;\n  text-align: center;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  display: block;\n  line-height: 1em;\n  height: 1em;\n  width: 1em;\n  text-align: center;\n"])));
+export function ObjectFieldButton(_a) {
+    var purpose = _a.purpose, onClick = _a.onClick;
+    switch (purpose) {
+        case ObjectFieldButtonPurpose.ADD:
+            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "+" }));
+        case ObjectFieldButtonPurpose.REMOVE:
+            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "-" }));
+        case ObjectFieldButtonPurpose.MOVE_UP:
+            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2191" }));
+        case ObjectFieldButtonPurpose.MOVE_DOWN:
+            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2193" }));
+        default:
+            return (_jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "UNKNOWN PURPOSE" })));
+    }
+}
+export var ArrayFieldWrapper = ObjectFieldWrapper;
+export var ArrayFieldTitle = ObjectFieldTitle;
+export var ArrayFieldList = ObjectFieldList;
+export var ArrayFieldItem = ObjectFieldItem;
+export var ArrayFieldItemButtons = ObjectFieldItemButtons;
+export var ArrayFieldButtonEl = ObjectFieldButtonEl;
+export function ArrayFieldButton(_a) {
+    var purpose = _a.purpose, onClick = _a.onClick;
+    switch (purpose) {
+        case ArrayFieldButtonPurpose.ADD:
+            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "+" }));
+        case ArrayFieldButtonPurpose.REMOVE:
+            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "-" }));
+        case ArrayFieldButtonPurpose.MOVE_UP:
+            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2191" }));
+        case ArrayFieldButtonPurpose.MOVE_DOWN:
+            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2193" }));
+        default:
+            return (_jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "UNKNOWN PURPOSE" })));
+    }
+}
+export var FieldWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
+export var FieldTitle = styled.label(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
+export var FieldDescription = styled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
+export var FieldHelp = styled.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
+export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
+/*
+ * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
+ *
+ */
+export var FieldInput = styled(function (_a) {
+    var formikAs = _a.formikAs, props = __rest(_a, ["formikAs"]);
+    return _jsx(formik.Field, __assign({}, props, { as: formikAs }));
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/src/templates/ArrayFieldTemplate.d.ts

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

package/src/templates/ArrayFieldTemplate.js

@@ -0,0 +1,27 @@
+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 } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, getDescription, getTitle } from "../utils";
+export function ArrayFieldTemplate(props) {
+    var _a = useContext(FormRegistry).components, ArrayFieldWrapper = _a.ArrayFieldWrapper, ArrayFieldTitle = _a.ArrayFieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp;
+    var name = props.name, uiSchema = props.uiSchema, children = props.children;
+    var title = getTitle(props);
+    var description = getDescription(props);
+    var _b = useExtractUiSchema(uiSchema), help = _b.help, 
+    //TODO: This is not right
+    _c = _b.props, 
+    //TODO: This is not right
+    _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
+    return (_jsxs(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+}

package/src/templates/FieldTemplate.d.ts

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

package/src/templates/FieldTemplate.js

@@ -0,0 +1,27 @@
+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 } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, getDescription, getTitle } from "../utils";
+export function FieldTemplate(props) {
+    var _a = useContext(FormRegistry).components, FieldWrapper = _a.FieldWrapper, FieldTitle = _a.FieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp;
+    var name = props.name, uiSchema = props.uiSchema, children = props.children;
+    var title = getTitle(props);
+    var description = getDescription(props);
+    var _b = useExtractUiSchema(uiSchema), help = _b.help, 
+    //TODO: This is not right
+    _c = _b.props, 
+    //TODO: This is not right
+    _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
+    return (_jsxs(FieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(FieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+}

package/src/templates/ObjectFieldTemplate.d.ts

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

package/src/templates/ObjectFieldTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+import { getDescription, getTitle } from "../utils";
+export function ObjectFieldTemplate(props) {
+    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper;
+    var children = props.children;
+    var title = getTitle(props);
+    var description = getDescription(props);
+    return (_jsxs(ObjectFieldWrapper, { children: [title && _jsx(ObjectFieldTitle, { children: title }), description && _jsx(FieldDescription, { children: description }), children] }));
+}

package/src/templates/index.js

@@ -0,0 +1,3 @@
+export * from "./ArrayFieldTemplate";
+export * from "./FieldTemplate";
+export * from "./ObjectFieldTemplate";

package/src/types.d.ts

@@ -0,0 +1,168 @@
+import * as React from "react";
+import { JSONSchema7 } from "json-schema";
+export type FormProps<T> = React.PropsWithChildren<{
+    /** If true, disabled prop is passed down to each field on the form */
+    disabled?: boolean | undefined;
+    /** If true, array field schemas missing 'additionalItems' will replace it with 'items'  */
+    useItemsAsAdditionalItems?: boolean | undefined;
+    className?: string | undefined;
+    /** Form schema */
+    schema: Schema;
+    /** Form uiSchema */
+    uiSchema?: UiSchema | undefined;
+    /** Data that is passed down to all fields. Used for implementing context aware fields */
+    formContext?: Record<string, any>;
+    /** Dictionary of registered fields */
+    fields?: {
+        [name: string]: Field;
+    } | undefined;
+    templates?: Partial<TemplatesType>;
+    components?: Partial<ComponentsType>;
+    /**
+     * If set to true, turns off HTML5 validation
+     * @default false
+     */
+    noHtml5Validate?: boolean | undefined;
+}>;
+export type Schema = JSONSchema7;
+export type UiSchema = {
+    "ui:field"?: Field | string;
+    "ui:options"?: {
+        [key: string]: boolean | number | string | object | any[] | null;
+    };
+    "ui:props"?: {
+        [key: string]: any;
+    };
+    "ui:help"?: React.ReactNode | React.ReactNode[];
+    [name: string]: any;
+};
+export type FormRegistryContextValue = {
+    fields: Record<string, Field>;
+    templates: TemplatesType;
+    components: ComponentsType;
+    definitions: Record<string, any>;
+    formContext: Record<string, any>;
+    useItemsAsAdditionalItems: boolean;
+};
+export interface FieldProps extends Pick<React.HTMLAttributes<HTMLElement>, Exclude<keyof React.HTMLAttributes<HTMLElement>, "onBlur">> {
+    name: string;
+    schema: Schema;
+    uiSchema: UiSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    [prop: string]: any;
+}
+export type Field = React.FunctionComponent<FieldProps>;
+/*** TEMPLATES ***/
+export type FieldTemplateProps = React.PropsWithChildren<{
+    name: string;
+    schema: Schema;
+    uiSchema?: UiSchema;
+    hidden?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+}>;
+export type ArrayFieldTemplateProps = React.PropsWithChildren<{
+    name: string;
+    schema: Schema;
+    uiSchema?: UiSchema;
+    hidden?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+}>;
+export type ObjectFieldTemplateProps = {
+    schema: Schema;
+    uiSchema?: UiSchema;
+    required?: boolean;
+    children: React.ReactNode;
+};
+export type TemplatesType = {
+    FieldTemplate: React.FunctionComponent<FieldTemplateProps>;
+    ObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
+    ArrayFieldTemplate: React.FunctionComponent<ArrayFieldTemplateProps>;
+};
+/*** COMPONENTS ***/
+export type ComponentsType = {
+    Form: React.FunctionComponent<any>;
+    FormButtonWrapper: React.FunctionComponent<any>;
+    FormButton: React.FunctionComponent<any>;
+    ObjectFieldWrapper: React.FunctionComponent<any>;
+    ObjectFieldTitle: React.FunctionComponent<any>;
+    ObjectFieldItem: React.FunctionComponent<any>;
+    ObjectFieldItemButtons: React.FunctionComponent<any>;
+    ObjectFieldList: React.FunctionComponent<any>;
+    ObjectFieldButton: React.FunctionComponent<ObjectFieldButtonProps>;
+    ArrayFieldWrapper: React.FunctionComponent<any>;
+    ArrayFieldTitle: React.FunctionComponent<any>;
+    ArrayFieldItem: React.FunctionComponent<any>;
+    ArrayFieldItemButtons: React.FunctionComponent<any>;
+    ArrayFieldList: React.FunctionComponent<any>;
+    ArrayFieldButton: React.FunctionComponent<ArrayFieldButtonProps>;
+    FieldWrapper: React.FunctionComponent<any>;
+    FieldTitle: React.FunctionComponent<any>;
+    FieldDescription: React.FunctionComponent<any>;
+    FieldHelp: React.FunctionComponent<any>;
+    ErrorMessage: React.FunctionComponent<any>;
+    FieldInput: React.FunctionComponent<any>;
+};
+export declare enum ObjectFieldButtonPurpose {
+    ADD = 0,
+    REMOVE = 1,
+    MOVE_UP = 2,
+    MOVE_DOWN = 3
+}
+export type ObjectFieldButtonProps = {
+    purpose: ObjectFieldButtonPurpose;
+    onClick: () => void;
+};
+export declare enum ArrayFieldButtonPurpose {
+    ADD = 0,
+    REMOVE = 1,
+    MOVE_UP = 2,
+    MOVE_DOWN = 3
+}
+export type ArrayFieldButtonProps = {
+    purpose: ArrayFieldButtonPurpose;
+    onClick: () => void;
+};
+/*** ***/
+export type AjvError = {
+    message: string;
+    name: string;
+    params: any;
+    property: string;
+    stack: string;
+};
+export type ErrorListProps = {
+    errorSchema: FormValidation;
+    errors: AjvError[];
+    schema: Schema;
+    uiSchema: UiSchema;
+};
+export type IChangeEvent<T = any> = {
+    edit: boolean;
+    formData: T;
+    errors: AjvError[];
+    errorSchema: FormValidation;
+    schema: Schema;
+    uiSchema: UiSchema;
+    status?: string | undefined;
+};
+export type ISubmitEvent<T> = IChangeEvent<T>;
+export type FieldError = string;
+type FieldValidation = {
+    __errors: FieldError[];
+    addError: (message: string) => void;
+};
+type FormValidation = FieldValidation & {
+    [fieldName: string]: FieldValidation;
+};
+export type AddButtonProps = {
+    className: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    disabled: boolean;
+};
+export {};

package/src/types.js

@@ -0,0 +1,14 @@
+export var ObjectFieldButtonPurpose;
+(function (ObjectFieldButtonPurpose) {
+    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["ADD"] = 0] = "ADD";
+    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["REMOVE"] = 1] = "REMOVE";
+    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
+    ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
+})(ObjectFieldButtonPurpose || (ObjectFieldButtonPurpose = {}));
+export var ArrayFieldButtonPurpose;
+(function (ArrayFieldButtonPurpose) {
+    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["ADD"] = 0] = "ADD";
+    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["REMOVE"] = 1] = "REMOVE";
+    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
+    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
+})(ArrayFieldButtonPurpose || (ArrayFieldButtonPurpose = {}));

package/src/utils.d.ts

@@ -0,0 +1,22 @@
+import { FieldProps, Schema, UiSchema } from "./types";
+export declare function getTitle({ title, uiSchema, schema, name, }: {
+    title?: string;
+    uiSchema?: UiSchema;
+    schema?: Schema;
+    name?: string;
+}): any;
+export declare function getDescription({ description, uiSchema, schema, }: {
+    description?: string;
+    uiSchema?: UiSchema;
+    schema?: Schema;
+}): any;
+export declare function useSetDefault(props: FieldProps): void;
+export declare function useExtractUiSchema(props?: UiSchema | undefined): {
+    [name: string]: any;
+    field?: UiSchema["ui:field"];
+    props?: UiSchema["ui:props"];
+    help?: UiSchema["ui:help"];
+};
+export declare const guessType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
+export declare function getSchemaType(schema: Schema): import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;
+export declare function warnFromUnsupportedKeys(componentName: string, data: Record<string, any>, supportedKeys: string[]): void;