Major dep update

.eslintrc.json

@@ -1,5 +1,10 @@
 {
-  "extends": ["airbnb", "plugin:@typescript-eslint/recommended", "prettier"],
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
+    "prettier"
+  ],
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "react-hooks"],
   "env": {
@@ -52,6 +57,7 @@
     "no-restricted-syntax": "off",
     "no-shadow": "off",
     "no-use-before-define": "off",
+    "storybook/prefer-pascal-case": "off",
     "react/function-component-definition": [
       "error",
       {

.storybook/main.js

@@ -1,12 +1,17 @@
 module.exports = {
   core: {
     builder: 'webpack5',
+    disableTelemetry: true,
   },
   stories: ['../stories/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-knobs',
-    '@storybook/addon-actions/register',
+    '@storybook/addon-actions',
     './purposeFunction/register.js',
   ],
+  framework: '@storybook/react',
   staticDirs: ['../assets'],
+  docsPage: {
+    docs: 'automatic',
+  },
 };

.storybook/preview.js

@@ -1,28 +1,25 @@
 import React from 'react'; // Still needed for deployed storybook to work
-import { addDecorator, addParameters } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import StoryRouter from 'storybook-react-router';
 
 import franklinTheme from './franklin-theme';
 
 import '../src/styles/index.scss';
 
-addDecorator(withInfo);
-
-addDecorator(StoryRouter());
-
-addDecorator((storyFn) => (
-  <div
-    style={{
-      padding: '2rem 10rem',
-    }}
-  >
-    {storyFn()}
-  </div>
-));
-
-addParameters({
+export const parameters = {
   docs: {
     theme: franklinTheme,
   },
-});
+};
+
+export const decorators = [
+  StoryRouter(),
+  (storyFn) => (
+    <div
+      style={{
+        padding: '2rem 10rem',
+      }}
+    >
+      {storyFn()}
+    </div>
+  ),
+];

.storybook/webpack.config.js

@@ -47,15 +47,29 @@ module.exports = async ({ config }) => {
   });
 
   // use react-svg-loader for svg files in react components
-  config.module.rules.push({
-    test: /\.svg$/i,
-    issuer: /\.tsx?$/,
-    use: [
-      {
-        loader: '@svgr/webpack',
-      },
-    ],
-  });
+  config.module.rules.push(
+    {
+      test: /\.svg$/i,
+      issuer: /\.(j|t)sx?$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            prettier: false,
+            svgo: false,
+            svgoConfig: {
+              plugins: [{ removeViewBox: false }],
+            },
+          },
+        },
+      ],
+    },
+    {
+      test: /\.svg$/i,
+      issuer: /\.(css|scss)?$/,
+      loader: 'svg-url-loader',
+    }
+  );
 
   // Otherwise use svg-url-loader
   config.module.rules.push({

package.json

@@ -3,12 +3,16 @@
   "description": "React and Zurb Foundation based design system for life sciences web applications",
   "version": "0.0.212",
   "main": "dist/franklin-components.js",
+  "exports": {
+    ".": "./dist/franklin-components.js",
+    "./styles.css": "./dist/styles.css"
+  },
   "files": [
     "src",
     "dist",
     "assets"
   ],
-  "types": "dist/types/components/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "repository": "https://github.com/ebi-uniprot/franklin.git",
   "author": "Xavier Watkins <[email protected]>",
@@ -33,9 +37,13 @@
     "prepare": "husky install"
   },
   "browserslist": [
-    "last 2 version",
-    "> 1%",
-    "IE 11"
+    "defaults",
+    "Firefox >= 35",
+    "Chrome >= 40",
+    "Edge >= 12",
+    "Safari >= 9",
+    "cover 95% in CN",
+    "not dead"
   ],
   "jest": {
     "coverageReporters": [
@@ -46,10 +54,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "lines": 80.14,
-        "statements": 79.64,
-        "functions": 78.67,
-        "branches": 70.16
+        "lines": 79.77,
+        "statements": 79.34,
+        "functions": 78.6,
+        "branches": 70.08
       }
     },
     "setupFilesAfterEnv": [
@@ -91,84 +99,82 @@
     "foundation-sites": "6.7.5",
     "history": "4.10.1",
     "lodash-es": "4.17.21",
-    "query-string": "7.1.1",
     "timing-functions": "2.0.1",
     "tippy.js": "6.3.7",
-    "type-fest": "3.1.0",
+    "type-fest": "3.6.1",
     "uuid": "9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.19.6",
+    "@babel/core": "7.21.3",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-private-methods": "7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.19.6",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.0",
+    "@babel/plugin-transform-runtime": "7.21.0",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.19.4",
+    "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@storybook/addon-actions": "6.3.8",
-    "@storybook/addon-info": "5.3.21",
-    "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.3.8",
-    "@storybook/addons": "6.3.8",
-    "@storybook/api": "6.3.8",
-    "@storybook/builder-webpack5": "6.3.8",
-    "@storybook/components": "6.3.8",
-    "@storybook/manager-webpack5": "6.3.8",
-    "@storybook/react": "6.3.8",
-    "@svgr/webpack": "5.5.0",
+    "@babel/preset-typescript": "7.21.0",
+    "@storybook/addon-actions": "6.5.16",
+    "@storybook/addon-knobs": "6.4.0",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/addons": "6.5.16",
+    "@storybook/api": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/components": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
+    "@svgr/webpack": "6.5.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "14.0.0",
     "@types/classnames": "2.3.1",
     "@types/d3": "5.16.3",
-    "@types/jest": "29.2.1",
-    "@types/lodash-es": "4.17.6",
-    "@types/react-dom": "17.0.11",
+    "@types/jest": "29.5.0",
+    "@types/lodash-es": "4.17.7",
+    "@types/react-dom": "18.0.11",
     "@types/react-router-dom": "5.3.3",
-    "@types/rheostat": "3.0.2",
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
-    "@typescript-eslint/parser": "5.42.0",
-    "babel-jest": "29.2.2",
-    "babel-loader": "9.0.1",
+    "@types/uuid": "9.0.1",
+    "@typescript-eslint/eslint-plugin": "5.55.0",
+    "@typescript-eslint/parser": "5.55.0",
+    "babel-jest": "29.5.0",
+    "babel-loader": "9.1.2",
     "browser-sync-webpack-plugin": "2.3.0",
-    "core-js": "3.26.0",
-    "css-loader": "6.7.1",
-    "eslint": "8.26.0",
+    "core-js": "3.29.1",
+    "css-loader": "6.7.3",
+    "eslint": "8.36.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "27.1.3",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-config-prettier": "8.7.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jest": "27.2.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.10",
+    "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "file-loader": "6.2.0",
-    "husky": "8.0.1",
-    "jest": "29.2.2",
+    "eslint-plugin-storybook": "^0.6.11",
+    "husky": "8.0.3",
+    "jest": "29.5.0",
     "jest-coverage-ratchet": "0.2.3",
     "jest-css-modules-transform": "4.4.2",
-    "jest-environment-jsdom": "29.2.2",
+    "jest-environment-jsdom": "29.5.0",
     "jest-silent-reporter": "0.5.0",
-    "lint-staged": "13.0.3",
+    "lint-staged": "13.2.0",
     "lorem-ipsum": "2.0.8",
+    "mini-css-extract-plugin": "2.7.5",
     "node-sass-json-importer": "4.3.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.7.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-markdown": "8.0.3",
+    "prettier": "2.8.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "8.0.5",
     "react-router-dom": "5.3.0",
     "rehype-raw": "6.1.1",
-    "sass": "1.55.0",
-    "sass-loader": "13.1.0",
+    "sass": "1.59.3",
+    "sass-loader": "13.2.1",
     "storybook-react-router": "1.0.8",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.2",
     "svg-url-loader": "8.0.0",
-    "typescript": "4.8.4",
-    "webpack": "5.74.0",
-    "webpack-bundle-analyzer": "4.7.0",
-    "webpack-cli": "4.10.0"
+    "typescript": "5.0.2",
+    "webpack": "5.76.2",
+    "webpack-bundle-analyzer": "4.8.0",
+    "webpack-cli": "5.0.1"
   }
 }

src/components/__mocks__/displayMenu.tsx

@@ -1,4 +1,4 @@
-import { SwissProtIcon } from '..';
+import { SwissProtIcon } from '../..';
 
 export const displayMenuDummyContent1 = 'Page 1 main content';
 export const displayMenuDummyContent2 = 'Page 2 main content';