diff --git a/packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts b/packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts index 2f6986f20dd10..dbd7aede818fd 100644 --- 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 index d5fa986bb9aac..36826cf8087ff 100644 --- 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 index 1dae3ca522d49..42b8118a5df1d 100644 --- 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}`; } ), ``,