feat(storybook): storybook 7

.eslintrc

@@ -27,11 +27,17 @@
     "react": {
       "version": "detect"
     },
-    "import/resolver": "webpack"
+    "import/resolver": {
+      "webpack": {
+        "config": "./webpack.config.js"
+      }
+    }
   },
   "overrides": [
     {
-      "files": ["**/*.ts?(x)"],
+      "files": [
+        "**/*.ts?(x)"
+      ],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
         "ecmaVersion": 2018,
@@ -41,8 +47,13 @@
         },
         "warnOnUnsupportedTypeScriptVersion": true
       },
-      "plugins": ["@typescript-eslint"],
-      "extends": ["plugin:@typescript-eslint/recommended", "prettier"]
+      "plugins": [
+        "@typescript-eslint"
+      ],
+      "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+      ]
     }
   ],
   "extends": [
@@ -59,4 +70,4 @@
     "no-only-tests/no-only-tests": "error",
     "react/prop-types": "off"
   }
-}
+}

.storybook/main.ts

@@ -1,3 +1,5 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
 const path = require('path')
 
 const uswdsIncludePaths = [
@@ -12,7 +14,7 @@ const webpackConfig = (config) => {
   )
 
   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$/,
@@ -88,9 +90,6 @@ const webpackConfig = (config) => {
 }
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
   typescript: {
@@ -104,4 +103,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.7.1",
     "all-contributors-cli": "^6.24.0",
     "babel-jest": "^29.4.3",
@@ -95,19 +95,20 @@
     "eslint-plugin-security": "^1.4.0",
     "focus-trap-react": "^8.8.1",
     "fork-ts-checker-webpack-plugin": "^9.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",
-    "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "sass": "^1.26.0",
     "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 +117,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' },
+  },
 }

src/components/Icon/Icon.stories.tsx

@@ -26,9 +26,11 @@ Source: https://designsystem.digital.gov/components/icon/
         type: 'select',
         options: [3, 4, 5, 6, 7, 8, 9],
       },
-      defaultValue: 4,
     },
   },
+  args: {
+    size: 4,
+  },
 }
 
 export const accessibilityNew = (args: StorybookArgs): React.ReactElement => (

src/components/Icon/Icons.stories.tsx

@@ -24,9 +24,11 @@ Source: https://designsystem.digital.gov/components/icon/
         type: 'select',
         options: [3, 4, 5, 6, 7, 8, 9],
       },
-      defaultValue: 4,
     },
   },
+  args: {
+    size: 4,
+  },
 }
 
 export const allIcons = (args: StorybookArgs): React.ReactElement => (

src/components/LanguageSelector/LanguageSelector.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { LanguageSelector, LanguageDefinition } from './LanguageSelector'
-import { ComponentStory } from '@storybook/react'
+import { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Components/LanguageSelector',
@@ -22,9 +22,7 @@ Source: https://designsystem.digital.gov/components/language-selector/
   },
 }
 
-const TwoLanguagesTemplate: ComponentStory<typeof LanguageSelector> = (
-  args
-) => {
+const TwoLanguagesTemplate: StoryFn<typeof LanguageSelector> = (args) => {
   const [lang, setLang] = useState<string | undefined>(args.displayLang)
 
   const languagesDisplayProp: LanguageDefinition[] = [
@@ -53,7 +51,7 @@ LanguagesDisplayPropSandbox.args = {
   displayLang: `en`,
 }
 
-const MoreThanTwoLanguagesTemplate: ComponentStory<typeof LanguageSelector> = (
+const MoreThanTwoLanguagesTemplate: StoryFn<typeof LanguageSelector> = (
   args
 ) => {
   const [lang, setLang] = useState<string | undefined>(args.displayLang)

src/components/Link/Link.tsx

@@ -53,9 +53,9 @@ function linkClasses<T>(
 
 export function Link(props: DefaultLinkProps): React.ReactElement
 export function Link<T>(props: CustomLinkProps<T>): React.ReactElement
-export function Link<FCProps = DefaultLinkProps>(
-  props: DefaultLinkProps | CustomLinkProps<FCProps>
-): React.ReactElement {
+export function Link<
+  FCProps extends React.PropsWithChildren<object> = DefaultLinkProps
+>(props: DefaultLinkProps | CustomLinkProps<FCProps>): React.ReactElement {
   if (isCustomProps(props)) {
     const { variant, className, asCustom, children, ...remainingProps } = props
     // 1. We know props is AsCustomProps<FCProps>