feat(storybook): storybook 7

.github/workflows/build-and-test.yml

@@ -2,18 +2,19 @@ name: Build and Test
 
 on:
   push:
-    branches: [main]
+    branches: [ main ]
   pull_request:
-    branches: [main]
+    branches: [ main ]
   workflow_dispatch:
 
+
 jobs:
   build-and-test:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node: ['16', '18']
+        node: [ '16', '18' ]
 
     name: Node ${{ matrix.node }} tests
 
@@ -59,6 +60,9 @@ jobs:
       - name: Check format
         run: yarn format:check
 
+      - name: Build Storybook
+        run: yarn build-storybook
+
       - name: Happo
         run: yarn happo-ci
         env:

.github/workflows/deploy-storybook.yml

@@ -39,7 +39,7 @@ jobs:
         run: yarn install
 
       - name: Build Storybook
-        run: yarn build-storybook --modern
+        run: yarn build-storybook
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

.happo.js

@@ -25,6 +25,9 @@ module.exports = {
   },
   plugins: [
     // see https://github.com/happo/happo-plugin-storybook for a list of options you can pass to the plugin
-    happoPluginStorybook(),
+    happoPluginStorybook({
+      outputDir: 'storybook-static',
+      usePrebuiltPackage: true,
+    }),
   ],
 }

.storybook/main.ts

@@ -1,10 +1,12 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
 const path = require('path')
 
 const webpackConfig = (config) => {
   config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/@uswds/uswds')
 
   config.module.rules = config.module.rules.filter(
-    (rule) => rule.test.toString() !== '/\\.css$/'
+    (rule) => rule.test && rule.test.toString() !== '/\\.css$/'
   )
   config.module.rules.push({
     test: /\.(sa|sc|c)ss$/,
@@ -71,9 +73,6 @@ const webpackConfig = (config) => {
 }
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
   typescript: {
@@ -87,4 +86,12 @@ module.exports = {
   webpackFinal: async (config) => {
     return webpackConfig(config)
   },
-}
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { strictMode: false },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['./public'],
+} as StorybookConfig

custom.d.ts

@@ -22,3 +22,9 @@ declare module '*.module.scss' {
   const classes: { [key: string]: string }
   export default classes
 }
+
+declare namespace globalThis {
+  interface Window {
+    MSStream: object
+  }
+}

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   testPathIgnorePatterns: ['/node_modules/', '/lib/'],
   testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  testEnvironment: "jsdom",
   moduleNameMapper: {
     '^react$': '<rootDir>/node_modules/react',
     '\\.svg\\?svgr$': '<rootDir>/__mocks__/svgrMock.js',

package.json

@@ -25,7 +25,8 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:serverside": "yarn build && node src/serverSideTest.js",
-    "storybook": "start-storybook -p 9009",
+    "storybook": "storybook dev -p 9009",
+    "build-storybook": "storybook build",
     "build": "tsc -p tsconfig.build.json && webpack --progress",
     "build:watch": "tsc -p tsconfig.build.json && webpack --watch",
     "lint": "tsc && eslint --ext js,jsx,ts,tsx src && stylelint \"src/**/*.{css,scss}\"",
@@ -56,13 +57,12 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.15.0",
-    "@storybook/addon-a11y": "^7.0.2",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addons": "^7.0.8",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/theming": "^7.0.8",
+    "@storybook/addon-a11y": "^7.1.1",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addons": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/theming": "^7.1.1",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -74,8 +74,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "@uswds/uswds": "3.4.1",
     "all-contributors-cli": "^6.24.0",
     "babel-jest": "^29.4.3",
@@ -95,9 +95,10 @@
     "eslint-plugin-security": "^1.4.0",
     "focus-trap-react": "^8.8.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "happo-plugin-storybook": "^3.0.0",
+    "happo-plugin-storybook": "^3.3.0",
     "happo.io": "^8.3.1",
-    "jest": "^26.1.0",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.7.1",
     "react": "^17.0.1",
@@ -108,6 +109,7 @@
     "sass-loader": "^13.0.0",
     "sass-resources-loader": "^2.0.1",
     "source-map-loader": "^4.0.1",
+    "storybook": "^7.1.1",
     "style-loader": "^3.2.1",
     "stylelint": "^13.3.0",
     "stylelint-config-css-modules": "^2.2.0",
@@ -116,14 +118,15 @@
     "stylelint-config-sass-guidelines": "^8.0.0",
     "stylelint-prettier": "^1.1.1",
     "stylelint-scss": "^3.17.1",
-    "ts-jest": "^26.1.2",
-    "typescript": "^4.2.4",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
     "webpack": "^5.52.1",
     "webpack-cli": "^5.0.1"
   },
   "resolutions": {
     "loader-utils": "2.0.4",
     "parse-url": "8.1.0",
+    "jackspeak": "2.1.1",
     "json-schema": "0.4.0",
     "glob-parent": "5.1.2",
     "trim": "0.0.3",

src/components/Footer/FooterNav/FooterNav.stories.tsx

@@ -44,29 +44,32 @@ export const MediumFooterNav = (): React.ReactElement => (
   />
 )
 
-export const BigFooterNav = (): React.ReactElement => (
-  <Footer
-    size="big"
-    primary={
-      <FooterNav
-        aria-label="Footer navigation"
-        size="big"
-        links={[
-          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
-          [
-            'Topic',
-            <a key="2" href="#">
-              Secondary link that is pretty long
-            </a>,
-            ...Array(2).fill(<a href="#">Secondary link</a>),
-          ],
-          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
-        ]}
-      />
-    }
-    secondary={<></>}
-  />
-)
-BigFooterNav.parameters = {
-  happo: { waitForContent: 'Secondary link that is pretty long' },
+export const BigFooterNav = {
+  render: (): React.ReactElement => (
+    <Footer
+      size="big"
+      primary={
+        <FooterNav
+          aria-label="Footer navigation"
+          size="big"
+          links={[
+            ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
+            [
+              'Topic',
+              <a key="2" href="#">
+                Secondary link that is pretty long
+              </a>,
+              ...Array(2).fill(<a href="#">Secondary link</a>),
+            ],
+            ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
+          ]}
+        />
+      }
+      secondary={<></>}
+    />
+  ),
+
+  parameters: {
+    happo: { waitForContent: 'Secondary link that is pretty long' },
+  },
 }