Release: Prerelease 10.0.0-beta.12

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 10.0.0-beta.12
+
+- CLI: Avoid mixed CSF in files with unconventional stories - [#32716](https://github.com/storybookjs/storybook/pull/32716), thanks @yannbf!
+- CLI: Fix CSF factories addon syncing in storybook add command - [#32728](https://github.com/storybookjs/storybook/pull/32728), thanks @yannbf!
+- CLI: Make relative imports default in csf-factories codemod - [#32610](https://github.com/storybookjs/storybook/pull/32610), thanks @copilot-swe-agent!
+- Core: Prevent navigating to hidden (filtered) item - [#32715](https://github.com/storybookjs/storybook/pull/32715), thanks @ghengeveld!
+- Fix: Allow proceeding without selecting automigrations in upgrade command - [#32597](https://github.com/storybookjs/storybook/pull/32597), thanks @copilot-swe-agent!
+
 ## 10.0.0-beta.11
 
 - Automigration: Improve the viewport/backgrounds automigration - [#32619](https://github.com/storybookjs/storybook/pull/32619), thanks @valentinpalkovic!

code/core/src/common/utils/load-main-config.ts

@@ -14,16 +14,18 @@ import { validateConfigurationFiles } from './validate-configuration-files';
 export async function loadMainConfig({
   configDir = '.storybook',
   cwd,
+  skipCache,
 }: {
   configDir: string;
   cwd?: string;
+  skipCache?: boolean;
 }): Promise<StorybookConfig> {
   await validateConfigurationFiles(configDir, cwd);
 
   const mainPath = getInterpretedFile(resolve(configDir, 'main')) as string;
 
   try {
-    const out = await importModule(mainPath);
+    const out = await importModule(mainPath, { skipCache });
     return out;
   } catch (e) {
     if (!(e instanceof Error)) {

code/core/src/manager-api/modules/stories.ts

@@ -368,15 +368,15 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       return parameters || undefined;
     },
     jumpToComponent: (direction) => {
-      const { index, storyId, refs, refId } = store.getState();
+      const { filteredIndex, storyId, refs, refId } = store.getState();
       const story = api.getData(storyId, refId);
 
       // cannot navigate when there's no current selection
       if (!story) {
         return;
       }
 
-      const hash = refId ? refs[refId].index || {} : index;
+      const hash = refId ? refs[refId].filteredIndex || {} : filteredIndex;
 
       if (!hash) {
         return;
@@ -389,15 +389,15 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       }
     },
     jumpToStory: (direction) => {
-      const { index, storyId, refs, refId } = store.getState();
+      const { filteredIndex, storyId, refs, refId } = store.getState();
       const story = api.getData(storyId, refId);
 
       // cannot navigate when there's no current selection
       if (!story) {
         return;
       }
 
-      const hash = story.refId ? refs[story.refId].index : index;
+      const hash = story.refId ? refs[story.refId].filteredIndex : filteredIndex;
 
       if (!hash) {
         return;
@@ -425,49 +425,50 @@ export const init: ModuleFn<SubAPI, SubState> = ({
     },
     selectStory: (titleOrId = undefined, name = undefined, options = {}) => {
       const { ref } = options;
-      const { storyId, index, refs } = store.getState();
+      const { storyId, index, filteredIndex, refs, settings } = store.getState();
 
-      const hash = ref ? refs[ref].index : index;
+      const gotoStory = (entry?: API_HashEntry) => {
+        if (entry?.type === 'docs' || entry?.type === 'story') {
+          store.setState({ settings: { ...settings, lastTrackedStoryId: entry.id } });
+          navigate(`/${entry.type}/${entry.refId ? `${entry.refId}_${entry.id}` : entry.id}`);
+          return true;
+        }
+        return false;
+      };
 
       const kindSlug = storyId?.split('--', 2)[0];
-
-      if (!hash) {
+      const hash = ref ? refs[ref].index : index;
+      const filteredHash = ref ? refs[ref].filteredIndex : filteredIndex;
+      if (!hash || !filteredHash) {
         return;
       }
 
       if (!name) {
-        // Find the entry (group, component or story) that is referred to
+        // Find the entry (group, component, story or docs) that is referred to
         const entry = titleOrId ? hash[titleOrId] || hash[sanitize(titleOrId)] : hash[kindSlug];
 
         if (!entry) {
           throw new Error(`Unknown id or title: '${titleOrId}'`);
         }
 
-        store.setState({
-          settings: { ...store.getState().settings, lastTrackedStoryId: entry.id },
-        });
-
-        // We want to navigate to the first ancestor entry that is a leaf
-        const leafEntry = api.findLeafEntry(hash, entry.id);
-        const fullId = leafEntry.refId ? `${leafEntry.refId}_${leafEntry.id}` : leafEntry.id;
-        navigate(`/${leafEntry.type}/${fullId}`);
+        if (!gotoStory(entry)) {
+          // If the entry is not a story or docs, find the first descendant entry that is
+          gotoStory(api.findLeafEntry(filteredHash, entry.id));
+        }
       } else if (!titleOrId) {
+        // Navigate to a named story/docs within the current component (i.e. "kind")
         // This is a slugified version of the kind, but that's OK, our toId function is idempotent
-        const id = toId(kindSlug, name);
-
-        api.selectStory(id, undefined, options);
+        gotoStory(hash[toId(kindSlug, name)]);
       } else {
         const id = ref ? `${ref}_${toId(titleOrId, name)}` : toId(titleOrId, name);
         if (hash[id]) {
-          api.selectStory(id, undefined, options);
+          gotoStory(hash[id]);
         } else {
           // Support legacy API with component permalinks, where kind is `x/y` but permalink is 'z'
           const entry = hash[sanitize(titleOrId)];
           if (entry?.type === 'component') {
-            const foundId = entry.children.find((childId: any) => hash[childId].name === name);
-            if (foundId) {
-              api.selectStory(foundId, undefined, options);
-            }
+            const foundId = entry.children.find((childId) => hash[childId].name === name);
+            gotoStory(foundId ? hash[foundId] : undefined);
           }
         }
       }
@@ -478,7 +479,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
         return entry;
       }
 
-      const childStoryId = entry.children[0];
+      const childStoryId = entry.children.find((childId) => index[childId]) || entry.children[0];
       return api.findLeafEntry(index, childStoryId);
     },
     findLeafStoryId(index, storyId) {

code/core/src/manager-api/tests/stories.test.ts

@@ -1106,6 +1106,45 @@ describe('stories API', () => {
       api.selectStory('a--1');
       expect(store.getState().settings.lastTrackedStoryId).toBe('a--1');
     });
+    it('selects first visible child when component is clicked with filtered index', () => {
+      const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };
+      const moduleArgs = createMockModuleArgs({ initialState });
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { navigate, store } = moduleArgs;
+
+      // Set index with stories
+      api.setIndex({ v: 5, entries: navigationEntries });
+
+      // Set up filtered index where first child (a--1) is hidden
+      const filteredIndex = {
+        a: {
+          id: 'a',
+          type: 'component' as const,
+          name: 'a',
+          depth: 0,
+          tags: [],
+          children: ['a--1', 'a--2'],
+          importPath: './a.ts',
+        },
+        'a--2': {
+          ...navigationEntries['a--2'],
+          type: 'story' as const,
+          subtype: 'story' as const,
+          parent: 'a',
+          depth: 1,
+          tags: [],
+          prepared: false,
+          exportName: '2',
+        },
+        // Note: 'a--1' is missing from filtered index (hidden)
+      };
+
+      store.setState({ filteredIndex });
+
+      // When selecting the component, it should select the first visible child (a--2)
+      api.selectStory('a');
+      expect(navigate).toHaveBeenCalledWith('/story/a--2');
+    });
     describe('deprecated api', () => {
       it('allows navigating to a combination of title + name', () => {
         const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };

code/core/src/manager/components/sidebar/TagsFilterPanel.tsx

@@ -213,7 +213,7 @@ export const TagsFilterPanel = ({
         title: 'Learn how to add tags',
         icon: <DocumentIcon />,
         right: <ShareAltIcon />,
-        href: api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' }),
+        href: api.getDocsUrl({ subpath: 'writing-stories/tags#custom-tags' }),
       },
     ]);
   }

code/core/src/node-logger/prompts/prompt-provider-clack.ts

@@ -53,7 +53,10 @@ export class ClackPromptProvider extends PromptProvider {
     options: MultiSelectPromptOptions<T>,
     promptOptions?: PromptOptions
   ): Promise<T[]> {
-    const result = await clack.multiselect<T>(options);
+    const result = await clack.multiselect<T>({
+      ...options,
+      required: options.required,
+    });
     this.handleCancel(result, promptOptions);
     logTracker.addLog('prompt', options.message, { choice: result });
     return result as T[];

code/core/src/shared/utils/module.ts

@@ -51,7 +51,10 @@ let isTypescriptLoaderRegistered = false;
  * // Returns the default export or the entire module
  * ```
  */
-export async function importModule(path: string) {
+export async function importModule(
+  path: string,
+  { skipCache = false }: { skipCache?: boolean } = {}
+) {
   if (!isTypescriptLoaderRegistered) {
     const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
     register(typescriptLoaderUrl, import.meta.url);
@@ -61,12 +64,17 @@ export async function importModule(path: string) {
   let mod;
   try {
     const resolvedPath = win32.isAbsolute(path) ? pathToFileURL(path).href : path;
-    mod = await import(resolvedPath);
+    // When applicable, add a hash to the import URL to bypass cache
+    const importUrl = skipCache ? `${resolvedPath}?${Date.now()}` : resolvedPath;
+    mod = await import(importUrl);
   } catch (importError) {
     try {
       // fallback to require to support older behavior
       // this is relevant for presets that are only available with the "require" condition in a package's export map
       const require = createRequire(import.meta.url);
+      if (skipCache) {
+        delete require.cache[require.resolve(path)];
+      }
       mod = require(path);
     } catch (requireError) {
       /*

code/lib/cli-storybook/src/add.ts

@@ -1,8 +1,6 @@
-import { isAbsolute, join } from 'node:path';
-
 import {
   type PackageManagerName,
-  serverRequire,
+  loadMainConfig,
   syncStorybookAddons,
   versions,
 } from 'storybook/internal/common';
@@ -182,7 +180,8 @@ export async function add(
 
   // TODO: remove try/catch once CSF factories is shipped, for now gracefully handle any error
   try {
-    await syncStorybookAddons(mainConfig, previewConfigPath!, configDir);
+    const newMainConfig = await loadMainConfig({ configDir, skipCache: true });
+    await syncStorybookAddons(newMainConfig, previewConfigPath!, configDir);
   } catch (e) {
     //
   }