Fix forms/grid

Author: Blari

src/components/Documentation/Documentation.js

@@ -54,6 +54,8 @@ const Documentation = (props) => {
             justifyContent='space-between'
             alignItems='center'
           >
+
+            {/* eslint-disable-next-line array-callback-return */}
             {structure.map((c) => {
               if (!c.children && window.location.hash.includes(c.link) && c.link) {
                 return (

src/pages/CRUD/Users/form/UsersFormPage.js

@@ -39,6 +39,7 @@ const UsersFormPage = (props) => {
       }
     }
     setDispatched(true);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [match, dispatch]);
 
   return (

src/pages/CRUD/Users/table/UsersTable.js

@@ -82,12 +82,14 @@ const UsersTable = () => {
 
   React.useEffect(() => {
     loadData(rowsState.pageSize, rowsState.page, sortModel[0], filterUrl);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortModel, rowsState, filterUrl]);
 
   React.useEffect(() => {
     updateWindowDimensions();
     window.addEventListener('resize', updateWindowDimensions);
     return () => window.removeEventListener('resize', updateWindowDimensions);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleSortModelChange = (newModel) => {

src/pages/draggablegrid/Components/AutoloadWidget.js

@@ -49,11 +49,11 @@ const AutoloadWidget = ({ classes }) => {
         Faith makes it possible to achieve that which man's mind can conceive and believe.
         </div>
       </Grid>
-      <Grid container direction={'column'} xs={12}>
+      <Grid container item direction={'column'} xs={12}>
         <Grid item className={classes.blocksMargin}>
           <FormGroup>
             <div className={classes.formLabels}>
-              <FormLabel for="exampleInputEmail1">&nbsp; Email address</FormLabel>
+              <FormLabel htmlFor="exampleInputEmail1">&nbsp; Email address</FormLabel>
             </div>
             <TextField
               id="exampleInputEmail1"
@@ -68,7 +68,7 @@ const AutoloadWidget = ({ classes }) => {
         <Grid item className={classes.blocksMargin}>
           <FormGroup>
             <div className={classes.formLabels}>
-              <FormLabel for="pswd"><i /> &nbsp; Password</FormLabel>
+              <FormLabel htmlFor="pswd"><i /> &nbsp; Password</FormLabel>
             </div>
             <TextField 
               id="pswd" 

src/pages/draggablegrid/Components/CollapsedWidget.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { withStyles } from '@mui/styles';
 import { Typography } from '@mui/material';
 
-
 const styles = (theme) => ({
   quote: {
     fontStyle: 'italic',
@@ -20,7 +19,7 @@ const styles = (theme) => ({
 
 const CollapsedWidget = ({ classes }) => {
   return (
-    <Typography>
+    <Typography component={'div'}>
       <blockquote className={classes.quote}>
         "There are no limits. There are plateaus, but you must not stay there, you must go beyond
         them. If it kills you, it kills you. A man must constantly exceed his level."

src/pages/draggablegrid/Components/DraggableStory.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { withStyles } from '@mui/styles';
-
 import { Button } from "../../../components/Wrappers";
 
-
 const styles = (theme) => ({
   container: {
     display: 'flex',
@@ -43,7 +41,12 @@ const DraggableStory = ({ classes }) => {
           <p className={classes.header}>Draggable story!</p>
           <p className={classes.description}><i>Build</i> your own interfaces! Sit back and relax.</p>
           <div>
-            <Button className={classes.button} size="large" color="warning" variant="contained" style={{ boxShadow: 'none' }}>Fullscreen me!</Button>
+            <Button
+              className={classes.button}
+              size="large"
+              color="warning"
+              variant="contained"
+              style={{ boxShadow: 'none' }}>Fullscreen me!</Button>
           </div>
         </div>
       </div>

src/pages/draggablegrid/Components/WidgsterInfo.js

@@ -12,29 +12,29 @@ const styles = (theme) => ({
 
 const WidgsterInfo = ({ classes }) => {
   return (
-    <Typography>
+    <Typography block={'div'}>
       <p>
-        <strong>Widgster</strong> is a plugin that allows to easily implement basic widget functions that
-        lots of our customers have requested. For now it has the following essential
-        widget features:
+          <strong>Widgster</strong> is a plugin that allows to easily implement basic widget functions that
+          lots of our customers have requested. For now it has the following essential
+          widget features:
       </p>
       <ul>
         <li><strong>Collapse/Expand</strong> - all widgets can be collapsed to fill only header&apos;s
-          vertical
-          space;
+            vertical
+            space;
         </li>
         <li><strong>Close</strong> - closable. Any widget may be removed by clicking the close btn;</li>
         <li><strong>Full Screen</strong> - an option to make widget fill the whole window (just like OS);</li>
         <li><strong>Ajax Load</strong> - the hottest option allowing to load/reload widget content
-          asynchronously. You just
-          need to provide an url to fetch the data from. With loader delivered.
+            asynchronously. You just
+            need to provide an url to fetch the data from. With loader delivered.
         </li>
       </ul>
       <p>It&apos;s available under MIT license, check out
-        <a className={classes.link} href="https://github.com/flatlogic/widgster" target="_blank" rel="noopener noreferrer"> github </a>
-        to find it.</p>
+          <a className={classes.link} href="https://github.com/flatlogic/widgster" target="_blank" rel="noopener noreferrer"> github </a>
+          to find it.</p>
       <p>
-        Test it out!
+          Test it out!
       </p>
     </Typography>
   )

src/pages/draggablegrid/DraggableGrid.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Grid, Typography } from '@mui/material';
-import { useTheme } from '@mui/styles';
 import Widget from '../../components/Widget';
 import Sortable from 'react-sortablejs'
 // Components
@@ -17,8 +16,6 @@ import useStyles from "./styles";
 
 function DraggableGrid() {
   const classes = useStyles();
-  // eslint-disable-next-line no-unused-vars
-  const theme = useTheme();
 
   return (
     <Grid container spacing={4} className={classes.root}>
@@ -41,11 +38,9 @@ function DraggableGrid() {
               className={classes.widgetLayout}
               title="Default Widget"
             >
-              <Typography >
                 {mock.mainData.default.map(item => (
-                    <p key={item.value}>{item.value}</p>
+                  <Typography key={item.value} component="p" gutterBottom>{item.value}</Typography>
                 ))}
-              </Typography>
             </Widget>
           </Grid>
           <Grid item xs={12} sm={12} md={12} lg={12}>
@@ -100,7 +95,7 @@ function DraggableGrid() {
               <Loader />
             </Widget>
           </Grid>
-          </Sortable>
+        </Sortable>
       </Grid>
     </Grid>
   )

src/pages/forms/elements/FormsElements.js

@@ -6,7 +6,7 @@ import {
   Divider,
   MenuItem,
   Select,
-  TextField, TextareaAutosize
+  TextField,
 } from "@mui/material";
 import { withStyles } from "@mui/styles";
 import useStyles from "./styles";
@@ -49,26 +49,6 @@ const GreenRadio = withStyles({
   }
 })(props => <Radio color="default" {...props} />);
 
-const SuccessInput = withStyles(theme => ({
-  root: {
-    "& .MuiInputLabel-root": {
-      color: "green"
-    },
-    "& .MuiOutlinedInput-root": {
-      "& fieldset": {
-        borderColor: "green"
-      },
-      "&:hover fieldset": {
-        borderColor: "green"
-      },
-      "&.Mui-focused fieldset": {
-        borderColor: "green",
-        borderWidth: 2
-      }
-    }
-  }
-}))(props => <Input {...props} />);
-
 const actions = [
   {
     id: 0,
@@ -523,15 +503,13 @@ export default function FormsElements() {
               </Grid>
               <Grid item container alignItems="center">
                 <Grid xs={12} item>
-                  <TextareaAutosize
+                  <TextField
                       id="outlined-multiline-static"
                       label="Multiline"
                       multiline
-                      minRows="4"
+                      rows={4}
                       defaultValue="Default Value"
-                      margin="none"
-                      variant="outlined"
-                      style={{ width: '100%' }}
+                      style={{marginTop: '1rem', width: '100%'}}
                   />
                 </Grid>
               </Grid>

src/pages/forms/validation.js

@@ -23,13 +23,13 @@ export default () => {
           >
             <Grid
               container
-              direction={"column"}
+              direction="column"
               alignItems="center"
               spacing={6}
             >
-              <Grid item container alignItems={"center"} xs={6}>
+              <Grid item container alignItems="center" xs={6}>
                 <Grid item xs={6}>
-                  <Typography variant={"body1"}>Simple required</Typography>
+                  <Typography variant="body1">Simple required</Typography>
                 </Grid>
                 <Grid xs={6} item>
                   <Input