@nolwenture/formik-jsonschema-form 0.1.0 → 0.1.1

package/package.json

@@ -1,90 +1,92 @@
 {
-  "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.1.0",
-  "description": "Formik form generation from json schema",
-  "author": "Antti Vikman <antti.vikman@nolwenture.com>",
-  "contributors": [
-    "Antti Vikman <antti.vikman@nolwenture.com>"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nolwenture/formik-jsonschema-form.git"
-  },
-  "bugs": {
-    "url": "https://github.com/nolwenture/formik-jsonschema-form/issues"
-  },
-  "homepage": "https://github.com/nolwenture/formik-jsonschema-form#readme",
-  "keywords": [
-    "formik",
-    "jsonschema"
-  ],
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.45",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.25",
-    "formik": "^2.2.9",
-    "json-schema": "^0.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "styled-components": "^5.3.5",
-    "typescript": "^4.7.4",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
+    "name": "@nolwenture/formik-jsonschema-form",
+    "version": "0.1.1",
+    "description": "Formik form generation from json schema",
+    "author": "Antti Vikman <antti.vikman@nolwenture.com>",
+    "contributors": [
+        "Antti Vikman <antti.vikman@nolwenture.com>",
+        "Niko Lintunen <niko.lintunen@nolwenture.com>"
     ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/nolwenture/formik-jsonschema-form.git"
+    },
+    "bugs": {
+        "url": "https://github.com/nolwenture/formik-jsonschema-form/issues"
+    },
+    "homepage": "https://github.com/nolwenture/formik-jsonschema-form#readme",
+    "keywords": [
+        "formik",
+        "jsonschema"
     ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/node-logger": "^6.5.9",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "prop-types": "^15.8.1",
-    "webpack": "^5.73.0"
-  }
+    "dependencies": {
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^27.5.2",
+        "@types/node": "^16.11.45",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@types/styled-components": "^5.1.25",
+        "formik": "^2.2.9",
+        "json-schema": "^0.4.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-scripts": "5.0.1",
+        "styled-components": "^5.3.5",
+        "typescript": "^4.7.4",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "tsc --build",
+        "clean": "tsc --build --clean",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "storybook": "start-storybook -p 6006",
+        "build-storybook": "build-storybook"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ],
+        "overrides": [
+            {
+                "files": [
+                    "**/*.stories.*"
+                ],
+                "rules": {
+                    "import/no-anonymous-default-export": "off"
+                }
+            }
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@storybook/addon-essentials": "^6.5.15",
+        "@storybook/addon-interactions": "^6.5.15",
+        "@storybook/addon-links": "^6.5.15",
+        "@storybook/builder-webpack5": "^6.5.15",
+        "@storybook/manager-webpack5": "^6.5.15",
+        "@storybook/node-logger": "^6.5.15",
+        "@storybook/preset-create-react-app": "^4.1.2",
+        "@storybook/react": "^6.5.15",
+        "@storybook/testing-library": "^0.0.13",
+        "babel-plugin-named-exports-order": "^0.0.2",
+        "prop-types": "^15.8.1",
+        "webpack": "^5.73.0"
+    }
 }

package/src/Form.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormProps, FormRegistryContextValue } from "./types";
+export declare const FormRegistry: React.Context<FormRegistryContextValue>;
+export declare function Form<T>(props: FormProps<T>): JSX.Element;

package/src/Form.js

