diff --git a/scripts/task.ts b/scripts/task.ts index 9a28f8e79546..69c949254b32 100644 --- a/scripts/task.ts +++ b/scripts/task.ts @@ -38,7 +38,7 @@ import { createOptions, getCommand, getOptionsOrPrompt } from './utils/options'; const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY; -export const extraAddons = ['a11y', 'storysource']; +export const extraAddons = ['@storybook/addon-a11y', '@storybook/addon-storysource']; export type Path = string; export type TemplateDetails = { diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index c090cc69e5bf..d785be75aa53 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -24,7 +24,6 @@ import { detectLanguage } from '../../code/core/src/cli/detect'; import { SupportedLanguage } from '../../code/core/src/cli/project_types'; import { JsPackageManagerFactory, - removeAddon, versions as storybookPackages, } from '../../code/core/src/common'; import type { ConfigFile } from '../../code/core/src/csf-tools'; @@ -181,8 +180,7 @@ export const init: Task['run'] = async ( if (!skipTemplateStories) { for (const addon of addons) { - const addonName = `@storybook/addon-${addon}`; - await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug }); + await executeCLIStep(steps.add, { argument: addon, cwd, dryRun, debug, optionValues: { yes: true } }); } } }; @@ -395,13 +393,6 @@ const getVitestPluginInfo = (details: TemplateDetails) => { export async function setupVitest(details: TemplateDetails, options: PassedOptionValues) { const { sandboxDir, template } = details; - // Remove interactions addon to avoid issues with Vitest - // TODO: add an if statement when we introduce a sandbox that tests interactions - await removeAddon('@storybook/addon-interactions', { - cwd: details.sandboxDir, - configDir: join(details.sandboxDir, '.storybook'), - }); - const packageJsonPath = join(sandboxDir, 'package.json'); const packageJson = await readJson(packageJsonPath); @@ -804,7 +795,7 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d } const addons = mainConfig.getFieldValue(['addons']); - mainConfig.setFieldValue(['addons'], [...addons, '@storybook/experimental-addon-test']); + mainConfig.setFieldValue(['addons'], [...addons]); if (template.expected.builder === '@storybook/builder-vite') { setSandboxViteFinal(mainConfig); diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index 9264c31fa132..66887f205537 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -50,6 +50,39 @@ export const sandbox: Task = { setupVitest, } = await import('./sandbox-parts'); + const extraDeps = [ + ...(details.template.modifications?.extraDependencies ?? []), + // The storybook package forwards some CLI commands to @storybook/cli with npx. + // Adding the dep makes sure that even npx will use the linked workspace version. + '@storybook/cli', + ]; + + const shouldAddVitestIntegration = !details.template.skipTasks?.includes('vitest-integration') + + if (shouldAddVitestIntegration) { + extraDeps.push( + 'happy-dom', + 'vitest', + 'playwright', + '@vitest/browser', + ); + + if (details.template.expected.framework.includes('nextjs')) { + extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom'); + } + + // if (details.template.expected.renderer === '@storybook/svelte') { + // extraDeps.push(`@testing-library/svelte`); + // } + // + // if (details.template.expected.framework === '@storybook/angular') { + // extraDeps.push('@testing-library/angular', '@analogjs/vitest-angular'); + // } + + options.addon = [...options.addon, '@storybook/experimental-addon-test']; + } + + let startTime = now(); await create(details, options); const createTime = now() - startTime; @@ -83,28 +116,7 @@ export const sandbox: Task = { await addStories(details, options); } - const extraDeps = [ - ...(details.template.modifications?.extraDependencies ?? []), - // The storybook package forwards some CLI commands to @storybook/cli with npx. - // Adding the dep makes sure that even npx will use the linked workspace version. - '@storybook/cli', - '@storybook/experimental-addon-test', - ]; - if (!details.template.skipTasks?.includes('vitest-integration')) { - extraDeps.push('happy-dom', 'vitest', 'playwright', '@vitest/browser'); - - if (details.template.expected.framework.includes('nextjs')) { - extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom'); - } - - // if (details.template.expected.renderer === '@storybook/svelte') { - // extraDeps.push(`@testing-library/svelte`); - // } - // - // if (details.template.expected.framework === '@storybook/angular') { - // extraDeps.push('@testing-library/angular', '@analogjs/vitest-angular'); - // } - + if(shouldAddVitestIntegration) { await setupVitest(details, options); } diff --git a/scripts/utils/cli-step.ts b/scripts/utils/cli-step.ts index b428160490f7..ce57896aeddf 100644 --- a/scripts/utils/cli-step.ts +++ b/scripts/utils/cli-step.ts @@ -47,7 +47,9 @@ export const steps = { description: 'Adding addon', icon: '+', hasArgument: true, - options: createOptions({}), + options: createOptions({ + yes: { type: 'boolean' }, + }), }, link: { command: 'link',