Ww setup linter

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     'import/resolver': {
       node: {
         paths: ['src'],
-        extensions: ['.js', '.ts', '.d.ts', '.tsx'],
+        extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx'],
       },
     },
     react: {
@@ -23,11 +23,14 @@ module.exports = {
     'plugin:react-redux/recommended',
     'plugin:react/jsx-runtime',
     'plugin:jsdoc/recommended',
-    //'plugin:jsx-a11y/recommended',
+    'plugin:jsx-a11y/recommended',
     'react-app',
     'react-app/jest',
     'prettier',
   ],
+  globals: {
+    "JSX": "readonly"
+  },
   overrides: [
     {
       files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
@@ -44,7 +47,9 @@ module.exports = {
   // Run `yarn eslint --print-config foo.js > bar.json` to see included plugins.
   // plugins: [],
   rules: {
+    'id-length': ['error', { min: 2 }],
     'jsdoc/require-hyphen-before-param-description': ['warn', 'always'],
+    'jsdoc/tag-lines': ['error', 'any', { startLines: 1 }],
     'no-console': ['warn'],
     'no-use-before-define': ['error'],
     'no-unused-vars': [
@@ -58,6 +63,10 @@ module.exports = {
     'no-var': ['error'],
     'prefer-const': ['error'],
     radix: ['error'],
+    'react/jsx-no-leaked-render': [
+      'error',
+      { validStrategies: ['coerce', 'ternary'] },
+    ],
     'react/no-multi-comp': ['error', { ignoreStateless: true }],
     'react/no-unstable-nested-components': ['error'],
     'react/self-closing-comp': ['error'],

.github/workflows/ci.yml

@@ -7,12 +7,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: '20.x'
 
       - name: Install Node dependencies
         run: |

craco.config.js

@@ -1,3 +1,4 @@
+const CracoEsbuildPlugin = require('craco-esbuild');
 const CracoLessPlugin = require('craco-less');
 const path = require('path');
 const {
@@ -12,7 +13,8 @@ const {
   loaderByName,
   throwUnexpectedConfigError,
 } = require('@craco/craco');
-const webpack = require('webpack');
+
+const { ProvidePlugin } = require('webpack');
 
 module.exports = {
   webpack: {
@@ -31,7 +33,7 @@ module.exports = {
                 const replacement =
                   '/data-research/consumer-complaints/search/api/v1/';
                 console.log(
-                  `Replaced "${match}" in file "${this.resource}" with "${replacement}.`
+                  `Replaced "${match}" in file "${this.resource}" with "${replacement}.`,
                 );
                 return replacement;
               },
@@ -41,25 +43,48 @@ module.exports = {
           ],
         },
       };
+
+      webpackConfig.ignoreWarnings = [
+        function ignoreSourcemapsloaderWarnings(warning) {
+          return (
+            warning.module &&
+            warning.module.resource.includes('node_modules') &&
+            warning.details &&
+            warning.details.includes('source-map-loader')
+          );
+        },
+      ];
+
       addBeforeLoader(
         webpackConfig,
         loaderByName('babel-loader'),
-        strReplaceLoader
+        strReplaceLoader,
       );
 
       //
       return webpackConfig;
     },
+    plugins: [
+      new ProvidePlugin({
+        React: 'react',
+      }),
+    ],
   },
   plugins: [
+    {
+      plugin: CracoEsbuildPlugin,
+      options: {
+        skipEsbuildJest: true, // Optional. Set to true if you want to use babel for jest tests,
+      },
+    },
     {
       plugin: CracoLessPlugin,
       options: {
         lessLoaderOptions: {
           lessOptions: {
             modifyVars: {
               hack: `true;@import (reference) "${require.resolve(
-                './src/css/base.less'
+                './src/css/base.less',
               )}";`,
             },
             javascriptEnabled: true,

dist/ccdb5.js.LICENSE.txt

@@ -103,7 +103,7 @@ object-assign
  */
 
 /**
- * @remix-run/router v1.0.2
+ * @remix-run/router v1.8.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -114,7 +114,7 @@ object-assign
  */
 
 /**
- * React Router DOM v6.4.2
+ * React Router DOM v6.15.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -125,7 +125,7 @@ object-assign
  */
 
 /**
- * React Router v6.4.2
+ * React Router v6.15.0
  *
  * Copyright (c) Remix Software Inc.
  *

package.json

@@ -20,7 +20,7 @@
     "dist/*"
   ],
   "scripts": {
-    "analyze": "craco build; source-map-explorer 'build/static/js/*.js'",
+    "analyze": "craco build; source-map-explorer '../static/js/*.js'",
     "build": "NODE_ENV=production ./scripts/build.sh",
     "eject": "react-scripts eject",
     "lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,json,md}\" --write && yarn eslint ./src --fix && yarn stylelint \"src/**/*.{css,less}\" --fix && yarn lint:cypress",
@@ -56,66 +56,68 @@
     "@cfpb/cfpb-tables": "0.27.0",
     "@cfpb/cfpb-typography": "0.27.0",
     "@craco/craco": "^7.1.0",
-    "@reduxjs/toolkit": "^1.8.5",
+    "@reduxjs/toolkit": "^2.1.0",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "britecharts": "git+https://github.com/cfpb/britecharts.git#v2.4.2",
     "coveralls": "^3.0.9",
-    "craco-less": "^2.0.0",
+    "craco-esbuild": "^0.5.2",
+    "craco-less": "^3.0.1",
     "cypress": "^10.10.0",
     "d3": "^5.12.0",
     "d3-selection": "^1.4.0",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.11.10",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
+    "enzyme-adapter-react-16": "^1.15.7",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-jsdoc": "^46.2.6",
-    "eslint-plugin-react-redux": "^4.0.0",
+    "eslint-plugin-jsdoc": "^48.0.6",
+    "eslint-plugin-react-redux": "^4.1.0",
     "highcharts": "9.2.2",
-    "history": "^4.10.1",
+    "history": "^5.3.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "3.0.0",
-    "intro.js": "^6.0.0",
-    "intro.js-react": "0.6.0",
-    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "1.0.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "less": "^4.1.3",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
     "less-plugin-clean-css": "^1.5.1",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^15.2.2",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.6",
     "mockdate": "^3.0.5",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.35",
     "postcss-less": "^6.0.0",
     "postcss-preset-env": "^7.8.2",
     "postcss-safe-parser": "^6.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.4",
     "prop-types": "^15.5.10",
     "query-string": "^5.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.6.0",
-    "react-bootstrap-typeahead": "^6.0.0",
+    "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.2.0",
-    "react-intl": "^6.2.0",
+    "react-intl": "^6.6.2",
     "react-modal": "^3.16.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^6.4.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.2",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.2.0",
-    "release-it": "^15.11.0",
+    "release-it": "^17.0.3",
     "string-replace-loader": "^3.1.0",
-    "stylelint": "^14.14.0",
-    "stylelint-config-recommended-less": "^1.0.4"
+    "stylelint": "^16.2.1",
+    "stylelint-config-recommended-less": "^3.0.1"
   },
   "lint-staged": {
     "src/**/*.{css,less}": [

scripts/build.sh

@@ -21,6 +21,3 @@ sed -i "" -e "s/$search/$replace/g" -e "s/\.[a-zA-Z0-9]*\.woff/.woff/g" dist/ccd
 # Move JS assets.
 mv ./build/static/js/main.*.js ./dist/ccdb5.js
 mv ./build/static/js/main.*.js.map ./dist/ccdb5.js.map
-
-# Move text assets
-mv ./build/static/js/main.*.LICENSE.txt ./dist/ccdb5.js.LICENSE.txt

src/App.js

@@ -24,9 +24,9 @@ const composeEnhancers = composeWithDevTools({
 const store = createStore(
   reducers,
   composeEnhancers(
-    applyMiddleware(...middleware)
+    applyMiddleware(...middleware),
     // other store enhancers if any
-  )
+  ),
 );
 
 /* eslint-disable camelcase */
@@ -44,6 +44,7 @@ export const DetailComponents = () => {
 // eslint-disable-next-line react/no-multi-comp
 /**
  * Main App Component
+ *
  * @returns {JSX.Element} Main app
  */
 export const App = () => {

src/__tests__/App.spec.js

@@ -26,18 +26,18 @@ describe('initial state', () => {
     render(
       <Provider store={store}>
         <App />
-      </Provider>
+      </Provider>,
     );
 
     expect(updateLocationHookSpy).toBeCalledTimes(1);
 
     expect(screen.getByText(/Consumer Complaint Database/)).toBeDefined();
     expect(screen.getByText(/Search within/)).toBeDefined();
     expect(
-      screen.getByRole('button', { name: /Show advanced search tips/ })
+      screen.getByRole('button', { name: /Show advanced search tips/ }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: /Take a tour/ })
+      screen.getByRole('button', { name: /Take a tour/ }),
     ).toBeInTheDocument();
   });
 
@@ -58,14 +58,14 @@ describe('initial state', () => {
             <Route path="/detail/:id" element={<DetailComponents />} />
           </Routes>
         </Provider>
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
     expect(
-      screen.getByRole('link', { name: /Back to search results/ })
+      screen.getByRole('link', { name: /Back to search results/ }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('link', { name: /Back to search results/ })
+      screen.getByRole('link', { name: /Back to search results/ }),
     ).toHaveAttribute('href', '/?something');
 
     expect(screen.getByText('This page is loading')).toBeInTheDocument();

src/__tests__/utils.spec.js

@@ -315,7 +315,7 @@ describe('module::utils', () => {
       sendAnalyticsEvent('myAction Name', 'some label');
       expect(Analytics.getDataLayerOptions).toHaveBeenCalledWith(
         'myAction Name',
-        'some label'
+        'some label',
       );
       expect(Analytics.sendEvent).toHaveBeenCalled();
     });

src/actions/__tests__/analytics.spec.js

@@ -26,8 +26,8 @@ describe('action:analytics', () => {
         'action tracker',
         false,
         'Consumer Complaint Search',
-        mockCallback
-      )
+        mockCallback,
+      ),
     ).toEqual(expectedEvent);
   });
 
@@ -44,8 +44,8 @@ describe('action:analytics', () => {
         'woah nelly action',
         'label',
         'my category',
-        mockCallback
-      )
+        mockCallback,
+      ),
     );
 
     expect(callbackConfirm).toEqual('hello world');
@@ -55,9 +55,8 @@ describe('action:analytics', () => {
     window.dataLayer = [];
     Analytics.tagManagerIsLoaded = true;
     Analytics.sendEvent(
-      Analytics.getDataLayerOptions('woah nelly action', 'label')
+      Analytics.getDataLayerOptions('woah nelly action', 'label'),
     );
-    console.log('Window Datalayer: ', window.dataLayer);
     expect(window.dataLayer.length > 0).toBe(true);
   });
 });