fix(storybook): support pnp with storybook package

nrwl · Jul 27, 2023 · 98376f4 · 98376f4
1 parent 1363bae
commit 98376f4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts b/packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts
@@ -1,8 +1,9 @@
-import { output } from '@nx/devkit';
+import { getPackageManagerCommand, output } from '@nx/devkit';
 import { execSync } from 'child_process';
 import { Schema } from './schema';
 
 export function callUpgrade(schema: Schema): 1 | Buffer {
+  const pm = getPackageManagerCommand();
   try {
     output.log({
       title: `Calling sb upgrade`,
@@ -14,7 +15,7 @@ export function callUpgrade(schema: Schema): 1 | Buffer {
     });
 
     execSync(
-      `npx storybook@latest upgrade ${
+      `${pm.exec} storybook@latest upgrade ${
         schema.autoAcceptAllPrompts ? '--yes' : ''
       }`,
       {
@@ -36,7 +37,7 @@ export function callUpgrade(schema: Schema): 1 | Buffer {
       bodyLines: [
         `🚨 The Storybook CLI failed to upgrade your @storybook/* packages to the latest version.`,
         `Please try running the sb upgrade command manually:`,
-        `npx storybook@latest upgrade`,
+        `${pm.exec} storybook@latest upgrade`,
       ],
       color: 'red',
     });
@@ -71,7 +72,8 @@ export function callAutomigrate(
 
   Object.entries(allStorybookProjects).forEach(
     ([projectName, storybookProjectInfo]) => {
-      const commandToRun = `npx storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir} --renderer ${storybookProjectInfo.uiFramework}`;
+      const pm = getPackageManagerCommand();
+      const commandToRun = `${pm.exec} storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir} --renderer ${storybookProjectInfo.uiFramework}`;
       try {
         output.log({
           title: `Calling sb automigrate for ${projectName}`,

diff --git a/packages/storybook/src/generators/migrate-7/helper-functions.spec.ts b/packages/storybook/src/generators/migrate-7/helper-functions.spec.ts
@@ -1,5 +1,6 @@
 import {
   addProjectConfiguration,
+  getPackageManagerCommand,
   output,
   ProjectConfiguration,
   readProjectConfiguration,
@@ -73,28 +74,29 @@ describe('Helper functions for the Storybook 7 migration generator', () => {
     it('should onlyShowGuide and the correct instructions', () => {
       const outputSpy = jest.spyOn(output, 'log').mockImplementation();
       onlyShowGuide(allStorybookInfo);
+      const pm = getPackageManagerCommand();
       expect(outputSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           bodyLines: [
             'You can run the following commands manually to upgrade your Storybook projects to Storybook 7:',
             '',
             '1. Call the Storybook upgrade script:',
-            'npx storybook@latest upgrade',
+            `${pm.exec} storybook@latest upgrade`,
             '',
             '2. Call the Nx generator to prepare your files for migration:',
             'nx g @nx/storybook:migrate-7 --onlyPrepare',
             '',
             '3. Call the Storybook automigrate scripts:',
             'Run the following commands for each Storybook project:',
-            'npx storybook@latest automigrate --config-dir apps/nextapp/.storybook --renderer @storybook/react',
-            'npx storybook@latest automigrate --config-dir apps/nextapp-ts/.storybook --renderer @storybook/react',
-            'npx storybook@latest automigrate --config-dir apps/rv1/.storybook --renderer @storybook/react',
-            'npx storybook@latest automigrate --config-dir apps/rv2-ts/.storybook --renderer @storybook/react',
-            'npx storybook@latest automigrate --config-dir apps/rw1/.storybook --renderer @storybook/react',
-            'npx storybook@latest automigrate --config-dir apps/wv1/.storybook --renderer @storybook/web-components',
-            'npx storybook@latest automigrate --config-dir apps/ww1/.storybook --renderer @storybook/web-components',
-            'npx storybook@latest automigrate --config-dir apps/ngapp/.storybook --renderer @storybook/angular',
-            'npx storybook@latest automigrate --config-dir apps/ngapp-ts/.storybook --renderer @storybook/angular',
+            `${pm.exec} storybook@latest automigrate --config-dir apps/nextapp/.storybook --renderer @storybook/react`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/nextapp-ts/.storybook --renderer @storybook/react`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/rv1/.storybook --renderer @storybook/react`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/rv2-ts/.storybook --renderer @storybook/react`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/rw1/.storybook --renderer @storybook/react`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/wv1/.storybook --renderer @storybook/web-components`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/ww1/.storybook --renderer @storybook/web-components`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/ngapp/.storybook --renderer @storybook/angular`,
+            `${pm.exec} storybook@latest automigrate --config-dir apps/ngapp-ts/.storybook --renderer @storybook/angular`,
             '',
             '4. Call the Nx generator to finish the migration:',
             'nx g @nx/storybook:migrate-7 --afterMigration',

diff --git a/packages/storybook/src/generators/migrate-7/helper-functions.ts b/packages/storybook/src/generators/migrate-7/helper-functions.ts
@@ -2,6 +2,7 @@ import {
   applyChangesToString,
   ChangeType,
   generateFiles,
+  getPackageManagerCommand,
   joinPathFragments,
   output,
   readProjectConfiguration,
@@ -24,13 +25,15 @@ export function onlyShowGuide(storybookProjects: {
     viteConfigFilePath?: string;
   };
 }) {
+  const pm = getPackageManagerCommand();
+
   output.log({
     title: 'Storybook 7 Migration Guide',
     bodyLines: [
       `You can run the following commands manually to upgrade your Storybook projects to Storybook 7:`,
       ``,
       `1. Call the Storybook upgrade script:`,
-      `npx storybook@latest upgrade`,
+      `${pm.exec} storybook@latest upgrade`,
       ``,
       `2. Call the Nx generator to prepare your files for migration:`,
       `nx g @nx/storybook:migrate-7 --onlyPrepare`,
@@ -39,7 +42,7 @@ export function onlyShowGuide(storybookProjects: {
       `Run the following commands for each Storybook project:`,
       ...Object.entries(storybookProjects).map(
         ([_projectName, storybookProjectInfo]) => {
-          return `npx storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir} --renderer ${storybookProjectInfo.uiFramework}`;
+          return `${pm.exec} storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir} --renderer ${storybookProjectInfo.uiFramework}`;
         }
       ),
       ``,