update storybook config files

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,8 +1,9 @@
 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 webcomponentsTheme from './theme.js';
 
 import '../src/index-rollup.js';
 import './docs-root.css';
@@ -16,8 +17,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 +44,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/tsconfig.json

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