Merge pull request #402 from data-driven-forms/v2

V2 Release

Author: Hyperkid123

.circleci/config.yml

@@ -20,6 +20,9 @@ jobs:
       - run:
           name: test
           command: yarn test:ci
+      - run:
+          name: lint
+          command: yarn lint
       - codecov/upload:
           file: coverage/*.json
           token: aa1b6b4d-79a1-49f6-bcb2-d6069134a772

.eslintignore

@@ -0,0 +1,8 @@
+/**/node_modules
+/**/dist
+/**/public
+/**/coverage
+/**/vendor.js
+/**/*.config.js
+/**/doc-components/
+/**/examples-texts/

packages/common/.eslintrc renamed to .eslintrc.json

@@ -11,7 +11,7 @@
   },
   "settings": {
     "react": {
-      "version": 16.6
+      "version": "16.6"
     }
   },
   "globals": {
@@ -21,7 +21,8 @@
     "it": true,
     "arguments": true
   },
-  "extends": ["react-app", "prettier", "eslint:recommended", "plugin:react/recommended"],
+  "plugins": ["prettier"],
+  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier/react"],
   "env": {
     "es6": true,
     "browser": true,
@@ -31,10 +32,6 @@
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/display-name": "off",
-    "array-bracket-spacing": ["error", "always", {
-      "objectsInArrays": false
-    }],
-    "comma-dangle": [1, "always-multiline"],
     "comma-spacing": ["error", {
       "after": true
     }],
@@ -43,23 +40,9 @@
     "curly": ["error", "all"],
     "eol-last": "error",
     "eqeqeq": "error",
-    "indent": ["error", 2, {
-      "SwitchCase": 1,
-      "MemberExpression": 0,
-      "ImportDeclaration": 1,
-      "ObjectExpression": 1
-    }],
-    "react/jsx-curly-spacing": ["error", "always", {
-      "children": true,
-      "allowMultiline": false,
-      "spacing": {
-        "objectLiterals": "never"
-      }
-    }],
     "key-spacing": "error",
     "keyword-spacing": "error",
     "linebreak-style": ["warn", "unix"],
-    "max-len": ["error", 150],
     "new-cap": "error",
     "no-bitwise": "error",
     "no-caller": "error",
@@ -76,10 +59,6 @@
     "no-var": "error",
     "no-with": "error",
     "object-shorthand": "error",
-    "object-curly-spacing": ["error", "always", {
-      "objectsInObjects": false,
-      "arraysInObjects": false
-    }],
     "one-var": ["error", "never"],
     "padding-line-between-statements": ["error", {
       "blankLine": "always",
@@ -95,6 +74,16 @@
     "space-infix-ops": "error",
     "wrap-iife": "error",
     "yoda": ["error", "never"],
-    "jsx-a11y/href-no-hash": "off"
+    "jsx-a11y/href-no-hash": "off",
+    "react/jsx-curly-spacing": "off",
+    "no-unused-vars": "error",
+    "react/no-unused-prop-types": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react/prop-types": "error",
+    "react/no-unescaped-entities": "error",
+    "no-prototype-builtins": "error",
+    "no-mixed-operators": "error",
+    "no-unused-expressions": "error",
+    "no-sequences": "error"
   }
 }

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "printWidth": 150,
+  "arrowParens": "always",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true
+}

README.md

@@ -102,7 +102,7 @@ For using Data Driven Forms in your component you need the renderer and a compon
 ```jsx
 import React from 'react';
 import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
-import { formFieldsMapper, layoutMapper } from '@data-driven-forms/pf4-component-mapper';
+import { componentMapper, layoutMapper } from '@data-driven-forms/pf4-component-mapper';
 
 const schema = {
   fields: [{
@@ -115,7 +115,7 @@ const schema = {
 const Form = () => (
   <FormRenderer
     schema={schema}
-    formFieldsMapper={formFieldsMapper}
+    componentMapper={componentMapper}
     layoutMapper={layoutMapper}
     onSubmit={console.log}
   />

__mocks__/file-mock.js

@@ -1,3 +1,3 @@
 // mocks css and scss files
 
-module.exports = 'test-file-stub';
+module.exports = 'test-file-stub';

__mocks__/mock-field-provider.js

@@ -3,22 +3,21 @@ import { createElement } from 'react';
 const MockFieldProvider = ({ input, render, meta, component, children, ...rest }) => {
   const fieldInput = {
     onChange: jest.fn(),
-    ...input,
+    ...input
   };
   const fieldMeta = {
-    ...meta,
+    ...meta
   };
 
   if (typeof children === 'function') {
     return children({ ...rest, input: fieldInput, meta: fieldMeta });
   }
 
-  if (typeof component === 'object') {
+  if (typeof component === 'object' || typeof component === 'function') {
     return createElement(component, { ...rest, input: fieldInput, meta: fieldMeta, children });
   }
 
   return render({ ...rest, input: fieldInput, meta: fieldMeta, children });
-
 };
 
 export default MockFieldProvider;

__mocks__/mock-form-template.js

@@ -0,0 +1,45 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from 'react';
+import { useFormApi, FormSpy } from '@data-driven-forms/react-form-renderer';
+import { useFormApi as useFormApiInternal, FormSpy as FormSpyInternal } from '../packages/react-form-renderer/src';
+const path = require('path');
+
+const FormTemplate = ({ schema: { title, label, description }, formFields }) => {
+  // When testing inside the renderer package, it cannot import things from itself!
+  const isInternal = path.dirname(module.parent.filename).includes('/react-form-renderer/');
+  const formOptions = isInternal ? useFormApiInternal() : useFormApi();
+  const FormSpyFinal = isInternal ? FormSpyInternal : FormSpy;
+
+  return (
+    <form onSubmit={formOptions.handleSubmit}>
+      {(title || label) && <h1>{title || label}</h1>}
+      {description && <h2>{description}</h2>}
+      {formFields}
+      <FormSpyFinal>
+        {({ submitting, pristine, validating, form: { reset }, values }) => (
+          <React.Fragment>
+            <button type="submit" disabled={submitting || validating || formOptions.getState().invalid}>
+              Submit
+            </button>
+            <button
+              type="button"
+              disabled={pristine}
+              onClick={() => {
+                formOptions.onReset && formOptions.onReset();
+                reset();
+              }}
+            >
+              Reset
+            </button>
+            <button type="button" disabled={pristine} onClick={() => formOptions.onCancel(values)}>
+              Cancel
+            </button>
+          </React.Fragment>
+        )}
+      </FormSpyFinal>
+    </form>
+  );
+};
+
+export default FormTemplate;

__mocks__/mock-layout-mapper.js

@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { RendererContext } from '@data-driven-forms/react-form-renderer';
+import Form from '@data-driven-forms/react-form-renderer/dist/cjs/form';
+
+const RenderWithProvider = ({ value = { formOptions: {} }, children, onSubmit = () => {} }) => {
+  return (
+    <Form onSubmit={onSubmit}>
+      {() => (
+        <RendererContext.Provider
+          value={{
+            ...value
+          }}
+        >
+          {children}
+        </RendererContext.Provider>
+      )}
+    </Form>
+  );
+};
+
+export default RenderWithProvider;