@nolwenture/formik-jsonschema-form 0.1.2 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Nolwenture Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,149 @@
+# formik-jsonschema-form
+
+## Installation
+
+With npm:
+
+```text
+npm install @nolwenture/formik-jsonschema-form
+```
+
+With yarn:
+
+```text
+yarn add @nolwenture/formik-jsonschema-form
+```
+
+## Usage
+
+### Basic usage
+
+Pass your schema to the `Form` component, which should be passed as a child to the `Formik` component, for example:
+
+```tsx
+import { Form } from "@nolwenture/formik-jsonschema-form";
+import { Formik } from "formik";
+
+const schema = {
+  title: "My form",
+  type: "object",
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+  },
+};
+
+const uiSchema = {
+  "ui:description": "Form description",
+  firstName: { "ui:description": "Field description" },
+};
+
+export function MyFormComponent() {
+  return (
+    <Formik
+      initialValues={{ firstName: "", lastName: "" }}
+      onSubmit={handleSubmit}
+    >
+      <Form schema={schema} uiSchema={uiSchema}></Form>
+    </Formik>
+  );
+}
+```
+
+### Using custom components
+
+Form components (such as wrappers) can be overriden with custom ones
+
+Here is an example of overriding `FieldWrapper` (wrapper used on all fields):
+
+```tsx
+function CustomFieldWrapper({ children }) {
+  return (
+    <div
+      style={{
+        backgroundColor: "lightgrey",
+        boxShadow: "1px 1px 5px gray",
+        margin: "10px",
+        padding: "10px",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+...
+
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form
+      schema={schema}
+      uiSchema={uiSchema}
+      components={{
+        FieldWrapper: CustomFieldWrapper,
+      }}
+    ></Form>
+  </Formik>
+);
+```
+
+Custom fields can be used in addition to all the default fields:
+
+```tsx
+import { Form, FormRegistry } from "@nolwenture/formik-jsonschema-form";
+import { useContext } from "react";
+
+const schema = {
+  title: "My form",
+  type: "object",
+  properties: {
+    firstField: { title: "First field" },
+  },
+};
+
+function MyCustomFieldComponent(props) {
+  const {
+    templates: { FieldTemplate },
+  } = useContext(FormRegistry);
+
+  return (
+    <FieldTemplate {...props}>
+      <p>My awesome field!</p>
+    </FieldTemplate>
+  );
+}
+
+const fields = { myField: MyCustomFieldComponent };
+
+// Specify the fields that should use your custom field component in uiSchema
+const uiSchema = {
+  firstField = { "ui:field": "myField" },
+};
+
+...
+
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form schema={schema} uiSchema={uiSchema} fields={fields}></Form>
+  </Formik>
+);
+```
+
+## Props
+
+`Form` component props:
+
+```tsx
+<Form
+  // Required
+  schema={schema} // Form schema
+  // Optional
+  uiSchema={uiSchema} // Form UI schema
+  className={"className"} // Form class name
+  fields={fields} // Additional custom field components
+  templates={templates} // Additional custom field templates
+  components={components} // Override form components (e.g. wrappers) with custom ones
+  formContext={formContext} // Form context
+  useItemsAsAdditionalItems={true} // Allow "items" to be used as "additionalItems" in array fields that are missing "additionalItems", false by default
+/>
+```

package/{src → dist}/Form.js

@@ -23,6 +23,7 @@ export var FormRegistry = React.createContext({
     definitions: {},
     formContext: {},
     useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
 });
 export function Form(props) {
     warnFromUnsupportedKeys("Form", props, [
@@ -37,7 +38,7 @@ export function Form(props) {
         "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 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, _g = props.hideUnmarkedAdditionalProperties, hideUnmarkedAdditionalProperties = _g === void 0 ? false : _g;
     var registry = {
         fields: __assign(__assign({}, defaultFields), fields),
         templates: __assign(__assign({}, defaultTemplates), templates),
@@ -45,8 +46,9 @@ export function Form(props) {
         definitions: {},
         formContext: formContext,
         useItemsAsAdditionalItems: useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties: hideUnmarkedAdditionalProperties,
     };
-    var _g = registry.components, FormEl = _g.Form, FormButton = _g.FormButton, FormButtonWrapper = _g.FormButtonWrapper;
+    var _h = registry.components, FormEl = _h.Form, FormButton = _h.FormButton, FormButtonWrapper = _h.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 → dist}/fields/ObjectField.js

@@ -26,7 +26,7 @@ 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 _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, hideUnmarkedAdditionalProperties = _a.hideUnmarkedAdditionalProperties;
     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;
@@ -40,13 +40,14 @@ export function ObjectField(props) {
     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 () {
+            }), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
+                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] }), _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);
+                                    } }) })] }, childName));
+                }), additionalProperties && (_jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.ADD, onClick: function () {
                     var _a;
                     var key = prompt("Give key");
                     if (key) {

package/dist/templates/ObjectFieldTemplate.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 { getDescription, getTitle, useExtractUiSchema } from "../utils";
+export function ObjectFieldTemplate(props) {
+    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper, FieldHelp = _a.FieldHelp;
+    var children = props.children, uiSchema = props.uiSchema;
+    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, wrapperProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help;
+    return (_jsxs(ObjectFieldWrapper, __assign({}, wrapperProps, { children: [title && _jsx(ObjectFieldTitle, __assign({}, titleProps, { children: title })), description && _jsx(FieldDescription, __assign({}, descriptionProps, { children: description })), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help }))] })));
+}

package/{src → dist}/types.d.ts

@@ -5,6 +5,8 @@ export type FormProps<T> = React.PropsWithChildren<{
     disabled?: boolean | undefined;
     /** If true, array field schemas missing 'additionalItems' will replace it with 'items'  */
     useItemsAsAdditionalItems?: boolean | undefined;
+    /** If true, properties in object fields' data that aren't in the schema will only be displayed if `additionalProperties` is enabled in the schema */
+    hideUnmarkedAdditionalProperties?: boolean;
     className?: string | undefined;
     /** Form schema */
     schema: Schema;
@@ -43,6 +45,7 @@ export type FormRegistryContextValue = {
     definitions: Record<string, any>;
     formContext: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
+    hideUnmarkedAdditionalProperties: boolean;
 };
 export interface FieldProps extends Pick<React.HTMLAttributes<HTMLElement>, Exclude<keyof React.HTMLAttributes<HTMLElement>, "onBlur">> {
     name: string;

package/package.json

@@ -1,94 +1,95 @@
 {
-    "name": "@nolwenture/formik-jsonschema-form",
-    "version": "0.1.2",
-    "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>"
+  "name": "@nolwenture/formik-jsonschema-form",
+  "version": "0.2.0",
+  "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>"
+  ],
+  "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"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "package.json", "LICENSE"],
+  "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"
     ],
-    "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"
-    ],
-    "main": "./dist/src/index.js",
-    "types": "./dist/src/index.d.ts",
-    "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"
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
         ],
-        "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"
-    }
+        "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/templates/ObjectFieldTemplate.js

@@ -1,11 +0,0 @@
-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] }));
-}