chore: update to storybook 8

- update docs to support storybook 8 semantics
- fix documentation issues for hiding react nodes for children props
- configure plugins to mesh with new conventions
- update typescript to latest
- see storybookjs/storybook#26586 (comment)

.storybook/main.ts

@@ -9,17 +9,16 @@ import type { Configuration } from 'webpack';
  * We should refrain from using the staticDirs option in this configuration until
  * https://github.com/chromaui/chromatic-cli/issues/462 is resolved.
  */
-const config: StorybookConfig = {
+const config = {
   stories: [
-    './components/**/*.stories.mdx',
+    './components/**/*.mdx',
     './components/**/*.stories.@(js|jsx|ts|tsx)',
     '../src/components',
-    './**/*.stories.mdx',
+    './**/*.mdx',
     './**/*.stories.@(js|jsx|ts|tsx)',
   ],
-
   addons: [
-    '@storybook/addon-essentials',
+    '@storybook/addon-essentials', // See: https://storybook.js.org/docs/essentials
     '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-interactions',
@@ -31,22 +30,20 @@ const config: StorybookConfig = {
         cssModules: true,
       },
     },
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
   ],
 
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
 
-  docs: {
-    autodocs: true,
-  },
-
   core: {
     disableTelemetry: true,
   },
 
-  babel: (config) => {
+  babel: () => {
     return {
       sourceType: 'unambiguous',
       presets: [
@@ -66,13 +63,22 @@ const config: StorybookConfig = {
       plugins: [],
     };
   },
+
   webpackFinal(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       updateCSSLoaderPlugin(config);
     }
     return config;
   },
-};
+
+  /**
+   * This config enables deep parsing of TypeScript types in the table UI, which can interpret
+   * the values of unions, and TypeScript utils like `Extract`, `Pick`, etc.
+   */
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+} satisfies StorybookConfig;
 
 /**
  * Updates the `css-loader` webpack plugin to make class names human readable.

.storybook/preview.tsx

@@ -100,3 +100,4 @@ export const parameters: Preview['parameters'] = {
     },
   },
 };
+export const tags = ['autodocs'];

package.json

@@ -115,31 +115,32 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chanzuckerberg/axe-storybook-testing": "^7.2.0",
+    "@chanzuckerberg/axe-storybook-testing": "^8.0.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/story-utils": "^4.0.8",
+    "@chromatic-com/storybook": "^1",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
     "@omlet/cli": "^1.7.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.6.19",
-    "@storybook/addon-essentials": "^7.6.19",
-    "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-links": "^7.6.19",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/manager-api": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/react-webpack5": "^7.6.19",
-    "@storybook/test": "^7.6.19",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/testing-react": "^2.0.1",
-    "@storybook/theming": "^7.6.19",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
@@ -160,7 +161,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.2",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
@@ -183,13 +184,13 @@
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^7.6.19",
+    "storybook": "^8.1.10",
     "style-dictionary": "^3.9.2",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.4",
-    "typescript": "^5.2.2"
+    "typescript": "^5.5.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/components/Accordion/Accordion.stories.tsx

@@ -6,14 +6,14 @@ import { chromaticViewports } from '../../util/viewports';
 import Icon from '../Icon';
 import NumberIcon from '../NumberIcon';
 
-type Args = React.ComponentProps<typeof Accordion>;
-
 export default {
   title: 'Components/Accordion',
   component: Accordion,
+  // TODO: add subcomponents like Badge has
   parameters: {
     layout: 'centered',
     badges: ['intro-1.2', 'current-2.0'],
+    controls: { sort: 'requiredFirst' },
   },
   args: {
     headingAs: 'h2',
@@ -35,15 +35,16 @@ export default {
   },
   argTypes: {
     children: {
-      control: {
-        type: null,
-      },
+      control: false,
+    },
+    size: {
+      control: { type: 'radio' },
     },
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
+} as Meta<typeof Accordion>;
 
-type Story = StoryObj<Args>;
+type Story = StoryObj<typeof Accordion>;
 
 export const Default: Story = {};
 

src/components/Accordion/Accordion.test.tsx

@@ -1,11 +1,11 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Accordion } from './Accordion';
 import * as stories from './Accordion.stories';
+import type { StoryFile } from '../../util/utility-types';
 
 const { Default } = composeStories(stories);
 

src/components/Accordion/Accordion.tsx

@@ -134,7 +134,7 @@ const AccordionRowContext = createContext<
  * Displays one or more headers stacked on top of one another that can reveal or hide associated content.
  * This component is based on the [Disclosure](https://headlessui.com/react/disclosure) component, provided by HeadlessUI.
  *
- * @see https://headlessui.com/react/disclosure
+ * More Information: https://headlessui.com/react/disclosure
  *
  */
 export const Accordion = ({

src/components/AppNotification/AppNotification.stories.tsx

@@ -23,23 +23,21 @@ export default {
   },
   argTypes: {
     children: {
-      control: {
-        type: null,
-      },
+      control: false,
     },
     subTitle: {
       control: 'text',
     },
   },
-} as Meta<Args>;
+} as Meta<typeof AppNotification>;
 
-type Args = React.ComponentProps<typeof AppNotification>;
+type Story = StoryObj<typeof AppNotification>;
 
-export const Default: StoryObj<Args> = {
+export const Default: Story = {
   args: {},
 };
 
-export const WithControls: StoryObj<Args> = {
+export const WithControls: Story = {
   args: {
     children: (
       <ButtonGroup buttonLayout="horizontal" className="!flex-row">
@@ -54,7 +52,7 @@ export const WithControls: StoryObj<Args> = {
   },
 };
 
-export const WithLinkInSubtitle: StoryObj<Args> = {
+export const WithLinkInSubtitle: Story = {
   args: {
     subTitle: (
       <Text as="span">
@@ -68,7 +66,7 @@ export const WithLinkInSubtitle: StoryObj<Args> = {
   },
 };
 
-export const LightColor: StoryObj<Args> = {
+export const LightColor: Story = {
   args: {
     color: 'light',
     children: (
@@ -80,7 +78,7 @@ export const LightColor: StoryObj<Args> = {
   },
 };
 
-export const WithDismissAndControls: StoryObj<Args> = {
+export const WithDismissAndControls: Story = {
   args: {
     ...WithControls.args,
     subTitle: 'Limited subtitle text',
@@ -90,7 +88,7 @@ export const WithDismissAndControls: StoryObj<Args> = {
   },
 };
 
-export const LightWithDismissAndControls: StoryObj<Args> = {
+export const LightWithDismissAndControls: Story = {
   args: {
     ...LightColor.args,
     onDismiss: () => {

src/components/AppNotification/AppNotification.test.ts

@@ -1,7 +1,6 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-
 import * as stories from './AppNotification.stories';
+import type { StoryFile } from '../../util/utility-types';
 
 describe('<AppNotification />', () => {
   generateSnapshots(stories as StoryFile);

src/components/AppNotification/AppNotification.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import Button from '../Button';
 import Text from '../Text';
 import styles from './AppNotification.module.css';
@@ -13,7 +13,7 @@ export interface AppNotificationProps {
   /**
    * Secondary text used to describe the notification in more detail
    */
-  subTitle: React.ReactNode;
+  subTitle: ReactNode;
   /**
    * Treatment for component (whether it is dark on light text, or light on dark text)
    */
@@ -23,7 +23,7 @@ export interface AppNotificationProps {
   /**
    * Contents of the component below the title and sub-title (used mainly for `ButtonGroup`)
    */
-  children?: React.ReactNode;
+  children?: ReactNode;
   /**
    * CSS class names that can be appended to the component.
    */

src/components/Avatar/Avatar.stories.ts

@@ -1,18 +1,16 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { Avatar } from './Avatar';
 
-type Args = React.ComponentProps<typeof Avatar>;
-
 export default {
   title: 'Components/Avatar',
   component: Avatar,
   parameters: {
     badges: ['intro-1.3', 'current-1.3'],
     layout: 'centered',
   },
-} as Meta<Args>;
+} as Meta<typeof Avatar>;
 
-type Story = StoryObj<Args>;
+type Story = StoryObj<typeof Avatar>;
 
 export const Default: Story = {};
 

src/components/Avatar/Avatar.tsx

@@ -52,6 +52,15 @@ type AvatarProps = {
   src?: string;
   /**
    * The user associated with this avatar
+   *
+   * `UserData` takes the format ([] is optional):
+   *
+   * ```
+   * - fullName (string)
+   * - [id] (string | number)
+   * - [displayName] (string)
+   * - [key:string] (string | number | boolean)
+   * ```
    */
   user?: UserData;
   /**