chore: enable build-less DX for cross library storybooks and VR tests and improve build speeds

apps/public-docsite-v9/package.json

@@ -27,10 +27,8 @@
     "@fluentui/react": "^8.105.9",
     "@fluentui/react-northstar": "^0.66.1",
     "@fluentui/react-icons-northstar": "^0.66.1",
-    "@fluentui/storybook": "^1.0.0",
     "@fluentui/react-components": "^9.15.5",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
-    "@fluentui/react-theme": "^9.1.5",
     "@griffel/react": "^1.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts

@@ -3,7 +3,7 @@
  * They are necessary to build the theme shims.
  */
 
-import { BrandVariants } from '@fluentui/react-theme';
+import { BrandVariants } from '@fluentui/react-components';
 
 /**
  * Possible color variant values

apps/stress-test/package.json

@@ -21,6 +21,7 @@
     "random-seedable": "1.0.8"
   },
   "devDependencies": {
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-storybook": "*"
   }
 }

apps/stress-test/scripts/commands/build.ts

@@ -14,7 +14,7 @@ const command = 'build';
 
 const run: (argv: CLIBuildOptions) => Promise<void> = async argv => {
   if (argv.buildDeps) {
-    const deps = ['@fluentui/react', '@fluentui/web-components'];
+    const deps = ['@fluentui/web-components'];
     console.log('Building dependencies', deps.join(', '));
     const cmd = `lage build --to ${deps.join(' ')} ${argv.verbose ? '--verbose' : ''}`;
     console.log(`Run: ${cmd}`);

apps/stress-test/webpack/webpack.config.ts

@@ -1,7 +1,8 @@
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { registerTsPaths, createPathAliasesConfig, rules } from '@fluentui/scripts-storybook';
 import { configurePages } from './pageConfig.js';
 import { configureGriffel } from './griffelConfig.js';
 import * as WebpackDevServer from 'webpack-dev-server';
@@ -11,6 +12,8 @@ const enabledReactProfiling = true;
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const { tsConfigAllPath } = createPathAliasesConfig();
+
 type WebpackArgs = {
   mode: 'production' | 'development' | 'none';
   griffelMode: GriffelMode;
@@ -38,14 +41,10 @@ const createConfig: WebpackConfigurationCreator = (_env, argv) => {
         'scheduler/tracing': 'scheduler/tracing-profiling',
       },
       extensions: ['.tsx', '.ts', '.js'],
-      plugins: [
-        new TsconfigPathsPlugin({
-          configFile: path.resolve(__dirname, '../../../tsconfig.base.json'),
-        }),
-      ],
     },
     module: {
       rules: [
+        rules.scssRule,
         {
           test: /\.(ts|tsx)?$/,
           exclude: /node_modules/,
@@ -103,6 +102,8 @@ const createConfig: WebpackConfigurationCreator = (_env, argv) => {
   config = configureGriffel(config, argv.griffelMode);
   config = configurePages(config);
 
+  registerTsPaths({ config, configFile: tsConfigAllPath });
+
   return config;
 };
 

apps/vr-tests-react-components/.storybook/main.js

@@ -1,9 +1,38 @@
+// @ts-check
+
 const path = require('path');
-const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 
-module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({
-  addons: ['@fluentui/react-storybook-addon'],
+const { registerTsPaths, registerRules, rules, loadWorkspaceAddon } = require('@fluentui/scripts-storybook');
+const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.json');
 
+module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({
+  addons: [
+    {
+      name: 'storybook-addon-swc',
+      options: /** @type {import('storybook-addon-swc').StoryBookAddonSwcOptions} */ ({
+        swcLoaderOptions: {
+          jsc: {
+            target: 'es2019',
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+              decorators: true,
+              dynamicImport: true,
+            },
+            transform: {
+              decoratorMetadata: true,
+              legacyDecorator: true,
+            },
+            keepClassNames: true,
+            externalHelpers: true,
+            loose: true,
+          },
+        },
+        swcMinifyOptions: { mangle: false },
+      }),
+    },
+    loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }),
+  ],
   stories: ['../src/**/*.stories.tsx'],
   core: {
     builder: 'webpack5',
@@ -15,29 +44,8 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf
     reactDocgen: false,
   },
   webpackFinal: config => {
-    const tsPaths = new TsconfigPathsPlugin({
-      configFile: path.resolve(__dirname, '../../../tsconfig.base.json'),
-    });
-
-    if (config.resolve) {
-      config.resolve.plugins ? config.resolve.plugins.push(tsPaths) : (config.resolve.plugins = [tsPaths]);
-    }
-
-    if (config.module) {
-      config.module.rules?.unshift({
-        test: /\.(ts|tsx)$/,
-        use: [
-          {
-            loader: '@griffel/webpack-loader',
-            options: {
-              babelOptions: {
-                presets: ['@babel/preset-typescript'],
-              },
-            },
-          },
-        ],
-      });
-    }
+    registerTsPaths({ config, configFile: tsConfigPath });
+    registerRules({ config, rules: [rules.griffelRule] });
 
     return config;
   },

