Merge pull request #463 from data-driven-forms/scope-docs

Migrate docs to MUI and update component examples.

Author: rvsia

packages/mui-component-mapper/src/files/form-template.js

@@ -8,11 +8,22 @@ import FormTemplate from '@data-driven-forms/common/src/form-template';
 const useStyles = makeStyles(() => ({
   buttonGroup: {
     display: 'flex',
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    '&>button:not(last-child)': {
+      marginLeft: 8
+    }
   }
 }));
 
-const Form = ({ children, ...props }) => <form {...props}>{children}</form>;
+const Form = ({ children, ...props }) => (
+  <Grid item xs={12}>
+    <form {...props}>
+      <Grid container item spacing={2} xs={12}>
+        {children}
+      </Grid>
+    </form>
+  </Grid>
+);
 
 Form.propTypes = {
   children: PropTypes.node
@@ -44,7 +55,11 @@ Title.propTypes = {
 
 const ButtonGroup = ({ children }) => {
   const classes = useStyles();
-  return <div className={classes.buttonGroup}>{children}</div>;
+  return (
+    <Grid item xs={12}>
+      <div className={classes.buttonGroup}>{children}</div>
+    </Grid>
+  );
 };
 
 ButtonGroup.propTypes = {

packages/react-renderer-demo/package.json

@@ -22,18 +22,13 @@
     "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.2.3",
         "@data-driven-forms/mui-component-mapper": "*",
-        "@data-driven-forms/pf3-component-mapper": "*",
-        "@data-driven-forms/pf4-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
         "@material-ui/core": "^4.5.2",
         "@material-ui/icons": "^4.5.1",
         "@material-ui/styles": "^4.5.2",
         "@mdx-js/loader": "^1.4.5",
         "@mdx-js/react": "^1.4.5",
         "@next/mdx": "^9.3.3",
-        "@patternfly/patternfly-next": "^1.0.175",
-        "@patternfly/react-core": "^3.153.13",
-        "@patternfly/react-tokens": "^2.5.1",
         "brace": "^0.11.1",
         "clsx": "^1.0.4",
         "codesandbox": "2.1.14",

packages/react-renderer-demo/src/app/babel.config.js

@@ -1,55 +1,3 @@
-require.extensions['.css'] = () => undefined;
-const path = require('path');
-const glob = require('glob');
-
-const mapper = {
-  TextVariants: 'Text',
-  ButtonVariant: 'Button',
-  DropdownPosition: 'dropdownConstants',
-  TextListVariants: 'TextList',
-  TextListItemVariants: 'TextListItem'
-};
-
-const createIconsTransformPlugin = [
-  'transform-imports',
-  {
-    '@patternfly/react-icons': {
-      transform: (importName) =>
-        `@patternfly/react-icons/dist/js/icons/${importName
-          .split(/(?=[A-Z])/)
-          .join('-')
-          .toLowerCase()}`,
-      preventFullImport: true
-    }
-  }
-];
-
-const createReactCoreTransformPlugin = [
-  'transform-imports',
-  {
-    '@patternfly/react-core': {
-      transform: (importName) => {
-        let res;
-        const files = glob.sync(
-          path.resolve(__dirname, `../../node_modules/@patternfly/react-core/dist/js/**/${mapper[importName] || importName}.js`)
-        );
-        if (files.length > 0) {
-          res = files[0];
-        } else {
-          throw new Error(`File with importName ${importName} does not exist`);
-        }
-
-        res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
-        res = res.replace(/^\//, '');
-        return res;
-      },
-      preventFullImport: false,
-      skipDefaultConversion: true
-    }
-  },
-  'react-core-CJS'
-];
-
 const muiTransformPlugin = [
   'transform-imports',
   {
@@ -66,12 +14,7 @@ module.exports = {
   presets: [
     [
       'next/babel',
-      {
-        'transform-runtime': {
-          useESModules: false
-        }
-      }
     ]
   ],
-  plugins: [createIconsTransformPlugin, createReactCoreTransformPlugin, muiTransformPlugin]
+  plugins: [muiTransformPlugin]
 };

packages/react-renderer-demo/src/app/examples/tests/.eslintrc renamed to packages/react-renderer-demo/src/app/examples/.eslintrc

@@ -2,8 +2,8 @@ import React from 'react';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 
-import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
-import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
 
 const translateLabel = (id, locale = 'en') =>
   ({
@@ -46,7 +46,7 @@ const actionMapper = {
 };
 
 const ActionMapper = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplate} actionMapper={actionMapper} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );

packages/react-renderer-demo/src/app/examples/components/action-mapper.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
-import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
-import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import Typography from '@material-ui/core/Typography';
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField
@@ -44,7 +44,7 @@ const schema = {
 const ClearOnUnmount = () => {
   const [values, setValues] = useState({});
   return (
-    <div className="pf4">
+    <div>
       <FormRenderer
         FormTemplate={FormTemplate}
         componentMapper={componentMapper}
@@ -53,7 +53,9 @@ const ClearOnUnmount = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Title size="md">Form values</Title>
+        <Typography component="h3" variant="h5">
+          Form values
+        </Typography>
         <pre>{JSON.stringify(values, null, 2)}</pre>
       </div>
     </div>

packages/react-renderer-demo/src/app/examples/components/clear-on-unmount.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
-import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
-import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import Typography from '@material-ui/core/Typography';
 
 const schema = {
   fields: [
@@ -27,7 +27,7 @@ const componentMapper = {
 const ClearedValueExample = () => {
   const [values, setValues] = useState({});
   return (
-    <div className="pf4">
+    <div>
       <FormRenderer
         initialValues={{
           'field-with-initial-value': 'Delete me!'
@@ -40,7 +40,9 @@ const ClearedValueExample = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Title size="md">Form values</Title>
+        <Typography component="h3" variant="h5">
+          Form values
+        </Typography>
         <pre>{JSON.stringify(values, null, 2)}</pre>
       </div>
     </div>

packages/react-renderer-demo/src/app/examples/components/cleared-value.js

@@ -5,7 +5,35 @@ import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/comp
 import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
 import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api';
 
-import './form-fields-mapper-docs.css';
+const formGroupStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  marginBottom: 16
+};
+
+const inputStyles = {
+  width: '100%',
+  padding: '12px 20px',
+  margin: '8px 0',
+  display: 'inline-block',
+  border: '1px solid #ccc',
+  borderRadius: 4,
+  boxSizing: 'border-box'
+};
+
+const paragraphStyle = {
+  marginTop: 0,
+  marginBottom: 4
+};
+
+const requiredStyle = {
+  color: 'red',
+  marginLeft: 2
+};
+
+const errorStyle = {
+  color: 'orangered'
+};
 
 const getButtonStyle = (variant) => ({
   color: 'White',
@@ -51,11 +79,20 @@ const TextField = (props) => {
     ...rest
   } = useFieldApi(props);
   return (
-    <div className={`ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}`}>
-      <label htmlFor={input.name}>{label}</label>
-      <input id={input.name} {...input} {...rest} />
-      {touched && error && <p className="error-text">{error}</p>}
-      {customProp && <p>This is a custom prop and has nothing to do with form schema</p>}
+    <div
+      style={{
+        ...formGroupStyle,
+        ...(isRequired && requiredStyle),
+        ...(error && touched && errorStyle)
+      }}
+    >
+      <label style={{ color: 'initial' }} htmlFor={input.name}>
+        {isRequired && <span style={errorStyle}>*&nbsp;</span>}
+        {label}
+      </label>
+      <input style={inputStyles} id={input.name} {...input} {...rest} />
+      {touched && error && <p style={paragraphStyle}>{error}</p>}
+      {customProp && <p style={{ color: 'initial' }}>This is a custom prop and has nothing to do with form schema</p>}
     </div>
   );
 };

packages/react-renderer-demo/src/app/examples/components/component-mapper/form-fields-mapper-docs.css

@@ -2,10 +2,10 @@ import React from 'react';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 
-import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
-import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
-import Checkbox from '@data-driven-forms/pf4-component-mapper/dist/cjs/checkbox';
-import PlainText from '@data-driven-forms/pf4-component-mapper/dist/cjs/plain-text';
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
+import Checkbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
+import PlainText from '@data-driven-forms/mui-component-mapper/dist/cjs/plain-text';
 
 const schema = {
   title: 'Example of conditions',
@@ -88,7 +88,7 @@ const componentMapper = {
 const FormTemplateWrapper = (props) => <FormTemplate {...props} showFormControls={false} />;
 
 const Condition = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplateWrapper} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );