chore(web-components): Switch Storybook framework from html-webpack5 to html-vite

change/@fluentui-web-components-2dd018e1-9fde-44ea-b302-5473eb582511.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "switch storybook framework from html-webpack5 to html-vite",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -103,6 +103,7 @@
     "@storybook/react": "7.6.20",
     "@storybook/react-webpack5": "7.6.20",
     "@storybook/theming": "7.6.20",
+    "@storybook/html-vite": "7.6.20",
     "@swc/cli": "0.3.14",
     "@swc/core": "1.5.7",
     "@swc/helpers": "0.5.1",
@@ -224,7 +225,7 @@
     "enquirer": "2.3.6",
     "enzyme": "3.10.0",
     "enzyme-to-json": "3.6.2",
-    "esbuild": "0.20.1",
+    "esbuild": "0.24.0",
     "esbuild-loader": "4.1.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "18.2.1",
@@ -342,6 +343,7 @@
     "tslib": "2.6.3",
     "typescript": "5.2.2",
     "vinyl": "2.2.0",
+    "vite": "5.4.11",
     "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
@@ -374,7 +376,7 @@
   },
   "resolutions": {
     "@types/jest-axe/axe-core": "4.7.2",
-    "esbuild": "0.20.1",
+    "esbuild": "0.24.0",
     "eslint": "8.57.0",
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",

packages/web-components/.eslintrc.json

@@ -70,5 +70,13 @@
         // TODO: I think we can come up with a regex that ignores variables with __ in them
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.json"],
+      "rules": {
+        "@typescript-eslint/no-unused-expressions": "off"
+      }
+    }
+  ]
 }

packages/web-components/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+export default {
+  // helpers.stories.ts is a file that contains helper functions for stories,
+  // and should not be treated as a story itself.
+  stories: ['../src/**/!(helpers)*.stories.@(ts|mdx)'],
+  staticDirs: ['../public'],
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  framework: '@storybook/html-vite',
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        viewport: false,
+        toolbars: false,
+        actions: true,
+      },
+    },
+  ],
+  docs: {
+    autodocs: true,
+  },
+} satisfies StorybookConfig;

