Add changes for eslint, fix lint errors

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/**
+dist/**

.eslintrc

@@ -0,0 +1,43 @@
+{
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react"
+  ],
+  "parser": "babel-eslint",
+  "plugins": [
+    "react",
+    "jsx-a11y",
+    "react-hooks",
+    "notice",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react/jsx-fragments": [
+      0
+    ],
+    "react/forbid-prop-types": [
+      2,
+      {
+        "forbid": [
+          "any"
+        ]
+      }
+    ],
+    "react/jsx-props-no-spreading": 0,
+    "arrow-parens": 0,
+    "react/jsx-filename-extension": 0,
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "peerDependencies": true
+      }
+    ]
+  }
+}

gulpfile.js

@@ -1,13 +1,4 @@
-/*
- * Licensed Materials - Property of IBM
- *
- * PID 5725-H26
- *
- * Copyright IBM Corporation 2020. All Rights Reserved.
- *
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
+
 
 /* eslint-disable  no-console */
 const path = require('path');

package.json

@@ -7,6 +7,7 @@
     "build": "gulp prod:spm",
     "dev": "gulp dev:spm",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "./node_modules/.bin/eslint ./src",
     "start": "webpack-dev-server --mode development",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -23,7 +24,19 @@
     "@storybook/addon-links": "^6.3.8",
     "@storybook/react": "^6.3.8",
     "babel-loader": "^8.0.2",
+    "babel-eslint": "^10.1.0",
     "css-loader": "^1.0.0",
+    "dotenv": "^8.2.0",
+    "dotenv-webpack": "^3.0.0",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-notice": "^0.9.10",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "node-sass": "^4.14.1",
@@ -49,6 +62,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
-    "regenerator-runtime": "^0.13.7"
+    "regenerator-runtime": "^0.13.7",
+    "prop-types": "*"
   }
 }

public-path.js

@@ -19,4 +19,4 @@ const spmUIComponentsRootURL = serverRootURL
 // Concatenate the correct public path for use in webpack bundles.
 const publicPath = `${serverRootURL}${spmUIComponentsRootURL}`;
 
-export default __webpack_public_path__ = publicPath;
+export default __webpack_public_path__ = publicPath; // eslint-disable-line

src/react/Logo/Logo.stories.js

@@ -8,11 +8,8 @@ export default {
   component: Logo,
 }
 
-//👇 We create a “template” of how args map to rendering
 const Template = (args) => <div className="spm-custom-component"> <Logo {...args} ><img src={Example} alt="logo" /></Logo></div>;
 
-//👇 Each story then reuses that template
-
 export const Small = Template.bind({});
 
 Small.args = {

src/react/Logo/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import Logo from './Logo';
 
 const getWrapper = (iframeWindow, containerID) => {
-    console.log(`${containerID}`);
   return iframeWindow.document.getElementById(`${containerID}`);
 }
 
@@ -23,4 +22,4 @@ const render = ({
   );
 };
 
-export  { render };
+export default { render };

src/react/PersonFolio/PersonFolio.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import cx from 'classnames';
 import settings from '../settings';
 
@@ -32,15 +32,23 @@ const PersonFolio = ({ children, className, age, ...other }) => {
      * Pass in the image that will be rendered within the Avatar
      */
     children: PropTypes.node,
+
     /**
      * Additional styling
      */
     className: PropTypes.string,
+
+    /**
+     * Additional styling
+     */
+     age: PropTypes.number,
 
   };
 
   PersonFolio.defaultProps = {
     className: undefined,
+    children: undefined,
+    age: undefined,
   };
 
 export default PersonFolio;

src/react/PersonFolio/PersonFolio.stories.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PersonFolio from './PersonFolio';
 
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <div className="spm-custom-component"> <PersonFolio firstname="Mary" surname="Bloggs" {...args} ></PersonFolio></div>;
+// 👇 We create a “template” of how args map to rendering
+const Template = (args) => <div className="spm-custom-component"> <PersonFolio firstname="Mary" surname="Bloggs" {...args}  /></div>;
 
-//👇 Each story then reuses that template
+// 👇 Each story then reuses that template
 
 export const Child = Template.bind({});
 
@@ -37,29 +37,25 @@ export const PersonFolioStory = () => {
         <div className="bx--grid">
           <div className="bx--row">
             <div className="bx--col">            
-                <PersonFolio firstname="Dave" surname="Bloggs" age="12" >
-                </PersonFolio>          
+                <PersonFolio firstname="Dave" surname="Bloggs" age="12"  />          
             </div>
           </div>
 
           <div className="bx--row">
             <div className="bx--col">        
-                <PersonFolio firstname="Mary" surname="Bloggs" age="24" >
-                </PersonFolio>
+                <PersonFolio firstname="Mary" surname="Bloggs" age="24"  />
             </div>
           </div>
 
           <div className="bx--row">
             <div className="bx--col">
-                <PersonFolio firstname="Ann" surname="Bloggs" age="47" >
-                </PersonFolio>
+                <PersonFolio firstname="Ann" surname="Bloggs" age="47"  />
             </div>
           </div>
 
           <div className="bx--row">
             <div className="bx--col">
-                <PersonFolio firstname="Peter" surname="Smith" age="73" >
-                </PersonFolio>
+                <PersonFolio firstname="Peter" surname="Smith" age="73"  />
             </div>
           </div>
         </div>

src/react/PersonFolio/index.js

@@ -21,5 +21,5 @@ const render = ({
   );
 };
 
-export  { render };
+export default { render };
 

src/react/index.js

@@ -1,7 +1,8 @@
 import 'regenerator-runtime/runtime';
 import * as  Logo from './Logo';
-export { Logo };
 import * as  PersonFolio from './PersonFolio';
+
+export { Logo };
 export { PersonFolio };
 
 

src/react/settings.js

@@ -1,13 +1,3 @@
-/*
- * Licensed Materials - Property of IBM
- *
- * PID 5725-H26
- *
- * Copyright IBM Corporation 2020. All Rights Reserved.
- *
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
 
 const settings = {
   prefix: 'bx',

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require("path");
-const webpack = require("webpack");
 
 module.exports = {
   entry: ['./public-path.js', "./src/index.js"],