GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into test-polish

Browse Source
This commit is contained in:
Gert Hengeveld 2025-03-12 17:25:26 +01:00
commit 82bd173418
602 changed files with 7283 additions and 1883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.circleci/config.yml
View File

@ -878,10 +878,11 @@ workflows:
parallelism: 4
requires:
- create-sandboxes
- bench-sandboxes:
parallelism: 5
requires:
- create-sandboxes
# TODO: don't forget to reenable this
# - bench-sandboxes:
# parallelism: 5
# requires:
# - create-sandboxes
- test-ui-testing-module:
requires:
- build
@ -965,10 +966,11 @@ workflows:
- test-init-features:
requires:
- build
- bench-sandboxes:
parallelism: 5
requires:
- create-sandboxes
# TODO: don't forget to reenable this
# - bench-sandboxes:
# parallelism: 5
# requires:
# - create-sandboxes
# TODO: reenable once we find out the source of flakyness
# - test-runner-dev:
# parallelism: 4
@ -1059,10 +1061,11 @@ workflows:
# --smoke-test is not supported for the angular builder right now
# - "angular-cli"
- "lit-vite-ts"
- bench-sandboxes:
parallelism: 5
requires:
- create-sandboxes
# TODO: don't forget to reenable this
# - bench-sandboxes:
# parallelism: 5
# requires:
# - create-sandboxes
# TODO: reenable once we find out the source of flakyness
# - test-runner-dev:

7
CHANGELOG.md
View File

