feat: automatically add v9 package stories to public docsite and corr…

…ectly create codesandbox demo source code (microsoft#28528) * feat(scripts-storybook): simplify codesanbox rule mapping logic * feat(scripts-storybook): dont import packageName stories provided to getPackageStoriesGlob argument to make the function more generic
chpalac · Jul 18, 2023 · f8e1458 · f8e1458
1 parent beef721
commit f8e1458
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 30 deletions.
diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js
@@ -12,11 +12,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     '../src/**/*.stories.mdx',
     '../src/**/*.stories.@(ts|tsx)',
     ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
-    '../../../packages/react-components/react-migration-v0-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-migration-v8-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-datepicker-compat/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-breadcrumb-preview/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-search-preview/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
+    ...getPackageStoriesGlob({ packageName: '@fluentui/public-docsite-v9', callerPath: __dirname }),
   ],
   staticDirs: ['../public'],
   addons: [...rootMain.addons],

diff --git a/scripts/storybook/src/rules.spec.ts b/scripts/storybook/src/rules.spec.ts
@@ -6,13 +6,25 @@ import { codesandboxRule } from './rules';
 describe(`rules`, () => {
   describe(`codesandbox`, () => {
     it(`should generate rule definition with overridden babel loader`, () => {
-      const unstablePackage = Object.values(getAllPackageInfo()).find(metadata => {
+      const allPackagesInfo = getAllPackageInfo();
+      const allPackagesInfoProjects = Object.values(allPackagesInfo);
+      const suitePackage = allPackagesInfo['@fluentui/react-components'];
+      const suitePackageDependencies = suitePackage.packageJson.dependencies ?? {};
+      const unstablePackage = allPackagesInfoProjects.find(metadata => {
         return (
-          metadata.packagePath.includes('packages/') &&
-          metadata.packageJson.version.startsWith('9') &&
+          suitePackageDependencies[metadata.packageJson.name] &&
           semver.prerelease(metadata.packageJson.version) !== null
         );
       });
+      const stableSuitePackages = allPackagesInfoProjects.reduce((acc, metadata) => {
+        if (
+          suitePackageDependencies[metadata.packageJson.name] &&
+          semver.prerelease(metadata.packageJson.version) === null
+        ) {
+          acc[metadata.packageJson.name] = { replace: '@fluentui/react-components' };
+        }
+        return acc;
+      }, {} as Record<string, { replace: string }>);
 
       const options = (codesandboxRule.use as { options: Record<string, unknown> }).options;
 
@@ -23,8 +35,7 @@ describe(`rules`, () => {
             [
               expect.any(Function),
               expect.objectContaining({
-                '@fluentui/react-migration-v8-v9': { replace: '@fluentui/react-migration-v8-v9' },
-                '@fluentui/react-utilities': { replace: '@fluentui/react-components' },
+                ...stableSuitePackages,
                 ...(unstablePackage
                   ? { [unstablePackage.packageJson.name]: { replace: '@fluentui/react-components/unstable' } }
                   : null),

diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js
@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 
 const { fullSourcePlugin: babelPlugin } = require('@fluentui/babel-preset-storybook-full-source');
-const { isConvergedPackage, getAllPackageInfo } = require('@fluentui/scripts-monorepo');
+const { getAllPackageInfo } = require('@fluentui/scripts-monorepo');
 const { stripIndents, offsetFromRoot, workspaceRoot, readProjectConfiguration } = require('@nrwl/devkit');
 const { FsTree } = require('nx/src/generators/tree');
 const semver = require('semver');
@@ -162,27 +162,13 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) {
       '@fluentui/react-conformance-griffel',
     ];
 
-    // TODO: https://github.com/microsoft/fluentui/issues/26691
-    const packagesOutsideReactComponentsSuite = [
-      '@fluentui/react-data-grid-react-window',
-      '@fluentui/react-datepicker-compat',
-      '@fluentui/react-migration-v8-v9',
-      '@fluentui/react-migration-v0-v9',
-      '@fluentui/react-breadcrumb-preview',
-      '@fluentui/react-search-preview',
-    ];
-
     const importMappings = Object.values(allPackageInfo).reduce((acc, cur) => {
       if (excludePackages.includes(cur.packageJson.name)) {
         return acc;
       }
 
-      if (packagesOutsideReactComponentsSuite.includes(cur.packageJson.name)) {
-        acc[cur.packageJson.name] = { replace: cur.packageJson.name };
-        return acc;
-      }
-
-      if (isConvergedPackage({ packagePathOrJson: cur.packageJson, projectType: 'library' })) {
+      if (isPackagePartOfReactComponentsSuite(cur.packageJson.name)) {
+        // TODO: once all pre-release packages (deprecated approach) will be released as stable this logic will be removed
         const isPrerelease = semver.prerelease(cur.packageJson.version) !== null;
 
         acc[cur.packageJson.name] = isPrerelease
@@ -197,6 +183,22 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) {
 
     return importMappings;
   }
+
+  /**
+   *
+   * @param {string} projectName
+   */
+  function isPackagePartOfReactComponentsSuite(projectName) {
+    const suiteProject = allPackageInfo['@fluentui/react-components'];
+
+    // this is needed because react-northstar is a lerna sub-project thus `getAllPackageInfo` returns only projects within `packages/fluentui/` folder
+    if (suiteProject) {
+      const suiteDependencies = suiteProject.packageJson.dependencies ?? {};
+      return Boolean(suiteDependencies[projectName]);
+    }
+
+    return false;
+  }
 }
 
 /**
@@ -216,9 +218,8 @@ function getPackageStoriesGlob(options) {
   );
 
   packageJson.dependencies = packageJson.dependencies ?? {};
-  const dependencies = Object.assign(packageJson.dependencies, {
-    [options.packageName]: '*',
-  });
+
+  const dependencies = { ...packageJson.dependencies };
   const rootOffset = offsetFromRoot(options.callerPath.replace(workspaceRoot, ''));
 
   return Object.keys(dependencies)