Storybook 7 upgrade (#1134)

# Pull Request

## 🤨 Rationale

We want to be on the latest storybook version because it fixes issues
we've had with dependencies and it enables more powerful docs pages via
mdx and Component Story Format enhancements.

Notable changes:
- landing page uses correct fonts and errors in console are gone (fixing
#825 and #943 properly)
- [no more Docs
tab](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-docs-changes).
Each story group has a docs page under it instead.
- XD previews are gone (feature was deprecated)
- Actions not working yet and some code previews have stopped working;
see "Follow ups" below

## 👩‍💻 Implementation

Following the [upgrade
guide](https://storybook.js.org/docs/react/configure/upgrading#prereleases)
didn't work very well because it is buggy with a monorepo. Fred's
general strategy was to run the upgrade command from within
`nimble-components` then delete the `node_modules` and
`package-lock.json` that it creates there, then re-install everything
from the root. The migration tool is responsible for the changes to:
1. storybook configuration files
2. package.json
3. renaming types like `Story` -> `StoryFn` and `storyName` to `name`
4. deleting the `withXD` decorator which is no longer supported

Beyond that there were a few other manual changes:
1. establish static dependencies on components needed by each story.
Storybook seems to have gotten more aggressive about compiling away
unneeded components so if something isn't imported, it won't be found
and components won't render correctly. This meant:
1. replacing a few literals for element tag names in stories with the
`elementTag` export
2. updating the `nimble-menu` to explicitly depend on
`nimble-anchored-region` (see comment on `menu/index.ts`)
2. Enable 'autodocs' for component and token stories but disable it for
test stories
3. Add a patch file to work around
storybookjs/storybook#21820
4. simplified return types of story generation functions in
`storybook.ts` in response to storybook type changes
5. regenerated landing page screenshot and annotation now that docs tab
is gone

## 🔜 Follow ups in future PRs

Fixing these issues is tracked by #1146 . I tried upgrading to ts 4.7
but it didn't fix any of them.

- [ ] storybookjs/storybook#21820
- [ ] Figure out why actions aren't firing when you click a button.
Likely [need this
decorator](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-auto-injection-of-storybookaddon-actions-decorator)
but it's not present in current rc:
storybookjs/storybook#21308
- [ ] Some code previews (table, tooltip) are not available in the Docs
page

## 🧪 Testing

Chromatic caught several diffs which resulted in the manual changes
described above 👍. ~~It's still showing new stories for the wafer map
and button. (The wafer map one is caused by Chromatic getting confused
when I tried renaming that story, ran a Chromatic build, and then
reverted that change. I don't know the cause of the button change.)~~ <-
this went away on a subsequent build

Also manually spot checked many of the stories across browsers,
especially ones that have workarounds in them like table and theme-aware
tokens.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Fred Visser <1458528+fredvisser@users.noreply.github.com>

change/@ni-nimble-components-1fb65473-c803-4f85-ad46-02ad52a5b22b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add missing anchored region import to menu component as part of Storybook 7 upgrade",
+  "packageName": "@ni/nimble-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -45,5 +45,8 @@
     "beachball": "^2.31.0",
     "cross-env": "^7.0.3",
     "patch-package": "^6.4.7"
+  },
+  "peerDependencies": {
+    "@storybook/html": "*"
   }
 }

packages/nimble-components/.storybook/main.js

@@ -1,9 +1,6 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 module.exports = {
-    core: {
-        builder: 'webpack5'
-    },
     stories: ['../src/**/*.stories.@(ts|mdx)', '../docs/**/*.stories.mdx'],
     addons: [
         {
@@ -12,14 +9,9 @@ module.exports = {
                 outline: false
             }
         },
-        'storybook-addon-xd-designs',
         '@storybook/addon-a11y',
         '@storybook/addon-interactions'
     ],
-    features: {
-        previewCsfV3: true,
-        previewMdx2: true
-    },
     webpackFinal: config => {
         config.module.rules.push({
             test: /\.ts$/,
@@ -38,8 +30,11 @@ module.exports = {
         config.performance = {
             hints: false
         };
-
         return config;
     },
-    staticDirs: ['public']
+    staticDirs: ['public'],
+    framework: {
+        name: '@storybook/html-webpack5',
+        options: {}
+    }
 };

packages/nimble-components/docs/creating-storybook-component-documentation.md

@@ -14,7 +14,6 @@ Add a `docs.description.component` string to the component `parameters` object.
 ```ts
 const metadata: Meta<ComponentArgs> = {
     title: 'SomeComponent',
-    decorators: [withXD],
     parameters: {
         docs: {
             description: {

packages/nimble-components/docs/nimble-intro.stories.mdx

@@ -35,7 +35,6 @@ Refer to the
 contributing to the component library. To add or update component design documentation, 
 refer to the [documentation guide](https://github.com/ni/nimble/tree/main/packages/nimble-components/docs/creating-storybook-component-documentation.md).
 
-/* The following links only works when published to Chomatic or GitHub Pages, not when running Storybook locally */
 See the <a href="./example-client-app" target="_blank">example Angular app</a> or <a href="./blazor-client-app/wwwroot" target="_blank">example Blazor app</a> using the components!
 
 ## How to use this site?
@@ -45,12 +44,10 @@ design system components.
 
 <img src={overviewImage} width="100%"/>
 
-- **Canvas** tab (**#1**) to preview isolated components and use the **Docs** tab to review 
+- Browse or search the components tree (**#1**) to preview isolated components and use the **Docs** item to review 
 component-specific design and technical usage information. 
-- **… menu** (**#3**) to open and position the addons pane (**#4**). 
+- **⚙ menu** (**#2**) to open and position the addons pane (**#3**). 
     - **Controls** tab to interactively configure the component.
     - **Actions** tab to review events sent by the component.
-    - **XD Design** tab to review the component design page.
     - **Accessibility** tab to check the component for accessibility issues.
-    - **Interactions** tab to simulate component interactions.
-- **Background** toolbar button (**#2**) to switch the preview between supported component themes.
+- **Background** toolbar button (**#4**) to switch the preview between supported component themes.

packages/nimble-components/package.json

@@ -12,8 +12,8 @@
     "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
     "pack": "npm pack",
     "invoke-publish": "npm publish",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o dist/storybook --webpack-stats-json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o dist/storybook --webpack-stats-json",
     "storybook-open-webkit": "playwright wk http://localhost:6006",
     "build-components": "tsc -p ./tsconfig.json",
     "build-components:watch": "tsc -p ./tsconfig.json -w",
@@ -70,26 +70,24 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@mdx-js/react": "^2.2.1",
     "@ni/eslint-config-javascript": "^4.2.0",
     "@ni/eslint-config-typescript": "^4.2.0",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-a11y": "^6.5.10",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-docs": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/html": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/mdx2-csf": "^0.0.4",
-    "@storybook/theming": "^6.5.10",
+    "@storybook/addon-a11y": "^7.0.0-rc.8",
+    "@storybook/addon-actions": "^7.0.0-rc.8",
+    "@storybook/addon-docs": "^7.0.0-rc.8",
+    "@storybook/addon-essentials": "^7.0.0-rc.8",
+    "@storybook/addon-interactions": "^7.0.0-rc.8",
+    "@storybook/addon-links": "^7.0.0-rc.8",
+    "@storybook/addons": "^7.0.0-rc.8",
+    "@storybook/cli": "^7.0.0-rc.8",
+    "@storybook/csf": "0.0.2-next.10",
+    "@storybook/html": "^7.0.0-rc.8",
+    "@storybook/html-webpack5": "^7.0.0-rc.8",
+    "@storybook/theming": "^7.0.0-rc.8",
     "@types/jasmine": "^4.3.1",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^ 9.1.2",
@@ -114,9 +112,10 @@
     "prettier": "^2.0.0",
     "prettier-eslint": "^15.0.1",
     "prettier-eslint-cli": "^7.1.0",
+    "puppeteer": "^10.1.0",
     "rollup": "^3.10.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "storybook-addon-xd-designs": "^6.0.0",
+    "storybook": "^7.0.0-rc.8",
     "ts-loader": "^9.2.5",
     "typescript": "~4.6.4",
     "webpack": "^5.75.0",

packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts

@@ -1,5 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
@@ -23,13 +22,8 @@ import { iconArrowExpanderRightTag } from '../../icons/arrow-expander-right';
 
 const metadata: Meta = {
     title: 'Tests/Anchor Button',
-    decorators: [withXD],
     parameters: {
-        ...sharedMatrixParameters(),
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/42001df1-2969-438e-b353-4327d7a15102/specs/'
-        }
+        ...sharedMatrixParameters()
     }
 };
 
@@ -75,7 +69,7 @@ const component = (
     </${anchorButtonTag}>
 `;
 
-export const anchorButtonThemeMatrix: Story = createMatrixThemeStory(
+export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         disabledStates,
         appearanceStates,
@@ -84,15 +78,15 @@ export const anchorButtonThemeMatrix: Story = createMatrixThemeStory(
     ])
 );
 
-export const hiddenAnchorButton: Story = createStory(
+export const hiddenAnchorButton: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchorButtonTag} hidden
             >Hidden Anchor Button</${anchorButtonTag}
         >`
     )
 );
 
-export const textCustomized: Story = createMatrixThemeStory(
+export const textCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
         html`<${anchorButtonTag}>Anchor Button</${anchorButtonTag}>`
     )

packages/nimble-components/src/anchor-button/tests/anchor-button.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html, when } from '@microsoft/fast-element';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import {
@@ -33,18 +32,14 @@ interface AnchorButtonArgs {
 
 const metadata: Meta<AnchorButtonArgs> = {
     title: 'Anchor Button',
-    decorators: [withXD],
+    tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
                 component:
                     'An anchor button is a component with the visual appearance of a button, but it navigates like an anchor/link when pressed.'
             }
         },
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/42001df1-2969-438e-b353-4327d7a15102/specs/'
-        },
         actions: {}
     },
     // prettier-ignore

packages/nimble-components/src/anchor-tabs/tests/anchor-tabs-matrix.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, Story } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import {
     createMatrixThemeStory,
@@ -19,13 +18,8 @@ import { buttonTag } from '../../button';
 
 const metadata: Meta = {
     title: 'Tests/Anchor Tabs',
-    decorators: [withXD],
     parameters: {
-        ...sharedMatrixParameters(),
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b/specs'
-        }
+        ...sharedMatrixParameters()
     }
 };
 

packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.stories.ts

@@ -1,6 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { anchorTabsTag } from '..';
 import { anchorTabTag } from '../../anchor-tab';
@@ -21,16 +20,12 @@ tab panels hosted on the same page.`;
 
 const metadata: Meta<TabsArgs> = {
     title: 'Anchor Tabs',
-    decorators: [withXD],
+    tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
                 component: overviewText
             }
-        },
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b/specs'
         }
     },
     // prettier-ignore

packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts

@@ -1,5 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
@@ -18,13 +17,8 @@ import { anchorTag } from '..';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
-    decorators: [withXD],
     parameters: {
-        ...sharedMatrixParameters(),
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/bfadf499-caf5-4ca0-9814-e777fbae0d46/specs/'
-        }
+        ...sharedMatrixParameters()
     }
 };
 
