Merge pull request #33129 from storybookjs/checklistData-improvements

ghengeveld · web-flow · commit fe334bfc4ba8 · 2025-11-24T23:11:08.000+01:00
Checklist: Data improvements
diff --git a/code/addons/vitest/src/manager.tsx b/code/addons/vitest/src/manager.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Addon_TypesEnum } from 'storybook/internal/types';
+import { Addon_TypesEnum, SupportedBuilder } from 'storybook/internal/types';
 
 import {
   a11yStatusStore,
@@ -23,8 +23,7 @@ import {
 import { useTestProvider } from './use-test-provider-state';
 
 addons.register(ADDON_ID, (api) => {
-  const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || '';
-  if (storybookBuilder.includes('vite')) {
+  if (globalThis.STORYBOOK_BUILDER === SupportedBuilder.VITE) {
     const openPanel = (panelId: string) => {
       api.setSelectedPanel(panelId);
       api.togglePanel(true);
diff --git a/code/addons/vitest/src/typings.d.ts b/code/addons/vitest/src/typings.d.ts
@@ -1,5 +1,5 @@
 declare const BROWSER_CONFIG: object;
-declare var STORYBOOK_BUILDER: string | undefined;
+declare var STORYBOOK_BUILDER: import('storybook/internal/types').SupportedBuilder | undefined;
 
 interface ImportMetaEnv {
   __STORYBOOK_URL__?: string;
diff --git a/code/core/src/builder-manager/utils/framework.test.ts b/code/core/src/builder-manager/utils/framework.test.ts
diff --git a/code/core/src/builder-manager/utils/framework.ts b/code/core/src/builder-manager/utils/framework.ts
@@ -1,59 +1,27 @@
-import { sep } from 'node:path';
-
-import { extractRenderer, getFrameworkName } from 'storybook/internal/common';
-import type { Options } from 'storybook/internal/types';
-
-interface PropertyObject {
-  name: string;
-  options?: Record<string, any>;
-}
-
-type Property = string | PropertyObject | undefined;
-
-export const pluckNameFromConfigProperty = (property: Property) => {
-  if (!property) {
-    return undefined;
-  }
-
-  return typeof property === 'string' ? property : property.name;
-};
-
-// For replacing Windows backslashes with forward slashes
-const normalizePath = (packagePath: string) => packagePath.replaceAll(sep, '/');
-
-export const pluckStorybookPackageFromPath = (packagePath: string) =>
-  normalizePath(packagePath).match(/(@storybook\/.*)$/)?.[1];
-
-export const pluckThirdPartyPackageFromPath = (packagePath: string) =>
-  normalizePath(packagePath).split('node_modules/')[1] ?? packagePath;
+import {
+  extractFrameworkPackageName,
+  frameworkPackages,
+  frameworkToRenderer,
+  getFrameworkName,
+} from 'storybook/internal/common';
+import { type Options, SupportedBuilder } from 'storybook/internal/types';
 
 export const buildFrameworkGlobalsFromOptions = async (options: Options) => {
-  const globals: Record<string, any> = {};
+  const globals: Record<string, string | undefined> = {};
 
-  const { builder } = await options.presets.apply('core');
+  const builderConfig = (await options.presets.apply('core')).builder;
+  const builderName = typeof builderConfig === 'string' ? builderConfig : builderConfig?.name;
+  const builder = Object.values(SupportedBuilder).find((builder) => builderName?.includes(builder));
 
   const frameworkName = await getFrameworkName(options);
-  const rendererName = await extractRenderer(frameworkName);
-
-  if (rendererName) {
-    globals.STORYBOOK_RENDERER = rendererName ?? undefined;
-  }
-
-  const resolvedPreviewBuilder = pluckNameFromConfigProperty(builder);
-  if (resolvedPreviewBuilder) {
-    globals.STORYBOOK_BUILDER =
-      pluckStorybookPackageFromPath(resolvedPreviewBuilder) ??
-      pluckThirdPartyPackageFromPath(resolvedPreviewBuilder);
-  }
-
-  const framework = pluckNameFromConfigProperty(await options.presets.apply('framework'));
-  if (framework) {
-    globals.STORYBOOK_FRAMEWORK = framework;
-  }
-
-  if (options.networkAddress) {
-    globals.STORYBOOK_NETWORK_ADDRESS = options.networkAddress;
-  }
+  const frameworkPackageName = extractFrameworkPackageName(frameworkName);
+  const framework = frameworkPackages[frameworkPackageName];
+  const renderer = frameworkToRenderer[framework];
+
+  globals.STORYBOOK_BUILDER = builder;
+  globals.STORYBOOK_FRAMEWORK = framework;
+  globals.STORYBOOK_RENDERER = renderer;
+  globals.STORYBOOK_NETWORK_ADDRESS = options.networkAddress;
 
   return globals;
 };
diff --git a/code/core/src/cli/AddonVitestService.constants.ts b/code/core/src/cli/AddonVitestService.constants.ts
@@ -0,0 +1,13 @@
+import { SupportedFramework } from '../types';
+
+export const SUPPORTED_FRAMEWORKS: readonly SupportedFramework[] = [
+  SupportedFramework.HTML_VITE,
+  SupportedFramework.NEXTJS_VITE,
+  SupportedFramework.PREACT_VITE,
+  SupportedFramework.REACT_NATIVE_WEB_VITE,
+  SupportedFramework.REACT_VITE,
+  SupportedFramework.SVELTE_VITE,
+  SupportedFramework.SVELTEKIT,
+  SupportedFramework.VUE3_VITE,
+  SupportedFramework.WEB_COMPONENTS_VITE,
+];
diff --git a/code/core/src/cli/AddonVitestService.ts b/code/core/src/cli/AddonVitestService.ts
@@ -12,7 +12,8 @@ import * as find from 'empathic/find';
 import { coerce, minVersion, satisfies, validRange } from 'semver';
 import { dedent } from 'ts-dedent';
 
-import { SupportedBuilder, SupportedFramework } from '../types';
+import { SupportedBuilder, type SupportedFramework } from '../types';
+import { SUPPORTED_FRAMEWORKS } from './AddonVitestService.constants';
 
 type Result = {
   compatible: boolean;
@@ -38,17 +39,6 @@ export interface AddonVitestCompatibilityOptions {
 export class AddonVitestService {
   constructor(private readonly packageManager: JsPackageManager) {}
 
-  readonly supportedFrameworks: SupportedFramework[] = [
-    SupportedFramework.HTML_VITE,
-    SupportedFramework.NEXTJS_VITE,
-    SupportedFramework.PREACT_VITE,
-    SupportedFramework.REACT_NATIVE_WEB_VITE,
-    SupportedFramework.REACT_VITE,
-    SupportedFramework.SVELTE_VITE,
-    SupportedFramework.SVELTEKIT,
-    SupportedFramework.VUE3_VITE,
-    SupportedFramework.WEB_COMPONENTS_VITE,
-  ];
   /**
    * Collect all dependencies needed for @storybook/addon-vitest
    *
@@ -196,7 +186,7 @@ export class AddonVitestService {
     }
 
     // Check renderer/framework support
-    const isFrameworkSupported = this.supportedFrameworks.some(
+    const isFrameworkSupported = SUPPORTED_FRAMEWORKS.some(
       (framework) => options.framework === framework
     );
 
diff --git a/code/core/src/manager-api/typings.d.ts b/code/core/src/manager-api/typings.d.ts
@@ -7,6 +7,6 @@ declare var REFS: any;
 declare var VERSIONCHECK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 declare var STORYBOOK_ADDON_STATE: Record<string, any>;
-declare var STORYBOOK_RENDERER: string | undefined;
-declare var STORYBOOK_BUILDER: string | undefined;
-declare var STORYBOOK_FRAMEWORK: string | undefined;
+declare var STORYBOOK_FRAMEWORK: import('storybook/internal/types').SupportedFramework | undefined;
+declare var STORYBOOK_RENDERER: import('storybook/internal/types').SupportedRenderer | undefined;
+declare var STORYBOOK_BUILDER: import('storybook/internal/types').SupportedBuilder | undefined;
diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
@@ -38,6 +38,7 @@ const meta = preview.meta({
         ...initialState.items,
         controls: { status: 'accepted' },
         renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
         moreComponents: { status: 'skipped' },
         moreStories: { status: 'skipped' },
       },
@@ -57,6 +58,7 @@ const play: PlayFunction = async ({ step }) => {
         ...initialState.items,
         controls: { status: 'accepted' },
         renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
         viewports: { status: 'done' },
         moreComponents: { status: 'skipped' },
         moreStories: { status: 'skipped' },
@@ -73,10 +75,11 @@ const play: PlayFunction = async ({ step }) => {
         ...initialState.items,
         controls: { status: 'accepted' },
         renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
         viewports: { status: 'done' },
         moreComponents: { status: 'skipped' },
         moreStories: { status: 'skipped' },
-        installVitest: { status: 'skipped' },
+        writeInteractions: { status: 'skipped' },
       },
     });
   });
diff --git a/code/core/src/shared/checklist-store/checklistData.tsx b/code/core/src/shared/checklist-store/checklistData.tsx
@@ -9,10 +9,10 @@ import {
   STORY_INDEX_INVALIDATED,
   UPDATE_GLOBALS,
 } from 'storybook/internal/core-events';
-import type {
-  API_IndexHash,
-  API_PreparedIndexEntry,
-  API_StoryEntry,
+import {
+  type API_IndexHash,
+  type API_PreparedIndexEntry,
+  type API_StoryEntry,
 } from 'storybook/internal/types';
 
 import { type API, addons, internal_universalTestProviderStore } from 'storybook/manager-api';
@@ -27,6 +27,7 @@ import {
   ADDON_ID as ADDON_TEST_ID,
   STORYBOOK_ADDON_TEST_CHANNEL,
 } from '../../../../addons/vitest/src/constants';
+import { SUPPORTED_FRAMEWORKS } from '../../cli/AddonVitestService.constants';
 import { ADDON_ID as ADDON_DOCS_ID } from '../../docs-tools/shared';
 import { TourGuide } from '../../manager/components/TourGuide/TourGuide';
 import type { initialState } from './checklistData.state';
@@ -119,12 +120,21 @@ export interface ChecklistData {
   }[];
 }
 
+const isExample = (id: string) =>
+  id.startsWith('example-') || id.startsWith('configure-your-project--');
+
 const subscribeToIndex: (
   condition: (entries: Record<string, API_PreparedIndexEntry>) => boolean
 ) => ChecklistData['sections'][number]['items'][number]['subscribe'] =
   (condition) =>
   ({ api, done }) => {
-    const check = () => condition(api.getIndex()?.entries || {});
+    const check = () =>
+      condition(
+        Object.entries(api.getIndex()?.entries || {}).reduce(
+          (acc, [id, entry]) => (isExample(entry.id) ? acc : Object.assign(acc, { [id]: entry })),
+          {} as Record<string, API_PreparedIndexEntry>
+        )
+      );
     if (check()) {
       done();
     } else {
@@ -187,7 +197,10 @@ export const checklistData = {
           label: 'Render a component',
           criteria: 'A story finished rendering successfully',
           subscribe: ({ api, done }) =>
-            api.on(STORY_FINISHED, ({ status }) => status === 'success' && done()),
+            api.on(
+              STORY_FINISHED,
+              ({ storyId, status }) => status === 'success' && !isExample(storyId) && done()
+            ),
           content: ({ api }) => (
             <>
               <p>
@@ -301,8 +314,7 @@ export const Primary: Story = {
           criteria: 'At least 5 components exist in the index',
           subscribe: subscribeToIndex((entries) => {
             const stories = Object.values(entries).filter(
-              (entry): entry is API_StoryEntry =>
-                entry.type === 'story' && !entry.id.startsWith('example-')
+              (entry): entry is API_StoryEntry => entry.type === 'story'
             );
             const components = new Set(stories.map(({ title }) => title));
             return components.size >= 5;
@@ -342,8 +354,7 @@ export const Primary: Story = {
           criteria: 'At least 20 stories exist in the index',
           subscribe: subscribeToIndex((entries) => {
             const stories = Object.values(entries).filter(
-              (entry): entry is API_StoryEntry =>
-                entry.type === 'story' && !entry.id.startsWith('example-')
+              (entry): entry is API_StoryEntry => entry.type === 'story'
             );
             return stories.length >= 20;
           }),
@@ -522,7 +533,9 @@ export default {
           id: 'installVitest',
           label: 'Install Vitest addon',
           afterCompletion: 'unavailable',
-          available: () => true, // TODO check for compatibility with the project
+          available: () =>
+            !!globalThis.STORYBOOK_FRAMEWORK &&
+            SUPPORTED_FRAMEWORKS.includes(globalThis.STORYBOOK_FRAMEWORK),
           criteria: '@storybook/addon-vitest registered in .storybook/main.js|ts',
           subscribe: ({ done }) => {
             if (addons.experimental_getRegisteredAddons().includes(ADDON_TEST_ID)) {
@@ -665,9 +678,7 @@ export default {
           criteria: 'At least one story with a play or test function',
           subscribe: subscribeToIndex((entries) =>
             Object.values(entries).some(
-              ({ id, tags }) =>
-                !id.startsWith('example-') &&
-                (tags?.includes('play-fn') || tags?.includes('test-fn'))
+              (entry) => entry.tags?.includes('play-fn') || entry.tags?.includes('test-fn')
             )
           ),
           content: ({ api }) => (
@@ -1079,9 +1090,7 @@ export const Disabled: Story = {
           label: 'Automatically document your components',
           criteria: 'At least one component with the autodocs tag applied',
           subscribe: subscribeToIndex((entries) =>
-            Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith('example-') && tags?.includes('autodocs')
-            )
+            Object.values(entries).some((entry) => entry.tags?.includes('autodocs'))
           ),
           content: ({ api }) => (
             <>
@@ -1091,12 +1100,14 @@ export const Disabled: Story = {
                 and a description.
               </p>
               <CodeSnippet language="typescript">
-                {`// Button.stories.ts
+                {`// Button.stories.js
 
-export default {
+const meta = {
   component: Button,
   tags: ['autodocs'], // 👈 Add this tag
-}`}
+}
+  
+export default meta;`}
               </CodeSnippet>
               <p>
                 That tag can also be applied in <code>.storybook/preview.ts</code>, to generate
@@ -1138,9 +1149,7 @@ export default {
           label: 'Custom content with MDX',
           criteria: 'At least one MDX page',
           subscribe: subscribeToIndex((entries) =>
-            Object.values(entries).some(
-              ({ id, type }) => type === 'docs' && !id.startsWith('example-')
-            )
+            Object.values(entries).some((entry) => entry.type === 'docs')
           ),
           content: ({ api }) => (
             <>
diff --git a/code/core/src/typings.d.ts b/code/core/src/typings.d.ts
@@ -7,10 +7,12 @@ declare var REFS: any;
 declare var VERSIONCHECK: any;
 
 declare var STORYBOOK_ADDON_STATE: Record<string, any>;
-declare var STORYBOOK_BUILDER: string | undefined;
-declare var STORYBOOK_FRAMEWORK: string | undefined;
+declare var STORYBOOK_BUILDER: import('./types/modules/builders').SupportedBuilder | undefined;
+declare var STORYBOOK_FRAMEWORK:
+  | import('./types/modules/frameworks').SupportedFramework
+  | undefined;
+declare var STORYBOOK_RENDERER: import('./types/modules/renderers').SupportedRenderer | undefined;
 declare var STORYBOOK_HOOKS_CONTEXT: any;
-declare var STORYBOOK_RENDERER: string | undefined;
 declare var STORYBOOK_CURRENT_TASK_LOG: undefined | null | Array<any>;
 
 declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__: any;
