Merge pull request #28579 from storybookjs/yann/missing-storybook-dep…

…s-automigration

CLI: Add "missing-storybook-dependencies" automigration

code/core/src/common/js-package-manager/JsPackageManager.ts

@@ -500,6 +500,10 @@ export abstract class JsPackageManager {
     stdio?: 'inherit' | 'pipe'
   ): string;
   public abstract findInstallations(pattern?: string[]): Promise<InstallationMetadata | undefined>;
+  public abstract findInstallations(
+    pattern?: string[],
+    options?: { depth: number }
+  ): Promise<InstallationMetadata | undefined>;
   public abstract parseErrorFromLogs(logs?: string): string;
 
   public executeCommandSync({

code/core/src/common/js-package-manager/NPMProxy.ts

@@ -132,28 +132,28 @@ export class NPMProxy extends JsPackageManager {
     });
   }
 
-  public async findInstallations(pattern: string[]) {
-    const exec = async ({ depth }: { depth: number }) => {
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
+    const exec = async ({ packageDepth }: { packageDepth: number }) => {
       const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null';
       return this.executeCommand({
         command: 'npm',
-        args: ['ls', '--json', `--depth=${depth}`, pipeToNull],
+        args: ['ls', '--json', `--depth=${packageDepth}`, pipeToNull],
         env: {
           FORCE_COLOR: 'false',
         },
       });
     };
 
     try {
-      const commandResult = await exec({ depth: 99 });
+      const commandResult = await exec({ packageDepth: depth });
       const parsedOutput = JSON.parse(commandResult);
 
       return this.mapDependencies(parsedOutput, pattern);
     } catch (e) {
       // when --depth is higher than 0, npm can return a non-zero exit code
       // in case the user's project has peer dependency issues. So we try again with no depth
       try {
-        const commandResult = await exec({ depth: 0 });
+        const commandResult = await exec({ packageDepth: 0 });
         const parsedOutput = JSON.parse(commandResult);
 
         return this.mapDependencies(parsedOutput, pattern);

code/core/src/common/js-package-manager/PNPMProxy.ts

@@ -98,16 +98,16 @@ export class PNPMProxy extends JsPackageManager {
     });
   }
 
-  public async findInstallations(pattern: string[]) {
-    const commandResult = await this.executeCommand({
-      command: 'pnpm',
-      args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', '--depth=99'],
-      env: {
-        FORCE_COLOR: 'false',
-      },
-    });
-
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
     try {
+      const commandResult = await this.executeCommand({
+        command: 'pnpm',
+        args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', `--depth=${depth}`],
+        env: {
+          FORCE_COLOR: 'false',
+        },
+      });
+
       const parsedOutput = JSON.parse(commandResult);
       return this.mapDependencies(parsedOutput, pattern);
     } catch (e) {

code/core/src/common/js-package-manager/Yarn1Proxy.ts

@@ -83,16 +83,22 @@ export class Yarn1Proxy extends JsPackageManager {
     return JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as Record<string, any>;
   }
 
-  public async findInstallations(pattern: string[]) {
-    const commandResult = await this.executeCommand({
-      command: 'yarn',
-      args: ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--recursive', '--json'],
-      env: {
-        FORCE_COLOR: 'false',
-      },
-    });
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
+    const yarnArgs = ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--json'];
+
+    if (depth !== 0) {
+      yarnArgs.push('--recursive');
+    }
 
     try {
+      const commandResult = await this.executeCommand({
+        command: 'yarn',
+        args: yarnArgs.concat(pattern),
+        env: {
+          FORCE_COLOR: 'false',
+        },
+      });
+
       const parsedOutput = JSON.parse(commandResult);
       return this.mapDependencies(parsedOutput, pattern);
     } catch (e) {

code/core/src/common/js-package-manager/Yarn2Proxy.ts

@@ -120,16 +120,22 @@ export class Yarn2Proxy extends JsPackageManager {
     return this.executeCommand({ command: 'yarn', args: [command, ...args], cwd });
   }
 
-  public async findInstallations(pattern: string[]) {
-    const commandResult = await this.executeCommand({
-      command: 'yarn',
-      args: ['info', '--name-only', '--recursive', ...pattern],
-      env: {
-        FORCE_COLOR: 'false',
-      },
-    });
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
+    const yarnArgs = ['info', '--name-only'];
+
+    if (depth !== 0) {
+      yarnArgs.push('--recursive');
+    }
 
     try {
+      const commandResult = await this.executeCommand({
+        command: 'yarn',
+        args: yarnArgs.concat(pattern),
+        env: {
+          FORCE_COLOR: 'false',
+        },
+      });
+
       return this.mapDependencies(commandResult, pattern);
     } catch (e) {
       return undefined;

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

@@ -30,10 +30,12 @@ import { vta } from './vta';
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
 import { autodocsTags } from './autodocs-tags';
 import { initialGlobals } from './initial-globals';
+import { missingStorybookDependencies } from './missing-storybook-dependencies';
 
 export * from '../types';
 
 export const allFixes: Fix[] = [
+  missingStorybookDependencies,
   addonsAPI,
   newFrameworks,
   cra5,

code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, vi, it, beforeEach } from 'vitest';
+import type { JsPackageManager } from '@storybook/core/common';
+import stripAnsi from 'strip-ansi';
+
+import { missingStorybookDependencies } from './missing-storybook-dependencies';
+
+vi.mock('globby', () => ({
+  __esModule: true,
+  globby: vi.fn().mockResolvedValue(['.storybook/manager.ts', 'path/to/file.stories.tsx']),
+}));
+
+vi.mock('node:fs/promises', () => ({
+  __esModule: true,
+  readFile: vi.fn().mockResolvedValue(`
+    // these are NOT installed, will be reported
+    import { someFunction } from '@storybook/preview-api';
+    import { anotherFunction } from '@storybook/manager-api';
+    import { SomeError } from '@storybook/core-events/server-errors';
+    // this IS installed, will not be reported
+    import { yetAnotherFunction } from '@storybook/theming';
+  `),
+}));
+
+vi.mock('../../helpers', () => ({
+  getStorybookVersionSpecifier: vi.fn().mockReturnValue('^8.1.10'),
+}));
+
+const check = async ({
+  packageManager,
+  storybookVersion = '8.1.10',
+}: {
+  packageManager: JsPackageManager;
+  storybookVersion?: string;
+}) => {
+  return missingStorybookDependencies.check({
+    packageManager,
+    mainConfig: {} as any,
+    storybookVersion,
+  });
+};
+
+describe('missingStorybookDependencies', () => {
+  const mockPackageManager = {
+    findInstallations: vi.fn().mockResolvedValue({
+      dependencies: {
+        '@storybook/react': '8.1.0',
+        '@storybook/theming': '8.1.0',
+      },
+    }),
+    retrievePackageJson: vi.fn().mockResolvedValue({
+      dependencies: {
+        '@storybook/core': '8.1.0',
+      },
+    }),
+    addDependencies: vi.fn().mockResolvedValue(undefined),
+  } as Partial<JsPackageManager>;
+
+  describe('check function', () => {
+    it('should identify missing dependencies', async () => {
+      const result = await check({
+        packageManager: mockPackageManager as JsPackageManager,
+      });
+
+      expect(Object.keys(result!.packageUsage)).not.includes('@storybook/theming');
+      expect(result).toEqual({
+        packageUsage: {
+          '@storybook/preview-api': ['.storybook/manager.ts', 'path/to/file.stories.tsx'],
+          '@storybook/manager-api': ['.storybook/manager.ts', 'path/to/file.stories.tsx'],
+          '@storybook/core-events': ['.storybook/manager.ts', 'path/to/file.stories.tsx'],
+        },
+      });
+    });
+  });
+
+  describe('prompt function', () => {
+    it('should provide a proper message with the missing dependencies', () => {
+      const packageUsage = {
+        '@storybook/preview-api': ['.storybook/manager.ts'],
+        '@storybook/manager-api': ['path/to/file.stories.tsx'],
+      };
+
+      const message = missingStorybookDependencies.prompt({ packageUsage });
+
+      expect(stripAnsi(message)).toMatchInlineSnapshot(`
+        "Found the following Storybook packages used in your project, but they are missing from your project dependencies:
+        - @storybook/manager-api: (1 file)
+        - @storybook/preview-api: (1 file)
+
+        Referencing missing packages can cause your project to crash. We can automatically add them to your dependencies.
+
+        More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#failed-to-resolve-import-storybookx-error"
+      `);
+    });
+  });
+
+  describe('run function', () => {
+    it('should add missing dependencies', async () => {
+      const dryRun = false;
+      const packageUsage = {
+        '@storybook/preview-api': ['.storybook/manager.ts'],
+        '@storybook/manager-api': ['path/to/file.stories.tsx'],
+      };
+
+      await missingStorybookDependencies.run!({
+        result: { packageUsage },
+        dryRun,
+        packageManager: mockPackageManager as JsPackageManager,
+        mainConfigPath: 'path/to/main-config.js',
+      });
+
+      expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith(
+        1,
+        { installAsDevDependencies: true },
+        ['@storybook/[email protected]', '@storybook/[email protected]']
+      );
+      expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith(
+        2,
+        { installAsDevDependencies: true, skipInstall: true, packageJson: expect.anything() },
+        ['@storybook/preview-api@^8.1.10', '@storybook/manager-api@^8.1.10']
+      );
+    });
+  });
+});