.babelrc

@@ -1,3 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {"loose": true}
+    ]
+  ]
 }

.eslintrc.js

@@ -1,55 +0,0 @@
-module.exports = {
-  // 'plugins': ['jest'],
-  'env': {
-    'commonjs': true,
-    'es6': true,
-    'node': true,
-    // 'jest/globals': true,
-  },
-  'extends': [
-    'eslint:recommended',
-    'plugin:react/recommended',
-  ],
-  'globals': {
-    'Atomics': 'readonly',
-    'SharedArrayBuffer': 'readonly',
-  },
-  'parserOptions': {
-    'ecmaVersion': 2018,
-    'sourceType': 'module',
-  },
-  'rules': {
-    'indent': [
-      'error',
-      2,
-    ],
-    'linebreak-style': [
-      'error',
-      'unix',
-    ],
-    'quotes': [
-      'error',
-      'single',
-      { 'avoidEscape': true },
-    ],
-    'semi': [
-      'error',
-      'never',
-    ],
-    'comma-dangle': [
-      'error',
-      'always-multiline',
-    ],
-    'arrow-parens': [
-      'error',
-      'as-needed',
-    ],
-    'no-var': [
-      'error',
-    ],
-    'prefer-const': ['error', {
-      'destructuring': 'all',
-      'ignoreReadBeforeAssign': true,
-    }],
-  },
-}

.gitignore

@@ -1,2 +1 @@
-/node_modules/
-/.idea/
+node_modules/

README.md

@@ -1,21 +1,10 @@
-# MCF-Components
+# MCF-Components-Lib
 
-Se trata de una biblioteca de componentes de basada en `react` y `material-ui`. Con ella se pueden usar estas bibliotecas definiendo los componentes mediante objetos javascript planos.
+This library exports an unique method to render components using *React* and *Material-UI* through a javascript object where is placed all
+the information needed.
 
-## Entorno de desarrollo
+The method is **render**
 
-La biblioteca está escrita usando `react` y `material-ui`.
+## Installation
 
-Se transpila usando `babel` y se compila con `webpack`.
-
-
-## Arquitectura
-
-El código de la aplicación se encuentra condensado en el archivo `index.js`, el cual exporta los métodos `render` y `remove`.
-
-El método `render` genera toda la estructura de componentes react a partir de la definición que se le pasa como primer argumento.
-Hace falta un segundo argumento: el ID del nodo HTML dentro del cual se quiere generar los componentes.
-
-La definición es pasada a una factoría de componentes que es quien se encarga de formar de manera recursiva todos los elementos.
-
-El método `remove` permite eliminar la estructura de componentes creada en un nodo HTML.
+To install the library you can get the repository or install it as a dependency.

dist/mcf-components.js.LICENSE.txt

@@ -1,74 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/**
- * A better abstraction over CSS.
- *
- * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
- * @website https://github.com/cssinjs/jss
- * @license MIT
- */
-
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.12.0
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**!
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 1.16.1-lts
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */

package.json

@@ -1,34 +1,34 @@
 {
   "name": "mcf-components",
-  "version": "0.2.0",
-  "description": "Library to render component templates created using React and Material-UI",
+  "version": "0.1.1",
+  "description": "Library to render component templates pre-created using React and Material-UI",
   "main": "dist/mcf-components.js",
   "scripts": {
+    "start": "webpack-dev-server --open --config webpack.dev.js",
     "dist": "webpack --config webpack.prod.js",
     "test": "jest",
     "test:watch": "jest --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/runtime": "^7.14.8",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.0.6",
-    "webpack": "^5.49.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.8.0"
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.4.0",
+    "jest": "^24.9.0",
+    "mini-css-extract-plugin": "^0.8.1",
+    "style-loader": "^1.0.2",
+    "webpack": "^4.41.3",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-select": "^4.3.1"
+    "@material-ui/core": "4.3.3",
+    "prop-types": "15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-select": "^3.0.8"
   }
 }

