Migrate to storybook 8

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 → 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']
@@ -52,7 +52,8 @@ const globalTypes = {
 const preview = {
  parameters,
  globalTypes,
- decorators: [withTheme]
+ decorators: [withTheme],
+ tags: ['autodocs']
 };
 
 export default preview;

packages/components/package.json

@@ -57,31 +57,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",
@@ -91,7 +90,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 → 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",