apps/vr-tests-react-components/.storybook/manager.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming';
 

apps/vr-tests-react-components/.storybook/preview.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import * as React from 'react';
 import { setAddon } from '@storybook/react';
 import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';

apps/vr-tests-react-components/package.json

@@ -16,7 +16,8 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
     "@fluentui/react-accordion": "^9.0.25",

apps/vr-tests/.storybook/main.js

@@ -1,6 +1,37 @@
-const { createStorybookWebpackConfig } = require('@fluentui/scripts-webpack');
+// @ts-check
 
+const path = require('path');
+const { registerRules, registerTsPaths, rules } = require('@fluentui/scripts-storybook');
+
+const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.v8.json');
 module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({
+  addons: [
+    {
+      name: 'storybook-addon-swc',
+      options: /** @type {import('storybook-addon-swc').StoryBookAddonSwcOptions} */ ({
+        swcLoaderOptions: {
+          jsc: {
+            target: 'es2019',
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+              decorators: true,
+              dynamicImport: true,
+            },
+            transform: {
+              decoratorMetadata: true,
+              legacyDecorator: true,
+            },
+            keepClassNames: true,
+            externalHelpers: true,
+            loose: true,
+          },
+        },
+        swcMinifyOptions: { mangle: false },
+      }),
+    },
+    '@storybook/addon-actions',
+  ],
   stories: ['../src/**/*.stories.tsx'],
   core: {
     builder: 'webpack5',
@@ -12,7 +43,9 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf
     reactDocgen: false,
   },
   webpackFinal: config => {
-    return createStorybookWebpackConfig(config);
+    registerTsPaths({ config, configFile: tsConfigPath });
+    registerRules({ config, rules: [rules.scssRule] });
+
+    return config;
   },
-  addons: ['@storybook/addon-actions'],
 });

apps/vr-tests/.storybook/manager.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming';
 

