chore: upgrade to storybook 7.x (#1726)

- remove extraneous / outdated storybook plugins
- upgrade packages to the latest available for storybook
- amend documentation pages to support MDX2 format
- fix remaining bugs
- update test files to support latest story-utils and other dependencies
- liberally use `act()` around test setup actions
- correct misaligned types in story files
- adjust snapshots to not involve jitter
- apply fixes from code review

.storybook/components/Docs/GettingStarted.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Getting Started" />
 
 # Welcome to EDS

.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Documentation/Guidelines/Code Guidelines" />
 
 # Code Guidelines
@@ -281,7 +283,7 @@ Use:
 
 Instead of:
 
-```tsx
+```
 import { EdsThemeColorUtilitySuccessForeground } from 'src/tokens-dist/ts/colors';
 
 <Icon color={EdsThemeColorUtilitySuccessForeground} />;
@@ -351,10 +353,9 @@ The framework follows a specific ordering/clustering for importing modules into
 Here's an example:
 
 ```js
-import React, { ReactNode } from 'react'; // 1
-import styles from './Tags.module.css'; // 2
-import { Icon } from '../Icon/Icon'; // 3
-// 4
+import React, { ReactNode } from 'react';
+import styles from './Tags.module.css';
+import { Icon } from '../Icon/Icon';
 ```
 
 1. Import utility/library dependencies first, in alphabetical order of the library name
@@ -385,15 +386,15 @@ The comment should begin with an import example, include a general description o
 
 Example:
 
-````tsx
+```tsx
 /**
  * `import {ButtonGroup} from "@chanzuckerberg/eds";`
  *
  * A container for buttons grouped together horizontally or vertically.
  *
  * Example usage:
  *
- * ```tsx
+ * ```
  * <ButtonGroup
  *   className={componentClassName}
  *   spacing='1x'
@@ -404,14 +405,14 @@ Example:
  * </ButtonGroup>
  * ```
  */
- export const ButtonGroup = ({
-````
+ export const ButtonGroup = ({ ... })
+```
 
 Do not use [jsdoc tags](https://devhints.io/jsdoc) (e.g. `@example`) if possible because these will break the documentation in storybook and cause all following text to not be shown on the page. For important jsdoc tags that we really want to include, place them at the end of the comment to avoid hiding comment content. For example, we use the `@deprecated` tag so Visual Studio Code will indicate a component is deprecated for developers, but we place that at the end of a component's docstring to avoid disrupting any of the other text.
 
 Example:
 
-````tsx
+```tsx
 /**
  * The Banner component is deprecated and will be removed in an upcoming release.
  *
@@ -434,7 +435,7 @@ Example:
  *
  * @deprecated
  */
-````
+```
 
 ### Export module
 
@@ -455,13 +456,13 @@ The `src/components/{componentFolder}/index.ts` file should should import and re
 
 i.e. in `src/components/{componentFolder}/index.ts`
 
-```ts
+```tsx
 export { ComponentName as default } from './ComponentName';
 ```
 
 and in `src/index.ts`
 
-```ts
+```tsx
 ...
 export { default as ComponentName } from './components/ComponentName';
 ...
@@ -542,15 +543,15 @@ By default, we err towards more centralized control over the component architect
 - Compound components never have an associated `.stories.tsx` file as they rely on the parent component's stories to render properly.
 - Compound components should be exported as subcomponents from their parent component file for easier usage. For example, at the bottom of `Card.tsx`, add the lines:
 
-```tsx
+```ts
 // This demonstrates how bound subcomponents are attached
 Card.Header = CardHeader;
 Card.Footer = CardFooter;
 ```
 
 ### Prop Naming conventions
 
-- \*_camelCase for multi-word props_ - \*
+- _camelCase for multi-word props_
 - **All props declared at top of `render` method** - this defines all the props available to a component in one place and keeps the rest of the component code cleaner (you don't have to repeat `this.props.[thing]` everywhere).
 - Don't use ternaries for most things, especially blocks of JSX.
 - Update aria attribute prop names to native HTML names (`aria-label`, `aria-describedby`, `aria-labelledby`)
@@ -596,11 +597,11 @@ The default option should be the one most commonly used in order to reduce frict
 
 ID attributes used for accessibility (e.g. associating `<label>` and `<input>` elements) should be unique and stable.
 
-We currently use the [`useId` hook](https://reactjs.org/docs/hooks-reference.html#useid) for ID generation for React 18, and polyfill with an incrementing number for React <18.
+We currently use the [`useId` hook](https://reactjs.org/docs/hooks-reference.html#useid) for ID generation for React 18, and polyfill with an incrementing number for React &lt; 18.
 The polyfill is not ssr friendly as id generation is render timing dependent.
 To ensure stable results, they cannot be invoked within conditionals or callbacks.
 
-```tsx
+```ts
 const generatedId = useId();
 ```
 

.storybook/components/Docs/Guidelines/Components.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Documentation/Guidelines/Components" />
 
 # Working with EDS Components

.storybook/components/Docs/Guidelines/Icons.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Documentation/Guidelines/Icons" />
 
 # Icons

.storybook/components/Docs/Guidelines/Layout.stories.mdx

@@ -1,7 +1,8 @@
-<Meta title="Documentation/Guidelines/Layout" />
-
+import { Canvas, Meta } from '@storybook/blocks';
 import {InlineNotification} from "../../../../src";
 
+<Meta title="Documentation/Guidelines/Layout" />
+
 # Layout
 
 <InlineNotification text="The layout components are being deprecated in favor of using TailwindCSS" variant="warning" />

.storybook/components/Docs/Guidelines/Theming.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Documentation/Theming" />
 
 # Theming overview

.storybook/components/Docs/Guidelines/Tokens.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Documentation/Guidelines/Tokens" />
 
 # Design Tokens

.storybook/components/Docs/Guidelines/Typography.stories.mdx

@@ -1,3 +1,5 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
 <Meta title="Documentation/Guidelines/Typography" />
 
 # Typography

.storybook/main.js

@@ -14,11 +14,11 @@ module.exports = {
     './**/*.stories.mdx',
     './**/*.stories.@(js|jsx|ts|tsx)',
   ],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-links',
-    'storybook-css-modules-preset',
     '@storybook/addon-interactions',
     '@geometricpanda/storybook-addon-badges',
     {
@@ -29,15 +29,45 @@ module.exports = {
       },
     },
     {
-      name: '@storybook/addon-postcss',
+      name: '@storybook/addon-styling',
       options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
+        postCss: true,
+        cssModules: true,
       },
     },
   ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+
   core: {
-    builder: 'webpack5',
+    disableTelemetry: true,
+  },
+
+  babel: (config) => {
+    return {
+      sourceType: 'unambiguous',
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              chrome: 100,
+              safari: 15,
+              firefox: 91,
+            },
+          },
+        ],
+        '@babel/preset-typescript',
+        '@babel/preset-react',
+      ],
+      plugins: [],
+    };
   },
 };

package.json

@@ -39,7 +39,7 @@
     "build:declarations": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js && yarn prettier-tokens-dist",
     "build:js": "rollup --config",
-    "build:storybook": "build-storybook -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",
+    "build:storybook": "storybook build -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",
     "build:styles": "postcss \"src/components/**/*.css\" --dir lib/ --base src/ --verbose",
     "chromatic": "chromatic",
     "copy-fonts-to-lib": "copyfiles -u 3 src/design-tokens/tier-1-definitions/fonts.css src/design-tokens/tier-1-definitions/fonts/**/* lib/tokens",
@@ -59,7 +59,7 @@
     "release:patch": "yarn release --release-as patch",
     "release:alpha": "yarn release --prerelease alpha",
     "start": "yarn build:tokens && yarn storybook",
-    "storybook": "start-storybook -p 9000 -s src/design-tokens/tier-1-definitions/fonts",
+    "storybook": "storybook dev -p 9000 -s src/design-tokens/tier-1-definitions/fonts",
     "storybook:axe": "yarn run build:storybook && yarn run storybook:axeOnly",
     "storybook:axeOnly": "axe-storybook --build-dir storybook-static",
     "plop": "plop component",
@@ -97,32 +97,34 @@
     "react-portal": "^4.2.2"
   },
   "devDependencies": {
-    "@chanzuckerberg/axe-storybook-testing": "^6.3.1",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@chanzuckerberg/axe-storybook-testing": "^7.1.2",
     "@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
     "@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
     "@chanzuckerberg/prettier-config-edu": "^1.0.5",
-    "@chanzuckerberg/story-utils": "^3.0.14",
+    "@chanzuckerberg/story-utils": "^4.0.0",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@geometricpanda/storybook-addon-badges": "^1.1.1",
+    "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@omlet/cli": "^1.0.1-beta.32",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.2",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-a11y": "^7.3.1",
+    "@storybook/addon-docs": "^7.3.1",
+    "@storybook/addon-essentials": "^7.3.1",
+    "@storybook/addon-interactions": "^7.3.1",
+    "@storybook/addon-links": "^7.3.1",
+    "@storybook/addon-styling": "^1.3.6",
+    "@storybook/react": "^7.3.1",
+    "@storybook/react-webpack5": "^7.3.1",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/testing-react": "^1.3.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-react": "^2.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -140,7 +142,7 @@
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-testing-library": "^5.11.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
@@ -164,7 +166,7 @@
     "size-limit": "^8.2.6",
     "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",
-    "storybook-css-modules-preset": "^1.1.1",
+    "storybook": "^7.3.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "^15.10.2",
     "stylelint-config-recommended": "^10.0.1",

src/components/Accordion/Accordion.test.tsx

@@ -1,6 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import type { StoryFile } from '@storybook/testing-react';
 import { composeStories } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Accordion } from './Accordion';
@@ -9,16 +10,22 @@ import * as stories from './Accordion.stories';
 const { Default } = composeStories(stories);
 
 describe('<Accordion />', () => {
-  generateSnapshots(stories);
+  generateSnapshots(stories as StoryFile);
 
   it('should open and close Accordion panel clicking Accordion button', async () => {
     const user = userEvent.setup();
     render(<Default />);
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
     const accordionButton = screen.getByTestId('accordion-button');
-    await user.click(accordionButton);
+
+    await act(async () => {
+      await user.click(accordionButton);
+    });
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-    await user.click(accordionButton);
+
+    await act(async () => {
+      await user.click(accordionButton);
+    });
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
   });
 
@@ -27,13 +34,25 @@ describe('<Accordion />', () => {
     render(<Default />);
     const accordionButton = screen.getByTestId('accordion-button');
     accordionButton.focus();
-    await user.keyboard(' ');
+
+    await act(async () => {
+      await user.keyboard(' ');
+    });
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-    await user.keyboard(' ');
+
+    await act(async () => {
+      await user.keyboard(' ');
+    });
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
-    await user.keyboard('{enter}');
+
+    await act(async () => {
+      await user.keyboard('{enter}');
+    });
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-    await user.keyboard('{enter}');
+
+    await act(async () => {
+      await user.keyboard('{enter}');
+    });
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
   });
 
@@ -51,7 +70,10 @@ describe('<Accordion />', () => {
       </Accordion>,
     );
     const accordionButton = screen.getByTestId('accordion-button');
-    await user.click(accordionButton);
+
+    await act(async () => {
+      await user.click(accordionButton);
+    });
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });