Fix linter errors in docs components.

Author: Hyperkid123

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

@@ -53,7 +53,9 @@ const ClearOnUnmount = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Typography component="h3" variant="h5">Form values</Typography>
+        <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

@@ -40,7 +40,9 @@ const ClearedValueExample = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Typography component="h3" variant="h5">Form values</Typography>
+        <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/component-mapper/form-fields-mapper.js

@@ -8,8 +8,8 @@ import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form
 const formGroupStyle = {
   display: 'flex',
   flexDirection: 'column',
-  marginBottom: 16,
-}
+  marginBottom: 16
+};
 
 const inputStyles = {
   width: '100%',
@@ -18,22 +18,22 @@ const inputStyles = {
   display: 'inline-block',
   border: '1px solid #ccc',
   borderRadius: 4,
-  boxSizing: 'border-box',
-}
+  boxSizing: 'border-box'
+};
 
 const paragraphStyle = {
   marginTop: 0,
-  marginBottom: 4,
-}
+  marginBottom: 4
+};
 
 const requiredStyle = {
   color: 'red',
-  marginLeft: 2,
-}
+  marginLeft: 2
+};
 
 const errorStyle = {
   color: 'orangered'
-}
+};
 
 const getButtonStyle = (variant) => ({
   color: 'White',
@@ -79,15 +79,20 @@ const TextField = (props) => {
     ...rest
   } = useFieldApi(props);
   return (
-    <div style={{
-      ...formGroupStyle,
-      ...(isRequired && requiredStyle),
-      ...(error && touched && errorStyle)
-    }}>
-      <label style={{color: 'initial'}} htmlFor={input.name}>{isRequired && <span style={errorStyle}>*&nbsp;</span>}{label}</label>
+    <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>}
+      {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/data-types-example.js

@@ -47,7 +47,9 @@ const DataTypesExample = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Typography component="h3" variant="h5">Form values</Typography>
+        <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/form-template/custom-buttons.js

@@ -7,7 +7,6 @@ import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form
 import FormSpy from '@data-driven-forms/react-form-renderer/dist/cjs/form-spy';
 import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
 import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField

packages/react-renderer-demo/src/app/examples/components/initialize-mount.js

@@ -15,7 +15,11 @@ const componentMapper = {
   Summary: () => {
     const { getState } = useFormApi();
 
-    return <Title size="md">{getState().values['chosen-way']}</Title>;
+    return (
+      <Typography component="h5" variant="h5">
+        {getState().values['chosen-way']}
+      </Typography>
+    );
   }
 };
 
@@ -93,7 +97,9 @@ const InitializeOnMountWizardExample = () => {
   return (
     <div>
       <div style={{ marginTop: 16, marginBottom: 16 }}>
-        <Typography component="h3" variant="h5">Form values</Typography>
+        <Typography component="h3" variant="h5">
+          Form values
+        </Typography>
         <pre>{JSON.stringify(values, null, 2)}</pre>
       </div>
       <FormRenderer

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState, lazy, useRef } from 'react';
+import React, { Fragment, useEffect, useState, useRef } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -134,14 +134,14 @@ const getPayload = (type, code, sourceFiles = {}) =>
   });
 
 const CodeExample = ({ source, mode, mapper, additionalSources }) => {
-  const {current: Component} = useRef(mode === 'preview' ? dynamic(import(`@docs/examples/${source}`)) : Fragment)
+  const { current: Component } = useRef(mode === 'preview' ? dynamic(import(`@docs/examples/${source}`)) : Fragment);
   const [codeSource, setCodeSource] = useState('');
   const sourceFiles = [];
   useEffect(() => {
-    import(`!raw-loader!@docs/examples/${source}`).then(file => {
-      setCodeSource(file.default)
-    })
-  }, [source])
+    import(`!raw-loader!@docs/examples/${source}`).then((file) => {
+      setCodeSource(file.default);
+    });
+  }, [source]);
   const classes = useStyles();
   if (mode === 'preview') {
     return (

packages/react-renderer-demo/src/app/src/stackblitz-templates/mui-templates.js

@@ -42,4 +42,4 @@ export const muiDependencies = {
   '@material-ui/core': 'latest',
   '@material-ui/icons': 'latest',
   'prop-types': 'latest'
-};
+};