CLI: Improve support of mono repositories

code/builders/builder-webpack5/package.json

@@ -55,7 +55,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.0",
+    "@babel/core": "^7.22.9",
     "@storybook/addons": "7.1.0",
     "@storybook/api": "7.1.0",
     "@storybook/channel-postmessage": "7.1.0",

code/frameworks/nextjs/package.json

@@ -64,12 +64,12 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-bigint": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@babel/plugin-transform-runtime": "^7.22.0",
-    "@babel/preset-env": "^7.22.0",
-    "@babel/preset-react": "^7.22.0",
-    "@babel/preset-typescript": "^7.21.0",
-    "@babel/runtime": "^7.22.0",
+    "@babel/plugin-syntax-import-assertions": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@babel/runtime": "^7.22.6",
     "@storybook/addon-actions": "7.1.0",
     "@storybook/builder-webpack5": "7.1.0",
     "@storybook/core-common": "7.1.0",
@@ -97,8 +97,8 @@
     "tsconfig-paths-webpack-plugin": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.0",
-    "@babel/types": "^7.22.0",
+    "@babel/core": "^7.22.9",
+    "@babel/types": "^7.22.5",
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",

code/frameworks/web-components-webpack5/package.json

@@ -50,7 +50,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-env": "^7.22.9",
     "@storybook/builder-webpack5": "7.1.0",
     "@storybook/core-common": "7.1.0",
     "@storybook/preset-web-components-webpack": "7.1.0",

code/lib/cli/package.json