@ -1,3 +1,8 @@
## 8.6.4
- Manager: Add Content-Type to fix Cloud IDEs - [#30606](https://github.com/storybookjs/storybook/pull/30606), thanks @GCHQDeveloper548!
- Vite: Include `node_modules` in stats file - [#30711](https://github.com/storybookjs/storybook/pull/30711), thanks @JReinhold!
## 8.6.3
- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen!
@ -37,7 +42,6 @@ Here’s what’s new:
- Addon-Test: Add telemetry data for Focused Tests - [#30568](https://github.com/storybookjs/storybook/pull/30568), thanks @JReinhold!
- Addon-Test: Fix config and watch mode inconsistencies - [#30491](https://github.com/storybookjs/storybook/pull/30491), thanks @JReinhold!
- Addon-Test: Fix console error in build mode - [#30625](https://github.com/storybookjs/storybook/pull/30625), thanks @JReinhold!
- Addon Test: Fix printing Date object in MethodCall for test/interactions log - [#30507](https://github.com/storybookjs/storybook/pull/30507), thanks @ghengeveld!
- Addon-Test: Make sure that only one global portable story config is ever loaded - [#30582](https://github.com/storybookjs/storybook/pull/30582), thanks @kasperpeulen!
- Angular: Fix accent character issue - [#30276](https://github.com/storybookjs/storybook/pull/30276), thanks @valentinpalkovic!
- Angular: Support experimental zoneless mode - [#28657](https://github.com/storybookjs/storybook/pull/28657), thanks @anedomansky!
@ -46,7 +50,6 @@ Here’s what’s new:
- Builder-Vite: Fix runtime and iframe 404 on first load - [#30567](https://github.com/storybookjs/storybook/pull/30567), thanks @valentinpalkovic!
- Bun: Add support for text lock file - [#30160](https://github.com/storybookjs/storybook/pull/30160), thanks @Arctomachine!
- Cleanup: Remove unused constants in viewport addon - [#30479](https://github.com/storybookjs/storybook/pull/30479), thanks @Guria!
- CLI: Add "features" question & auto-install test addon & improve test-addon compatibility - [#30202](https://github.com/storybookjs/storybook/pull/30202), thanks @ndelangen!
- CLI: Don't initially select Documentation and Testing features - [#30599](https://github.com/storybookjs/storybook/pull/30599), thanks @ghengeveld!
- CLI: Fix peer dep issues for npm users during upgrade - [#30616](https://github.com/storybookjs/storybook/pull/30616), thanks @valentinpalkovic!
- CLI: Fix printing of selected features - [#30605](https://github.com/storybookjs/storybook/pull/30605), thanks @ghengeveld!

43
CHANGELOG.prerelease.md
View File

@ -1,3 +1,46 @@
## 9.0.0-alpha.3
- Addon A11y: Promote @storybook/global to full dependency - [#30723](https://github.com/storybookjs/storybook/pull/30723), thanks @mrginglymus!
- Addon Test: Improve unhandled error messages - [#30755](https://github.com/storybookjs/storybook/pull/30755), thanks @yannbf!
- Angular: Add @angular-devkit/build-angular to default installed pacakages in angular - [#30790](https://github.com/storybookjs/storybook/pull/30790), thanks @kasperpeulen!
- Automigrate: Disable `missingStorybookDependencies` for 9.0 - [#30769](https://github.com/storybookjs/storybook/pull/30769), thanks @ndelangen!
- CLI: Fix test install in RNW projects - [#30786](https://github.com/storybookjs/storybook/pull/30786), thanks @shilman!
- Core: Re-Export renderers from frameworks - [#30771](https://github.com/storybookjs/storybook/pull/30771), thanks @ndelangen!
- Core: Replace 'min' instead of 'm' in printDuration - [#30668](https://github.com/storybookjs/storybook/pull/30668), thanks @wlewis-formative!
- Migration: Add auto-automigration for merged packages - [#30753](https://github.com/storybookjs/storybook/pull/30753), thanks @ndelangen!
- Next.js: Upgrade image-size to 2.0 - [#30741](https://github.com/storybookjs/storybook/pull/30741), thanks @valentinpalkovic!
- Next.js: Use latest version when init in empty directory - [#30659](https://github.com/storybookjs/storybook/pull/30659), thanks @valentinpalkovic!
- Svelte: Fix Vite crashing on virtual module imports - [#26838](https://github.com/storybookjs/storybook/pull/26838), thanks @rChaoz!
- Svelte: Fix automatic argTypes inference coming up empty with `svelte2tsx@0.7.35` - [#30784](https://github.com/storybookjs/storybook/pull/30784), thanks @JReinhold!
- Svelte: Pin svelte2tsx to solve argType regression - [#30783](https://github.com/storybookjs/storybook/pull/30783), thanks @kasperpeulen!
- Test: Move `@storybook/test` into `storybook/test` - [#30742](https://github.com/storybookjs/storybook/pull/30742), thanks @valentinpalkovic!
- Universal Store: Don't use `crypto.randomUUID` - [#30781](https://github.com/storybookjs/storybook/pull/30781), thanks @JReinhold!
## 9.0.0-alpha.2
- AutoBlocker: Add major version upgrade blocker - [#30714](https://github.com/storybookjs/storybook/pull/30714), thanks @ndelangen!
- CLI: Add index command / API - [#30071](https://github.com/storybookjs/storybook/pull/30071), thanks @shilman!
- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen!
- Core: Move @storybook/instrumenter into core - [#30740](https://github.com/storybookjs/storybook/pull/30740), thanks @valentinpalkovic!
- Core: Support TS3.8+ again - [#30700](https://github.com/storybookjs/storybook/pull/30700), thanks @kasperpeulen!
- Maintenance: Merge `@storybook/core` with `storybook` - [#30168](https://github.com/storybookjs/storybook/pull/30168), thanks @ndelangen!
- Maintenance: Remove deprecated packages - [#30690](https://github.com/storybookjs/storybook/pull/30690), thanks @ndelangen!
- Manager: Add Content-Type to prevent reliance on content type sniffing, fixing Cloud IDEs - [#30606](https://github.com/storybookjs/storybook/pull/30606), thanks @GCHQDeveloper548!
- Next: Support Next 15.2 - [#30702](https://github.com/storybookjs/storybook/pull/30702), thanks @kasperpeulen!
- React: Export returntype of ReactMeta#story - [#30580](https://github.com/storybookjs/storybook/pull/30580), thanks @mrginglymus!
- Revert "CLI: Don't initially select Documentation and Testing features" - [#30694](https://github.com/storybookjs/storybook/pull/30694), thanks @shilman!
- Test Addon: Stabilize and remove experimental status - [#30727](https://github.com/storybookjs/storybook/pull/30727), thanks @valentinpalkovic!
- Typescript: Drop Typescript < 4.9 support - [#30736](https://github.com/storybookjs/storybook/pull/30736), thanks @valentinpalkovic!
- Vite: Improve handling of preview annotations - [#28798](https://github.com/storybookjs/storybook/pull/28798), thanks @tobiasdiez!
- Vite: Include `node_modules` in stats file - [#30711](https://github.com/storybookjs/storybook/pull/30711), thanks @JReinhold!
## 9.0.0-alpha.1
- CLI: Install prereleases of `@chromatic-com/storybook` - [#30662](https://github.com/storybookjs/storybook/pull/30662), thanks @JReinhold!
- CSF: Only export definePreview from the framework - [#30676](https://github.com/storybookjs/storybook/pull/30676), thanks @kasperpeulen!
- Codemod: Only remove types when they are unused - [#30644](https://github.com/storybookjs/storybook/pull/30644), thanks @yannbf!
- Dependencies: Upgrades - [#30515](https://github.com/storybookjs/storybook/pull/30515), thanks @ndelangen!
## 9.0.0-alpha.0
## 8.6.0-beta.10

40
MIGRATION.md
View File

@ -1,6 +1,7 @@
<h1>Migration</h1>
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
- [Dropped support for legacy packages](#dropped-support-for-legacy-packages)
- [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
- [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
- [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
@ -436,6 +437,45 @@
## From version 8.x to 9.0.0
### Dropped support for legacy packages
The following packages are no longer published as part of `9.0.0`:
The following packages have been consolidated into the main `storybook` package:
| Old Package | New Path |
| ---------------------- | ------------------------------ |
| @storybook/manager-api | storybook/manager-api |
| @storybook/preview-api | storybook/preview-api |
| @storybook/theming | storybook/theming |
| @storybook/test | storybook/test |
Please un-install these packages, and ensure you have the `storybook` package installed.
Replace any imports with the path listed in the second column.
Additionally the following packages were also consolidated and placed under a `/internal` sub-path, to indicate they are for internal usage only.
If you're depending on these packages, they will continue to work for `9.0`, but they will likely be removed in `10.0`.
| Old Package | New Path |
| -------------------------- | ---------------------------------- |
| @storybook/channels | storybook/internal/channels |
| @storybook/client-logger | storybook/internal/client-logger |
| @storybook/core-common | storybook/internal/common |
| @storybook/core-events | storybook/internal/core-events |
| @storybook/csf-tools | storybook/internal/csf-tools |
| @storybook/docs-tools | storybook/internal/docs-tools |
| @storybook/node-logger | storybook/internal/node-logger |
| @storybook/router | storybook/internal/router |
| @storybook/telemetry | storybook/internal/telemetry |
| @storybook/types | storybook/internal/types |
| @storybook/manager | storybook/internal/manager |
| @storybook/preview | storybook/internal/preview |
| @storybook/core-server | storybook/internal/core-server |
| @storybook/builder-manager | storybook/internal/builder-manager |
| @storybook/components | storybook/internal/components |
Addon authors may continue to use the internal packages, there is currently not yet any replacement.
### Dropped support for TypeScript < 4.9
Storybook now requires TypeScript 4.9 or later. If you're using an older version of TypeScript, you'll need to upgrade to continue using Storybook.

2
code/.storybook/bench.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import type { Meta } from '@storybook/react';
import type { Meta } from '@storybook/react-vite';
// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
const allMetafiles = import.meta.glob([

2
code/.storybook/preview.tsx
View File

@ -16,8 +16,8 @@ import {
import { DocsContext } from '@storybook/blocks';
import { global } from '@storybook/global';
import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
import type { Decorator, Loader, ReactRenderer } from '@storybook/react-vite';
// TODO add empty preview
// import * as storysource from '@storybook/addon-storysource';
// import * as designs from '@storybook/addon-designs/preview';

3
code/.storybook/storybook.setup.ts
View File

@ -1,7 +1,8 @@
import { beforeAll, vi, expect as vitestExpect } from 'vitest';
import { setProjectAnnotations } from '@storybook/react';
import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
import { userEvent as storybookEvent, expect as storybookExpect } from 'storybook/test';
import preview from './preview';

18
code/.storybook/vitest.config.ts
View File

@ -1,5 +1,7 @@
import { defaultExclude, defineProject, mergeConfig } from 'vitest/config';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
import Inspect from 'vite-plugin-inspect';
import { vitestCommonConfig } from '../vitest.workspace';
@ -22,14 +24,12 @@ export default mergeConfig(
// @ts-expect-error added this because of testNamePattern below
defineProject({
plugins: [
import('@storybook/addon-test/vitest-plugin').then(({ storybookTest }) =>
storybookTest({
configDir: __dirname,
tags: {
include: ['vitest'],
},
})
),
storybookTest({
configDir: __dirname,
tags: {
include: ['vitest'],
},
}),
...extraPlugins,
],
test: {
@ -40,7 +40,7 @@ export default mergeConfig(
'**/__mockdata__/**',
'../**/__mockdata__/**',
'**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
'**/lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
'../lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
],
// TODO: bring this back once portable stories support storybook/internal/preview-api hooks
// @ts-expect-error this type does not exist but the property does!

5
code/addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -67,11 +67,10 @@
},
"dependencies": {
"@storybook/addon-highlight": "workspace:*",
"@storybook/test": "workspace:*",
"@storybook/global": "^5.0.0",
"axe-core": "^4.2.0"
},
"devDependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.4.0",
"@testing-library/react": "^14.0.0",
"execa": "^9.5.2",

4
code/addons/a11y/src/components/A11YPanel.stories.tsx
View File

@ -3,10 +3,10 @@ import React from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import type axe from 'axe-core';
import { fn } from 'storybook/test';
import { A11YPanel } from './A11YPanel';
import { A11yContext } from './A11yContext';

5
code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx
View File

@ -2,8 +2,9 @@ import React from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';

4
code/addons/a11y/src/preview.tsx
View File

@ -1,6 +1,6 @@
import type { AfterEach } from 'storybook/internal/types';
import { expect } from '@storybook/test';
import { expect } from 'storybook/test';
import { run } from './a11yRunner';
import type { A11yParameters } from './params';
@ -64,7 +64,7 @@ export const experimental_afterEach: AfterEach<any> = async ({
vitestMatchersExtended = true;
}
// @ts-expect-error - todo - fix type extension of expect from @storybook/test
// @ts-expect-error - todo - fix type extension of expect from storybook/test
expect(result).toHaveNoViolations();
}
}

3
code/addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@ -74,7 +74,6 @@
"uuid": "^9.0.0"
},
"devDependencies": {
"@storybook/test": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-inspector": "^6.0.0",

3
code/addons/actions/src/loaders.ts
View File

@ -2,7 +2,8 @@
import type { LoaderFunction } from 'storybook/internal/types';
import { global } from '@storybook/global';
import type { onMockCall as onMockCallType } from '@storybook/test';
import type { onMockCall as onMockCallType } from 'storybook/test';
import { action } from './runtime';

3
code/addons/actions/template/stories/spies.stories.ts
View File

@ -1,5 +1,6 @@
import { global as globalThis } from '@storybook/global';
import { spyOn } from '@storybook/test';
import { spyOn } from 'storybook/test';
const meta = {
component: globalThis.Components.Button,

2
code/addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",

2
code/addons/controls/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",

5
code/addons/controls/src/SaveStory.stories.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fireEvent, fn, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { action } from '@storybook/addon-actions';
import { expect, fireEvent, fn, userEvent, within } from 'storybook/test';
import { SaveStory } from './SaveStory';
const meta = {

2
code/addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",

2
code/addons/docs/template/stories/docs2/resolved-react.stories.ts vendored
View File

@ -2,7 +2,7 @@ import * as ReactExport from 'react';
import * as ReactDom from 'react-dom';
import * as ReactDomServer from 'react-dom/server';
import { expect, within } from '@storybook/test';
import { expect, within } from 'storybook/test';
/**
* This component is used to display the resolved version of React and its related packages. As long

2
code/addons/docs/template/stories/docspage/autoplay.stories.ts vendored
View File

@ -1,4 +1,4 @@
import { expect, within } from '@storybook/test';
import { expect, within } from 'storybook/test';
export default {
component: globalThis.Components.Pre,

2
code/addons/docs/template/stories/docspage/basic.stories.ts vendored
View File

@ -1,4 +1,4 @@
import { fn } from '@storybook/test';
import { fn } from 'storybook/test';
export default {
component: globalThis.Components.Button,

2
code/addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",

2
code/addons/gfm/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",

2
code/addons/highlight/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",

6
code/addons/interactions/README.md
View File

@ -9,7 +9,7 @@ Storybook Addon Interactions enables visual debugging of interactions and tests
Install this addon by adding the `@storybook/addon-interactions` dependency:
```sh
yarn add -D @storybook/addon-interactions @storybook/test
yarn add -D @storybook/addon-interactions
```
within `.storybook/main.js`:
@ -24,10 +24,10 @@ Note that `@storybook/addon-interactions` must be listed **after** `@storybook/a
## Usage
Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `@storybook/test` instead of their original package. You can then use these libraries in your `play` function.
Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `storybook/test` instead of their original package. You can then use these libraries in your `play` function.
```js
import { expect, fn, userEvent, within } from '@storybook/test';
import { expect, fn, userEvent, within } from 'storybook/test';
import { Button } from './Button';
export default {

3
code/addons/interactions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
@ -63,7 +63,6 @@
},
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/test": "workspace:*",
"polished": "^4.2.2",
"ts-dedent": "^2.2.0"
},

5
code/addons/interactions/src/components/Interaction.stories.tsx
View File

@ -1,7 +1,8 @@
import { CallStates } from 'storybook/internal/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, userEvent, within } from 'storybook/test';
import { getCalls } from '../mocks';
import { Interaction } from './Interaction';

5
code/addons/interactions/src/components/InteractionsPanel.stories.tsx
View File

@ -3,8 +3,9 @@ import React from 'react';
import { CallStates } from 'storybook/internal/instrumenter';
import { styled } from 'storybook/internal/theming';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, waitFor, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, userEvent, waitFor, within } from 'storybook/test';
import { isChromatic } from '../../../../.storybook/isChromatic';
import { getCalls, getInteractions } from '../mocks';

2
code/addons/interactions/src/preview.ts
View File

@ -3,7 +3,7 @@ import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storyboo
// This makes sure that storybook test loaders are always loaded when addon-interactions is used
// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
import '@storybook/test';
import 'storybook/test';
import type { InteractionsParameters } from './types';

3
code/addons/interactions/template/stories/basics.stories.ts
View File

@ -1,4 +1,5 @@
import { global as globalThis } from '@storybook/global';
import {
expect,
fireEvent,
@ -7,7 +8,7 @@ import {
waitFor,
waitForElementToBeRemoved,
within,
} from '@storybook/test';
} from 'storybook/test';
export default {
component: globalThis.Components.Form,

3
code/addons/interactions/template/stories/unhandled-errors.stories.ts
View File

@ -1,5 +1,6 @@
import { global as globalThis } from '@storybook/global';
import { userEvent, within } from '@storybook/test';
import { userEvent, within } from 'storybook/test';
export default {
component: globalThis.Components.Button,

2
code/addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",

2
code/addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"storybook-addons",

2
code/addons/measure/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",

3
code/addons/onboarding/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-onboarding",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
"keywords": [
"storybook-addons",
@ -48,7 +48,6 @@
"@neoconfetti/react": "^1.0.0",
"@radix-ui/react-dialog": "^1.0.5",
"@storybook/icons": "^1.4.0",
"@storybook/react": "workspace:*",
"framer-motion": "^11.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",

2
code/addons/onboarding/src/components/Button/Button.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button } from './Button';

2
code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Confetti } from './Confetti';

5
code/addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, waitFor, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, waitFor, within } from 'storybook/test';
import { HighlightElement } from './HighlightElement';

5
code/addons/onboarding/src/components/List/List.stories.tsx
View File

@ -1,7 +1,8 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, waitFor, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, userEvent, waitFor, within } from 'storybook/test';
import { List } from './List';
import { ListItem } from './ListItem/ListItem';

5
code/addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx
View File

@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { GuidedTour } from './GuidedTour';

2
code/addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { SplashScreen } from './SplashScreen';

2
code/addons/outline/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",

2
code/addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",

9
code/addons/test/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-test",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Storybook addon for testing components",
"keywords": [
"storybook-addons",
@ -100,7 +100,6 @@
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.4.0",
"@storybook/test": "workspace:*",
"polished": "^4.2.2",
"prompts": "^2.4.0",
"ts-dedent": "^2.2.0"
@ -110,8 +109,8 @@
"@types/istanbul-lib-report": "^3.0.3",
"@types/node": "^22.0.0",
"@types/semver": "^7",
"@vitest/browser": "^3.0.2",
"@vitest/runner": "^3.0.2",
"@vitest/browser": "^3.0.8",
"@vitest/runner": "^3.0.8",
"ansi-to-html": "^0.7.2",
"boxen": "^8.0.1",
"es-toolkit": "^1.22.0",
@ -131,7 +130,7 @@
"tree-kill": "^1.2.2",
"ts-dedent": "^2.2.0",
"typescript": "^5.7.3",
"vitest": "^3.0.2"
"vitest": "^3.0.8"
},
"peerDependencies": {
"@vitest/browser": "^2.1.1 || ^3.0.0",

4
code/addons/test/src/components/GlobalErrorModal.stories.tsx
View File

@ -2,9 +2,9 @@ import React, { useState } from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, fn, userEvent, within } from 'storybook/test';
import dedent from 'ts-dedent';
import { GlobalErrorContext, GlobalErrorModal } from './GlobalErrorModal';

5
code/addons/test/src/components/Interaction.stories.tsx
View File

@ -1,7 +1,8 @@
import { CallStates } from 'storybook/internal/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, userEvent, within } from 'storybook/test';
import { getCalls } from '../mocks';
import { Interaction } from './Interaction';

5
code/addons/test/src/components/InteractionsPanel.stories.tsx
View File

@ -4,8 +4,9 @@ import { CallStates } from 'storybook/internal/instrumenter';
import { ManagerContext } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
import { isChromatic } from '../../../../.storybook/isChromatic';
import { getCalls, getInteractions } from '../mocks';

2
code/addons/test/src/components/RelativeTime.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { RelativeTime } from './RelativeTime';

5
code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx
View File

@ -3,8 +3,9 @@ import React from 'react';
import { CallStates } from 'storybook/internal/instrumenter';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';

5
code/addons/test/src/components/TestProviderRender.stories.tsx
View File

@ -5,8 +5,9 @@ import { ManagerContext, addons } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import { Addon_TypesEnum } from 'storybook/internal/types';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, fn, userEvent } from 'storybook/test';
import { ADDON_ID as A11Y_ADDON_ID } from '../../../a11y/src/constants';
import { type Details, storeOptions } from '../constants';

2
code/addons/test/src/components/TestStatusIcon.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TestStatusIcon } from './TestStatusIcon';

9
code/addons/test/src/index.ts
View File

@ -1,16 +1,7 @@
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
import type { storybookTest as storybookTestImport } from './vitest-plugin';
export default () => definePreview(addonAnnotations);
export type { TestParameters } from './types';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-error - this is a hack to make the module's sub-path augmentable
declare module '@storybook/addon-test/vitest-plugin' {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-error - this is a hack to make the module's sub-path augmentable
export const storybookTest: typeof storybookTestImport;
}

2
code/addons/test/src/manager-store.mock.ts
View File

@ -1,6 +1,6 @@
import { experimental_MockUniversalStore } from 'storybook/internal/manager-api';
import * as testUtils from '@storybook/test';
import * as testUtils from 'storybook/test';
import { storeOptions } from './constants';

41
code/addons/test/src/node/reporter.ts
View File

@ -13,6 +13,7 @@ import type { API_StatusUpdate } from 'storybook/internal/types';
import type { Suite } from '@vitest/runner';
import { throttle } from 'es-toolkit';
import { satisfies } from 'semver';
import { dedent } from 'ts-dedent';
import { TEST_PROVIDER_ID } from '../constants';
import type { TestManager } from './test-manager';
@ -60,6 +61,36 @@ const isVitest3OrLater = vitestVersion
? satisfies(vitestVersion, '>=3.0.0-beta.3', { includePrerelease: true })
: false;
interface VitestError extends Error {
VITEST_TEST_PATH?: string;
VITEST_TEST_NAME?: string;
}
const getErrorOrigin = (error: VitestError): string => {
const parts: string[] = [];
if (error.VITEST_TEST_PATH) {
parts.push(
dedent`
\nThis error originated in "${error.VITEST_TEST_PATH}". It doesn't mean the error was thrown inside the file itself, but while it was running.
`
);
}
if (error.VITEST_TEST_NAME) {
parts.push(
dedent`
The latest test that might've caused the error is "${error.VITEST_TEST_NAME}".
It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
`
);
}
return parts.join('\n');
};
export class StorybookReporter implements Reporter {
testStatusData: API_StatusUpdate = {};
@ -219,6 +250,14 @@ export class StorybookReporter implements Reporter {
async onFinished() {
const unhandledErrors = this.ctx.state.getUnhandledErrors();
unhandledErrors.forEach((e: unknown) => {
const error = e as VitestError;
const origin = getErrorOrigin(error);
if (origin) {
error.message = `${error.message}\n${origin}`;
error.stack = `${error.stack}\n${origin}`;
}
});
const isCancelled = isVitest3OrLater
? this.testManager.vitestManager.isCancelling
@ -256,7 +295,7 @@ export class StorybookReporter implements Reporter {
name: `${unhandledErrors.length} unhandled error${unhandledErrors?.length > 1 ? 's' : ''}`,
message: unhandledErrors
.map((e, index) => `[${index}]: ${(e as any).stack || (e as any).message}`)
.join('\n----------\n'),
.join('\n\n----------\n\n'),
};
this.sendReport({

2
code/addons/test/src/preview.ts
View File

@ -3,7 +3,7 @@ import type { PlayFunction, StepLabel, StoryContext } from 'storybook/internal/t
// This makes sure that storybook test loaders are always loaded when addon-interactions is used
// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
import '@storybook/test';
import 'storybook/test';
export const { step: runStep } = instrument(
{

3
code/addons/test/template/stories/basics.stories.ts
View File

@ -1,4 +1,5 @@
import { global as globalThis } from '@storybook/global';
import {
expect,
fireEvent,
@ -7,7 +8,7 @@ import {
waitFor,
waitForElementToBeRemoved,
within,
} from '@storybook/test';
} from 'storybook/test';
export default {
component: globalThis.Components.Form,

3
code/addons/test/template/stories/unhandled-errors.stories.ts
View File

@ -1,5 +1,6 @@
import { global as globalThis } from '@storybook/global';
import { userEvent, within } from '@storybook/test';
import { userEvent, within } from 'storybook/test';
export default {
component: globalThis.Components.Button,

2
code/addons/themes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-themes",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Switch between multiple themes for you components in Storybook",
"keywords": [
"css",

2
code/addons/toolbars/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",

2
code/addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",

3
code/addons/viewport/template/stories/parameters.stories.ts
View File

@ -1,8 +1,9 @@
import { global as globalThis } from '@storybook/global';
import { expect } from '@storybook/test';
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
import { expect } from 'storybook/test';
// these stories only work with `viewportStoryGlobals` set to false
// because the `default` prop is dropped and because, `values` changed to `options` and is now an object

2
code/builders/builder-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/builder-vite",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "A plugin to run and build Storybooks with Vite",
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
"bugs": {

4
code/builders/builder-vite/src/optimizeDeps.ts
View File

@ -9,10 +9,12 @@ import { listStories } from './list-stories';
// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart
// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens
const INCLUDE_CANDIDATES = [
'@ampproject/remapping',
'@base2/pretty-print-object',
'@emotion/core',
'@emotion/is-prop-valid',
'@emotion/styled',
'@jridgewell/sourcemap-codec',
'@storybook/addon-a11y/preview',
'@storybook/addon-backgrounds/preview',
'@storybook/addon-designs/blocks',
@ -62,7 +64,9 @@ const INCLUDE_CANDIDATES = [
'acorn',
'airbnb-js-shims',
'ansi-to-html',
'aria-query',
'axe-core',
'axobject-query',
'chromatic/isChromatic',
'color-convert',
'deep-object-diff',

2
code/builders/builder-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/builder-webpack5",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"

2
code/builders/builder-webpack5/src/index.ts
View File

@ -29,7 +29,7 @@ export const printDuration = (startTime: [number, number]) =>
prettyTime(process.hrtime(startTime))
.replace(' ms', ' milliseconds')
.replace(' s', ' seconds')
.replace(' m', ' minutes');
.replace(' min', ' minutes');
const corePath = dirname(require.resolve('storybook/package.json'));

25
code/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "storybook",
"version": "9.0.0-alpha.0",
"version": "9.0.0-alpha.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@ -21,6 +21,12 @@
"license": "MIT",
"sideEffects": false,
"type": "module",
"imports": {
"#utils": {
"storybook": "./template/stories/utils.mock.ts",
"default": "./template/stories/utils.ts"
}
},
"exports": {
".": {
"types": "./dist/index.d.ts",
@ -181,6 +187,11 @@
"import": "./dist/instrumenter/index.js",
"require": "./dist/instrumenter/index.cjs"
},
"./test": {
"types": "./dist/test/index.d.ts",
"import": "./dist/test/index.js",
"require": "./dist/test/index.cjs"
},
"./internal/preview/runtime": {
"import": "./dist/preview/runtime.js"
},
@ -280,6 +291,9 @@
],
"internal/instrumenter": [
"./dist/instrumenter/index.d.ts"
],
"test": [
"./dist/test/index.d.ts"
]
}
},
@ -295,6 +309,11 @@
"prep": "jiti ./scripts/prep.ts"
},
"dependencies": {
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/user-event": "14.5.2",
"@vitest/expect": "2.0.5",
"@vitest/spy": "2.0.5",
"better-opn": "^3.0.2",
"browser-assert": "^1.2.1",
"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
@ -358,7 +377,9 @@
"babel-plugin-react-docgen": "4.2.1",
"boxen": "^7.1.1",
"browser-dtector": "^3.4.0",
"bundle-require": "^5.1.0",
"camelcase": "^8.0.0",
"chai": "^5.1.1",
"cli-table3": "^0.6.1",
"commander": "^12.1.0",
"comment-parser": "^1.4.1",
@ -423,7 +444,7 @@
"strip-json-comments": "^5.0.1",
"telejson": "^7.2.0",
"tiny-invariant": "^1.3.1",
"tinyspy": "^2.2.0",
"tinyspy": "^3.0.2",
"ts-dedent": "^2.0.0",
"tsconfig-paths": "^4.2.0",
"type-fest": "^4.18.1",

17
code/core/scripts/entries.ts
View File

@ -50,6 +50,23 @@ export const getEntries = (cwd: string) => {
define('src/bin/index.ts', ['node'], false),
define('src/instrumenter/index.ts', ['browser', 'node'], true),
define(
'src/test/index.ts',
['browser', 'node'],
true,
['util'],
[],
[
'@testing-library/dom',
'@testing-library/jest-dom',
'@testing-library/user-event',
'chai',
'@vitest/expect',
'@vitest/spy',
'@vitest/utils',
],
true
),
];
};

4
code/core/scripts/helpers/generatePackageJsonFile.ts
View File

@ -40,7 +40,7 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
main
.replace(/\/index\.tsx?/, '')
.replace(/\.tsx?/, '')
.replace('dist/', 'internal/')
.replace('dist/', entry.isPublic ? '' : 'internal/')
] = content;
return acc;
}, {});
@ -73,7 +73,7 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
}
const content = ['./' + main.replace(/\.tsx?/, '.d.ts')];
acc[key.replace('dist/', 'internal/')] = content;
acc[key.replace('dist/', entry.isPublic ? '' : 'internal/')] = content;
return acc;
}, {}),
},

3
code/core/scripts/helpers/sourcefiles.ts
View File

@ -83,7 +83,8 @@ async function generateFrameworksFile(prettierConfig: prettier.Options | null):
const localAlias = {
'@storybook/core': join(__dirname, '..', '..', 'src'),
'storybook/internal': join(__dirname, '..', '..', 'src'),
storybook: join(__dirname, '..', '..', 'src'),
'storybook/test': join(__dirname, '..', '..', 'src'),
storybook: join(__dirname, '..', '..', 'src', 'test'),
};
async function generateExportsFile(prettierConfig: prettier.Options | null): Promise<void> {
function removeDefault(input: string) {

21
code/core/scripts/no-externals-plugin.ts Normal file
View File

@ -0,0 +1,21 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { match } from 'bundle-require';
import type { Plugin } from 'esbuild';
// Must not start with "/" or "./" or "../" or "C:\" or be the exact strings ".." or "."
const NON_NODE_MODULE_RE = /^[A-Z]:[/\\]|^\.{0,2}\/|^\.{1,2}$/;
export const externalPlugin = ({ noExternal }: { noExternal?: (string | RegExp)[] }): Plugin => {
return {
name: `external`,
setup(build) {
build.onResolve({ filter: /.*/ }, (args) => {
// Respect explicit external/noExternal conditions
if (match(args.path, noExternal)) {
return undefined;
}
});
},
};
};

22
code/core/scripts/prep.ts
View File

@ -25,6 +25,7 @@ import { generateTypesMapperFiles } from './helpers/generateTypesMapperFiles';
import { isBrowser, isNode, noExternals } from './helpers/isEntryType';
import { modifyThemeTypes } from './helpers/modifyThemeTypes';
import { generateSourceFiles } from './helpers/sourcefiles';
import { externalPlugin } from './no-externals-plugin';
async function run() {
const flags = process.argv.slice(2);
@ -253,9 +254,14 @@ async function run() {
entryPoints: [entry.file],
external: [
...nodeInternals,
...esbuildDefaultOptions.external,
...esbuildDefaultOptions.external.filter((e) => !entry.noExternal.includes(e)),
...entry.externals,
].filter((e) => !entry.internals.includes(e)),
plugins: [
externalPlugin({
noExternal: entry.noExternal,
}),
],
format: 'cjs',
outdir: dirname(entry.file).replace('src', 'dist'),
outExtension: {
@ -272,10 +278,15 @@ async function run() {
entryPoints: [entry.file],
external: [
...nodeInternals,
...esbuildDefaultOptions.external,
...esbuildDefaultOptions.external.filter((e) => !entry.noExternal.includes(e)),
...entry.externals,
].filter((e) => !entry.internals.includes(e)),
outdir: dirname(entry.file).replace('src', 'dist'),
plugins: [
externalPlugin({
noExternal: entry.noExternal,
}),
],
outExtension: {
'.js': '.js',
},
@ -289,9 +300,14 @@ async function run() {
entryPoints: [entry.file],
external: [
...nodeInternals,
...esbuildDefaultOptions.external,
...esbuildDefaultOptions.external.filter((e) => !entry.noExternal.includes(e)),
...entry.externals,
].filter((e) => !entry.internals.includes(e)),
plugins: [
externalPlugin({
noExternal: entry.noExternal,
}),
],
format: 'esm',
outdir: dirname(entry.file).replace('src', 'dist'),
outExtension: {

8
code/core/src/cli/helpers.test.ts
View File

@ -158,7 +158,7 @@ describe('Helpers', () => {
filePath === normalizePath('@storybook/react/template/cli')
);
await helpers.copyTemplateFiles({
renderer: 'react',
templateLocation: 'react',
language,
packageManager: packageManagerMock,
commonAssetsDir: normalizePath('create-storybook/rendererAssets/common'),
@ -182,7 +182,7 @@ describe('Helpers', () => {
return filePath === normalizePath('@storybook/react/template/cli') || filePath === './src';
});
await helpers.copyTemplateFiles({
renderer: 'react',
templateLocation: 'react',
language: SupportedLanguage.JAVASCRIPT,
packageManager: packageManagerMock,
features: ['dev', 'docs', 'test'],
@ -195,7 +195,7 @@ describe('Helpers', () => {
return filePath === normalizePath('@storybook/react/template/cli');
});
await helpers.copyTemplateFiles({
renderer: 'react',
templateLocation: 'react',
language: SupportedLanguage.JAVASCRIPT,
packageManager: packageManagerMock,
features: ['dev', 'docs', 'test'],
@ -208,7 +208,7 @@ describe('Helpers', () => {
const expectedMessage = `Unsupported renderer: ${renderer}`;
await expect(
helpers.copyTemplateFiles({
renderer,
templateLocation: renderer,
language: SupportedLanguage.JAVASCRIPT,
packageManager: packageManagerMock,
features: ['dev', 'docs', 'test'],

12
code/core/src/cli/helpers.ts
View File

@ -135,7 +135,7 @@ export function copyTemplate(templateRoot: string, destination = '.') {
type CopyTemplateFilesOptions = {
packageManager: JsPackageManager;
renderer: SupportedFrameworks | SupportedRenderers;
templateLocation: SupportedFrameworks | SupportedRenderers;
language: SupportedLanguage;
commonAssetsDir?: string;
destination?: string;
@ -205,7 +205,7 @@ export const cliStoriesTargetPath = async () => {
export async function copyTemplateFiles({
packageManager,
renderer,
templateLocation,
language,
destination,
commonAssetsDir,
@ -218,7 +218,7 @@ export async function copyTemplateFiles({
[SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9',
};
// FIXME: remove after 9.0
if (renderer === 'svelte') {
if (templateLocation === 'svelte') {
const svelteVersion = await getVersionSafe(packageManager, 'svelte');
if (svelteVersion && major(svelteVersion) >= 5) {
languageFolderMapping = {
@ -230,7 +230,7 @@ export async function copyTemplateFiles({
}
}
const templatePath = async () => {
const baseDir = await getRendererDir(packageManager, renderer);
const baseDir = await getRendererDir(packageManager, templateLocation);
const assetsDir = join(baseDir, 'template', 'cli');
const assetsLanguage = join(assetsDir, languageFolderMapping[language]);
@ -253,7 +253,7 @@ export async function copyTemplateFiles({
if (existsSync(assetsDir)) {
return assetsDir;
}
throw new Error(`Unsupported renderer: ${renderer} (${baseDir})`);
throw new Error(`Unsupported renderer: ${templateLocation} (${baseDir})`);
};
const destinationPath = destination ?? (await cliStoriesTargetPath());
@ -264,7 +264,7 @@ export async function copyTemplateFiles({
await cp(await templatePath(), destinationPath, { recursive: true, filter });
if (commonAssetsDir && features.includes('docs')) {
let rendererType = frameworkToRenderer[renderer] || 'react';
let rendererType = frameworkToRenderer[templateLocation] || 'react';
// This is only used for docs links and the docs site uses `vue` for both `vue` & `vue3` renderers
if (rendererType === 'vue3') {

2
code/core/src/common/index.ts
View File

@ -47,4 +47,4 @@ export * from './js-package-manager';
export { versions };
export { createFileSystemCache } from './utils/file-cache';
export { createFileSystemCache, FileSystemCache } from './utils/file-cache';

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

@ -43,12 +43,12 @@ describe('JsPackageManager', () => {
expect(result).toEqual(['@storybook/react@8.3.0']);
});
it('should return the latest stable release version when there is no current version', async () => {
it('should get the requested version when the package is not in the monorepo', async () => {
mockLatestVersion.mockResolvedValue('2.0.0');
const result = await jsPackageManager.getVersionedPackages(['@storybook/new-addon@^8.3.0']);
const result = await jsPackageManager.getVersionedPackages(['@storybook/new-addon@^next']);
expect(result).toEqual(['@storybook/new-addon@^2.0.0']);
expect(result).toEqual(['@storybook/new-addon@^next']);
});
});
});

7
code/core/src/common/js-package-manager/JsPackageManager.ts
View File

@ -333,6 +333,13 @@ export abstract class JsPackageManager {
return Promise.all(
packages.map(async (pkg) => {
const [packageName, packageVersion] = getPackageDetails(pkg);
// If the packageVersion is specified and we are not dealing with a storybook package,
// just return the requested version.
if (packageVersion && !(packageName in storybookPackagesVersions)) {
return pkg;
}
const latestInRange = await this.latestVersion(packageName, packageVersion);
const k = packageName as keyof typeof storybookPackagesVersions;

2
code/core/src/common/utils/print-duration.ts
View File

@ -4,4 +4,4 @@ export const printDuration = (startTime: [number, number]) =>
prettyTime(process.hrtime(startTime))
.replace(' ms', ' milliseconds')
.replace(' s', ' seconds')
.replace(' m', ' minutes');
.replace(' min', ' minutes');

129
code/core/src/common/versions.ts
View File

@ -1,68 +1,67 @@
// auto generated file, do not edit
export default {
'@storybook/addon-a11y': '9.0.0-alpha.0',
'@storybook/addon-actions': '9.0.0-alpha.0',
'@storybook/addon-backgrounds': '9.0.0-alpha.0',
'@storybook/addon-controls': '9.0.0-alpha.0',
'@storybook/addon-docs': '9.0.0-alpha.0',
'@storybook/addon-essentials': '9.0.0-alpha.0',
'@storybook/addon-mdx-gfm': '9.0.0-alpha.0',
'@storybook/addon-highlight': '9.0.0-alpha.0',
'@storybook/addon-interactions': '9.0.0-alpha.0',
'@storybook/addon-jest': '9.0.0-alpha.0',
'@storybook/addon-links': '9.0.0-alpha.0',
'@storybook/addon-measure': '9.0.0-alpha.0',
'@storybook/addon-onboarding': '9.0.0-alpha.0',
'@storybook/addon-outline': '9.0.0-alpha.0',
'@storybook/addon-storysource': '9.0.0-alpha.0',
'@storybook/addon-test': '9.0.0-alpha.0',
'@storybook/addon-themes': '9.0.0-alpha.0',
'@storybook/addon-toolbars': '9.0.0-alpha.0',
'@storybook/addon-viewport': '9.0.0-alpha.0',
'@storybook/builder-vite': '9.0.0-alpha.0',
'@storybook/builder-webpack5': '9.0.0-alpha.0',
storybook: '9.0.0-alpha.0',
'@storybook/angular': '9.0.0-alpha.0',
'@storybook/ember': '9.0.0-alpha.0',
'@storybook/experimental-nextjs-vite': '9.0.0-alpha.0',
'@storybook/html-vite': '9.0.0-alpha.0',
'@storybook/html-webpack5': '9.0.0-alpha.0',
'@storybook/nextjs': '9.0.0-alpha.0',
'@storybook/preact-vite': '9.0.0-alpha.0',
'@storybook/preact-webpack5': '9.0.0-alpha.0',
'@storybook/react-native-web-vite': '9.0.0-alpha.0',
'@storybook/react-vite': '9.0.0-alpha.0',
'@storybook/react-webpack5': '9.0.0-alpha.0',
'@storybook/server-webpack5': '9.0.0-alpha.0',
'@storybook/svelte-vite': '9.0.0-alpha.0',
'@storybook/svelte-webpack5': '9.0.0-alpha.0',
'@storybook/sveltekit': '9.0.0-alpha.0',
'@storybook/vue3-vite': '9.0.0-alpha.0',
'@storybook/vue3-webpack5': '9.0.0-alpha.0',
'@storybook/web-components-vite': '9.0.0-alpha.0',
'@storybook/web-components-webpack5': '9.0.0-alpha.0',
'@storybook/blocks': '9.0.0-alpha.0',
sb: '9.0.0-alpha.0',
'@storybook/cli': '9.0.0-alpha.0',
'@storybook/codemod': '9.0.0-alpha.0',
'@storybook/core-webpack': '9.0.0-alpha.0',
'create-storybook': '9.0.0-alpha.0',
'@storybook/csf-plugin': '9.0.0-alpha.0',
'@storybook/react-dom-shim': '9.0.0-alpha.0',
'@storybook/source-loader': '9.0.0-alpha.0',
'@storybook/test': '9.0.0-alpha.0',
'@storybook/preset-create-react-app': '9.0.0-alpha.0',
'@storybook/preset-html-webpack': '9.0.0-alpha.0',
'@storybook/preset-preact-webpack': '9.0.0-alpha.0',
'@storybook/preset-react-webpack': '9.0.0-alpha.0',
'@storybook/preset-server-webpack': '9.0.0-alpha.0',
'@storybook/preset-svelte-webpack': '9.0.0-alpha.0',
'@storybook/preset-vue3-webpack': '9.0.0-alpha.0',
'@storybook/html': '9.0.0-alpha.0',
'@storybook/preact': '9.0.0-alpha.0',
'@storybook/react': '9.0.0-alpha.0',
'@storybook/server': '9.0.0-alpha.0',
'@storybook/svelte': '9.0.0-alpha.0',
'@storybook/vue3': '9.0.0-alpha.0',
'@storybook/web-components': '9.0.0-alpha.0',
'@storybook/addon-a11y': '9.0.0-alpha.3',
'@storybook/addon-actions': '9.0.0-alpha.3',
'@storybook/addon-backgrounds': '9.0.0-alpha.3',
'@storybook/addon-controls': '9.0.0-alpha.3',
'@storybook/addon-docs': '9.0.0-alpha.3',
'@storybook/addon-essentials': '9.0.0-alpha.3',
'@storybook/addon-mdx-gfm': '9.0.0-alpha.3',
'@storybook/addon-highlight': '9.0.0-alpha.3',
'@storybook/addon-interactions': '9.0.0-alpha.3',
'@storybook/addon-jest': '9.0.0-alpha.3',
'@storybook/addon-links': '9.0.0-alpha.3',
'@storybook/addon-measure': '9.0.0-alpha.3',
'@storybook/addon-onboarding': '9.0.0-alpha.3',
'@storybook/addon-outline': '9.0.0-alpha.3',
'@storybook/addon-storysource': '9.0.0-alpha.3',
'@storybook/addon-test': '9.0.0-alpha.3',
'@storybook/addon-themes': '9.0.0-alpha.3',
'@storybook/addon-toolbars': '9.0.0-alpha.3',
'@storybook/addon-viewport': '9.0.0-alpha.3',
'@storybook/builder-vite': '9.0.0-alpha.3',
'@storybook/builder-webpack5': '9.0.0-alpha.3',
storybook: '9.0.0-alpha.3',
'@storybook/angular': '9.0.0-alpha.3',
'@storybook/ember': '9.0.0-alpha.3',
'@storybook/experimental-nextjs-vite': '9.0.0-alpha.3',
'@storybook/html-vite': '9.0.0-alpha.3',
'@storybook/html-webpack5': '9.0.0-alpha.3',
'@storybook/nextjs': '9.0.0-alpha.3',
'@storybook/preact-vite': '9.0.0-alpha.3',
'@storybook/preact-webpack5': '9.0.0-alpha.3',
'@storybook/react-native-web-vite': '9.0.0-alpha.3',
'@storybook/react-vite': '9.0.0-alpha.3',
'@storybook/react-webpack5': '9.0.0-alpha.3',
'@storybook/server-webpack5': '9.0.0-alpha.3',
'@storybook/svelte-vite': '9.0.0-alpha.3',
'@storybook/svelte-webpack5': '9.0.0-alpha.3',
'@storybook/sveltekit': '9.0.0-alpha.3',
'@storybook/vue3-vite': '9.0.0-alpha.3',
'@storybook/vue3-webpack5': '9.0.0-alpha.3',
'@storybook/web-components-vite': '9.0.0-alpha.3',
'@storybook/web-components-webpack5': '9.0.0-alpha.3',
'@storybook/blocks': '9.0.0-alpha.3',
sb: '9.0.0-alpha.3',
'@storybook/cli': '9.0.0-alpha.3',
'@storybook/codemod': '9.0.0-alpha.3',
'@storybook/core-webpack': '9.0.0-alpha.3',
'create-storybook': '9.0.0-alpha.3',
'@storybook/csf-plugin': '9.0.0-alpha.3',
'@storybook/react-dom-shim': '9.0.0-alpha.3',
'@storybook/source-loader': '9.0.0-alpha.3',
'@storybook/preset-create-react-app': '9.0.0-alpha.3',
'@storybook/preset-html-webpack': '9.0.0-alpha.3',
'@storybook/preset-preact-webpack': '9.0.0-alpha.3',
'@storybook/preset-react-webpack': '9.0.0-alpha.3',
'@storybook/preset-server-webpack': '9.0.0-alpha.3',
'@storybook/preset-svelte-webpack': '9.0.0-alpha.3',
'@storybook/preset-vue3-webpack': '9.0.0-alpha.3',
'@storybook/html': '9.0.0-alpha.3',
'@storybook/preact': '9.0.0-alpha.3',
'@storybook/react': '9.0.0-alpha.3',
'@storybook/server': '9.0.0-alpha.3',
'@storybook/svelte': '9.0.0-alpha.3',
'@storybook/vue3': '9.0.0-alpha.3',
'@storybook/web-components': '9.0.0-alpha.3',
};

2
code/core/src/components/components/Badge/Badge.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Badge } from './Badge';

3
code/core/src/components/components/Button/Button.deprecated.stories.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { LinkIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Form } from '../form';
import { Button } from './Button';

2
code/core/src/components/components/ErrorFormatter/ErrorFormatter.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { dedent } from 'ts-dedent';

3
code/core/src/components/components/IconButton/IconButton.stories.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { FaceHappyIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { IconButton } from './IconButton';

5
code/core/src/components/components/Modal/Modal.stories.tsx
View File

@ -1,7 +1,8 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, userEvent, within } from 'storybook/test';
import { Button } from '../Button/Button';
import { Modal } from './Modal';

3
code/core/src/components/components/ProgressSpinner/ProgressSpinner.stories.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { StopAltIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { ProgressSpinner } from './ProgressSpinner';

2
code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx
View File

@ -180,7 +180,7 @@ export const UnsupportedDark = {
export const Story = {
args: {
language: 'jsx',
children: `import type { Meta, StoryObj } from '@storybook/react';
children: `import type { Meta, StoryObj } from '@storybook/react-vite';
import { Header } from './Header';

3
code/core/src/components/components/tabs/EmptyTabContent.stories.tsx
View File

@ -3,7 +3,8 @@ import React from 'react';
import { Link } from 'storybook/internal/components';
import { DocumentIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { EmptyTabContent } from './EmptyTabContent';

8
code/core/src/components/components/tabs/tabs.stories.tsx
View File

@ -1,12 +1,14 @@
import React from 'react';
import { BottomBarIcon, CloseIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import { expect } from '@storybook/test';
import { findByText, fireEvent, screen, userEvent, waitFor, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { action } from '@storybook/addon-actions';
import { expect } from 'storybook/test';
import { findByText, fireEvent, screen, userEvent, waitFor, within } from 'storybook/test';
import { IconButton } from '../IconButton/IconButton';
import { TabWrapper, Tabs, TabsState } from './tabs';
import type { ChildrenList } from './tabs.helpers';

3
code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { LinkIcon, LinuxIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { action } from '@storybook/addon-actions';

2
code/core/src/components/components/tooltip/TooltipMessage.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import type { Meta } from '@storybook/react';
import type { Meta } from '@storybook/react-vite';
import { TooltipMessage } from './TooltipMessage';
import { WithTooltip } from './WithTooltip';

5
code/core/src/components/components/tooltip/WithTooltip.stories.tsx
View File

@ -3,8 +3,9 @@ import React from 'react';
import { styled } from 'storybook/internal/theming';
import type { StoryObj } from '@storybook/react';
import { expect, screen } from '@storybook/test';
import type { StoryObj } from '@storybook/react-vite';
import { expect, screen } from 'storybook/test';
import { TooltipMessage } from './TooltipMessage';
import { WithToolTipState as WithTooltip } from './WithTooltip';

2
code/core/src/core-server/utils/save-story/mocks/csf-variances.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import type { FC } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
export default {
title: 'MyComponent',

2
code/core/src/core-server/utils/save-story/mocks/data-variances.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import type { FC } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
export default {
title: 'MyComponent',

2
code/core/src/core-server/utils/save-story/mocks/export-variances.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import type { FC } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
export default {
title: 'MyComponent',

2
code/core/src/core-server/utils/save-story/mocks/typescript-constructs.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import type { FC } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
export default {
title: 'MyComponent',

2
code/core/src/core-server/utils/save-story/mocks/unsupported-csf-variances.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import type { FC } from 'react';
import type { Meta } from '@storybook/react';
import type { Meta } from '@storybook/react-vite';
export default {
title: 'MyComponent',

2
code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
View File

@ -43,7 +43,7 @@ export async function warnWhenUsingArgTypesRegex(
'argTypesRegex'
)} and assigning explicit action with the ${picocolors.cyan(
'fn'
)} function from ${picocolors.cyan('@storybook/test')} instead:
)} function from ${picocolors.cyan('storybook/test')} instead:
https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.

2
code/core/src/instrumenter/README.md
View File

@ -31,7 +31,7 @@ Depending on the library and functions to be instrumented, you may want to confi
`intercept` can take either a boolean (default `false`) or a function which returns a boolean. This enables you to only make specific library functions interceptable. This function receives a `method` and `path`, referring to the name of the function and the path to that function in the object tree. Some functions may return an object which is then instrumented as well, in which case the `path` will contain a "call ref", which is a plain object containing a `__callId__` property referencing the originating call.
Here's an example `intercept` function (from `@storybook/test`):
Here's an example `intercept` function (from `storybook/test`):
```js
(method, path) => path[0] === 'fireEvent' || method.startsWith('findBy') || method.startsWith('waitFor'),

2
code/core/src/manager-api/version.ts
View File

@ -1 +1 @@
export const version = '9.0.0-alpha.0';
export const version = '9.0.0-alpha.3';

5
code/core/src/manager/components/layout/Layout.stories.tsx
View File

@ -4,11 +4,12 @@ import React, { useState } from 'react';
import { LocationProvider } from 'storybook/internal/router';
import { styled } from 'storybook/internal/theming';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { action } from '@storybook/addon-actions';
import { fn } from 'storybook/test';
import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
import { Layout } from './Layout';
import { LayoutProvider } from './LayoutProvider';

Some files were not shown because too many files have changed in this diff Show More