mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 05:11:06 +08:00
Merge branch 'next' into next
This commit is contained in:
Yann Braga
GitHub
commit
2c88aa2afe
@ -836,19 +836,19 @@ workflows:
|
||||
requires:
|
||||
- unit-tests
|
||||
- create-sandboxes:
|
||||
parallelism: 13
|
||||
parallelism: 14
|
||||
requires:
|
||||
- build
|
||||
- build-sandboxes:
|
||||
parallelism: 13
|
||||
parallelism: 14
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 10
|
||||
parallelism: 11
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-production:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-dev:
|
||||
@ -856,7 +856,7 @@ workflows:
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-production:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- vitest-integration:
|
||||
@ -912,19 +912,19 @@ workflows:
|
||||
requires:
|
||||
- unit-tests
|
||||
- create-sandboxes:
|
||||
parallelism: 19
|
||||
parallelism: 20
|
||||
requires:
|
||||
- build
|
||||
- build-sandboxes:
|
||||
parallelism: 19
|
||||
parallelism: 20
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 16
|
||||
parallelism: 17
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-production:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-dev:
|
||||
@ -932,7 +932,7 @@ workflows:
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-production:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- vitest-integration:
|
||||
@ -986,22 +986,22 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 36
|
||||
parallelism: 37
|
||||
requires:
|
||||
- build
|
||||
# - smoke-test-sandboxes: # disabled for now
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- build-sandboxes:
|
||||
parallelism: 36
|
||||
parallelism: 37
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 33
|
||||
parallelism: 34
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-production:
|
||||
parallelism: 31
|
||||
parallelism: 32
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-dev:
|
||||
@ -1009,7 +1009,7 @@ workflows:
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-production:
|
||||
parallelism: 31
|
||||
parallelism: 32
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- vitest-integration:
|
||||
|
||||
2
.github/workflows/tests-unit.yml
vendored
2
.github/workflows/tests-unit.yml
vendored
@ -17,6 +17,8 @@ jobs:
|
||||
runs-on: ${{ matrix.os }}
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 2
|
||||
- name: Set node version
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
|
||||
@ -1,3 +1,72 @@
|
||||
## 8.5.0-beta.5
|
||||
|
||||
- Addon Test: Only reset story count on file change when watch mode is enabled - [#30121](https://github.com/storybookjs/storybook/pull/30121), thanks @ghengeveld!
|
||||
- Build: Revert Downgrade to esbuild 0.24.0 - [#30120](https://github.com/storybookjs/storybook/pull/30120), thanks @yannbf!
|
||||
- Core: Fix `ERR_PACKAGE_PATH_NOT_EXPORTED` in `@storybook/node-logger` - [#30093](https://github.com/storybookjs/storybook/pull/30093), thanks @JReinhold!
|
||||
- React: Use Act wrapper in Storybook for component rendering - [#30037](https://github.com/storybookjs/storybook/pull/30037), thanks @valentinpalkovic!
|
||||
- Vite: Add extra entries to `optimizeDeps` - [#30117](https://github.com/storybookjs/storybook/pull/30117), thanks @ndelangen!
|
||||
|
||||
## 8.5.0-beta.4
|
||||
|
||||
- Addon Themes: Deprecate useThemeParameters - [#30111](https://github.com/storybookjs/storybook/pull/30111), thanks @yannbf!
|
||||
- Build: Downgrade to esbuild 0.24.0 - [#30116](https://github.com/storybookjs/storybook/pull/30116), thanks @yannbf!
|
||||
- CLI: Re-Add Nuxt support - [#28607](https://github.com/storybookjs/storybook/pull/28607), thanks @valentinpalkovic!
|
||||
- Core: Prevent infinite rerendering caused by comparison by reference - [#30081](https://github.com/storybookjs/storybook/pull/30081), thanks @ghengeveld!
|
||||
|
||||
## 8.5.0-beta.3
|
||||
|
||||
- Addon A11y: Fix skipped status handling in Testing Module - [#30077](https://github.com/storybookjs/storybook/pull/30077), thanks @valentinpalkovic!
|
||||
- Core: Float context menu button on top of story titles in sidebar - [#30080](https://github.com/storybookjs/storybook/pull/30080), thanks @ghengeveld!
|
||||
- Onboarding: Replace `react-confetti` with `@neoconfetti/react` - [#30098](https://github.com/storybookjs/storybook/pull/30098), thanks @ndelangen!
|
||||
|
||||
## 8.5.0-beta.2
|
||||
|
||||
- Addon Test: Clear coverage data when starting or watching - [#30072](https://github.com/storybookjs/storybook/pull/30072), thanks @ghengeveld!
|
||||
- Addon Test: Improve error message on missing coverage package - [#30088](https://github.com/storybookjs/storybook/pull/30088), thanks @JReinhold!
|
||||
- UI: Fix test provider event handling on startup - [#30083](https://github.com/storybookjs/storybook/pull/30083), thanks @ghengeveld!
|
||||
- UI: Keep failing stories in the sidebar, disregarding filters - [#30086](https://github.com/storybookjs/storybook/pull/30086), thanks @JReinhold!
|
||||
|
||||
## 8.5.0-beta.1
|
||||
|
||||
- Addon A11y: Add conditional rendering for a11y violation number in Testing Module - [#30073](https://github.com/storybookjs/storybook/pull/30073), thanks @valentinpalkovic!
|
||||
- Addon A11y: Remove warnings API - [#30049](https://github.com/storybookjs/storybook/pull/30049), thanks @kasperpeulen!
|
||||
- Addon A11y: Show errors of axe properly - [#30050](https://github.com/storybookjs/storybook/pull/30050), thanks @kasperpeulen!
|
||||
- Addon Test: Fix printing null% for coverage - [#30061](https://github.com/storybookjs/storybook/pull/30061), thanks @ghengeveld!
|
||||
- Telemetry: Add metadata distinguishing "apps" from "design systems" - [#30070](https://github.com/storybookjs/storybook/pull/30070), thanks @tmeasday!
|
||||
|
||||
## 8.5.0-beta.0
|
||||
|
||||
- Automigration: Improve setup file transformation and version range handling for a11y migration - [#30060](https://github.com/storybookjs/storybook/pull/30060), thanks @valentinpalkovic!
|
||||
- Next.js: Support v15.1.1 - [#30068](https://github.com/storybookjs/storybook/pull/30068), thanks @valentinpalkovic!
|
||||
|
||||
## 8.5.0-alpha.22
|
||||
|
||||
- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!
|
||||
- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!
|
||||
- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!
|
||||
- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!
|
||||
- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!
|
||||
- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!
|
||||
- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!
|
||||
- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!
|
||||
- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!
|
||||
- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!
|
||||
- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!
|
||||
- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!
|
||||
- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!
|
||||
|
||||
## 8.5.0-alpha.21
|
||||
|
||||
- Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!
|
||||
- Addon A11y: Refactor environment variable handling for Vitest integration - [#30022](https://github.com/storybookjs/storybook/pull/30022), thanks @valentinpalkovic!
|
||||
- Addon A11y: Run the a11y automigration on postInstall - [#30004](https://github.com/storybookjs/storybook/pull/30004), thanks @kasperpeulen!
|
||||
- Addon A11y: Update accessibility status handling in TestProviderRender - [#30027](https://github.com/storybookjs/storybook/pull/30027), thanks @valentinpalkovic!
|
||||
- Addon Onboarding: Prebundle react-confetti - [#29996](https://github.com/storybookjs/storybook/pull/29996), thanks @yannbf!
|
||||
- Addon Test: Correctly stop Storybook when Vitest closes - [#30012](https://github.com/storybookjs/storybook/pull/30012), thanks @JReinhold!
|
||||
- Addon Test: Show sub test provider toggle state in main testing module - [#30019](https://github.com/storybookjs/storybook/pull/30019), thanks @ghengeveld!
|
||||
- Addon Test: Wrap sub-paths exported with `require.resolve` - [#30026](https://github.com/storybookjs/storybook/pull/30026), thanks @ndelangen!
|
||||
- Core: Fix bundling of React - [#30003](https://github.com/storybookjs/storybook/pull/30003), thanks @yannbf!
|
||||
|
||||
## 8.5.0-alpha.20
|
||||
|
||||
- Addon Test: Add `@vitest/coverage-v8` during postinstall if no coverage reporter is installed - [#29993](https://github.com/storybookjs/storybook/pull/29993), thanks @ghengeveld!
|
||||
|
||||
65
MIGRATION.md
65
MIGRATION.md
@ -1,6 +1,8 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
|
||||
- [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
|
||||
- [Added source code panel to docs](#added-source-code-panel-to-docs)
|
||||
- [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
|
||||
- [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
|
||||
- [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
|
||||
@ -109,17 +111,17 @@
|
||||
- [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
|
||||
- [Removed `config` preset](#removed-config-preset-1)
|
||||
- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
|
||||
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
|
||||
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
|
||||
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
|
||||
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
|
||||
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
|
||||
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
|
||||
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
|
||||
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
|
||||
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
|
||||
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
|
||||
- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
|
||||
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
|
||||
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
|
||||
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
|
||||
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
|
||||
- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
|
||||
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
|
||||
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
|
||||
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
|
||||
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [7.0 breaking changes](#70-breaking-changes)
|
||||
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
|
||||
@ -145,7 +147,7 @@
|
||||
- [Deploying build artifacts](#deploying-build-artifacts)
|
||||
- [Dropped support for file URLs](#dropped-support-for-file-urls)
|
||||
- [Serving with nginx](#serving-with-nginx)
|
||||
- [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
|
||||
- [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
|
||||
- [7.0 Core changes](#70-core-changes)
|
||||
- [7.0 feature flags removed](#70-feature-flags-removed)
|
||||
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
|
||||
@ -159,7 +161,7 @@
|
||||
- [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
|
||||
- [7.0 Vite changes](#70-vite-changes)
|
||||
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
|
||||
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [7.0 Webpack changes](#70-webpack-changes)
|
||||
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
||||
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
|
||||
@ -210,7 +212,7 @@
|
||||
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
|
||||
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
|
||||
- [Autoplay in docs](#autoplay-in-docs)
|
||||
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
|
||||
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
|
||||
- [`Story` type deprecated](#story-type-deprecated)
|
||||
@ -425,14 +427,47 @@
|
||||
|
||||
## From version 8.4.x to 8.5.x
|
||||
|
||||
### Introducing features.developmentModeForBuild
|
||||
|
||||
As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.
|
||||
|
||||
In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's `act`, which ensures that all updates related to a test are processed and applied before making assertions. `act` is crucial for reliable and predictable test results, but it only works correctly when `NODE_ENV` is set to `development`.
|
||||
|
||||
```js
|
||||
// main.js
|
||||
export default {
|
||||
features: {
|
||||
developmentModeForBuild: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Added source code panel to docs
|
||||
|
||||
Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
|
||||
|
||||
If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
|
||||
|
||||
```js
|
||||
export default {
|
||||
parameters: {
|
||||
docs: {
|
||||
codePanel: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Addon-a11y: Component test integration
|
||||
|
||||
In Storybook 8.4, we introduced a new addon called [addon test](https://storybook.js.org/docs/writing-tests/test-addon). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
|
||||
In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
|
||||
|
||||
In Storybook 8.5, we revamped the Accessibility addon (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests. If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the [addon test](https://storybook.js.org/docs/writing-tests/test-addon) installed, adjust your configuration as follows:
|
||||
In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests.
|
||||
|
||||
If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows:
|
||||
|
||||
```diff
|
||||
// .storybook/vitest.config.ts
|
||||
// .storybook/vitest.setup.ts
|
||||
...
|
||||
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ import type { StorybookConfig } from '../frameworks/react-vite';
|
||||
|
||||
const componentsPath = join(__dirname, '../core/src/components');
|
||||
const managerApiPath = join(__dirname, '../core/src/manager-api');
|
||||
const imageContextPath = join(__dirname, '..//frameworks/nextjs/src/image-context.ts');
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: [
|
||||
@ -132,6 +133,7 @@ const config: StorybookConfig = {
|
||||
features: {
|
||||
viewportStoryGlobals: true,
|
||||
backgroundsStoryGlobals: true,
|
||||
developmentModeForBuild: true,
|
||||
},
|
||||
viteFinal: async (viteConfig, { configType }) => {
|
||||
const { mergeConfig } = await import('vite');
|
||||
@ -145,6 +147,7 @@ const config: StorybookConfig = {
|
||||
'storybook/internal/components': componentsPath,
|
||||
'@storybook/manager-api': managerApiPath,
|
||||
'storybook/internal/manager-api': managerApiPath,
|
||||
'sb-original/image-context': imageContextPath,
|
||||
}
|
||||
: {}),
|
||||
},
|
||||
|
||||
@ -358,9 +358,6 @@ export const parameters = {
|
||||
opacity: 0.4,
|
||||
},
|
||||
},
|
||||
a11y: {
|
||||
warnings: ['minor', 'moderate', 'serious', 'critical'],
|
||||
},
|
||||
};
|
||||
|
||||
export const tags = ['test', 'vitest'];
|
||||
export const tags = ['test', 'vitest', '!a11ytest'];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -38,7 +38,8 @@
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
"./package.json": "./package.json",
|
||||
"./postinstall": "./dist/postinstall.js"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
@ -74,6 +75,7 @@
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/icons": "^1.2.12",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"execa": "^9.5.2",
|
||||
"picocolors": "^1.1.0",
|
||||
"pretty-format": "^29.7.0",
|
||||
"react": "^18.2.0",
|
||||
@ -97,6 +99,9 @@
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.tsx"
|
||||
],
|
||||
"nodeEntries": [
|
||||
"./src/postinstall.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
|
||||
@ -133,7 +133,11 @@ export const A11YPanel: React.FC = () => {
|
||||
<>
|
||||
The accessibility scan encountered an error.
|
||||
<br />
|
||||
{typeof error === 'string' ? error : JSON.stringify(error)}
|
||||
{typeof error === 'string'
|
||||
? error
|
||||
: error instanceof Error
|
||||
? error.toString()
|
||||
: JSON.stringify(error)}
|
||||
</>
|
||||
)}
|
||||
</Centered>
|
||||
|
||||
@ -6,8 +6,6 @@ export interface Setup {
|
||||
options: RunOptions;
|
||||
}
|
||||
|
||||
type Impact = NonNullable<ImpactValue>;
|
||||
|
||||
export interface A11yParameters {
|
||||
element?: ElementContext;
|
||||
config?: Spec;
|
||||
@ -15,5 +13,4 @@ export interface A11yParameters {
|
||||
/** @deprecated Use globals.a11y.manual instead */
|
||||
manual?: boolean;
|
||||
disable?: boolean;
|
||||
warnings?: Impact[];
|
||||
}
|
||||
|
||||
15
code/addons/a11y/src/postinstall.ts
Normal file
15
code/addons/a11y/src/postinstall.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import type { PostinstallOptions } from '@storybook/cli/src/add';
|
||||
|
||||
// eslint-disable-next-line depend/ban-dependencies
|
||||
import { execa } from 'execa';
|
||||
|
||||
const $ = execa({
|
||||
preferLocal: true,
|
||||
stdio: 'inherit',
|
||||
// we stream the stderr to the console
|
||||
reject: false,
|
||||
});
|
||||
|
||||
export default async function postinstall(options: PostinstallOptions) {
|
||||
await $`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
|
||||
}
|
||||
@ -156,60 +156,6 @@ describe('afterEach', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should report warning status when there are only warnings', async () => {
|
||||
const context = createContext({
|
||||
parameters: {
|
||||
a11y: {
|
||||
warnings: ['minor'],
|
||||
},
|
||||
},
|
||||
});
|
||||
const result = {
|
||||
violations: [
|
||||
{ impact: 'minor', nodes: [] },
|
||||
{ impact: 'critical', nodes: [] },
|
||||
],
|
||||
};
|
||||
mockedRun.mockResolvedValue(result as any);
|
||||
|
||||
await expect(async () => experimental_afterEach(context)).rejects.toThrow();
|
||||
|
||||
expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
|
||||
expect(context.reporting.addReport).toHaveBeenCalledWith({
|
||||
type: 'a11y',
|
||||
version: 1,
|
||||
result,
|
||||
status: 'failed',
|
||||
});
|
||||
});
|
||||
|
||||
it('should report error status when there are warnings and errors', async () => {
|
||||
const context = createContext({
|
||||
parameters: {
|
||||
a11y: {
|
||||
warnings: ['minor'],
|
||||
},
|
||||
},
|
||||
});
|
||||
const result = {
|
||||
violations: [
|
||||
{ impact: 'minor', nodes: [] },
|
||||
{ impact: 'critical', nodes: [] },
|
||||
],
|
||||
};
|
||||
mockedRun.mockResolvedValue(result as any);
|
||||
|
||||
await expect(async () => experimental_afterEach(context)).rejects.toThrow();
|
||||
|
||||
expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
|
||||
expect(context.reporting.addReport).toHaveBeenCalledWith({
|
||||
type: 'a11y',
|
||||
version: 1,
|
||||
result,
|
||||
status: 'failed',
|
||||
});
|
||||
});
|
||||
|
||||
it('should run accessibility checks if "a11ytest" flag is not available and is not running in Vitest', async () => {
|
||||
const context = createContext({
|
||||
tags: [],
|
||||
|
||||
@ -21,7 +21,6 @@ export const experimental_afterEach: AfterEach<any> = async ({
|
||||
}) => {
|
||||
const a11yParameter: A11yParameters | undefined = parameters.a11y;
|
||||
const a11yGlobals = globals.a11y;
|
||||
const warnings = a11yParameter?.warnings ?? [];
|
||||
|
||||
const shouldRunEnvironmentIndependent =
|
||||
a11yParameter?.manual !== true &&
|
||||
@ -38,15 +37,11 @@ export const experimental_afterEach: AfterEach<any> = async ({
|
||||
if (result) {
|
||||
const hasViolations = (result?.violations.length ?? 0) > 0;
|
||||
|
||||
const hasErrors = result?.violations.some(
|
||||
(violation) => !warnings.includes(violation.impact!)
|
||||
);
|
||||
|
||||
reporting.addReport({
|
||||
type: 'a11y',
|
||||
version: 1,
|
||||
result: result,
|
||||
status: hasErrors ? 'failed' : hasViolations ? 'warning' : 'passed',
|
||||
status: hasViolations ? 'failed' : 'passed',
|
||||
});
|
||||
|
||||
/**
|
||||
@ -58,7 +53,7 @@ export const experimental_afterEach: AfterEach<any> = async ({
|
||||
* implement proper try catch handling.
|
||||
*/
|
||||
if (getIsVitestStandaloneRun()) {
|
||||
if (hasErrors) {
|
||||
if (hasViolations) {
|
||||
// @ts-expect-error - todo - fix type extension of expect from @storybook/test
|
||||
expect(result).toHaveNoViolations();
|
||||
}
|
||||
|
||||
@ -1,25 +1,17 @@
|
||||
export function getIsVitestStandaloneRun() {
|
||||
try {
|
||||
return process.env.VITEST_STORYBOOK === 'false';
|
||||
} catch {
|
||||
try {
|
||||
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
|
||||
return import.meta.env.VITEST_STORYBOOK === 'false';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
|
||||
return import.meta.env.VITEST_STORYBOOK === 'false';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function getIsVitestRunning() {
|
||||
try {
|
||||
return process?.env.MODE === 'test';
|
||||
} catch {
|
||||
try {
|
||||
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
|
||||
return import.meta.env.MODE === 'test';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
|
||||
return import.meta.env.MODE === 'test';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -71,7 +71,12 @@
|
||||
"./angular": "./angular/index.js",
|
||||
"./angular/index.js": "./angular/index.js",
|
||||
"./web-components/index.js": "./web-components/index.js",
|
||||
"./package.json": "./package.json"
|
||||
"./package.json": "./package.json",
|
||||
"./manager": {
|
||||
"types": "./dist/manager.d.ts",
|
||||
"import": "./dist/manager.mjs",
|
||||
"require": "./dist/manager.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
@ -129,7 +134,11 @@
|
||||
"./src/preview.ts",
|
||||
"./src/blocks.ts",
|
||||
"./src/shims/mdx-react-shim.ts",
|
||||
"./src/mdx-loader.ts"
|
||||
"./src/mdx-loader.ts",
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
|
||||
57
code/addons/docs/src/manager.tsx
Normal file
57
code/addons/docs/src/manager.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
|
||||
import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
|
||||
|
||||
import { Source } from '@storybook/blocks';
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Code',
|
||||
type: types.PANEL,
|
||||
paramKey: PARAM_KEY,
|
||||
/**
|
||||
* This code panel can be disabled by the user by adding this parameter:
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* ```ts
|
||||
* parameters: {
|
||||
* docs: {
|
||||
* codePanel: false,
|
||||
* },
|
||||
* },
|
||||
* ```
|
||||
*/
|
||||
disabled: (parameters) => {
|
||||
return (
|
||||
!!parameters &&
|
||||
typeof parameters[PARAM_KEY] === 'object' &&
|
||||
parameters[PARAM_KEY].codePanel === false
|
||||
);
|
||||
},
|
||||
match: ({ viewMode }) => viewMode === 'story',
|
||||
render: ({ active }) => {
|
||||
const [codeSnippet, setSourceCode] = useAddonState<{
|
||||
source: string;
|
||||
format: SyntaxHighlighterFormatTypes;
|
||||
}>(ADDON_ID, {
|
||||
source: '',
|
||||
format: 'html',
|
||||
});
|
||||
|
||||
useChannel({
|
||||
[SNIPPET_RENDERED]: ({ source, format }) => {
|
||||
setSourceCode({ source, format });
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<AddonPanel active={!!active}>
|
||||
<Source code={codeSnippet.source} format={codeSnippet.format} dark />
|
||||
</AddonPanel>
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
@ -3,8 +3,6 @@ import { dirname, join } from 'node:path';
|
||||
import type { Options } from 'storybook/internal/types';
|
||||
|
||||
import { createFilter } from '@rollup/pluginutils';
|
||||
import rehypeExternalLinks from 'rehype-external-links';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import type { Plugin } from 'vite';
|
||||
|
||||
import type { CompileOptions } from '../compiler';
|
||||
@ -24,6 +22,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
|
||||
const presetOptions = await presets.apply<Record<string, any>>('options', {});
|
||||
const mdxPluginOptions = presetOptions?.mdxPluginOptions as CompileOptions;
|
||||
|
||||
const rehypeSlug = (await import('rehype-slug')).default;
|
||||
const rehypeExternalLinks = (await import('rehype-external-links')).default;
|
||||
|
||||
return {
|
||||
name: 'storybook:mdx-plugin',
|
||||
enforce: 'pre',
|
||||
|
||||
@ -5,9 +5,6 @@ import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/ty
|
||||
|
||||
import type { CsfPluginOptions } from '@storybook/csf-plugin';
|
||||
|
||||
import rehypeExternalLinks from 'rehype-external-links';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
|
||||
import type { CompileOptions } from './compiler';
|
||||
|
||||
/**
|
||||
@ -42,6 +39,9 @@ async function webpack(
|
||||
|
||||
const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;
|
||||
|
||||
const rehypeSlug = (await import('rehype-slug')).default;
|
||||
const rehypeExternalLinks = (await import('rehype-external-links')).default;
|
||||
|
||||
const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
|
||||
...mdxPluginOptions,
|
||||
mdxCompileOptions: {
|
||||
@ -175,6 +175,9 @@ export const viteFinal = async (config: any, options: Options) => {
|
||||
const { plugins = [] } = config;
|
||||
const { mdxPlugin } = await import('./plugins/mdx-plugin');
|
||||
|
||||
const rehypeSlug = (await import('rehype-slug')).default;
|
||||
const rehypeExternalLinks = (await import('rehype-external-links')).default;
|
||||
|
||||
// Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
|
||||
const { react, reactDom, mdx } = await getResolvedReact(options);
|
||||
|
||||
|
||||
23
code/addons/docs/template/stories/sourcePanel/index.stories.tsx
vendored
Normal file
23
code/addons/docs/template/stories/sourcePanel/index.stories.tsx
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
docs: {
|
||||
codePanel: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const One = { args: { label: 'One' } };
|
||||
|
||||
export const Two = { args: { label: 'Two' } };
|
||||
|
||||
export const WithSource = {
|
||||
args: { label: 'Three' },
|
||||
parameters: {
|
||||
docs: {
|
||||
codePanel: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -40,6 +40,7 @@
|
||||
},
|
||||
"./backgrounds/manager": "./dist/backgrounds/manager.js",
|
||||
"./controls/manager": "./dist/controls/manager.js",
|
||||
"./docs/manager": "./dist/docs/manager.js",
|
||||
"./docs/preview": {
|
||||
"types": "./dist/docs/preview.d.ts",
|
||||
"import": "./dist/docs/preview.mjs",
|
||||
@ -114,10 +115,14 @@
|
||||
"./src/docs/preset.ts",
|
||||
"./src/docs/mdx-react-shim.ts"
|
||||
],
|
||||
"entries": [
|
||||
"./src/docs/manager.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/actions/manager.ts",
|
||||
"./src/backgrounds/manager.ts",
|
||||
"./src/controls/manager.ts",
|
||||
"./src/docs/manager.ts",
|
||||
"./src/measure/manager.ts",
|
||||
"./src/outline/manager.ts",
|
||||
"./src/toolbars/manager.ts",
|
||||
|
||||
2
code/addons/essentials/src/docs/manager.ts
Normal file
2
code/addons/essentials/src/docs/manager.ts
Normal file
@ -0,0 +1,2 @@
|
||||
// @ts-expect-error (no types needed for this)
|
||||
export * from '@storybook/addon-docs/manager';
|
||||
@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
|
||||
|
||||
// NOTE: The order of these addons is important.
|
||||
return [
|
||||
'docs',
|
||||
'controls',
|
||||
'actions',
|
||||
'docs',
|
||||
'backgrounds',
|
||||
'viewport',
|
||||
'toolbars',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-mdx-gfm",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "GitHub Flavored Markdown in Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-onboarding",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,10 +44,8 @@
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-confetti": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@neoconfetti/react": "^1.0.0",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
"@storybook/icons": "^1.2.12",
|
||||
"@storybook/react": "workspace:*",
|
||||
|
||||
@ -268,17 +268,7 @@ export default function Onboarding({ api }: { api: API }) {
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
{showConfetti && (
|
||||
<Confetti
|
||||
numberOfPieces={800}
|
||||
recycle={false}
|
||||
tweenDuration={20000}
|
||||
onConfettiComplete={(confetti) => {
|
||||
confetti?.reset();
|
||||
setShowConfetti(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showConfetti && <Confetti />}
|
||||
{step === '1:Intro' ? (
|
||||
<SplashScreen onDismiss={() => setStep('2:Controls')} />
|
||||
) : (
|
||||
|
||||
@ -8,11 +8,19 @@ const meta: Meta<typeof Confetti> = {
|
||||
component: Confetti,
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: true },
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
decorators: [
|
||||
(StoryFn) => (
|
||||
<div style={{ height: '100vh', width: '100vw' }}>
|
||||
<button>I am clickable</button>
|
||||
<div
|
||||
style={{
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
alignContent: 'center',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<span>Falling confetti! 🎉</span>
|
||||
<StoryFn />
|
||||
</div>
|
||||
),
|
||||
@ -23,41 +31,4 @@ export default meta;
|
||||
|
||||
type Story = StoryObj<typeof Confetti>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
recycle: true,
|
||||
numberOfPieces: 200,
|
||||
top: undefined,
|
||||
left: undefined,
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
friction: 0.99,
|
||||
wind: 0,
|
||||
gravity: 0.1,
|
||||
initialVelocityX: 4,
|
||||
initialVelocityY: 10,
|
||||
tweenDuration: 5000,
|
||||
},
|
||||
};
|
||||
|
||||
export const OneTimeConfetti: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
numberOfPieces: 800,
|
||||
recycle: false,
|
||||
tweenDuration: 20000,
|
||||
onConfettiComplete: (confetti) => {
|
||||
confetti?.reset();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Positioned: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
top: 100,
|
||||
left: 300,
|
||||
width: 300,
|
||||
height: 250,
|
||||
},
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -1,131 +1,34 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import React, { type ComponentProps } from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import ReactConfetti from 'react-confetti';
|
||||
import { Confetti as ReactConfetti } from '@neoconfetti/react';
|
||||
|
||||
interface ConfettiProps extends Omit<React.ComponentProps<typeof ReactConfetti>, 'drawShape'> {
|
||||
top?: number;
|
||||
left?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
numberOfPieces?: number;
|
||||
recycle?: boolean;
|
||||
colors?: string[];
|
||||
}
|
||||
const Wrapper = styled.div({
|
||||
zIndex: 9999,
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: '50%',
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
const Wrapper = styled.div<{
|
||||
width: number;
|
||||
height: number;
|
||||
top: number;
|
||||
left: number;
|
||||
}>(({ width, height, left, top }) => ({
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}));
|
||||
|
||||
export function Confetti({
|
||||
top = 0,
|
||||
left = 0,
|
||||
width = window.innerWidth,
|
||||
height = window.innerHeight,
|
||||
export const Confetti = React.memo(function Confetti({
|
||||
timeToFade = 5000,
|
||||
colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
|
||||
...confettiProps
|
||||
}: ConfettiProps): React.ReactPortal {
|
||||
const [confettiContainer] = useState(() => {
|
||||
const container = document.createElement('div');
|
||||
container.setAttribute('id', 'confetti-container');
|
||||
container.setAttribute(
|
||||
'style',
|
||||
'position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;'
|
||||
);
|
||||
|
||||
return container;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.body.appendChild(confettiContainer);
|
||||
|
||||
return () => {
|
||||
document.body.removeChild(confettiContainer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return createPortal(
|
||||
<Wrapper top={top} left={left} width={width} height={height}>
|
||||
<ReactConfetti colors={colors} drawShape={draw} {...confettiProps} />
|
||||
</Wrapper>,
|
||||
confettiContainer
|
||||
}: ComponentProps<typeof ReactConfetti> & { timeToFade?: number }) {
|
||||
return (
|
||||
<Wrapper>
|
||||
<ReactConfetti
|
||||
colors={colors}
|
||||
particleCount={200}
|
||||
duration={5000}
|
||||
stageHeight={window.innerHeight}
|
||||
stageWidth={window.innerWidth}
|
||||
destroyAfterDone
|
||||
{...confettiProps}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
enum ParticleShape {
|
||||
Circle = 1,
|
||||
Square = 2,
|
||||
TShape = 3,
|
||||
LShape = 4,
|
||||
Triangle = 5,
|
||||
QuarterCircle = 6,
|
||||
}
|
||||
|
||||
function getRandomInt(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
function draw(this: any, context: CanvasRenderingContext2D) {
|
||||
this.shape = this.shape || getRandomInt(1, 6);
|
||||
|
||||
switch (this.shape) {
|
||||
case ParticleShape.Square: {
|
||||
const cornerRadius = 2;
|
||||
const width = this.w / 2;
|
||||
const height = this.h / 2;
|
||||
|
||||
context.moveTo(-width + cornerRadius, -height);
|
||||
context.lineTo(width - cornerRadius, -height);
|
||||
context.arcTo(width, -height, width, -height + cornerRadius, cornerRadius);
|
||||
context.lineTo(width, height - cornerRadius);
|
||||
context.arcTo(width, height, width - cornerRadius, height, cornerRadius);
|
||||
context.lineTo(-width + cornerRadius, height);
|
||||
context.arcTo(-width, height, -width, height - cornerRadius, cornerRadius);
|
||||
context.lineTo(-width, -height + cornerRadius);
|
||||
context.arcTo(-width, -height, -width + cornerRadius, -height, cornerRadius);
|
||||
|
||||
break;
|
||||
}
|
||||
case ParticleShape.TShape: {
|
||||
context.rect(-4, -4, 8, 16);
|
||||
context.rect(-12, -4, 24, 8);
|
||||
break;
|
||||
}
|
||||
case ParticleShape.LShape: {
|
||||
context.rect(-4, -4, 8, 16);
|
||||
context.rect(-4, -4, 24, 8);
|
||||
break;
|
||||
}
|
||||
case ParticleShape.Circle: {
|
||||
context.arc(0, 0, this.radius, 0, 2 * Math.PI);
|
||||
break;
|
||||
}
|
||||
case ParticleShape.Triangle: {
|
||||
context.moveTo(16, 4);
|
||||
context.lineTo(4, 24);
|
||||
context.lineTo(24, 24);
|
||||
break;
|
||||
}
|
||||
case ParticleShape.QuarterCircle: {
|
||||
context.arc(4, -4, 4, -Math.PI / 2, 0);
|
||||
context.lineTo(4, 0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/experimental-addon-test",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Integrate Vitest with Storybook",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -67,7 +67,7 @@ export const ContextMenuItem: FC<{
|
||||
padding="small"
|
||||
disabled={state.crashed || isDisabled}
|
||||
>
|
||||
<Icon fill={theme.barTextColor} />
|
||||
<Icon fill={theme.textMutedColor} />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -12,7 +12,7 @@ export const Wrapper = styled.div(({ theme }) => ({
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
fontSize: theme.typography.size.s1,
|
||||
color: theme.barTextColor,
|
||||
color: theme.textMutedColor,
|
||||
}));
|
||||
|
||||
const PositiveText = styled.span(({ theme }) => ({
|
||||
@ -60,10 +60,10 @@ export function Description({ state, ...props }: DescriptionProps) {
|
||||
);
|
||||
} else if (state.progress?.finishedAt) {
|
||||
description = (
|
||||
<RelativeTime
|
||||
timestamp={new Date(state.progress.finishedAt)}
|
||||
testCount={state.progress.numTotalTests}
|
||||
/>
|
||||
<>
|
||||
Ran {state.progress.numTotalTests} {state.progress.numTotalTests === 1 ? 'test' : 'tests'}{' '}
|
||||
<RelativeTime timestamp={state.progress.finishedAt} />
|
||||
</>
|
||||
);
|
||||
} else if (state.watching) {
|
||||
description = 'Watching for file changes';
|
||||
|
||||
@ -23,7 +23,7 @@ const MethodCallWrapper = styled.div(() => ({
|
||||
|
||||
const RowContainer = styled('div', {
|
||||
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),
|
||||
})<{ call: Call; pausedAt: Call['id'] }>(
|
||||
})<{ call: Call; pausedAt: Call['id'] | undefined }>(
|
||||
({ theme, call }) => ({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
@ -117,6 +117,9 @@ const RowMessage = styled('div')(({ theme }) => ({
|
||||
|
||||
export const Exception = ({ exception }: { exception: Call['exception'] }) => {
|
||||
const filter = useAnsiToHtmlFilter();
|
||||
if (!exception) {
|
||||
return null;
|
||||
}
|
||||
if (isJestError(exception)) {
|
||||
return <MatcherResult {...exception} />;
|
||||
}
|
||||
@ -187,7 +190,7 @@ export const Interaction = ({
|
||||
</MethodCallWrapper>
|
||||
</RowLabel>
|
||||
<RowActions>
|
||||
{childCallIds?.length > 0 && (
|
||||
{(childCallIds?.length ?? 0) > 0 && (
|
||||
<WithTooltip
|
||||
hasChrome={false}
|
||||
tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
|
||||
|
||||
@ -58,7 +58,6 @@ const meta = {
|
||||
endRef: null,
|
||||
// prop for the AddonPanel used as wrapper of Panel
|
||||
active: true,
|
||||
storyId: 'story-id',
|
||||
},
|
||||
} as Meta<typeof InteractionsPanel>;
|
||||
|
||||
|
||||
@ -44,8 +44,6 @@ interface InteractionsPanelProps {
|
||||
onScrollToEnd?: () => void;
|
||||
hasResultMismatch?: boolean;
|
||||
browserTestStatus?: CallStates;
|
||||
storyId: StoryId;
|
||||
testRunId: string;
|
||||
}
|
||||
|
||||
const Container = styled.div(({ theme }) => ({
|
||||
@ -105,20 +103,12 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
|
||||
endRef,
|
||||
hasResultMismatch,
|
||||
browserTestStatus,
|
||||
storyId,
|
||||
testRunId,
|
||||
}) {
|
||||
const filter = useAnsiToHtmlFilter();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{hasResultMismatch && (
|
||||
<TestDiscrepancyMessage
|
||||
browserTestStatus={browserTestStatus}
|
||||
storyId={storyId}
|
||||
testRunId={testRunId}
|
||||
/>
|
||||
)}
|
||||
{hasResultMismatch && <TestDiscrepancyMessage browserTestStatus={browserTestStatus} />}
|
||||
{(interactions.length > 0 || hasException) && (
|
||||
<Subnav
|
||||
controls={controls}
|
||||
|
||||
@ -74,10 +74,10 @@ export const MatcherResult = ({
|
||||
{lines.flatMap((line: string, index: number) => {
|
||||
if (line.startsWith('expect(')) {
|
||||
const received = getParams(line, 7);
|
||||
const remainderIndex = received && 7 + received.length;
|
||||
const remainderIndex = received ? 7 + received.length : 0;
|
||||
const matcher = received && line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);
|
||||
if (matcher) {
|
||||
const expectedIndex = remainderIndex + matcher.index + matcher[0].length;
|
||||
const expectedIndex = remainderIndex + (matcher.index ?? 0) + matcher[0].length;
|
||||
const expected = getParams(line, expectedIndex);
|
||||
if (expected) {
|
||||
return [
|
||||
|
||||
@ -139,7 +139,7 @@ export const Node = ({
|
||||
case Object.prototype.hasOwnProperty.call(value, '__class__'):
|
||||
return <ClassNode {...props} {...value.__class__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__callId__'):
|
||||
return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
|
||||
return <MethodCall call={callsById?.get(value.__callId__)} callsById={callsById} />;
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
case Object.prototype.toString.call(value) === '[object Object]':
|
||||
@ -418,7 +418,7 @@ export const MethodCall = ({
|
||||
callsById,
|
||||
}: {
|
||||
call?: Call;
|
||||
callsById: Map<Call['id'], Call>;
|
||||
callsById?: Map<Call['id'], Call>;
|
||||
}) => {
|
||||
// Call might be undefined during initial render, can be safely ignored.
|
||||
if (!call) {
|
||||
@ -434,7 +434,7 @@ export const MethodCall = ({
|
||||
const callId = (elem as CallRef).__callId__;
|
||||
return [
|
||||
callId ? (
|
||||
<MethodCall key={`elem${index}`} call={callsById.get(callId)} callsById={callsById} />
|
||||
<MethodCall key={`elem${index}`} call={callsById?.get(callId)} callsById={callsById} />
|
||||
) : (
|
||||
<span key={`elem${index}`}>{elem as any}</span>
|
||||
),
|
||||
|
||||
@ -19,17 +19,9 @@ import { global } from '@storybook/global';
|
||||
import { type Call, CallStates, EVENTS, type LogItem } from '@storybook/instrumenter';
|
||||
import type { API_StatusValue } from '@storybook/types';
|
||||
|
||||
import { ADDON_ID, TEST_PROVIDER_ID } from '../constants';
|
||||
import { ADDON_ID, STORYBOOK_ADDON_TEST_CHANNEL, TEST_PROVIDER_ID } from '../constants';
|
||||
import { InteractionsPanel } from './InteractionsPanel';
|
||||
|
||||
interface Interaction extends Call {
|
||||
status: Call['status'];
|
||||
childCallIds: Call['id'][];
|
||||
isHidden: boolean;
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
}
|
||||
|
||||
const INITIAL_CONTROL_STATES = {
|
||||
start: false,
|
||||
back: false,
|
||||
@ -60,7 +52,7 @@ export const getInteractions = ({
|
||||
const childCallMap = new Map<Call['id'], Call['id'][]>();
|
||||
|
||||
return log
|
||||
.map<Call & { isHidden: boolean }>(({ callId, ancestors, status }) => {
|
||||
.map(({ callId, ancestors, status }) => {
|
||||
let isHidden = false;
|
||||
ancestors.forEach((ancestor) => {
|
||||
if (collapsed.has(ancestor)) {
|
||||
@ -68,11 +60,12 @@ export const getInteractions = ({
|
||||
}
|
||||
childCallMap.set(ancestor, (childCallMap.get(ancestor) || []).concat(callId));
|
||||
});
|
||||
return { ...calls.get(callId), status, isHidden };
|
||||
return { ...calls.get(callId)!, status, isHidden };
|
||||
})
|
||||
.map<Interaction>((call) => {
|
||||
.map((call) => {
|
||||
const status =
|
||||
call.status === CallStates.ERROR &&
|
||||
call.ancestors &&
|
||||
callsById.get(call.ancestors.slice(-1)[0])?.status === CallStates.ACTIVE
|
||||
? CallStates.ACTIVE
|
||||
: call.status;
|
||||
@ -114,6 +107,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
// local state
|
||||
const [scrollTarget, setScrollTarget] = useState<HTMLElement | undefined>(undefined);
|
||||
const [collapsed, setCollapsed] = useState<Set<Call['id']>>(new Set());
|
||||
const [hasResultMismatch, setResultMismatch] = useState(false);
|
||||
|
||||
const {
|
||||
controlStates = INITIAL_CONTROL_STATES,
|
||||
@ -130,7 +124,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
const calls = useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
|
||||
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
|
||||
|
||||
const endRef = useRef();
|
||||
const endRef = useRef<HTMLDivElement>();
|
||||
useEffect(() => {
|
||||
let observer: IntersectionObserver;
|
||||
if (global.IntersectionObserver) {
|
||||
@ -150,6 +144,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
{
|
||||
[EVENTS.CALL]: setCall,
|
||||
[EVENTS.SYNC]: (payload) => {
|
||||
// @ts-expect-error TODO
|
||||
set((s) => {
|
||||
const list = getInteractions({
|
||||
log: payload.logItems,
|
||||
@ -213,6 +208,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-expect-error TODO
|
||||
set((s) => {
|
||||
const list = getInteractions({
|
||||
log: log.current,
|
||||
@ -226,7 +222,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
interactionsCount: list.filter(({ method }) => method !== 'step').length,
|
||||
};
|
||||
});
|
||||
}, [collapsed]);
|
||||
}, [set, collapsed]);
|
||||
|
||||
const controls = useMemo(
|
||||
() => ({
|
||||
@ -239,7 +235,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
emit(FORCE_REMOUNT, { storyId });
|
||||
},
|
||||
}),
|
||||
[storyId]
|
||||
[emit, storyId]
|
||||
);
|
||||
|
||||
const storyFilePath = useParameter('fileName', '');
|
||||
@ -249,25 +245,52 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
const hasException =
|
||||
!!caughtException ||
|
||||
!!unhandledErrors ||
|
||||
// @ts-expect-error TODO
|
||||
interactions.some((v) => v.status === CallStates.ERROR);
|
||||
|
||||
const storyStatus = storyStatuses[storyId]?.[TEST_PROVIDER_ID];
|
||||
const storyTestStatus = storyStatus?.status;
|
||||
|
||||
const browserTestStatus = React.useMemo<CallStates | null>(() => {
|
||||
const browserTestStatus = useMemo<CallStates | undefined>(() => {
|
||||
if (!isPlaying && (interactions.length > 0 || hasException)) {
|
||||
return hasException ? CallStates.ERROR : CallStates.DONE;
|
||||
}
|
||||
return isPlaying ? CallStates.ACTIVE : null;
|
||||
return isPlaying ? CallStates.ACTIVE : undefined;
|
||||
}, [isPlaying, interactions, hasException]);
|
||||
|
||||
const hasResultMismatch = React.useMemo(() => {
|
||||
return (
|
||||
browserTestStatus !== null &&
|
||||
browserTestStatus !== CallStates.ACTIVE &&
|
||||
storyStatus?.status !== undefined &&
|
||||
statusMap[browserTestStatus] !== storyStatus.status
|
||||
);
|
||||
}, [browserTestStatus, storyStatus]);
|
||||
const { testRunId } = storyStatus?.data || {};
|
||||
|
||||
useEffect(() => {
|
||||
const isMismatch =
|
||||
browserTestStatus &&
|
||||
storyTestStatus &&
|
||||
storyTestStatus !== 'pending' &&
|
||||
storyTestStatus !== statusMap[browserTestStatus];
|
||||
|
||||
if (isMismatch) {
|
||||
const timeout = setTimeout(
|
||||
() =>
|
||||
setResultMismatch((currentValue) => {
|
||||
if (!currentValue) {
|
||||
emit(STORYBOOK_ADDON_TEST_CHANNEL, {
|
||||
type: 'test-discrepancy',
|
||||
payload: {
|
||||
browserStatus: browserTestStatus === CallStates.DONE ? 'PASS' : 'FAIL',
|
||||
cliStatus: browserTestStatus === CallStates.DONE ? 'FAIL' : 'PASS',
|
||||
storyId,
|
||||
testRunId,
|
||||
},
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}),
|
||||
2000
|
||||
);
|
||||
return () => clearTimeout(timeout);
|
||||
} else {
|
||||
setResultMismatch(false);
|
||||
}
|
||||
}, [emit, browserTestStatus, storyTestStatus, storyId, testRunId]);
|
||||
|
||||
if (isErrored) {
|
||||
return <Fragment key="component-tests" />;
|
||||
@ -288,10 +311,9 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
|
||||
unhandledErrors={unhandledErrors}
|
||||
isPlaying={isPlaying}
|
||||
pausedAt={pausedAt}
|
||||
// @ts-expect-error TODO
|
||||
endRef={endRef}
|
||||
onScrollToEnd={scrollTarget && scrollToTarget}
|
||||
storyId={storyId}
|
||||
testRunId={storyStatus?.data?.testRunId}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
47
code/addons/test/src/components/RelativeTime.stories.tsx
Normal file
47
code/addons/test/src/components/RelativeTime.stories.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { RelativeTime } from './RelativeTime';
|
||||
|
||||
const meta = {
|
||||
component: RelativeTime,
|
||||
} satisfies Meta<typeof RelativeTime>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const JustNow: Story = {
|
||||
args: {
|
||||
timestamp: Date.now() - 1000 * 10,
|
||||
},
|
||||
};
|
||||
|
||||
export const AMinuteAgo: Story = {
|
||||
args: {
|
||||
timestamp: Date.now() - 1000 * 60,
|
||||
},
|
||||
};
|
||||
|
||||
export const MinutesAgo: Story = {
|
||||
args: {
|
||||
timestamp: Date.now() - 1000 * 60 * 2,
|
||||
},
|
||||
};
|
||||
|
||||
export const HoursAgo: Story = {
|
||||
args: {
|
||||
timestamp: Date.now() - 1000 * 60 * 60 * 3,
|
||||
},
|
||||
};
|
||||
|
||||
export const Yesterday: Story = {
|
||||
args: {
|
||||
timestamp: Date.now() - 1000 * 60 * 60 * 24,
|
||||
},
|
||||
};
|
||||
|
||||
export const DaysAgo: Story = {
|
||||
args: {
|
||||
timestamp: Date.now() - 1000 * 60 * 60 * 24 * 3,
|
||||
},
|
||||
};
|
||||
@ -1,41 +1,35 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function getRelativeTimeString(date: Date): string {
|
||||
const delta = Math.round((date.getTime() - Date.now()) / 1000);
|
||||
const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
|
||||
const units: Intl.RelativeTimeFormatUnit[] = [
|
||||
'second',
|
||||
'minute',
|
||||
'hour',
|
||||
'day',
|
||||
'week',
|
||||
'month',
|
||||
'year',
|
||||
];
|
||||
|
||||
const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
|
||||
const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
|
||||
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
|
||||
return rtf.format(Math.floor(delta / divisor), units[unitIndex]);
|
||||
}
|
||||
|
||||
export const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => {
|
||||
const [relativeTimeString, setRelativeTimeString] = useState(null);
|
||||
export const RelativeTime = ({ timestamp }: { timestamp?: number }) => {
|
||||
const [timeAgo, setTimeAgo] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (timestamp) {
|
||||
setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now'));
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now'));
|
||||
}, 10000);
|
||||
|
||||
setTimeAgo(Date.now() - timestamp);
|
||||
const interval = setInterval(() => setTimeAgo(Date.now() - timestamp), 10000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [timestamp]);
|
||||
|
||||
return (
|
||||
relativeTimeString &&
|
||||
`Ran ${testCount} ${testCount === 1 ? 'test' : 'tests'} ${relativeTimeString}`
|
||||
);
|
||||
if (timeAgo === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const seconds = Math.round(timeAgo / 1000);
|
||||
if (seconds < 60) {
|
||||
return `just now`;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) {
|
||||
return minutes === 1 ? `a minute ago` : `${minutes} minutes ago`;
|
||||
}
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) {
|
||||
return hours === 1 ? `an hour ago` : `${hours} hours ago`;
|
||||
}
|
||||
|
||||
const days = Math.floor(hours / 24);
|
||||
return days === 1 ? `yesterday` : `${days} days ago`;
|
||||
};
|
||||
|
||||
@ -14,7 +14,7 @@ const StyledBadge = styled.div<StatusBadgeProps>(({ theme, status }) => {
|
||||
[CallStates.ERROR]: theme.color.negative,
|
||||
[CallStates.ACTIVE]: theme.color.warning,
|
||||
[CallStates.WAITING]: theme.color.warning,
|
||||
}[status];
|
||||
}[status!];
|
||||
return {
|
||||
padding: '4px 6px 4px 8px;',
|
||||
borderRadius: '4px',
|
||||
@ -36,7 +36,7 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
|
||||
[CallStates.ERROR]: 'Fail',
|
||||
[CallStates.ACTIVE]: 'Runs',
|
||||
[CallStates.WAITING]: 'Runs',
|
||||
}[status];
|
||||
}[status!];
|
||||
return (
|
||||
<StyledBadge aria-label="Status of the test run" status={status}>
|
||||
{badgeText}
|
||||
|
||||
@ -109,7 +109,7 @@ const RerunButton = styled(StyledIconButton)<
|
||||
>(({ theme, animating, disabled }) => ({
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
svg: {
|
||||
animation: animating && `${theme.animation.rotate360} 200ms ease-out`,
|
||||
animation: animating ? `${theme.animation.rotate360} 200ms ease-out` : undefined,
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
@ -23,9 +23,6 @@ export default {
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
storyId: 'story-id',
|
||||
},
|
||||
decorators: [
|
||||
(storyFn) => (
|
||||
<ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { Link } from 'storybook/internal/components';
|
||||
import { useStorybookApi } from 'storybook/internal/manager-api';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
import type { StoryId } from 'storybook/internal/types';
|
||||
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
|
||||
import { DOCUMENTATION_DISCREPANCY_LINK, STORYBOOK_ADDON_TEST_CHANNEL } from '../constants';
|
||||
import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
|
||||
|
||||
const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
|
||||
textAlign: 'start',
|
||||
@ -32,40 +31,24 @@ const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
|
||||
}));
|
||||
|
||||
interface TestDiscrepancyMessageProps {
|
||||
browserTestStatus: CallStates;
|
||||
storyId: StoryId;
|
||||
testRunId: string;
|
||||
browserTestStatus?: CallStates;
|
||||
}
|
||||
export const TestDiscrepancyMessage = ({
|
||||
browserTestStatus,
|
||||
storyId,
|
||||
testRunId,
|
||||
}: TestDiscrepancyMessageProps) => {
|
||||
|
||||
export const TestDiscrepancyMessage = ({ browserTestStatus }: TestDiscrepancyMessageProps) => {
|
||||
const api = useStorybookApi();
|
||||
const docsUrl = api.getDocsUrl({
|
||||
subpath: DOCUMENTATION_DISCREPANCY_LINK,
|
||||
versioned: true,
|
||||
renderer: true,
|
||||
});
|
||||
const message = `This component test passed in ${browserTestStatus === CallStates.DONE ? 'this browser' : 'CLI'}, but the tests failed in ${browserTestStatus === CallStates.ERROR ? 'this browser' : 'CLI'}.`;
|
||||
|
||||
useEffect(
|
||||
() =>
|
||||
api.emit(STORYBOOK_ADDON_TEST_CHANNEL, {
|
||||
type: 'test-discrepancy',
|
||||
payload: {
|
||||
browserStatus: browserTestStatus === CallStates.DONE ? 'PASS' : 'FAIL',
|
||||
cliStatus: browserTestStatus === CallStates.DONE ? 'FAIL' : 'PASS',
|
||||
storyId,
|
||||
testRunId,
|
||||
},
|
||||
}),
|
||||
[api, browserTestStatus, storyId, testRunId]
|
||||
);
|
||||
const [passed, failed] =
|
||||
browserTestStatus === CallStates.ERROR
|
||||
? ['the CLI', 'this browser']
|
||||
: ['this browser', 'the CLI'];
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{message}{' '}
|
||||
This component test passed in {passed}, but the tests failed in {failed}.{' '}
|
||||
<Link href={docsUrl} target="_blank" withArrow>
|
||||
Learn what could cause this
|
||||
</Link>
|
||||
|
||||
@ -43,7 +43,7 @@ const baseState: TestProviderState<Details, Config> = {
|
||||
cancellable: true,
|
||||
cancelling: false,
|
||||
crashed: false,
|
||||
error: null,
|
||||
error: undefined,
|
||||
failed: false,
|
||||
running: false,
|
||||
watching: false,
|
||||
@ -52,6 +52,10 @@ const baseState: TestProviderState<Details, Config> = {
|
||||
coverage: false,
|
||||
},
|
||||
details: {
|
||||
config: {
|
||||
a11y: false,
|
||||
coverage: false,
|
||||
},
|
||||
testResults: [
|
||||
{
|
||||
endTime: 0,
|
||||
@ -141,6 +145,10 @@ export const WithCoverageNegative: Story = {
|
||||
...config,
|
||||
...baseState,
|
||||
details: {
|
||||
config: {
|
||||
a11y: false,
|
||||
coverage: true,
|
||||
},
|
||||
testResults: [],
|
||||
coverageSummary: {
|
||||
percentage: 20,
|
||||
@ -162,6 +170,10 @@ export const WithCoverageWarning: Story = {
|
||||
...baseState,
|
||||
details: {
|
||||
testResults: [],
|
||||
config: {
|
||||
a11y: false,
|
||||
coverage: true,
|
||||
},
|
||||
coverageSummary: {
|
||||
percentage: 50,
|
||||
status: 'warning',
|
||||
@ -182,6 +194,10 @@ export const WithCoveragePositive: Story = {
|
||||
...baseState,
|
||||
details: {
|
||||
testResults: [],
|
||||
config: {
|
||||
a11y: false,
|
||||
coverage: true,
|
||||
},
|
||||
coverageSummary: {
|
||||
percentage: 80,
|
||||
status: 'positive',
|
||||
@ -206,6 +222,10 @@ export const Editing: Story = {
|
||||
},
|
||||
details: {
|
||||
testResults: [],
|
||||
config: {
|
||||
a11y: false,
|
||||
coverage: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -229,6 +249,10 @@ export const EditingAndWatching: Story = {
|
||||
},
|
||||
details: {
|
||||
testResults: [],
|
||||
config: {
|
||||
a11y: true,
|
||||
coverage: true, // should be automatically disabled in the UI
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -76,6 +76,16 @@ const StopIcon = styled(StopAltIcon)({
|
||||
width: 10,
|
||||
});
|
||||
|
||||
const ItemTitle = styled.span<{ enabled?: boolean }>(
|
||||
({ enabled, theme }) =>
|
||||
!enabled && {
|
||||
color: theme.textMutedColor,
|
||||
'&:after': {
|
||||
content: '" (disabled)"',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const statusOrder: TestStatus[] = ['failed', 'warning', 'pending', 'passed', 'skipped'];
|
||||
const statusMap: Record<TestStatus, ComponentProps<typeof TestStatusIcon>['status']> = {
|
||||
failed: 'negative',
|
||||
@ -104,6 +114,8 @@ export const TestProviderRender: FC<
|
||||
state.config || { a11y: false, coverage: false }
|
||||
);
|
||||
|
||||
const isStoryEntry = entryId?.includes('--') ?? false;
|
||||
|
||||
const a11yResults = useMemo(() => {
|
||||
if (!isA11yAddon) {
|
||||
return [];
|
||||
@ -118,16 +130,22 @@ export const TestProviderRender: FC<
|
||||
}, [isA11yAddon, state.details?.testResults, entryId]);
|
||||
|
||||
const a11yStatus = useMemo<'positive' | 'warning' | 'negative' | 'unknown'>(() => {
|
||||
if (state.running) {
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
if (!isA11yAddon || config.a11y === false) {
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
if (!a11yResults) {
|
||||
const definedA11yResults = a11yResults?.filter(Boolean) ?? [];
|
||||
|
||||
if (!definedA11yResults || definedA11yResults.length === 0) {
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
const failed = a11yResults.some((result) => result?.status === 'failed');
|
||||
const warning = a11yResults.some((result) => result?.status === 'warning');
|
||||
const failed = definedA11yResults.some((result) => result?.status === 'failed');
|
||||
const warning = definedA11yResults.some((result) => result?.status === 'warning');
|
||||
|
||||
if (failed) {
|
||||
return 'negative';
|
||||
@ -136,13 +154,26 @@ export const TestProviderRender: FC<
|
||||
}
|
||||
|
||||
return 'positive';
|
||||
}, [a11yResults, isA11yAddon, config.a11y]);
|
||||
}, [state.running, isA11yAddon, config.a11y, a11yResults]);
|
||||
|
||||
const a11yNotPassedAmount = a11yResults?.filter(
|
||||
(result) => result?.status === 'failed' || result?.status === 'warning'
|
||||
).length;
|
||||
const a11yNotPassedAmount = state.config?.a11y
|
||||
? a11yResults?.filter((result) => result?.status === 'failed' || result?.status === 'warning')
|
||||
.length
|
||||
: undefined;
|
||||
|
||||
const a11ySkippedAmount =
|
||||
state.running || !state?.details.config?.a11y || !state.config?.a11y
|
||||
? null
|
||||
: a11yResults?.filter((result) => !result).length;
|
||||
|
||||
const a11ySkippedLabel = a11ySkippedAmount
|
||||
? a11ySkippedAmount === 1 && isStoryEntry
|
||||
? '(skipped)'
|
||||
: `(${a11ySkippedAmount} skipped)`
|
||||
: '';
|
||||
|
||||
const storyId = isStoryEntry ? entryId : undefined;
|
||||
|
||||
const storyId = entryId?.includes('--') ? entryId : undefined;
|
||||
const results = (state.details?.testResults || [])
|
||||
.flatMap((test) => {
|
||||
if (!entryId) {
|
||||
@ -154,7 +185,11 @@ export const TestProviderRender: FC<
|
||||
})
|
||||
.sort((a, b) => statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status));
|
||||
|
||||
const status = (state.failed ? 'failed' : results[0]?.status) || 'unknown';
|
||||
const status = state.running
|
||||
? 'unknown'
|
||||
: state.failed
|
||||
? 'failed'
|
||||
: (results[0]?.status ?? 'unknown');
|
||||
|
||||
const openPanel = (id: string, panelId: string) => {
|
||||
api.selectStory(id);
|
||||
@ -233,7 +268,7 @@ export const TestProviderRender: FC<
|
||||
/>
|
||||
<ListItem
|
||||
as="label"
|
||||
title="Coverage"
|
||||
title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
|
||||
icon={<ShieldIcon color={theme.textMutedColor} />}
|
||||
right={
|
||||
<Checkbox
|
||||
@ -247,7 +282,7 @@ export const TestProviderRender: FC<
|
||||
{isA11yAddon && (
|
||||
<ListItem
|
||||
as="label"
|
||||
title="Accessibility"
|
||||
title={<ItemTitle enabled={config.a11y}>Accessibility</ItemTitle>}
|
||||
icon={<AccessibilityIcon color={theme.textMutedColor} />}
|
||||
right={
|
||||
<Checkbox
|
||||
@ -269,9 +304,11 @@ export const TestProviderRender: FC<
|
||||
const firstNotPassed = results.find(
|
||||
(r) => r.status === 'failed' || r.status === 'warning'
|
||||
);
|
||||
openPanel(firstNotPassed.storyId, PANEL_ID);
|
||||
if (firstNotPassed) {
|
||||
openPanel(firstNotPassed.storyId, PANEL_ID);
|
||||
}
|
||||
}
|
||||
: null
|
||||
: undefined
|
||||
}
|
||||
icon={
|
||||
state.crashed ? (
|
||||
@ -285,10 +322,11 @@ export const TestProviderRender: FC<
|
||||
/>
|
||||
{coverageSummary ? (
|
||||
<ListItem
|
||||
title="Coverage"
|
||||
title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
|
||||
href={'/coverage/index.html'}
|
||||
// @ts-expect-error ListItem doesn't include all anchor attributes in types, but it is an achor element
|
||||
target="_blank"
|
||||
aria-label="Open coverage report"
|
||||
icon={
|
||||
<TestStatusIcon
|
||||
percentage={coverageSummary.percentage}
|
||||
@ -296,17 +334,23 @@ export const TestProviderRender: FC<
|
||||
aria-label={`status: ${coverageSummary.status}`}
|
||||
/>
|
||||
}
|
||||
right={`${coverageSummary.percentage}%`}
|
||||
right={
|
||||
coverageSummary.percentage ? (
|
||||
<span aria-label={`${coverageSummary.percentage} percent coverage`}>
|
||||
{coverageSummary.percentage} %
|
||||
</span>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ListItem
|
||||
title="Coverage"
|
||||
title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
|
||||
icon={<TestStatusIcon status="unknown" aria-label={`status: unknown`} />}
|
||||
/>
|
||||
)}
|
||||
{isA11yAddon && (
|
||||
<ListItem
|
||||
title="Accessibility"
|
||||
title={<ItemTitle enabled={config.a11y}>Accessibility {a11ySkippedLabel}</ItemTitle>}
|
||||
onClick={
|
||||
(a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
|
||||
? () => {
|
||||
@ -317,12 +361,14 @@ export const TestProviderRender: FC<
|
||||
(report) => report.status === 'failed' || report.status === 'warning'
|
||||
)
|
||||
);
|
||||
openPanel(firstNotPassed.storyId, A11y_ADDON_PANEL_ID);
|
||||
if (firstNotPassed) {
|
||||
openPanel(firstNotPassed.storyId, A11y_ADDON_PANEL_ID);
|
||||
}
|
||||
}
|
||||
: null
|
||||
: undefined
|
||||
}
|
||||
icon={<TestStatusIcon status={a11yStatus} aria-label={`status: ${a11yStatus}`} />}
|
||||
right={a11yNotPassedAmount || null}
|
||||
right={isStoryEntry ? null : a11yNotPassedAmount || null}
|
||||
/>
|
||||
)}
|
||||
</Extras>
|
||||
|
||||
@ -12,6 +12,13 @@ export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happen
|
||||
|
||||
export const COVERAGE_DIRECTORY = 'coverage';
|
||||
|
||||
export const SUPPORTED_FRAMEWORKS = [
|
||||
'@storybook/nextjs',
|
||||
'@storybook/experimental-nextjs-vite',
|
||||
'@storybook/sveltekit',
|
||||
];
|
||||
|
||||
export const SUPPORTED_RENDERERS = ['@storybook/react', '@storybook/svelte', '@storybook/vue3'];
|
||||
export interface Config {
|
||||
coverage: boolean;
|
||||
a11y: boolean;
|
||||
@ -19,6 +26,7 @@ export interface Config {
|
||||
|
||||
export type Details = {
|
||||
testResults: TestResult[];
|
||||
config: Config;
|
||||
coverageSummary?: {
|
||||
status: 'positive' | 'warning' | 'negative' | 'unknown';
|
||||
percentage: number;
|
||||
|
||||
@ -38,6 +38,7 @@ addons.register(ADDON_ID, (api) => {
|
||||
runnable: true,
|
||||
watchable: true,
|
||||
name: 'Component tests',
|
||||
// @ts-expect-error: TODO: Fix types
|
||||
render: (state) => {
|
||||
const [isModalOpen, setModalOpen] = useState(false);
|
||||
return (
|
||||
@ -55,6 +56,7 @@ addons.register(ADDON_ID, (api) => {
|
||||
);
|
||||
},
|
||||
|
||||
// @ts-expect-error: TODO: Fix types
|
||||
sidebarContextMenu: ({ context, state }) => {
|
||||
if (context.type === 'docs') {
|
||||
return null;
|
||||
@ -72,67 +74,81 @@ addons.register(ADDON_ID, (api) => {
|
||||
);
|
||||
},
|
||||
|
||||
// @ts-expect-error: TODO: Fix types
|
||||
stateUpdater: (state, update) => {
|
||||
if (!update.details?.testResults) {
|
||||
return;
|
||||
const updated = {
|
||||
...state,
|
||||
...update,
|
||||
details: { ...state.details, ...update.details },
|
||||
};
|
||||
|
||||
if ((!state.running && update.running) || (!state.watching && update.watching)) {
|
||||
// Clear coverage data when starting test run or enabling watch mode
|
||||
delete updated.details.coverageSummary;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
await api.experimental_updateStatus(
|
||||
TEST_PROVIDER_ID,
|
||||
Object.fromEntries(
|
||||
update.details.testResults.flatMap((testResult) =>
|
||||
testResult.results
|
||||
.filter(({ storyId }) => storyId)
|
||||
.map(({ storyId, status, testRunId, ...rest }) => [
|
||||
storyId,
|
||||
{
|
||||
title: 'Component tests',
|
||||
status: statusMap[status],
|
||||
description:
|
||||
'failureMessages' in rest && rest.failureMessages
|
||||
? rest.failureMessages.join('\n')
|
||||
: '',
|
||||
data: { testRunId },
|
||||
onClick: openTestsPanel,
|
||||
sidebarContextMenu: false,
|
||||
} satisfies API_StatusObject,
|
||||
])
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
await api.experimental_updateStatus(
|
||||
'storybook/addon-a11y/test-provider',
|
||||
Object.fromEntries(
|
||||
update.details.testResults.flatMap((testResult) =>
|
||||
testResult.results
|
||||
.filter(({ storyId }) => storyId)
|
||||
.map(({ storyId, testRunId, reports }) => {
|
||||
const a11yReport = reports.find((r: any) => r.type === 'a11y');
|
||||
return [
|
||||
if (update.details?.testResults) {
|
||||
(async () => {
|
||||
await api.experimental_updateStatus(
|
||||
TEST_PROVIDER_ID,
|
||||
Object.fromEntries(
|
||||
// @ts-expect-error: TODO: Fix types
|
||||
update.details.testResults.flatMap((testResult) =>
|
||||
testResult.results
|
||||
.filter(({ storyId }) => storyId)
|
||||
.map(({ storyId, status, testRunId, ...rest }) => [
|
||||
storyId,
|
||||
a11yReport
|
||||
? ({
|
||||
title: 'Accessibility tests',
|
||||
description: '',
|
||||
status: statusMap[a11yReport.status],
|
||||
data: { testRunId },
|
||||
onClick: () => {
|
||||
api.setSelectedPanel('storybook/a11y/panel');
|
||||
api.togglePanel(true);
|
||||
},
|
||||
sidebarContextMenu: false,
|
||||
} satisfies API_StatusObject)
|
||||
: null,
|
||||
];
|
||||
})
|
||||
{
|
||||
title: 'Component tests',
|
||||
status: statusMap[status],
|
||||
description:
|
||||
'failureMessages' in rest && rest.failureMessages
|
||||
? rest.failureMessages.join('\n')
|
||||
: '',
|
||||
data: { testRunId },
|
||||
onClick: openTestsPanel,
|
||||
sidebarContextMenu: false,
|
||||
} satisfies API_StatusObject,
|
||||
])
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
})();
|
||||
);
|
||||
|
||||
await api.experimental_updateStatus(
|
||||
'storybook/addon-a11y/test-provider',
|
||||
Object.fromEntries(
|
||||
// @ts-expect-error: TODO: Fix types
|
||||
update.details.testResults.flatMap((testResult) =>
|
||||
testResult.results
|
||||
.filter(({ storyId }) => storyId)
|
||||
.map(({ storyId, testRunId, reports }) => {
|
||||
const a11yReport = reports.find((r: any) => r.type === 'a11y');
|
||||
return [
|
||||
storyId,
|
||||
a11yReport
|
||||
? ({
|
||||
title: 'Accessibility tests',
|
||||
description: '',
|
||||
status: statusMap[a11yReport.status],
|
||||
data: { testRunId },
|
||||
onClick: () => {
|
||||
api.setSelectedPanel('storybook/a11y/panel');
|
||||
api.togglePanel(true);
|
||||
},
|
||||
sidebarContextMenu: false,
|
||||
} satisfies API_StatusObject)
|
||||
: null,
|
||||
];
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
})();
|
||||
}
|
||||
|
||||
return updated;
|
||||
},
|
||||
} as Addon_TestProviderType<Details, Config>);
|
||||
} satisfies Omit<Addon_TestProviderType<Details, Config>, 'id'>);
|
||||
}
|
||||
|
||||
const filter = ({ state }: Combo) => {
|
||||
@ -147,7 +163,7 @@ addons.register(ADDON_ID, (api) => {
|
||||
match: ({ viewMode }) => viewMode === 'story',
|
||||
render: ({ active }) => {
|
||||
return (
|
||||
<AddonPanel active={active}>
|
||||
<AddonPanel active={!!active}>
|
||||
<Consumer filter={filter}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
|
||||
</AddonPanel>
|
||||
);
|
||||
|
||||
@ -24,7 +24,7 @@ const MAX_START_TIME = 30000;
|
||||
const vitestModulePath = join(__dirname, 'node', 'vitest.mjs');
|
||||
|
||||
// Events that were triggered before Vitest was ready are queued up and resent once it's ready
|
||||
const eventQueue: { type: string; args: any[] }[] = [];
|
||||
const eventQueue: { type: string; args?: any[] }[] = [];
|
||||
|
||||
let child: null | ChildProcess;
|
||||
let ready = false;
|
||||
@ -87,7 +87,7 @@ const bootTestRunner = async (channel: Channel) => {
|
||||
if (result.type === 'ready') {
|
||||
// Resend events that triggered (during) the boot sequence, now that Vitest is ready
|
||||
while (eventQueue.length) {
|
||||
const { type, args } = eventQueue.shift();
|
||||
const { type, args } = eventQueue.shift()!;
|
||||
child?.send({ type, args, from: 'server' });
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import type { TestManager } from './test-manager';
|
||||
|
||||
export type StorybookCoverageReporterOptions = {
|
||||
testManager: TestManager;
|
||||
coverageOptions: ResolvedCoverageOptions<'v8'>;
|
||||
coverageOptions: ResolvedCoverageOptions<'v8'> | undefined;
|
||||
};
|
||||
|
||||
export default class StorybookCoverageReporter extends ReportBase implements Partial<Visitor> {
|
||||
@ -32,7 +32,7 @@ export default class StorybookCoverageReporter extends ReportBase implements Par
|
||||
|
||||
// Fallback to Vitest's default watermarks https://vitest.dev/config/#coverage-watermarks
|
||||
const [lowWatermark = 50, highWatermark = 80] =
|
||||
this.#coverageOptions.watermarks?.statements ?? [];
|
||||
this.#coverageOptions?.watermarks?.statements ?? [];
|
||||
|
||||
const coverageDetails: Details['coverageSummary'] = {
|
||||
percentage,
|
||||
|
||||
@ -173,6 +173,7 @@ export class StorybookReporter implements Reporter {
|
||||
} as TestingModuleProgressReportProgress,
|
||||
details: {
|
||||
testResults,
|
||||
config: this.testManager.config,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -219,7 +220,7 @@ export class StorybookReporter implements Reporter {
|
||||
(t) => t.status === 'failed' && t.results.length === 0
|
||||
);
|
||||
|
||||
const reducedTestSuiteFailures = new Set<string>();
|
||||
const reducedTestSuiteFailures = new Set<string | undefined>();
|
||||
|
||||
testSuiteFailures.forEach((t) => {
|
||||
reducedTestSuiteFailures.add(t.message);
|
||||
@ -239,7 +240,7 @@ export class StorybookReporter implements Reporter {
|
||||
message: Array.from(reducedTestSuiteFailures).reduce(
|
||||
(acc, curr) => `${acc}\n${curr}`,
|
||||
''
|
||||
),
|
||||
)!,
|
||||
}
|
||||
: {
|
||||
name: `${unhandledErrors.length} unhandled error${unhandledErrors?.length > 1 ? 's' : ''}`,
|
||||
|
||||
@ -22,10 +22,11 @@ const vitest = vi.hoisted(() => ({
|
||||
configOverride: {
|
||||
actualTestNamePattern: undefined,
|
||||
get testNamePattern() {
|
||||
return this.actualTestNamePattern;
|
||||
return this.actualTestNamePattern!;
|
||||
},
|
||||
set testNamePattern(value: string) {
|
||||
setTestNamePattern(value);
|
||||
// @ts-expect-error Ignore for testing
|
||||
this.actualTestNamePattern = value;
|
||||
},
|
||||
},
|
||||
@ -105,11 +106,11 @@ describe('TestManager', () => {
|
||||
|
||||
it('should handle watch mode request', async () => {
|
||||
const testManager = await TestManager.start(mockChannel, options);
|
||||
expect(testManager.watchMode).toBe(false);
|
||||
expect(testManager.config.watchMode).toBe(false);
|
||||
expect(createVitest).toHaveBeenCalledTimes(1);
|
||||
|
||||
await testManager.handleWatchModeRequest({ providerId: TEST_PROVIDER_ID, watchMode: true });
|
||||
expect(testManager.watchMode).toBe(true);
|
||||
expect(testManager.config.watchMode).toBe(true);
|
||||
expect(createVitest).toHaveBeenCalledTimes(1); // shouldn't restart vitest
|
||||
});
|
||||
|
||||
@ -149,7 +150,7 @@ describe('TestManager', () => {
|
||||
|
||||
it('should handle coverage toggling', async () => {
|
||||
const testManager = await TestManager.start(mockChannel, options);
|
||||
expect(testManager.coverage).toBe(false);
|
||||
expect(testManager.config.coverage).toBe(false);
|
||||
expect(createVitest).toHaveBeenCalledTimes(1);
|
||||
createVitest.mockClear();
|
||||
|
||||
@ -157,7 +158,7 @@ describe('TestManager', () => {
|
||||
providerId: TEST_PROVIDER_ID,
|
||||
config: { coverage: true, a11y: false },
|
||||
});
|
||||
expect(testManager.coverage).toBe(true);
|
||||
expect(testManager.config.coverage).toBe(true);
|
||||
expect(createVitest).toHaveBeenCalledTimes(1);
|
||||
createVitest.mockClear();
|
||||
|
||||
@ -165,21 +166,21 @@ describe('TestManager', () => {
|
||||
providerId: TEST_PROVIDER_ID,
|
||||
config: { coverage: false, a11y: false },
|
||||
});
|
||||
expect(testManager.coverage).toBe(false);
|
||||
expect(testManager.config.coverage).toBe(false);
|
||||
expect(createVitest).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should temporarily disable coverage on focused tests', async () => {
|
||||
vitest.globTestSpecs.mockImplementation(() => tests);
|
||||
const testManager = await TestManager.start(mockChannel, options);
|
||||
expect(testManager.coverage).toBe(false);
|
||||
expect(testManager.config.coverage).toBe(false);
|
||||
expect(createVitest).toHaveBeenCalledTimes(1);
|
||||
|
||||
await testManager.handleConfigChange({
|
||||
providerId: TEST_PROVIDER_ID,
|
||||
config: { coverage: true, a11y: false },
|
||||
});
|
||||
expect(testManager.coverage).toBe(true);
|
||||
expect(testManager.config.coverage).toBe(true);
|
||||
expect(createVitest).toHaveBeenCalledTimes(2);
|
||||
|
||||
await testManager.handleRunRequest({
|
||||
|
||||
@ -18,9 +18,11 @@ import { VitestManager } from './vitest-manager';
|
||||
export class TestManager {
|
||||
vitestManager: VitestManager;
|
||||
|
||||
watchMode = false;
|
||||
|
||||
coverage = false;
|
||||
config = {
|
||||
watchMode: false,
|
||||
coverage: false,
|
||||
a11y: false,
|
||||
};
|
||||
|
||||
constructor(
|
||||
private channel: Channel,
|
||||
@ -44,23 +46,22 @@ export class TestManager {
|
||||
return;
|
||||
}
|
||||
|
||||
const previousConfig = this.config;
|
||||
|
||||
this.config = {
|
||||
...this.config,
|
||||
...payload.config,
|
||||
} satisfies Config;
|
||||
|
||||
process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(payload.config);
|
||||
|
||||
if (this.coverage !== payload.config.coverage) {
|
||||
this.coverage = payload.config.coverage;
|
||||
if (previousConfig.coverage !== payload.config.coverage) {
|
||||
try {
|
||||
await this.vitestManager.restartVitest({
|
||||
coverage: this.coverage,
|
||||
coverage: this.config.coverage,
|
||||
});
|
||||
} catch (e) {
|
||||
const isV8 = e.message?.includes('@vitest/coverage-v8');
|
||||
const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
|
||||
|
||||
if (e.message?.includes('Error: Failed to load url') && (isIstanbul || isV8)) {
|
||||
const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
|
||||
e.message = `Please install the @vitest/${coveragePackage} package to run with coverage`;
|
||||
}
|
||||
this.reportFatalError('Failed to change coverage mode', e);
|
||||
this.reportFatalError('Failed to change coverage configuration', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,7 +70,7 @@ export class TestManager {
|
||||
if (payload.providerId !== TEST_PROVIDER_ID) {
|
||||
return;
|
||||
}
|
||||
this.watchMode = payload.watchMode;
|
||||
this.config.watchMode = payload.watchMode;
|
||||
|
||||
if (payload.config) {
|
||||
this.handleConfigChange({
|
||||
@ -78,14 +79,14 @@ export class TestManager {
|
||||
});
|
||||
}
|
||||
|
||||
if (this.coverage) {
|
||||
if (this.config.coverage) {
|
||||
try {
|
||||
if (payload.watchMode) {
|
||||
// if watch mode is toggled on and coverage is already enabled, restart vitest without coverage to automatically disable it
|
||||
await this.vitestManager.restartVitest({ coverage: false });
|
||||
} else {
|
||||
// if watch mode is toggled off and coverage is already enabled, restart vitest with coverage to automatically re-enable it
|
||||
await this.vitestManager.restartVitest({ coverage: this.coverage });
|
||||
await this.vitestManager.restartVitest({ coverage: this.config.coverage });
|
||||
}
|
||||
} catch (e) {
|
||||
this.reportFatalError('Failed to change watch mode while coverage was enabled', e);
|
||||
@ -111,7 +112,7 @@ export class TestManager {
|
||||
as a coverage report for a subset of stories is not useful.
|
||||
*/
|
||||
const temporarilyDisableCoverage =
|
||||
this.coverage && !this.watchMode && (payload.storyIds ?? []).length > 0;
|
||||
this.config.coverage && !this.config.watchMode && (payload.storyIds ?? []).length > 0;
|
||||
if (temporarilyDisableCoverage) {
|
||||
await this.vitestManager.restartVitest({
|
||||
coverage: false,
|
||||
@ -124,7 +125,7 @@ export class TestManager {
|
||||
|
||||
if (temporarilyDisableCoverage) {
|
||||
// Re-enable coverage if it was temporarily disabled because of a subset of stories was run
|
||||
await this.vitestManager.restartVitest({ coverage: this.coverage });
|
||||
await this.vitestManager.restartVitest({ coverage: this.config.coverage });
|
||||
}
|
||||
} catch (e) {
|
||||
this.reportFatalError('Failed to run tests', e);
|
||||
|
||||
@ -14,7 +14,7 @@ import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-eve
|
||||
|
||||
import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types';
|
||||
|
||||
import path, { normalize } from 'pathe';
|
||||
import path, { dirname, join, normalize } from 'pathe';
|
||||
import slash from 'slash';
|
||||
|
||||
import { COVERAGE_DIRECTORY, type Config } from '../constants';
|
||||
@ -29,6 +29,11 @@ type TagsFilter = {
|
||||
skip: string[];
|
||||
};
|
||||
|
||||
const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
|
||||
|
||||
// We have to tell Vitest that it runs as part of Storybook
|
||||
process.env.VITEST_STORYBOOK = 'true';
|
||||
|
||||
export class VitestManager {
|
||||
vitest: Vitest | null = null;
|
||||
|
||||
@ -44,10 +49,10 @@ export class VitestManager {
|
||||
const { createVitest } = await import('vitest/node');
|
||||
|
||||
const storybookCoverageReporter: [string, StorybookCoverageReporterOptions] = [
|
||||
'@storybook/experimental-addon-test/internal/coverage-reporter',
|
||||
join(packageDir, 'dist/node/coverage-reporter.js'),
|
||||
{
|
||||
testManager: this.testManager,
|
||||
coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'>,
|
||||
coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'> | undefined,
|
||||
},
|
||||
];
|
||||
const coverageOptions = (
|
||||
@ -63,31 +68,17 @@ export class VitestManager {
|
||||
: { enabled: false }
|
||||
) as CoverageOptions;
|
||||
|
||||
this.vitest = await createVitest(
|
||||
'test',
|
||||
{
|
||||
watch: true,
|
||||
passWithNoTests: false,
|
||||
// TODO:
|
||||
// Do we want to enable Vite's default reporter?
|
||||
// The output in the terminal might be too spamy and it might be better to
|
||||
// find a way to just show errors and warnings for example
|
||||
// Otherwise it might be hard for the user to discover Storybook related logs
|
||||
reporters: ['default', new StorybookReporter(this.testManager)],
|
||||
coverage: coverageOptions,
|
||||
},
|
||||
{
|
||||
define: {
|
||||
// polyfilling process.env.VITEST_STORYBOOK to 'true' in the browser
|
||||
'process.env.VITEST_STORYBOOK': 'true',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
this.vitest.configOverride.env = {
|
||||
// We signal to the test runner that we are running it via Storybook
|
||||
VITEST_STORYBOOK: 'true',
|
||||
};
|
||||
this.vitest = await createVitest('test', {
|
||||
watch: true,
|
||||
passWithNoTests: false,
|
||||
// TODO:
|
||||
// Do we want to enable Vite's default reporter?
|
||||
// The output in the terminal might be too spamy and it might be better to
|
||||
// find a way to just show errors and warnings for example
|
||||
// Otherwise it might be hard for the user to discover Storybook related logs
|
||||
reporters: ['default', new StorybookReporter(this.testManager)],
|
||||
coverage: coverageOptions,
|
||||
});
|
||||
|
||||
if (this.vitest) {
|
||||
this.vitest.onCancel(() => {
|
||||
@ -97,16 +88,22 @@ export class VitestManager {
|
||||
|
||||
try {
|
||||
await this.vitest.init();
|
||||
} catch (e) {
|
||||
} catch (e: any) {
|
||||
let message = 'Failed to initialize Vitest';
|
||||
const isV8 = e.message?.includes('@vitest/coverage-v8');
|
||||
const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
|
||||
|
||||
if (e.message?.includes('Error: Failed to load url') && (isIstanbul || isV8)) {
|
||||
if (
|
||||
(e.message?.includes('Failed to load url') && (isIstanbul || isV8)) ||
|
||||
// Vitest will sometimes not throw the correct missing-package-detection error, so we have to check for this as well
|
||||
(e instanceof TypeError &&
|
||||
e?.message === "Cannot read properties of undefined (reading 'name')")
|
||||
) {
|
||||
const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
|
||||
e.message = `Please install the @vitest/${coveragePackage} package to run with coverage`;
|
||||
message += `\n\nPlease install the @vitest/${coveragePackage} package to collect coverage\n`;
|
||||
}
|
||||
|
||||
this.testManager.reportFatalError('Failed to init Vitest', e);
|
||||
this.testManager.reportFatalError(message, e);
|
||||
return;
|
||||
}
|
||||
|
||||
await this.setupWatchers();
|
||||
@ -151,7 +148,7 @@ export class VitestManager {
|
||||
])) as StoryIndex;
|
||||
const storyIds = requestStoryIds || Object.keys(index.entries);
|
||||
return storyIds.map((id) => index.entries[id]).filter((story) => story.type === 'story');
|
||||
} catch (e) {
|
||||
} catch (e: any) {
|
||||
log('Failed to fetch story index: ' + e.message);
|
||||
return [];
|
||||
}
|
||||
@ -202,7 +199,7 @@ export class VitestManager {
|
||||
this.filterStories(story, spec.moduleId, { include, exclude, skip })
|
||||
);
|
||||
if (matches.length) {
|
||||
if (!this.testManager.watchMode) {
|
||||
if (!this.testManager.config.watchMode) {
|
||||
// Clear the file cache if watch mode is not enabled
|
||||
this.updateLastChanged(spec.moduleId);
|
||||
}
|
||||
@ -319,20 +316,21 @@ export class VitestManager {
|
||||
const id = slash(file);
|
||||
this.vitest?.logger.clearHighlightCache(id);
|
||||
this.updateLastChanged(id);
|
||||
this.storyCountForCurrentRun = 0;
|
||||
|
||||
// when watch mode is disabled, don't trigger any tests (below)
|
||||
// but still invalidate the cache for the changed file, which is handled above
|
||||
if (!this.testManager.watchMode) {
|
||||
if (!this.testManager.config.watchMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.storyCountForCurrentRun = 0;
|
||||
await this.runAffectedTests(file);
|
||||
}
|
||||
|
||||
async registerVitestConfigListener() {
|
||||
this.vitest?.server?.watcher.on('change', async (file) => {
|
||||
file = normalize(file);
|
||||
const isConfig = file === this.vitest.server.config.configFile;
|
||||
const isConfig = file === this.vitest?.server.config.configFile;
|
||||
if (isConfig) {
|
||||
log('Restarting Vitest due to config change');
|
||||
await this.closeVitest();
|
||||
|
||||
@ -16,7 +16,7 @@ import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
|
||||
import { colors, logger } from 'storybook/internal/node-logger';
|
||||
|
||||
// eslint-disable-next-line depend/ban-dependencies
|
||||
import { execa } from 'execa';
|
||||
import { $ } from 'execa';
|
||||
import { findUp } from 'find-up';
|
||||
import { dirname, extname, join, relative, resolve } from 'pathe';
|
||||
import picocolors from 'picocolors';
|
||||
@ -25,6 +25,7 @@ import { coerce, satisfies } from 'semver';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
|
||||
import { SUPPORTED_FRAMEWORKS, SUPPORTED_RENDERERS } from './constants';
|
||||
import { printError, printInfo, printSuccess, step } from './postinstall-logger';
|
||||
import { getAddonNames } from './utils';
|
||||
|
||||
@ -55,8 +56,7 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
const allDeps = await packageManager.getAllDependencies();
|
||||
// only install these dependencies if they are not already installed
|
||||
const dependencies = ['vitest', '@vitest/browser', 'playwright'].filter((p) => !allDeps[p]);
|
||||
const vitestVersionSpecifier =
|
||||
allDeps.vitest || (await packageManager.getInstalledVersion('vitest'));
|
||||
const vitestVersionSpecifier = await packageManager.getInstalledVersion('vitest');
|
||||
const coercedVitestVersion = vitestVersionSpecifier ? coerce(vitestVersionSpecifier) : null;
|
||||
// if Vitest is installed, we use the same version to keep consistency across Vitest packages
|
||||
const vitestVersionToInstall = vitestVersionSpecifier ?? 'latest';
|
||||
@ -106,18 +106,11 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
}
|
||||
}
|
||||
|
||||
const annotationsImport = [
|
||||
'@storybook/nextjs',
|
||||
'@storybook/experimental-nextjs-vite',
|
||||
'@storybook/sveltekit',
|
||||
].includes(info.frameworkPackageName)
|
||||
const annotationsImport = SUPPORTED_FRAMEWORKS.includes(info.frameworkPackageName)
|
||||
? info.frameworkPackageName === '@storybook/nextjs'
|
||||
? '@storybook/experimental-nextjs-vite'
|
||||
: info.frameworkPackageName
|
||||
: info.rendererPackageName &&
|
||||
['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
|
||||
info.rendererPackageName
|
||||
)
|
||||
: info.rendererPackageName && SUPPORTED_RENDERERS.includes(info.rendererPackageName)
|
||||
? info.rendererPackageName
|
||||
: null;
|
||||
|
||||
@ -177,14 +170,14 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
reasons.push(
|
||||
dedent`
|
||||
Please check the documentation for more information about its requirements and installation:
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/vitest-plugin`)}
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon`)}
|
||||
`
|
||||
);
|
||||
} else {
|
||||
reasons.push(
|
||||
dedent`
|
||||
Fear not, however, you can follow the manual installation process instead at:
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`)}
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
|
||||
`
|
||||
);
|
||||
}
|
||||
@ -227,22 +220,9 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
}
|
||||
|
||||
if (shouldUninstall) {
|
||||
await execa(
|
||||
packageManager.getRemoteRunCommand(),
|
||||
[
|
||||
'storybook',
|
||||
'remove',
|
||||
addonInteractionsName,
|
||||
'--package-manager',
|
||||
options.packageManager,
|
||||
'--config-dir',
|
||||
options.configDir,
|
||||
],
|
||||
{
|
||||
shell: true,
|
||||
stdio: 'inherit',
|
||||
}
|
||||
);
|
||||
await $({
|
||||
stdio: 'inherit',
|
||||
})`storybook remove ${addonInteractionsName} --package-manager ${options.packageManager} --config-dir ${options.configDir}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -321,7 +301,7 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
${colors.gray(vitestSetupFile)}
|
||||
|
||||
Please refer to the documentation to complete the setup manually:
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`)}
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
|
||||
`
|
||||
);
|
||||
logger.line(1);
|
||||
@ -381,7 +361,7 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
your existing workspace file automatically, you must do it yourself. This was the last step.
|
||||
|
||||
Please refer to the documentation to complete the setup manually:
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`)}
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
|
||||
`
|
||||
);
|
||||
logger.line(1);
|
||||
@ -397,13 +377,13 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
'🚨 Oh no!',
|
||||
dedent`
|
||||
You seem to have an existing test configuration in your Vite config file:
|
||||
${colors.gray(vitestWorkspaceFile || '')}
|
||||
${colors.gray(viteConfigFile || '')}
|
||||
|
||||
I was able to configure most of the addon but could not safely extend
|
||||
your existing workspace file automatically, you must do it yourself. This was the last step.
|
||||
|
||||
Please refer to the documentation to complete the setup manually:
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`)}
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
|
||||
`
|
||||
);
|
||||
logger.line(1);
|
||||
@ -429,14 +409,14 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
import { defineWorkspace } from 'vitest/config';
|
||||
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport}
|
||||
|
||||
// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
|
||||
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
|
||||
export default defineWorkspace([
|
||||
'${relative(dirname(browserWorkspaceFile), rootConfig)}',
|
||||
{
|
||||
extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}',
|
||||
plugins: [
|
||||
// The plugin will run tests for the stories defined in your Storybook config
|
||||
// See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
|
||||
// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
|
||||
storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
|
||||
],
|
||||
test: {
|
||||
@ -469,11 +449,11 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport}
|
||||
|
||||
// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
|
||||
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
// The plugin will run tests for the stories defined in your Storybook config
|
||||
// See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
|
||||
// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
|
||||
storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
|
||||
],
|
||||
test: {
|
||||
@ -503,7 +483,7 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
• When using the Vitest extension in your editor, all of your stories will be shown as tests!
|
||||
|
||||
Check the documentation for more information about its features and options at:
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/vitest-plugin`)}
|
||||
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon`)}
|
||||
`
|
||||
);
|
||||
logger.line(1);
|
||||
|
||||
@ -74,13 +74,15 @@ export const teardown = async () => {
|
||||
logger.verbose('Stopping Storybook process');
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
// Storybook starts multiple child processes, so we need to kill the whole tree
|
||||
treeKill(storybookProcess.pid, 'SIGTERM', (error) => {
|
||||
if (error) {
|
||||
logger.error('Failed to stop Storybook process:');
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
if (storybookProcess?.pid) {
|
||||
treeKill(storybookProcess.pid, 'SIGTERM', (error) => {
|
||||
if (error) {
|
||||
logger.error('Failed to stop Storybook process:');
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { dirname } from 'node:path';
|
||||
|
||||
import type { Plugin } from 'vitest/config';
|
||||
import { mergeConfig } from 'vitest/config';
|
||||
import type { ViteUserConfig } from 'vitest/config';
|
||||
@ -23,7 +25,6 @@ import sirv from 'sirv';
|
||||
import { convertPathToPattern } from 'tinyglobby';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import { TestManager } from '../node/test-manager';
|
||||
import type { InternalOptions, UserOptions } from './types';
|
||||
|
||||
const WORKING_DIR = process.cwd();
|
||||
@ -63,6 +64,8 @@ const getStoryGlobsAndFiles = async (
|
||||
};
|
||||
};
|
||||
|
||||
const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
|
||||
|
||||
export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
const finalOptions = {
|
||||
...defaultOptions,
|
||||
@ -124,7 +127,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
.replace('</head>', `${headHtmlSnippet ?? ''}</head>`)
|
||||
.replace('<body>', `<body>${bodyHtmlSnippet ?? ''}`);
|
||||
},
|
||||
async config(inputConfig_DoNotMutate) {
|
||||
async config(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED) {
|
||||
// ! We're not mutating the input config, instead we're returning a new partial config
|
||||
// ! see https://vite.dev/guide/api-plugin.html#config
|
||||
try {
|
||||
@ -143,18 +146,23 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
// plugin.name?.startsWith('vitest:browser')
|
||||
// )
|
||||
|
||||
// We signal the test runner that we are not running it via Storybook
|
||||
// We are overriding the environment variable to 'true' if vitest runs via @storybook/addon-test's backend
|
||||
const vitestStorybook = process.env.VITEST_STORYBOOK ?? 'false';
|
||||
|
||||
const baseConfig: Omit<ViteUserConfig, 'plugins'> = {
|
||||
test: {
|
||||
setupFiles: [
|
||||
'@storybook/experimental-addon-test/internal/setup-file',
|
||||
join(packageDir, 'dist/vitest-plugin/setup-file.mjs'),
|
||||
// if the existing setupFiles is a string, we have to include it otherwise we're overwriting it
|
||||
typeof inputConfig_DoNotMutate.test?.setupFiles === 'string' &&
|
||||
inputConfig_DoNotMutate.test?.setupFiles,
|
||||
].filter(Boolean),
|
||||
typeof inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test
|
||||
?.setupFiles === 'string' &&
|
||||
inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.setupFiles,
|
||||
].filter(Boolean) as string[],
|
||||
|
||||
...(finalOptions.storybookScript
|
||||
? {
|
||||
globalSetup: ['@storybook/experimental-addon-test/internal/global-setup'],
|
||||
globalSetup: [join(packageDir, 'dist/vitest-plugin/global-setup.mjs')],
|
||||
}
|
||||
: {}),
|
||||
|
||||
@ -162,9 +170,8 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
...storybookEnv,
|
||||
// To be accessed by the setup file
|
||||
__STORYBOOK_URL__: finalOptions.storybookUrl,
|
||||
// We signal the test runner that we are not running it via Storybook
|
||||
// We are overriding the environment variable to 'true' if vitest runs via @storybook/addon-test's backend
|
||||
VITEST_STORYBOOK: 'false',
|
||||
|
||||
VITEST_STORYBOOK: vitestStorybook,
|
||||
__VITEST_INCLUDE_TAGS__: finalOptions.tags.include.join(','),
|
||||
__VITEST_EXCLUDE_TAGS__: finalOptions.tags.exclude.join(','),
|
||||
__VITEST_SKIP_TAGS__: finalOptions.tags.skip.join(','),
|
||||
@ -175,7 +182,8 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
.map((path) => convertPathToPattern(path)),
|
||||
|
||||
// if the existing deps.inline is true, we keep it as-is, because it will inline everything
|
||||
...(inputConfig_DoNotMutate.test?.server?.deps?.inline !== true
|
||||
...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.server?.deps
|
||||
?.inline !== true
|
||||
? {
|
||||
server: {
|
||||
deps: {
|
||||
@ -185,8 +193,9 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
}
|
||||
: {}),
|
||||
|
||||
// @ts-expect-error: TODO
|
||||
browser: {
|
||||
...inputConfig_DoNotMutate.test?.browser,
|
||||
...inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.browser,
|
||||
commands: {
|
||||
getInitialGlobals: () => {
|
||||
const envConfig = JSON.parse(process.env.VITEST_STORYBOOK_CONFIG ?? '{}');
|
||||
@ -203,8 +212,9 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
},
|
||||
},
|
||||
// if there is a test.browser config AND test.browser.screenshotFailures is not explicitly set, we set it to false
|
||||
...(inputConfig_DoNotMutate.test?.browser &&
|
||||
inputConfig_DoNotMutate.test.browser.screenshotFailures === undefined
|
||||
...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.browser &&
|
||||
inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test.browser
|
||||
.screenshotFailures === undefined
|
||||
? {
|
||||
screenshotFailures: false,
|
||||
}
|
||||
@ -213,7 +223,11 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
},
|
||||
|
||||
envPrefix: Array.from(
|
||||
new Set([...(inputConfig_DoNotMutate.envPrefix || []), 'STORYBOOK_', 'VITE_'])
|
||||
new Set([
|
||||
...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.envPrefix || []),
|
||||
'STORYBOOK_',
|
||||
'VITE_',
|
||||
])
|
||||
),
|
||||
|
||||
resolve: {
|
||||
@ -239,8 +253,6 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
},
|
||||
|
||||
define: {
|
||||
// polyfilling process.env.VITEST_STORYBOOK to 'false' in the browser
|
||||
'process.env.VITEST_STORYBOOK': JSON.stringify('false'),
|
||||
...(frameworkName?.includes('vue3')
|
||||
? { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false' }
|
||||
: {}),
|
||||
@ -254,8 +266,14 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
);
|
||||
|
||||
// alert the user of problems
|
||||
if (inputConfig_DoNotMutate.test.include?.length > 0) {
|
||||
console.warn(
|
||||
if (
|
||||
(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.include?.length ??
|
||||
0) > 0
|
||||
) {
|
||||
// remove the user's existing include, because we're replacing it with our own heuristic based on main.ts#stories
|
||||
// @ts-expect-error: Ignore
|
||||
inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test.include = [];
|
||||
console.log(
|
||||
picocolors.yellow(dedent`
|
||||
Warning: Starting in Storybook 8.5.0-alpha.18, the "test.include" option in Vitest is discouraged in favor of just using the "stories" field in your Storybook configuration.
|
||||
|
||||
@ -270,19 +288,21 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
|
||||
return config;
|
||||
},
|
||||
async configureServer(server) {
|
||||
for (const staticDir of staticDirs) {
|
||||
try {
|
||||
const { staticPath, targetEndpoint } = mapStaticDir(staticDir, directories.configDir);
|
||||
server.middlewares.use(
|
||||
targetEndpoint,
|
||||
sirv(staticPath, {
|
||||
dev: true,
|
||||
etag: true,
|
||||
extensions: [],
|
||||
})
|
||||
);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
if (staticDirs) {
|
||||
for (const staticDir of staticDirs) {
|
||||
try {
|
||||
const { staticPath, targetEndpoint } = mapStaticDir(staticDir, directories.configDir);
|
||||
server.middlewares.use(
|
||||
targetEndpoint,
|
||||
sirv(staticPath, {
|
||||
dev: true,
|
||||
etag: true,
|
||||
extensions: [],
|
||||
})
|
||||
);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -85,7 +85,7 @@ export const setViewport = async (parameters: Parameters = {}, globals: Globals
|
||||
let viewportWidth = DEFAULT_VIEWPORT_DIMENSIONS.width;
|
||||
let viewportHeight = DEFAULT_VIEWPORT_DIMENSIONS.height;
|
||||
|
||||
if (defaultViewport in viewports) {
|
||||
if (defaultViewport && defaultViewport in viewports) {
|
||||
const styles = viewports[defaultViewport].styles as ViewportStyles;
|
||||
if (styles?.width && styles?.height) {
|
||||
const { width, height } = styles;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"module": "Preserve",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["vitest"],
|
||||
"strict": false
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/**/*", "./typings.d.ts"]
|
||||
}
|
||||
|
||||
@ -109,6 +109,9 @@ export const myCustomDecorator =
|
||||
|
||||
### `useThemeParameters`
|
||||
|
||||
(⛔️ **Deprecated**)
|
||||
_Do not use this hook anymore. Access the theme directly via the context instead e.g. `context.parameters.themes`_
|
||||
|
||||
Returns the theme parameters for this addon.
|
||||
|
||||
```js
|
||||
@ -152,14 +155,14 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic
|
||||
import { DecoratorHelpers } from '@storybook/addon-themes';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers;
|
||||
const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
|
||||
|
||||
export const withVuetifyTheme = ({ themes, defaultTheme }) => {
|
||||
initializeThemeState(Object.keys(themes), defaultTheme);
|
||||
|
||||
return (story, context) => {
|
||||
const selectedTheme = pluckThemeFromContext(context);
|
||||
const { themeOverride } = useThemeParameters();
|
||||
const { themeOverride } = context.parameters.themes ?? {};
|
||||
|
||||
const selected = themeOverride || selectedTheme || defaultTheme;
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-themes",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Switch between multiple themes for you components in Storybook",
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { useEffect } from 'storybook/internal/preview-api';
|
||||
import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
|
||||
|
||||
import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
|
||||
import { PARAM_KEY } from '../constants';
|
||||
import { initializeThemeState, pluckThemeFromContext } from './helpers';
|
||||
|
||||
export interface ClassNameStrategyConfiguration {
|
||||
themes: Record<string, string>;
|
||||
@ -22,7 +23,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
|
||||
initializeThemeState(Object.keys(themes), defaultTheme);
|
||||
|
||||
return (storyFn, context) => {
|
||||
const { themeOverride } = useThemeParameters();
|
||||
const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
|
||||
const selected = pluckThemeFromContext(context);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { useEffect } from 'storybook/internal/preview-api';
|
||||
import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
|
||||
|
||||
import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
|
||||
import { PARAM_KEY } from '../constants';
|
||||
import { initializeThemeState, pluckThemeFromContext } from './helpers';
|
||||
|
||||
export interface DataAttributeStrategyConfiguration {
|
||||
themes: Record<string, string>;
|
||||
@ -22,7 +23,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
|
||||
}: DataAttributeStrategyConfiguration): DecoratorFunction<TRenderer> => {
|
||||
initializeThemeState(Object.keys(themes), defaultTheme);
|
||||
return (storyFn, context) => {
|
||||
const { themeOverride } = useThemeParameters();
|
||||
const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
|
||||
const selected = pluckThemeFromContext(context);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import { deprecate } from 'storybook/internal/client-logger';
|
||||
import { addons, useParameter } from 'storybook/internal/preview-api';
|
||||
import type { StoryContext } from 'storybook/internal/types';
|
||||
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import type { ThemeParameters } from '../constants';
|
||||
import { DEFAULT_THEME_PARAMETERS, GLOBAL_KEY, PARAM_KEY, THEMING_EVENTS } from '../constants';
|
||||
|
||||
@ -12,8 +15,18 @@ export function pluckThemeFromContext({ globals }: StoryContext): string {
|
||||
return globals[GLOBAL_KEY] || '';
|
||||
}
|
||||
|
||||
export function useThemeParameters(): ThemeParameters {
|
||||
return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
|
||||
export function useThemeParameters(context?: StoryContext): ThemeParameters {
|
||||
deprecate(
|
||||
dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
|
||||
- const { themeOverride } = context.parameters.themes ?? {};
|
||||
`
|
||||
);
|
||||
|
||||
if (!context) {
|
||||
return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
|
||||
}
|
||||
|
||||
return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS;
|
||||
}
|
||||
|
||||
export function initializeThemeState(themeNames: string[], defaultTheme: string) {
|
||||
|
||||
@ -4,7 +4,8 @@ import React from 'react';
|
||||
import { useMemo } from 'storybook/internal/preview-api';
|
||||
import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
|
||||
|
||||
import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
|
||||
import { PARAM_KEY } from '../constants';
|
||||
import { initializeThemeState, pluckThemeFromContext } from './helpers';
|
||||
|
||||
type Theme = Record<string, any>;
|
||||
type ThemeMap = Record<string, Theme>;
|
||||
@ -32,7 +33,8 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
return (storyFn, context) => {
|
||||
const { themeOverride } = useThemeParameters();
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
|
||||
const selected = pluckThemeFromContext(context);
|
||||
|
||||
const theme = useMemo(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-vite",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "A plugin to run and build Storybooks with Vite",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
|
||||
"bugs": {
|
||||
|
||||
@ -35,9 +35,22 @@ export async function build(options: Options) {
|
||||
}
|
||||
: {}),
|
||||
},
|
||||
}).build;
|
||||
} as InlineConfig).build;
|
||||
|
||||
const finalConfig = await presets.apply('viteFinal', config, options);
|
||||
const finalConfig = (await presets.apply('viteFinal', config, options)) as InlineConfig;
|
||||
|
||||
if (options.features?.developmentModeForBuild) {
|
||||
finalConfig.plugins?.push({
|
||||
name: 'storybook:define-env',
|
||||
config: () => {
|
||||
return {
|
||||
define: {
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const turbosnapPluginName = 'rollup-plugin-turbosnap';
|
||||
const hasTurbosnapPlugin =
|
||||
|
||||
@ -4,8 +4,6 @@ import { readFile } from 'node:fs/promises';
|
||||
import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
|
||||
import type { Middleware, Options } from 'storybook/internal/types';
|
||||
|
||||
import sirv from 'sirv';
|
||||
import { corePath } from 'storybook/core-path';
|
||||
import type { ViteDevServer } from 'vite';
|
||||
|
||||
import { build as viteBuild } from './build';
|
||||
|
||||
@ -13,16 +13,58 @@ const INCLUDE_CANDIDATES = [
|
||||
'@emotion/core',
|
||||
'@emotion/is-prop-valid',
|
||||
'@emotion/styled',
|
||||
'@storybook/addon-a11y/preview',
|
||||
'@storybook/addon-backgrounds/preview',
|
||||
'@storybook/addon-designs/blocks',
|
||||
'@storybook/addon-docs/preview',
|
||||
'@storybook/addon-essentials/actions/preview',
|
||||
'@storybook/addon-essentials/actions/preview',
|
||||
'@storybook/addon-essentials/backgrounds/preview',
|
||||
'@storybook/addon-essentials/docs/preview',
|
||||
'@storybook/addon-essentials/highlight/preview',
|
||||
'@storybook/addon-essentials/measure/preview',
|
||||
'@storybook/addon-essentials/outline/preview',
|
||||
'@storybook/addon-essentials/viewport/preview',
|
||||
'@storybook/addon-highlight/preview',
|
||||
'@storybook/addon-links/preview',
|
||||
'@storybook/addon-measure/preview',
|
||||
'@storybook/addon-outline/preview',
|
||||
'@storybook/addon-themes',
|
||||
'@storybook/addon-themes/preview',
|
||||
'@storybook/addon-viewport',
|
||||
'@storybook/addon-viewport/preview',
|
||||
'@storybook/blocks',
|
||||
'@storybook/components',
|
||||
'@storybook/experimental-addon-test/preview',
|
||||
'@storybook/experimental-nextjs-vite/dist/preview.mjs',
|
||||
'@storybook/html',
|
||||
'@storybook/html/dist/entry-preview-docs.mjs',
|
||||
'@storybook/html/dist/entry-preview.mjs',
|
||||
'@storybook/preact',
|
||||
'@storybook/preact/dist/entry-preview-docs.mjs',
|
||||
'@storybook/preact/dist/entry-preview.mjs',
|
||||
'@storybook/react > acorn-jsx',
|
||||
'@storybook/react',
|
||||
'@storybook/react/dist/entry-preview-docs.mjs',
|
||||
'@storybook/react/dist/entry-preview-rsc.mjs',
|
||||
'@storybook/react/dist/entry-preview.mjs',
|
||||
'@storybook/svelte',
|
||||
'@storybook/svelte/dist/entry-preview-docs.mjs',
|
||||
'@storybook/svelte/dist/entry-preview.mjs',
|
||||
'@storybook/theming',
|
||||
'@storybook/vue3',
|
||||
'@storybook/vue3/dist/entry-preview-docs.mjs',
|
||||
'@storybook/vue3/dist/entry-preview.mjs',
|
||||
'@storybook/web-components',
|
||||
'@storybook/web-components/dist/entry-preview-docs.mjs',
|
||||
'@storybook/web-components/dist/entry-preview.mjs',
|
||||
'acorn-jsx',
|
||||
'acorn-walk',
|
||||
'acorn',
|
||||
'airbnb-js-shims',
|
||||
'ansi-to-html',
|
||||
'axe-core',
|
||||
'chromatic/isChromatic',
|
||||
'color-convert',
|
||||
'deep-object-diff',
|
||||
'doctrine',
|
||||
@ -73,6 +115,8 @@ const INCLUDE_CANDIDATES = [
|
||||
'lodash/upperFirst.js',
|
||||
'lodash/upperFirst',
|
||||
'memoizerific',
|
||||
'mockdate',
|
||||
'msw-storybook-addon',
|
||||
'overlayscrollbars',
|
||||
'polished',
|
||||
'prettier/parser-babel',
|
||||
@ -100,8 +144,11 @@ const INCLUDE_CANDIDATES = [
|
||||
'refractor/lang/typescript.js',
|
||||
'refractor/lang/yaml.js',
|
||||
'regenerator-runtime/runtime.js',
|
||||
'sb-original/default-loader',
|
||||
'sb-original/image-context',
|
||||
'slash',
|
||||
'store2',
|
||||
'storybook/internal/preview/runtime',
|
||||
'synchronous-promise',
|
||||
'telejson',
|
||||
'ts-dedent',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-webpack5",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -16,13 +16,15 @@ import prettyTime from 'pretty-hrtime';
|
||||
import sirv from 'sirv';
|
||||
import { corePath } from 'storybook/core-path';
|
||||
import type { Configuration, Stats, StatsOptions } from 'webpack';
|
||||
import webpack, { ProgressPlugin } from 'webpack';
|
||||
import webpackDep, { DefinePlugin, ProgressPlugin } from 'webpack';
|
||||
import webpackDevMiddleware from 'webpack-dev-middleware';
|
||||
import webpackHotMiddleware from 'webpack-hot-middleware';
|
||||
|
||||
export * from './types';
|
||||
export * from './preview/virtual-module-mapping';
|
||||
|
||||
export const WebpackDefinePlugin = DefinePlugin;
|
||||
|
||||
export const printDuration = (startTime: [number, number]) =>
|
||||
prettyTime(process.hrtime(startTime))
|
||||
.replace(' ms', ' milliseconds')
|
||||
@ -51,8 +53,8 @@ export const executor = {
|
||||
get: async (options: Options) => {
|
||||
const version = ((await options.presets.apply('webpackVersion')) || '5') as string;
|
||||
const webpackInstance =
|
||||
(await options.presets.apply<{ default: typeof webpack }>('webpackInstance'))?.default ||
|
||||
webpack;
|
||||
(await options.presets.apply<{ default: typeof webpackDep }>('webpackInstance'))?.default ||
|
||||
webpackDep;
|
||||
checkWebpackVersion({ version }, '5', 'builder-webpack5');
|
||||
return webpackInstance;
|
||||
},
|
||||
|
||||
@ -195,7 +195,9 @@ export default async (
|
||||
}),
|
||||
new DefinePlugin({
|
||||
...stringifyProcessEnvs(envs),
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||
NODE_ENV: JSON.stringify(
|
||||
features?.developmentModeForBuild && isProd ? 'development' : process.env.NODE_ENV
|
||||
),
|
||||
}),
|
||||
new ProvidePlugin({ process: require.resolve('process/browser.js') }),
|
||||
isProd ? null : new HotModuleReplacementPlugin(),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsx": "react",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core",
|
||||
"version": "8.5.0-alpha.20",
|
||||
"version": "8.5.0-beta.5",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -2,6 +2,7 @@ import { readdir, writeFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
|
||||
import { GlobalRegistrator } from '@happy-dom/global-registrator';
|
||||
import { isNotNil } from 'es-toolkit';
|
||||
|
||||
import { dedent, esbuild, getWorkspace, prettier } from '../../../../scripts/prepare/tools';
|
||||
import { temporaryFile } from '../../src/common/utils/cli';
|
||||
@ -26,7 +27,7 @@ export const generateSourceFiles = async () => {
|
||||
async function generateVersionsFile(prettierConfig: prettier.Options | null): Promise<void> {
|
||||
const location = join(__dirname, '..', '..', 'src', 'common', 'versions.ts');
|
||||
|
||||
const workspace = await getWorkspace();
|
||||
const workspace = (await getWorkspace()).filter(isNotNil);
|
||||
|
||||
const versions = JSON.stringify(
|
||||
workspace
|
||||
@ -55,7 +56,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
|
||||
}
|
||||
|
||||
async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
|
||||
const thirdPartyFrameworks = ['qwik', 'solid', 'react-rsbuild', 'vue3-rsbuild'];
|
||||
const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild'];
|
||||
const location = join(__dirname, '..', '..', 'src', 'types', 'modules', 'frameworks.ts');
|
||||
const frameworksDirectory = join(__dirname, '..', '..', '..', 'frameworks');
|
||||
|
||||
|
||||
1
code/core/src/__mocks__/page.ts
Normal file
1
code/core/src/__mocks__/page.ts
Normal file
@ -0,0 +1 @@
|
||||
// empty file only matched on path
|
||||
1
code/core/src/__mocks__/path/to/Screens/index.jsx
Normal file
1
code/core/src/__mocks__/path/to/Screens/index.jsx
Normal file
@ -0,0 +1 @@
|
||||
// empty file only matched on path
|
||||
@ -43,6 +43,28 @@ const MOCK_FRAMEWORK_FILES: {
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: ProjectType.NUXT,
|
||||
files: {
|
||||
'package.json': {
|
||||
dependencies: {
|
||||
nuxt: '^3.11.2',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: ProjectType.NUXT,
|
||||
files: {
|
||||
'package.json': {
|
||||
dependencies: {
|
||||
// Nuxt projects may have Vue 3 as an explicit dependency
|
||||
nuxt: '^3.11.2',
|
||||
vue: '^3.0.0',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: ProjectType.VUE3,
|
||||
files: {
|
||||
@ -435,16 +457,6 @@ describe('Detect', () => {
|
||||
expect(result).toBe(ProjectType.UNDETECTED);
|
||||
});
|
||||
|
||||
// TODO(blaine): Remove once Nuxt3 is supported
|
||||
it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => {
|
||||
const result = detectFrameworkPreset({
|
||||
dependencies: {
|
||||
nuxt: '3.0.0',
|
||||
},
|
||||
});
|
||||
expect(result).toBe(ProjectType.UNSUPPORTED);
|
||||
});
|
||||
|
||||
// TODO: The mocking in this test causes tests after it to fail
|
||||
it('REACT_SCRIPTS for custom react scripts config', () => {
|
||||
const forkedReactScriptsConfig = {
|
||||
|
||||
@ -123,7 +123,11 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
|
||||
}
|
||||
|
||||
// REWORK
|
||||
if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
|
||||
if (
|
||||
webpackConfig ||
|
||||
((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
|
||||
dependencies.vite !== undefined)
|
||||
) {
|
||||
commandLog('Detected webpack project. Setting builder to webpack')();
|
||||
return CoreBuilder.Webpack5;
|
||||
}
|
||||
@ -138,6 +142,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
|
||||
case ProjectType.NEXTJS:
|
||||
case ProjectType.EMBER:
|
||||
return CoreBuilder.Webpack5;
|
||||
case ProjectType.NUXT:
|
||||
return CoreBuilder.Vite;
|
||||
default:
|
||||
const { builder } = await prompts(
|
||||
{
|
||||
@ -207,6 +213,13 @@ export async function detectLanguage(packageManager: JsPackageManager) {
|
||||
} else if (semver.lt(typescriptVersion, '3.8.0')) {
|
||||
logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples');
|
||||
}
|
||||
} else {
|
||||
// No direct dependency on TypeScript, but could be a transitive dependency
|
||||
// This is eg the case for Nuxt projects, which support a recent version of TypeScript
|
||||
// Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
|
||||
if (existsSync('tsconfig.json')) {
|
||||
language = SupportedLanguage.TYPESCRIPT_4_9;
|
||||
}
|
||||
}
|
||||
|
||||
return language;
|
||||
|
||||
@ -40,7 +40,7 @@ export async function getRendererDir(
|
||||
) {
|
||||
const externalFramework = externalFrameworks.find((framework) => framework.name === renderer);
|
||||
const frameworkPackageName =
|
||||
externalFramework?.renderer || externalFramework?.packageName || `@storybook/${renderer}`;
|
||||
externalFramework?.packageName || externalFramework?.renderer || `@storybook/${renderer}`;
|
||||
|
||||
const packageJsonPath = join(frameworkPackageName, 'package.json');
|
||||
|
||||
|
||||
@ -153,6 +153,7 @@ export const frameworkToDefaultBuilder: Record<
|
||||
'html-vite': CoreBuilder.Vite,
|
||||
'html-webpack5': CoreBuilder.Webpack5,
|
||||
nextjs: CoreBuilder.Webpack5,
|
||||
nuxt: CoreBuilder.Vite,
|
||||
'experimental-nextjs-vite': CoreBuilder.Vite,
|
||||
'preact-vite': CoreBuilder.Vite,
|
||||
'preact-webpack5': CoreBuilder.Webpack5,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type {
|
||||
SupportedRenderers as CoreSupportedFrameworks,
|
||||
SupportedRenderers as CoreSupportedRenderers,
|
||||
SupportedFrameworks,
|
||||
} from '@storybook/core/types';
|
||||
|
||||
@ -24,10 +24,16 @@ export type ExternalFramework = {
|
||||
export const externalFrameworks: ExternalFramework[] = [
|
||||
{ name: 'qwik', packageName: 'storybook-framework-qwik' },
|
||||
{ name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' },
|
||||
{
|
||||
name: 'nuxt',
|
||||
packageName: '@storybook-vue/nuxt',
|
||||
frameworks: ['@storybook-vue/nuxt'],
|
||||
renderer: '@storybook/vue3',
|
||||
},
|
||||
];
|
||||
|
||||
/** @deprecated Please use `SupportedFrameworks` from `@storybook/types` instead */
|
||||
export type SupportedRenderers = CoreSupportedFrameworks;
|
||||
/** @deprecated Please use `SupportedRenderers` from `@storybook/types` instead */
|
||||
export type SupportedRenderers = CoreSupportedRenderers;
|
||||
|
||||
export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
|
||||
'react',
|
||||
@ -52,6 +58,7 @@ export enum ProjectType {
|
||||
WEBPACK_REACT = 'WEBPACK_REACT',
|
||||
NEXTJS = 'NEXTJS',
|
||||
VUE3 = 'VUE3',
|
||||
NUXT = 'NUXT',
|
||||
ANGULAR = 'ANGULAR',
|
||||
EMBER = 'EMBER',
|
||||
WEB_COMPONENTS = 'WEB_COMPONENTS',
|
||||
@ -121,6 +128,13 @@ export type TemplateConfiguration = {
|
||||
* specific.
|
||||
*/
|
||||
export const supportedTemplates: TemplateConfiguration[] = [
|
||||
{
|
||||
preset: ProjectType.NUXT,
|
||||
dependencies: ['nuxt'],
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies?.every(Boolean) ?? true;
|
||||
},
|
||||
},
|
||||
{
|
||||
preset: ProjectType.VUE3,
|
||||
dependencies: {
|
||||
@ -242,10 +256,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
|
||||
// users an "Unsupported framework" message
|
||||
export const unsupportedTemplate: TemplateConfiguration = {
|
||||
preset: ProjectType.UNSUPPORTED,
|
||||
dependencies: {
|
||||
// TODO(blaine): Remove when we support Nuxt 3
|
||||
nuxt: (versionRange) => eqMajor(versionRange, 3),
|
||||
},
|
||||
dependencies: {},
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies?.some(Boolean) ?? false;
|
||||
},
|
||||
|
||||
@ -24,6 +24,7 @@ export const frameworkToRenderer: Record<
|
||||
sveltekit: 'svelte',
|
||||
'vue3-vite': 'vue3',
|
||||
'vue3-webpack5': 'vue3',
|
||||
nuxt: 'vue3',
|
||||
'web-components-vite': 'web-components',
|
||||
'web-components-webpack5': 'web-components',
|
||||
'react-rsbuild': 'react',
|
||||
|
||||
@ -1,88 +1,88 @@
|
||||
// auto generated file, do not edit
|
||||
export default {
|
||||
'@storybook/addon-a11y': '8.5.0-alpha.20',
|
||||
'@storybook/addon-actions': '8.5.0-alpha.20',
|
||||
'@storybook/addon-backgrounds': '8.5.0-alpha.20',
|
||||
'@storybook/addon-controls': '8.5.0-alpha.20',
|
||||
'@storybook/addon-docs': '8.5.0-alpha.20',
|
||||
'@storybook/addon-essentials': '8.5.0-alpha.20',
|
||||
'@storybook/addon-mdx-gfm': '8.5.0-alpha.20',
|
||||
'@storybook/addon-highlight': '8.5.0-alpha.20',
|
||||
'@storybook/addon-interactions': '8.5.0-alpha.20',
|
||||
'@storybook/addon-jest': '8.5.0-alpha.20',
|
||||
'@storybook/addon-links': '8.5.0-alpha.20',
|
||||
'@storybook/addon-measure': '8.5.0-alpha.20',
|
||||
'@storybook/addon-onboarding': '8.5.0-alpha.20',
|
||||
'@storybook/addon-outline': '8.5.0-alpha.20',
|
||||
'@storybook/addon-storysource': '8.5.0-alpha.20',
|
||||
'@storybook/experimental-addon-test': '8.5.0-alpha.20',
|
||||
'@storybook/addon-themes': '8.5.0-alpha.20',
|
||||
'@storybook/addon-toolbars': '8.5.0-alpha.20',
|
||||
'@storybook/addon-viewport': '8.5.0-alpha.20',
|
||||
'@storybook/builder-vite': '8.5.0-alpha.20',
|
||||
'@storybook/builder-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/core': '8.5.0-alpha.20',
|
||||
'@storybook/builder-manager': '8.5.0-alpha.20',
|
||||
'@storybook/channels': '8.5.0-alpha.20',
|
||||
'@storybook/client-logger': '8.5.0-alpha.20',
|
||||
'@storybook/components': '8.5.0-alpha.20',
|
||||
'@storybook/core-common': '8.5.0-alpha.20',
|
||||
'@storybook/core-events': '8.5.0-alpha.20',
|
||||
'@storybook/core-server': '8.5.0-alpha.20',
|
||||
'@storybook/csf-tools': '8.5.0-alpha.20',
|
||||
'@storybook/docs-tools': '8.5.0-alpha.20',
|
||||
'@storybook/manager': '8.5.0-alpha.20',
|
||||
'@storybook/manager-api': '8.5.0-alpha.20',
|
||||
'@storybook/node-logger': '8.5.0-alpha.20',
|
||||
'@storybook/preview': '8.5.0-alpha.20',
|
||||
'@storybook/preview-api': '8.5.0-alpha.20',
|
||||
'@storybook/router': '8.5.0-alpha.20',
|
||||
'@storybook/telemetry': '8.5.0-alpha.20',
|
||||
'@storybook/theming': '8.5.0-alpha.20',
|
||||
'@storybook/types': '8.5.0-alpha.20',
|
||||
'@storybook/angular': '8.5.0-alpha.20',
|
||||
'@storybook/ember': '8.5.0-alpha.20',
|
||||
'@storybook/experimental-nextjs-vite': '8.5.0-alpha.20',
|
||||
'@storybook/html-vite': '8.5.0-alpha.20',
|
||||
'@storybook/html-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/nextjs': '8.5.0-alpha.20',
|
||||
'@storybook/preact-vite': '8.5.0-alpha.20',
|
||||
'@storybook/preact-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/react-native-web-vite': '8.5.0-alpha.20',
|
||||
'@storybook/react-vite': '8.5.0-alpha.20',
|
||||
'@storybook/react-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/server-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/svelte-vite': '8.5.0-alpha.20',
|
||||
'@storybook/svelte-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/sveltekit': '8.5.0-alpha.20',
|
||||
'@storybook/vue3-vite': '8.5.0-alpha.20',
|
||||
'@storybook/vue3-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/web-components-vite': '8.5.0-alpha.20',
|
||||
'@storybook/web-components-webpack5': '8.5.0-alpha.20',
|
||||
'@storybook/blocks': '8.5.0-alpha.20',
|
||||
storybook: '8.5.0-alpha.20',
|
||||
sb: '8.5.0-alpha.20',
|
||||
'@storybook/cli': '8.5.0-alpha.20',
|
||||
'@storybook/codemod': '8.5.0-alpha.20',
|
||||
'@storybook/core-webpack': '8.5.0-alpha.20',
|
||||
'create-storybook': '8.5.0-alpha.20',
|
||||
'@storybook/csf-plugin': '8.5.0-alpha.20',
|
||||
'@storybook/instrumenter': '8.5.0-alpha.20',
|
||||
'@storybook/react-dom-shim': '8.5.0-alpha.20',
|
||||
'@storybook/source-loader': '8.5.0-alpha.20',
|
||||
'@storybook/test': '8.5.0-alpha.20',
|
||||
'@storybook/preset-create-react-app': '8.5.0-alpha.20',
|
||||
'@storybook/preset-html-webpack': '8.5.0-alpha.20',
|
||||
'@storybook/preset-preact-webpack': '8.5.0-alpha.20',
|
||||
'@storybook/preset-react-webpack': '8.5.0-alpha.20',
|
||||
'@storybook/preset-server-webpack': '8.5.0-alpha.20',
|
||||
'@storybook/preset-svelte-webpack': '8.5.0-alpha.20',
|
||||
'@storybook/preset-vue3-webpack': '8.5.0-alpha.20',
|
||||
'@storybook/html': '8.5.0-alpha.20',
|
||||
'@storybook/preact': '8.5.0-alpha.20',
|
||||
'@storybook/react': '8.5.0-alpha.20',
|
||||
'@storybook/server': '8.5.0-alpha.20',
|
||||
'@storybook/svelte': '8.5.0-alpha.20',
|
||||
'@storybook/vue3': '8.5.0-alpha.20',
|
||||
'@storybook/web-components': '8.5.0-alpha.20',
|
||||
'@storybook/addon-a11y': '8.5.0-beta.5',
|
||||
'@storybook/addon-actions': '8.5.0-beta.5',
|
||||
'@storybook/addon-backgrounds': '8.5.0-beta.5',
|
||||
'@storybook/addon-controls': '8.5.0-beta.5',
|
||||
'@storybook/addon-docs': '8.5.0-beta.5',
|
||||
'@storybook/addon-essentials': '8.5.0-beta.5',
|
||||
'@storybook/addon-mdx-gfm': '8.5.0-beta.5',
|
||||
'@storybook/addon-highlight': '8.5.0-beta.5',
|
||||
'@storybook/addon-interactions': '8.5.0-beta.5',
|
||||
'@storybook/addon-jest': '8.5.0-beta.5',
|
||||
'@storybook/addon-links': '8.5.0-beta.5',
|
||||
'@storybook/addon-measure': '8.5.0-beta.5',
|
||||
'@storybook/addon-onboarding': '8.5.0-beta.5',
|
||||
'@storybook/addon-outline': '8.5.0-beta.5',
|
||||
'@storybook/addon-storysource': '8.5.0-beta.5',
|
||||
'@storybook/experimental-addon-test': '8.5.0-beta.5',
|
||||
'@storybook/addon-themes': '8.5.0-beta.5',
|
||||
'@storybook/addon-toolbars': '8.5.0-beta.5',
|
||||
'@storybook/addon-viewport': '8.5.0-beta.5',
|
||||
'@storybook/builder-vite': '8.5.0-beta.5',
|
||||
'@storybook/builder-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/core': '8.5.0-beta.5',
|
||||
'@storybook/builder-manager': '8.5.0-beta.5',
|
||||
'@storybook/channels': '8.5.0-beta.5',
|
||||
'@storybook/client-logger': '8.5.0-beta.5',
|
||||
'@storybook/components': '8.5.0-beta.5',
|
||||
'@storybook/core-common': '8.5.0-beta.5',
|
||||
'@storybook/core-events': '8.5.0-beta.5',
|
||||
'@storybook/core-server': '8.5.0-beta.5',
|
||||
'@storybook/csf-tools': '8.5.0-beta.5',
|
||||
'@storybook/docs-tools': '8.5.0-beta.5',
|
||||
'@storybook/manager': '8.5.0-beta.5',
|
||||
'@storybook/manager-api': '8.5.0-beta.5',
|
||||
'@storybook/node-logger': '8.5.0-beta.5',
|
||||
'@storybook/preview': '8.5.0-beta.5',
|
||||
'@storybook/preview-api': '8.5.0-beta.5',
|
||||
'@storybook/router': '8.5.0-beta.5',
|
||||
'@storybook/telemetry': '8.5.0-beta.5',
|
||||
'@storybook/theming': '8.5.0-beta.5',
|
||||
'@storybook/types': '8.5.0-beta.5',
|
||||
'@storybook/angular': '8.5.0-beta.5',
|
||||
'@storybook/ember': '8.5.0-beta.5',
|
||||
'@storybook/experimental-nextjs-vite': '8.5.0-beta.5',
|
||||
'@storybook/html-vite': '8.5.0-beta.5',
|
||||
'@storybook/html-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/nextjs': '8.5.0-beta.5',
|
||||
'@storybook/preact-vite': '8.5.0-beta.5',
|
||||
'@storybook/preact-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/react-native-web-vite': '8.5.0-beta.5',
|
||||
'@storybook/react-vite': '8.5.0-beta.5',
|
||||
'@storybook/react-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/server-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/svelte-vite': '8.5.0-beta.5',
|
||||
'@storybook/svelte-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/sveltekit': '8.5.0-beta.5',
|
||||
'@storybook/vue3-vite': '8.5.0-beta.5',
|
||||
'@storybook/vue3-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/web-components-vite': '8.5.0-beta.5',
|
||||
'@storybook/web-components-webpack5': '8.5.0-beta.5',
|
||||
'@storybook/blocks': '8.5.0-beta.5',
|
||||
storybook: '8.5.0-beta.5',
|
||||
sb: '8.5.0-beta.5',
|
||||
'@storybook/cli': '8.5.0-beta.5',
|
||||
'@storybook/codemod': '8.5.0-beta.5',
|
||||
'@storybook/core-webpack': '8.5.0-beta.5',
|
||||
'create-storybook': '8.5.0-beta.5',
|
||||
'@storybook/csf-plugin': '8.5.0-beta.5',
|
||||
'@storybook/instrumenter': '8.5.0-beta.5',
|
||||
'@storybook/react-dom-shim': '8.5.0-beta.5',
|
||||
'@storybook/source-loader': '8.5.0-beta.5',
|
||||
'@storybook/test': '8.5.0-beta.5',
|
||||
'@storybook/preset-create-react-app': '8.5.0-beta.5',
|
||||
'@storybook/preset-html-webpack': '8.5.0-beta.5',
|
||||
'@storybook/preset-preact-webpack': '8.5.0-beta.5',
|
||||
'@storybook/preset-react-webpack': '8.5.0-beta.5',
|
||||
'@storybook/preset-server-webpack': '8.5.0-beta.5',
|
||||
'@storybook/preset-svelte-webpack': '8.5.0-beta.5',
|
||||
'@storybook/preset-vue3-webpack': '8.5.0-beta.5',
|
||||
'@storybook/html': '8.5.0-beta.5',
|
||||
'@storybook/preact': '8.5.0-beta.5',
|
||||
'@storybook/react': '8.5.0-beta.5',
|
||||
'@storybook/server': '8.5.0-beta.5',
|
||||
'@storybook/svelte': '8.5.0-beta.5',
|
||||
'@storybook/vue3': '8.5.0-beta.5',
|
||||
'@storybook/web-components': '8.5.0-beta.5',
|
||||
};
|
||||
|
||||
@ -63,7 +63,7 @@ const ProgressBar = styled.div(({ theme }) => ({
|
||||
const ProgressMessage = styled.div(({ theme }) => ({
|
||||
minHeight: '2em',
|
||||
fontSize: `${theme.typography.size.s1}px`,
|
||||
color: theme.barTextColor,
|
||||
color: theme.textMutedColor,
|
||||
}));
|
||||
|
||||
const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({
|
||||
|
||||
@ -40,7 +40,7 @@ const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => <sp
|
||||
({ disabled, theme }) =>
|
||||
disabled
|
||||
? {
|
||||
color: transparentize(0.7, theme.color.defaultText),
|
||||
color: theme.textMutedColor,
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
@ -2,8 +2,10 @@ import { describe, expect, it } from 'vitest';
|
||||
|
||||
import type { API_PreparedStoryIndex, StoryIndexV2, StoryIndexV3 } from '@storybook/core/types';
|
||||
|
||||
import type { State } from '../root';
|
||||
import { mockEntries } from '../tests/mockStoriesEntries';
|
||||
import {
|
||||
transformStoryIndexToStoriesHash,
|
||||
transformStoryIndexV2toV3,
|
||||
transformStoryIndexV3toV4,
|
||||
transformStoryIndexV4toV5,
|
||||
@ -216,3 +218,60 @@ describe('transformStoryIndexV4toV5', () => {
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('transformStoryIndexToStoriesHash', () => {
|
||||
it('does not apply filters to failing stories', () => {
|
||||
// Arrange - set up an index with two stories, one of which has a failing status
|
||||
const indexV5: API_PreparedStoryIndex = {
|
||||
v: 5,
|
||||
entries: {
|
||||
'1': {
|
||||
id: '1',
|
||||
type: 'story',
|
||||
title: 'Story 1',
|
||||
name: 'Story 1',
|
||||
importPath: './path/to/story-1.ts',
|
||||
parameters: {},
|
||||
tags: [],
|
||||
},
|
||||
'2': {
|
||||
id: '2',
|
||||
type: 'story',
|
||||
title: 'Story 2',
|
||||
name: 'Story 2',
|
||||
importPath: './path/to/story-2.ts',
|
||||
parameters: {},
|
||||
tags: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const filters: State['filters'] = {
|
||||
someFilter: () => false,
|
||||
};
|
||||
|
||||
const status: State['status'] = {
|
||||
'1': { someStatus: { status: 'error', title: 'broken', description: 'very bad' } },
|
||||
'2': { someStatus: { status: 'success', title: 'perfect', description: 'nice' } },
|
||||
};
|
||||
|
||||
const options = {
|
||||
provider: {
|
||||
getConfig: () => ({ sidebar: {} }),
|
||||
} as any,
|
||||
docsOptions: { docsMode: false },
|
||||
filters,
|
||||
status,
|
||||
};
|
||||
|
||||
// Act - transform the index to hashes
|
||||
const result = transformStoryIndexToStoriesHash(indexV5, options);
|
||||
|
||||
// Assert - the failing story is still present in the result, even though the filters remove all stories
|
||||
expect(Object.keys(result)).toHaveLength(2);
|
||||
expect(result['story-1']).toBeTruthy();
|
||||
expect(result['1']).toBeTruthy();
|
||||
expect(result['story-2']).toBeUndefined();
|
||||
expect(result['2']).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
@ -192,11 +192,17 @@ export const transformStoryIndexToStoriesHash = (
|
||||
const entryValues = Object.values(index.entries).filter((entry: any) => {
|
||||
let result = true;
|
||||
|
||||
// All stories with a failing status should always show up, regardless of the applied filters
|
||||
const storyStatus = status[entry.id];
|
||||
if (Object.values(storyStatus ?? {}).some(({ status: s }) => s === 'error')) {
|
||||
return result;
|
||||
}
|
||||
|
||||
Object.values(filters).forEach((filter: any) => {
|
||||
if (result === false) {
|
||||
return;
|
||||
}
|
||||
result = filter({ ...entry, status: status[entry.id] });
|
||||
result = filter({ ...entry, status: storyStatus });
|
||||
});
|
||||
|
||||
return result;
|
||||
@ -342,6 +348,7 @@ export const transformStoryIndexToStoriesHash = (
|
||||
.reduce(addItem, orphanHash);
|
||||
};
|
||||
|
||||
/** Now we need to patch in the existing prepared stories */
|
||||
export const addPreparedStories = (newHash: API_IndexHash, oldHash?: API_IndexHash) => {
|
||||
if (!oldHash) {
|
||||
return newHash;
|
||||
|
||||
@ -100,7 +100,7 @@ export const defaultLayoutState: SubState = {
|
||||
panelPosition: 'bottom',
|
||||
showTabs: true,
|
||||
},
|
||||
selectedPanel: undefined,
|
||||
selectedPanel: 'chromaui/addon-visual-tests/panel',
|
||||
theme: create(),
|
||||
};
|
||||
|
||||
|
||||
@ -179,7 +179,15 @@ export const init: ModuleFn<SubAPI, SubState> = (
|
||||
},
|
||||
changeRefVersion: async (id, url) => {
|
||||
const { versions, title } = api.getRefs()[id];
|
||||
const ref: API_SetRefData = { id, url, versions, title, index: {}, expanded: true };
|
||||
const ref: API_SetRefData = {
|
||||
id,
|
||||
url,
|
||||
versions,
|
||||
title,
|
||||
index: {},
|
||||
filteredIndex: {},
|
||||
expanded: true,
|
||||
};
|
||||
|
||||
await api.setRef(id, { ...ref, type: 'unknown' }, false);
|
||||
await api.checkRef(ref);
|
||||
@ -292,6 +300,7 @@ export const init: ModuleFn<SubAPI, SubState> = (
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
let internal_index: StoryIndex | undefined;
|
||||
let index: API_IndexHash | undefined;
|
||||
let filteredIndex: API_IndexHash | undefined;
|
||||
const { filters } = store.getState();
|
||||
const { storyMapper = defaultStoryMapper } = provider.getConfig();
|
||||
const ref = api.getRefs()[id];
|
||||
@ -304,19 +313,28 @@ export const init: ModuleFn<SubAPI, SubState> = (
|
||||
: storyIndex;
|
||||
|
||||
// @ts-expect-error (could be undefined)
|
||||
index = transformStoryIndexToStoriesHash(storyIndex, {
|
||||
filteredIndex = transformStoryIndexToStoriesHash(storyIndex, {
|
||||
provider,
|
||||
docsOptions,
|
||||
filters,
|
||||
status: {},
|
||||
});
|
||||
// @ts-expect-error (could be undefined)
|
||||
index = transformStoryIndexToStoriesHash(storyIndex, {
|
||||
provider,
|
||||
docsOptions,
|
||||
filters: {},
|
||||
status: {},
|
||||
});
|
||||
}
|
||||
|
||||
if (index) {
|
||||
index = addRefIds(index, ref);
|
||||
}
|
||||
|
||||
await api.updateRef(id, { ...ref, ...rest, index, internal_index });
|
||||
if (filteredIndex) {
|
||||
filteredIndex = addRefIds(filteredIndex, ref);
|
||||
}
|
||||
await api.updateRef(id, { ...ref, ...rest, index, filteredIndex, internal_index });
|
||||
},
|
||||
|
||||
updateRef: async (id, data) => {
|
||||
|
||||
@ -568,41 +568,61 @@ export const init: ModuleFn<SubAPI, SubState> = ({
|
||||
// The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional
|
||||
// so we can cast one to the other easily enough
|
||||
setIndex: async (input) => {
|
||||
const { index: oldHash, status, filters } = store.getState();
|
||||
const newHash = transformStoryIndexToStoriesHash(input, {
|
||||
const { filteredIndex: oldFilteredHash, index: oldHash, status, filters } = store.getState();
|
||||
const newFilteredHash = transformStoryIndexToStoriesHash(input, {
|
||||
provider,
|
||||
docsOptions,
|
||||
status,
|
||||
filters,
|
||||
});
|
||||
const newHash = transformStoryIndexToStoriesHash(input, {
|
||||
provider,
|
||||
docsOptions,
|
||||
status,
|
||||
filters: {},
|
||||
});
|
||||
|
||||
// Now we need to patch in the existing prepared stories
|
||||
const output = addPreparedStories(newHash, oldHash);
|
||||
|
||||
await store.setState({ internal_index: input, index: output, indexError: undefined });
|
||||
await store.setState({
|
||||
internal_index: input,
|
||||
filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash),
|
||||
index: addPreparedStories(newHash, oldHash),
|
||||
indexError: undefined,
|
||||
});
|
||||
},
|
||||
// FIXME: is there a bug where filtered stories get added back in on updateStory???
|
||||
updateStory: async (
|
||||
storyId: StoryId,
|
||||
update: StoryUpdate,
|
||||
ref?: API_ComposedRef
|
||||
): Promise<void> => {
|
||||
if (!ref) {
|
||||
const { index } = store.getState();
|
||||
if (!index) {
|
||||
return;
|
||||
const { index, filteredIndex } = store.getState();
|
||||
if (index) {
|
||||
index[storyId] = {
|
||||
...index[storyId],
|
||||
...update,
|
||||
} as API_StoryEntry;
|
||||
}
|
||||
if (filteredIndex) {
|
||||
filteredIndex[storyId] = {
|
||||
...filteredIndex[storyId],
|
||||
...update,
|
||||
} as API_StoryEntry;
|
||||
}
|
||||
if (index || filteredIndex) {
|
||||
await store.setState({ index, filteredIndex });
|
||||
}
|
||||
index[storyId] = {
|
||||
...index[storyId],
|
||||
...update,
|
||||
} as API_StoryEntry;
|
||||
await store.setState({ index });
|
||||
} else {
|
||||
const { id: refId, index }: any = ref;
|
||||
const { id: refId, index, filteredIndex }: any = ref;
|
||||
index[storyId] = {
|
||||
...index[storyId],
|
||||
...update,
|
||||
} as API_StoryEntry;
|
||||
await fullAPI.updateRef(refId, { index });
|
||||
filteredIndex[storyId] = {
|
||||
...filteredIndex[storyId],
|
||||
...update,
|
||||
} as API_StoryEntry;
|
||||
await fullAPI.updateRef(refId, { index, filteredIndex });
|
||||
}
|
||||
},
|
||||
updateDocs: async (
|
||||
@ -611,22 +631,33 @@ export const init: ModuleFn<SubAPI, SubState> = ({
|
||||
ref?: API_ComposedRef
|
||||
): Promise<void> => {
|
||||
if (!ref) {
|
||||
const { index } = store.getState();
|
||||
if (!index) {
|
||||
return;
|
||||
const { index, filteredIndex } = store.getState();
|
||||
if (index) {
|
||||
index[docsId] = {
|
||||
...index[docsId],
|
||||
...update,
|
||||
} as API_DocsEntry;
|
||||
}
|
||||
if (filteredIndex) {
|
||||
filteredIndex[docsId] = {
|
||||
...filteredIndex[docsId],
|
||||
...update,
|
||||
} as API_DocsEntry;
|
||||
}
|
||||
if (index || filteredIndex) {
|
||||
await store.setState({ index, filteredIndex });
|
||||
}
|
||||
index[docsId] = {
|
||||
...index[docsId],
|
||||
...update,
|
||||
} as API_DocsEntry;
|
||||
await store.setState({ index });
|
||||
} else {
|
||||
const { id: refId, index }: any = ref;
|
||||
const { id: refId, index, filteredIndex }: any = ref;
|
||||
index[docsId] = {
|
||||
...index[docsId],
|
||||
...update,
|
||||
} as API_DocsEntry;
|
||||
await fullAPI.updateRef(refId, { index });
|
||||
filteredIndex[docsId] = {
|
||||
...filteredIndex[docsId],
|
||||
...update,
|
||||
} as API_DocsEntry;
|
||||
await fullAPI.updateRef(refId, { index, filteredIndex });
|
||||
}
|
||||
},
|
||||
setPreviewInitialized: async (ref) => {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user