Merge pull request #400 from rvsia/technicalDebts

[V2] Technical debts

Author: Hyperkid123

packages/common/src/form-template.js

@@ -18,7 +18,7 @@ export const completeButtons = (buttonOrder) => {
     expectedOrder.push('cancel');
   }
 
-  return Array.from(new Set(expectedOrder));
+  return expectedOrder;
 };
 
 export const FormControls = ({
@@ -37,7 +37,7 @@ export const FormControls = ({
   formSpyProps
 }) => {
   if (FormButtons) {
-    return <FormButtons {...formSpyProps} />;
+    return <FormButtons />;
   }
 
   const { submitting, pristine, validating } = formSpyProps;
@@ -71,7 +71,6 @@ FormControls.propTypes = {
   buttonOrder: PropTypes.arrayOf(PropTypes.string),
   buttonClassName: PropTypes.string,
   FormButtons: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
-  FormSpy: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
   Button: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
   ButtonGroup: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
   formSpyProps: PropTypes.shape({

packages/mui-component-mapper/package.json

@@ -65,18 +65,6 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0"
   },
-  "release": {
-    "prepare": [
-      "@semantic-release/npm",
-      {
-        "path": "@semantic-release/git",
-        "assets": [
-          "package.json"
-        ],
-        "message": "Release of new version: ${nextRelease.version} <no> [skip ci]"
-      }
-    ]
-  },
   "dependencies": {
     "@date-io/date-fns": "^1.0.1",
     "@date-io/moment": "^1.0.1",

packages/mui-component-mapper/scripts/update_demo.sh

@@ -2,7 +2,7 @@ import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import SubForm from './sub-form';
 import Tabs from './tabs';
 import TextField from './text-field';
-import TextArea from './text-area';
+import Textarea from './textarea';
 import Checkbox from './checkbox';
 import Switch from './switch';
 import TimePicker from './time-picker';
@@ -14,7 +14,7 @@ import Wizard from './wizard';
 
 export const components = {
   TextField,
-  TextArea,
+  Textarea,
   Select,
   Checkbox,
   Radio,
@@ -28,7 +28,7 @@ export const components = {
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField,
-  [componentTypes.TEXTAREA]: TextArea,
+  [componentTypes.TEXTAREA]: Textarea,
   [componentTypes.SELECT]: Select,
   [componentTypes.CHECKBOX]: Checkbox,
   [componentTypes.SUB_FORM]: SubForm,

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

@@ -1,31 +1,69 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Grid, Button as MUIButton, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import FormTemplate from '@data-driven-forms/common/src/form-template';
 
+const useStyles = makeStyles(() => ({
+  buttonGroup: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }
+}));
+
 const Form = ({ children, ...props }) => <form {...props}>{children}</form>;
+
+Form.propTypes = {
+  children: PropTypes.node
+};
+
 const Description = ({ children }) => (
   <Grid item xs={12}>
     <Typography variant="body1" gutterBottom>
       {children}
     </Typography>
   </Grid>
 );
+
+Description.propTypes = {
+  children: PropTypes.node
+};
+
 const Title = ({ children }) => (
   <Grid item xs={12}>
     <Typography variant="h3" gutterBottom>
       {children}
     </Typography>
   </Grid>
 );
-const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
+
+Title.propTypes = {
+  children: PropTypes.node
+};
+
+const ButtonGroup = ({ children }) => {
+  const classes = useStyles();
+  return <div className={classes.buttonGroup}>{children}</div>;
+};
+
+ButtonGroup.propTypes = {
+  children: PropTypes.node
+};
+
 const Button = ({ label, variant, children, buttonType, ...props }) => (
   <MUIButton color={variant} variant="contained" {...props}>
     {label || children}
   </MUIButton>
 );
 
+Button.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.node,
+  variant: PropTypes.string,
+  buttonType: PropTypes.string
+};
+
 const MuiFormTemplate = (props) => (
   <FormTemplate FormWrapper={Form} Button={Button} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
 );

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { Typography } from '@material-ui/core';
 import PropTypes from 'prop-types';
 
-const PlainText = ({ label, name }) =>
+const PlainText = ({ label, name, ...props }) =>
   label.split('\n').map((paragraph, index) => (
-    <Typography key={`${index}-${name}`} gutterBottom variant="body1">
+    <Typography key={`${index}-${name}`} {...props}>
       {paragraph}
     </Typography>
   ));
@@ -14,4 +14,9 @@ PlainText.propTypes = {
   name: PropTypes.string.isRequired
 };
 
+PlainText.defaultProps = {
+  variant: 'body1',
+  gutterBottom: true
+};
+
 export default PlainText;

packages/mui-component-mapper/src/files/plain-text.js

@@ -2,12 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Radio as MUIRadio, FormControlLabel, FormControl, FormLabel, FormHelperText } from '@material-ui/core';
 import { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
+import { makeStyles } from '@material-ui/core/styles';
 
 import FormFieldGrid from '../common/form-field-grid';
 import { validationError } from '../common/helpers';
-import './radio.scss';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
+const useStyles = makeStyles(() => ({
+  grid: {
+    '&:first-child': {
+      marginTop: 8
+    }
+  }
+}));
+
 const RadioOption = ({ name, option, isDisabled, isReadOnly }) => {
   const { input } = useFieldApi({ name, type: 'radio', value: option.value });
   return (
@@ -42,10 +50,11 @@ const Radio = ({ name, ...props }) => {
     name,
     type: 'radio'
   });
+  const classes = useStyles();
   const invalid = validationError(meta, validateOnMount);
   const text = invalid || helperText || description;
   return (
-    <FormFieldGrid className="mui-ddform-radio-group">
+    <FormFieldGrid className={classes.grid}>
       <FormControl required={isRequired} error={!!invalid} component="fieldset">
         <FormLabel component="legend">{label}</FormLabel>
         {options.map((option) => (

packages/mui-component-mapper/src/files/radio.js

@@ -21,7 +21,6 @@ const Select = (props) => {
         invalid={invalid}
         textFieldProps={{
           label,
-          color: invalid ? 'red' : 'blue',
           InputLabelProps: {
             shrink: true
           }

packages/mui-component-mapper/src/files/radio.scss

@@ -1,13 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { useFormApi } from '@data-driven-forms/react-form-renderer';
 
-const SubForm = ({ fields, title, description, FormSpyProvider: _FormSpyProvider, validate: _validate, ...rest }) => {
+const useStyles = makeStyles(() => ({
+  grid: {
+    paddingRight: 0,
+    paddingLeft: 0
+  }
+}));
+
+const SubForm = ({ fields, title, description, ...rest }) => {
   const { renderForm } = useFormApi();
+  const classes = useStyles();
+
   return (
-    <Grid item xs={12} container style={{ paddingRight: 0, paddingLeft: 0 }} {...rest}>
+    <Grid item xs={12} container className={classes.grid} {...rest}>
       {title && (
         <Grid item xs={12}>
           <Typography variant="h5">{title}</Typography>
@@ -28,9 +38,7 @@ const SubForm = ({ fields, title, description, FormSpyProvider: _FormSpyProvider
 SubForm.propTypes = {
   fields: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   title: PropTypes.string,
-  description: PropTypes.string,
-  FormSpyProvider: PropTypes.any,
-  validate: PropTypes.any
+  description: PropTypes.string
 };
 
 export default SubForm;