chore: update dependencies

.circleci/config.yml

@@ -23,7 +23,7 @@ aliases:
 defaults: &defaults
   working_directory: ~/repo
   docker:
-    - image: circleci/node:12.14.1
+    - image: cimg/node:14.18.2
 
 version: 2
 jobs:

.eslintrc.js

@@ -1,11 +1,22 @@
 module.exports = {
   extends: ['algolia', 'algolia/react'],
   rules: {
-    'react/prop-types': 0,
-    'no-param-reassign': 0,
     'eslint-comments/disable-enable-pair': 0,
+    // Do not enforce a specific import order
+    'import/order': 0,
+    // Allow function components
+    'react/function-component-definition': 0,
+    // Allow boolean props without explicit values
+    'react/jsx-boolean-value': 0,
+    // Allow JSX content in .js files
+    'react/jsx-filename-extension': 0,
+    // Do not enforce event listeners naming conventions
+    'react/jsx-handler-names': 0,
+    // Allow passing function references to event listeners
+    'react/jsx-no-bind': 0,
     // Avoid errors about `UNSAFE` lifecycles (e.g. `UNSAFE_componentWillMount`)
     'react/no-deprecated': 0,
+    'react/prop-types': 0,
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
   },
@@ -14,4 +25,10 @@ module.exports = {
       version: 'detect',
     },
   },
+  parserOptions: {
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
+  },
 };

.nvmrc

@@ -1 +1 @@
-12.14.1
+14.18.2

.stylelintrc.json

@@ -11,9 +11,9 @@
     "stylelint-prettier/recommended"
   ],
   "rules": {
-    "selector-class-pattern": [
-      "^(?:ais-|uni-)[A-Z][a-zA-Z0-9]+[-a-zA-Z0-9]+$|^(?!ais-|uni-)(?:[a-z][a-z0-9]+)(?:-[a-z0-9]+)+$"
-    ],
+    "alpha-value-notation": "number",
+    "color-function-notation": "legacy",
+    "selector-class-pattern": "^(?:ais-|uni-)[A-Z][a-zA-Z0-9]+[-a-zA-Z0-9]+$|^(?!ais-|uni-)(?:[a-z][a-z0-9]+)(?:-[a-z0-9]+)+$",
     "prettier/prettier": true,
     "max-nesting-depth": [
       2,
@@ -31,6 +31,12 @@
       {
         "severity": "warning"
       }
+    ],
+    "value-keyword-case": [
+      "lower",
+      {
+        "ignoreKeywords": ["currentColor", "optimizeSpeed"]
+      }
     ]
   }
 }

README.md

@@ -1,7 +1,7 @@
 # Unified InstantSearch E-Commerce
 
 <p align="center">
-<img src="https://cl.ly/c3fa6a6b250a/Screenshot%2525202019-05-27%252520at%25252010.17.35.png" />
+<a href="https://www.algolia.com/doc/guides/building-search-ui/resources/unified-instantsearch/react/"><img src="./.github/unified-instantsearch-ecommerce.png" alt="Unified InstantSearch E-Commerce" width="1280" /></a>
 </p>
 
 **This project aims to be used by any e-commerce website to bootstrap a search experience powered by Algolia the fastest way possible.**

package.json

@@ -8,68 +8,69 @@
     "export": "NODE_ENV=production webpack --config webpack/build.babel.js",
     "preview": "NODE_ENV=production webpack --config webpack/preview.babel.js",
     "lint": "run-p -c lint:*",
-    "lint:js": "eslint --ext .js .",
+    "lint:js": "eslint --ext .js src",
     "lint:css": "stylelint '**/*.(s)css'",
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "algoliasearch": "4.1.0",
+    "algoliasearch": "4.12.2",
     "invariant": "2.2.4",
-    "preact": "10.4.0",
-    "qs": "6.9.3",
-    "react-instantsearch-dom": "6.4.0",
-    "react-router-dom": "5.1.2",
+    "preact": "10.6.6",
+    "qs": "6.10.3",
+    "react-instantsearch-dom": "6.22.0",
+    "react-router-dom": "6.2.2",
     "rheostat": "2.2.0",
     "search-insights": "1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/preset-env": "7.9.5",
-    "@babel/preset-react": "7.9.4",
-    "@babel/register": "7.9.0",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "8.1.0",
+    "@babel/core": "7.17.5",
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/preset-env": "7.16.11",
+    "@babel/preset-react": "7.16.7",
+    "@babel/register": "7.17.0",
+    "babel-loader": "8.2.3",
     "babel-plugin-strip-invariant": "1.0.0",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "5.1.1",
-    "css-loader": "3.5.2",
-    "eslint": "6.8.0",
-    "eslint-config-algolia": "15.0.0",
-    "eslint-config-prettier": "6.10.1",
-    "eslint-plugin-eslint-comments": "3.1.2",
-    "eslint-plugin-import": "2.20.2",
-    "eslint-plugin-jest": "23.8.2",
-    "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "3.0.0",
-    "html-webpack-plugin": "4.3.0",
+    "copy-webpack-plugin": "10.2.4",
+    "css-loader": "6.6.0",
+    "css-minimizer-webpack-plugin": "3.4.1",
+    "eslint": "8.10.0",
+    "eslint-config-algolia": "20.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-eslint-comments": "3.2.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jest": "26.1.1",
+    "eslint-plugin-jsdoc": "37.9.6",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.29.2",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "html-webpack-plugin": "5.5.0",
     "ignore-styles": "5.0.1",
