Merge pull request #461 from rvsia/redesignLandingPage

Hyperkid123 · web-flow · commit 1cd8efc1978d · 2020-04-30T13:04:20.000+02:00
Redesign documentation landing page
diff --git a/packages/react-renderer-demo/src/app/pages/index.js b/packages/react-renderer-demo/src/app/pages/index.js
@@ -68,8 +68,8 @@ const LandingPage = () => {
           Data Driven Forms converts JSON form definitions into fully functional React forms.
         </Typography>
         <div className={classes.getStartedLink}>
-          <Link href="/renderer/installation">
-            <a className={classes.getStartedAnchor} href="/renderer/installation">
+          <Link href="/renderer/get-started">
+            <a className={classes.getStartedAnchor} href="/renderer/get-started">
               <Button variant="outlined" className={classes.getStartedButton}>
                 Get started
               </Button>
diff --git a/packages/react-renderer-demo/src/app/pages/renderer/get-started.md b/packages/react-renderer-demo/src/app/pages/renderer/get-started.md
@@ -6,14 +6,19 @@ import CodeExample from '../../src/components/code-example';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-
-# React form renderer
+# Getting started
 
 Data Driven Forms converts JSON form definitions into fully functional React forms.
 It uses [React Final Form](https://github.com/final-form/react-final-form) for the form state management.
 It is highly recommended to check their documentations first to fully understand how
 the [Data Driven Forms](https://github.com/data-driven-forms/react-forms) libraries work.
 
+All you need is to [install](/renderer/installation) the form renderer and choose the component mapper you want ([or create your own](/renderer/component-mapping)).
+
+Import `FormRenderer` from the react-form-renderer. This component takes four required props: FormTemplate, schema, componentMapper and onSubmit. You can read about them [here](/renderer/renderer-api#requiredprops).
+
+You can check the simple example below.
+
 <CodeExample source="components/get-started/get-started" mode="preview" />
 
 </Grid>
diff --git a/packages/react-renderer-demo/src/app/pages/renderer/installation.md b/packages/react-renderer-demo/src/app/pages/renderer/installation.md
@@ -7,6 +7,8 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 
 # Installation
 
+React Form Renderer is the basic component, that provides all features.
+
 ```sh
 npm install --save @data-driven-forms/react-form-renderer
 ```
@@ -15,6 +17,44 @@ or
 yarn add @data-driven-forms/react-form-renderer
 ```
 
+## Mappers
+
+Data Driven Forms team provides and mantains basic set of components for following three design systems: [MaterialUI](https://material-ui.com/), [PatternFly 4](https://www.patternfly.org/v4/) anad [PatternFly 3](https://www.patternfly.org/v3/).
+
+**mui-component-mapper**
+
+```sh
+npm install --save @data-driven-forms/mui-component-mapper
+```
+or
+```sh
+yarn add @data-driven-forms/mui-component-mapper
+```
+
+**pf4-component-mapper**
+
+```sh
+npm install --save @data-driven-forms/pf4-component-mapper
+```
+or
+```sh
+yarn add @data-driven-forms/pf4-component-mapper
+```
+
+**pf3-component-mapper**
+
+```sh
+npm install --save @data-driven-forms/pf3-component-mapper
+```
+or
+```sh
+yarn add @data-driven-forms/pf3-component-mapper
+```
+
+## Versioning
+
+All these packages all always deployed together, so their version numbers are always the same. Update them also together to achieve the best compatibility.
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="renderer/installation" />
diff --git a/packages/react-renderer-demo/src/app/src/components/common/material-logo.js b/packages/react-renderer-demo/src/app/src/components/common/material-logo.js
@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const MaterialUILogo = (props) => (
+  <SvgIcon viewBox="0 0 256 204" role="presentation" {...props}>
+    <g>
+      <polygon fill="#00B0FF" points="0 110.848 0 0 96 55.424 96 92.3733333 32 55.424 32 129.322667"></polygon>
+      <polygon fill="#0081CB" points="96 55.424 192 0 192 110.848 128 147.797333 96 129.322667 160 92.3733333 160 55.424 96 92.3733333"></polygon>
+      <polygon fill="#00B0FF" points="96 129.322667 96 166.272 160 203.221333 160 166.272"></polygon>
+      <path
+        d="M160,203.221333 L256,147.797333 L256,73.8986667 L224,92.3733333 L224,129.322667 L160,166.272 L160,203.221333 Z M224,55.424 L224,18.4746667 L256,5.68434189e-14 L256,36.9493333 L224,55.424 Z"
+        fill="#0081CB"
+      ></path>
+    </g>
+  </SvgIcon>
+);
+
+export default MaterialUILogo;
diff --git a/packages/react-renderer-demo/src/app/src/components/common/pf3-logo.js b/packages/react-renderer-demo/src/app/src/components/common/pf3-logo.js
@@ -0,0 +1,35 @@
+/* eslint-disable */
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const PF3Logo = (props) => (
+  <SvgIcon width="320px" height="320px" viewBox="0 0 320 320" enableBackground="new 0 0 320 320" role="presentation" {...props}>
+    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="160" y1="320" x2="160" y2="0">
+      <stop offset="0" style={{stopColor:"#E6E6E6"}} />
+      <stop offset="0.75" style={{stopColor:"#FFFFFF" }}/>
+    </linearGradient>
+    <circle fill="url(#SVGID_1_)" cx="160" cy="160" r="160" />
+    <g>
+      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="160" y1="54.8711" x2="160" y2="272.935">
+        <stop offset="0" style={{stopColor:"#54EEFF" }}/>
+        <stop offset="1" style={{stopColor:"#1C75BC" }}/>
+      </linearGradient>
+      <path
+        fill="url(#SVGID_2_)"
+        d="M160.27,48.269l0.022-0.206l-0.102,0.126l-0.04-0.039l0.034-0.328l-0.184,0.181l-0.188-0.181
+		l0.035,0.328l-0.04,0.039l-0.102-0.126l0.022,0.206L41.296,164.039L88.2,230.485l36.231-8.319l35.569,50.012l35.568-50.012
+		l36.231,8.319l29.053-41.16l17.851-25.287L160.27,48.269z M156.403,61.86l-16.178,151.596l-31.613-43.118L156.403,61.86z
+		 M107.062,168.225l-19.895-27.136l69.065-84.474L107.062,168.225z M139.543,216.366l-14.142,3.245l-23.771-33.421l5.924-13.449
+		L139.543,216.366z M159.627,54.544l0.374-0.848l0.372,0.844l16.728,162.987l-0.051-0.034l-16.39,24.219l-17.733-24.254
+		l-0.021,0.016L159.627,54.544z M179.774,213.458L163.597,61.856l47.79,108.482L179.774,213.458z M212.445,172.741l5.926,13.449
+		L194.6,219.611l-14.143-3.245L212.445,172.741z M163.77,56.619l69.063,84.47l-19.894,27.136L163.77,56.619z M89.178,227.93
+		l-44.909-63.619l104.499-102.15l-64.473,78.853l21.711,29.61l-6.974,15.831l23.974,33.708L89.178,227.93z M160.001,268.26
+		l-33.176-46.645l14.181-3.256l0.238,0.327l-0.152,0.112l19.64,26.859l18.199-26.891l-0.155-0.105l0.221-0.302l14.179,3.256
+		L160.001,268.26z M258.999,188.017l-28.177,39.913l-33.826-7.767l23.972-33.708l-6.972-15.831l21.711-29.61l-64.473-78.852
+		L275.73,164.311L258.999,188.017z"
+      />
+    </g>
+  </SvgIcon>
+);
+
+export default PF3Logo;
diff --git a/packages/react-renderer-demo/src/app/src/components/common/pf4-logo.js b/packages/react-renderer-demo/src/app/src/components/common/pf4-logo.js
@@ -0,0 +1,32 @@
+/* eslint-disable */
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const PF4Logo = (props) => (
+  <SvgIcon height="402" width="582" viewBox="0 0 706.3 132.5" enableBackground="new 0 0 706.3 132.5" role="presentation" {...props}>
+ <g>
+  <title>background</title>
+  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <g id="svg_1">
+   <path id="svg_2" d="m197.2,83.9l0,-35.3l15.2,0c2.2,0 4.1,0.3 5.6,1c1.5,0.7 2.8,1.5 3.7,2.6c1,1.1 1.6,2.3 2.1,3.6c0.4,1.3 0.6,2.7 0.6,4c0,0.9 -0.1,1.7 -0.3,2.6c-0.2,0.9 -0.5,1.7 -0.9,2.6c-0.4,0.8 -0.9,1.6 -1.6,2.3c-0.6,0.7 -1.4,1.4 -2.3,1.9c-0.9,0.5 -1.9,1 -3.1,1.3c-1.2,0.3 -2.5,0.5 -3.9,0.5l-8.3,0l0,13l-6.8,0l0,-0.1zm15.5,-19.5c0.9,0 1.6,-0.1 2.2,-0.4c0.6,-0.3 1.1,-0.6 1.4,-1.1c0.4,-0.4 0.6,-0.9 0.8,-1.5c0.2,-0.6 0.3,-1.1 0.3,-1.7c0,-0.5 -0.1,-1 -0.2,-1.6c-0.1,-0.5 -0.4,-1 -0.7,-1.5c-0.4,-0.5 -0.8,-0.8 -1.4,-1.1c-0.6,-0.3 -1.4,-0.4 -2.3,-0.4l-8.6,0l0,9.4l8.5,0l0,-0.1z" fill="#030303"/>
+   <path id="svg_3" d="m271.6,83.9l-2.7,-7.3l-13.6,0l-2.7,7.3l-7.3,0l13.5,-35.4l6.7,0l13.5,35.4l-7.4,0zm-8.4,-22.7c-0.2,-0.4 -0.4,-0.9 -0.6,-1.5c-0.2,-0.6 -0.4,-1.1 -0.5,-1.7c-0.1,0.5 -0.3,1.1 -0.5,1.7c-0.2,0.6 -0.4,1.1 -0.6,1.5l-3.5,9.2l9.2,0l-3.5,-9.2z" fill="#030303"/>
+   <path id="svg_4" d="m317.3,55.2l0,28.8l-6.8,0l0,-28.8l-10.1,0l0,-6.6l27,0l0,6.6l-10.1,0z" fill="#030303"/>
+   <path id="svg_5" d="m370.2,55.2l0,28.8l-6.8,0l0,-28.8l-10.1,0l0,-6.6l27,0l0,6.6l-10.1,0z" fill="#030303"/>
+   <path id="svg_6" d="m408.5,83.9l0,-35.3l24.1,0l0,6.5l-17.3,0l0,7.4l10.2,0l0,6.5l-10.2,0l0,8.5l18.4,0l0,6.5l-25.2,0l0,-0.1z" fill="#030303"/>
+   <path id="svg_7" d="m462.4,83.9l0,-35.3l16.4,0c2.2,0 4.1,0.3 5.6,0.9c1.5,0.6 2.7,1.4 3.6,2.5c0.9,1 1.6,2.2 2,3.5c0.4,1.3 0.6,2.7 0.6,4.2c0,1 -0.1,2 -0.4,3c-0.3,1 -0.7,2 -1.3,2.9c-0.6,0.9 -1.3,1.8 -2.1,2.5c-0.9,0.7 -1.8,1.3 -3,1.7l6.9,14.1l-7.7,0l-6.6,-13.2l-7.1,0l0,13.2l-6.9,0zm16.5,-19.6c0.9,0 1.6,-0.1 2.2,-0.4c0.6,-0.3 1.1,-0.6 1.4,-1c0.4,-0.4 0.6,-0.9 0.8,-1.5c0.2,-0.6 0.2,-1.1 0.2,-1.7c0,-0.6 -0.1,-1.1 -0.2,-1.7c-0.1,-0.6 -0.4,-1 -0.7,-1.5c-0.3,-0.4 -0.8,-0.8 -1.4,-1c-0.6,-0.3 -1.4,-0.4 -2.3,-0.4l-9.7,0l0,9.2l9.7,0z" fill="#030303"/>
+   <path id="svg_8" d="m541.9,83.9l-14,-20.6c-0.2,-0.3 -0.5,-0.8 -0.8,-1.3c-0.3,-0.5 -0.5,-1 -0.7,-1.4c0.1,0.4 0.1,0.8 0.1,1.3c0,0.5 0,1 0,1.3l0,20.6l-6.8,0l0,-35.2l6.4,0l13.7,20.4c0.2,0.3 0.5,0.7 0.7,1.2c0.3,0.5 0.5,1 0.7,1.4c0,-0.5 -0.1,-1 -0.1,-1.4c0,-0.5 0,-0.9 0,-1.2l0,-20.4l6.8,0l0,35.4l-6,0l0,-0.1z" fill="#030303"/>
+   <path id="svg_9" d="m578.4,83.9l0,-35.3l23.7,0l0,6.5l-16.9,0l0,7.4l10.8,0l0,6.5l-10.7,0l0,15l-6.9,0l0,-0.1z" fill="#030303"/>
+   <path id="svg_10" d="m629.8,83.9l0,-35.3l6.8,0l0,28.8l17.1,0l0,6.6l-23.9,0l0,-0.1z" fill="#030303"/>
+   <path id="svg_11" d="m686.4,83.9l0,-13.7l-13.1,-21.6l7.7,0l8.7,14.5l8.7,-14.5l7.7,0l-13.1,21.6l0,13.8l-6.6,0l0,-0.1z" fill="#030303"/>
+  </g>
+  <g id="svg_12">
+   <path id="svg_13" d="m49,103l-21.2,4.9l-27.8,-39.5l70,-68.4l70,68.4l-27.8,39.4l-21.2,-4.8l-21,29.5l-21,-29.5zm21,25.7l18.6,-26.2l-7.2,-1.7l-11,16.2l-11.9,-16.2l-7.2,1.7l18.7,26.2zm0.4,-15.6l9.2,-13.5l-9.6,-92.9l-9.5,92.9l9.9,13.5zm-41.6,-7.7l18.8,-4.3l-13.8,-19.4l4.1,-9.3l-12.7,-17.4l32.8,-40.1l-55.1,53.8l25.9,36.7zm82.4,0l16.3,-23.1l9.6,-13.6l-55.1,-53.8l32.9,40.1l-12.8,17.4l4.1,9.3l-13.8,19.3l18.8,4.4zm-21.1,-4.9l13.6,-19.1l-3,-6.9l-18,24.3l7.4,1.7zm-40.1,0l7.3,-1.7l-17.9,-24.3l-3,6.9l13.6,19.1zm31.9,-4.3l17.6,-24.1l-26.6,-60.5l9,84.6zm-23.8,0l9,-84.6l-26.6,60.5l17.6,24.1zm-19.1,-26.2l27.1,-61.5l-38.1,46.6l11,14.9zm62.1,0l11,-15l-38.1,-46.5l27.1,61.5z" fill="#030303"/>
+  </g>
+ </g>
+  </SvgIcon>
+);
+
+export default PF4Logo;
diff --git a/packages/react-renderer-demo/src/app/src/components/landing-page/formExample.js b/packages/react-renderer-demo/src/app/src/components/landing-page/formExample.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
+
+import validatorTypes from '@data-driven-forms/react-form-renderer/dist/cjs/validator-types';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import Checkbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
+import FormSpy from '@data-driven-forms/react-form-renderer/dist/cjs/form-spy';
+import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api';
+
+const useStyles = makeStyles((theme) => ({
+  formButtons: {
+    display: 'flex',
+    width: '100%',
+    flexFlow: 'row-reverse',
+    padding: 8
+  }
+}));
+
+const FormTemplate = ({ formFields }) => {
+  const formOptions = useFormApi();
+  const classes = useStyles();
+
+  return (
+    <form onSubmit={formOptions.handleSubmit}>
+      <Grid container spacing={2}>
+        {formFields}
+        <FormSpy subscription={{ valid: true }}>
+          {({ valid }) => (
+            <div className={classes.formButtons}>
+              <Button disabled={!valid} type="submit" color="primary" variant="contained">
+                Show
+              </Button>
+            </div>
+          )}
+        </FormSpy>
+      </Grid>
+    </form>
+  );
+};
+
+FormTemplate.propTypes = {
+  formFields: PropTypes.any
+};
+
+const FormExample = ({ setFormState }) => (
+  <FormRenderer
+    FormTemplate={FormTemplate}
+    onSubmit={(values) => setFormState(values)}
+    componentMapper={{
+      [componentTypes.TEXT_FIELD]: TextField,
+      [componentTypes.CHECKBOX]: Checkbox
+    }}
+    schema={{
+      fields: [
+        {
+          component: componentTypes.TEXT_FIELD,
+          name: 'name',
+          label: 'Your name',
+          isRequired: true,
+          validate: [
+            {
+              type: validatorTypes.REQUIRED
+            }
+          ]
+        },
+        {
+          component: componentTypes.TEXT_FIELD,
+          name: 'email',
+          label: 'Email',
+          isRequired: true,
+          validate: [
+            {
+              type: validatorTypes.REQUIRED
+            },
+            {
+              type: validatorTypes.PATTERN,
+              pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
+              message: 'Not valid email'
+            }
+          ]
+        },
+        {
+          component: componentTypes.TEXT_FIELD,
+          name: 'confirm-email',
+          label: 'Confirm email',
+          isRequired: true,
+          validate: [
+            {
+              type: 'same-email'
+            }
+          ]
+        },
+        {
+          component: componentTypes.CHECKBOX,
+          name: 'newsletters',
+          label: 'I want to receive newsletter'
+        }
+      ]
+    }}
+    validatorMapper={{
+      'same-email': () => (value, allValues) => (value !== allValues.email ? 'Email does not match' : undefined)
+    }}
+  />
+);
+
+FormExample.propTypes = {
+  setFormState: PropTypes.func
+};
+
+export default FormExample;
diff --git a/packages/react-renderer-demo/src/app/src/components/landing-page/landing-page-cards.js b/packages/react-renderer-demo/src/app/src/components/landing-page/landing-page-cards.js
diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js b/packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js