src/ComponentFactory.js

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import MCF_Autocomplete from './components/MCF_AutoComplete'
-import MCF_Button from './components/MCF_Button'
-import MCF_Card from './components/MCF_Card'
-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'
-
-
-
-export default class ComponentFactory {
-  static createComponent(componentConfig) {
-    const params = componentConfig.params
-    params.key = params.parentKey !== undefined ? params.parentKey + params.id : params.id
-
-    switch (componentConfig.type) {
-    case 'autocomplete':
-      return <MCF_Autocomplete key={params.key} params={params}/>
-    case 'button':
-      return <MCF_Button key={params.key} params={params}/>
-    case 'card':
-      return <MCF_Card key={params.key} params={params}/>
-    case 'checkbox':
-      return <MCF_Checkbox key={params.key} params={params}/>
-    case 'checkboxesGroup':
-      return <MCF_CheckboxesGroup key={params.key} params={params}/>
-    case 'dialog':
-      return <MCF_Dialog key={params.key} params={params}/>
-    case 'divider':
-      return <MCF_Divider key={params.key} params={params}/>
-    case 'fileUpload':
-      return <MCF_FileUpload key={params.key} params={params}/>
-    case 'mediaCard':
-      return <MCF_MediaCard key={params.key} params={params}/>
-    case 'select':
-      return <MCF_Select key={params.key} params={params}/>
-    case 'text':
-      return <MCF_Text key={params.key} params={params}/>
-    default:
-      throw new Error(`MCF-Components ==> The component type ${componentConfig.type} does not exist. Check the component config with id ${componentConfig.params.id}`)
-    }
-  }
-}

src/components/MCF_AutoComplete.js

@@ -1,38 +0,0 @@
-/* eslint-disable react/prop-types */
-
-import React, { useState } from 'react'
-
-import Autocomplete from '@material-ui/lab/Autocomplete'
-import TextField from '@material-ui/core/TextField'
-
-
-
-export default function MCF_Autocomplete (props) {
-  const [params, setParams] = useState(props.params)
-
-  const handleChange = (event, newValue) => {
-    setParams({...params, value: newValue})
-
-    if (params.onChangeListener) {
-      params.onChangeListener(newValue)
-    }
-  }
-
-  return (
-    <Autocomplete
-      id={params.id}  // string
-      value={params.value}  // an option from params.options
-      style={{width: params.width}}  // number
-      options={params.options}  // options to select
-      defaultValue={params.defaultValue}  // an option from params.options
-      getOptionLabel={option => option.key}
-      onChange={handleChange}
-      renderInput={parameters => <TextField
-        {...parameters}
-        label={params.label}  // string
-        variant={params.variant}  // 'filled' | 'outlined' | 'standard'
-        margin={params.margin} // 'dense' | 'none' | 'normal'
-      />}
-    />
-  )
-}

src/components/MCF_Button.js

@@ -1,27 +0,0 @@
-/* eslint-disable react/prop-types */
-
-import React, {useState} from 'react'
-
-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()
-
-  return (
-    <Button
-      className={classes.button}
-      color={params.color}  // 'default' | 'inherit' | 'primary' | 'secondary'
-      size={params.size}  // 'large' | 'medium' | 'small'
-      variant={params.variant}  // 'contained' | 'outlined' | 'text'
-      disabled={params.disabled}  // boolean
-      onClick={params.onClickListener}
-    >
-      {params.text/* string */}
-    </Button>
-  )
-}

src/components/MCF_Card.js

