Release: Prerelease 10.2.0-alpha.3

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 10.1.3
+
+- Angular: Honor --loglevel and --logfile in dev/build - [#33212](https://github.com/storybookjs/storybook/pull/33212), thanks @valentinpalkovic!
+- Core: Minor UI fixes - [#33218](https://github.com/storybookjs/storybook/pull/33218), thanks @ghengeveld!
+- Telemetry: Add playwright-prompt - [#33229](https://github.com/storybookjs/storybook/pull/33229), thanks @valentinpalkovic!
+
 ## 10.1.2
 
 - Checklist: Fix how state changes are reported and drop some completion restrictions - [#33217](https://github.com/storybookjs/storybook/pull/33217), thanks @ghengeveld!

CHANGELOG.prerelease.md

@@ -1,3 +1,16 @@
+## 10.2.0-alpha.3
+
+- Addon Docs: Skip `!autodocs` stories when computing primary story - [#32712](https://github.com/storybookjs/storybook/pull/32712), thanks @ia319!
+- Angular: Honor --loglevel and --logfile in dev/build - [#33212](https://github.com/storybookjs/storybook/pull/33212), thanks @valentinpalkovic!
+- CSF: Export type to prevent `type cannot be named`-errors - [#33216](https://github.com/storybookjs/storybook/pull/33216), thanks @unional!
+- Chore: Upgrade Chromatic CLI - [#33176](https://github.com/storybookjs/storybook/pull/33176), thanks @ghengeveld!
+- Core: Enhance getPrettier function to provide prettier interface - [#33260](https://github.com/storybookjs/storybook/pull/33260), thanks @valentinpalkovic!
+- Core: Fix cwd handling for negated globs - [#33241](https://github.com/storybookjs/storybook/pull/33241), thanks @ia319!
+- NextJS: Alias image to use fileURLToPath for better resolution - [#33256](https://github.com/storybookjs/storybook/pull/33256), thanks @ndelangen!
+- Nextj.js: Support top-level weight/style in next/font/local with string src - [#32998](https://github.com/storybookjs/storybook/pull/32998), thanks @Chiman2937!
+- Telemetry: Cache Storybook metadata by main config content hash - [#33247](https://github.com/storybookjs/storybook/pull/33247), thanks @valentinpalkovic!
+- TypeScript: Fix summary undefined type issue - [#32585](https://github.com/storybookjs/storybook/pull/32585), thanks @afsalshamsudeen!
+
 ## 10.2.0-alpha.2
 
 - CLI: Remove any return type of getAbsolutePath - [#32977](https://github.com/storybookjs/storybook/pull/32977), thanks @nzws!

code/.storybook/preview.tsx

@@ -101,6 +101,7 @@ const PlayFnNotice = styled.div(
     padding: '3px 8px',
     fontSize: '10px',
     fontWeight: 'bold',
+    zIndex: 99,
     '> *': {
       display: 'block',
     },

code/.storybook/storybook.setup.ts

@@ -15,9 +15,10 @@ setProjectAnnotations([
     // https://vitest.dev/guide/browser/interactivity-api.html
     loaders: async (context) => {
       if (globalThis.__vitest_browser__) {
-        const vitest = await import('@vitest/browser/context');
+        const vitest = await import('vitest/browser');
         const { userEvent: browserEvent } = vitest;
-        context.userEvent = browserEvent.setup();
+        // Unfortunately the types of userEvent don't match so we cast it
+        context.userEvent = (browserEvent as unknown as typeof storybookEvent).setup();
         context.expect = vitestExpect;
       } else {
         context.userEvent = storybookEvent.setup();

code/addons/a11y/src/index.ts

@@ -5,6 +5,6 @@ import type { A11yTypes } from './types';
 
 export { PARAM_KEY } from './constants';
 export * from './params';
-export type { A11yTypes } from './types';
+export type { A11yGlobals, A11yTypes } from './types';
 
 export default () => definePreviewAddon<A11yTypes>(addonAnnotations);

code/addons/docs/src/blocks/blocks/Controls.tsx

@@ -14,6 +14,7 @@ import { ArgsTableError, ArgsTable as PureArgsTable, TabbedArgsTable } from '../
 import { DocsContext } from './DocsContext';
 import { useArgs } from './useArgs';
 import { useGlobals } from './useGlobals';
+import { usePrimaryStory } from './usePrimaryStory';
 import { getComponentName } from './utils';
 
 type ControlsParameters = {
@@ -39,12 +40,15 @@ function extractComponentArgTypes(
 
 export const Controls: FC<ControlsProps> = (props) => {
   const { of } = props;
-  if ('of' in props && of === undefined) {
-    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  const context = useContext(DocsContext);
+  const primaryStory = usePrimaryStory();
+
+  const story = of ? context.resolveOf(of, ['story']).story : primaryStory;
+
+  if (!story) {
+    return null;
   }
 
-  const context = useContext(DocsContext);
-  const { story } = context.resolveOf(of || 'story', ['story']);
   const { parameters, argTypes, component, subcomponents } = story;
   const controlsParameters = parameters.docs?.controls || ({} as ControlsParameters);
 

code/addons/docs/src/blocks/blocks/Primary.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import * as DefaultButtonStories from '../examples/Button.stories';
+import * as ButtonNoAutodocsStories from '../examples/ButtonNoAutodocs.stories';
+import * as ButtonSomeAutodocsStories from '../examples/ButtonSomeAutodocs.stories';
 import * as StoriesParametersStories from '../examples/StoriesParameters.stories';
 import { Primary } from './Primary';
 
@@ -59,3 +61,23 @@ export const WithoutToolbarOfStringMetaAttached: Story = {
   },
   parameters: { relativeCsfPaths: ['../examples/StoriesParameters.stories'] },
 };
+
+export const NoAutodocsExample: Story = {
+  name: 'Button (No Autodocs)',
+  args: {
+    of: ButtonNoAutodocsStories,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonNoAutodocs.stories'],
+  },
+};
+
+export const SomeAutodocsExample: Story = {
+  name: 'Button (Some Autodocs)',
+  args: {
+    of: ButtonSomeAutodocsStories,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonSomeAutodocs.stories'],
+  },
+};

code/addons/docs/src/blocks/blocks/Primary.tsx

@@ -1,26 +1,11 @@
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import React from 'react';
 
-import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
-import type { Of } from './useOf';
-import { useOf } from './useOf';
+import { usePrimaryStory } from './usePrimaryStory';
 
-interface PrimaryProps {
-  /** Specify where to get the primary story from. */
-  of?: Of;
-}
-
-export const Primary: FC<PrimaryProps> = (props) => {
-  const { of } = props;
-  if ('of' in props && of === undefined) {
-    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
-  }
-
-  const { csfFile } = useOf(of || 'meta', ['meta']);
-  const context = useContext(DocsContext);
-
-  const primaryStory = context.componentStoriesFromCSFFile(csfFile)[0];
+export const Primary: FC = () => {
+  const primaryStory = usePrimaryStory();
 
   return primaryStory ? (
     <DocsStory of={primaryStory.moduleExport} expanded={false} __primary withToolbar />

code/addons/docs/src/blocks/blocks/usePrimaryStory.test.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment happy-dom
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import React from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+import type { PreparedStory } from 'storybook/internal/types';
+
+import type { DocsContextProps } from './DocsContext';
+import { DocsContext } from './DocsContext';
+import { usePrimaryStory } from './usePrimaryStory';
+
+const stories: Record<string, Partial<PreparedStory>> = {
+  story1: { name: 'Story One', tags: ['!autodocs'] },
+  story2: { name: 'Story Two', tags: ['autodocs'] },
+  story3: { name: 'Story Three', tags: ['autodocs'] },
+  story4: { name: 'Story Four', tags: [] },
+};
+
+const createMockContext = (storyList: PreparedStory[]) => ({
+  componentStories: vi.fn(() => storyList),
+});
+
+const Wrapper: FC<PropsWithChildren<{ context: Partial<DocsContextProps> }>> = ({
+  children,
+  context,
+}) => <DocsContext.Provider value={context as DocsContextProps}>{children}</DocsContext.Provider>;
+
+describe('usePrimaryStory', () => {
+  it('ignores !autodocs stories', () => {
+    const mockContext = createMockContext([
+      stories.story1,
+      stories.story2,
+      stories.story3,
+    ] as PreparedStory[]);
+    const { result } = renderHook(() => usePrimaryStory(), {
+      wrapper: ({ children }) => <Wrapper context={mockContext}>{children}</Wrapper>,
+    });
+    expect(result.current?.name).toBe('Story Two');
+  });
+
+  it('selects the first autodocs story', () => {
+    const mockContext = createMockContext([stories.story2, stories.story3] as PreparedStory[]);
+    const { result } = renderHook(() => usePrimaryStory(), {
+      wrapper: ({ children }) => <Wrapper context={mockContext}>{children}</Wrapper>,
+    });
+    expect(result.current?.name).toBe('Story Two');
+  });
+
+  it('returns undefined if no story has "autodocs" tag', () => {
+    const mockContext = createMockContext([stories.story1, stories.story4] as PreparedStory[]);
+    const { result } = renderHook(() => usePrimaryStory(), {
+      wrapper: ({ children }) => <Wrapper context={mockContext}>{children}</Wrapper>,
+    });
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns undefined for empty story list', () => {
+    const mockContext = createMockContext([]);
+    const { result } = renderHook(() => usePrimaryStory(), {
+      wrapper: ({ children }) => <Wrapper context={mockContext}>{children}</Wrapper>,
+    });
+    expect(result.current).toBeUndefined();
+  });
+});

code/addons/docs/src/blocks/blocks/usePrimaryStory.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import type { PreparedStory } from 'storybook/internal/types';
+
+import { DocsContext } from './DocsContext';
+
+/**
+ * A hook to get the primary story for the current component's doc page. It defines the primary
+ * story as the first story that includes the 'autodocs' tag
+ */
+export const usePrimaryStory = (): PreparedStory | undefined => {
+  const context = useContext(DocsContext);
+  const stories = context.componentStories();
+  return stories.find((story) => story.tags.includes('autodocs'));
+};

code/addons/docs/src/blocks/components/ArgsTable/types.ts

@@ -46,11 +46,11 @@ export interface ArgType {
     disable?: boolean;
     subcategory?: string;
     defaultValue?: {
-      summary?: string;
+      summary?: string | undefined;
       detail?: string;
     };
     type?: {
-      summary?: string;
+      summary?: string | undefined;
       detail?: string;
     };
     readonly?: boolean;

code/addons/docs/src/blocks/examples/StoriesParameters.stories.tsx

@@ -5,6 +5,7 @@ import { EmptyExample } from './EmptyExample';
 const meta = {
   title: 'examples/Stories for the Stories and Primary Block',
   component: EmptyExample,
+  tags: ['autodocs'],
 } satisfies Meta<typeof EmptyExample>;
 export default meta;
 

code/addons/vitest/package.json

@@ -76,8 +76,8 @@
     "@types/micromatch": "^4.0.0",
     "@types/node": "^22.0.0",
     "@types/semver": "^7",
-    "@vitest/browser-playwright": "^4.0.1",
-    "@vitest/runner": "^4.0.1",
+    "@vitest/browser-playwright": "^4.0.14",
+    "@vitest/runner": "^4.0.14",
     "empathic": "^2.0.0",
     "es-toolkit": "^1.36.0",
     "istanbul-lib-report": "^3.0.1",
@@ -93,7 +93,7 @@
     "tree-kill": "^1.2.2",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.8.3",
-    "vitest": "^4.0.1"
+    "vitest": "^4.0.14"
   },
   "peerDependencies": {
     "@vitest/browser": "^3.0.0 || ^4.0.0",

code/addons/vitest/src/node/test-manager.test.ts

@@ -1,5 +1,4 @@
-import { describe, expect, it, vi } from 'vitest';
-import { createVitest as actualCreateVitest } from 'vitest/node';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Channel, type ChannelTransport } from 'storybook/internal/channels';
 import { experimental_MockUniversalStore } from 'storybook/internal/core-server';
@@ -43,14 +42,21 @@ const vitest = vi.hoisted(() => ({
   },
 }));
 
+const mockCreateVitest = vi.fn();
+
 vi.mock('vitest/node', async (importOriginal) => ({
   ...(await importOriginal()),
-  createVitest: vi.fn(() => Promise.resolve(vitest)),
+  createVitest: mockCreateVitest,
 }));
 
-const createVitest = vi.mocked(actualCreateVitest);
+// Use the mock function directly
+const createVitest = mockCreateVitest;
 
 const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport;
+
+beforeEach(() => {
+  createVitest.mockResolvedValue(vitest);
+});
 const mockChannel = new Channel({ transport });
 const mockStore = new experimental_MockUniversalStore<StoreState, StoreEvent>(
   {

code/addons/vitest/src/node/test-manager.ts

@@ -1,4 +1,4 @@
-import type { TestResult, TestState } from 'vitest/dist/node.js';
+import type { TestResult, TestState } from 'vitest/node';
 
 import type { experimental_UniversalStore } from 'storybook/internal/core-server';
 import type {

code/addons/vitest/src/vitest-plugin/test-utils.ts

@@ -8,7 +8,7 @@ import { type Report, composeStory, getCsfFactoryAnnotations } from 'storybook/p
 
 import { setViewport } from './viewports';
 
-declare module '@vitest/browser/context' {
+declare module 'vitest/browser' {
   interface BrowserCommands {
     getInitialGlobals: () => Promise<Record<string, any>>;
   }

code/core/src/backgrounds/preview.ts

@@ -2,7 +2,12 @@ import { definePreviewAddon } from 'storybook/internal/csf';
 
 import { PARAM_KEY } from './constants';
 import { withBackgroundAndGrid } from './decorator';
-import type { BackgroundTypes, BackgroundsParameters, GlobalState } from './types';
+import type {
+  BackgroundTypes,
+  BackgroundsGlobals,
+  BackgroundsParameters,
+  GlobalState,
+} from './types';
 
 const decorators = globalThis.FEATURES?.backgrounds ? [withBackgroundAndGrid] : [];
 
@@ -21,7 +26,7 @@ const initialGlobals: Record<string, GlobalState> = {
   [PARAM_KEY]: { value: undefined, grid: false },
 };
 
-export type { BackgroundTypes };
+export type { BackgroundTypes, BackgroundsGlobals };
 
 export default () =>
   definePreviewAddon<BackgroundTypes>({

code/core/src/bin/core.ts

@@ -27,8 +27,10 @@ addToGlobalContext('cliVersion', version);
  */
 
 const handleCommandFailure = async (logFilePath: string | boolean): Promise<never> => {
-  const logFile = await logTracker.writeToFile(logFilePath);
-  logger.log(`Debug logs are written to: ${logFile}`);
+  try {
+    const logFile = await logTracker.writeToFile(logFilePath);
+    logger.log(`Debug logs are written to: ${logFile}`);
+  } catch {}
   logger.outro('Storybook exited with an error');
   process.exit(1);
 };
@@ -66,8 +68,10 @@ const command = (name: string) =>
     })
     .hook('postAction', async (command) => {
       if (logTracker.shouldWriteLogsToFile) {
-        const logFile = await logTracker.writeToFile(command.getOptionValue('logfile'));
-        logger.outro(`Debug logs are written to: ${logFile}`);
+        try {
+          const logFile = await logTracker.writeToFile(command.getOptionValue('logfile'));
+          logger.outro(`Debug logs are written to: ${logFile}`);
+        } catch {}
       }
     });
 

code/core/src/channels/index.test.ts

@@ -148,7 +148,6 @@ describe('Channel', () => {
     });
 
     it('should use setImmediate if async is true', () => {
-      // @ts-expect-error no idea what's going on here!
       global.setImmediate = vi.fn(setImmediate);
 
       channel = new Channel({ async: true, transport });

code/core/src/common/js-package-manager/JsPackageManager.test.ts

@@ -17,7 +17,6 @@ describe('JsPackageManager', () => {
   beforeEach(() => {
     // @ts-expect-error Ignore abstract class error
     jsPackageManager = new JsPackageManager();
-    // @ts-expect-error latestVersion is a method that exists on the instance
     mockLatestVersion = vi.spyOn(jsPackageManager, 'latestVersion');
 
     vi.clearAllMocks();