chore: storybook new cli ux (#781)

* chore: storybook new cli ux

* Update packages/addons/storybook/index.ts

Co-authored-by: Jeppe Reinhold <jeppe@reinhold.is>

* link storybook versions

* with this syntax!

* --features docs

* prefetch storybook ONCE in the global setup. (for all-addons + storybook + others...)

* let's see if now in // t's possible in CI

* --no-features

* storybook 10.1.0

---------

Co-authored-by: jyc.dev <jycouet@gmail.com>
Co-authored-by: Jeppe Reinhold <jeppe@reinhold.is>

Author: 3 people

packages/addons/_tests/_setup/global.ts

@@ -1,11 +1,26 @@
 import { fileURLToPath } from 'node:url';
 import { setup, type ProjectVariant } from 'sv/testing';
 import type { TestProject } from 'vitest/node';
+import process from 'node:process';
+import { exec } from 'tinyexec';
+
+import { STORYBOOK_VERSION } from '../../storybook/index.ts';
 
 const TEST_DIR = fileURLToPath(new URL('../../../../.test-output/addons/', import.meta.url));
 const variants: ProjectVariant[] = ['kit-js', 'kit-ts', 'vite-js', 'vite-ts'];
+const CI = Boolean(process.env.CI);
 
 export default async function ({ provide }: TestProject) {
+	if (CI) {
+		// prefetch the storybook cli during ci to reduce fetching errors in tests
+		const { stdout } = await exec('pnpm', [
+			'dlx',
+			`create-storybook@${STORYBOOK_VERSION}`,
+			'--version'
+		]);
+		console.info('storybook version:', stdout);
+	}
+
 	// downloads different project configurations (sveltekit, js/ts, vite-only, etc)
 	const { templatesDir } = await setup({ cwd: TEST_DIR, variants });
 

packages/addons/_tests/storybook/test.ts

@@ -1,7 +1,4 @@
-import process from 'node:process';
-import { execSync } from 'node:child_process';
 import { expect } from '@playwright/test';
-import { beforeAll } from 'vitest';
 import { setupTest } from '../_setup/suite.ts';
 import storybook from '../../storybook/index.ts';
 import eslint from '../../eslint/index.ts';
@@ -13,31 +10,19 @@ const { test, testCases, prepareServer } = setupTest(
 );
 
 let port = 6006;
-const CI = Boolean(process.env.CI);
 
-beforeAll(() => {
-	if (CI) {
-		// prefetch the storybook cli during ci to reduce fetching errors in tests
-		execSync('pnpm dlx create-storybook@latest --version');
-	}
-});
-
-test.for(testCases)(
-	'storybook $variant',
-	{ concurrent: !CI },
-	async (testCase, { page, ...ctx }) => {
-		const cwd = ctx.cwd(testCase);
+test.concurrent.for(testCases)('storybook $variant', async (testCase, { page, ...ctx }) => {
+	const cwd = ctx.cwd(testCase);
 
-		const { close } = await prepareServer({
-			cwd,
-			page,
-			previewCommand: `pnpm storybook -p ${++port} --ci`,
-			buildCommand: ''
-		});
-		// kill server process when we're done
-		ctx.onTestFinished(async () => await close());
+	const { close } = await prepareServer({
+		cwd,
+		page,
+		previewCommand: `pnpm storybook -p ${++port} --ci`,
+		buildCommand: ''
+	});
+	// kill server process when we're done
+	ctx.onTestFinished(async () => await close());
 
-		expect(page.locator('main .sb-bar')).toBeTruthy();
-		expect(page.locator('#storybook-preview-wrapper')).toBeTruthy();
-	}
-);
+	expect(page.locator('main .sb-bar')).toBeTruthy();
+	expect(page.locator('#storybook-preview-wrapper')).toBeTruthy();
+});

packages/addons/package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/cli-core": "workspace:*"
 	},
 	"devDependencies": {
-		"package-manager-detector": "^0.2.11"
+		"package-manager-detector": "^0.2.11",
+		"tinyexec": "^0.3.2"
 	}
 }

packages/addons/storybook/index.ts

@@ -2,6 +2,8 @@ import process from 'node:process';
 import { defineAddon } from '@sveltejs/cli-core';
 import { getNodeTypesVersion } from '../common.ts';
 
+export const STORYBOOK_VERSION = '10.1.0';
+
 export default defineAddon({
 	id: 'storybook',
 	shortDescription: 'frontend workshop',
@@ -12,7 +14,12 @@ export default defineAddon({
 		runsAfter('eslint');
 	},
 	run: async ({ sv }) => {
-		const args = ['create-storybook@latest', '--skip-install', '--no-dev'];
+		const args = [
+			`create-storybook@${STORYBOOK_VERSION}`,
+			'--skip-install',
+			'--no-dev',
+			'--no-features'
+		];
 
 		// skips the onboarding prompt during tests
 		if (process.env.NODE_ENV?.toLowerCase() === 'test') args.push('--yes');