Storybook 7 upgrade

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

@@ -42,6 +42,7 @@
   ],
   "devDependencies": {
     "@lhci/cli": "^0.10.0",
+    "@storybook/html": "*",
     "beachball": "^2.31.0",
     "cross-env": "^7.0.3",
     "patch-package": "^6.4.7"

packages/nimble-components/.babelrc.json

@@ -0,0 +1,15 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

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",
@@ -71,25 +71,25 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
-    "@mdx-js/react": "^2.2.1",
+    "@babel/preset-typescript": "^7.18.6",
     "@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 +114,12 @@
     "prettier": "^2.0.0",
     "prettier-eslint": "^15.0.1",
     "prettier-eslint-cli": "^7.1.0",
+    "puppeteer": "^10.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.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}>`
     )