@@ -1,36 +0,0 @@
-/* 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'
-
-
-
-export default function MCF_Card (props) {
-  const [params, setParams] = useState(props.params)
-  const classes = useStyles()
-
-  const renderContents = () => {
-    return params.contents.map(contentConfig => {
-      contentConfig.params.parentKey = params.key
-      return ComponentFactory.createComponent(contentConfig)
-    })
-  }
-
-  return (
-    <Card className={classes.card}>
-      <CardHeader
-        title={params.mainText}  // string
-        subheader={params.secondaryText}  // string
-      />
-      <CardContent>
-        {renderContents()}
-      </CardContent>
-    </Card>
-  )
-}

src/components/MCF_Checkbox.js

@@ -1,32 +0,0 @@
-/* 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)
-
-  const handleChange = event => {
-    params.onChangeListener(params.id, event.target.checked)
-    setParams({...params, checked: event.target.checked})
-  }
-
-  return (
-    <FormControlLabel
-      id={params.id}  // string
-      key={params.id}
-      control={
-        <Checkbox
-          checked={params.checked}  // boolean
-          onChange={handleChange}
-          name={params.id}
-        />
-      }
-      label={params.label}  // string
-    />
-  )
-}

src/components/MCF_CheckboxesGroup.js

@@ -1,59 +0,0 @@
-/* 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 {useStyles} from '../index'
-
-
-
-export default function MCF_CheckboxesGroup (props) {
-  const [params, setParams] = useState(props.params)
-  const classes = useStyles()
-  params.checkboxesState = {}
-  params.checkboxes.map(checkbox => {
-    params.checkboxesState[checkbox.id] = checkbox.isChecked
-  })
-
-  const handleChange = (checkboxID, checkboxValue) => {
-    params.onChangeListener(checkboxID, checkboxValue)
-    params.checkboxesState[checkboxID] = checkboxValue
-    setParams(params)
-  }
-
-  const createCheckboxes = () => {
-    return (
-      params.checkboxes.map(checkbox => {
-        const checkboxConfig = {
-          type: 'checkbox',
-          params: {
-            id: checkbox.id,  // string
-            checked: checkbox.checked,  // boolean
-            label: checkbox.label,  // string
-            onChangeListener: handleChange,
-          },
-        }
-
-        return ComponentFactory.createComponent(checkboxConfig)
-      })
-    )
-  }
-
-  return (
-    <FormControl component="fieldset" className={classes.formControl}>
-      <FormLabel component="legend">{params.label}</FormLabel>
-      <FormHelperText>{params.helperText/* string */}</FormHelperText>
-      <FormGroup
-        id={params.id}  // string
-        row={params.isRow}  // boolean
-      >
-        {createCheckboxes()}
-      </FormGroup>
-    </FormControl>
-  )
-}

src/components/MCF_Dialog.js

@@ -1,88 +0,0 @@
-/* eslint-disable react/prop-types */
-
-import React, {useState} from 'react'
-
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-
-import ComponentFactory from '../ComponentFactory'
-
-
-
-export default function MCF_Dialog (props) {
-  const [params, setParams] = useState(props.params)
-
-  const handleOpen = () => {
-    setParams({...params, open: true})
-    if (params.openListener) {
-      params.openListener()
-    }
-  }
-  const handleClose = () => {
-    setParams({...params, open: false})
-    if (params.closeListener) {
-      params.closeListener()
-    }
-  }
-
-  const renderContents = () => {
-    return params.contents.map(contentParams => {
-      contentParams.params.parentParams = params
-      contentParams.params.parentParams.handleClose = handleClose
-      contentParams.params.parentParams.handleClickOpen = handleOpen
-      contentParams.params.parentKey = params.key
-      contentParams.setParentParams = setParams
-      return ComponentFactory.createComponent(contentParams)
-    })
-  }
-
-  const renderActionContents = () => {
-    return params.actionContents.map(contentParams => {
-      contentParams.params.parentParams = params
-      contentParams.params.parentParams.handleClose = handleClose
-      contentParams.params.parentParams.handleClickOpen = handleOpen
-      contentParams.params.parentKey = params.key
-      contentParams.setParentParams = setParams
-      return ComponentFactory.createComponent(contentParams)
-    })
-  }
-
-  return (
-    <div>
-      <Button
-        variant={params.openButtonVariant}  // 'contained' | 'outlined' | 'text'
-        color={params.openButtonColor}  // 'default' | 'inherit' | 'primary' | 'secondary'
-        onClick={handleOpen}>
-        {params.openButtonText/* string */}
-      </Button>
-      <Dialog
-        open={params.open}  // boolean
-        onClose={handleClose}
-        aria-labelledby={params.id}
-      >
-        <DialogTitle id={params.id/* string */}>
-          {params.titleText/* string */}
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {params.contentText/* string */}
-          </DialogContentText>
-          {renderContents()}
-        </DialogContent>
-        <DialogActions>
-          {renderActionContents()}
-          <Button
-            variant={params.closeButtonVariant}  // 'contained' | 'outlined' | 'text'
-            color={params.closeButtonColor}  // 'default' | 'inherit' | 'primary' | 'secondary'
-            onClick={handleClose}>
-            {params.closeButtonText/* string */}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  )
-}

