Storybook 8 Upgrade

.github/workflows/main.yml

@@ -88,6 +88,7 @@ jobs:
             - '../packages/nimble-tokens/dist/icons/svg/**'
             - '../packages/nimble-tokens/source/styledictionary/properties/**'
           storybookBuildDir: ../../packages/site/dist/storybook
+          storybookBaseDir: ./packages/nimble-components
           exitOnceUploaded: true # Do not wait for test results
           exitZeroOnChanges: true # Option to prevent the workflow from failing
 

change/@ni-nimble-components-acb97d9b-ffbe-4f70-8c61-a42f00459247.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Initial SB 8 upgrade",
+  "packageName": "@ni/nimble-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/.storybook/blocks/StoryLayout.tsx

@@ -1,28 +1,42 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import './story-layout.css';
 import { NimbleIconCheck } from '../../src/icons/tests/check.react';
 import { NimbleIconExclamationMark } from '../../src/icons/tests/exclamation-mark.react';
 
+interface ChildrenProp {
+    children?: ReactNode
+}
+
 /**
  * Renders a frame to match visual design of existing Storybook Doc blocks.
  */
-export const Frame = ({ children }) => {
+export const Frame = ({ children }: ChildrenProp) => {
     return <div className="story-layout-frame">{children}</div>;
 };
 
+interface ContainerProp {
+    children?: ReactNode
+    config?: string
+}
+
 /**
  * Renders a container with grid configuration. Use with <Column> to create grided documentation.
  * Use CSS grid syntax for the config prop to specify the number of columns and their widths.
  */
-export const Container = ({ children, config = '200px 1fr' }) => {
+export const Container = ({ children, config = '200px 1fr' }: ContainerProp) => {
     return <div className="story-layout-container" style={{gridTemplateColumns: config}}>{children}</div>;
 };
 
+interface ColumnProp {
+    children?: ReactNode
+    stylingClass?: string
+}
+
 /**
  * Renders a column for use with <Container>.
  * If you need to put Nimble components in a column, use the stylingClass="controls" prop to apply the correct margins.
  */
-export const Column = ({ children, stylingClass = '' }) => {
+export const Column = ({ children, stylingClass = '' }: ColumnProp) => {
     const cn = `story-layout-column ${stylingClass}`;
     return <div className={cn}>{children}</div>;
 };
@@ -37,7 +51,7 @@ export const Divider = () => {
 /**
  * Renders a "Do" section for Storybook documentation.
  */
-export const Do = ({ children }) => {
+export const Do = ({ children }: ChildrenProp) => {
     return (
         <Container config='48px 1fr'>
             <Column>
@@ -51,7 +65,7 @@ export const Do = ({ children }) => {
 /**
  * Renders a "Dont" section for Storybook documentation.
  */
-export const Dont = ({ children }) => {
+export const Dont = ({ children }: ChildrenProp) => {
     return (
         <Container config='48px 1fr'>
             <Column>
@@ -62,10 +76,18 @@ export const Dont = ({ children }) => {
     );
 };
 
+interface TagProp {
+    name: string
+    open?: boolean
+    openClose?: boolean
+    close?: boolean
+    selfClose?: boolean
+}
+
 /**
  * Renders a "Tag" component for Storybook documentation.
  */
-export const Tag = ({ name, open, openClose, close, selfClose }) => {
+export const Tag = ({ name, open, openClose, close, selfClose }: TagProp) => {
     if (open) {
         return (<code>&lt;{name}&gt;</code>);
     } else if (close) {

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

@@ -1,19 +1,21 @@
+import { dirname, join } from 'path';
 import remarkGfm from 'remark-gfm';
 import CircularDependencyPlugin from 'circular-dependency-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
 
 // All files participating in storybook should be in src
 // so that TypeScript and linters can track them correctly
 export const stories = ['../src/**/*.mdx', '../src/**/*.stories.ts'];
 export const addons = [
     {
-        name: '@storybook/addon-essentials',
+        name: getAbsolutePath('@storybook/addon-essentials'),
         options: {
             outline: false,
             docs: false
         }
     },
     {
-        name: '@storybook/addon-docs',
+        name: getAbsolutePath('@storybook/addon-docs'),
         options: {
             mdxPluginOptions: {
                 mdxCompileOptions: {
@@ -22,12 +24,14 @@ export const addons = [
             }
         }
     },
-    '@storybook/addon-a11y',
-    '@storybook/addon-interactions'
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    '@storybook/addon-webpack5-compiler-swc'
 ];
 export function webpackFinal(config) {
     config.module.rules.push({
-        test: /\.ts$/,
+        test: /\.(ts|tsx)$/,
         use: [
             {
                 loader: require.resolve('ts-loader')
@@ -43,14 +47,25 @@ export function webpackFinal(config) {
     config.performance = {
         hints: false
     };
+    config.optimization.minimizer = [
+        new TerserPlugin({
+            terserOptions: {
+                keep_classnames: true,
+                keep_fnames: true
+            }
+        })
+    ];
     return config;
 }
 export const staticDirs = ['public'];
 export const framework = {
-    name: '@storybook/html-webpack5',
-    options: {
-        builder: {
-            useSWC: true
-        }
-    }
+    name: getAbsolutePath('@storybook/html-webpack5')
 };
+
+export const docs = {
+    autodocs: false
+};
+
+function getAbsolutePath(value) {
+    return dirname(require.resolve(join(value, 'package.json')));
+}

packages/nimble-components/.storybook/manager-head.html

@@ -1,4 +1,4 @@
 <!--
   Override the default favicon used in the Storybook in the browser tab.
 -->
- <link rel="icon" href="favicon.ico" sizes="any">
+ <link rel="icon" href="favicon.ico" sizes="any">

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

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({

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

@@ -37,6 +37,8 @@ export const parameters = {
                 'Tests',
                 ['Docs'],
                 'Internal',
+                ['Docs'],
+                'Patterns',
                 ['Docs']
             ]
         }
@@ -74,10 +76,13 @@ const createOrUpdateBackgroundWorkaround = style => {
 // Storybook background plugin does not support mdx
 // Workaround based on: https://github.com/storybookjs/storybook/issues/13323#issuecomment-876296801
 export default {
+    parameters,
     decorators: [
         (story, context) => {
             const defaultBackgroundColorKey = context?.parameters?.backgrounds?.default;
-            const defaultBackgroundColor = context?.parameters?.backgrounds?.values?.find(v => v.name === defaultBackgroundColorKey)?.value;
+            const defaultBackgroundColor = context?.parameters?.backgrounds?.values?.find(
+                v => v.name === defaultBackgroundColorKey
+            )?.value;
             const currentBackgroundColor = context?.globals?.backgrounds?.value ?? defaultBackgroundColor;
             const style = `.docs-story {
                 background-color: ${currentBackgroundColor}

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

@@ -1,42 +1,51 @@
 import { create } from '@storybook/theming/create';
 import {
     Black91,
-    Brand100,
     Brand85,
-    Black75,
-    White
+    White,
+    Black7,
+    Black15,
+    DigitalGreenDark105,
+    Black30,
+    Black,
+    Black75
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import logo from './nimble-ui-logo.svg';
 
 export default create({
     base: 'light',
-
-    colorPrimary: Brand100,
-    colorSecondary: Black75,
+    colorPrimary: Brand85,
+    colorSecondary: DigitalGreenDark105,
 
     // UI
-    appBg: 'white',
-    appContentBg: '#F4F4F4',
-    appBorderColor: 'grey',
-    appBorderRadius: 4,
+    appBg: White,
+    appContentBg: White,
+    appBorderColor: Black30,
+    appBorderRadius: 5,
 
     // Typography
     fontBase: '"Open Sans", sans-serif',
     fontCode: 'monospace',
 
     // Text colors
     textColor: Black91,
-    textInverseColor: 'rgba(255,255,255,0.9)',
+    textInverseColor: Black15,
+    textMutedColor: Black75,
 
     // Toolbar default and active colors
     barTextColor: White,
-    barSelectedColor: White,
+    barHoverColor: Black15,
+    barSelectedColor: Black7,
     barBg: Brand85,
 
     // Form colors
-    inputBg: 'white',
-    inputBorder: 'silver',
-    inputTextColor: 'black',
+    buttonBg: White,
+    buttonBorder: Black75,
+    booleanBg: White,
+    booleanSelectedBg: Black30,
+    inputBg: White,
+    inputBorder: Black75,
+    inputTextColor: Black,
     inputBorderRadius: 4,
 
     brandTitle: 'Nimble components',

packages/nimble-components/chromatic.config.json

@@ -0,0 +1,4 @@
+{
+    "projectId": "Project:60e89457a987cf003efc0a5b",
+    "storybookBaseDir": "packages/nimble-components"
+}

packages/nimble-components/package.json

@@ -108,6 +108,7 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.20.12",
+    "@chromatic-com/storybook": "^1.2.25",
     "@microsoft/fast-react-wrapper": "0.3.22",
     "@ni/eslint-config-javascript": "^4.2.0",
     "@ni/eslint-config-typescript": "^4.2.0",
@@ -117,18 +118,19 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-a11y": "^7.6.13",
-    "@storybook/addon-actions": "^7.6.13",
-    "@storybook/addon-docs": "^7.6.13",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
-    "@storybook/addons": "^7.6.13",
-    "@storybook/cli": "^7.6.13",
+    "@storybook/addon-a11y": "^8.0.4",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-docs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/cli": "^8.0.4",
     "@storybook/csf": "^0.1.2",
-    "@storybook/html": "^7.6.13",
-    "@storybook/html-webpack5": "^7.6.13",
-    "@storybook/theming": "^7.6.13",
+    "@storybook/html": "^8.0.4",
+    "@storybook/html-webpack5": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
     "@types/jasmine": "^5.1.4",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^9.1.2",
@@ -154,12 +156,13 @@
     "playwright": "1.42.0",
     "prettier-eslint": "^16.3.0",
     "prettier-eslint-cli": "^8.0.1",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "rollup": "^4.12.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
-    "storybook": "^7.6.13",
+    "storybook": "^8.0.4",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.2.5",
     "typescript": "~4.9.5",
     "webpack": "^5.75.0",

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

@@ -1,4 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import { createStory } from '../../utilities/tests/storybook';
 import {
@@ -46,19 +46,19 @@ const component = (
     </${anchorTabsTag}>
 `;
 
-export const anchorTabsThemeMatrix: Story = createMatrixThemeStory(
+export const anchorTabsThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [tabsToolbarState, disabledStates])
 );
 
-export const hiddenTabs: Story = createStory(
+export const hiddenTabs: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchorTabsTag} hidden>
             <${anchorTabTag}>Tab One</${anchorTabTag}>
         </${anchorTabsTag}>`
     )
 );
 
-export const textCustomized: Story = createMatrixThemeStory(
+export const textCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
         html`
             <${anchorTabsTag}>

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

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import { createStory } from '../../utilities/tests/storybook';
@@ -81,7 +81,7 @@ const component = (
     <div style="height: var(${bannerGapSize.cssCustomProperty})"></div>
 `;
 
-export const bannerThemeMatrix: Story = createMatrixThemeStory(
+export const bannerThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         severityStates,
         actionStates,
@@ -90,7 +90,7 @@ export const bannerThemeMatrix: Story = createMatrixThemeStory(
     ])
 );
 
-export const hiddenBanner: Story = createStory(
+export const hiddenBanner: StoryFn = createStory(
     hiddenWrapper(
         html`<${bannerTag} hidden>
             <span slot="title">Hidden banner</span>