refactor(update): update packages (#487)

* refactor(update): update packages * chore(pull): pull latest changes --------- Co-authored-by: Lia Prins <[email protected]>
chanzuckerberg · Jun 1, 2023 · ea3adc5 · ea3adc5
1 parent 76eb10e
commit ea3adc5
Show file tree

Hide file tree

Showing 96 changed files with 1,578 additions and 817 deletions.
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,17 @@
+// (masoudmanson): Storybook v7+ needs a .bablerc file
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
   },
   // Specifies the ESLint parser
   extends: [
+    "plugin:import/recommended",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
@@ -66,7 +67,17 @@ module.exports = {
     ],
     "@typescript-eslint/no-use-before-define": "off",
     "consistent-return": "off",
-    "import/no-anonymous-default-export": 2,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        js: "never",
+        jsx: "never",
+        ts: "never",
+        tsx: "never",
+      },
+    ],
+    "import/no-anonymous-default-export": "error",
     "import/no-extraneous-dependencies": [
       "error",
       {
@@ -78,10 +89,13 @@ module.exports = {
     "import/prefer-default-export": "off",
     // (thuang): Disable this line for `@typescript-eslint/no-unused-vars` to work
     "no-unused-vars": "off",
-    "react/jsx-no-target-blank": 0,
-    "react/jsx-props-no-spreading": 0,
+    "react/display-name": "off",
+    "react/jsx-no-target-blank": "off",
+    "react/jsx-props-no-spreading": "off",
     // (thuang): Disable this since we use TypeScript
+    "react/jsx-uses-react": "off",
     "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
     // (thuang): DefaultProps is being deprecated
     // https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/default_props/
     "react/require-default-props": "off",

diff --git a/package.json b/package.json
@@ -6,46 +6,55 @@
   "private": "true",
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
-    "@chanzuckerberg/axe-storybook-testing": "^7.0.0",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@chanzuckerberg/axe-storybook-testing": "^7.1.1",
     "@chanzuckerberg/story-utils": "^4.0.0",
     "@emotion/core": "^11.0.0",
-    "@emotion/css": "^11.1.3",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
-    "@mui/base": "^5.0.0-beta.2",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/base": "^5.0.0-beta.3",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.131",
-    "@mui/material": "^5.13.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@mui/lab": "^5.0.0-alpha.132",
+    "@mui/material": "^5.13.3",
     "@rollup/plugin-typescript": "^8.3.1",
     "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-a11y": "^7.0.5",
-    "@storybook/addon-actions": "^7.0.5",
-    "@storybook/addon-essentials": "^7.0.5",
-    "@storybook/addon-interactions": "^7.0.5",
-    "@storybook/addon-links": "^7.0.5",
-    "@storybook/addon-storyshots": "^7.0.5",
-    "@storybook/addons": "^7.0.5",
-    "@storybook/react": "^7.0.5",
-    "@storybook/react-webpack5": "^7.0.5",
+    "@storybook/addon-a11y": "^7.0.18",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-storyshots": "^7.0.18",
+    "@storybook/addons": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-webpack5": "^7.0.18",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.5",
+    "@storybook/theming": "^7.0.18",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^14.4.3",
+    "@types/babel__core": "^7.20.1",
+    "@types/babel__preset-env": "^7.9.2",
+    "@types/concurrently": "^6.4.0",
+    "@types/eslint": "^8.40.0",
+    "@types/eslint-config-prettier": "^6.11.0",
+    "@types/eslint-plugin-prettier": "^3.1.0",
     "@types/jest": "^27.0.2",
+    "@types/lint-staged": "^13.2.0",
     "@types/postcss-flexbugs-fixes": "^4.2.1",
+    "@types/prettier": "^2.7.2",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@types/rollup-plugin-css-only": "^3.1.0",
+    "@types/stylelint": "^13.13.3",
+    "@types/svgr__rollup": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "autoprefixer": "^10.4.13",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
@@ -54,34 +63,36 @@
     "concurrently": "^6.0.0",
     "css-font": "^1.2.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint": "^8.41.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-flowtype": "^5.3.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^25.0.6",
-    "eslint-plugin-jest-playwright": "^0.2.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-sonarjs": "^0.10.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest-playwright": "^0.9.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.19.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^5.1.3",
     "jest": "^27.2.5",
     "lerna": "^6.5.1",
     "lint-staged": "^10.5.4",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "prettier": "^2.2.1",
-    "prettier-plugin-organize-imports": "^1.1.1",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "rollup": "^2.40.0",
     "rollup-plugin-bundle-scss": "^0.1.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-ts": "^3.0.2",
-    "storybook": "^7.0.5",
+    "storybook": "^7.0.18",
     "storybook-addon-emotion-theme": "^2.1.1",
     "storybook-addon-pseudo-states": "^2.0.1",
     "style-dictionary": "^3.0.3",
@@ -90,7 +101,7 @@
     "stylelint-config-standard": "^20.0.0",
     "svg-jest": "^1.0.1",
     "ts-jest": "^27.0.5",
-    "typescript": "4.6",
+    "typescript": "^5.0.4",
     "url-loader": "^4.1.1"
   },
   "scripts": {
@@ -100,6 +111,7 @@
     "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",
     "storybook:axeOnly": "axe-storybook --build-dir docs-build",
     "test": "lerna run test",
+    "test:updateSnapshots": "lerna run test -- -u",
     "namespace-check": "lerna run namespace-check",
     "prepare": "husky install",
     "lint": "lerna run lint",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -54,14 +54,18 @@
   },
   "peerDependencies": {
     "@emotion/core": "^11.0.0",
-    "@emotion/css": "^11.1.3",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
-    "@mui/base": "^5.0.0-beta.2",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/base": "^5.0.0-beta.3",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.131",
-    "@mui/material": "^5.13.0",
+    "@mui/lab": "^5.0.0-alpha.132",
+    "@mui/material": "^5.13.3",
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1"
   }
 }
diff --git a/packages/components/src/core/Accordion/components/AccordionDetails/index.tsx b/packages/components/src/core/Accordion/components/AccordionDetails/index.tsx
@@ -1,5 +1,4 @@
 import { AccordionDetailsProps } from "@mui/material";
-import React from "react";
 import { StyledAccordionDetails } from "./style";
 
 const AccordionDetails = (props: AccordionDetailsProps) => {

diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx b/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
@@ -1,5 +1,4 @@
 import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
-import React from "react";
 import Icon from "src/core/Icon";
 import { StyledAccordionHeader, StyledSubtitle } from "./style";
 

diff --git a/packages/components/src/core/Accordion/index.test.tsx b/packages/components/src/core/Accordion/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/Alert/index.tsx b/packages/components/src/core/Alert/index.tsx
@@ -1,5 +1,4 @@
 import { AlertProps } from "@mui/lab";
-import React from "react";
 import { StyledAlert } from "./style";
 
 export type { AlertProps };

diff --git a/packages/components/src/core/Banner/banner.test.tsx b/packages/components/src/core/Banner/banner.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/Banner/index.stories.tsx b/packages/components/src/core/Banner/index.stories.tsx
@@ -1,6 +1,5 @@
 import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
-import React from "react";
 import RawBanner from "./index";
 
 const BANNER_TEXT = "Banner text lorem ipsum dolor mit";

diff --git a/packages/components/src/core/Button/index.stories.tsx b/packages/components/src/core/Button/index.stories.tsx
@@ -8,7 +8,7 @@ const SDS_STYLES = ["rounded", "square", "minimal"];
 const SDS_TYPES = ["primary", "secondary"];
 const ICON_OPTIONS = [
   undefined,
-  <Icon sdsSize="l" sdsIcon="download" sdsType="button" />,
+  <Icon key="download" sdsSize="l" sdsIcon="download" sdsType="button" />,
 ];
 const DISABLED_OPTIONS = [false, true];
 const PSEUDO_STATES = ["default", "hover", "active", "focus-visible"];
@@ -361,7 +361,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
       <div style={penultimateLevel}>
         {PSEUDO_STATES.map((state) => {
           return (
-            <div style={bottomLevel}>
+            <div style={bottomLevel} key={state}>
               {/* removes irrelevant disabled iterations: when combined with all pseudo-states except default, `disabled=false` is impossible */}
               {(disabled === false ||
                 (disabled === true && state === "default")) && (

diff --git a/packages/components/src/core/Button/index.test.tsx b/packages/components/src/core/Button/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/ButtonDropdown/index.test.tsx b/packages/components/src/core/ButtonDropdown/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/ButtonIcon/index.test.tsx b/packages/components/src/core/ButtonIcon/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/ButtonIcon/index.tsx b/packages/components/src/core/ButtonIcon/index.tsx
@@ -1,5 +1,5 @@
 import { IconButtonProps as RawButtonIconProps } from "@mui/material";
-import React, { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef } from "react";
 import Icon, { IconNameToSizes, IconProps } from "../Icon";
 import {
   ButtonIconExtraProps,

diff --git a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
@@ -1,5 +1,4 @@
 import { AlertTitleProps } from "@mui/material/AlertTitle";
-import React from "react";
 import { StyledCalloutTitle } from "./style";
 
 const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {

diff --git a/packages/components/src/core/CellBasic/index.stories.tsx b/packages/components/src/core/CellBasic/index.stories.tsx
@@ -28,10 +28,10 @@ const CellBasic = (props: Args): JSX.Element => {
 
 const availableIconOptions = [
   undefined,
-  <Icon sdsSize="xs" sdsIcon="download" sdsType="static" />,
-  <Icon sdsSize="s" sdsIcon="lightBulb" sdsType="static" />,
-  <Icon sdsSize="l" sdsIcon="bacteria" sdsType="static" />,
-  <Icon sdsSize="xl" sdsIcon="flask" sdsType="static" />,
+  <Icon sdsSize="xs" sdsIcon="download" key="download" sdsType="static" />,
+  <Icon sdsSize="s" sdsIcon="lightBulb" key="lightBulb" sdsType="static" />,
+  <Icon sdsSize="l" sdsIcon="bacteria" key="bacteria" sdsType="static" />,
+  <Icon sdsSize="xl" sdsIcon="flask" key="flask" sdsType="static" />,
 ];
 
 export default {

diff --git a/packages/components/src/core/CellBasic/index.test.tsx b/packages/components/src/core/CellBasic/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/CellComponent/index.test.tsx b/packages/components/src/core/CellComponent/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/CellHeader/index.test.tsx b/packages/components/src/core/CellHeader/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/Chip/index.tsx b/packages/components/src/core/Chip/index.tsx
@@ -1,6 +1,5 @@
 import { Clear } from "@mui/icons-material";
 import { ChipProps as RawChipProps } from "@mui/material";
-import React from "react";
 import {
   SDSWarningTypes,
   showWarningIfFirstOccurence,

diff --git a/packages/components/src/core/ComplexFilter/components/Chips/index.tsx b/packages/components/src/core/ComplexFilter/components/Chips/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { DefaultDropdownMenuOption } from "src/core/DropdownMenu";
 import TagFilter from "src/core/TagFilter";
 

diff --git a/packages/components/src/core/ComplexFilter/index.test.tsx b/packages/components/src/core/ComplexFilter/index.test.tsx
@@ -1,7 +1,6 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import * as snapshotTestStoryFile from "./index.stories";
 import Meta, { Test as TestStory } from "./index.stories";
 

diff --git a/packages/components/src/core/Dialog/index.stories.tsx b/packages/components/src/core/Dialog/index.stories.tsx
@@ -1,5 +1,5 @@
 import { Args, Meta } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import Button from "../Button";
 import DialogActions from "../DialogActions";
 import DialogContent from "../DialogContent";