Release: Prerelease 10.4.0-alpha.17

CHANGELOG.prerelease.md

@@ -1,3 +1,14 @@
+## 10.4.0-alpha.17
+
+- Agentic Setup: Keep sample content if users want onboarding - [#34704](https://github.com/storybookjs/storybook/pull/34704), thanks @Sidnioulz!
+- Fix ArgsTable borders not visible in Windows High Contrast Mode - [#34264](https://github.com/storybookjs/storybook/pull/34264), thanks @TheSeydiCharyyev!
+- MDX: Replace `@storybook/docs-mdx` with inline implementation - [#34611](https://github.com/storybookjs/storybook/pull/34611), thanks @copilot-swe-agent!
+- Maintenance: Enhance ghost stories internal tests - [#34707](https://github.com/storybookjs/storybook/pull/34707), thanks @yannbf!
+- ReactNative: Add Metro config AST codemod for init - [#34660](https://github.com/storybookjs/storybook/pull/34660), thanks @ndelangen!
+- ReactNative: New init setup - [#34665](https://github.com/storybookjs/storybook/pull/34665), thanks @ndelangen!
+- Tanstack: Add `@storybook/tanstack-react` package - [#34403](https://github.com/storybookjs/storybook/pull/34403), thanks @huang-julien!
+- UI: Fix showing and hiding copy prompt in the correct scenarios - [#34706](https://github.com/storybookjs/storybook/pull/34706), thanks @yannbf!
+
 ## 10.4.0-alpha.16
 
 - Automigration: Move RN on-device addons to `deviceAddons` - [#34659](https://github.com/storybookjs/storybook/pull/34659), thanks @ndelangen!

code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx

@@ -160,6 +160,17 @@ export const TableWrapper = styled.table<{
             },
           }),
     },
+    // High contrast mode: ensure borders are visible with system colors
+    '@media (forced-colors: active)': {
+      tbody: {
+        filter: 'none',
+
+        '> tr > *': {
+          borderColor: 'CanvasText',
+        },
+      },
+    },
+
     // End awesome table styling
   },
 }));

code/builders/builder-vite/src/change-detection-adapter/index.test.ts

@@ -0,0 +1,143 @@
+// Tests the Vite implementation of ChangeDetectionAdapter — wiring of resolve config
+// snapshot and chokidar event normalisation.
+import { EventEmitter } from 'node:events';
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { ViteDevServer } from 'vite';
+
+import { createViteChangeDetectionAdapter } from './index.ts';
+
+vi.mock('vite', { spy: true });
+
+interface FakeViteDevServer {
+  config: {
+    root: string;
+    resolve?: {
+      alias?: unknown;
+      conditions?: string[];
+      tsconfig?: string;
+    };
+  };
+  watcher: EventEmitter;
+}
+
+function createFakeServer(overrides: Partial<FakeViteDevServer['config']> = {}): {
+  server: ViteDevServer;
+  watcher: EventEmitter;
+} {
+  const watcher = new EventEmitter();
+  const server: FakeViteDevServer = {
+    config: {
+      root: '/repo',
+      ...overrides,
+    },
+    watcher,
+  };
+  return { server: server as unknown as ViteDevServer, watcher };
+}
+
+describe('createViteChangeDetectionAdapter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('snapshots projectRoot, alias and conditions from server.config in getResolveConfig()', async () => {
+    const alias = [{ find: '@', replacement: '/repo/src' }];
+    const conditions = ['import', 'module', 'default'];
+    const { server } = createFakeServer({
+      root: '/repo',
+      resolve: { alias, conditions },
+    });
+
+    const adapter = createViteChangeDetectionAdapter(server);
+    const config = await adapter.getResolveConfig();
+
+    expect(config).toEqual({
+      projectRoot: '/repo',
+      alias,
+      conditions,
+    });
+  });
+
+  it('forwards chokidar `add` events as kind: "add"', () => {
+    const { server, watcher } = createFakeServer();
+    const adapter = createViteChangeDetectionAdapter(server);
+    const handler = vi.fn();
+    adapter.onFileChange(handler);
+
+    watcher.emit('all', 'add', '/repo/src/A.tsx');
+
+    expect(handler).toHaveBeenCalledWith({ kind: 'add', path: '/repo/src/A.tsx' });
+  });
+
+  it('forwards chokidar `change` events as kind: "change"', () => {
+    const { server, watcher } = createFakeServer();
+    const adapter = createViteChangeDetectionAdapter(server);
+    const handler = vi.fn();
+    adapter.onFileChange(handler);
+
+    watcher.emit('all', 'change', '/repo/src/A.tsx');
+
+    expect(handler).toHaveBeenCalledWith({ kind: 'change', path: '/repo/src/A.tsx' });
+  });
+
+  it('forwards chokidar `unlink` events as kind: "unlink"', () => {
+    const { server, watcher } = createFakeServer();
+    const adapter = createViteChangeDetectionAdapter(server);
+    const handler = vi.fn();
+    adapter.onFileChange(handler);
+
+    watcher.emit('all', 'unlink', '/repo/src/A.tsx');
+
+    expect(handler).toHaveBeenCalledWith({ kind: 'unlink', path: '/repo/src/A.tsx' });
+  });
+
+  it('does NOT forward `addDir`, `unlinkDir`, `ready`, `raw`, or `error` chokidar events', () => {
+    const { server, watcher } = createFakeServer();
+    const adapter = createViteChangeDetectionAdapter(server);
+    const handler = vi.fn();
+    adapter.onFileChange(handler);
+
+    watcher.emit('all', 'addDir', '/repo/src/some-dir');
+    watcher.emit('all', 'unlinkDir', '/repo/src/some-dir');
+    watcher.emit('all', 'ready');
+    watcher.emit('all', 'raw', '/repo/src/A.tsx');
+    watcher.emit('all', 'error', new Error('boom'));
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('normalises chokidar paths via pathe.normalize before forwarding', () => {
+    const { server, watcher } = createFakeServer();
+    const adapter = createViteChangeDetectionAdapter(server);
+    const handler = vi.fn();
+    adapter.onFileChange(handler);
+
+    // Path with `/./` and mixed-case noise that pathe.normalize collapses.
+    watcher.emit('all', 'change', '/repo/src/./A.tsx');
+
+    expect(handler).toHaveBeenCalledWith({
+      kind: 'change',
+      path: '/repo/src/A.tsx',
+    });
+  });
+
+  it('returns an unsubscribe function that removes the listener', () => {
+    const { server, watcher } = createFakeServer();
+    const adapter = createViteChangeDetectionAdapter(server);
+    const handler = vi.fn();
+    const unsubscribe = adapter.onFileChange(handler);
+
+    watcher.emit('all', 'change', '/repo/src/A.tsx');
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    watcher.emit('all', 'change', '/repo/src/B.tsx');
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});

code/builders/builder-vite/src/change-detection-adapter/index.ts

@@ -0,0 +1,53 @@
+import type {
+  ChangeDetectionAdapter,
+  FileChangeEvent,
+  ModuleResolveConfig,
+} from 'storybook/internal/core-server';
+
+import { normalize } from 'pathe';
+import type { ViteDevServer } from 'vite';
+
+/**
+ * Vite implementation of {@link ChangeDetectionAdapter}.
+ *
+ * - `getResolveConfig()` snapshots `server.config.resolve.alias`, `server.config.resolve.conditions`
+ *   and `server.config.root` once at startup. The detector caches the result.
+ * - `onFileChange()` subscribes to `server.watcher` (chokidar) and forwards `add`/`change`/`unlink`
+ *   events with normalised absolute paths. Other chokidar event names (`addDir`, `unlinkDir`,
+ *   `ready`, `raw`, `error`) are intentionally filtered out.
+ */
+export function createViteChangeDetectionAdapter(server: ViteDevServer): ChangeDetectionAdapter {
+  return {
+    async getResolveConfig(): Promise<ModuleResolveConfig> {
+      const resolveOpts = server.config.resolve;
+      // Vite normalises `resolve.alias` to its array form (`Array<{find, replacement, ...}>`)
+      // before we ever see it. The detector accepts both Record and Array shapes, so we pass
+      // the array through unchanged.
+      const alias = resolveOpts?.alias as ModuleResolveConfig['alias'];
+      const conditions = resolveOpts?.conditions;
+
+      return {
+        projectRoot: server.config.root,
+        alias,
+        conditions,
+      };
+    },
+
+    onFileChange(handler) {
+      const FORWARDED_EVENTS = new Set<FileChangeEvent['kind']>(['add', 'change', 'unlink']);
+      const isForwardedEvent = (name: string): name is FileChangeEvent['kind'] =>
+        FORWARDED_EVENTS.has(name as FileChangeEvent['kind']);
+
+      const onAll = (eventName: string, path: string) => {
+        if (!isForwardedEvent(eventName)) {
+          return;
+        }
+        handler({ kind: eventName, path: normalize(path) });
+      };
+      server.watcher.on('all', onAll);
+      return () => {
+        server.watcher.off('all', onAll);
+      };
+    },
+  };
+}