Setup @storybook/experimental-addon-test just for authorized sandboxes

storybookjs · Oct 24, 2024 · f7c632d · f7c632d
1 parent f742f57
commit f7c632d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -47,7 +47,9 @@ export const steps = {
     description: 'Adding addon',
     icon: '+',
     hasArgument: true,
-    options: createOptions({}),
+    options: createOptions({
+      yes: { type: 'boolean' },
+    }),
   },
   link: {
     command: 'link',