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

Merge branch 'next' of github.com:storybookjs/storybook into jeppe/status-store

Browse Source
This commit is contained in:
Jeppe Reinhold 2025-03-10 14:14:58 +01:00
commit f3562dc95f
534 changed files with 6764 additions and 1559 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:

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';

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

@ -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.2.12",
"@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();
}
}

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

@ -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,

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/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,

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 {

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

@ -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,

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

@ -48,7 +48,6 @@
"@neoconfetti/react": "^1.0.0",
"@radix-ui/react-dialog": "^1.0.5",
"@storybook/icons": "^1.2.12",
"@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';

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

@ -100,7 +100,6 @@
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.12",
"@storybook/test": "workspace:*",
"polished": "^4.2.2",
"prompts": "^2.4.0",
"ts-dedent": "^2.2.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 } 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 } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, fn } from 'storybook/test';
import { type Details, storeOptions } from '../constants';
import { store as mockStore } from '../manager-store.mock';

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';

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';

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,

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

21
code/core/package.json
View File

@ -25,6 +25,10 @@
"#manager-status-store": {
"storybook": "./src/manager/status-store.mock.ts",
"default": "./src/manager/status-store.ts"
},
"#utils": {
"storybook": "./template/stories/utils.mock.ts",
"default": "./template/stories/utils.ts"
}
},
"exports": {
@ -187,6 +191,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"
},
@ -286,6 +295,9 @@
],
"internal/instrumenter": [
"./dist/instrumenter/index.d.ts"
],
"test": [
"./dist/test/index.d.ts"
]
}
},
@ -301,6 +313,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",
@ -365,7 +382,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",
@ -430,7 +449,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') {

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

@ -50,7 +50,6 @@ export default {
'@storybook/csf-plugin': '9.0.0-alpha.2',
'@storybook/react-dom-shim': '9.0.0-alpha.2',
'@storybook/source-loader': '9.0.0-alpha.2',
'@storybook/test': '9.0.0-alpha.2',
'@storybook/preset-create-react-app': '9.0.0-alpha.2',
'@storybook/preset-html-webpack': '9.0.0-alpha.2',
'@storybook/preset-preact-webpack': '9.0.0-alpha.2',

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'),

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';

5
code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
View File

@ -2,8 +2,9 @@ import React, { useEffect } from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { within } from 'storybook/test';
import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
import { MobileAbout } from './MobileAbout';

4
code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
View File

@ -2,10 +2,10 @@ import React from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { startCase } from 'es-toolkit';
import { within } from 'storybook/test';
import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
import { MobileNavigation } from './MobileNavigation';

6
code/core/src/manager/components/notifications/NotificationItem.stories.tsx
View File

@ -7,11 +7,13 @@ import {
BookIcon as BookIconIcon,
FaceHappyIcon,
} from '@storybook/icons';
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 { action } from '@storybook/addon-actions';
import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
import NotificationItem from './NotificationItem';
const meta = {

2
code/core/src/manager/components/notifications/NotificationList.stories.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { LocationProvider } from 'storybook/internal/router';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import * as itemStories from './NotificationItem.stories';
import { NotificationList } from './NotificationList';

5
code/core/src/manager/components/sidebar/FileSearchList.stories.tsx
View File

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

2
code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx
View File

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

5
code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
View File

@ -1,7 +1,8 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, findByText, fireEvent, fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, findByText, fireEvent, fn } from 'storybook/test';
import { WithResults } from './FileSearchList.stories';
import { FileSearchModal } from './FileSearchModal';

2
code/core/src/manager/components/sidebar/FilterToggle.stories.ts
View File

@ -1,4 +1,4 @@
import { fn } from '@storybook/test';
import { fn } from 'storybook/test';
import { FilterToggle } from './FilterToggle';

5
code/core/src/manager/components/sidebar/Heading.stories.tsx
View File

@ -4,11 +4,12 @@ import React from 'react';
import { ThemeProvider, useTheme } from 'storybook/internal/theming';
import type { Theme } from 'storybook/internal/theming';
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
import { screen } from '@storybook/test';
import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
import { action } from '@storybook/addon-actions';
import { screen } from 'storybook/test';
import { Heading } from './Heading';
type Story = StoryFn<typeof Heading>;

2
code/core/src/manager/components/sidebar/IconSymbols.stories.tsx
View File

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

6
code/core/src/manager/components/sidebar/Menu.stories.tsx
View File

@ -5,8 +5,10 @@ import type { State } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import { LinkIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, screen, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, screen, userEvent, within } from 'storybook/test';
import { useMenu } from '../../container/Menu';
import { LayoutProvider } from '../layout/LayoutProvider';

2
code/core/src/manager/components/sidebar/Refs.stories.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import { fn } from '@storybook/test';
import { fn } from 'storybook/test';
import { standardData as standardHeaderData } from './Heading.stories';
import { IconSymbols } from './IconSymbols';

2
code/core/src/manager/components/sidebar/Search.stories.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import type { API } from 'storybook/internal/manager-api';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryFn } from '@storybook/react';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { action } from '@storybook/addon-actions';