src/components/MCF_Divider.js

@@ -1,13 +0,0 @@
-import React from 'react'
-
-import {useStyles} from '../index'
-
-
-
-export default function MCF_Divider () {
-  const classes = useStyles()
-
-  return (
-    <div className={classes.divider}/>
-  )
-}

src/components/MCF_FileUpload.js

@@ -1,77 +0,0 @@
-/* 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()
-
-  if (params.acceptedFormats === undefined) params.acceptedFormats = '*!/!*'
-
-  useEffect(() => {
-    const input = document.getElementById(params.id)
-
-    input.addEventListener('change', event => {
-      event.preventDefault()
-
-      const files = document.querySelector('input[type=file]').files
-      if (files.length > 0) {
-        const formData = new FormData()
-        formData.append('tkn', params.token)
-        if (params.storagePath) formData.append('path', params.storagePath)
-        for (let i = 0; i < files.length; i++) {
-          formData.append('files[]', files[i])
-        }
-
-        if (params.beforeFetchListener) params.beforeFetchListener(files)
-
-        fetch(params.url, {
-          method: 'POST',
-          body: formData,
-        }).then(response => {
-          if (response) params.files = files
-          handleUploadSuccess(response)
-        })
-          .catch(error => handleUploadError(error))
-      }
-    })
-  }, [])
-  
-  const handleUploadSuccess = response => {
-    if (params.onUpload) params.onUpload(response, params.files)
-    setParams(params)
-  }
-
-  const handleUploadError = error => {
-    if (params.onError) params.onError(error)
-    params.files = null
-  }
-
-  return (
-    <div>
-      <input
-        id={params.id}  // string
-        className={classes.input}
-        accept={params.acceptedFormats}  // strings array
-        multiple
-        type="file"
-      />
-      <label htmlFor={params.id}>
-        <Button
-          className={classes.button}
-          color={params.color}  // 'default' | 'inherit' | 'primary' | 'secondary'
-          size={params.size}  // 'large' | 'medium' | 'small'
-          variant={params.variant}  // 'contained' | 'outlined' | 'text'
-          component="span">
-          {params.text}
-        </Button>
-      </label>
-    </div>
-  )
-}

src/components/MCF_MediaCard.js

@@ -1,43 +0,0 @@
-/* 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 CardMedia from '@material-ui/core/CardMedia'
-
-import ComponentFactory from '../ComponentFactory'
-import {useStyles} from '../index'
-
-
-
-export default function MCF_MediaCard (props) {
-  const [params, setParams] = useState(props.params)
-  const classes = useStyles()
-
-  const renderContents = () => {
-    return params.contents.map(contentConfig => {
-      contentConfig.params.parentKey = params.key
-      return ComponentFactory.createComponent(contentConfig)
-    })
-  }
-
-  return (
-    <Card className={classes.card}>
-      <CardHeader
-        title={params.mainText}  // string
-        subheader={params.secondaryText}  // string
-      />
-      <CardMedia
-        className={classes.media}
-        image={params.imageURL}  // string: URL
-        title={params.imageTitle}  // string
-        alt={params.imageAlt}  // string
-      />
-      <CardContent>
-        {renderContents()}
-      </CardContent>
-    </Card>
-  )
-}

src/components/MCF_Select.js

@@ -1,72 +0,0 @@
-/* eslint-disable react/prop-types */
-
-import React, {useState} from 'react'
-
-import FormControl from '@material-ui/core/FormControl'
-import FormHelperText from '@material-ui/core/FormHelperText'
-import Input from '@material-ui/core/Input'
-import InputLabel from '@material-ui/core/InputLabel'
-import MenuItem from '@material-ui/core/MenuItem'
-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()
-
-  const handleInteraction = event => {
-    const option = params.options.find(option => option.value === event.target.value)
-    params.value = option.value
-    if (params.onSelectListener) params.onSelectListener(option.id, option.value)
-    setParams(params)
-  }
-  const createList = () => {
-    return (
-      params.options.map(option => {
-        return (
-          <MenuItem
-            key={option.id}  // string
-            value={option.value}
-          >
-            {option.label/*string*/}
-          </MenuItem>
-        )
-      })
-    )
-  }
-
-  return (
-    <FormControl
-      className={classes.formControl}
-      disabled={params.disabled}  // boolean
-      error={params.error}  // boolean
-      required={params.required}  // boolean
-    >
-      <InputLabel
-        shrink={params.shrink}  // boolean
-        htmlFor={params.id}
-      >
-        {params.label}
-      </InputLabel>
-      <Select
-        value={params.value}
-        displayEmpty={params.displayEmpty}  // boolean
-        autoWidth={params.autoWidth}  // boolean
-        onChange={handleInteraction}
-        input={<Input
-          name={params.id}
-          id={params.id}  // string
-          readOnly={params.readOnly}  // boolean
-        />}
-      >
-        {createList()}
-      </Select>
-      <FormHelperText>
-        {params.helperText/* string */}
-      </FormHelperText>
-    </FormControl>
-  )
-}

