feat(scripts-storybook): unify workspace addon loading for dev and prod builds

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

@@ -4,7 +4,7 @@
   "private": true,
   "description": "Visual regression tests for @fluentui/react-components",
   "scripts": {
-    "build": "build-storybook -o dist/storybook",
+    "build": "build-storybook --no-manager-cache -o dist/storybook",
     "clean": "just-scripts clean",
     "format": "prettier . -w --ignore-path ../../.prettierignore",
     "lint": "just-scripts lint",

apps/vr-tests/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "Visual regression tests for Fluent UI React",
   "scripts": {
-    "build": "build-storybook -o dist/storybook",
+    "build": "build-storybook --no-manager-cache -o dist/storybook",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",

azure-pipelines.vrt-baseline.yml

@@ -26,7 +26,7 @@ jobs:
           fluentVersion: v9
           vrTestPackageName: '@fluentui/vr-tests-react-components'
           vrTestPackagePath: 'apps/vr-tests-react-components'
-          shouldBuildstorybookaddon: true
+          shouldBuildstorybookaddon: false
 
       - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentuiv9" --buildId $(Build.BuildId)
         displayName: 'Run Screenshotdiff update baseline'

azure-pipelines.vrt-pr.yml

@@ -63,7 +63,7 @@ jobs:
           fluentVersion: v9
           vrTestPackageName: '@fluentui/vr-tests-react-components'
           vrTestPackagePath: 'apps/vr-tests-react-components'
-          shouldBuildstorybookaddon: true
+          shouldBuildstorybookaddon: false
 
       - powershell: |
           $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1"
@@ -227,7 +227,7 @@ jobs:
           vrTestPackageName: '@fluentui/docs'
           vrTestPackagePath: 'packages/fluentui/docs'
           shouldBuildstorybookaddon: false
-          shouldBuildNorthstar: true
+          shouldBuildNorthstar: false
 
       - powershell: |
           $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1"

change/@fluentui-react-components-efef013e-42c3-4754-ad30-88a5fc4354e7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: remove unnecessary devDeps on workspace addon",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/fluentui/docs/package.json

@@ -67,11 +67,13 @@
   },
   "scripts": {
     "build": "gulp build:docs",
-    "build:storybook": "build-storybook -o dist/storybook",
+    "prebuild:storybook": "lage build:info --to @fluentui/react-northstar @fluentui/react-component-ref @fluentui/react-bindings",
+    "build:storybook": "build-storybook --no-manager-cache -o dist/storybook",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint:fix": "yarn lint --fix",
     "start": "gulp docs",
     "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs",
+    "prestart:storybook": "lage build:info --to @fluentui/react-northstar @fluentui/react-component-ref @fluentui/react-bindings",
     "start:storybook": "start-storybook",
     "vr:build": "yarn build:storybook",
     "vr:test": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"

packages/react-components/react-components/package.json

@@ -26,7 +26,6 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "react-hook-form": "^5.7.2",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"

scripts/storybook/src/utils.js

@@ -32,10 +32,6 @@ function loadWorkspaceAddon(addonName, options) {
   /* eslint-disable no-shadow */
   const { workspaceRoot, tsConfigPath } = { ...loadWorkspaceAddonDefaultOptions, ...options };
 
-  if (process.env.NODE_ENV === 'production') {
-    return addonName;
-  }
-
   function getPaths() {
     const workspaceJson = JSON.parse(fs.readFileSync(path.join(workspaceRoot, 'workspace.json'), 'utf-8'));
     const addonMetadata = workspaceJson.projects[addonName];

scripts/storybook/src/utils.spec.js

@@ -85,20 +85,6 @@ describe(`utils`, () => {
       };
     }
 
-    it(`should behave as identity function in prod env`, () => {
-      const originalEnv = process.env;
-      process.env = { ...originalEnv, NODE_ENV: 'production' };
-
-      const { tsConfigRoot } = setup({ packageName: 'storybook-custom-addon' });
-
-      const actual = loadWorkspaceAddon('@myorg/storybook-custom-addon', { tsConfigPath: tsConfigRoot });
-      const expected = '@myorg/storybook-custom-addon';
-
-      expect(actual).toBe(expected);
-
-      process.env = originalEnv;
-    });
-
     it(`should return path to in memory preset loader root`, () => {
       const { npmScope, workspaceRoot, tsConfigRoot } = setup({ packageName: 'storybook-custom-addon' });