feat(eslint): add eslint in addition to tslint (#75)

* feat(eslint): add eslint in addition to tslint

integrate eslint with pf recommended rules
update deps
adjust test to be more useful
dark theme for sidenav

* [cleanup] add support for linting js files

be more specific about which rules are disabled
update readme

Author: seanforyou23

.eslintrc

@@ -0,0 +1,30 @@
+{
+  // tells eslint to use the TypeScript parser
+  "parser": "@typescript-eslint/parser",
+  // tell the TypeScript parser that we want to use JSX syntax
+  "parserOptions": {
+    "tsx": true,
+    "jsx": true,
+    "js": true,
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": "."
+  },
+  // we want to use the recommended rules provided from the typescript plugin
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:patternfly-react/recommended"
+  ],
+  // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+  "plugins": ["@typescript-eslint", "react-hooks", "eslint-plugin-react-hooks"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "prettier/prettier": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "react/prop-types": "off"
+  }
+}

README.md

@@ -81,3 +81,7 @@ body {
 * To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
 * To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)
 * To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)
+* To ensure code styles remain consistent, we use [eslint](https://eslint.org/)
+
+### Linter Supper
+Currently, eslint and tslint are both supported. This is temporary. We will be removing support for tslint at some point in the near future, given tslint's roadmap to deprecate itself in favor of a more unified developer experience across TypeScript and JavaScript languages.

package.json

@@ -11,7 +11,9 @@
     "build": "webpack --config webpack.prod.js",
     "start": "webpack-dev-server --hot --color --progress --info=true --config webpack.dev.js",
     "test": "jest",
-    "lint": "tslint -c ./tslint.json --project .",
+    "tslint": "tslint -c ./tslint.json --project .",
+    "eslint": "eslint --ext .tsx,.js ./src/",
+    "lint": "yarn tslint && yarn eslint",
     "format": "prettier --check --write ./src/**/*.{tsx,ts,js}",
     "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
     "bundle-profile:analyze": "yarn build:bundle-profile && webpack-bundle-analyzer ./stats.json",
@@ -20,25 +22,30 @@
     "build:storybook": "build-storybook"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-info": "^5.2.1",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^5.2.1",
+    "@storybook/addon-actions": "^5.2.5",
+    "@storybook/addon-info": "^5.2.5",
+    "@storybook/addon-links": "^5.2.5",
+    "@storybook/addons": "^5.2.5",
+    "@storybook/react": "^5.2.5",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.17",
-    "@types/node": "^12.7.1",
-    "@types/react": "^16.8.25",
-    "@types/react-dom": "^16.8.5",
-    "@types/react-router-dom": "^4.3.4",
+    "@types/jest": "^24.0.21",
+    "@types/node": "^12.12.5",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.3",
+    "@types/react-router-dom": "^5.1.2",
     "@types/storybook__react": "^4.0.2",
     "@types/victory": "^33.0.0",
-    "@types/webpack": "^4.32.1",
+    "@types/webpack": "^4.39.8",
+    "@typescript-eslint/eslint-plugin": "^2.6.0",
+    "@typescript-eslint/parser": "^2.6.0",
     "css-loader": "^3.2.0",
     "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "enzyme-to-json": "^3.4.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.3",
+    "eslint": "^6.6.0",
+    "eslint-plugin-patternfly-react": "^0.2.3",
+    "eslint-plugin-react-hooks": "^2.2.0",
     "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
     "imagemin": "^7.0.0",
@@ -48,34 +55,34 @@
     "prettier": "^1.15.2",
     "prop-types": "^15.6.1",
     "raw-loader": "^3.1.0",
-    "react": "^16.8.4",
+    "react": "^16.11.0",
     "react-axe": "^3.0.2",
     "react-docgen-typescript-loader": "^3.2.1",
-    "react-dom": "^16.6.3",
+    "react-dom": "^16.11.0",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^3.0.0",
     "style-loader": "^1.0.0",
     "svg-url-loader": "^3.0.0",
-    "terser-webpack-plugin": "^2.1.0",
+    "terser-webpack-plugin": "^2.2.1",
     "ts-jest": "^24.0.0",
-    "ts-loader": "^6.0.2",
+    "ts-loader": "^6.2.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslint": "^5.13.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-react": "^4.0.0",
     "tslint-react-hooks": "^2.2.1",
-    "typescript": "^3.5.3",
-    "url-loader": "^2.1.0",
-    "webpack": "^4.39.1",
-    "webpack-bundle-analyzer": "^3.4.1",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2",
+    "typescript": "^3.6.4",
+    "url-loader": "^2.2.0",
+    "webpack": "^4.41.2",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
     "@patternfly/react-core": "^3.77.2",
-    "@patternfly/react-icons": "^3.10.15",
+    "@patternfly/react-icons": "^3.14.18",
     "@patternfly/react-styles": "^3.5.7",
     "react-router-dom": "^5.0.1",
     "react-router-last-location": "^2.0.1"

src/app/AppLayout/AppLayout.tsx

@@ -38,27 +38,26 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
       logo="Patternfly"
       logoProps={logoProps}
       toolbar="Toolbar"
-      showNavToggle={true}
+      showNavToggle
       isNavOpen={isNavOpen}
       onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
     />
   );
 
   const Navigation = (
-    <Nav id="nav-primary-simple">
-      <NavList id="nav-list-simple" variant={NavVariants.simple}>
-        {routes.map((route, idx) => {
-          return route.label && (
+    <Nav id="nav-primary-simple" theme="dark">
+      <NavList id="nav-list-simple" variant={NavVariants.default}>
+        {routes.map((route, idx) => route.label && (
             <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`}>
-              <NavLink exact={true} to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
+              <NavLink exact to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
             </NavItem>
-          );
-        })}
+          ))}
       </NavList>
     </Nav>
   );
   const Sidebar = (
     <PageSidebar
+      theme="dark"
       nav={Navigation}
       isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen} />
   );

src/app/Dashboard/Dashboard.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { PageSection, Title } from '@patternfly/react-core';
 
-const Dashboard: React.FunctionComponent<any> = (props) => {
-  return (
+const Dashboard: React.FunctionComponent<{}> = () => (
     <PageSection>
       <Title size="lg">Dashboard Page Title</Title>
     </PageSection>
-  );
-}
+  )
 
 export { Dashboard };

src/app/DynamicImport.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { accessibleRouteChangeHandler } from '@app/utils/utils';
 
 interface IDynamicImport {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   load: () => Promise<any>;
   children: any;
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   focusContentAfterMount: boolean;
 }
 

src/app/NotFound/NotFound.tsx

@@ -2,13 +2,11 @@ import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import { Alert, PageSection } from '@patternfly/react-core';
 
-const NotFound: React.FunctionComponent = () => {
-  return (
+const NotFound: React.FunctionComponent = () => (
     <PageSection>
       <Alert variant="danger" title="404! This view hasn't been created yet." /><br />
       <NavLink to="/" className="pf-c-nav__link">Take me home</NavLink>
     </PageSection>
-  );
-}
+  )
 
 export { NotFound };

src/app/Support/Support.tsx

@@ -15,16 +15,15 @@ export interface ISupportProps {
   sampleProp?: string;
 }
 
-const Support: React.FunctionComponent<ISupportProps> = (props) => {
-  return (
+const Support: React.FunctionComponent<ISupportProps> = () => (
     <PageSection>
       <EmptyState variant={EmptyStateVariant.full}>
         <EmptyStateIcon icon={CubesIcon} />
         <Title headingLevel="h5" size="lg">
           Empty State (Stub Support Module)
         </Title>
         <EmptyStateBody>
-          This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+          This represents an the empty state pattern in Patternfly 4. Hopefully it&apos;s simple enough to use but flexible
           enough to meet a variety of needs.
         </EmptyStateBody>
         <Button variant="primary">Primary Action</Button>
@@ -38,7 +37,6 @@ const Support: React.FunctionComponent<ISupportProps> = (props) => {
         </EmptyStateSecondaryActions>
       </EmptyState>
     </PageSection>
-  );
-}
+  )
 
 export { Support };

src/app/app.test.tsx

@@ -18,8 +18,9 @@ describe('App tests', () => {
   it('should hide the sidebar when clicking the nav-toggle button', () => {
     const wrapper = mount(<App />);
     const button = wrapper.find('#nav-toggle').hostNodes();
-    expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded'));
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeTruthy();
     button.simulate('click');
-    expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed'));
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeTruthy();
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeFalsy();
   });
 });

src/app/index.tsx

@@ -5,14 +5,12 @@ import { AppLayout } from '@app/AppLayout/AppLayout';
 import { AppRoutes } from '@app/routes';
 import '@app/app.css';
 
-const App: React.FunctionComponent = () => {
-  return (
+const App: React.FunctionComponent = () => (
     <Router>
       <AppLayout>
         <AppRoutes />
       </AppLayout>
     </Router>
   );
-};
 
 export { App };