src/components/MCF_Text.js

@@ -1,51 +0,0 @@
-/* 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()
-  
-  const handleChange = event => {
-    const setError = isError => {
-      setParams({...params, value: event.target.value, error: isError})
-    }
-
-    setParams({...params, value: event.target.value})
-
-    if (params.onChangeListener){
-      params.onChangeListener(event.target.value, setError)
-    }
-  }
-
-
-  return (
-    <form className={classes.container} noValidate autoComplete="off">
-      <TextField
-        id={params.id}  // string
-        label={params.label}  // string
-        className={classes.textField}
-        value={params.value}
-        onChange={handleChange}
-        margin={params.margin} // 'dense' | 'none' | 'normal'
-        required={params.required}  // boolean
-        error={params.error}  // boolean
-        disabled={params.disabled}  // boolean
-        placeholder={params.placeholder}  // string
-        helperText={params.helperText}  // string
-        fullWidth={params.fullWidth}  // boolean
-        variant={params.variant} // 'filled' | 'outlined' | 'standard'
-        type={params.type} // HTML input type
-        InputLabelProps={{
-          shrink: params.shrink,  // boolean
-        }}
-      />
-    </form>
-  )
-}

webpack.common.js

@@ -1,4 +1,4 @@
-const path = require('path')
+const path = require('path');
 
 module.exports = {
   entry: './src/index.js',
@@ -6,7 +6,7 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'mcf-components.js',
     library: 'mcfComponents',
-    libraryTarget: 'umd',
+    libraryTarget: 'umd'
   },
   module: {
     rules: [
@@ -19,4 +19,4 @@ module.exports = {
       },
     ],
   },
-}
+};

webpack.dev.js

@@ -1,5 +1,5 @@
-const {merge} = require('webpack-merge')
-const common = require('./webpack.common.js')
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
   mode: 'development',
@@ -7,4 +7,4 @@ module.exports = merge(common, {
   devServer: {
     contentBase: './dist',
   },
-})
+});

webpack.prod.js

@@ -1,7 +1,7 @@
-const {merge} = require('webpack-merge')
-const common = require('./webpack.common.js')
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
-})
+});