@@ -0,0 +1,52 @@
+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 React from "react";
+import { useFormikContext } from "formik";
+import * as defaultComponents from "./styledComponents";
+import { warnFromUnsupportedKeys } from "./utils";
+import * as defaultFields from "./fields";
+import * as defaultTemplates from "./templates";
+export var FormRegistry = React.createContext({
+    fields: defaultFields,
+    templates: defaultTemplates,
+    components: defaultComponents,
+    definitions: {},
+    formContext: {},
+    useItemsAsAdditionalItems: false,
+});
+export function Form(props) {
+    warnFromUnsupportedKeys("Form", props, [
+        "schema",
+        "onSubmit",
+        "uiSchema",
+        "className",
+        "formData",
+        "className",
+        "children",
+        "fields",
+        "formContext",
+    ]);
+    var isSubmitting = useFormikContext().isSubmitting;
+    var schema = props.schema, _a = props.uiSchema, uiSchema = _a === void 0 ? {} : _a, className = props.className, children = props.children, _b = props.fields, fields = _b === void 0 ? {} : _b, _c = props.templates, templates = _c === void 0 ? {} : _c, _d = props.components, components = _d === void 0 ? {} : _d, _e = props.formContext, formContext = _e === void 0 ? {} : _e, _f = props.useItemsAsAdditionalItems, useItemsAsAdditionalItems = _f === void 0 ? false : _f;
+    var registry = {
+        fields: __assign(__assign({}, defaultFields), fields),
+        templates: __assign(__assign({}, defaultTemplates), templates),
+        components: __assign(__assign({}, defaultComponents), components),
+        definitions: {},
+        formContext: formContext,
+        useItemsAsAdditionalItems: useItemsAsAdditionalItems,
+    };
+    var _g = registry.components, FormEl = _g.Form, FormButton = _g.FormButton, FormButtonWrapper = _g.FormButtonWrapper;
+    var _SchemaField = registry.fields.SchemaField;
+    return (_jsx(FormRegistry.Provider, __assign({ value: registry }, { children: _jsxs(FormEl, __assign({ className: className }, { children: [_jsx(_SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, __assign({ type: "submit", disabled: isSubmitting }, { children: "Send" })) }))] })) })));
+}

package/src/Form.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Form } from "./";
+declare const _default: ComponentMeta<typeof Form>;
+export default _default;
+export declare const Simple: ComponentStory<typeof Form>;
+export declare const WithUiSchema: ComponentStory<typeof Form>;
+export declare const CompleteSchema: ComponentStory<typeof Form>;
+export declare const StrictlyTyped: () => JSX.Element;
+export declare const StylesCustomized: () => JSX.Element;
+export declare const WithGeneratedSchema: ComponentStory<typeof Form>;

package/src/Form.stories.js

@@ -0,0 +1,135 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from "@storybook/addon-actions";
+import styled from "styled-components";
+import { Formik, useFormikContext } from "formik";
+import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, } from "./_sampleData";
+import { Form, styledComponents } from "./";
+export default {
+    title: "Form",
+    component: Form,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        schema: { control: { type: "object" } },
+        uiSchema: { control: { type: "object" } },
+    },
+};
+var Template = function (args) { return (_jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            action("onSubmit(_, formHelper)")(formikHelpers);
+            action("onSubmit(values)")(values);
+            formikHelpers.setSubmitting(false);
+            return [2 /*return*/];
+        });
+    }); } }, { children: _jsx(Form, __assign({}, args)) }))); };
+export var Simple = Template.bind({});
+Simple.args = {
+    schema: simpleSchema,
+};
+export var WithUiSchema = Template.bind({});
+WithUiSchema.args = {
+    schema: simpleSchema,
+    uiSchema: simpleUiSchema,
+};
+export var CompleteSchema = Template.bind({});
+CompleteSchema.args = {
+    schema: completeSchema,
+    uiSchema: completeUiSchema,
+};
+export var StrictlyTyped = function () {
+    return (_jsx(Formik, __assign({ initialValues: { firstName: "", lastName: "" }, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                action("onSubmit(_, formHelper)")(formikHelpers);
+                action("onSubmit(values)")(values);
+                formikHelpers.setSubmitting(false);
+                return [2 /*return*/];
+            });
+        }); } }, { children: _jsx(Form, { schema: simpleSchema }) })));
+};
+/*** CUSTOMIZATION  ***/
+var CustomizedForm = styled(Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    color: red;\n  }\n"], ["\n  ", " {\n    color: red;\n  }\n"])), styledComponents.FieldTitle);
+var CustomizedFieldWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: 2px solid\n    ", ";\n"], ["\n  outline: 2px solid\n    ", ";\n"])), function (props) { return (props.title === "ABC" ? "blue" : "transparent"); });
+var CustomizedErrorMessage = function (props) {
+    var name = props.name;
+    var errors = useFormikContext().errors;
+    var error = errors[name];
+    return error ? _jsx("p", { children: error }) : _jsx("p", { children: "Hurray! No errors" });
+};
+export var StylesCustomized = function () {
+    return (_jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                action("onSubmit(_, formHelper)")(formikHelpers);
+                action("onSubmit(values)")(values);
+                formikHelpers.setSubmitting(false);
+                return [2 /*return*/];
+            });
+        }); } }, { children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
+                firstName: {
+                    props: {
+                        wrapper: {
+                            title: "ABC",
+                        },
+                    },
+                },
+            }, components: {
+                FieldWrapper: CustomizedFieldWrapper,
+                ErrorMessage: CustomizedErrorMessage,
+            } }) })));
+};
+export var WithGeneratedSchema = Template.bind({});
+WithGeneratedSchema.args = {
+    schema: generatedSchema,
+    uiSchema: {},
+    useItemsAsAdditionalItems: true,
+};
+var templateObject_1, templateObject_2;