packages/web-components/.storybook/manager.mjs → packages/web-components/.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import webcomponentsTheme from './theme.mjs';
+import webcomponentsTheme from './theme.js';
 
 addons.setConfig({
   previewTabs: {

packages/web-components/.storybook/preview.mjs → packages/web-components/.storybook/preview.ts

@@ -1,11 +1,19 @@
+/// <reference types="vite/client" />
+
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import type { StoryContext } from '@storybook/html';
 import * as prettier from 'prettier';
 import prettierPluginHTML from 'prettier/parser-html.js';
 import { setTheme } from '../src/theme/set-theme.js';
-import webcomponentsTheme from './theme.mjs';
-
-import '../src/index-rollup.js';
 import './docs-root.css';
+import webcomponentsTheme from './theme.js';
+
+// Import all component definitions. This is a vite-specific feature:
+// https://vitejs.dev/guide/features.html#glob-import
+const modules = import.meta.glob(['../src/**/define.ts']);
+for (const path in modules) {
+  modules[path]();
+}
 
 const FAST_EXPRESSION_COMMENTS = /<!--((fast-\w+)\{.*\}\2)?-->/g; // Matches comments that contain FAST expressions
 
@@ -16,8 +24,8 @@ const themes = {
   'teams-dark': teamsDarkTheme,
 };
 
-function changeTheme(/** @type {Event} */ e) {
-  setTheme(themes[/** @type {keyof themes} */ (/** @type {HTMLInputElement}*/ (e.target).value)]);
+function changeTheme(e: Event) {
+  setTheme(themes[(e.target as HTMLSelectElement).value as keyof typeof themes]);
 }
 
 // This is needed in Playwright.
@@ -43,7 +51,7 @@ export const parameters = {
     source: {
       // To get around the inability to change Prettier options in the source addon, this transform function
       // imports the standalone Prettier and uses it to format the source with the desired options.
-      transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) {
+      transform(src: string, storyContext: StoryContext) {
         if (!src) {
           const fragment = storyContext.originalStoryFn(storyContext.allArgs, storyContext);
           if (!(fragment instanceof DocumentFragment) && !(fragment instanceof HTMLElement)) {

packages/web-components/.storybook/theme.mjs → packages/web-components/.storybook/theme.ts

@@ -20,7 +20,7 @@ export default create({
 
   // Typography
   fontBase:
-      '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
+    '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
   fontCode: 'monospace',
 
   // Text colors
@@ -32,4 +32,3 @@ export default create({
   inputTextColor: 'black',
   inputBorderRadius: 4,
 });
-

packages/web-components/.storybook/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true,
-    "types": ["node"]
+    "noEmit": true
   },
   "include": ["*", "../public", "../src/**/*.stories.*"]
 }

packages/web-components/package.json

@@ -92,8 +92,6 @@
   "devDependencies": {
     "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.0",
-    "@storybook/html": "7.6.20",
-    "@storybook/html-webpack5": "7.6.20",
     "chromedriver": "^125.0.0"
   },
   "dependencies": {

packages/web-components/src/tablist/tablist.spec.ts

@@ -162,7 +162,7 @@ test.describe('Tablist', () => {
       const element = page.locator('fluent-tablist');
       const tabs = element.locator('fluent-tab');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist>
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>

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

@@ -1,10 +1,12 @@
-import { html, render, repeat } from '@microsoft/fast-element';
+import { html, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { Meta, renderComponent, Story } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryObj } from '../helpers.stories.js';
 import { definition } from './tooltip.definition.js';
-import { Tooltip } from './tooltip.js';
+import type { Tooltip } from './tooltip.js';
 import { TooltipPositioningOption } from './tooltip.options.js';
 
+type Story = StoryObj<Tooltip>;
+
 const storyTemplate = () => {
   const id = uniqueId('anchor-');
 
@@ -48,13 +50,12 @@ export default {
       },
     },
   },
-} as unknown as Meta<Tooltip>;
+} as Meta<Tooltip>;
 
-export const Default: Story<Tooltip> = args => {
-  return renderComponent(html`${render(args, storyTemplate)}`)(args);
-};
-Default.args = {
-  slottedContent: () => html`Really long tooltip content goes here. lorem ipsum dolor sit amet.`,
+export const Default: Story = {
+  args: {
+    slottedContent: () => html`Really long tooltip content goes here. lorem ipsum dolor sit amet.`,
+  },
 };
 
 const iconArrowRight = (rotation = 0) => html`<svg
@@ -121,32 +122,36 @@ const positionTooltipTemplate = html`
   <fluent-tooltip anchor="btn-${x => x.id}" positioning="${x => x.id}"> ${x => x.id} </fluent-tooltip>
 `;
 
-export const Positioning: Story<Tooltip> = renderComponent(html`
-  <div>
-    <style>
-      .grid {
-        box-sizing: border-box;
-        display: grid;
-        gap: 4px;
-        max-width: min-content;
-        grid-template-areas:
-          '. above-start above above-end .'
-          'before-top . . . after-top'
-          'before . . . after'
-          'before-bottom . . . after-bottom'
-          '. below-start below below-end .';
-      }
-      .grid fluent-button {
-        aspect-ratio: 1;
-        min-width: 44px;
-      }
-    </style>
-    <div class="grid">${repeat(x => x.storyItems, positionButtonTemplate)}</div>
-
-    ${repeat(x => x.storyItems, positionTooltipTemplate)}
-  </div>
-`).bind({});
+export const Positioning: Story = {
+  parameters: {
+    layout: 'centered',
+  },
+  render: renderComponent(html`
+    <div>
+      <style>
+        .grid {
+          box-sizing: border-box;
+          display: grid;
+          gap: 4px;
+          max-width: min-content;
+          grid-template-areas:
+            '. above-start above above-end .'
+            'before-top . . . after-top'
+            'before . . . after'
+            'before-bottom . . . after-bottom'
+            '. below-start below below-end .';
+        }
+        .grid fluent-button {
+          aspect-ratio: 1;
+          min-width: 44px;
+        }
+      </style>
+      <div class="grid">${repeat(x => x.storyItems, positionButtonTemplate)}</div>
 
-Positioning.args = {
-  storyItems: Object.keys(TooltipPositioningOption).map(id => ({ id })),
+      ${repeat(x => x.storyItems, positionTooltipTemplate)}
+    </div>
+  `),
+  args: {
+    storyItems: Object.keys(TooltipPositioningOption).map(id => ({ id })),
+  },
 };