@@ -54,8 +54,9 @@
     "test": "jest test/**/*.test.js"
   },
   "dependencies": {
-    "@babel/core": "^7.22.0",
-    "@babel/preset-env": "^7.22.0",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/types": "^7.22.5",
     "@ndelangen/get-tarball": "^3.0.7",
     "@storybook/codemod": "7.1.0",
     "@storybook/core-common": "7.1.0",

code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js

@@ -0,0 +1,21 @@
+import path from 'path';
+
+const wrapForPnp = (packageName) =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    wrapForPnp('@storybook/addon-links'),
+    wrapForPnp('@storybook/addon-essentials'),
+    wrapForPnp('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: wrapForPnp('@storybook/angular'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js

@@ -0,0 +1,16 @@
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

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-utils.ts

@@ -0,0 +1,181 @@
+/* eslint-disable no-param-reassign */
+import * as t from '@babel/types';
+import type { ConfigFile } from '@storybook/csf-tools';
+
+const defaultRequireWrapperName = 'getAbsolutePath';
+
+/**
+ * Checks if the following node declarations exists in the main config file.
+ * @example
+ * const <name> = () => {};
+ * function <name>() {}
+ */
+function doesVariableOrFunctionDeclarationExist(node: t.Node, name: string) {
+  return (
+    (t.isVariableDeclaration(node) &&
+      node.declarations.length === 1 &&
+      t.isVariableDeclarator(node.declarations[0]) &&
+      t.isIdentifier(node.declarations[0].id) &&
+      node.declarations[0].id?.name === name) ||
+    (t.isFunctionDeclaration(node) && t.isIdentifier(node.id) && node.id.name === name)
+  );
+}
+
+/**
+ * Wrap a value with require wrapper.
+ * @example
+ * // Before
+ * { framework: 'react' }
+ *
+ * // After
+ * { framework: wrapForPnp('react') }
+ */
+function getReferenceToRequireWrapper(config: ConfigFile, value: string) {
+  return t.callExpression(
+    t.identifier(getRequireWrapperName(config) ?? defaultRequireWrapperName),
+    [t.stringLiteral(value)]
+  );
+}
+
+/**
+ * Returns the name of the require wrapper function if it exists in the main config file.
+ * @returns Name of the require wrapper function.
+ */
+export function getRequireWrapperName(config: ConfigFile) {
+  const declarationName = config.getBodyDeclarations().flatMap((node) =>
+    // eslint-disable-next-line no-nested-ternary
+    doesVariableOrFunctionDeclarationExist(node, 'wrapForPnp')
+      ? ['wrapForPnp']
+      : doesVariableOrFunctionDeclarationExist(node, defaultRequireWrapperName)
+      ? [defaultRequireWrapperName]
+      : []
+  );
+
+  if (declarationName.length) {
+    return declarationName[0];
+  }
+
+  return null;
+}
+
+/**
+ * Check if the node needs to be wrapped with require wrapper.
+ */
+export function isRequireWrapperNecessary(
+  node: t.Node,
+  cb: (node: t.StringLiteral | t.ObjectProperty | t.ArrayExpression) => void = () => {}
+) {
+  if (t.isStringLiteral(node)) {
+    // value will be converted from StringLiteral to CallExpression.
+    cb(node);
+    return true;
+  }
+
+  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)) {
+      cb(nameProperty);
+      return true;
+    }
+  }
+
+  if (
+    t.isArrayExpression(node) &&
+    node.elements.some((element) => isRequireWrapperNecessary(element))
+  ) {
+    cb(node);
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Get all fields that need to be wrapped with require wrapper.
+ * @returns Array of fields that need to be wrapped with require wrapper.
+ */
+export function getFieldsForRequireWrapper(config: ConfigFile) {
+  const frameworkNode = config.getFieldNode(['framework']);
+  const builderNode = config.getFieldNode(['core', 'builder']);
+  const rendererNode = config.getFieldNode(['core', 'renderer']);
+  const addons = config.getFieldNode(['addons']);
+
+  const fieldsWithRequireWrapper = [
+    ...(frameworkNode ? [frameworkNode] : []),
+    ...(builderNode ? [builderNode] : []),
+    ...(rendererNode ? [rendererNode] : []),
+    ...(addons && t.isArrayExpression(addons) ? [addons] : []),
+  ];
+
+  return fieldsWithRequireWrapper;
+}
+
+/**
+ * Returns AST for the following function
+ * @example
+ * function getAbsolutePath(value) {
+ *  return dirname(require.resolve(join(value, 'package.json')))
+ * }
+ */
+export function getRequireWrapperAsCallExpression(
+  isConfigTypescript: boolean
+): t.FunctionDeclaration {
+  const functionDeclaration = {
+    ...t.functionDeclaration(
+      t.identifier(defaultRequireWrapperName),
+      [
+        {
+          ...t.identifier('value'),
+          ...(isConfigTypescript
+            ? { typeAnnotation: t.tsTypeAnnotation(t.tSStringKeyword()) }
+            : {}),
+        },
+      ],
+      t.blockStatement([
+        t.returnStatement(
+          t.callExpression(t.identifier('dirname'), [
+            t.callExpression(t.memberExpression(t.identifier('require'), t.identifier('resolve')), [
+              t.callExpression(t.identifier('join'), [
+                t.identifier('value'),
+                t.stringLiteral('package.json'),
+              ]),
+            ]),
+          ])
+        ),
+      ])
+    ),
+    ...(isConfigTypescript ? { returnType: t.tSTypeAnnotation(t.tsAnyKeyword()) } : {}),
+  };
+
+  t.addComment(
+    functionDeclaration,
+    'leading',
+    '*\n * This function is used to resolve the absolute path of a package.\n * It is needed in projects that use Yarn PnP or are set up within a monorepo.\n'
+  );
+
+  return functionDeclaration;
+}
+
+export function wrapValueWithRequireWrapper(config: ConfigFile, node: t.Node) {
+  isRequireWrapperNecessary(node, (n) => {
+    if (t.isStringLiteral(n)) {
+      n.value = getReferenceToRequireWrapper(config, n.value) as any;
+    }
+
+    if (t.isObjectProperty(n) && t.isStringLiteral(n.value)) {
+      n.value = getReferenceToRequireWrapper(config, n.value.value) as any;
+    }
+
+    if (t.isArrayExpression(n)) {
+      n.elements.forEach((element, index, elements) => {
+        if (t.isStringLiteral(element)) {
+          elements[index] = getReferenceToRequireWrapper(config, element.value);
+        }
+      });
+    }
+  });
+}

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

@@ -0,0 +1,75 @@
+import { wrapRequire } from './wrap-require';
+import * as detect from '../../detect';
+
+jest.mock('../../detect', () => ({
+  ...jest.requireActual('../../detect'),
+  detectPnp: jest.fn(),
+}));
+
+describe('wrapRequire', () => {
+  describe('check', () => {
+    it('should return null if not in a monorepo and pnp is not enabled', async () => {
+      (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(false);
+
+      const check = wrapRequire.check({
+        packageManager: {
+          isStorybookInMonorepo: () => false,
+        },
+        storybookVersion: '7.0.0',
+        mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
+      } as any);
+
+      await expect(check).resolves.toBeNull();
+    });
+
+    it('should return the configuration object if in a pnp environment', async () => {
+      (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(true);
+
+      const check = wrapRequire.check({
+        packageManager: {
+          isStorybookInMonorepo: () => false,
+        },
+        storybookVersion: '7.0.0',
+        mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
+      } as any);
+
+      await expect(check).resolves.toEqual({
+        isPnp: true,
+        isStorybookInMonorepo: false,
+        storybookVersion: '7.0.0',
+      });
+    });
+
+    it('should return the configuration object if in a monorepo environment', async () => {
+      (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(false);
+
+      const check = wrapRequire.check({
+        packageManager: {
+          isStorybookInMonorepo: () => true,
+        },
+        storybookVersion: '7.0.0',
+        mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
+      } as any);
+
+      await expect(check).resolves.toEqual({
+        isPnp: false,
+        isStorybookInMonorepo: true,
+        storybookVersion: '7.0.0',
+      });
+    });
+
+    it('should return null, if all fields have the require wrapper', async () => {
+      (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(true);
+
+      const check = wrapRequire.check({
+        packageManager: {
+          isStorybookInMonorepo: () => true,
+        },
+        storybookVersion: '7.0.0',
+        mainConfigPath: require.resolve('./__test__/main-config-with-wrappers.js'),
+      } as any);
+
+      await expect(check).resolves.toBeNull();
+    });
+  });
+});