CLI: Improve support of mono repositories

code/lib/cli/package.json

@@ -56,6 +56,7 @@
   "dependencies": {
     "@babel/core": "^7.22.0",
     "@babel/preset-env": "^7.22.0",
+    "@babel/types": "^7.22.5",
     "@ndelangen/get-tarball": "^3.0.7",
     "@storybook/codemod": "7.1.0-rc.2",
     "@storybook/core-common": "7.1.0-rc.2",

code/lib/cli/src/automigrate/fixes/index.ts

@@ -18,6 +18,7 @@ import { missingBabelRc } from './missing-babelrc';
 import { angularBuilders } from './angular-builders';
 import { incompatibleAddons } from './incompatible-addons';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
+import { wrapRequire } from './wrap-require';
 
 export * from '../types';
 
@@ -40,6 +41,7 @@ export const allFixes: Fix[] = [
   missingBabelRc,
   angularBuildersMultiproject,
   angularBuilders,
+  wrapRequire,
 ];
 
 export const initFixes: Fix[] = [missingBabelRc, eslintPlugin];

code/lib/cli/src/automigrate/fixes/wrap-require.ts

@@ -0,0 +1,85 @@
+/* eslint-disable no-param-reassign */
+import chalk from 'chalk';
+import { dedent } from 'ts-dedent';
+import * as t from '@babel/types';
+import type { Fix } from '../types';
+import { detectPnp } from '../../detect';
+import { updateMainConfig } from '../helpers/mainConfigFile';
+
+interface WrapRequireRunOptions {
+  storybookVersion: string;
+}
+
+export const wrapRequire: Fix<WrapRequireRunOptions> = {
+  id: 'wrap-require',
+
+  async check({ packageManager, storybookVersion }) {
+    const isStorybookInMonorepo = await packageManager.isStorybookInMonorepo();
+    const isPnp = await detectPnp();
+
+    if (!isStorybookInMonorepo && !isPnp) {
+      return null;
+    }
+
+    return { storybookVersion };
+  },
+
+  prompt({ storybookVersion }) {
+    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+
+    return dedent`We've have detected, that you're using ${sbFormatted} in a monorepo or with PnP enabled. 
+    We will apply some tweaks in your main config file to make it work in this special environment.`;
+  },
+
+  async run({ dryRun, mainConfigPath }) {
+    updateMainConfig({ dryRun, mainConfigPath }, (mainConfig) => {
+      const frameworkNode = mainConfig.getFieldNode(['framework']);
+      const builderNode = mainConfig.getFieldNode(['core', 'builder']);
+      const addons = mainConfig.getFieldNode(['addons']);
+
+      const getRequireWrapperAsCallExpression = (value: string) => {
+        // callExpression for "dirname(require.resolve(join(value, 'package.json')))""
+        return t.callExpression(t.identifier('dirname'), [
+          t.callExpression(t.memberExpression(t.identifier('require'), t.identifier('resolve')), [
+            t.callExpression(t.identifier('join'), [
+              t.stringLiteral(value),
+              t.stringLiteral('package.json'),
+            ]),
+          ]),
+        ]);
+      };
+
+      const wrapValueWithRequireWrapper = (node: t.Node) => {
+        if (t.isStringLiteral(node)) {
+          // value will be converted from StringLiteral to CallExpression.
+          node.value = getRequireWrapperAsCallExpression(node.value) as any;
+        } else if (t.isObjectExpression(node)) {
+          const nameProperty = node.properties.find(
+            (property) =>
+              t.isObjectProperty(property) &&
+              t.isIdentifier(property.key) &&
+              property.key.name === 'name'
+          ) as t.ObjectProperty;
+
+          if (nameProperty && t.isStringLiteral(nameProperty.value)) {
+            nameProperty.value = getRequireWrapperAsCallExpression(nameProperty.value.value);
+          }
+        }
+      };
+
+      if (frameworkNode) {
+        wrapValueWithRequireWrapper(frameworkNode);
+      }
+
+      if (builderNode) {
+        wrapValueWithRequireWrapper(builderNode);
+      }
+
+      if (addons && t.isArrayExpression(addons)) {
+        addons.elements.forEach(wrapValueWithRequireWrapper);
+      }
+
+      mainConfig.setImport(['dirname, join'], 'path');
+    });
+  },
+};

code/lib/cli/src/automigrate/helpers/mainConfigFile.ts

@@ -133,7 +133,7 @@ export type GetStorybookData = typeof getStorybookData;
  */
 export const updateMainConfig = async (
   { mainConfigPath, dryRun }: { mainConfigPath: string; dryRun: boolean },
-  callback: (main: ConfigFile) => Promise<void>
+  callback: (main: ConfigFile) => Promise<void> | void
 ) => {
   try {
     const main = await readConfig(mainConfigPath);

code/lib/cli/src/generators/baseGenerator.ts

@@ -106,7 +106,8 @@ const getFrameworkDetails = (
   renderer: SupportedRenderers,
   builder: Builder,
   pnp: boolean,
-  framework?: SupportedFrameworks
+  framework?: SupportedFrameworks,
+  isStorybookInMonorepository?: boolean
 ): {
   type: 'framework' | 'renderer';
   packages: string[];
@@ -115,15 +116,18 @@ const getFrameworkDetails = (
   renderer?: string;
   rendererId: SupportedRenderers;
 } => {
+  const applyRequireWrapper = pnp || isStorybookInMonorepository;
   const frameworkPackage = getFrameworkPackage(framework, renderer, builder);
 
-  const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage;
+  const frameworkPackagePath = applyRequireWrapper
+    ? wrapForPnp(frameworkPackage)
+    : frameworkPackage;
 
   const rendererPackage = getRendererPackage(framework, renderer);
-  const rendererPackagePath = pnp ? wrapForPnp(rendererPackage) : rendererPackage;
+  const rendererPackagePath = applyRequireWrapper ? wrapForPnp(rendererPackage) : rendererPackage;
 
   const builderPackage = getBuilderDetails(builder);
-  const builderPackagePath = pnp ? wrapForPnp(builderPackage) : builderPackage;
+  const builderPackagePath = applyRequireWrapper ? wrapForPnp(builderPackage) : builderPackage;
 
   const isExternalFramework = !!getExternalFramework(frameworkPackage);
   const isKnownFramework =
@@ -187,6 +191,8 @@ export async function baseGenerator(
   };
   process.on('SIGINT', setNodeProcessExiting);
 
+  const isStorybookInMonorepository = packageManager.isStorybookInMonorepo();
+
   const stopIfExiting = async <T>(callback: () => Promise<T>) => {
     if (isNodeProcessExiting) {
       throw new HandledError('Canceled by the user');
@@ -226,7 +232,7 @@ export async function baseGenerator(
     rendererId,
     framework: frameworkInclude,
     builder: builderInclude,
-  } = getFrameworkDetails(renderer, builder, pnp, framework);
+  } = getFrameworkDetails(renderer, builder, pnp, framework, isStorybookInMonorepository);
 
   // added to main.js
   const addons = [
@@ -365,7 +371,7 @@ export async function baseGenerator(
       framework: { name: frameworkInclude, options: options.framework || {} },
       storybookConfigFolder,
       docs: { autodocs: 'tag' },
-      addons: pnp ? addons.map(wrapForPnp) : addons,
+      addons: pnp || isStorybookInMonorepository ? addons.map(wrapForPnp) : addons,
       extensions,
       language,
       ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null),

code/lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -3,10 +3,10 @@ import { gt, satisfies } from 'semver';
 import type { CommonOptions } from 'execa';
 import { command as execaCommand, sync as execaCommandSync } from 'execa';
 import path from 'path';
-import fs from 'fs';
+import fs, { read } from 'fs';
 
 import dedent from 'ts-dedent';
-import { readFile, writeFile } from 'fs-extra';
+import { readFile, readFileSync, writeFile } from 'fs-extra';
 import { commandLog } from '../helpers';
 import type { PackageJson, PackageJsonWithDepsAndDevDeps } from './PackageJson';
 import storybookPackagesVersions from '../versions';
@@ -76,6 +76,49 @@ export abstract class JsPackageManager {
     this.cwd = options?.cwd || process.cwd();
   }
 
+  /** Detect whether Storybook gets initialized in a monorepository/workspace environment
+   * The cwd doesn't have to be the root of the monorepo, it can be a subdirectory
+   * @returns true, if Storybook is initialized inside a monorepository/workspace
+   */
+  public isStorybookInMonorepo() {
+    let cwd = process.cwd();
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      try {
+        const turboJsonPath = `${cwd}/turbo.json`;
+        if (fs.existsSync(turboJsonPath)) {
+          return true;
+        }
+
+        const packageJsonPath = require.resolve(`${cwd}/package.json`);
+
+        // read packagejson with readFileSync
+        const packageJsonFile = readFileSync(packageJsonPath, 'utf8');
+        const packageJson = JSON.parse(packageJsonFile) as PackageJsonWithDepsAndDevDeps;
+
+        if (packageJson.workspaces) {
+          return true;
+        }
+      } catch (err) {
+        // Package.json not found or invalid in current directory
+      }
+
+      // Move up to the parent directory
+      const parentDir = path.dirname(cwd);
+
+      // Check if we have reached the root of the filesystem
+      if (parentDir === cwd) {
+        break;
+      }
+
+      // Update cwd to the parent directory
+      cwd = parentDir;
+    }
+
+    return false;
+  }
+
   /**
    * Install dependencies listed in `package.json`
    */

code/lib/csf-tools/src/ConfigFile.test.ts

@@ -2,6 +2,7 @@
 
 import { dedent } from 'ts-dedent';
 import { formatConfig, loadConfig } from './ConfigFile';
+import { babelPrint } from './babelParse';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
@@ -1049,4 +1050,73 @@ describe('ConfigFile', () => {
       expect(config.getNamesFromPath(['addons'])).toBeUndefined();
     });
   });
+
+  describe('setImport', () => {
+    it(`supports setting a default import for a field that does not exist`, () => {
+      const source = dedent`
+        const config: StorybookConfig = { };
+        export default config;
+      `;
+      const config = loadConfig(source).parse();
+      config.setImport('path', 'path');
+      // eslint-disable-next-line no-underscore-dangle
+      const parsed = babelPrint(config._ast);
+      expect(parsed).toMatchInlineSnapshot(`
+        import path from 'path';
+        const config: StorybookConfig = { };
+        export default config;
+      `);
+    });
+
+    it(`supports setting a default import for a field that does exist`, () => {
+      const source = dedent`
+        const config: StorybookConfig = { };
+        export default config;
+      `;
+      const config = loadConfig(source).parse();
+      config.setImport('path', 'path');
+      // eslint-disable-next-line no-underscore-dangle
+      const parsed = babelPrint(config._ast);
+      expect(parsed).toMatchInlineSnapshot(`
+        import path from 'path';
+        const config: StorybookConfig = { };
+        export default config;
+      `);
+    });
+
+    it(`supports setting a named import for a field that does not exist`, () => {
+      const source = dedent`
+        const config: StorybookConfig = { };
+        export default config;
+      `;
+      const config = loadConfig(source).parse();
+      config.setImport(['dirname'], 'path');
+      // eslint-disable-next-line no-underscore-dangle
+      const parsed = babelPrint(config._ast);
+      expect(parsed).toMatchInlineSnapshot(`
+        import { dirname } from 'path';
+        const config: StorybookConfig = { };
+        export default config;
+      `);
+    });
+
+    it(`supports setting a named import for a filed where the source already exists`, () => {
+      const source = dedent`
+        import { dirname } from 'path';
+
+        const config: StorybookConfig = { };
+        export default config;
+      `;
+      const config = loadConfig(source).parse();
+      config.setImport(['dirname'], 'path');
+      // eslint-disable-next-line no-underscore-dangle
+      const parsed = babelPrint(config._ast);
+      expect(parsed).toMatchInlineSnapshot(`
+        import { dirname } from 'path';
+
+        const config: StorybookConfig = { };
+        export default config;
+      `);
+    });
+  });
 });