From b4d2124f0a81c5b99483dab71f43579c33012e2c Mon Sep 17 00:00:00 2001 From: John Kreitlow <863023+radium-v@users.noreply.github.com> Date: Tue, 19 Nov 2024 09:17:07 -0800 Subject: [PATCH] update storybook config files --- packages/web-components/.storybook/main.cjs | 88 ------------------- packages/web-components/.storybook/main.ts | 27 ++++++ .../.storybook/{manager.mjs => manager.ts} | 2 +- .../.storybook/{preview.mjs => preview.ts} | 9 +- .../.storybook/{theme.mjs => theme.ts} | 0 .../web-components/.storybook/tsconfig.json | 3 +- 6 files changed, 34 insertions(+), 95 deletions(-) delete mode 100644 packages/web-components/.storybook/main.cjs create mode 100644 packages/web-components/.storybook/main.ts rename packages/web-components/.storybook/{manager.mjs => manager.ts} (86%) rename packages/web-components/.storybook/{preview.mjs => preview.ts} (87%) rename packages/web-components/.storybook/{theme.mjs => theme.ts} (100%) diff --git a/packages/web-components/.storybook/main.cjs b/packages/web-components/.storybook/main.cjs deleted file mode 100644 index 9cc493772e60e..0000000000000 --- a/packages/web-components/.storybook/main.cjs +++ /dev/null @@ -1,88 +0,0 @@ -const path = require('path'); -const CircularDependencyPlugin = require('circular-dependency-plugin'); -const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); - -const tsBin = require.resolve('typescript'); -const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json'); - -const tsPaths = new TsconfigPathsPlugin({ - configFile: tsConfigPath, -}); - -module.exports = - /** @type {import('@storybook/html-webpack5').StorybookConfig} */ - ({ - features: { - // On-demand code splitting is disabled for now, as it causes issues e2e tests. - storyStoreV7: false, - }, - // 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, - }, - framework: '@storybook/html-webpack5', - addons: [ - { - name: '@storybook/addon-essentials', - options: { - backgrounds: false, - viewport: false, - toolbars: false, - actions: true, - }, - }, - ], - webpackFinal: async config => { - config.resolve = config.resolve ?? {}; - config.resolve.extensions = config.resolve.extensions ?? []; - config.resolve.plugins = config.resolve.plugins ?? []; - config.module = config.module ?? {}; - config.plugins = config.plugins ?? []; - - config.resolve.extensionAlias = { - '.js': ['.js', '.ts'], - '.mjs': ['.mjs', '.mts'], - }; - config.resolve.extensions.push(...['.ts', '.js']); - config.resolve.plugins.push(tsPaths); - config.module.rules = config.module.rules ?? []; - config.module.rules.push( - { - test: /\.([cm]?ts|tsx)$/, - loader: 'ts-loader', - sideEffects: true, - options: { - transpileOnly: true, - compiler: tsBin, - }, - }, - // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM - // It also enables importing other packages without proper ESM extensions, but that should be avoided ! - // @see https://webpack.js.org/configuration/module/#resolvefullyspecified - { - test: /\.m?js/, - resolve: { fullySpecified: false }, - }, - ); - - config.plugins.push( - new CircularDependencyPlugin({ - exclude: /node_modules/, - failOnError: process.env.NODE_ENV === 'production', - }), - ); - - // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged. - if (process.env.TF_BUILD) { - config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin'); - } - - return config; - }, - docs: { - autodocs: true, - }, - }); diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts new file mode 100644 index 0000000000000..9ab6968d07036 --- /dev/null +++ b/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; diff --git a/packages/web-components/.storybook/manager.mjs b/packages/web-components/.storybook/manager.ts similarity index 86% rename from packages/web-components/.storybook/manager.mjs rename to packages/web-components/.storybook/manager.ts index 73873977355b4..43d5f8c331bed 100644 --- a/packages/web-components/.storybook/manager.mjs +++ b/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: { diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.ts similarity index 87% rename from packages/web-components/.storybook/preview.mjs rename to packages/web-components/.storybook/preview.ts index 5b8d1fe1ad2ef..313c02b1a53f0 100644 --- a/packages/web-components/.storybook/preview.mjs +++ b/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)) { diff --git a/packages/web-components/.storybook/theme.mjs b/packages/web-components/.storybook/theme.ts similarity index 100% rename from packages/web-components/.storybook/theme.mjs rename to packages/web-components/.storybook/theme.ts diff --git a/packages/web-components/.storybook/tsconfig.json b/packages/web-components/.storybook/tsconfig.json index 78905f4f65971..14a9d4ffb0ef6 100644 --- a/packages/web-components/.storybook/tsconfig.json +++ b/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.*"] }