5
code/core/src/manager/components/sidebar/Sidebar.stories.tsx
View File

@ -5,8 +5,9 @@ import { ManagerContext } from 'storybook/internal/manager-api';
import { type Addon_SidebarTopType, StatusValue } from 'storybook/internal/types';
import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
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 { internal_fullStatusStore } from '../../status-store.mock';
import { LayoutProvider } from '../layout/LayoutProvider';

5
code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
View File

@ -3,8 +3,9 @@ import React, { type FC, useEffect, useState } from 'react';
import { type API, ManagerContext } from 'storybook/internal/manager-api';
import { Addon_TypesEnum } from 'storybook/internal/types';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, fireEvent, fn, waitFor, within } from 'storybook/test';
import { SidebarBottomBase } from './SidebarBottom';

5
code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
View File

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

5
code/core/src/manager/components/sidebar/TagsFilterPanel.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 { TagsFilterPanel } from './TagsFilterPanel';

5
code/core/src/manager/components/sidebar/TestingModule.stories.tsx
View File

@ -6,8 +6,9 @@ import { ManagerContext, mockChannel } 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 { fireEvent, fn } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fireEvent, fn } from 'storybook/test';
import { TestingModule } from './TestingModule';

5
code/core/src/manager/components/sidebar/Tree.stories.tsx
View File

@ -7,11 +7,12 @@ 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 { action } from '@storybook/addon-actions';
import { expect, fn, userEvent, within } from 'storybook/test';
import { DEFAULT_REF_ID } from './Sidebar';
import { Tree } from './Tree';
import { index } from './mockdata.large';

5
code/core/src/manager/components/upgrade/UpgradeBlock.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 { UpgradeBlock } from './UpgradeBlock';

2
code/core/src/manager/container/Menu.stories.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { TooltipLinkList, WithTooltip } from 'storybook/internal/components';
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/manager/settings/SettingsFooter.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import type { Decorator } from '@storybook/react';
import type { Decorator } from '@storybook/react-vite';
import SettingsFooter from './SettingsFooter';

5
code/core/src/manager/settings/about.stories.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
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 UpgradeBlockStoriesMeta from '../components/upgrade/UpgradeBlock.stories';
import { AboutScreen } from './About';

2
code/core/src/manager/settings/shortcuts.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import type { Decorator } from '@storybook/react';
import type { Decorator } from '@storybook/react-vite';
import { actions as makeActions } from '@storybook/addon-actions';

2
code/core/src/manager/settings/whats_new_footer.stories.tsx
View File

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

2
code/core/src/preview-errors.ts
View File

