diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f47a86b --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +node_modules/** +dist/** \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..3a4dd70 --- /dev/null +++ b/.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 + } + ] + } +} diff --git a/gulpfile.js b/gulpfile.js index 64710f8..8e8984b 100644 --- a/gulpfile.js +++ b/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'); diff --git a/package.json b/package.json index f3d1830..0d17bad 100644 --- a/package.json +++ b/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": "*" } } diff --git a/public-path.js b/public-path.js index 7c0ca7a..a0d42bb 100644 --- a/public-path.js +++ b/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 diff --git a/src/react/Logo/Logo.stories.js b/src/react/Logo/Logo.stories.js index 0f856f7..6a4c12f 100644 --- a/src/react/Logo/Logo.stories.js +++ b/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) =>
logo
; -//👇 Each story then reuses that template - export const Small = Template.bind({}); Small.args = { diff --git a/src/react/Logo/index.js b/src/react/Logo/index.js index 550b5be..c4ba0fc 100644 --- a/src/react/Logo/index.js +++ b/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 }; diff --git a/src/react/PersonFolio/PersonFolio.js b/src/react/PersonFolio/PersonFolio.js index 0315e69..5c54c81 100644 --- a/src/react/PersonFolio/PersonFolio.js +++ b/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; \ No newline at end of file diff --git a/src/react/PersonFolio/PersonFolio.stories.js b/src/react/PersonFolio/PersonFolio.stories.js index 5713c03..9c225ab 100644 --- a/src/react/PersonFolio/PersonFolio.stories.js +++ b/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) =>
; +// 👇 We create a “template” of how args map to rendering +const Template = (args) =>
; -//👇 Each story then reuses that template +// 👇 Each story then reuses that template export const Child = Template.bind({}); @@ -37,29 +37,25 @@ export const PersonFolioStory = () => {
- - +
- - +
- - +
- - +
diff --git a/src/react/PersonFolio/index.js b/src/react/PersonFolio/index.js index 028f5e8..fac8bac 100644 --- a/src/react/PersonFolio/index.js +++ b/src/react/PersonFolio/index.js @@ -21,5 +21,5 @@ const render = ({ ); }; -export { render }; +export default { render }; diff --git a/src/react/index.js b/src/react/index.js index ce3b04c..0092e0f 100644 --- a/src/react/index.js +++ b/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 }; diff --git a/src/react/settings.js b/src/react/settings.js index a3023e9..10f7cb2 100644 --- a/src/react/settings.js +++ b/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', diff --git a/webpack.config.js b/webpack.config.js index cf1237d..5c2af92 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,4 @@ const path = require("path"); -const webpack = require("webpack"); module.exports = { entry: ['./public-path.js', "./src/index.js"],