-    "mini-css-extract-plugin": "0.9.0",
+    "mini-css-extract-plugin": "2.5.3",
     "module-alias": "2.2.2",
-    "node-sass": "4.13.1",
     "npm-run-all": "4.1.5",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "postcss": "7.0.27",
+    "postcss": "8.4.7",
     "postcss-inject-css-variables": "0.0.2",
-    "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.7.0",
-    "prettier": "2.0.4",
-    "sass-loader": "8.0.2",
-    "shipjs": "0.21.0",
-    "style-loader": "1.2.1",
-    "stylelint": "13.3.2",
+    "postcss-loader": "6.2.1",
+    "postcss-preset-env": "7.4.2",
+    "prettier": "2.5.1",
+    "sass": "1.49.9",
+    "sass-loader": "12.6.0",
+    "shipjs": "0.24.3",
+    "style-loader": "3.3.1",
+    "stylelint": "14.5.3",
     "stylelint-a11y": "1.2.3",
-    "stylelint-config-prettier": "8.0.1",
-    "stylelint-config-sass-guidelines": "7.0.0",
-    "stylelint-config-standard": "20.0.0",
-    "stylelint-no-unsupported-browser-features": "4.0.0",
-    "stylelint-order": "4.0.0",
-    "stylelint-prettier": "1.1.2",
-    "terser-webpack-plugin": "2.3.6",
-    "webpack": "4.43.0",
-    "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.10.3",
-    "webpack-merge": "4.2.2"
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-sass-guidelines": "9.0.1",
+    "stylelint-config-standard": "25.0.0",
+    "stylelint-no-unsupported-browser-features": "5.0.3",
+    "stylelint-order": "5.0.0",
+    "stylelint-prettier": "2.0.0",
+    "terser-webpack-plugin": "5.3.1",
+    "webpack": "5.69.1",
+    "webpack-cli": "4.9.2",
+    "webpack-dev-server": "4.7.4",
+    "webpack-merge": "5.8.0"
   },
   "_moduleAliases": {
     "react": "node_modules/preact/compat"

postcss.config.js

@@ -1,9 +1,5 @@
 /* eslint-disable import/no-commonjs, no-global-assign */
 
-// When the configuration file refers to `window`, we need to shim it so it
-// doesn't break when processed with Node during the build step.
-window = global;
-
 require('module-alias/register');
 require('ignore-styles');
 

src/App.js

@@ -1,6 +1,6 @@
 import React, { createPortal } from 'preact/compat';
 import { connectHitInsights } from 'react-instantsearch-dom';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 import { getUrlFromState, getStateFromUrl, createURL } from './router';
 import { useSearchClient, useInsights, useMatchMedia } from './hooks';
@@ -10,7 +10,7 @@ export const AppContext = React.createContext(null);
 export const SearchContext = React.createContext(null);
 
 export function App({ config }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const searchClient = useSearchClient(config);
   const { aa, userToken } = useInsights(
@@ -60,10 +60,9 @@ export function App({ config }) {
     clearTimeout(lastSetStateId.current);
 
     lastSetStateId.current = setTimeout(() => {
-      history.push(
-        getUrlFromState({ location }, nextSearchState),
-        nextSearchState
-      );
+      navigate(getUrlFromState({ location }, nextSearchState), {
+        state: nextSearchState,
+      });
 
       if (config.googleAnalytics) {
         window.ga('send', 'pageView', `?query=${nextSearchState.query}`);
@@ -114,11 +113,11 @@ export function App({ config }) {
       setSearchState(nextSearchState);
 
       if (JSON.stringify(searchState) !== JSON.stringify(nextSearchState)) {
-        history.push('', nextSearchState);
+        navigate('', { state: nextSearchState });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOverlayShowing, setSearchState, history]);
+  }, [isOverlayShowing, setSearchState, navigate]);
 
   React.useEffect(() => {
     if (topAnchor.current) {
@@ -196,6 +195,7 @@ export function App({ config }) {
             <div
               style={{ zIndex: config.styles.baseZIndex }}
               className="uni-Overlay"
+              aria-hidden="true"
               onClick={() => setIsOverlayShowing(false)}
             />
 
@@ -214,12 +214,12 @@ export function App({ config }) {
                   searchClient={searchClient}
                   indexName={config.index.indexName}
                   searchState={searchState}
-                  onSearchStateChange={onSearchStateChange}
                   createURL={createURL}
-                  onClose={() => setIsOverlayShowing(false)}
                   setView={setView}
                   isFiltering={isFiltering}
                   setIsFiltering={setIsFiltering}
+                  onSearchStateChange={onSearchStateChange}
+                  onClose={() => setIsOverlayShowing(false)}
                 />
               </SearchContext.Provider>
             </div>