Merge pull request #32305 from storybookjs/version-non-patch-from-10.0.0-beta.0

Release: Prerelease 10.0.0-beta.1

Author: shilman

.github/workflows/generate-sandboxes.yml

@@ -2,7 +2,7 @@ name: Generate and publish sandboxes
 
 on:
   schedule:
-    - cron: "2 2 */1 * *"
+    - cron: '2 2 */1 * *'
   workflow_dispatch:
   # To test fixes on push rather than wait for the scheduling, do the following:
   # 1. Uncomment the lines below and add your branch.
@@ -14,8 +14,8 @@ on:
   # 4. 👉 DON'T FORGET TO UNDO THE STEPS BEFORE YOU MERGE YOUR CHANGES!
 
 env:
-  YARN_ENABLE_IMMUTABLE_INSTALLS: "false"
-  CLEANUP_SANDBOX_NODE_MODULES: "true"
+  YARN_ENABLE_IMMUTABLE_INSTALLS: 'false'
+  CLEANUP_SANDBOX_NODE_MODULES: 'true'
 
 defaults:
   run:
@@ -32,7 +32,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
 
       - name: Setup git user
         run: |
@@ -84,7 +84,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
 
       - name: Setup git user
         run: |

.kiro/steering/product.md

@@ -0,0 +1,28 @@
+# Product Overview
+
+Storybook is a frontend workshop for building UI components and pages in isolation. It's a tool for UI development, testing, and documentation that supports multiple frameworks including React, Angular, Vue, Svelte, and many others.
+
+## Core Purpose
+
+- Build bulletproof UI components faster
+- Develop UI components in isolation
+- Create comprehensive documentation for components
+- Enable visual testing and interaction testing
+- Support component-driven development workflows
+
+## Key Features
+
+- Multi-framework support (React, Angular, Vue, Svelte, etc.)
+- Extensive addon ecosystem for enhanced functionality
+- Built-in documentation generation
+- Visual testing capabilities
+- Component story format (CSF) for organizing examples
+- Hot module reloading for fast development
+
+## Target Users
+
+- Frontend developers building component libraries
+- Design system teams
+- UI/UX designers collaborating with developers
+- QA teams performing visual testing
+- Documentation writers creating component guides

.kiro/steering/structure.md

@@ -0,0 +1,100 @@
+# Project Structure
+
+## Repository Layout
+
+This is a monorepo with the main codebase in the `code/` directory and supporting files at the root level.
+
+```ascii
+storybook/
+├── code/                   # Main codebase (Nx workspace)
+│   ├── addons/             # Storybook addons (a11y, docs, jest, etc.)
+│   ├── builders/           # Build system integrations
+│   ├── core/               # Core Storybook UI and API
+│   ├── frameworks/         # Framework-specific implementations
+│   ├── lib/                # CLI tools and utilities
+│   ├── presets/            # Configuration presets
+│   ├── renderers/          # Framework renderers
+│   └── sandbox/            # Development sandboxes
+├── docs/                   # Documentation source files
+├── scripts/                # Build and automation scripts
+├── test-storybooks/        # Integration test projects
+└── sandbox/                # Generated sandbox environments
+```
+
+## Code Organization
+
+### Core Packages (`code/`)
+
+- **`core/`**: Main Storybook application (manager UI, preview, server)
+- **`addons/`**: Official addons (a11y, docs, jest, links, etc.)
+- **`frameworks/`**: Framework-specific integrations (angular, nextjs, sveltekit), usually a combination of a renderer and a builder
+- **`renderers/`**: Pure framework renderers (react, vue3, svelte)
+- **`builders/`**: Build tool integrations (vite, webpack5)
+- **`lib/`**: Utilities and CLI tools (cli-sb, codemod, create-storybook)
+- **`presets/`**: Webpack configuration presets for popular setups
+
+### Package Naming Conventions
+
+- Renderer packages: `@storybook/{renderer}` (e.g., `@storybook/react`)
+- Framework + builder: `@storybook/{renderer}-{builder}` OR `@storybook/{framework}` (e.g., `@storybook/react-vite`, `@storybook/sveltekit`)
+- Addons: `@storybook/addon-{name}` (e.g., `@storybook/addon-docs`)
+- Builders: `@storybook/builder-{name}` (e.g., `@storybook/builder-vite`)
+- Presets: `@storybook/preset-{name}` (e.g., `@storybook/preset-create-react-app`)
+
+## File Conventions
+
+### TypeScript Configuration
+
+- Strict TypeScript with `noImplicitAny: true`
+- Module resolution: `bundler` mode
+- Target: `ES2020`
+- JSX: `preserve` mode
+
+### Code Style
+
+- **Prettier**: 100 character line width, single quotes, trailing commas
+- **Import Order**: Node modules → testing → React → Storybook internal → third-party → relative
+- **File Extensions**: Prefer `.ts`/`.tsx` over `.js`/`.jsx`
+- **Naming**: Use kebab-case for files, PascalCase for components
+
+### Testing Structure
+
+- **Unit Tests**: `*.test.ts` files alongside source code
+- **E2E Tests**: `code/e2e-tests/` directory with Playwright
+- **Stories**: `*.stories.ts` files for component examples
+- **Mocks**: `__mocks__/` directories for test fixtures
+
+### Documentation
+
+- **API Docs**: JSDoc comments with TSDoc format
+- **README**: Each package should have comprehensive README
+- **Stories**: Use Component Story Format (CSF) 3.0
+- **Migration Guides**: Document breaking changes
+
+## Development Patterns
+
+### Monorepo Workflow
+
+1. All development happens in `code/` directory
+2. Use `yarn build --watch` for active development
+3. Nx handles dependency graph and caching
+4. All packages are versioned and released together
+
+### Package Dependencies
+
+- **Internal**: Use `workspace:*` for internal package references
+- **Peer Dependencies**: Framework packages are peer dependencies
+- **Dev Dependencies**: Testing and build tools in root package.json
+
+### Build Outputs
+
+- **`dist/`**: Compiled JavaScript and type definitions
+- **`template/`**: Framework-specific template files
+- **`*.d.ts`**: TypeScript declaration files
+
+### Sandbox Development
+
+- Use `yarn start` for quick React TypeScript sandbox
+- Use `yarn task` for custom framework/template selection
+- Sandboxes are generated in `sandbox/` directory
+- Link mode connects to local packages for development

