Add script for lint (#7)

DynamoDS · Oct 7, 2022 · d495681 · d495681
1 parent 11e4bde
commit d495681
Show file tree

Hide file tree

Showing 14 changed files with 309 additions and 213 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,33 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": ["dist"],
+  "rules": {
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
+    "jsx-quotes": ["error", "prefer-single"]
+  }
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # SplashScreen
+
 Dynamo Splash Screen
 
 [![License](https://img.shields.io/npm/l/@dynamods/splash-screen)](https://github.com/DynamoDS/SplashScreen/blob/master/LICENSE)
@@ -66,6 +67,19 @@ If you need to update `npm`, you can make it using `npm`!
 
     npm run bundle
 
+## Lint
+
+We use [ESlint](https://eslint.org/) to analyze and find problems. It has [integrations](https://eslint.org/docs/latest/user-guide/integrations) for various editors and other tools.
+
+- To find problems
+
+      npm run lint:check
+
+- To fix problems
+
+      npm run lint:fix
+
 ## Generate Third Party License Info
-* to generate about box html files use `npm run generate_license`, this will output alternative about box files to `license_output/` One will contain the full transitive production dep list, the other will contain the direct production deps.
-* These files will be packed into the released npm package
+
+- to generate about box html files use `npm run generate_license`, this will output alternative about box files to `license_output/` One will contain the full transitive production dep list, the other will contain the direct production deps.
+- These files will be packed into the released npm package
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/splash-screen",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Splash Screen maintained by Dynamo Team@Autodesk",
   "author": "Autodesk Inc.",
   "license": "MIT",
@@ -21,6 +21,8 @@
     "react-scripts": "5.0.1"
   },
   "scripts": {
+    "lint:check": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
     "start": "webpack serve --config webpack.config.js",
     "build": "webpack --config webpack.config.js --mode=development",
     "bundle": "webpack --config webpack.config.js --mode=production",

diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
 </head>
 
 <body>
   <script>
-    document.querySelector('body').style.overflow='hidden'
+    document.querySelector('body').style.overflow = 'hidden'
   </script>
   <div id="root"></div>
 </body>
 
-
-
-</html>
+</html>
diff --git a/src/App.css b/src/App.css
@@ -1,21 +1,22 @@
-.menuOptions{
-  color:white;    
+.menuOptions {
+  color: white;
   padding-top: 1rem;
   font-size: 13px;
 }
-.dynamoLogo{
+
+.dynamoLogo {
   width: 153px;
 }
 
-.bottomMenu{
+.bottomMenu {
   height: 50%;
 }
 
-.welcomeRow{
+.welcomeRow {
   margin-top: 20px !important;
 }
 
-.screenBackground{
+.screenBackground {
   height: 377px;
   width: 320px;
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,21 @@
-import './App.css';
 import React from 'react';
-import Dynamic from './Dynamic';
-import Static from './Static';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import 'bootstrap/dist/css/bootstrap.min.css';
+
+import Dynamic from './Dynamic';
+import Static from './Static';
 import { base64DynamoLogo, base64DynamoBackground } from './encodedImages';
 
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 class App extends React.Component {
   constructor() {
     super();
     this.setBackgroundImage();
     this.state = {
-      welcomeToDynamoTitle: "Welcome to Dynamo!",
+      welcomeToDynamoTitle: 'Welcome to Dynamo!',
       loadingDone: false
     };
 
@@ -25,7 +26,7 @@ class App extends React.Component {
   }
 
   setBackgroundImage() {
-    const backgroundImage = "#base64BackgroundImage"
+    const backgroundImage = '#base64BackgroundImage';
     if (!backgroundImage.includes('#'))
       base64DynamoBackground = backgroundImage;
   }
@@ -68,7 +69,7 @@ class App extends React.Component {
           </Col>
         </Row>
       </Container>
-    )
+    );
   }
 
   //This method sets the labels of the splash screen as an option of localization
@@ -78,15 +79,15 @@ class App extends React.Component {
       signInTitle: labels.signInTitle,
       launchTitle: labels.launchTitle,
       showScreenAgainLabel: labels.showScreenAgainLabel
-    })
+    });
   }
 
   //This methos is called when the loading is done from Dynamo side
   setLoadingDone() {
     this.setState({
       loadingDone: true
-    })
+    });
   }
 }
 
-export default App;
+export default App;
diff --git a/src/Dynamic.css b/src/Dynamic.css
@@ -1,30 +1,32 @@
 .progress-bar-container {
-    height: 4px;
-    margin: 10px 0px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 25px;
-    position:relative;
-  }
-
-  .progress-bar-indicator {
-    height: 100%; 
-    border-radius: 25px;
-    -webkit-mask:linear-gradient(#fff 0 0);
-            mask:linear-gradient(#fff 0 0);
-  }
-  .progress-bar-indicator::before {
-    content:"";
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;    
-    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), #38ABDF, #38ABDF);
-  }
+  height: 4px;
+  margin: 10px 0px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 25px;
+  position: relative;
+}
 
-  .dynamicOptions{
-    margin-top: 50px;
-  }
-  .loadingTimeFooter{
-    font-size: 9px;
-  }
+.progress-bar-indicator {
+  height: 100%;
+  border-radius: 25px;
+  -webkit-mask: linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0);
+}
+
+.progress-bar-indicator::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), #38ABDF, #38ABDF);
+}
+
+.dynamicOptions {
+  margin-top: 50px;
+}
+
+.loadingTimeFooter {
+  font-size: 9px;
+}
diff --git a/src/Dynamic.js b/src/Dynamic.js
@@ -1,52 +1,49 @@
 import React from 'react';