@@ -61,23 +55,23 @@ const component = (
             ${() => `${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
 `;
 
-export const anchorThemeMatrix: Story = createMatrixThemeStory(
+export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         disabledStates,
         underlineHiddenStates,
         appearanceStates
     ])
 );
 
-export const hiddenAnchor: Story = createStory(
+export const hiddenAnchor: StoryFn = createStory(
     hiddenWrapper(html`<${anchorTag} hidden>Hidden Anchor</${anchorTag}>`)
 );
 
-export const textCustomized: Story = createMatrixThemeStory(
+export const textCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(html`<${anchorTag}>Link</${anchorTag}>`)
 );
 
-export const textWrapping: Story = createStory(
+export const textWrapping: StoryFn = createStory(
     // prettier-ignore
     html`
     <p style="width: 300px; border: 1px solid black">

packages/nimble-components/src/anchor/tests/anchor.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html } from '@microsoft/fast-element';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { AnchorAppearance } from '../types';
@@ -21,18 +20,14 @@ interface AnchorArgs {
 
 const metadata: Meta<AnchorArgs> = {
     title: 'Anchor',
-    decorators: [withXD],
+    tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
                 component:
                     'Per [W3C](https://w3c.github.io/aria-practices/#link), an anchor/link widget provides an interactive reference to a resource. The target resource can be either external or local, i.e., either outside or within the current page or application.'
             }
         },
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/bfadf499-caf5-4ca0-9814-e777fbae0d46/specs/'
-        },
         actions: {}
     },
     // prettier-ignore

packages/nimble-components/src/anchored-region/tests/anchored-region-matrix.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate } from '@microsoft/fast-element';
 import {
     createMatrix,
@@ -93,11 +93,11 @@ const component = (
         <div></div>
     </div>`;
 
-export const anchoredRegionThemeMatrix: Story = createStory(
+export const anchoredRegionThemeMatrix: StoryFn = createStory(
     createMatrix(component, [horizontalPositionStates, verticalPositionStates])
 );
 
-export const hiddenAnchoredRegion: Story = createStory(
+export const hiddenAnchoredRegion: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchoredRegionTag} hidden>Hidden Anchored Region</${anchoredRegionTag}>`
     )

packages/nimble-components/src/banner/tests/banner-matrix.stories.ts

@@ -1,5 +1,4 @@
 import type { Story, Meta } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
@@ -21,13 +20,8 @@ import { iconKeyTag } from '../../icons/key';
 
 const metadata: Meta = {
     title: 'Tests/Banner',
-    decorators: [withXD],
     parameters: {
-        ...sharedMatrixParameters(),
-        design: {
-            artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/29c405f7-08ea-48b6-973f-546970b9dbab/specs/'
-        }
+        ...sharedMatrixParameters()
     }
 };