Eslint fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "0.1.0-r265",
+  "version": "0.1.0-r274",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "scripts": {
@@ -9,6 +9,7 @@
     "copy-web-asm": "cp node_modules/web-ifc/web-ifc.wasm public/static/js",
     "build": "yarn copy-web-asm && yarn clean && yarn new-version && node config/build.js",
     "serve": "yarn build && node config/serve.js",
+    "lint": "yarn eslint `find src -name '*.jsx'` `find src -name '*.js'`",
     "test": "jest"
   },
   "dependencies": {

src/Components/AboutPanel.jsx

@@ -1,117 +1,138 @@
 import React from 'react'
 import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
-import { makeStyles } from '@mui/styles'
+import {makeStyles} from '@mui/styles'
 import About from '../assets/3D/attention.svg'
 
-
-export function AboutControl ({offsetTop}) {
-  const [open, setOpen]=React.useState(true);
-  const classes = useStyles();
+/**
+ * Button to toggle About panel on and off
+ * @param {Number} offsetTop offset tree element
+ * @return {Object} The AboutControl react component.
+ */
+export default function AboutControl({offsetTop}) {
+  const [open, setOpen]=React.useState(true)
+  const classes = useStyles()
   return (
     <div >
-      <Typography className = {classes.about}  onClick={() => {setOpen(!open)}}>About</Typography>
-      {open && <AboutPanel openToggle={()=>{setOpen(!open)}} offsetTop={offsetTop}/>}
-    </div>);
-};
+      <Typography className = {classes.about} onClick={() => {
+        setOpen(!open)
+      }}>About</Typography>
+      {open && <AboutPanel openToggle={()=>{
+        setOpen(!open)
+      }} offsetTop={offsetTop}/>}
+    </div>)
+}
 