package/src/Form.test.d.ts

@@ -0,0 +1 @@
+export {};

package/src/Form.test.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Form } from "./Form";
+import { simpleSchema } from "./_sampleData";
+test("renders title", function () {
+    render(_jsx(Form, { schema: simpleSchema }));
+    var titleElement = screen.getByText(/TITLE/i);
+    expect(titleElement).toBeInTheDocument();
+});

package/src/FormEditor.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Schema, UiSchema } from "./types";
+export type FormEditorProps = {};
+export type FormEditorValues = {
+    schema: Schema;
+    uiSchema: UiSchema;
+};
+export declare function FormEditor(props: FormEditorProps): JSX.Element;

package/src/FormEditor.js

@@ -0,0 +1,74 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Formik } from "formik";
+import { useEffect, useState } from "react";
+import { Form } from "./Form";
+import * as formEditorSchemas from "./formEditorSchemas";
+export function FormEditor(props) {
+    var _this = this;
+    var _a = useState({
+        schema: {},
+        uiSchema: {},
+    }), editorGeneratedSchemas = _a[0], setEditorGeneratedSchemas = _a[1];
+    useEffect(function () { return console.log(editorGeneratedSchemas); }, [editorGeneratedSchemas]);
+    return (_jsxs("div", __assign({ style: { display: "flex", justifyContent: "space-between" } }, { children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, __assign({ initialValues: { schema: {}, uiSchema: {} }, onSubmit: function (values, formikHelpers) { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                setEditorGeneratedSchemas(values);
+                                formikHelpers.setSubmitting(false);
+                                return [2 /*return*/];
+                            });
+                        }); } }, { children: _jsx(Form, __assign({}, formEditorSchemas)) }))] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                // action("onSubmit(_, formHelper)")(formikHelpers);
+                                // action("onSubmit(values)")(values);
+                                formikHelpers.setSubmitting(false);
+                                return [2 /*return*/];
+                            });
+                        }); } }, { children: _jsx(Form, __assign({}, editorGeneratedSchemas)) }))] })] })));
+}

package/src/FormEditor.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { FormEditor } from "./FormEditor";
+declare const _default: ComponentMeta<typeof FormEditor>;
+export default _default;
+export declare const Default: ComponentStory<typeof FormEditor>;

package/src/FormEditor.stories.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 { FormEditor } from "./FormEditor";
+export default {
+    title: "FormEditor",
+    component: FormEditor,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {},
+};
+var Template = function (args) { return (_jsx(FormEditor, __assign({}, args))); };
+export var Default = Template.bind({});
+Default.args = {};

package/src/_sampleData.d.ts

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