Migrate to storybook 8

Author: fcollonval

package.json

@@ -33,8 +33,8 @@
         "stylelint:check": "stylelint --cache \"packages/lab-example/style/**/*.css\""
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.55.0",
-        "@typescript-eslint/parser": "^5.55.0",
+        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/parser": "^6.0.0",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-prettier": "^5.0.0",

packages/components/.storybook/main.js renamed to packages/components/.storybook/main.mjs

@@ -1,12 +1,12 @@
 import { dirname, join } from 'path';
 import remarkGfm from 'remark-gfm';
-const ResolveTypescriptPlugin = require('resolve-typescript-plugin');
+import { default as ResolveTypescriptPlugin} from 'resolve-typescript-plugin';
 
-module.exports = {
+const config = {
   stories: [
     '../docs/**/*.mdx',
     '../src/**/*.mdx',
-    '../src/**/*.stories.mdx',
+    '../src/**/*.mdx',
     '../src/**/*.stories.ts'
   ],
   addons: [
@@ -15,14 +15,16 @@ module.exports = {
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
-            remarkPlugins: [remarkGfm]
+    // FIXME
+    //         remarkPlugins: [remarkGfm]
           }
         }
       }
     },
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-a11y')
+    getAbsolutePath('@storybook/addon-a11y'),
+    '@storybook/addon-webpack5-compiler-swc'
   ],
   webpackFinal: async config => {
     if (!config.resolve.plugins) {
@@ -54,11 +56,12 @@ module.exports = {
     options: {}
   },
   docs: {
-    autodocs: true,
     defaultName: 'Documentation'
   }
 };
 
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, 'package.json')));
 }
+
+export default config;

packages/components/.storybook/manager.js

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

packages/components/.storybook/preview.js

@@ -6,7 +6,7 @@ import { withTheme } from '../src/utilities/storybook';
 JupyterComponents;
 
 const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  // actions: { argTypesRegex: '^on[A-Z].*' },
   options: {
     storySort: {
       order: ['Docs', 'Library']
@@ -71,7 +71,8 @@ const globalTypes = {
 const preview = {
   parameters,
   globalTypes,
-  decorators: [withTheme]
+  decorators: [withTheme],
+  tags: ['autodocs']
 };
 
 export default preview;

packages/components/package.json

@@ -58,31 +58,30 @@
     "@playwright/test": "^1.35.1",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/html": "^7.5.3",
-    "@storybook/html-webpack5": "^7.5.3",
-    "@storybook/theming": "^7.5.3",
+    "@storybook/addon-a11y": "^8.1.9",
+    "@storybook/addon-actions": "^8.1.9",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/html": "^8.1.9",
+    "@storybook/html-webpack5": "^8.1.9",
+    "@storybook/manager-api": "^8.1.9",
+    "@storybook/theming": "^8.1.9",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.0.0",
     "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
     "custom-element-react-wrappers": "^1.6.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^5.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.3.0",
     "prettier": "^3.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "remark-gfm": "^3.0.1",
     "resolve-typescript-plugin": "^1.1.5",
     "rimraf": "^5.0.1",
@@ -92,7 +91,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-transform-tagged-template": "0.0.3",
     "rollup-plugin-typescript2": "^0.27.0",
-    "storybook": "^7.5.3",
+    "storybook": "^8.1.9",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.3",
     "tsc-esm-fix": "^2.20.21",

packages/components/src/anchored-region/anchored-region.stories.mdx renamed to packages/components/src/anchored-region/anchored-region.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Components/Anchored Region" />
 

packages/components/src/button/button.stories.ts

@@ -6,6 +6,7 @@ import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Button',
+  tags: ['!autodocs'],
   argTypes: {
     label: { control: 'text' },
     appearance: {

packages/components/src/date-field/date-field.form-associated.ts

@@ -3,8 +3,9 @@
 
 import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 class _DateField extends FoundationElement {}
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging, @typescript-eslint/no-empty-interface
 interface _DateField extends FormAssociated {}
 
 /**

packages/components/src/date-field/date-field.ts

@@ -42,6 +42,7 @@ const INVALID_DATE = 'Invalid Date';
  * @fires input - Fires a custom 'input' event when the value has changed
  * @fires change - Fires a custom 'change' event when the value has changed
  */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class DateField extends FormAssociatedDateField {
   /**
    * The appearance of the element.
@@ -355,5 +356,6 @@ export class DateField extends FormAssociatedDateField {
  * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
  */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export interface DateField extends StartEnd, DelegatesARIATextbox {}
 applyMixins(DateField, StartEnd, DelegatesARIATextbox);

packages/components/src/drafts/picker/picker.stories.ts

@@ -5,7 +5,8 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/html';
 
 export default {
-  title: 'Components/Picker',
+  title: 'Drafts/Picker',
+  tags: ['!autodocs'],
   parameters: {
     controls: { expanded: true }
   },

packages/components/src/toolbar/index.ts

@@ -75,6 +75,7 @@ const ToolbarArrowKeyMap = Object.freeze({
  *
  * @public
  */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class FoundationToolbar extends FoundationElement {
   /**
    * The internal index of the currently focused element.
@@ -353,6 +354,7 @@ export class FoundationToolbar extends FoundationElement {
  *
  * @public
  */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class DelegatesARIAToolbar {
   /**
    * The id of the element labeling the toolbar.
@@ -380,13 +382,14 @@ export class DelegatesARIAToolbar {
  * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging, @typescript-eslint/no-empty-interface
 export interface DelegatesARIAToolbar extends ARIAGlobalStatesAndProperties {}
 applyMixins(DelegatesARIAToolbar, ARIAGlobalStatesAndProperties);
 
 /**
  * @internal
  */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export interface FoundationToolbar extends StartEnd, DelegatesARIAToolbar {}
 applyMixins(FoundationToolbar, StartEnd, DelegatesARIAToolbar);
 

packages/components/src/tooltip/tooltip.stories.ts

@@ -14,7 +14,7 @@ export default {
     delay: {
       description: 'Delay to display the tooltip (in ms)',
       table: {
-        defaultValue: { summary: 300 }
+        defaultValue: { summary: '300' }
       },
       control: { type: 'range', min: 0, max: 2000, step: 100 }
     }

packages/components/tsconfig.storybook.json

@@ -4,7 +4,6 @@
   "exclude": [
     "node_modules",
     "src/**/*.spec.ts",
-    "src/**/*.stories.mdx",
     "src/**/*.test.ts",
     "playwright.config.ts"
   ]

packages/lab-example/package.json

@@ -60,8 +60,8 @@
   "devDependencies": {
     "@jupyterlab/builder": "^4.0.0",
     "@types/react": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "css-loader": "^6.7.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",