Merge pull request #414 from data-driven-forms/enable-linter-in-demo

Enable linter in demo

Author: rvsia

.eslintignore

@@ -4,5 +4,3 @@
 /**/coverage
 /**/vendor.js
 /**/*.config.js
-/**/doc-components/
-/**/examples-texts/

packages/react-renderer-demo/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": "off"
+  }
+}

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/custom-component.js

@@ -1,7 +1,4 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
-export default () =>
-  <Typography>
-    This is a custom component.
-  </Typography>;
+export default () => <Typography>This is a custom component.</Typography>;

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/dual-list-select.js

@@ -1,4 +1,11 @@
 import React from 'react';
 import Pf4 from '@docs/doc-components/pf4-dual-list.md';
+import PropTypes from 'prop-types';
 
-export default ({ activeMapper }) => activeMapper === 'pf4' ? <Pf4 /> : 'Not implemented yet';
+const DualListSelect = ({ activeMapper }) => (activeMapper === 'pf4' ? <Pf4 /> : 'Not implemented yet');
+
+DualListSelect.propTypes = {
+  activeMapper: PropTypes.string
+};
+
+export default DualListSelect;

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/generic-mui-component.js

@@ -1,16 +1,18 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
+import PropTypes from 'prop-types';
+
 export const docsLinks = {
   mui: 'https://material-ui.com/api/',
   pf4: 'http://patternfly-react.surge.sh/patternfly-4/components/',
-  pf3: 'http://patternfly-react.surge.sh/patternfly-3/index.html',
+  pf3: 'http://patternfly-react.surge.sh/patternfly-3/index.html'
 };
 