.kiro/steering/tech.md

@@ -0,0 +1,113 @@
+# Technology Stack
+
+## Build System & Package Management
+
+- **Monorepo**: Managed with Nx for build orchestration and caching
+- **Package Manager**: Yarn 4 with workspaces
+- **Node.js**: Version 22+ (specified in .nvmrc)
+- **Build Tool**: Custom build scripts with esbuild and Vite integration
+
+## Core Technologies
+
+- **TypeScript**: Primary language with strict configuration
+- **React**: Main UI framework for Storybook's own interface
+- **Vite**: Build tool and dev server for modern frameworks
+- **Webpack 5**: Alternative bundler support
+- **ESBuild**: Fast JavaScript bundler and minifier
+
+## Testing & Quality
+
+- **Vitest**: Primary test runner with coverage via Istanbul
+- **Playwright**: End-to-end testing framework
+- **ESLint**: Code linting with extensive custom rules
+- **Prettier**: Code formatting with custom plugins
+- **Chromatic**: Visual testing and review
+
+## Development Workflow
+
+- **Hot Module Reloading**: Fast development feedback
+- **Watch Mode**: Automatic rebuilds during development
+- **Parallel Builds**: Nx orchestrates parallel package builds
+- **Caching**: Aggressive build and test caching via Nx
+
+## Common Commands
+
+### Development
+
+```bash
+# Start development environment with React TypeScript sandbox
+yarn start
+
+# Start with custom template selection
+yarn task
+
+# Build specific packages in watch mode
+cd code && yarn build --watch <package-names>
+
+# Run Storybook UI development server
+yarn storybook:ui
+
+# Create a standalone sandbox to develop against a specific framework
+yarn task --task sandbox
+```
+
+### Testing
+
+```bash
+# Run all tests
+yarn test
+
+# Run tests in watch mode
+yarn test:watch
+
+# Run specific package tests
+yarn nx test <package-name>
+
+# Run E2E tests
+yarn playwright test
+```
+
+### Building
+
+```bash
+# Build all packages
+yarn build
+
+# Build in production mode (required for Angular)
+yarn build --prod
+
+# Build with watch mode
+yarn build --watch
+
+# Build specific packages
+yarn build <package-1> <package-2>
+```
+
+### Linting & Formatting
+
+```bash
+# Lint JavaScript/TypeScript
+yarn lint:js
+
+# Lint markdown and code samples
+yarn lint:md
+
+# Auto-fix linting issues
+yarn lint:js --fix
+
+# Format code with Prettier
+yarn lint:prettier
+```
+
+## Framework Support
+
+Storybook supports multiple frontend frameworks through dedicated packages:
+
+- React (react, react-vite, react-webpack5)
+- Angular (angular)
+- Vue (vue3, vue3-vite)
+- Svelte (svelte, svelte-vite, sveltekit)
+- Web Components (web-components, web-components-vite)
+- HTML (html, html-vite)
+- Preact (preact, preact-vite)
+- Next.js (nextjs, nextjs-vite)

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 9.1.3
+
+- Docs: Move button in ArgsTable heading to fix screenreader announcements - [#32238](https://github.com/storybookjs/storybook/pull/32238), thanks @Sidnioulz!
+- Mock: Catch errors when transforming preview files - [#32216](https://github.com/storybookjs/storybook/pull/32216), thanks @valentinpalkovic!
+- Next.js: Fix version mismatch error in Webpack - [#32306](https://github.com/storybookjs/storybook/pull/32306), thanks @valentinpalkovic!
+- Telemetry: Disambiguate traffic coming from error/upgrade links - [#32287](https://github.com/storybookjs/storybook/pull/32287), thanks @shilman!
+- Telemetry: Disambiguate unattributed traffic from Onboarding - [#32286](https://github.com/storybookjs/storybook/pull/32286), thanks @shilman!
+
 ## 9.1.2
 
 - Addon Docs: Fix Symbol conversion issue in docs page and controls panel - [#32220](https://github.com/storybookjs/storybook/pull/32220), thanks @yannbf!

CHANGELOG.prerelease.md

@@ -1,3 +1,15 @@
+## 10.0.0-beta.1
+
+- AddonA11Y: Fix postinstall - [#32309](https://github.com/storybookjs/storybook/pull/32309), thanks @ndelangen!
+- Angular: Properly merge builder options and browserTarget options - [#32272](https://github.com/storybookjs/storybook/pull/32272), thanks @kroeder!
+- Core: Optimize bundlesize, by reusing internal/babel in mocking-utils - [#32350](https://github.com/storybookjs/storybook/pull/32350), thanks @ndelangen!
+- Core: Update tags filter UI - [#32343](https://github.com/storybookjs/storybook/pull/32343), thanks @ghengeveld!
+- Next.js: Avoid multiple webpack versions at runtime - [#32313](https://github.com/storybookjs/storybook/pull/32313), thanks @valentinpalkovic!
+- Next.js: Fix version mismatch error in Webpack - [#32306](https://github.com/storybookjs/storybook/pull/32306), thanks @valentinpalkovic!
+- Svelte & Vue: Add framework-specific `docgen` option to disable docgen processing - [#32319](https://github.com/storybookjs/storybook/pull/32319), thanks @copilot-swe-agent!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v6 - [#32320](https://github.com/storybookjs/storybook/pull/32320), thanks @JReinhold!
+- Update: Satellite repos after major version bump - [#32303](https://github.com/storybookjs/storybook/pull/32303), thanks @ndelangen!
+
 ## 10.0.0-beta.0
 
 - Core: Fix staticCopy not copying `index.html` to sub directory - [#32259](https://github.com/storybookjs/storybook/pull/32259), thanks @ndelangen!

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

@@ -7,6 +7,20 @@ import { dedent } from 'ts-dedent';
 import { JsPackageManager } from './JsPackageManager';
 import { Yarn1Proxy } from './Yarn1Proxy';
 
+vi.mock('node:process', async (importOriginal) => {
+  const original: any = await importOriginal();
+  return {
+    ...original,
+    default: {
+      ...original.default,
+      env: {
+        ...original.default.env,
+        CI: false,
+      },
+    },
+  };
+});
+
 describe('Yarn 1 Proxy', () => {
   let yarn1Proxy: Yarn1Proxy;
 

code/core/src/common/js-package-manager/Yarn1Proxy.ts

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
+import process from 'node:process';
 
 import { prompt } from 'storybook/internal/node-logger';
 import { FindPackageVersionsError } from 'storybook/internal/server-errors';
@@ -36,7 +37,7 @@ export class Yarn1Proxy extends JsPackageManager {
 
   getInstallArgs(): string[] {
     if (!this.installArgs) {
-      this.installArgs = ['--ignore-workspace-root-check'];
+      this.installArgs = process.env.CI ? [] : ['--ignore-workspace-root-check'];
     }
     return this.installArgs;
   }

code/core/src/components/components/tooltip/ListItem.tsx

@@ -54,9 +54,6 @@ const Right = styled.span<RightProps>({
     margin: '3px 0',
     verticalAlign: 'top',
   },
-  '& path': {
-    fill: 'inherit',
-  },
 });
 
 const Center = styled.span<{ isIndented: boolean }>(

code/core/src/components/components/tooltip/WithTooltip.tsx

@@ -44,6 +44,11 @@ export interface WithTooltipPureProps
    * @default false
    */
   closeOnOutsideClick?: boolean;
+  /**
+   * Optional container to portal the tooltip into. Can be a CSS selector string or a DOM Element.
+   * Falls back to document.body.
+   */
+  portalContainer?: Element | string | null;
 }
 
 // Pure, does not bind to the body
@@ -87,6 +92,7 @@ const WithTooltipPure = ({
   strategy,
   followCursor,
   onVisibleChange,
+  portalContainer,
   ...props
 }: WithTooltipPureProps) => {
   const Container = svg ? TargetSvgContainer : TargetContainer;
@@ -119,6 +125,11 @@ const WithTooltipPure = ({
     }
   );
 
+  const portalTarget: Element =
+    (typeof portalContainer === 'string'
+      ? document.querySelector(portalContainer)
+      : portalContainer) || document.body;
+
   const tooltipComponent = isVisible ? (
     <Tooltip
       placement={state?.placement}
@@ -138,7 +149,7 @@ const WithTooltipPure = ({
       <Container trigger={trigger} ref={setTriggerRef as any} {...(props as any)}>
         {children}
       </Container>
-      {isVisible && ReactDOM.createPortal(tooltipComponent, document.body)}
+      {isVisible && ReactDOM.createPortal(tooltipComponent, portalTarget)}
     </>
   );
 };