apps/vr-tests/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "description": "Visual regression tests for Fluent UI React",
   "scripts": {
-    "build": "just-scripts build",
+    "build": "build-storybook -o dist/storybook",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
+    "start": "start-storybook -p 3000",
     "type-check": "tsc",
-    "vr:build": "cross-env NODE_OPTIONS=--max-old-space-size=3072 just-scripts storybook:build",
+    "vr:build": "yarn build",
     "vr:test": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-webpack": "*",
+    "@fluentui/scripts-storybook": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {

apps/vr-tests/src/stories/Icon.stories.tsx

@@ -3,14 +3,17 @@ import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Icon, IconType, getIconClassName, Fabric } from '@fluentui/react';
-import * as IconNames from '@fluentui/font-icons-mdl2/src/IconNames';
+import { IconNames } from '@fluentui/font-icons-mdl2';
 
 import { TestImages } from '@fluentui/example-data';
 
 // Rendering allIcons tests that the icon package can initialize all icons from the cdn
 const allIcons: JSX.Element[] = [];
+
+// eslint-disable-next-line @fluentui/max-len
+// @ts-expect-error - IconNames is a const enum -> const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query.ts(2475)
 // eslint-disable-next-line guard-for-in
-for (const iconName in (IconNames as any).IconNames) {
+for (const iconName in IconNames) {
   allIcons.push(<Icon iconName={iconName} />);
 }
 

change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: enable build-less DX for storybook",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/fluentui/docs/.storybook/main.js

@@ -1,40 +1,51 @@
+// @ts-check
+
 const path = require('path');
-const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+
+const { registerTsPaths, registerRules, rules } = require('@fluentui/scripts-storybook');
+
+const tsConfigPath = path.resolve(__dirname, '../../../../tsconfig.base.v0.json');
 
 module.exports = /** @type {import('../../../../.storybook/main').StorybookBaseConfig} */ ({
+  addons: [
+    {
+      name: 'storybook-addon-swc',
+      options: /** @type {import('storybook-addon-swc').StoryBookAddonSwcOptions} */ ({
+        swcLoaderOptions: {
+          jsc: {
+            target: 'es2019',
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+              decorators: true,
+              dynamicImport: true,
+            },
+            transform: {
+              decoratorMetadata: true,
+              legacyDecorator: true,
+            },
+            keepClassNames: true,
+            externalHelpers: true,
+            loose: true,
+          },
+        },
+        swcMinifyOptions: { mangle: false },
+      }),
+    },
+  ],
   stories: ['../src/**/*.stories.tsx'],
   core: {
     builder: 'webpack5',
+    disableTelemetry: true,
   },
   babel: {},
   typescript: {
     // disable react-docgen-typescript (totally not needed here, slows things down a lot)
     reactDocgen: false,
   },
   webpackFinal: config => {
-    const tsPaths = new TsconfigPathsPlugin({
-      configFile: path.resolve(__dirname, '../../../../tsconfig.base.json'),
-    });
-
-    if (config.resolve) {
-      config.resolve.plugins ? config.resolve.plugins.push(tsPaths) : (config.resolve.plugins = [tsPaths]);
-    }
-
-    if (config.module) {
-      config.module.rules?.unshift({
-        test: /\.(ts|tsx)$/,
-        use: [
-          {
-            loader: '@griffel/webpack-loader',
-            options: {
-              babelOptions: {
-                presets: ['@babel/preset-typescript'],
-              },
-            },
-          },
-        ],
-      });
-    }
+    registerTsPaths({ config, configFile: tsConfigPath });
+    registerRules({ config, rules: [rules.griffelRule] });
 
     return config;
   },

packages/fluentui/docs/.storybook/preview.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import * as React from 'react';
 import { Provider, teamsTheme } from '@fluentui/react-northstar';
 

packages/fluentui/docs/package.json

@@ -53,6 +53,7 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-babel": "*",
     "@fluentui/scripts-gulp": "*",
+    "@fluentui/scripts-storybook": "*",
     "@types/classnames": "^2.2.9",
     "@types/color": "^3.0.0",
     "@types/faker": "^4.1.3",

packages/react-components/react-migration-v0-v9/.storybook/main.js

@@ -1,14 +1,19 @@
+const { registerTsPaths, createPathAliasesConfig } = require('@fluentui/scripts-storybook');
 const rootMain = require('../../../../.storybook/main');
 
+const { tsConfigAllPath } = createPathAliasesConfig();
+
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
   stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
-    const localConfig = { ...rootMain.webpackFinal(config, options) };
+    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) });
 
     // add your own webpack tweaks if needed
 
+    registerTsPaths({ config: localConfig, configFile: tsConfigAllPath });
+
     return localConfig;
   },
 });