Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(storybook): support pnp with storybook package #18343

Merged
merged 1 commit into from
Jul 28, 2023
Merged

fix(storybook): support pnp with storybook package #18343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`,
Expand All @@ -14,7 +15,7 @@ export function callUpgrade(schema: Schema): 1 | Buffer {
});

execSync(
`npx storybook@latest upgrade ${
`${pm.exec} storybook@latest upgrade ${
schema.autoAcceptAllPrompts ? '--yes' : ''
}`,
{
Expand All @@ -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',
});
Expand Down Expand Up @@ -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}`,
Expand Down
22 changes: 12 additions & 10 deletions packages/storybook/src/generators/migrate-7/helper-functions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
addProjectConfiguration,
getPackageManagerCommand,
output,
ProjectConfiguration,
readProjectConfiguration,
Expand Down Expand Up @@ -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',
Expand Down
7 changes: 5 additions & 2 deletions packages/storybook/src/generators/migrate-7/helper-functions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
applyChangesToString,
ChangeType,
generateFiles,
getPackageManagerCommand,
joinPathFragments,
output,
readProjectConfiguration,
Expand All @@ -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`,
Expand All @@ -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}`;
}
),
``,
Expand Down