chore: re-enable react-storybook-addon and babel-make-styles for reac…

…t-components (#21247)

* fix(react-storybook-addon): make devloop and package usage within storybook work

* chore(react-components): make sb start work with babel-make-styles and react-sb-addon

* Change files

change/@fluentui-react-components-9d99eb03-ece2-4410-be0a-ef3e876c43b3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(react-components): make sb start work with babel-make-styles and react-sb-addon",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/.storybook/main.js

@@ -9,11 +9,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     '../src/**/*.stories.@(ts|tsx)',
     ...utils.getVnextStories(),
   ],
-  addons: [
-    ...rootMain.addons,
-    // Should be re-enabled, see https://github.com/microsoft/fluentui/issues/20896
-    // '@fluentui/react-storybook-addon'
-  ],
+  addons: [...rootMain.addons, '@fluentui/react-storybook-addon'],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 

packages/react-components/package.json

@@ -22,9 +22,12 @@
     "start": "yarn storybook",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
     "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-components/src && yarn docs",
-    "storybook": "start-storybook --port 3000 -s ./public",
+    "prestorybook": "yarn prepare-storybook-local-build",
+    "storybook": "start-storybook --port 3000 -s ./public --no-manager-cache",
+    "prestorybook:docs": "yarn prepare-storybook-local-build",
     "storybook:docs": "start-storybook --port 3000 -s ./public --docs --no-manager-cache",
     "build-storybook": "build-storybook -s ./public -o ./dist/storybook --docs",
+    "prepare-storybook-local-build": "lage build --to @fluentui/babel-make-styles @fluentui/react-storybook-addon",
     "test": "jest",
     "type-check": "tsc -b tsconfig.json"
   },

packages/react-storybook-addon/README.md

@@ -65,6 +65,6 @@ module.exports = {
 
 1. Run inner loop from monorepo root `yarn workspace @fluentui/react-storybook-addon storybook`
 
-   - > 💡 this will run `build` script that compiles addon implementation so it can be consumed by local storybook
+   - > 💡 this will run `prestorybook` script that compiles addon implementation with all of its direct dependencies that live within monorepo, so it can be consumed by local storybook
 
 2. Every time you do any change to implementation, after you ran your local storybook you'll need to manually run `yarn workspace @fluentui/react-storybook-addon build` to reflect those changes

packages/react-storybook-addon/package.json

@@ -22,6 +22,7 @@
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
     "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-storybook-addon/src && yarn docs",
+    "prestorybook": "lage build --to @fluentui/react-storybook-addon",
     "storybook": "start-storybook",
     "type-check": "tsc -b tsconfig.json"
   },

packages/react-storybook-addon/preset.js

@@ -1,17 +1,9 @@
 function config(entry = []) {
-  // This entrypoint is deliberately set to ts for monorepo DX
-  // However this is bad for publishing
-  // https://github.com/microsoft/fluentui/issues/20474
-  // https://github.com/microsoft/fluentui/issues/18357
-  return [...entry, require.resolve('./src/preset/preview.ts')];
+  return [...entry, require.resolve('./lib/preset/preview')];
 }
 
 function managerEntries(entry = []) {
-  // This entrypoint is deliberately set to ts for monorepo DX
-  // However this is bad for publishing
-  // https://github.com/microsoft/fluentui/issues/20474
-  // https://github.com/microsoft/fluentui/issues/18357
-  return [...entry, require.resolve('./src/preset/manager.ts')];
+  return [...entry, require.resolve('./lib/preset/manager')];
 }
 
 module.exports = { managerEntries, config };