-export default ({ activeMapper, component }) => {
+const GenericMuiComponent = ({ activeMapper, component }) => {
   const originalComponent = component;
-  if (activeMapper === 'pf4'){
-    switch (component){
+  if (activeMapper === 'pf4') {
+    switch (component) {
       case 'date-picker':
         component = 'textinput';
         break;
@@ -32,9 +34,11 @@ export default ({ activeMapper, component }) => {
       case 'checkbox-multiple':
         component = 'checkbox';
         break;
+      default:
+        break;
     }
-  } else if (activeMapper === 'mui'){
-    switch (component){
+  } else if (activeMapper === 'mui') {
+    switch (component) {
       case 'date-picker':
         component = 'text-field';
         break;
@@ -53,22 +57,33 @@ export default ({ activeMapper, component }) => {
       case 'checkbox-multiple':
         component = 'checkbox';
         break;
+      default:
+        break;
     }
   }
 
-  return <React.Fragment>
-    <Typography variant='body1' gutterBottom>
-    This component also accepts all other original props, please see <a
-        href={ `${docsLinks[activeMapper]}${ activeMapper === 'pf4' || activeMapper === 'mui' ? component : '' }` }>
-    here</a>!
-    </Typography>
-
-    { activeMapper === 'mui' ?
-      (originalComponent === 'date-picker' || originalComponent === 'time-picker') &&
-      <Typography variant='body1'>
-      This component also use API from material-ui-pickers, please see <a
-          href={ `https://material-ui-pickers.firebaseapp.com/api/${originalComponent.replace('-', '')}` }>
-      here</a>!
+  return (
+    <React.Fragment>
+      <Typography variant="body1" gutterBottom>
+        This component also accepts all other original props, please see{' '}
+        <a href={`${docsLinks[activeMapper]}${activeMapper === 'pf4' || activeMapper === 'mui' ? component : ''}`}>here</a>!
       </Typography>
-      : '' }
-  </React.Fragment>;};
+
+      {activeMapper === 'mui'
+        ? (originalComponent === 'date-picker' || originalComponent === 'time-picker') && (
+            <Typography variant="body1">
+              This component also use API from material-ui-pickers, please see{' '}
+              <a href={`https://material-ui-pickers.firebaseapp.com/api/${originalComponent.replace('-', '')}`}>here</a>!
+            </Typography>
+          )
+        : ''}
+    </React.Fragment>
+  );
+};
+
+GenericMuiComponent.propTypes = {
+  activeMapper: PropTypes.string,
+  component: PropTypes.string
+};
+
+export default GenericMuiComponent;

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/select.js

@@ -2,5 +2,12 @@ import React from 'react';
 import GenericComponentText from './generic-mui-component';
 import Pf3Select from '@docs/doc-components/pf3-select.md';
 import Pf4Select from '@docs/doc-components/pf4-select.md';
+import PropTypes from 'prop-types';
 
-export default ({ activeMapper }) => activeMapper === 'pf3' ? <Pf3Select /> : activeMapper === 'pf4' ? <Pf4Select /> : <GenericComponentText />;
+const Select = ({ activeMapper }) => (activeMapper === 'pf3' ? <Pf3Select /> : activeMapper === 'pf4' ? <Pf4Select /> : <GenericComponentText />);
+
+Select.propTypes = {
+  activeMapper: PropTypes.string
+};
+
+export default Select;

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/tabs.js

@@ -2,32 +2,35 @@ import React, { Fragment } from 'react';
 import Typography from '@material-ui/core/Typography';
 import { docsLinks } from './generic-mui-component';
 
-export default ({ activeMapper }) =>
+import PropTypes from 'prop-types';
+
+const Tabs = ({ activeMapper }) => (
   <Fragment>
-    { activeMapper === 'pf4' &&
-      <Typography variant='body1' gutterBottom>
-      This component also accepts all other original props, please see <a
-          href={ `${docsLinks[activeMapper]}/tabs` }>
-      here</a>!
-      </Typography> }
+    {activeMapper === 'pf4' && (
+      <Typography variant="body1" gutterBottom>
+        This component also accepts all other original props, please see <a href={`${docsLinks[activeMapper]}/tabs`}>here</a>!
+      </Typography>
+    )}
     <Typography variant="body1">
-  For using this component, you have to append TabItem component (containing form fields) to fields property.
-    </Typography>
-    <Typography gutterBottom>
-    Component constant
+      For using this component, you have to append TabItem component (containing form fields) to fields property.
     </Typography>
+    <Typography gutterBottom>Component constant</Typography>
     <pre>TAB_ITEM</pre> <Typography variant="body1">as an import from componentTypes</Typography>
     <pre>tab-item</pre> <Typography variant="body1">as a string</Typography>
-    { activeMapper === 'pf3' &&
-    (
+    {activeMapper === 'pf3' && (
       <Fragment>
-        <Typography gutterBottom>
-        Validation
-        </Typography>
+        <Typography gutterBottom>Validation</Typography>
         <Typography variant="body1">Because of schema flexibility there is no simple and efficient way to signal invalid tab content.</Typography>
         <Typography variant="body1">
           If you want to add some visual feedback for this case, please specify field names to <strong>validateFields</strong> attribute.
         </Typography>
       </Fragment>
-    ) }
-  </Fragment>;
+    )}
+  </Fragment>
+);
+
+Tabs.propTypes = {
+  activeMapper: PropTypes.string
+};
+
+export default Tabs;

packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/wizard.js

@@ -3,4 +3,12 @@ import Wizard from '@docs/doc-components/wizard.md';
 import Pf3Wizard from '@docs/doc-components/pf3-wizard.md';
 import Pf4Wizard from '@docs/doc-components/pf4-wizard.md';
 
-export default ({ activeMapper }) => activeMapper === 'pf3' ? <Pf3Wizard /> : activeMapper === 'pf4' ? <Pf4Wizard /> : <Wizard />;
+import PropTypes from 'prop-types';
+
+const DocWizard = ({ activeMapper }) => (activeMapper === 'pf3' ? <Pf3Wizard /> : activeMapper === 'pf4' ? <Pf4Wizard /> : <Wizard />);
+
+DocWizard.propTypes = {
+  activeMapper: PropTypes.string
+};
+
+export default DocWizard;

packages/react-renderer-demo/src/app/src/doc-components/custom-buttons.js

@@ -47,18 +47,23 @@ const FormTemplate = ({ formFields, schema }) => {
             <Button disabled={pristine} style={{ marginRight: 8 }} onClick={onReset} variant="contained">
               Reset
             </Button>
-            <Button variant="contained" onClick={onCancel}>Cancel</Button>
+            <Button variant="contained" onClick={onCancel}>
+              Cancel
+            </Button>
           </div>
         )}
       </FormSpy>
     </Form>
   );
 };
 
-const asyncSubmit = (values, api) => new Promise((resolve) => setTimeout(() => {
-  console.log('FormValues', values);
-  resolve('Yay');
-}, 1500));
+const asyncSubmit = (values, api) =>
+  new Promise((resolve) =>
+    setTimeout(() => {
+      console.log('FormValues', values);
+      resolve('Yay');
+    }, 1500)
+  );
 
 const FormControls = () => (
   <div className="pf4">

packages/react-renderer-demo/src/app/src/doc-components/get-started/get-started.js

@@ -45,11 +45,11 @@ const schema = {
 const GetStartedForm = () => (
   <div className="pf4">
     <FormRender
-      componentMapper={ componentMapper }
-      FormTemplate={ FormTemplate }
-      schema={ schema }
-      onSubmit={ console.log }
-      onCancel={ () => console.log('Cancel action') }
+      componentMapper={componentMapper}
+      FormTemplate={FormTemplate}
+      schema={schema}
+      onSubmit={console.log}
+      onCancel={() => console.log('Cancel action')}
       canReset
     />
   </div>