-function AboutPanel ({openToggle, offsetTop}) {
-  const classes = useStyles({offsetTop:offsetTop});
+/**
+ * About Panel component
+ * @param {string} offset tree element
+ * @return {Component} componet
+ */
+function AboutPanel({openToggle, offsetTop}) {
+  const classes = useStyles({offsetTop: offsetTop})
 
   return (
-  <div className = {classes.container} onClick = {openToggle}>
-    <Paper elevation={3} className={classes.panel}>
-      <h1 style = {{width:'100%', display:'flex', justifyContent:'center', paddingTop:'10px'}}><About/></h1>
-      <p><strong>BLDRS</strong> is a collaborative integration environment for IFCs 🙂</p>
-      <p> We are open source 🌱 Please visit our repository:&nbsp;
-      <a href = {'https://github.com/buildrs/Share'} target="_new">github.com/buildrs/Share</a></p>
-      <p>We are just getting started, stay tuned for the upcoming MVP release 🚀</p>
-      <h2 >Features:</h2>
-      <ul>
-        <li>Upload IFC file</li>
-        <li>Share IFC model with the URL address</li>
-        <li>Select IFC element</li>
-        <li>Obtain IFC element properties </li>
-      </ul>
-    </Paper>
-  </div>
-  );
-};
+    <div className = {classes.container}
+      role = "none"
+      onClick = {openToggle}
+      onKeyDown={openToggle} >
+      <Paper elevation={3} className={classes.panel}>
+        <h1 className = {classes.title}><About/></h1>
+        <p><strong>BLDRS</strong> is a collaborative integration environment for IFCs 🙂</p>
+        <p> We are open source 🌱 Please visit our repository:&nbsp;
+          <a href = {'https://github.com/buildrs/Share'} target="_new">
+            github.com/buildrs/Share
+          </a>
+        </p>
+        <p>We are just getting started, stay tuned for the upcoming MVP release 🚀</p>
+        <h2 >Features:</h2>
+        <ul>
+          <li>Upload IFC file</li>
+          <li>Share IFC model with the URL address</li>
+          <li>Select IFC element</li>
+          <li>Obtain IFC element properties </li>
+        </ul>
+      </Paper>
+    </div>
+  )
+}
 
 const useStyles = makeStyles({
-  container:{
+  container: {
     position: 'absolute',
-    top:'0px',
-    left:'0px',
-    width:'100%',
-    height:'100vh',
-    display:'flex',
-    justifyContent:'center',
+    top: '0px',
+    left: '0px',
+    width: '100%',
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
   },
+  title: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    paddingTop: '10px'},
   panel: {
-    position:'relative',
-    top: (props) => props.offsetTop,
-    width: '320px',
-    height:'380px',
-    fontFamily: 'Helvetica',
-    padding: '1em 1em',
+    'position': 'relative',
+    'top': (props) => props.offsetTop,
+    'width': '320px',
+    'height': '380px',
+    'fontFamily': 'Helvetica',
+    'padding': '1em 1em',
     '@media (max-width: 900px)': {
       width: '84%',
-      height:'400px',
+      height: '400px',
     },
-    "& h1, & h2": {
+    '& h1, & h2': {
       color: '#696969',
-      fontWeight:200
+      fontWeight: 200,
     },
-    "& h1": {
+    '& h1': {
       marginTop: 0,
-      fontWeight:200
+      fontWeight: 200,
     },
-    "& h2": {
-      textAlign:'center',
-      fontSize:'20px'
+    '& h2': {
+      textAlign: 'center',
+      fontSize: '20px',
     },
-    "& p": {
-      fontWeight:200,
-      textAlign:'center',
-      lineHeight:'19px',
+    '& p': {
+      'fontWeight': 200,
+      'textAlign': 'center',
+      'lineHeight': '19px',
       '@media (max-width: 900px)': {
-        lineHeight:'22px'
-    },
+        lineHeight: '22px',
+      },
     },
-    "& li": {
-      fontWeight:200,
+    '& li': {
+      fontWeight: 200,
     },
-    "& a": {
-      color:'lime',
-      backgroundColor:'#848484',
-      paddingLeft:'4px',
-      paddingRight:'4px',
-      paddingBottom:'2px',
-      cornerRadius:'2px'
+    '& a': {
+      color: 'lime',
+      backgroundColor: '#848484',
+      paddingLeft: '4px',
+      paddingRight: '4px',
+      paddingBottom: '2px',
+      cornerRadius: '2px',
     },
-
   },
-
-  about:{
-    cursor:'pointer',
-    paddingRight:'10px',
+  about: {
+    cursor: 'pointer',
+    paddingRight: '10px',
   },
-  icon:{
-    width:'30px',
-    height:'30px',
-    cursor:'pointer'
+  icon: {
+    width: '30px',
+    height: '30px',
+    cursor: 'pointer',
   },
   closeButton: {
-    float:'right',
-    cursor:'pointer',
-    marginTop:'8px',
-    "& svg": {
-        width:'24px',
-        height:'20px',
+    'float': 'right',
+    'cursor': 'pointer',
+    'marginTop': '8px',
+    '& svg': {
+      width: '24px',
+      height: '20px',
     },
-  }
-});
-
+  },
+})
 
 

src/Components/GuidePanel.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {makeStyles} from '@mui/styles'
+import IconButton from '@mui/material/IconButton'
 import Paper from '@mui/material/Paper'
 import Close from '../assets/3D/clear.svg'
 import Question from '../assets/3D/help.svg'
@@ -62,13 +63,13 @@ const QuestionIcon = ({offsetTop}) => {
   const [open, setOpen]=React.useState(false)
   const classes = useStyles()
   return (
-    <div onClick={() => {
+    <IconButton onClick={() => {
       setOpen(!open)
     }}>
       <Question className = {classes.icon}/> {open && <GuidePanel openToggle={()=>{
         setOpen(!open)
       }} offsetTop={offsetTop}/>}
-    </div>)
+    </IconButton>)
 }
 
 
@@ -78,7 +79,7 @@ const GuidePanel = ({openToggle, offsetTop}) => {
   return (
     <div className = {classes.container}>
       <Paper elevation={3} className={classes.panel}>
-        <div className = {classes.closeButton} onClick = {openToggle}><Close/></div>
+        <div className = {classes.closeButton}><Close onClick = {openToggle}/></div>
         <h1>Guide</h1>
         <p>To select an element:</p>
         <ul>

src/Components/ItemPropertiesDrawer.jsx

@@ -94,9 +94,11 @@ const ItemPropertiesDrawer = ({
           classes={{paper: classes.drawerPaper}}
         >
           <div className ={classes.drawerContainer}>
-            <div className={classes.headerWrapper} onClick={onClose}>
+            <div className={classes.headerWrapper} >
               <div className={classes.title}>{title}</div>
-              <div className = {classes.closeContainer}><Close className={classes.close} /></div>
+              <div className = {classes.closeContainer}>
+                <Close className={classes.close} onClick={onClose}/>
+              </div>
             </div>
 
             <div className = {classes.contentContainer}>

src/Components/NavPanel.jsx

@@ -43,6 +43,7 @@ export default function NavPanel({
         setExpandedElements(parts)
       }
     }
+  // eslint-disable-next-line
   }, [location])
 
   const classes = useStyles()