From 846d1fdb1b3d53ee32247a003533eb58071d79ff Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 29 Oct 2024 17:41:06 +0100 Subject: [PATCH 1/3] Improve postinstall script for addon test --- code/addons/test/src/postinstall.ts | 100 +++++++++++++++------------- 1 file changed, 55 insertions(+), 45 deletions(-) diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index e179b42fa1d2..9420d9ba3a38 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -53,43 +53,6 @@ export default async function postInstall(options: PostinstallOptions) { // if Vitest is installed, we use the same version to keep consistency across Vitest packages const vitestVersionToInstall = vitestVersionSpecifier ?? 'latest'; - const addonInteractionsName = '@storybook/addon-interactions'; - const interactionsAddon = info.addons.find((addon: string | { name: string }) => { - // account for addons as objects, as well as addons with PnP paths - const addonName = typeof addon === 'string' ? addon : addon.name; - return addonName.includes(addonInteractionsName); - }); - - if (!!interactionsAddon) { - let shouldUninstall = options.yes; - if (!options.yes) { - logger.plain(dedent` - We have detected that you're using ${addonInteractionsName}. - The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically. - - More info: ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/test-addon')} - `); - - const response = await prompts({ - type: 'confirm', - name: 'shouldUninstall', - message: `Would you like me to remove and unregister ${addonInteractionsName}?`, - initial: true, - }); - - shouldUninstall = response.shouldUninstall; - } - - if (shouldUninstall) { - await execa( - packageManager.getRemoteRunCommand(), - ['storybook', 'remove', addonInteractionsName, '--package-manager', options.packageManager], - { - shell: true, - } - ); - } - } const annotationsImport = [ '@storybook/nextjs', '@storybook/experimental-nextjs-vite', @@ -122,9 +85,9 @@ export default async function postInstall(options: PostinstallOptions) { `); } - if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.0.0')) { - reasons.push(` - • The addon requires Vitest 2.0.0 or later. You are currently using ${vitestVersionSpecifier}. + if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.1.0')) { + reasons.push(dedent` + • The addon requires Vitest 2.1.0 or later. You are currently using ${picocolors.bold(vitestVersionSpecifier)}. Please update your ${picocolors.bold(colors.pink('vitest'))} dependency and try again. `); } @@ -145,7 +108,7 @@ export default async function postInstall(options: PostinstallOptions) { ); reasons.push( dedent` - To roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array + You can fix these issues and rerun the command to reinstall. If you wish to roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array in your main Storybook config file and remove the dependency from your package.json file. ` ); @@ -180,6 +143,49 @@ export default async function postInstall(options: PostinstallOptions) { return; } + const addonInteractionsName = '@storybook/addon-interactions'; + const interactionsAddon = info.addons.find((addon: string | { name: string }) => { + // account for addons as objects, as well as addons with PnP paths + const addonName = typeof addon === 'string' ? addon : addon.name; + return addonName.includes(addonInteractionsName); + }); + + if (!!interactionsAddon) { + let shouldUninstall = options.yes; + if (!options.yes) { + printInfo( + '⚠️ Attention', + dedent` + We have detected that you're using ${addonInteractionsName}. + The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically. + + More info: ${picocolors.cyan('https://storybook.js.org/docs/writing-tests/test-addon')} + ` + ); + + const response = await prompts({ + type: 'confirm', + name: 'shouldUninstall', + message: `Would you like me to remove and unregister ${addonInteractionsName}? Press N to abort the entire installation.`, + initial: true, + }); + + shouldUninstall = response.shouldUninstall; + } + + if (shouldUninstall) { + await execa( + packageManager.getRemoteRunCommand(), + ['storybook', 'remove', addonInteractionsName, '--package-manager', options.packageManager], + { + shell: true, + } + ); + } else { + return; + } + } + const vitestInfo = getVitestPluginInfo(info.frameworkPackageName); if (info.frameworkPackageName === '@storybook/nextjs') { @@ -317,6 +323,8 @@ export default async function postInstall(options: PostinstallOptions) { // If there's an existing config, we create a workspace file so we can run Storybook tests alongside. const extname = path.extname(rootConfig); const browserWorkspaceFile = path.resolve(dirname(rootConfig), `vitest.workspace${extname}`); + // to be set in vitest config + const vitestSetupFilePath = path.relative(path.dirname(browserWorkspaceFile), vitestSetupFile); logger.line(1); logger.plain(`${step} Creating a Vitest project workspace file:`); @@ -335,7 +343,7 @@ export default async function postInstall(options: PostinstallOptions) { extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}', plugins: [ // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest - storybookTest(),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} + storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} ], test: { name: 'storybook', @@ -347,7 +355,7 @@ export default async function postInstall(options: PostinstallOptions) { }, // Make sure to adjust this pattern to match your stories files. include: ['**/*.stories.?(m)[jt]s?(x)'], - setupFiles: ['./.storybook/vitest.setup.ts'], + setupFiles: ['${vitestSetupFilePath}'], }, }, ]); @@ -356,6 +364,8 @@ export default async function postInstall(options: PostinstallOptions) { } else { // If there's no existing Vitest/Vite config, we create a new Vitest config file. const newVitestConfigFile = path.resolve('vitest.config.ts'); + // to be set in vitest config + const vitestSetupFilePath = path.relative(path.dirname(newVitestConfigFile), vitestSetupFile); logger.line(1); logger.plain(`${step} Creating a Vitest project config file:`); @@ -371,7 +381,7 @@ export default async function postInstall(options: PostinstallOptions) { export default defineConfig({ plugins: [ // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest - storybookTest(),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} + storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} ], test: { name: 'storybook', @@ -383,7 +393,7 @@ export default async function postInstall(options: PostinstallOptions) { }, // Make sure to adjust this pattern to match your stories files. include: ['**/*.stories.?(m)[jt]s?(x)'], - setupFiles: ['./.storybook/vitest.setup.ts'], + setupFiles: ['${vitestSetupFilePath}'], }, }); ` From b82bc68362bd475899c27fae67527d7cb2dbf367 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 29 Oct 2024 18:19:57 +0100 Subject: [PATCH 2/3] pass configDir down to storybook remove command --- code/addons/test/src/postinstall.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 9420d9ba3a38..78aaf0986df8 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -176,7 +176,15 @@ export default async function postInstall(options: PostinstallOptions) { if (shouldUninstall) { await execa( packageManager.getRemoteRunCommand(), - ['storybook', 'remove', addonInteractionsName, '--package-manager', options.packageManager], + [ + 'storybook', + 'remove', + addonInteractionsName, + '--package-manager', + options.packageManager, + '--config-dir', + options.configDir, + ], { shell: true, } From 9aac063cca0a828a3b3cba3249dcd02e7e2cf7be Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 30 Oct 2024 10:54:32 +0100 Subject: [PATCH 3/3] fix types --- code/addons/test/src/manager.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 37be0f132bce..82671fa0f386 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -80,7 +80,8 @@ const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: nu }; addons.register(ADDON_ID, (api) => { - if (globalThis.STORYBOOK_BUILDER?.includes('vite')) { + const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || ''; + if (storybookBuilder.includes('vite')) { const openAddonPanel = () => { api.setSelectedPanel(PANEL_ID); api.togglePanel(true);