Release: Prerelease 10.4.0-alpha.5

.oxfmtrc.json

@@ -36,7 +36,8 @@
     "*.yaml",
     "*.md",
     "*.mdx",
-    "!docs/_snippets/**"
+    "!docs/_snippets/**",
+    "!docs/versions/*.json"
   ],
   "overrides": [
     {

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 10.4.0-alpha.5
+
+- Addon-a11y: Clear status transition timer on unmount to prevent test flake - [#34203](https://github.com/storybookjs/storybook/pull/34203), thanks @mixelburg!
+- Builder-Vite: Use djb2 hash to prevent variable name collisions in builder-vite - [#34274](https://github.com/storybookjs/storybook/pull/34274), thanks @chida09!
+- CLI: Fix Next.js Vite automigration corrupting configs already using `@storybook/nextjs-vite` - [#34249](https://github.com/storybookjs/storybook/pull/34249), thanks @nathanjessen!
+- Core: Add changeDetection feature flag - [#34314](https://github.com/storybookjs/storybook/pull/34314), thanks @valentinpalkovic!
+- Manager: URL-based tag filter state + filter-aware initial story selection - [#34283](https://github.com/storybookjs/storybook/pull/34283), thanks @valentinpalkovic!
+- React-Vite: Upgrade @joshwooding/vite-plugin-react-docgen-typescript to 0.7.0 - [#34335](https://github.com/storybookjs/storybook/pull/34335), thanks @beeswhacks!
+- Refactor: Extract shared `PseudoStateGrid` component in pseudo-states stories - [#34334](https://github.com/storybookjs/storybook/pull/34334), thanks @copilot-swe-agent!
+
 ## 10.4.0-alpha.4
 
 - Addon-Docs: Add Reset story button to re-render stories in docs - [#34086](https://github.com/storybookjs/storybook/pull/34086), thanks @6810779s!

code/addons/a11y/src/components/A11yContext.tsx

@@ -1,5 +1,13 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   STORY_CHANGED,
@@ -140,9 +148,22 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
   }, [setState, storyId]);
 
   const handleToggleHighlight = useCallback(() => {
-    setState((prev) => ({ ...prev, ui: { ...prev.ui, highlighted: !prev.ui.highlighted } }));
+    setState((prev) => ({
+      ...prev,
+      ui: { ...prev.ui, highlighted: !prev.ui.highlighted },
+    }));
   }, [setState]);
 
+  const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (statusTimerRef.current !== null) {
+        clearTimeout(statusTimerRef.current);
+      }
+    };
+  }, []);
+
   const [selectedItems, setSelectedItems] = useState<Map<string, string>>(() => {
     const initialValue = new Map();
     // Check if the a11ySelection param is a valid format before parsing it
@@ -202,7 +223,11 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
       if (storyId === id) {
         setState((prev) => ({ ...prev, status: 'ran', results: axeResults }));
 
-        setTimeout(() => {
+        if (statusTimerRef.current !== null) {
+          clearTimeout(statusTimerRef.current);
+        }
+        statusTimerRef.current = setTimeout(() => {
+          statusTimerRef.current = null;
           setState((prev) => {
             if (prev.status === 'ran') {
               return { ...prev, status: 'ready' };

code/addons/pseudo-states/src/stories/Button.stories.tsx

@@ -5,6 +5,7 @@ import { styled } from 'storybook/theming';
 
 import { Button } from './Button';
 import './grid.css';
+import { PseudoStateGrid } from './PseudoStateGrid';
 
 const meta = {
   title: 'Button',
@@ -18,32 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const All: Story = {
   render: (args: ComponentProps<typeof Button>) => (
-    <div className="story-grid">
-      <div>
-        <Button {...args}>Normal</Button>
-      </div>
-      <div className="pseudo-hover-all">
-        <Button {...args}>Hover</Button>
-      </div>
-      <div className="pseudo-focus-all">
-        <Button {...args}>Focus</Button>
-      </div>
-      <div className="pseudo-active-all">
-        <Button {...args}>Active</Button>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all">
-        <Button {...args}>Hover Focus</Button>
-      </div>
-      <div className="pseudo-hover-all pseudo-active-all">
-        <Button {...args}>Hover Active</Button>
-      </div>
-      <div className="pseudo-focus-all pseudo-active-all">
-        <Button {...args}>Focus Active</Button>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
-        <Button {...args}>Hover Focus Active</Button>
-      </div>
-    </div>
+    <PseudoStateGrid render={(label) => <Button {...args}>{label}</Button>} />
   ),
 };
 

code/addons/pseudo-states/src/stories/CSSAtRules.stories.tsx

@@ -8,6 +8,7 @@ import { useChannel, useStoryContext } from 'storybook/preview-api';
 
 import { Button } from './CSSAtRules';
 import './grid.css';
+import { PseudoStateGrid } from './PseudoStateGrid';
 
 const meta = {
   title: 'CSSAtRules',
@@ -21,32 +22,7 @@ type Story = StoryObj<typeof meta>;
 
 export const All: Story = {
   render: (args: ComponentProps<typeof Button>) => (
-    <div className="story-grid">
-      <div>
-        <Button {...args}>Normal</Button>
-      </div>
-      <div className="pseudo-hover-all">
-        <Button {...args}>Hover</Button>
-      </div>
-      <div className="pseudo-focus-all">
-        <Button {...args}>Focus</Button>
-      </div>
-      <div className="pseudo-active-all">
-        <Button {...args}>Active</Button>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all">
-        <Button {...args}>Hover Focus</Button>
-      </div>
-      <div className="pseudo-hover-all pseudo-active-all">
-        <Button {...args}>Hover Active</Button>
-      </div>
-      <div className="pseudo-focus-all pseudo-active-all">
-        <Button {...args}>Focus Active</Button>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
-        <Button {...args}>Hover Focus Active</Button>
-      </div>
-    </div>
+    <PseudoStateGrid render={(label) => <Button {...args}>{label}</Button>} />
   ),
 };
 

code/addons/pseudo-states/src/stories/CustomElement.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import './CustomElement';
 import './grid.css';
+import { PseudoStateGrid } from './PseudoStateGrid';
 
 const meta = {
   title: 'CustomElement',
@@ -20,40 +21,12 @@ type Story = StoryObj<typeof meta>;
 
 export const All: Story = {
   render: () => (
-    <div className="story-grid">
-      <div>
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Normal</custom-element>
-      </div>
-      <div className="pseudo-hover-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Hover</custom-element>
-      </div>
-      <div className="pseudo-focus-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Focus</custom-element>
-      </div>
-      <div className="pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Active</custom-element>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Hover Focus</custom-element>
-      </div>
-      <div className="pseudo-hover-all pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Hover Active</custom-element>
-      </div>
-      <div className="pseudo-focus-all pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Focus Active</custom-element>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element>Hover Focus Active</custom-element>
-      </div>
-    </div>
+    <PseudoStateGrid
+      render={(label) => (
+        // @ts-expect-error We're dealing with a web component here
+        <custom-element>{label}</custom-element>
+      )}
+    />
   ),
 };
 

code/addons/pseudo-states/src/stories/CustomElementNested.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import './CustomElementNested';
 import './grid.css';
+import { PseudoStateGrid } from './PseudoStateGrid';
 
 const meta = {
   title: 'CustomElementNested',
@@ -20,40 +21,12 @@ type Story = StoryObj<typeof meta>;
 
 export const All: Story = {
   render: () => (
-    <div className="story-grid">
-      <div>
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Normal</custom-element-nested>
-      </div>
-      <div className="pseudo-hover-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Hover</custom-element-nested>
-      </div>
-      <div className="pseudo-focus-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Focus</custom-element-nested>
-      </div>
-      <div className="pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Active</custom-element-nested>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Hover Focus</custom-element-nested>
-      </div>
-      <div className="pseudo-hover-all pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Hover Active</custom-element-nested>
-      </div>
-      <div className="pseudo-focus-all pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Focus Active</custom-element-nested>
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
-        {/* @ts-expect-error We're dealing with a web component here */}
-        <custom-element-nested>Hover Focus Active</custom-element-nested>
-      </div>
-    </div>
+    <PseudoStateGrid
+      render={(label) => (
+        // @ts-expect-error We're dealing with a web component here
+        <custom-element-nested>{label}</custom-element-nested>
+      )}
+    />
   ),
 };
 

code/addons/pseudo-states/src/stories/PseudoStateGrid.tsx

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+
+interface PseudoStateGridProps {
+  render: (label: string) => ReactNode;
+}
+
+export const PseudoStateGrid = ({ render }: PseudoStateGridProps) => (
+  <div className="story-grid">
+    <div>{render('Normal')}</div>
+    <div className="pseudo-hover-all">{render('Hover')}</div>
+    <div className="pseudo-focus-all">{render('Focus')}</div>
+    <div className="pseudo-active-all">{render('Active')}</div>
+    <div className="pseudo-hover-all pseudo-focus-all">{render('Hover Focus')}</div>
+    <div className="pseudo-hover-all pseudo-active-all">{render('Hover Active')}</div>
+    <div className="pseudo-focus-all pseudo-active-all">{render('Focus Active')}</div>
+    <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
+      {render('Hover Focus Active')}
+    </div>
+  </div>
+);

code/addons/pseudo-states/src/stories/ShadowRoot.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ShadowRoot } from './ShadowRoot';
 import './grid.css';
+import { PseudoStateGrid } from './PseudoStateGrid';
 
 const meta = {
   title: 'ShadowRoot',
@@ -15,34 +16,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const All: Story = {
-  render: () => (
-    <div className="story-grid">
-      <div>
-        <ShadowRoot label="Normal" />
-      </div>
-      <div className="pseudo-hover-all">
-        <ShadowRoot label="Hover" />
-      </div>
-      <div className="pseudo-focus-all">
-        <ShadowRoot label="Focus" />
-      </div>
-      <div className="pseudo-active-all">
-        <ShadowRoot label="Active" />
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all">
-        <ShadowRoot label="Hover Focus" />
-      </div>
-      <div className="pseudo-hover-all pseudo-active-all">
-        <ShadowRoot label="Hover Active" />
-      </div>
-      <div className="pseudo-focus-all pseudo-active-all">
-        <ShadowRoot label="Focus Active" />
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
-        <ShadowRoot label="Hover Focus Active" />
-      </div>
-    </div>
-  ),
+  render: () => <PseudoStateGrid render={(label) => <ShadowRoot label={label} />} />,
 };
 
 export const Default: Story = {};

code/addons/pseudo-states/src/stories/ShadowRootWithPart.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ShadowRoot } from './ShadowRootWithPart';
 import './grid.css';
+import { PseudoStateGrid } from './PseudoStateGrid';
 
 const meta = {
   title: 'ShadowRootWithPart',
@@ -15,34 +16,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const All: Story = {
-  render: () => (
-    <div className="story-grid">
-      <div>
-        <ShadowRoot label="Normal" />
-      </div>
-      <div className="pseudo-hover-all">
-        <ShadowRoot label="Hover" />
-      </div>
-      <div className="pseudo-focus-all">
-        <ShadowRoot label="Focus" />
-      </div>
-      <div className="pseudo-active-all">
-        <ShadowRoot label="Active" />
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all">
-        <ShadowRoot label="Hover Focus" />
-      </div>
-      <div className="pseudo-hover-all pseudo-active-all">
-        <ShadowRoot label="Hover Active" />
-      </div>
-      <div className="pseudo-focus-all pseudo-active-all">
-        <ShadowRoot label="Focus Active" />
-      </div>
-      <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
-        <ShadowRoot label="Hover Focus Active" />
-      </div>
-    </div>
-  ),
+  render: () => <PseudoStateGrid render={(label) => <ShadowRoot label={label} />} />,
 };
 
 export const Default: Story = {};

code/builders/builder-vite/src/codegen-project-annotations.ts

@@ -105,6 +105,11 @@ export function generateProjectAnnotationsCodeFromPreviews(options: {
   `.trim();
 }
 
+/** djb2 hash — http://www.cse.yorku.ca/~oz/hash.html */
 function hash(value: string) {
-  return value.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  let acc = 5381;
+  for (let i = 0; i < value.length; i++) {
+    acc = ((acc << 5) + acc + value.charCodeAt(i)) >>> 0;
+  }
+  return acc;
 }