-import './Dynamic.css'
 
-class Dynamic extends React.Component {
+import './Dynamic.css';
 
-    constructor() {
-        super();
-        this.state = {
-            barSize: "0%",
-            dynamoVersion: "",
-            loadDescription: "",
-            loadingTime: "Loading time: "
-        }
+class Dynamic extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      barSize: '0%',
+      dynamoVersion: '',
+      loadDescription: '',
+      loadingTime: 'Loading time: ',
+    };
 
-        //This is a reference to the DOM of the project that will be called in Dynamo to fill the loading properties
-        window.setBarProperties = this.setBarProperties.bind(this);
-    }
+    //This is a reference to the DOM of the project that will be called in Dynamo to fill the loading properties
+    window.setBarProperties = this.setBarProperties.bind(this);
+  }
 
-    render() {
-        return (
-            <div className='dynamicOptions'>
-                <div >
-                    Dynamo core {this.state.dynamoVersion}
-                </div>
-                <div>
-                    <div className="progress-bar-container">
-                        <div className="progress-bar-indicator" style={{ width: this.state.barSize }} ></div>
-                    </div>
-                </div>
-                <div >
-                    {this.state.loadDescription}
-                </div>
-                <br/>
-                <br/>
-                <div className='loadingTimeFooter' >
-                    {this.state.loadingTime}
-                </div>                
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div className='dynamicOptions'>
+        <div>Dynamo core {this.state.dynamoVersion}</div>
+        <div>
+          <div className='progress-bar-container'>
+            <div
+              className='progress-bar-indicator'
+              style={{ width: this.state.barSize }}
+            ></div>
+          </div>
+        </div>
+        <div>{this.state.loadDescription}</div>
+        <br />
+        <br />
+        <div className='loadingTimeFooter'>{this.state.loadingTime}</div>
+      </div>
+    );
+  }
 
-    setBarProperties(dynamoVersion, loadDescription, barSize, loadingTime) {
-        this.setState({ 
-            barSize: barSize,
-            dynamoVersion: dynamoVersion,
-            loadDescription: loadDescription,
-            loadingTime: loadingTime
-        })
-    }
+  setBarProperties(dynamoVersion, loadDescription, barSize, loadingTime) {
+    this.setState({
+      barSize: barSize,
+      dynamoVersion: dynamoVersion,
+      loadDescription: loadDescription,
+      loadingTime: loadingTime,
+    });
+  }
 }
 
-export default Dynamic;
+export default Dynamic;