@ -60,7 +60,7 @@ export class ImplicitActionsDuringRendering extends StorybookError {
We detected that you use an implicit action arg while ${data.phase} of your story.
${data.deprecated ? `\nThis is deprecated and won't work in Storybook 8 anymore.\n` : ``}
Please provide an explicit spy to your args like this:
import { fn } from '@storybook/test';
import { fn } from 'storybook/test';
...
args: {
${data.name}: fn()

69
code/core/src/shared/universal-store/index.test.ts
View File

@ -46,9 +46,12 @@ const mockChannel = {
describe('UniversalStore', () => {
beforeEach((context) => {
vi.useFakeTimers();
let randomUUIDCounter = 0;
vi.spyOn(globalThis.crypto, 'randomUUID').mockImplementation(() => {
return `mocked-random-uuid-v4-${randomUUIDCounter++}`;
// Mock Date and Math.random to make the actorId deterministic
let randomNumberCounter = 1;
vi.setSystemTime(new Date('2025-02-14'));
vi.spyOn(Math, 'random').mockImplementation(() => {
return randomNumberCounter++ / 10;
});
// Always prepare the store, unless the test is specifically for unprepared state
@ -57,7 +60,7 @@ describe('UniversalStore', () => {
}
return () => {
randomUUIDCounter = 0;
randomNumberCounter = 0;
vi.clearAllTimers();
mockedInstances.clearAllEnvironments();
mockChannelListeners.clear();
@ -78,7 +81,7 @@ describe('UniversalStore', () => {
// Assert - the store should be created with the initial state and actor
expect(store.getState()).toEqual({ count: 0 });
expect(store.actor.type).toBe('LEADER');
expect(store.actor.id).toBe('mocked-random-uuid-v4-0');
expect(store.actor.id).toBe('m7405c003lllllllllm');
});
it('should throw when trying to create an instance with the constructor directly', () => {
@ -195,7 +198,6 @@ You should reuse the existing instance instead of trying to create a new one.`);
// Arrange - create an initial leader and follower
vi.spyOn(console, 'error').mockImplementation(() => {});
vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValueOnce('first-uuid-1-2-3-4');
const firstLeader = UniversalStore.create({
id: 'env1:test',
leader: true,
@ -203,7 +205,6 @@ You should reuse the existing instance instead of trying to create a new one.`);
});
// Act - create the second leader
vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValueOnce('second-uuid-1-2-3-4');
const secondLeader = UniversalStore.create({
id: 'env2:test',
leader: true,
@ -250,12 +251,12 @@ You should reuse the existing instance instead of trying to create a new one.`);
Only one leader can exists at a time, your stores are now in an invalid state.
Leaders detected:
this: {
"id": "second-uuid-1-2-3-4",
"id": "m7405c0077777777778",
"type": "LEADER",
"environment": "MANAGER"
}
other: {
"id": "first-uuid-1-2-3-4",
"id": "m7405c003lllllllllm",
"type": "LEADER",
"environment": "MANAGER"
}`
@ -266,12 +267,12 @@ You should reuse the existing instance instead of trying to create a new one.`);
Only one leader can exists at a time, your stores are now in an invalid state.
Leaders detected:
this: {
"id": "first-uuid-1-2-3-4",
"id": "m7405c003lllllllllm",
"type": "LEADER",
"environment": "MANAGER"
}
other: {
"id": "second-uuid-1-2-3-4",
"id": "m7405c0077777777778",
"type": "LEADER",
"environment": "MANAGER"
}`
@ -290,7 +291,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
// Assert - the store should be created with the initial state and actor
expect(store.getState()).toEqual(undefined);
expect(store.actor.type).toBe('FOLLOWER');
expect(store.actor.id).toBe('mocked-random-uuid-v4-0');
expect(store.actor.id).toBe('m7405c003lllllllllm');
});
it('should get existing state when a follower is created without initialState', async () => {
@ -325,7 +326,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -340,7 +341,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
},
@ -355,7 +356,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
},
@ -370,12 +371,12 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
"forwardingActor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -393,7 +394,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -437,7 +438,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -452,7 +453,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
},
@ -467,7 +468,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
},
@ -482,12 +483,12 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
"forwardingActor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -505,7 +506,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -560,7 +561,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -575,7 +576,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
},
@ -590,7 +591,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
},
@ -605,12 +606,12 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
},
"forwardingActor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -628,7 +629,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "LEADER",
},
},
@ -664,7 +665,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "FOLLOWER",
},
},
@ -679,7 +680,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
"eventInfo": {
"actor": {
"environment": "MANAGER",
"id": "mocked-random-uuid-v4-0",
"id": "m7405c003lllllllllm",
"type": "FOLLOWER",
},
},
@ -951,7 +952,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
},
"id": "env2:test",
"actor": {
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
"environment": "MANAGER"
},
@ -1136,7 +1137,7 @@ You should reuse the existing instance instead of trying to create a new one.`);
},
"id": "env2:test",
"actor": {
"id": "mocked-random-uuid-v4-1",
"id": "m7405c0077777777778",
"type": "FOLLOWER",
"environment": "MANAGER"
},

5
code/core/src/shared/universal-store/index.ts
View File

@ -259,10 +259,7 @@ export class UniversalStore<
UniversalStore.isInternalConstructing = false;
this.id = options.id;
this.actorId = globalThis.crypto
? globalThis.crypto.randomUUID()
: // TODO: remove this fallback in SB 9.0 when we no longer support Node 18
Date.now().toString(36) + Math.random().toString(36).substring(2);
this.actorId = Date.now().toString(36) + Math.random().toString(36).substring(2);
this.actorType = options.leader
? UniversalStore.ActorType.LEADER
: UniversalStore.ActorType.FOLLOWER;

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