Refactor the library

src/ComponentFactory.js

@@ -7,10 +7,11 @@ import MCF_Checkbox from './components/MCF_Checkbox'
 import MCF_CheckboxesGroup from './components/MCF_CheckboxesGroup'
 import MCF_Dialog from './components/MCF_Dialog'
 import MCF_Divider from './components/MCF_Divider'
+import MCF_FileUpload from './components/MCF_FileUpload'
 import MCF_MediaCard from './components/MCF_MediaCard'
 import MCF_Select from './components/MCF_Select'
 import MCF_Text from './components/MCF_Text'
-import MCF_FileUpload from './components/MCF_FileUpload'
+
 
 
 export default class ComponentFactory {

src/components/MCF_AutoComplete.js

@@ -1,8 +1,10 @@
 /* eslint-disable react/prop-types */
+
 import React, { useState } from 'react'
 
-import TextField from '@material-ui/core/TextField'
 import Autocomplete from '@material-ui/lab/Autocomplete'
+import TextField from '@material-ui/core/TextField'
+
 
 
 export default function MCF_Autocomplete (props) {
@@ -18,15 +20,15 @@ export default function MCF_Autocomplete (props) {
 
   return (
     <Autocomplete
-      id={params.id}
+      id={params.id}  // string
-      value={params.value}
+      value={params.value}  // string
-      style={{width: params.width}}
+      style={{width: params.width}}  // number
-      options={params.options}
+      options={params.options}  // options to select
       getOptionLabel={option => option.key}
       onChange={handleChange}
       renderInput={parameters => <TextField
         {...parameters}
-        label={params.label}
+        label={params.label}  // string
         variant={params.variant}  // 'filled' | 'outlined' | 'standard'
         margin={params.margin} // 'dense' | 'none' | 'normal'
       />}

src/components/MCF_Button.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import Button from '@material-ui/core/Button'
@@ -6,6 +7,7 @@ import Button from '@material-ui/core/Button'
 import { useStyles } from '../index'
 
 
+
 export default function MCF_Button (props) {
   const [params, setParams] = useState(props.params)
   const classes = useStyles()
@@ -13,14 +15,13 @@ export default function MCF_Button (props) {
   return (
     <Button
       className={classes.button}
-      variant={params.variant}
+      color={params.color}  // 'default' | 'inherit' | 'primary' | 'secondary'
-      color={params.color}
+      size={params.size}  // 'large' | 'medium' | 'small'
-      disabled={params.disabled}
+      variant={params.variant}  // 'contained' | 'outlined' | 'text'
-      size={params.size}
+      disabled={params.disabled}  // boolean
-      value={params.value}
       onClick={params.onClickListener}
     >
-      {params.text}
+      {params.text/* string */}
     </Button>
   )
 }

src/components/MCF_Card.js

@@ -1,13 +1,14 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import CardHeader from '@material-ui/core/CardHeader'
 
+import ComponentFactory from '../ComponentFactory'
 import {useStyles} from '../index'
 
-import ComponentFactory from '../ComponentFactory'
 
 
 export default function MCF_Card (props) {
@@ -24,8 +25,8 @@ export default function MCF_Card (props) {
   return (
     <Card className={classes.card}>
       <CardHeader
-        title={params.mainText}
+        title={params.mainText}  // string
-        subheader={params.secondaryText}
+        subheader={params.secondaryText}  // string
       />
       <CardContent>
         {renderContents()}

src/components/MCF_Checkbox.js

@@ -1,10 +1,12 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import Checkbox from '@material-ui/core/Checkbox'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 
 
+
 export default function MCF_Checkbox (props) {
   const [params, setParams] = useState(props.params)
 
@@ -15,16 +17,16 @@ export default function MCF_Checkbox (props) {
 
   return (
     <FormControlLabel
-      id={params.id}
+      id={params.id}  // string
       key={params.id}
       control={
         <Checkbox
-          checked={params.checked}
+          checked={params.checked}  // boolean
           onChange={handleChange}
           name={params.id}
         />
       }
-      label={params.label}
+      label={params.label}  // string
     />
   )
 }

src/components/MCF_CheckboxesGroup.js

@@ -1,15 +1,17 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import FormControl from '@material-ui/core/FormControl'
 import FormGroup from '@material-ui/core/FormGroup'
 import FormHelperText from '@material-ui/core/FormHelperText'
 import FormLabel from '@material-ui/core/FormLabel'
-import ComponentFactory from '../ComponentFactory'
 
+import ComponentFactory from '../ComponentFactory'
 import {useStyles} from '../index'
 
 
+
 export default function MCF_CheckboxesGroup (props) {
   const [params, setParams] = useState(props.params)
   const classes = useStyles()
@@ -30,9 +32,9 @@ export default function MCF_CheckboxesGroup (props) {
         const checkboxConfig = {
           type: 'checkbox',
           params: {
-            id: checkbox.id,
+            id: checkbox.id,  // string
-            checked: checkbox.checked,
+            checked: checkbox.checked,  // boolean
-            label: checkbox.label,
+            label: checkbox.label,  // string
             onChangeListener: handleChange,
           },
         }
@@ -45,10 +47,10 @@ export default function MCF_CheckboxesGroup (props) {
   return (
     <FormControl component="fieldset" className={classes.formControl}>
       <FormLabel component="legend">{params.label}</FormLabel>
-      <FormHelperText>{params.helperText}</FormHelperText>
+      <FormHelperText>{params.helperText/* string */}</FormHelperText>
       <FormGroup
-        id={params.id}
+        id={params.id}  // string
-        row={params.isRow}
+        row={params.isRow}  // boolean
       >
         {createCheckboxes()}
       </FormGroup>

src/components/MCF_Dialog.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import Button from '@material-ui/core/Button'
@@ -11,6 +12,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'
 import ComponentFactory from '../ComponentFactory'
 
 
+
 export default function MCF_Dialog (props) {
   const [params, setParams] = useState(props.params)
 
@@ -52,32 +54,32 @@ export default function MCF_Dialog (props) {
   return (
     <div>
       <Button
-        variant={params.openButtonVariant}
+        variant={params.openButtonVariant}  // 'contained' | 'outlined' | 'text'
-        color={params.openButtonColor}
+        color={params.openButtonColor}  // 'default' | 'inherit' | 'primary' | 'secondary'
         onClick={handleOpen}>
-        {params.openButtonText}
+        {params.openButtonText/* string */}
       </Button>
       <Dialog
-        open={params.open}
+        open={params.open}  // boolean
         onClose={handleClose}
         aria-labelledby={params.id}
       >
-        <DialogTitle id={params.id}>
+        <DialogTitle id={params.id/* string */}>
-          {params.titleText}
+          {params.titleText/* string */}
         </DialogTitle>
         <DialogContent>
           <DialogContentText>
-            {params.contentText}
+            {params.contentText/* string */}
           </DialogContentText>
           {renderContents()}
         </DialogContent>
         <DialogActions>
           {renderActionContents()}
           <Button
-            variant={params.closeButtonVariant}
+            variant={params.closeButtonVariant}  // 'contained' | 'outlined' | 'text'
-            color={params.closeButtonColor}
+            color={params.closeButtonColor}  // 'default' | 'inherit' | 'primary' | 'secondary'
             onClick={handleClose}>
-            {params.closeButtonText}
+            {params.closeButtonText/* string */}
           </Button>
         </DialogActions>
       </Dialog>

src/components/MCF_Divider.js

@@ -3,6 +3,7 @@ import React from 'react'
 import {useStyles} from '../index'
 
 
+
 export default function MCF_Divider () {
   const classes = useStyles()
 

src/components/MCF_FileUpload.js

@@ -1,9 +1,13 @@
+/* eslint-disable react/prop-types */
+
 import React, {useState, useEffect} from 'react'
 
 import Button from '@material-ui/core/Button'
 
 import {useStyles} from '../index'
 
+
+
 export default function MCF_FileUpload (props) {
   const [params, setParams] = useState(props.params)
   const classes = useStyles()
@@ -52,18 +56,18 @@ export default function MCF_FileUpload (props) {
   return (
     <div>
       <input
-        id={params.id}
+        id={params.id}  // string
         className={classes.input}
-        accept={params.acceptedFormats}
+        accept={params.acceptedFormats}  // strings array
         multiple
         type="file"
       />
       <label htmlFor={params.id}>
         <Button
           className={classes.button}
-          variant={params.variant}
+          color={params.color}  // 'default' | 'inherit' | 'primary' | 'secondary'
-          color={params.color}
+          size={params.size}  // 'large' | 'medium' | 'small'
-          size={params.size}
+          variant={params.variant}  // 'contained' | 'outlined' | 'text'
           component="span">
           {params.text}
         </Button>

src/components/MCF_MediaCard.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
-import React, {useState} from 'react'
 
-import {useStyles} from '../index'
+import React, {useState} from 'react'
 
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
@@ -9,6 +8,8 @@ import CardHeader from '@material-ui/core/CardHeader'
 import CardMedia from '@material-ui/core/CardMedia'
 
 import ComponentFactory from '../ComponentFactory'
+import {useStyles} from '../index'
+
 
 
 export default function MCF_MediaCard (props) {
@@ -25,14 +26,14 @@ export default function MCF_MediaCard (props) {
   return (
     <Card className={classes.card}>
       <CardHeader
-        title={params.mainText}
+        title={params.mainText}  // string
-        subheader={params.secondaryText}
+        subheader={params.secondaryText}  // string
       />
       <CardMedia
         className={classes.media}
-        image={params.imageURL}
+        image={params.imageURL}  // string: URL
-        title={params.imageTitle}
+        title={params.imageTitle}  // string
-        alt={params.imageAlt}
+        alt={params.imageAlt}  // string
       />
       <CardContent>
         {renderContents()}

src/components/MCF_Select.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import FormControl from '@material-ui/core/FormControl'
@@ -11,6 +12,7 @@ import Select from '@material-ui/core/Select'
 import {useStyles} from '../index'
 
 
+
 export default function MCF_Select (props) {
   const [params, setParams] = useState(props.params)
   const classes = useStyles()
@@ -26,10 +28,10 @@ export default function MCF_Select (props) {
       params.options.map(option => {
         return (
           <MenuItem
-            key={option.id}
+            key={option.id}  // string
             value={option.value}
           >
-            {option.label}
+            {option.label/*string*/}
           </MenuItem>
         )
       })
@@ -39,31 +41,31 @@ export default function MCF_Select (props) {
   return (
     <FormControl
       className={classes.formControl}
-      disabled={params.disabled}
+      disabled={params.disabled}  // boolean
-      error={params.error}
+      error={params.error}  // boolean
-      required={params.required}
+      required={params.required}  // boolean
     >
       <InputLabel
-        shrink={params.shrink}
+        shrink={params.shrink}  // boolean
         htmlFor={params.id}
       >
         {params.label}
       </InputLabel>
       <Select
         value={params.value}
-        displayEmpty={params.displayEmpty}
+        displayEmpty={params.displayEmpty}  // boolean
-        autoWidth={params.autoWidth}
+        autoWidth={params.autoWidth}  // boolean
         onChange={handleInteraction}
         input={<Input
           name={params.id}
-          id={params.id}
+          id={params.id}  // string
-          readOnly={params.readOnly}
+          readOnly={params.readOnly}  // boolean
         />}
       >
         {createList()}
       </Select>
       <FormHelperText>
-        {params.helperText}
+        {params.helperText/* string */}
       </FormHelperText>
     </FormControl>
   )

src/components/MCF_Text.js

@@ -1,10 +1,13 @@
 /* eslint-disable react/prop-types */
+
 import React, {useState} from 'react'
 
 import TextField from '@material-ui/core/TextField'
 
 import {useStyles} from '../index'
 
+
+
 export default function MCF_Text (props) {
   const [params, setParams] = useState(props.params)
   const classes = useStyles()
@@ -25,22 +28,22 @@ export default function MCF_Text (props) {
   return (
     <form className={classes.container} noValidate autoComplete="off">
       <TextField
-        id={params.id}
+        id={params.id}  // string
-        label={params.label}
+        label={params.label}  // string
         className={classes.textField}
         value={params.value}
         onChange={handleChange}
         margin={params.margin} // 'dense' | 'none' | 'normal'
-        required={params.required}
+        required={params.required}  // boolean
-        error={params.error}
+        error={params.error}  // boolean
-        disabled={params.disabled}
+        disabled={params.disabled}  // boolean
-        placeholder={params.placeholder}
+        placeholder={params.placeholder}  // string
-        helperText={params.helperText}
+        helperText={params.helperText}  // string
-        fullWidth={params.fullWidth}
+        fullWidth={params.fullWidth}  // boolean
         variant={params.variant} // 'filled' | 'outlined' | 'standard'
         type={params.type} // HTML input type
         InputLabelProps={{
-          shrink: params.shrink,
+          shrink: params.shrink,  // boolean
         }}
       />
     </form>

src/index.js

@@ -1,8 +1,16 @@
+//TODO: incluir gestion de estados
+//TODO: Añadir las funciones: createSelectFromDictionary, createCheckboxGroupFromDictionary
+//TODO: Hacer una función que permita cambiar un atributo de un mcf_component a partir del id del componente, el nombre del atributo y el nuevo valor del atributo
+//TODO: Hacer una función que permita encontrar un MCF_Component a partir de su id
+
+
+
 import ReactDOM from 'react-dom'
 
+import {makeStyles} from '@material-ui/core/styles'
+
 import ComponentFactory from './ComponentFactory'
 
-import {makeStyles} from '@material-ui/core/styles'
 
 
 const useStyles = makeStyles(theme => ({