mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Merge remote-tracking branch 'origin/next' into react/fix-decorators
# Conflicts: # MIGRATION.md
This commit is contained in:
Kasper Peulen
commit
8b717f1de7
@ -474,7 +474,7 @@ jobs:
|
||||
parallelism:
|
||||
type: integer
|
||||
executor:
|
||||
class: large
|
||||
class: xlarge
|
||||
name: sb_playwright
|
||||
parallelism: << parameters.parallelism >>
|
||||
steps:
|
||||
@ -835,10 +835,10 @@ workflows:
|
||||
- knip:
|
||||
requires:
|
||||
- build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-packages:
|
||||
# requires:
|
||||
# - build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-packages:
|
||||
# requires:
|
||||
# - build
|
||||
- check
|
||||
- unit-tests:
|
||||
requires:
|
||||
@ -879,11 +879,11 @@ workflows:
|
||||
parallelism: 4
|
||||
requires:
|
||||
- create-sandboxes
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-sandboxes:
|
||||
# parallelism: 5
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-sandboxes:
|
||||
# parallelism: 5
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- test-ui-testing-module:
|
||||
requires:
|
||||
- build
|
||||
@ -912,10 +912,10 @@ workflows:
|
||||
- knip:
|
||||
requires:
|
||||
- build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-packages:
|
||||
# requires:
|
||||
# - build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-packages:
|
||||
# requires:
|
||||
# - build
|
||||
- check
|
||||
- unit-tests:
|
||||
requires:
|
||||
@ -968,16 +968,16 @@ workflows:
|
||||
- test-init-features:
|
||||
requires:
|
||||
- build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-sandboxes:
|
||||
# parallelism: 5
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
# TODO: reenable once we find out the source of flakyness
|
||||
# - test-runner-dev:
|
||||
# parallelism: 4
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-sandboxes:
|
||||
# parallelism: 5
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
# TODO: reenable once we find out the source of flakyness
|
||||
# - test-runner-dev:
|
||||
# parallelism: 4
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
daily:
|
||||
when:
|
||||
equal: [daily, << pipeline.parameters.workflow >>]
|
||||
@ -990,10 +990,10 @@ workflows:
|
||||
- knip:
|
||||
requires:
|
||||
- build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-packages:
|
||||
# requires:
|
||||
# - build
|
||||
# TODO: don't forget to reenable this
|
||||
# - bench-packages:
|
||||
# requires:
|
||||
# - build
|
||||
- check
|
||||
- unit-tests:
|
||||
requires:
|
||||
@ -1070,8 +1070,8 @@ workflows:
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
|
||||
# TODO: reenable once we find out the source of flakyness
|
||||
# - test-runner-dev:
|
||||
# parallelism: 4
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
# TODO: reenable once we find out the source of flakyness
|
||||
# - test-runner-dev:
|
||||
# parallelism: 4
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
|
||||
43
.cursor/rules/spy-mocking.mdc
Normal file
43
.cursor/rules/spy-mocking.mdc
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
description: Rules for consistent and type-safe mocking in Vitest tests
|
||||
globs: "**/*.test.{ts,tsx,js,jsx}"
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# Spy Mocking Rules for Vitest Tests
|
||||
|
||||
## Mocking Approach
|
||||
|
||||
When mocking packages or files in Vitest-based tests, follow these rules:
|
||||
|
||||
1. Use `vi.mock()` with the `spy: true` option for all package and file mocks
|
||||
2. Place all mocks at the top of the test file before any test cases
|
||||
3. Use `vi.mocked()` to type and access the mocked functions
|
||||
4. Implement mock behaviors in `beforeEach` blocks
|
||||
5. Mock all required dependencies that the test subject uses
|
||||
|
||||
## Mock Implementation Rules
|
||||
|
||||
1. Mock implementations should be placed in `beforeEach` blocks
|
||||
2. Each mock implementation should return a Promise for async functions
|
||||
3. Mock implementations should match the expected return type of the original function
|
||||
4. Use `vi.mocked()` to access and implement mock behaviors
|
||||
5. Mock all required properties and methods that the test subject uses
|
||||
|
||||
## Avoided Patterns
|
||||
|
||||
The following mocking patterns should be avoided:
|
||||
|
||||
1. Direct function mocking without `vi.mocked()`
|
||||
2. Mock implementations outside of `beforeEach` blocks
|
||||
3. Mocking without the `spy: true` option
|
||||
4. Inline mock implementations within test cases
|
||||
5. Mocking only a subset of required dependencies
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. Mock at the highest level of abstraction needed
|
||||
2. Keep mock implementations simple and focused
|
||||
3. Use type-safe mocking with `vi.mocked()`
|
||||
4. Document complex mock behaviors
|
||||
5. Group related mocks together
|
||||
13
CHANGELOG.md
13
CHANGELOG.md
@ -1,3 +1,16 @@
|
||||
## 8.6.9
|
||||
|
||||
- Next: Fix react aliases in next vite plugin - [#30914](https://github.com/storybookjs/storybook/pull/30914), thanks @kasperpeulen!
|
||||
|
||||
## 8.6.8
|
||||
|
||||
- Angular: Export all files in Angular package.json - [#30849](https://github.com/storybookjs/storybook/pull/30849), thanks @kasperpeulen!
|
||||
- CLI: Don't add packageManager entry to package.json automatically - [#30855](https://github.com/storybookjs/storybook/pull/30855), thanks @kasperpeulen!
|
||||
- React: Allow portable stories to be used in SSR - [#30847](https://github.com/storybookjs/storybook/pull/30847), thanks @kasperpeulen!
|
||||
- Svelte: Adjust Svelte typings to include Svelte 5 function components - [#30852](https://github.com/storybookjs/storybook/pull/30852), thanks @dummdidumm!
|
||||
- Telemetry: Make sure that telemetry doesn't fail on init - [#30857](https://github.com/storybookjs/storybook/pull/30857), thanks @kasperpeulen!
|
||||
- Vite: Update HMR filter to target specific story file types - [#30845](https://github.com/storybookjs/storybook/pull/30845), thanks @kasperpeulen!
|
||||
|
||||
## 8.6.7
|
||||
|
||||
- React-Native-Web: Fix errors in CLI template stories - [#30821](https://github.com/storybookjs/storybook/pull/30821), thanks @dannyhw!
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
## 9.0.0-alpha.9
|
||||
|
||||
- Addons: Update the Viewport and Background Addon - [#30841](https://github.com/storybookjs/storybook/pull/30841), thanks @ndelangen!
|
||||
- CLI: Add React Native `.rnstorybook` CLI automigration - [#30882](https://github.com/storybookjs/storybook/pull/30882), thanks @shilman!
|
||||
- CLI: Add detection for the storybook package being behind any other core packages - [#30861](https://github.com/storybookjs/storybook/pull/30861), thanks @kasperpeulen!
|
||||
- CLI: Make sure that the add commands logs all output to the console - [#30865](https://github.com/storybookjs/storybook/pull/30865), thanks @kasperpeulen!
|
||||
- Next: Fix react aliases in next vite plugin - [#30914](https://github.com/storybookjs/storybook/pull/30914), thanks @kasperpeulen!
|
||||
- Test: Handle non-configurable properties in instrumenter for expect.toThrow - [#30876](https://github.com/storybookjs/storybook/pull/30876), thanks @kasperpeulen!
|
||||
|
||||
## 9.0.0-alpha.8
|
||||
|
||||
- Angular: Export all files in Angular package.json - [#30849](https://github.com/storybookjs/storybook/pull/30849), thanks @kasperpeulen!
|
||||
|
||||
794
MIGRATION.md
794
MIGRATION.md
@ -2,49 +2,19 @@
|
||||
|
||||
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
|
||||
- [The parameter docs.source.excludeDecorators has no effect in React](#the-parameter-docssourceexcludedecorators-has-no-effect-in-react)
|
||||
- [Addon Viewport is moved to core](#addon-viewport-is-moved-to-core)
|
||||
- [Addon Controls is moved to core](#addon-controls-is-moved-to-core)
|
||||
- [Addon Actions is moved to core](#addon-actions-is-moved-to-core)
|
||||
- [React-Native config dir renamed](#react-native-config-dir-renamed)
|
||||
- [Addon viewport and addon backgrounds synchronized configuration and use globals](#addon-viewport-and-addon-backgrounds-synchronized-configuration-and-use-globals)
|
||||
- [Manager builder removed alias for `util`, `assert` and `process`](#manager-builder-removed-alias-for-util-assert-and-process)
|
||||
- [Actions addon moved to core](#actions-addon-moved-to-core)
|
||||
- [Docs addon moved out of addon-essentials](#docs-addon-moved-out-of-addon-essentials)
|
||||
- [Dropped support for legacy packages](#dropped-support-for-legacy-packages)
|
||||
- [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
|
||||
- [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
|
||||
- [Experimental Status API has turned into a Status Store](#experimental-status-api-has-turned-into-a-status-store)
|
||||
- [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
|
||||
- [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
|
||||
- [Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`](#addon-a11y-replaced-experimental-ally-test-tag-behavior-with-parametersa11ytest)
|
||||
- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
|
||||
- [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated)
|
||||
- [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: Changing the default element selector](#addon-a11y-changing-the-default-element-selector)
|
||||
- [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
|
||||
- [Addon-test: You should no longer copy the content of `viteFinal` to your configuration](#addon-test-you-should-no-longer-copy-the-content-of-vitefinal-to-your-configuration)
|
||||
- [Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed](#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed)
|
||||
- [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
|
||||
- [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
|
||||
- [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
|
||||
- [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
|
||||
- [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
|
||||
- [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error)
|
||||
- [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
|
||||
- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
|
||||
- [Portable stories](#portable-stories)
|
||||
- [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
|
||||
- [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated)
|
||||
- [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed)
|
||||
- [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
|
||||
- [Title block `of` prop](#title-block-of-prop)
|
||||
- [From version 7.x to 8.0.0](#from-version-7x-to-800)
|
||||
- [Portable stories](#portable-stories-1)
|
||||
- [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
|
||||
- [Type change in `composeStories` API](#type-change-in-composestories-api)
|
||||
- [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
|
||||
- [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
|
||||
- [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
|
||||
- [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
|
||||
- [Removal of `storiesOf`-API](#removal-of-storiesof-api)
|
||||
- [Removed deprecated shim packages](#removed-deprecated-shim-packages)
|
||||
- [Deprecated `@storybook/testing-library` package](#deprecated-storybooktesting-library-package)
|
||||
- [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
|
||||
- [For React:](#for-react)
|
||||
- [For Vue:](#for-vue)
|
||||
@ -444,7 +414,37 @@
|
||||
### The parameter docs.source.excludeDecorators has no effect in React
|
||||
|
||||
In React, the parameter `docs.source.excludeDecorators` option is no longer used.
|
||||
Decorators are always excluded as it causes performance issues and doc source snippets not showing the actual component.
|
||||
Decorators are always excluded as it causes performance issues and doc source snippets not showing the actual component.
|
||||
|
||||
### Addon Viewport is moved to core
|
||||
|
||||
The viewport addon has been moved from `@storybook/addon-viewport` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-viewport` is not part of `@storybook/addon-essentials` anymore.
|
||||
|
||||
### Addon Controls is moved to core
|
||||
|
||||
The controls addon has been moved from `@storybook/addon-controls` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-controls` is not part of `@storybook/addon-essentials` anymore.
|
||||
|
||||
### Addon Actions is moved to core
|
||||
|
||||
The actions addon has been moved from `@storybook/addon-actions` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-actions` is not part of `@storybook/addon-essentials` anymore.
|
||||
|
||||
Furthermore, we have deprecated the usage of `withActions` from `@storybook/addon-actions` and we will remove it in Storybook v10. Please file an issue if you need this API.
|
||||
|
||||
### React-Native config dir renamed
|
||||
|
||||
In Storybook 9, React Native (RN) projects use the `.rnstorybook` config directory instead of `.storybook`.
|
||||
That makes it easier for RN and React Native Web (RNW) storybooks to co-exist in the same project.
|
||||
|
||||
To upgrade, either rename your `.storybook` directory to `.rnstorybook` or if you wish to continue using `.storybook` (not recommended), you can use the [`configPath`](https://github.com/storybookjs/react-native#configpath) option to specify `.storybook` manually.
|
||||
|
||||
### Addon viewport and addon backgrounds synchronized configuration and use globals
|
||||
|
||||
The feature flags: `viewportStoryGlobals` and `backgroundsStoryGlobals` have been removed, please remove these from your `.storybook/main.ts` file.
|
||||
|
||||
See here for the ways you have to configure addon viewports & backgrounds:
|
||||
|
||||
- [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
|
||||
- [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
|
||||
|
||||
### Manager builder removed alias for `util`, `assert` and `process`
|
||||
|
||||
@ -456,11 +456,11 @@ Adding these aliases meant storybook core, had to depend on these packages, whic
|
||||
|
||||
If you addon fails to load after this change, we recommend looking at implementing the alias at compile time of your addon, or alternatively look at other bundling config to ensure the correct entries/packages/dependencies are used.
|
||||
|
||||
### Actions addon moved to core
|
||||
### Docs addon moved out of addon-essentials
|
||||
|
||||
The actions addon has been moved from `@storybook/addon-actions` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-actions` is not part of `@storybook/addon-essentials` anymore.
|
||||
Addon docs is now no longer part of `@storybook/addon-essentials`, because Storybook is moving towards a more customizable & personally optimized approach.
|
||||
|
||||
Furthermore, we have deprecated the usage of `withActions` from `@storybook/addon-actions` and we will remove it in Storybook v10. Please file an issue if you need this API.
|
||||
If you are using addon-docs via addon-essentials, you will need to add addon-docs to your project, by installing it and adding it to your `.storybook/main.ts`'s `addons` field; or run this command: `npx storybook add @storybook/addon-docs`.
|
||||
|
||||
### Dropped support for legacy packages
|
||||
|
||||
@ -566,488 +566,236 @@ addons.register(MY_ADDON_ID, (api) => {
|
||||
|
||||
### Angular: Support experimental zoneless support
|
||||
|
||||
Storybook now supports [Angular's experimental zoneless mode](https://angular.dev/guide/experimental/zoneless). This mode is intended to improve performance by removing Angular's zone.js dependency. To enable zoneless mode in your Angular Storybook, set the `experimentalZoneless` config in your `angular.json` file:
|
||||
|
||||
```diff
|
||||
{
|
||||
"projects": {
|
||||
"your-project": {
|
||||
"architect": {
|
||||
"storybook": {
|
||||
...
|
||||
"options": {
|
||||
...
|
||||
+ "experimentalZoneless": true
|
||||
}
|
||||
}
|
||||
"build-storybook": {
|
||||
...
|
||||
"options": {
|
||||
...
|
||||
+ "experimentalZoneless": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`
|
||||
|
||||
In Storybook 8.6, the `ally-test` tag behavior in the Accessibility addon (`@storybook/addon-a11y`) has been replaced with the `parameters.a11y.test` parameter. See the comparison table below.
|
||||
|
||||
| Previous tag value | New parameter value | Description |
|
||||
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| `'!ally-test'` | `'off'` | Do not run accessibility tests (you can still manually verify via the addon panel) |
|
||||
| N/A | `'todo'` | Run accessibility tests; violations return a warning in the Storybook UI and a summary count in CLI/CI |
|
||||
| `'ally-test'` | `'error'` | Run accessibility tests; violations return a failing test in the Storybook UI and CLI/CI |
|
||||
|
||||
## From version 8.4.x to 8.5.x
|
||||
|
||||
### React Vite: react-docgen-typescript is updated
|
||||
|
||||
Storybook now uses [react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript) v0.5.0 which updates its internal logic on how it parses files, available under an experimental feature flag `EXPERIMENTAL_useWatchProgram`, which is disabled by default.
|
||||
|
||||
Previously, once you made changes to a component's props, the controls and args table would not update unless you restarted Storybook. With the `EXPERIMENTAL_useWatchProgram` flag, you do not need to restart Storybook anymore, however you do need to refresh the browser page. Keep in mind that this flag is experimental and also does not support the `references` field in tsconfig.json files. Depending on how big your codebase is, it might have performance issues.
|
||||
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
const config = {
|
||||
// ...
|
||||
typescript: {
|
||||
reactDocgen: "react-docgen-typescript",
|
||||
reactDocgenTypescriptOptions: {
|
||||
EXPERIMENTAL_useWatchProgram: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
```
|
||||
|
||||
### 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
|
||||
// .storybook/main.js
|
||||
export default {
|
||||
features: {
|
||||
developmentModeForBuild: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Added source code panel to docs
|
||||
|
||||
Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that 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).
|
||||
|
||||
To enable this globally, add the following line to your project configuration. You can also configure at the component/story level.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
export default {
|
||||
parameters: {
|
||||
docs: {
|
||||
codePanel: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Addon-a11y: Component test integration
|
||||
|
||||
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](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.setup.ts
|
||||
...
|
||||
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
|
||||
|
||||
const annotations = setProjectAnnotations([
|
||||
previewAnnotations,
|
||||
+ a11yAddonAnnotations,
|
||||
]);
|
||||
|
||||
// Run Storybook's beforeAll hook
|
||||
beforeAll(annotations.beforeAll);
|
||||
```
|
||||
|
||||
### Addon-a11y: Changing the default element selector
|
||||
|
||||
In Storybook 8.5, we changed the default element selector used by the Accessibility addon from `#storybook-root` to `body`. This change was made to align with the default element selector used by the Test addon when running accessibility tests via Vitest. Additionally, Tooltips or Popovers that are rendered outside the `#storybook-root` element will now be included in the accessibility tests per default allowing for a more comprehensive test coverage. If you want to fall back to the previous behavior, you can set the `a11y.element` parameter in your `.storybook/preview.<ts|js>` configuration:
|
||||
|
||||
```diff
|
||||
// .storybook/preview.js
|
||||
export const parameters = {
|
||||
a11y: {
|
||||
+ element: '#storybook-root',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Addon-a11y: Deprecated `parameters.a11y.manual`
|
||||
|
||||
We have deprecated `parameters.a11y.manual` in 8.5. Please use `globals.a11y.manual` instead.
|
||||
|
||||
### Addon-test: You should no longer copy the content of `viteFinal` to your configuration
|
||||
|
||||
In version 8.4 of `@storybook/experimental-addon-test`, it was required to copy any custom configuration you had in `viteFinal` in `main.ts`, to the Vitest Storybook project. This is no longer necessary, as the Storybook Test plugin will automatically include your `viteFinal` configuration. You should remove any configurations you might already have in `viteFinal` to remove duplicates.
|
||||
|
||||
This is especially the case for any plugins you might have, as they could now end up being loaded twice, which is likely to cause errors when running tests. In 8.4 we documented and automatically added some Vite plugins from Storybook frameworks like `@storybook/experimental-nextjs-vite` and `@storybook/sveltekit` - **these needs to be removed as well**.
|
||||
|
||||
### Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed
|
||||
|
||||
The Storybook test addon used to index stories based on the `test.include` field in the Vitest config file. This caused indexing issues with Storybook, because stories could have been indexed by Storybook and not Vitest, and vice versa. Starting in Storybook 8.5.0-alpha.18, we changed the indexing behavior so that it always uses the globs defined in the `stories` field in `.storybook/main.js` for a more consistent experience. It is now discouraged to use `test.include`, please remove it.
|
||||
|
||||
## From version 8.2.x to 8.3.x
|
||||
|
||||
### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
|
||||
|
||||
The experimental SIDEBAR_BOTTOM addon type was removed in favor of a built-in filter UI. The enum type definition will remain available until Storybook 9.0 but will be ignored. Similarly the experimental SIDEBAR_TOP addon type is deprecated and will be removed in a future version.
|
||||
|
||||
These APIs allowed addons to render arbitrary content in the Storybook sidebar. Due to potential conflicts between addons and challenges regarding styling, these APIs are/will be removed. In the future, Storybook will provide declarative API hooks to allow addons to add content to the sidebar without risk of conflicts or UI inconsistencies. One such API is `experimental_updateStatus` which allow addons to set a status for stories. The SIDEBAR_BOTTOM slot is now used to allow filtering stories with a given status.
|
||||
|
||||
### New parameters format for addon backgrounds
|
||||
|
||||
> [!NOTE]
|
||||
> You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
|
||||
>
|
||||
> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
|
||||
|
||||
The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds.
|
||||
The `backgrounds` parameter is now an object with an `options` property.
|
||||
This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `value` property.
|
||||
|
||||
```diff
|
||||
// .storybook/preview.js
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
- values: [
|
||||
- { name: 'twitter', value: '#00aced' },
|
||||
- { name: 'facebook', value: '#3b5998' },
|
||||
- ],
|
||||
+ options: {
|
||||
+ twitter: { name: 'Twitter', value: '#00aced' },
|
||||
+ facebook: { name: 'Facebook', value: '#3b5998' },
|
||||
+ },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Setting an override value should now be done via a `globals` property on your component/meta or story itself:
|
||||
|
||||
```diff
|
||||
// Button.stories.ts
|
||||
export default {
|
||||
component: Button,
|
||||
- parameters: {
|
||||
- backgrounds: {
|
||||
- default: "twitter",
|
||||
- },
|
||||
- },
|
||||
+ globals: {
|
||||
+ backgrounds: { value: "twitter" },
|
||||
+ },
|
||||
};
|
||||
```
|
||||
|
||||
This locks that story to the `twitter` background, it cannot be changed by the addon UI.
|
||||
|
||||
### New parameters format for addon viewport
|
||||
|
||||
> [!NOTE]
|
||||
> You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
|
||||
>
|
||||
> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
|
||||
|
||||
The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports.
|
||||
The `viewport` parameter is now an object with an `options` property.
|
||||
This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `styles` property.
|
||||
The `styles` property is an object with a `width` and a `height` property.
|
||||
|
||||
```diff
|
||||
// .storybook/preview.js
|
||||
export const parameters = {
|
||||
viewport: {
|
||||
- viewports: {
|
||||
- iphone5: {
|
||||
- name: 'phone',
|
||||
- styles: {
|
||||
- width: '320px',
|
||||
- height: '568px',
|
||||
- },
|
||||
- },
|
||||
- },
|
||||
+ options: {
|
||||
+ iphone5: {
|
||||
+ name: 'phone',
|
||||
+ styles: {
|
||||
+ width: '320px',
|
||||
+ height: '568px',
|
||||
+ },
|
||||
+ },
|
||||
+ },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Setting an override value should now be done via a `globals` property on your component/meta or story itself.
|
||||
Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`.
|
||||
|
||||
```diff
|
||||
// Button.stories.ts
|
||||
export default {
|
||||
component: Button,
|
||||
- parameters: {
|
||||
- viewport: {
|
||||
- defaultViewport: "iphone5",
|
||||
- defaultOrientation: "landscape",
|
||||
- },
|
||||
- },
|
||||
+ globals: {
|
||||
+ viewport: {
|
||||
+ value: "iphone5",
|
||||
+ isRotated: true,
|
||||
+ },
|
||||
+ },
|
||||
};
|
||||
```
|
||||
|
||||
This locks that story to the `iphone5` viewport in landscape orientation, it cannot be changed by the addon UI.
|
||||
|
||||
## From version 8.1.x to 8.2.x
|
||||
|
||||
### Failed to resolve import "@storybook/X" error
|
||||
|
||||
Storybook's package structure changed in 8.2. It is a non-breaking change, but can expose missing project dependencies.
|
||||
|
||||
This happens when `@storybook/X` is missing in your `package.json`, but your project references `@storybook/X` in your source code (typically in a story file or in a `.storybook` config file). This is a problem with your project, and if it worked in earlier versions of Storybook, it was purely accidental.
|
||||
|
||||
Now in Storybook 8.2, that incorrect project configuration no longer works. The solution is to install `@storybook/X` as a dev dependency and re-run.
|
||||
|
||||
Example errors:
|
||||
|
||||
```sh
|
||||
Cannot find module @storybook/preview-api or its corresponding type declarations
|
||||
```
|
||||
|
||||
```sh
|
||||
Internal server error: Failed to resolve import "@storybook/theming/create" from ".storybook/theme.ts". Does the file exist?
|
||||
```
|
||||
|
||||
To protect your project from missing dependencies, try the `no-extraneous-dependencies` rule in [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import).
|
||||
|
||||
### Preview.js globals renamed to initialGlobals
|
||||
|
||||
Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `initialGlobals`. We will remove `preview.js` `globals` in 9.0.
|
||||
|
||||
```diff
|
||||
// .storybook/preview.js
|
||||
export default {
|
||||
- globals: [ a: 1, b: 2 ],
|
||||
+ initialGlobals: [ a: 1, b: 2 ],
|
||||
}
|
||||
```
|
||||
|
||||
## From version 8.0.x to 8.1.x
|
||||
|
||||
### Portable stories
|
||||
|
||||
#### @storybook/nextjs requires specific path aliases to be setup
|
||||
|
||||
In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`:
|
||||
|
||||
```js
|
||||
const nextJest = require("next/jest.js");
|
||||
const { getPackageAliases } = require("@storybook/nextjs/export-mocks");
|
||||
const createJestConfig = nextJest();
|
||||
const customJestConfig = {
|
||||
moduleNameMapper: {
|
||||
...getPackageAliases(), // Add aliases for @storybook/nextjs mocks
|
||||
},
|
||||
};
|
||||
module.exports = createJestConfig(customJestConfig);
|
||||
```
|
||||
|
||||
This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
|
||||
|
||||
### main.js `docs.autodocs` is deprecated
|
||||
|
||||
The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be removed in 9.0.
|
||||
|
||||
It has been replaced with a tags-based system which is more flexible than before.
|
||||
|
||||
`docs.autodocs` takes three values:
|
||||
|
||||
- `true`: generate autodocs for every component
|
||||
- `false`: don't generate autodocs at all
|
||||
- `tag`: generate autodocs for components that have been tagged `'autodocs'`.
|
||||
|
||||
Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true`), add the following code to `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
export default {
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
```
|
||||
|
||||
Tags cascade, so setting `'autodocs'` at the project level automatically propagates to every component and story. If you set autodocs globally and want to opt-out for a particular component, you can remove the `'autodocs'` tag for a component like this:
|
||||
|
||||
```js
|
||||
// Button.stories.ts
|
||||
export default {
|
||||
component: Button,
|
||||
tags: ["!autodocs"],
|
||||
};
|
||||
```
|
||||
|
||||
If you had set `docs.autodocs = 'tag'`, the default setting, you can remove the setting from `.storybook/main.js`. That is now the default behavior.
|
||||
|
||||
If you had set `docs.autodocs = false`, this still works in 8.x, but will go away in 9.0 as a breaking change. If you don't want autodocs at all, simply remove the `'autodocs'` tag throughout your Storybook and autodocs will not be created.
|
||||
|
||||
### `docs` and `story` system tags removed
|
||||
|
||||
Storybook automatically added the tag `'docs'` to any docs entry in the index and `'story'` to any story entry in the index. This behavior was undocumented, and in an effort to reduce the number of tags we've removed them in 8.1. If you depended on these tags, please file an issue on the [Storybook monorepo](https://github.com/storybookjs/storybook) and let us know!
|
||||
|
||||
### Subtitle block and `parameters.componentSubtitle`
|
||||
|
||||
The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
|
||||
|
||||
`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
|
||||
|
||||
### Title block `of` prop
|
||||
|
||||
The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
|
||||
|
||||
It still accepts being passed `children`.
|
||||
|
||||
## From version 7.x to 8.0.0
|
||||
|
||||
### Portable stories
|
||||
|
||||
#### Project annotations are now merged instead of overwritten in composeStory
|
||||
|
||||
When passing project annotations overrides via `composeStory` such as:
|
||||
|
||||
```tsx
|
||||
const projectAnnotationOverrides = { parameters: { foo: "bar" } };
|
||||
const Primary = composeStory(
|
||||
stories.Primary,
|
||||
stories,
|
||||
projectAnnotationOverrides
|
||||
);
|
||||
```
|
||||
|
||||
they are now merged with the annotations passed via `setProjectAnnotations` rather than completely overwriting them. This was seen as a bug and it's now fixed. If you have a use case where you really need this, please open an issue to elaborate.
|
||||
|
||||
#### Type change in `composeStories` API
|
||||
|
||||
There is a TypeScript type change in the `play` function returned from `composeStories` or `composeStory` in `@storybook/react` or `@storybook/vue3`, where before it was always defined, now it is potentially undefined. This means that you might have to make a small change in your code, such as:
|
||||
|
||||
```ts
|
||||
const { Primary } = composeStories(stories)
|
||||
|
||||
// before
|
||||
await Primary.play(...)
|
||||
|
||||
// after
|
||||
await Primary.play?.(...) // if you don't care whether the play function exists
|
||||
await Primary.play!(...) // if you want a runtime error when the play function does not exist
|
||||
```
|
||||
|
||||
There are plans to make the type of the play function be inferred based on your imported story's play function in a near future, so the types will be 100% accurate.
|
||||
|
||||
#### Composed Vue stories are now components instead of functions
|
||||
|
||||
`composeStory` (and `composeStories`) from `@storybook/vue3` now return Vue components rather than story functions that return components. This means that when rendering these composed stories you just pass the composed story _without_ first calling it.
|
||||
|
||||
Previously when using `composeStory` from `@storybook/testing-vue3`, you would render composed stories with e.g. `render(MyStoryComposedStory({ someProp: true}))`. That is now changed to more [closely match how you would render regular Vue components](https://testing-library.com/docs/vue-testing-library/examples).
|
||||
|
||||
When migrating from `@storybook/testing-vue3`, you will likely hit the following error:
|
||||
|
||||
```ts
|
||||
TypeError: Cannot read properties of undefined (reading 'devtoolsRawSetupState')
|
||||
```
|
||||
|
||||
To fix it, you should change the usage of the composed story to reference it instead of calling it as a function. Here's an example using `@testing-library/vue` and Vitest:
|
||||
|
||||
```diff
|
||||
import { it } from 'vitest';
|
||||
import { render } from '@testing-library/vue';
|
||||
import * as stories from './Button.stories';
|
||||
import { composeStory } from '@storybook/vue3';
|
||||
|
||||
it('renders primary button', () => {
|
||||
const Primary = composeStory(stories.Primary, stories.default);
|
||||
- render(Primary({ label: 'Hello world' }));
|
||||
+ render(Primary, { props: { label: 'Hello world' } });
|
||||
});
|
||||
```
|
||||
|
||||
### Tab addons are now routed to a query parameter
|
||||
|
||||
The URL of a tab used to be: `http://localhost:6006/?path=/my-addon-tab/my-story`.
|
||||
|
||||
The new URL of a tab is `http://localhost:6006/?path=/story/my-story&tab=my-addon-tab`.
|
||||
|
||||
### Default keyboard shortcuts changed
|
||||
|
||||
The default keyboard shortcuts have changed to avoid any conflicts with the browser's default shortcuts or when you are directly typing in the Manager. If you want to get the new default shortcuts, you can reset your shortcuts in the keyboard shortcuts panel by pressing the `Restore default` button.
|
||||
|
||||
### Manager addons are now rendered with React 18
|
||||
|
||||
The UI added to the manager via addons is now rendered with React 18.
|
||||
|
||||
Example:
|
||||
|
||||
```tsx
|
||||
import { addons, types } from "@storybook/manager-api";
|
||||
|
||||
addons.register("my-addon", () => {
|
||||
addons.add("my-addon/panel", {
|
||||
type: types.PANEL,
|
||||
title: "My Addon",
|
||||
// This will be called as a JSX element by react 18
|
||||
render: ({ active }) => (active ? <div>Hello World</div> : null),
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Previously the `key` prop was passed to the render function, that is now no longer the case.
|
||||
|
||||
### Removal of `storiesOf`-API
|
||||
|
||||
The `storiesOf` API has been removed in Storybook 8.0.
|
||||
|
||||
If you need to dynamically create stories, you will need to implement this via the experimental `experimental_indexers` [API](#storyindexers-is-replaced-with-experimental_indexers).
|
||||
|
||||
For migrating to CSF, see: [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
|
||||
|
||||
### Removed deprecated shim packages
|
||||
|
||||
In Storybook 7, these packages existed for backwards compatibility, but were marked as deprecated:
|
||||
|
||||
- `@storybook/addons` - this package has been split into 2 packages: `@storybook/preview-api` and `@storybook/manager-api`, see more here: [New Addons API](#new-addons-api).
|
||||
- `@storybook/channel-postmessage` - this package has been merged into `@storybook/channels`.
|
||||
- `@storybook/channel-websocket` - this package has been merged into `@storybook/channels`.
|
||||
- `@storybook/client-api` - this package has been merged into `@storybook/preview-api`.
|
||||
- `@storybook/core-client` - this package has been merged into `@storybook/preview-api`.
|
||||
- `@storybook/preview-web` - this package has been merged into `@storybook/preview-api`.
|
||||
- `@storybook/store` - this package has been merged into `@storybook/preview-api`.
|
||||
- `@storybook/api` - this package has been replaced with `@storybook/manager-api`.
|
||||
|
||||
These sections explain the rationale, and the required changes you might have to make:
|
||||
|
||||
- [New Addons API](#new-addons-api)
|
||||
- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
|
||||
Angular 16 introduced support for zoneless mode. Storybook now supports this mode in experimental mode.
|
||||
|
||||
To enable zoneless mode, set the `experimental_zoneless` flag to `true` in your `.storybook/main.ts` file:
|
||||
|
||||
````
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
|
||||
- [Addon Toolbars is now part of the core](#addon-toolbars-is-now-part-of-the-core)
|
||||
- [Addon Controls is now part of the core](#addon-controls-is-now-part-of-the-core)
|
||||
- [Actions addon moved to core](#actions-addon-moved-to-core)
|
||||
- [Viewport addon moved to core](#viewport-addon-moved-to-core)
|
||||
- [Addon viewport and addon backgrounds synchronized configuration and use globals](#addon-viewport-and-addon-backgrounds-synchronized-configuration-and-use-globals)
|
||||
- [Manager builder removed alias for `util`, `assert` and `process`](#manager-builder-removed-alias-for-util-assert-and-process)
|
||||
- [Docs addon moved out of addon-essentials](#docs-addon-moved-out-of-addon-essentials)
|
||||
- [Dropped support for legacy packages](#dropped-support-for-legacy-packages)
|
||||
- [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
|
||||
- [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
|
||||
- [Experimental Status API has turned into a Status Store](#experimental-status-api-has-turned-into-a-status-store)
|
||||
- [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
|
||||
- [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
|
||||
- [Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`](#addon-a11y-replaced-experimental-ally-test-tag-behavior-with-parametersa11ytest)
|
||||
- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
|
||||
- [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated)
|
||||
- [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: Changing the default element selector](#addon-a11y-changing-the-default-element-selector)
|
||||
- [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
|
||||
- [Addon-test: You should no longer copy the content of `viteFinal` to your configuration](#addon-test-you-should-no-longer-copy-the-content-of-vitefinal-to-your-configuration)
|
||||
- [Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed](#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed)
|
||||
- [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
|
||||
- [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
|
||||
- [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
|
||||
- [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
|
||||
- [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
|
||||
- [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error)
|
||||
- [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
|
||||
- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
|
||||
- [Portable stories](#portable-stories)
|
||||
- [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
|
||||
- [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated)
|
||||
- [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed)
|
||||
- [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
|
||||
- [Title block `of` prop](#title-block-of-prop)
|
||||
- [From version 7.x to 8.0.0](#from-version-7x-to-800)
|
||||
- [Portable stories](#portable-stories-1)
|
||||
- [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
|
||||
- [Type change in `composeStories` API](#type-change-in-composestories-api)
|
||||
- [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
|
||||
- [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
|
||||
- [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
|
||||
- [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
|
||||
- [Removal of `storiesOf`-API](#removal-of-storiesof-api)
|
||||
- [Removed deprecated shim packages](#removed-deprecated-shim-packages)
|
||||
- [Deprecated `@storybook/testing-library` package](#deprecated-storybooktesting-library-package)
|
||||
- [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
|
||||
- [For React:](#for-react)
|
||||
- [For Vue:](#for-vue)
|
||||
- [For Svelte (without Sveltekit):](#for-svelte-without-sveltekit)
|
||||
- [For Preact:](#for-preact)
|
||||
- [For Solid:](#for-solid)
|
||||
- [For Qwik:](#for-qwik)
|
||||
- [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed)
|
||||
- [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json)
|
||||
- [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
|
||||
- [MDX related changes](#mdx-related-changes)
|
||||
- [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
|
||||
- [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
|
||||
- [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
|
||||
- [Core changes](#core-changes)
|
||||
- [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed)
|
||||
- [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5)
|
||||
- [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed)
|
||||
- [`typescript.skipBabel` removed](#typescriptskipbabel-removed)
|
||||
- [Dropping support for Yarn 1](#dropping-support-for-yarn-1)
|
||||
- [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
|
||||
- [Autotitle breaking fixes](#autotitle-breaking-fixes)
|
||||
- [Storyshots has been removed](#storyshots-has-been-removed)
|
||||
- [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
|
||||
- [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
|
||||
- [Icons is deprecated](#icons-is-deprecated)
|
||||
- [Removed postinstall](#removed-postinstall)
|
||||
- [Removed stories.json](#removed-storiesjson)
|
||||
- [Removed `sb babelrc` command](#removed-sb-babelrc-command)
|
||||
- [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
|
||||
- [Extract no longer batches](#extract-no-longer-batches)
|
||||
- [Framework-specific changes](#framework-specific-changes)
|
||||
- [React](#react)
|
||||
- [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
|
||||
- [Next.js](#nextjs)
|
||||
- [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
|
||||
- [Automatic SWC mode detection](#automatic-swc-mode-detection)
|
||||
- [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer)
|
||||
- [Vue](#vue)
|
||||
- [Require Vue 3 and up](#require-vue-3-and-up)
|
||||
- [Angular](#angular)
|
||||
- [Require Angular 15 and up](#require-angular-15-and-up)
|
||||
- [Svelte](#svelte)
|
||||
- [Require Svelte 4 and up](#require-svelte-4-and-up)
|
||||
- [Preact](#preact)
|
||||
- [Require Preact 10 and up](#require-preact-10-and-up)
|
||||
- [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins)
|
||||
- [Web Components](#web-components)
|
||||
- [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects)
|
||||
- [Deprecations which are now removed](#deprecations-which-are-now-removed)
|
||||
- [Removed `config` preset](#removed-config-preset)
|
||||
- [Removed `passArgsFirst` option](#removed-passargsfirst-option)
|
||||
- [Methods and properties from AddonStore](#methods-and-properties-from-addonstore)
|
||||
- [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi)
|
||||
- [Removals in @storybook/components](#removals-in-storybookcomponents)
|
||||
- [Removals in @storybook/types](#removals-in-storybooktypes)
|
||||
- [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
|
||||
- [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls)
|
||||
- [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
|
||||
- [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
|
||||
- [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
|
||||
- [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
|
||||
- [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
|
||||
- ["Framework" TypeScript types](#framework-typescript-types)
|
||||
- [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
|
||||
- [storyIndexers](#storyindexers)
|
||||
- [Deprecated docs parameters](#deprecated-docs-parameters)
|
||||
- [Description Doc block properties](#description-doc-block-properties)
|
||||
- [Story Doc block properties](#story-doc-block-properties)
|
||||
- [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
|
||||
- [`ArgsTable` Doc block removed](#argstable-doc-block-removed)
|
||||
- [`Source` Doc block properties](#source-doc-block-properties)
|
||||
- [`Canvas` Doc block properties](#canvas-doc-block-properties)
|
||||
- [`Primary` Doc block properties](#primary-doc-block-properties)
|
||||
- [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket)
|
||||
- [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
|
||||
- [Addon author changes](#addon-author-changes)
|
||||
- [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)
|
||||
- [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)
|
||||
- [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)
|
||||
- [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)
|
||||
- [Default export in Preview.js](#default-export-in-previewjs)
|
||||
- [ESM format in Main.js](#esm-format-in-mainjs)
|
||||
- [Modern browser support](#modern-browser-support)
|
||||
- [React peer dependencies required](#react-peer-dependencies-required)
|
||||
- [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
|
||||
- [New Framework API](#new-framework-api)
|
||||
- [Available framework packages](#available-framework-packages)
|
||||
- [Framework field mandatory](#framework-field-mandatory)
|
||||
- [frameworkOptions renamed](#frameworkoptions-renamed)
|
||||
- [builderOptions renamed](#builderoptions-renamed)
|
||||
- [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved)
|
||||
- [Titles are statically computed](#titles-are-statically-computed)
|
||||
- [Framework standalone build moved](#framework-standalone-build-moved)
|
||||
- [Change of root html IDs](#change-of-root-html-ids)
|
||||
- [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
|
||||
- [Add strict mode](#add-strict-mode)
|
||||
- [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
|
||||
- [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory)
|
||||
- [Stricter global types](#stricter-global-types)
|
||||
- [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)
|
||||
- [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)
|
||||
- [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks)
|
||||
- [Dark mode detection](#dark-mode-detection)
|
||||
- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
|
||||
- [7.0 core addons changes](#70-core-addons-changes)
|
||||
- [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
|
||||
- [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
|
||||
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
|
||||
- [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)
|
||||
- [7.0 Webpack changes](#70-webpack-changes)
|
||||
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
||||
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
|
||||
- [Postcss removed](#postcss-removed)
|
||||
- [Removed DLL flags](#removed-dll-flags)
|
||||
- [7.0 Framework-specific changes](#70-framework-specific-changes)
|
||||
- [Angular: Removed deprecated `component` and `propsMeta` field](#angular-removed-deprecated-component-and-propsmeta-field)
|
||||
- [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
|
||||
- [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
|
||||
- [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders)
|
||||
- [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
|
||||
- [Angular: Initializer functions](#angular-initializer-functions)
|
||||
- [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework)
|
||||
- [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
|
||||
- [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
|
||||
- [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support)
|
||||
- [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support)
|
||||
- [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code)
|
||||
- [7.0 Addon authors changes](#70-addon-authors-changes)
|
||||
- [New Addons API](#new-addons-api)
|
||||
- [Specific instructions for addon creators](#specific-instructions-for-addon-creators)
|
||||
- [Specific instructions for addon users](#specific-instructions-for-addon-users)
|
||||
- [register.js removed](#registerjs-removed)
|
||||
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
|
||||
- [No more configuration for manager](#no-more-configuration-for-manager)
|
||||
- [Icons API changed](#icons-api-changed)
|
||||
- [Removed global client APIs](#removed-global-client-apis)
|
||||
- [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer)
|
||||
- [7.0 Docs changes](#70-docs-changes)
|
||||
- [Autodocs changes](#autodocs-changes)
|
||||
- [MDX docs files](#mdx-docs-files)
|
||||
- [Unattached docs files](#unattached-docs-files)
|
||||
- [Doc Blocks](#doc-blocks)
|
||||
- [Meta block](#meta-block)
|
||||
- [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
|
||||
- [Story block](#story-block)
|
||||
- [Source block](#source-block)
|
||||
- [Canvas block](#canvas-block)
|
||||
- [ArgsTable block](#argstable-block)
|
||||
- [Configuring Autodocs](#configuring-autodocs)
|
||||
- [MDX2 upgrade](#mdx2-upgrade)
|
||||
- [Legacy MDX1 support](#legacy-mdx1-support)
|
||||
- [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
|
||||
|
||||
### Deprecated `@storybook/testing-library` package
|
||||
|
||||
@ -1058,7 +806,7 @@ To migrate by hand, install `@storybook/test` and replace `@storybook/testing-li
|
||||
```ts
|
||||
- import { userEvent } from '@storybook/testing-library';
|
||||
+ import { userEvent } from '@storybook/test';
|
||||
```
|
||||
````
|
||||
|
||||
For more information on the change, see the [announcement post](https://storybook.js.org/blog/storybook-test/).
|
||||
|
||||
|
||||
@ -41,14 +41,6 @@ const config = defineMain({
|
||||
directory: '../addons/backgrounds/template/stories',
|
||||
titlePrefix: 'addons/backgrounds',
|
||||
},
|
||||
{
|
||||
directory: '../addons/controls/src',
|
||||
titlePrefix: 'addons/controls',
|
||||
},
|
||||
{
|
||||
directory: '../addons/controls/template/stories',
|
||||
titlePrefix: 'addons/controls',
|
||||
},
|
||||
{
|
||||
directory: '../addons/docs/template/stories',
|
||||
titlePrefix: 'addons/docs',
|
||||
@ -57,14 +49,6 @@ const config = defineMain({
|
||||
directory: '../addons/links/template/stories',
|
||||
titlePrefix: 'addons/links',
|
||||
},
|
||||
{
|
||||
directory: '../addons/viewport/template/stories',
|
||||
titlePrefix: 'addons/viewport',
|
||||
},
|
||||
{
|
||||
directory: '../addons/toolbars/template/stories',
|
||||
titlePrefix: 'addons/toolbars',
|
||||
},
|
||||
{
|
||||
directory: '../addons/themes/template/stories',
|
||||
titlePrefix: 'addons/themes',
|
||||
@ -92,6 +76,7 @@ const config = defineMain({
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-themes',
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-designs',
|
||||
@ -101,7 +86,6 @@ const config = defineMain({
|
||||
],
|
||||
previewAnnotations: [
|
||||
'./core/template/stories/preview.ts',
|
||||
'./addons/toolbars/template/stories/preview.ts',
|
||||
'./renderers/react/template/components/index.js',
|
||||
],
|
||||
build: {
|
||||
@ -127,8 +111,6 @@ const config = defineMain({
|
||||
disableTelemetry: true,
|
||||
},
|
||||
features: {
|
||||
viewportStoryGlobals: true,
|
||||
backgroundsStoryGlobals: true,
|
||||
developmentModeForBuild: true,
|
||||
},
|
||||
viteFinal: async (viteConfig, { configType }) => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { Fragment, useEffect } from 'react';
|
||||
import React, { type FC, Fragment, useEffect } from 'react';
|
||||
|
||||
import type { Channel } from 'storybook/internal/channels';
|
||||
|
||||
@ -29,7 +28,6 @@ import {
|
||||
useTheme,
|
||||
} from 'storybook/theming';
|
||||
|
||||
import * as addonsPreview from '../addons/toolbars/template/stories/preview';
|
||||
import * as templatePreview from '../core/template/stories/preview';
|
||||
import { DocsPageWrapper } from '../lib/blocks/src/components';
|
||||
import '../renderers/react/template/components/index';
|
||||
@ -102,7 +100,7 @@ const PlayFnNotice = styled.div(
|
||||
})
|
||||
);
|
||||
|
||||
const StackContainer = ({ children, layout }) => (
|
||||
const StackContainer: FC<React.PropsWithChildren<{ layout: string }>> = ({ children, layout }) => (
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
@ -332,7 +330,7 @@ const parameters = {
|
||||
{ color: '#1EA7FD', title: 'Ocean' },
|
||||
{ color: 'rgb(252, 82, 31)', title: 'Orange' },
|
||||
{ color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
|
||||
{ color: 'hsl(101, 52%, 49%)', title: 'Green' },
|
||||
{ color: 'hsl(102, 30.20%, 74.70%)', title: 'Green' },
|
||||
{ color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
|
||||
{ color: '#6F2CAC', title: 'Purple' },
|
||||
{ color: '#2A0481', title: 'Ultraviolet' },
|
||||
@ -371,14 +369,7 @@ const parameters = {
|
||||
};
|
||||
|
||||
export default definePreview({
|
||||
addons: [
|
||||
addonThemes(),
|
||||
addonEssentials(),
|
||||
addonA11y(),
|
||||
addonTest(),
|
||||
addonsPreview,
|
||||
templatePreview,
|
||||
],
|
||||
addons: [addonThemes(), addonEssentials(), addonA11y(), addonTest(), templatePreview],
|
||||
decorators,
|
||||
loaders,
|
||||
tags: ['test', 'vitest'],
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -8,12 +8,12 @@ import { useGlobals, useParameter } from 'storybook/manager-api';
|
||||
|
||||
import { PARAM_KEY as KEY } from '../constants';
|
||||
import { DEFAULT_BACKGROUNDS } from '../defaults';
|
||||
import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
|
||||
import type { Background, BackgroundMap, BackgroundsParameters, GlobalStateUpdate } from '../types';
|
||||
|
||||
type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
|
||||
|
||||
export const BackgroundTool = memo(function BackgroundSelector() {
|
||||
const config = useParameter<Config>(KEY);
|
||||
const config = useParameter<BackgroundsParameters['backgrounds']>(KEY);
|
||||
const [globals, updateGlobals, storyGlobals] = useGlobals();
|
||||
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { useEffect } from 'storybook/preview-api';
|
||||
|
||||
import { PARAM_KEY as KEY } from './constants';
|
||||
import { DEFAULT_BACKGROUNDS } from './defaults';
|
||||
import type { Config, GridConfig } from './types';
|
||||
import type { BackgroundsParameters, GridConfig } from './types';
|
||||
import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils';
|
||||
|
||||
const defaultGrid: GridConfig = {
|
||||
@ -24,14 +24,14 @@ export const withBackgroundAndGrid: DecoratorFunction = (StoryFn, context) => {
|
||||
options = DEFAULT_BACKGROUNDS,
|
||||
disable,
|
||||
grid = defaultGrid,
|
||||
} = (parameters[KEY] || {}) as Config;
|
||||
} = (parameters[KEY] || {}) as BackgroundsParameters['backgrounds'];
|
||||
const data = globals[KEY] || {};
|
||||
const backgroundName: string | undefined = data.value;
|
||||
const backgroundName: string | undefined = typeof data === 'string' ? data : data.value;
|
||||
|
||||
const item = backgroundName ? options[backgroundName] : undefined;
|
||||
const value = item?.value || 'transparent';
|
||||
const value = typeof item === 'string' ? item : item?.value || 'transparent';
|
||||
|
||||
const showGrid = data.grid || false;
|
||||
const showGrid = typeof data === 'string' ? false : data.grid || false;
|
||||
const shownBackground = !!item && !disable;
|
||||
|
||||
const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
|
||||
|
||||
@ -1,148 +0,0 @@
|
||||
import type { FC, ReactElement } from 'react';
|
||||
import React, { memo, useCallback, useMemo, useState } from 'react';
|
||||
|
||||
import { logger } from 'storybook/internal/client-logger';
|
||||
import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
|
||||
|
||||
import { PhotoIcon } from '@storybook/icons';
|
||||
|
||||
import memoize from 'memoizerific';
|
||||
import { useGlobals, useParameter } from 'storybook/manager-api';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
import type { Background } from '../types';
|
||||
import { ColorIcon } from './ColorIcon';
|
||||
import { getBackgroundColorByName } from './getBackgroundColorByName';
|
||||
|
||||
export interface DeprecatedGlobalState {
|
||||
name: string | undefined;
|
||||
selected: string | undefined;
|
||||
}
|
||||
|
||||
export interface BackgroundsParameter {
|
||||
default?: string | null;
|
||||
disable?: boolean;
|
||||
values: Background[];
|
||||
}
|
||||
|
||||
export interface BackgroundSelectorItem {
|
||||
id: string;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
value: string;
|
||||
active: boolean;
|
||||
right?: ReactElement;
|
||||
}
|
||||
|
||||
const createBackgroundSelectorItem = memoize(1000)(
|
||||
(
|
||||
id: string | null,
|
||||
name: string,
|
||||
value: string,
|
||||
hasSwatch: boolean | null,
|
||||
change: (arg: { selected: string; name: string }) => void,
|
||||
active: boolean
|
||||
): BackgroundSelectorItem => ({
|
||||
id: id || name,
|
||||
title: name,
|
||||
onClick: () => {
|
||||
change({ selected: value, name });
|
||||
},
|
||||
value,
|
||||
right: hasSwatch ? <ColorIcon background={value} /> : undefined,
|
||||
active,
|
||||
})
|
||||
);
|
||||
|
||||
const getDisplayedItems = memoize(10)((
|
||||
backgrounds: Background[],
|
||||
selectedBackgroundColor: string | null,
|
||||
change: (arg: { selected: string; name: string }) => void
|
||||
) => {
|
||||
const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
|
||||
createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor)
|
||||
);
|
||||
|
||||
if (selectedBackgroundColor !== 'transparent') {
|
||||
return [
|
||||
createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false),
|
||||
...backgroundSelectorItems,
|
||||
];
|
||||
}
|
||||
|
||||
return backgroundSelectorItems;
|
||||
});
|
||||
|
||||
const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
|
||||
default: null,
|
||||
disable: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
export const BackgroundToolLegacy: FC = memo(function BackgroundSelector() {
|
||||
const backgroundsConfig = useParameter<BackgroundsParameter>(
|
||||
BACKGROUNDS_PARAM_KEY,
|
||||
DEFAULT_BACKGROUNDS_CONFIG
|
||||
);
|
||||
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
|
||||
const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
|
||||
|
||||
const selectedBackgroundColor = useMemo(() => {
|
||||
return getBackgroundColorByName(
|
||||
globalsBackgroundColor,
|
||||
backgroundsConfig.values,
|
||||
backgroundsConfig.default
|
||||
);
|
||||
}, [backgroundsConfig, globalsBackgroundColor]);
|
||||
|
||||
if (Array.isArray(backgroundsConfig)) {
|
||||
logger.warn(
|
||||
'Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md'
|
||||
);
|
||||
}
|
||||
|
||||
const onBackgroundChange = useCallback(
|
||||
(value: string | undefined) => {
|
||||
updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
|
||||
},
|
||||
[backgroundsConfig, globals, updateGlobals]
|
||||
);
|
||||
|
||||
if (backgroundsConfig.disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
closeOnOutsideClick
|
||||
tooltip={({ onHide }) => {
|
||||
return (
|
||||
<TooltipLinkList
|
||||
links={getDisplayedItems(
|
||||
backgroundsConfig.values,
|
||||
selectedBackgroundColor,
|
||||
({ selected }: DeprecatedGlobalState) => {
|
||||
if (selectedBackgroundColor !== selected) {
|
||||
onBackgroundChange(selected);
|
||||
}
|
||||
onHide();
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
onVisibleChange={setIsTooltipVisible}
|
||||
>
|
||||
<IconButton
|
||||
key="background"
|
||||
title="Change the background of the preview"
|
||||
active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
|
||||
>
|
||||
<PhotoIcon />
|
||||
</IconButton>
|
||||
</WithTooltip>
|
||||
);
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
export const ColorIcon = styled.span(
|
||||
({ background }: { background: string }) => ({
|
||||
borderRadius: '1rem',
|
||||
display: 'block',
|
||||
height: '1rem',
|
||||
width: '1rem',
|
||||
background,
|
||||
}),
|
||||
({ theme }) => ({
|
||||
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
|
||||
})
|
||||
);
|
||||
@ -1,39 +0,0 @@
|
||||
import type { FC } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
|
||||
import { IconButton } from 'storybook/internal/components';
|
||||
|
||||
import { GridIcon } from '@storybook/icons';
|
||||
|
||||
import { useGlobals, useParameter } from 'storybook/manager-api';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
|
||||
export const GridToolLegacy: FC = memo(function GridSelector() {
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
|
||||
const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {
|
||||
grid: { disable: false },
|
||||
});
|
||||
|
||||
if (grid?.disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid || false;
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
key="background"
|
||||
active={isActive}
|
||||
title="Apply a grid to the preview"
|
||||
onClick={() =>
|
||||
updateGlobals({
|
||||
[BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], grid: !isActive },
|
||||
})
|
||||
}
|
||||
>
|
||||
<GridIcon />
|
||||
</IconButton>
|
||||
);
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
import { logger } from 'storybook/internal/client-logger';
|
||||
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import type { Background } from '../types';
|
||||
|
||||
export const getBackgroundColorByName = (
|
||||
currentSelectedValue: string,
|
||||
backgrounds: Background[] = [],
|
||||
defaultName: string | null | undefined
|
||||
): string => {
|
||||
if (currentSelectedValue === 'transparent') {
|
||||
return 'transparent';
|
||||
}
|
||||
|
||||
if (backgrounds.find((background) => background.value === currentSelectedValue)) {
|
||||
return currentSelectedValue;
|
||||
}
|
||||
|
||||
if (currentSelectedValue) {
|
||||
return currentSelectedValue;
|
||||
}
|
||||
|
||||
const defaultBackground = backgrounds.find((background) => background.name === defaultName);
|
||||
if (defaultBackground) {
|
||||
return defaultBackground.value;
|
||||
}
|
||||
|
||||
if (defaultName) {
|
||||
const availableColors = backgrounds.map((background) => background.name).join(', ');
|
||||
logger.warn(
|
||||
dedent`
|
||||
Backgrounds Addon: could not find the default color "${defaultName}".
|
||||
These are the available colors for your story based on your configuration:
|
||||
${availableColors}.
|
||||
`
|
||||
);
|
||||
}
|
||||
|
||||
return 'transparent';
|
||||
};
|
||||
@ -1,63 +0,0 @@
|
||||
import type { DecoratorFunction } from 'storybook/internal/types';
|
||||
|
||||
import { useEffect, useMemo } from 'storybook/preview-api';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
import { addBackgroundStyle, clearStyles, isReduceMotionEnabled } from '../utils';
|
||||
import { getBackgroundColorByName } from './getBackgroundColorByName';
|
||||
|
||||
export const withBackground: DecoratorFunction = (StoryFn, context) => {
|
||||
const { globals, parameters } = context;
|
||||
const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
|
||||
const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];
|
||||
|
||||
const selectedBackgroundColor = useMemo(() => {
|
||||
if (backgroundsConfig.disable) {
|
||||
return 'transparent';
|
||||
}
|
||||
|
||||
return getBackgroundColorByName(
|
||||
globalsBackgroundColor,
|
||||
backgroundsConfig.values,
|
||||
backgroundsConfig.default
|
||||
);
|
||||
}, [backgroundsConfig, globalsBackgroundColor]);
|
||||
|
||||
const isActive = useMemo(
|
||||
() => selectedBackgroundColor && selectedBackgroundColor !== 'transparent',
|
||||
[selectedBackgroundColor]
|
||||
);
|
||||
|
||||
const selector =
|
||||
context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
|
||||
|
||||
const backgroundStyles = useMemo(() => {
|
||||
const transitionStyle = 'transition: background-color 0.3s;';
|
||||
return `
|
||||
${selector} {
|
||||
background: ${selectedBackgroundColor} !important;
|
||||
${isReduceMotionEnabled() ? '' : transitionStyle}
|
||||
}
|
||||
`;
|
||||
}, [selectedBackgroundColor, selector]);
|
||||
|
||||
useEffect(() => {
|
||||
const selectorId =
|
||||
context.viewMode === 'docs'
|
||||
? `addon-backgrounds-docs-${context.id}`
|
||||
: `addon-backgrounds-color`;
|
||||
|
||||
if (!isActive) {
|
||||
clearStyles(selectorId);
|
||||
return;
|
||||
}
|
||||
|
||||
addBackgroundStyle(
|
||||
selectorId,
|
||||
backgroundStyles,
|
||||
context.viewMode === 'docs' ? context.id : null
|
||||
);
|
||||
}, [isActive, backgroundStyles, context]);
|
||||
|
||||
return StoryFn();
|
||||
};
|
||||
@ -1,61 +0,0 @@
|
||||
import type { DecoratorFunction } from 'storybook/internal/types';
|
||||
|
||||
import { useEffect, useMemo } from 'storybook/preview-api';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
import { addGridStyle, clearStyles } from '../utils';
|
||||
|
||||
export const withGrid: DecoratorFunction = (StoryFn, context) => {
|
||||
const { globals, parameters } = context;
|
||||
const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
|
||||
const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
|
||||
const { cellAmount, cellSize, opacity } = gridParameters;
|
||||
const isInDocs = context.viewMode === 'docs';
|
||||
|
||||
const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
|
||||
// 16px offset in the grid to account for padded layout
|
||||
const defaultOffset = isLayoutPadded ? 16 : 0;
|
||||
const offsetX = gridParameters.offsetX ?? (isInDocs ? 20 : defaultOffset);
|
||||
const offsetY = gridParameters.offsetY ?? (isInDocs ? 20 : defaultOffset);
|
||||
|
||||
const gridStyles = useMemo(() => {
|
||||
const selector =
|
||||
context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
|
||||
|
||||
const backgroundSize = [
|
||||
`${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
|
||||
`${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
|
||||
`${cellSize}px ${cellSize}px`,
|
||||
`${cellSize}px ${cellSize}px`,
|
||||
].join(', ');
|
||||
|
||||
return `
|
||||
${selector} {
|
||||
background-size: ${backgroundSize} !important;
|
||||
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
||||
background-blend-mode: difference !important;
|
||||
background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
||||
linear-gradient(rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(130, 130, 130, ${
|
||||
opacity / 2
|
||||
}) 1px, transparent 1px) !important;
|
||||
}
|
||||
`;
|
||||
}, [cellSize]);
|
||||
|
||||
useEffect(() => {
|
||||
const selectorId =
|
||||
context.viewMode === 'docs'
|
||||
? `addon-backgrounds-grid-docs-${context.id}`
|
||||
: `addon-backgrounds-grid`;
|
||||
if (!isActive) {
|
||||
clearStyles(selectorId);
|
||||
return;
|
||||
}
|
||||
|
||||
addGridStyle(selectorId, gridStyles);
|
||||
}, [isActive, gridStyles, context]);
|
||||
|
||||
return StoryFn();
|
||||
};
|
||||
@ -1,25 +1,15 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { addons, types } from 'storybook/manager-api';
|
||||
|
||||
import { BackgroundTool } from './components/Tool';
|
||||
import { ADDON_ID } from './constants';
|
||||
import { BackgroundToolLegacy } from './legacy/BackgroundSelectorLegacy';
|
||||
import { GridToolLegacy } from './legacy/GridSelectorLegacy';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(ADDON_ID, {
|
||||
title: 'Backgrounds',
|
||||
type: types.TOOL,
|
||||
match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
|
||||
render: () =>
|
||||
FEATURES?.backgroundsStoryGlobals ? (
|
||||
<BackgroundTool />
|
||||
) : (
|
||||
<Fragment>
|
||||
<BackgroundToolLegacy />
|
||||
<GridToolLegacy />
|
||||
</Fragment>
|
||||
),
|
||||
render: () => <BackgroundTool />,
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
import { PARAM_KEY as KEY } from './constants';
|
||||
import { withBackgroundAndGrid } from './decorator';
|
||||
import { DEFAULT_BACKGROUNDS } from './defaults';
|
||||
import { withBackground } from './legacy/withBackgroundLegacy';
|
||||
import { withGrid } from './legacy/withGridLegacy';
|
||||
import type { Config, GlobalState } from './types';
|
||||
import type { BackgroundsParameters, GlobalState } from './types';
|
||||
|
||||
export const decorators = globalThis.FEATURES?.backgroundsStoryGlobals
|
||||
? [withBackgroundAndGrid]
|
||||
: [withGrid, withBackground];
|
||||
export const decorators = [withBackgroundAndGrid];
|
||||
|
||||
export const parameters = {
|
||||
[KEY]: {
|
||||
@ -17,17 +12,9 @@ export const parameters = {
|
||||
cellAmount: 5,
|
||||
},
|
||||
disable: false,
|
||||
// TODO: remove in 9.0
|
||||
...(!globalThis.FEATURES?.backgroundsStoryGlobals && {
|
||||
values: Object.values(DEFAULT_BACKGROUNDS),
|
||||
}),
|
||||
} satisfies Partial<Config>,
|
||||
};
|
||||
},
|
||||
} satisfies Partial<BackgroundsParameters>;
|
||||
|
||||
const modern: Record<string, GlobalState> = {
|
||||
export const initialGlobals: Record<string, GlobalState> = {
|
||||
[KEY]: { value: undefined, grid: false },
|
||||
};
|
||||
|
||||
export const initialGlobals = globalThis.FEATURES?.backgroundsStoryGlobals
|
||||
? modern
|
||||
: { [KEY]: null };
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import type { PARAM_KEY } from './constants';
|
||||
|
||||
export interface Background {
|
||||
name: string;
|
||||
value: string;
|
||||
@ -13,33 +15,19 @@ export interface GridConfig {
|
||||
offsetY?: number;
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
options: BackgroundMap;
|
||||
disable: boolean;
|
||||
grid: GridConfig;
|
||||
}
|
||||
|
||||
export type GlobalState = { value: string | undefined; grid: boolean };
|
||||
export type GlobalStateUpdate = Partial<GlobalState>;
|
||||
|
||||
export interface BackgroundsParameters {
|
||||
/**
|
||||
* Backgrounds configuration
|
||||
*
|
||||
* @see https://storybook.js.org/docs/essentials/backgrounds#parameters
|
||||
*/
|
||||
backgrounds: {
|
||||
/** Default background color */
|
||||
default?: string;
|
||||
|
||||
[PARAM_KEY]: {
|
||||
/** Remove the addon panel and disable the addon's behavior */
|
||||
disable?: boolean;
|
||||
|
||||
/** Configuration for the background grid */
|
||||
grid?: Partial<GridConfig>;
|
||||
grid?: GridConfig;
|
||||
|
||||
/** Available background colors */
|
||||
values?: Array<Background>;
|
||||
options?: BackgroundMap;
|
||||
};
|
||||
}
|
||||
|
||||
@ -49,5 +37,5 @@ export interface BackgroundsGlobals {
|
||||
*
|
||||
* @see https://storybook.js.org/docs/essentials/backgrounds#globals
|
||||
*/
|
||||
backgrounds: GlobalState;
|
||||
[PARAM_KEY]: GlobalState | GlobalState['value'];
|
||||
}
|
||||
|
||||
@ -22,6 +22,12 @@ export const Set = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Shorthand = {
|
||||
globals: {
|
||||
backgrounds: 'red',
|
||||
},
|
||||
};
|
||||
|
||||
export const SetAndCustom = {
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,179 +0,0 @@
|
||||
# Storybook Controls Addon
|
||||
|
||||
[Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-controls
|
||||
```
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: ['@storybook/addon-controls'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/controls).
|
||||
|
||||
## FAQs
|
||||
|
||||
- [Storybook Controls Addon](#storybook-controls-addon)
|
||||
- [Installation](#installation)
|
||||
- [Usage](#usage)
|
||||
- [FAQs](#faqs)
|
||||
- [How will this replace addon-knobs?](#how-will-this-replace-addon-knobs)
|
||||
- [How do I migrate from addon-knobs?](#how-do-i-migrate-from-addon-knobs)
|
||||
- [My controls aren't being auto-generated. What should I do?](#my-controls-arent-being-auto-generated-what-should-i-do)
|
||||
- [How can I disable controls for certain fields on a particular story?](#how-can-i-disable-controls-for-certain-fields-on-a-particular-story)
|
||||
- [How do controls work with MDX?](#how-do-controls-work-with-mdx)
|
||||
|
||||
### How will this replace addon-knobs?
|
||||
|
||||
Addon-knobs is one of Storybook's most popular addons with over 1M weekly downloads, so we know lots of users will be affected by this change. Knobs is also a mature addon, with various options that are not available in addon-controls.
|
||||
|
||||
Therefore, rather than deprecating addon-knobs immediately, we will continue to release knobs with the Storybook core distribution until 7.0. This will give us time to improve Controls based on user feedback, and also give knobs users ample time to migrate.
|
||||
|
||||
If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, please get in touch with us in the [`#contributing`](https://discord.com/channels/486522875931656193/839297503446695956) Discord channel.
|
||||
|
||||
### How do I migrate from addon-knobs?
|
||||
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/addon-knobs) you should consider migrating to Controls.
|
||||
|
||||
You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
|
||||
|
||||
Let's walk through two examples: migrating [knobs to auto-generated args](#knobs-to-custom-args) and [knobs to custom args](#knobs-to-custom-args).
|
||||
|
||||
<h4>Knobs to auto-generated args</h4>
|
||||
|
||||
First, let's consider a knobs version of a basic story that fills in the props for a component:
|
||||
|
||||
```jsx
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { Button } from './Button';
|
||||
|
||||
export const Basic = () => <Button label={text('Label', 'hello')} />;
|
||||
```
|
||||
|
||||
This fills in the Button's label based on a knob, which is exactly the [auto-generated](#auto-generated-args) use case above. So we can rewrite it using auto-generated args:
|
||||
|
||||
```jsx
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
Basic.args = { label: 'hello' };
|
||||
```
|
||||
|
||||
<h4>Knobs to manually-configured args</h4>
|
||||
|
||||
Similarly, we can also consider a story that uses knob inputs to change its behavior:
|
||||
|
||||
```jsx
|
||||
import { number, text } from '@storybook/addon-knobs';
|
||||
|
||||
export const Reflow = () => {
|
||||
const count = number('Count', 10, { min: 0, max: 100, range: true });
|
||||
const label = text('Label', 'reflow');
|
||||
return (
|
||||
<>
|
||||
{[...Array(count)].map((_, i) => (
|
||||
<Button key={i} label={`button ${i}`} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/essentials/controls#fully-custom-args):
|
||||
|
||||
```jsx
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
<>
|
||||
{[...Array(count)].map((_, i) => (
|
||||
<Button key={i} label={`${label} ${i}`} {...args} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
Reflow.args = {
|
||||
count: 3,
|
||||
label: 'reflow',
|
||||
};
|
||||
|
||||
Reflow.argTypes = {
|
||||
count: {
|
||||
control: {
|
||||
type: 'range',
|
||||
min: 0,
|
||||
max: 20,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### My controls aren't being auto-generated. What should I do?
|
||||
|
||||
There are a few known cases where controls can't be auto-generated:
|
||||
|
||||
- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
- You're trying to generate controls for a component defined in an external library
|
||||
|
||||
With a little manual work you can still use controls in such cases. Consider the following example:
|
||||
|
||||
```js
|
||||
import { Button } from 'some-external-library';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
argTypes: {
|
||||
label: { control: 'text' },
|
||||
borderWidth: { control: { type: 'number', min: 0, max: 10 } },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
|
||||
Basic.args = {
|
||||
label: 'hello',
|
||||
borderWidth: 1,
|
||||
};
|
||||
```
|
||||
|
||||
The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/essentials/controls#annotation) for a full list of control types.
|
||||
|
||||
It's also possible that your Storybook is misconfigured. If you think this might be the case, please search through Storybook's [Github issues](https://github.com/storybookjs/storybook/issues), and file a new issue if you don't find one that matches your use case.
|
||||
|
||||
### How can I disable controls for certain fields on a particular story?
|
||||
|
||||
The `argTypes` annotation can be used to hide controls for a particular row, or even hide rows.
|
||||
|
||||
Suppose you have a `Button` component with `borderWidth` and `label` properties (auto-generated or otherwise) and you want to hide the `borderWidth` row completely and disable controls for the `label` row on a specific story. Here's how you'd do that:
|
||||
|
||||
```js
|
||||
import { Button } from 'button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const CustomControls = (args) => <Button {...args} />;
|
||||
CustomControls.argTypes = {
|
||||
borderWidth: { table: { disable: true } },
|
||||
label: { control: { disable: true } },
|
||||
};
|
||||
```
|
||||
|
||||
Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
|
||||
|
||||
### How do controls work with MDX?
|
||||
|
||||
When importing stories from your CSF file into MDX, controls will work the same way. See [the documentation](https://storybook.js.org/docs/writing-docs/mdx#basic-example) for examples.
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,89 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"knobs",
|
||||
"controls",
|
||||
"properties",
|
||||
"essentials",
|
||||
"data-state"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/controls",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/controls"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"dequal": "^2.0.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/blocks": "workspace:*",
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
"supportedFrameworks": [
|
||||
"react",
|
||||
"vue",
|
||||
"angular",
|
||||
"web-components",
|
||||
"ember"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-controls",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
export { PARAM_KEY } from './constants';
|
||||
|
||||
export default () => definePreview({});
|
||||
|
||||
export type { ControlsParameters } from './types';
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -211,7 +211,6 @@ const optimizeViteDeps = [
|
||||
'@mdx-js/react',
|
||||
'@storybook/addon-docs > acorn-jsx',
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-essentials/docs/mdx-react-shim',
|
||||
'markdown-to-jsx',
|
||||
];
|
||||
|
||||
|
||||
@ -9,10 +9,6 @@ Each addon is documented and maintained by the core team and will be upgraded al
|
||||
Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
|
||||
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds)
|
||||
- [Controls](https://github.com/storybookjs/storybook/tree/next/code/addons/controls)
|
||||
- [Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/tree/next/code/addons/viewport)
|
||||
- [Toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars)
|
||||
- [Measure](https://github.com/storybookjs/storybook/tree/next/code/addons/measure)
|
||||
- [Outline](https://github.com/storybookjs/storybook/tree/next/code/addons/outline)
|
||||
|
||||
@ -24,7 +20,7 @@ You can add Essentials to your project with:
|
||||
npm install --save-dev @storybook/addon-essentials
|
||||
```
|
||||
|
||||
And then add the following line to your `.storybook/main.js`:
|
||||
And then add the following line to your `.storybook/main.ts`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -36,11 +32,11 @@ export default {
|
||||
|
||||
Essentials is "zero config." That means that comes with a recommended configuration out of the box.
|
||||
|
||||
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `main.js` on startup and if detects one of its addons is already configured in the `addons` field, it will skip that addon's configuration entirely.
|
||||
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `main.ts` on startup and if detects one of its addons is already configured in the `addons` field, it will skip that addon's configuration entirely.
|
||||
|
||||
## Disabling addons
|
||||
|
||||
You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
|
||||
You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.ts`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -53,4 +49,6 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
Valid addon keys include: `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
|
||||
Valid addon keys include: `backgrounds`, `measure`, `outline`.
|
||||
|
||||
Note: The `docs` addon was previously part of essentials but is now a separate package. If you need documentation features, please install `@storybook/addon-docs` separately; see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-addon-moved-out-of-addon-essentials)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -38,15 +38,6 @@
|
||||
"require": "./dist/backgrounds/preview.js"
|
||||
},
|
||||
"./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",
|
||||
"require": "./dist/docs/preview.js"
|
||||
},
|
||||
"./docs/preset": "./dist/docs/preset.js",
|
||||
"./docs/mdx-react-shim": "./dist/docs/mdx-react-shim.js",
|
||||
"./highlight/preview": {
|
||||
"types": "./dist/highlight/preview.d.ts",
|
||||
"import": "./dist/highlight/preview.mjs",
|
||||
@ -64,13 +55,6 @@
|
||||
"require": "./dist/outline/preview.js"
|
||||
},
|
||||
"./outline/manager": "./dist/outline/manager.js",
|
||||
"./toolbars/manager": "./dist/toolbars/manager.js",
|
||||
"./viewport/manager": "./dist/viewport/manager.js",
|
||||
"./viewport/preview": {
|
||||
"types": "./dist/viewport/preview.d.ts",
|
||||
"import": "./dist/viewport/preview.mjs",
|
||||
"require": "./dist/viewport/preview.js"
|
||||
},
|
||||
"./preset": "./dist/preset.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
@ -100,13 +84,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-backgrounds": "workspace:*",
|
||||
"@storybook/addon-controls": "workspace:*",
|
||||
"@storybook/addon-docs": "workspace:*",
|
||||
"@storybook/addon-highlight": "workspace:*",
|
||||
"@storybook/addon-measure": "workspace:*",
|
||||
"@storybook/addon-outline": "workspace:*",
|
||||
"@storybook/addon-toolbars": "workspace:*",
|
||||
"@storybook/addon-viewport": "workspace:*",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -120,33 +100,23 @@
|
||||
},
|
||||
"bundler": {
|
||||
"nodeEntries": [
|
||||
"./src/preset.ts",
|
||||
"./src/docs/preset.ts",
|
||||
"./src/docs/mdx-react-shim.ts"
|
||||
"./src/preset.ts"
|
||||
],
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"entries": [
|
||||
"./src/docs/manager.ts"
|
||||
],
|
||||
"entries": [],
|
||||
"managerEntries": [
|
||||
"./src/backgrounds/manager.ts",
|
||||
"./src/controls/manager.ts",
|
||||
"./src/docs/manager.ts",
|
||||
"./src/measure/manager.ts",
|
||||
"./src/outline/manager.ts",
|
||||
"./src/toolbars/manager.ts",
|
||||
"./src/viewport/manager.ts"
|
||||
"./src/outline/manager.ts"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts",
|
||||
"./src/backgrounds/preview.ts",
|
||||
"./src/docs/preview.ts",
|
||||
"./src/highlight/preview.ts",
|
||||
"./src/measure/preview.ts",
|
||||
"./src/outline/preview.ts",
|
||||
"./src/viewport/preview.ts"
|
||||
"./src/outline/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types needed for this)
|
||||
export * from '@storybook/addon-controls/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-docs/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-docs/dist/shims/mdx-react-shim';
|
||||
@ -1,11 +0,0 @@
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
export * from '@storybook/addon-docs/dist/preset';
|
||||
|
||||
export const mdxLoaderOptions = async (config: any) => {
|
||||
config.mdxCompileOptions.providerImportSource = join(
|
||||
dirname(require.resolve('@storybook/addon-docs/package.json')),
|
||||
'/dist/shims/mdx-react-shim.mjs'
|
||||
);
|
||||
return config;
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-docs/dist/preview';
|
||||
@ -12,20 +12,6 @@ interface PresetOptions {
|
||||
*/
|
||||
backgrounds?: boolean;
|
||||
configDir: string;
|
||||
/**
|
||||
* Allow to use @storybook/addon-controls
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-controls
|
||||
*/
|
||||
controls?: boolean;
|
||||
/**
|
||||
* Allow to use @storybook/addon-docs
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-docs
|
||||
*/
|
||||
docs?: boolean;
|
||||
/**
|
||||
* Allow to use @storybook/addon-measure
|
||||
*
|
||||
@ -41,20 +27,6 @@ interface PresetOptions {
|
||||
*/
|
||||
outline?: boolean;
|
||||
themes?: boolean;
|
||||
/**
|
||||
* Allow to use @storybook/addon-toolbars
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-toolbars
|
||||
*/
|
||||
toolbars?: boolean;
|
||||
/**
|
||||
* Allow to use @storybook/addon-viewport
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-viewport
|
||||
*/
|
||||
viewport?: boolean;
|
||||
}
|
||||
|
||||
const requireMain = (configDir: string) => {
|
||||
@ -80,16 +52,7 @@ export function addons(options: PresetOptions) {
|
||||
const main = requireMain(options.configDir);
|
||||
|
||||
// NOTE: The order of these addons is important.
|
||||
return [
|
||||
'controls',
|
||||
'docs',
|
||||
'backgrounds',
|
||||
'viewport',
|
||||
'toolbars',
|
||||
'measure',
|
||||
'outline',
|
||||
'highlight',
|
||||
]
|
||||
return ['backgrounds', 'measure', 'outline', 'highlight']
|
||||
.filter((key) => (options as any)[key] !== false)
|
||||
.filter((addon) => !checkInstalled(addon, main))
|
||||
.map((addon) => {
|
||||
|
||||
@ -1,19 +1,12 @@
|
||||
import backgroundsAddon from '@storybook/addon-backgrounds';
|
||||
// We can't use docs as function yet because of the --test flag. Once we figure out disabling docs properly in CSF4, we can change this
|
||||
// eslint-disable-next-line import/namespace
|
||||
import * as docsAddon from '@storybook/addon-docs/preview';
|
||||
import highlightAddon from '@storybook/addon-highlight';
|
||||
import measureAddon from '@storybook/addon-measure';
|
||||
import outlineAddon from '@storybook/addon-outline';
|
||||
import viewportAddon from '@storybook/addon-viewport';
|
||||
|
||||
import { composeConfigs } from 'storybook/preview-api';
|
||||
|
||||
export default composeConfigs([
|
||||
// TODO: we can't use this as function because of the --test flag
|
||||
docsAddon,
|
||||
backgroundsAddon(),
|
||||
viewportAddon(),
|
||||
measureAddon(),
|
||||
outlineAddon(),
|
||||
highlightAddon(),
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types needed for this)
|
||||
export * from '@storybook/addon-toolbars/manager';
|
||||
@ -1,14 +1,10 @@
|
||||
import type { BackgroundsParameters } from '@storybook/addon-backgrounds';
|
||||
import type { DocsParameters } from '@storybook/addon-docs';
|
||||
import type { HighlightParameters } from '@storybook/addon-highlight';
|
||||
import type { MeasureParameters } from '@storybook/addon-measure';
|
||||
import type { OutlineParameters } from '@storybook/addon-outline';
|
||||
import type { ViewportParameters } from '@storybook/addon-viewport';
|
||||
|
||||
export interface EssentialsParameters
|
||||
extends BackgroundsParameters,
|
||||
DocsParameters,
|
||||
HighlightParameters,
|
||||
MeasureParameters,
|
||||
OutlineParameters,
|
||||
ViewportParameters {}
|
||||
OutlineParameters {}
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types)
|
||||
export * from '@storybook/addon-viewport/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-viewport/preview';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-mdx-gfm",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "GitHub Flavored Markdown in Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"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": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-onboarding",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { SyntaxHighlighter } from 'storybook/internal/components';
|
||||
import { ADDON_ID as CONTROLS_ADDON_ID } from 'storybook/internal/controls';
|
||||
import { SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
|
||||
|
||||
import type { Step } from 'react-joyride';
|
||||
@ -119,7 +120,7 @@ export default function Onboarding({ api }: { api: API }) {
|
||||
selectStory('example-button--primary');
|
||||
api.togglePanel(true);
|
||||
api.togglePanelPosition('bottom');
|
||||
api.setSelectedPanel('addon-controls');
|
||||
api.setSelectedPanel(CONTROLS_ADDON_ID);
|
||||
}, [api, selectStory]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Suspense, lazy } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import { ADDON_ID as CONTROLS_ADDON_ID } from 'storybook/internal/controls';
|
||||
import { STORY_SPECIFIED } from 'storybook/internal/core-events';
|
||||
|
||||
import { addons } from 'storybook/manager-api';
|
||||
@ -33,7 +34,7 @@ addons.register('@storybook/addon-onboarding', async (api) => {
|
||||
|
||||
api.togglePanel(true);
|
||||
api.togglePanelPosition('bottom');
|
||||
api.setSelectedPanel('addon-controls');
|
||||
api.setSelectedPanel(CONTROLS_ADDON_ID);
|
||||
|
||||
// Add a new DOM element to document.body, where we will bootstrap our React app
|
||||
const domNode = document.createElement('div');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"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": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"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/addon-test",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Storybook addon for testing components",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
import { page } from '@vitest/browser/context';
|
||||
import { INITIAL_VIEWPORTS } from 'storybook/viewport';
|
||||
|
||||
import {
|
||||
DEFAULT_VIEWPORT_DIMENSIONS,
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
import type { Globals, Parameters } from 'storybook/internal/csf';
|
||||
import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-errors';
|
||||
|
||||
import { MINIMAL_VIEWPORTS } from '../../../viewport/src/defaults';
|
||||
import type { ViewportMap, ViewportStyles } from '../../../viewport/src/types';
|
||||
import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
|
||||
import type { ViewportMap, ViewportStyles } from 'storybook/viewport';
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line no-var, @typescript-eslint/naming-convention
|
||||
|
||||
@ -101,7 +101,7 @@ export const WithLoaders = {
|
||||
},
|
||||
};
|
||||
|
||||
const UserEventSetup = {
|
||||
export const UserEventSetup = {
|
||||
play: async (context) => {
|
||||
const { args, canvasElement, step, userEvent } = context;
|
||||
const canvas = within(canvasElement);
|
||||
@ -132,4 +132,28 @@ const UserEventSetup = {
|
||||
},
|
||||
};
|
||||
|
||||
export { UserEventSetup };
|
||||
/**
|
||||
* Demonstrates the expect.toThrow functionality from issue #28406
|
||||
* https://github.com/storybookjs/storybook/issues/28406
|
||||
*
|
||||
* This tests various forms of throw assertions to ensure they all work correctly.
|
||||
*/
|
||||
export const ToThrow = {
|
||||
play: async () => {
|
||||
await expect(() => {
|
||||
throw new Error('test error');
|
||||
}).toThrow();
|
||||
|
||||
await expect(() => {
|
||||
throw new Error('specific error');
|
||||
}).toThrowError();
|
||||
|
||||
await expect(() => {
|
||||
throw new Error('specific message');
|
||||
}).toThrow('specific message');
|
||||
|
||||
await expect(() => {
|
||||
// This doesn't throw
|
||||
}).not.toThrow();
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-themes",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Switch between multiple themes for you components in Storybook",
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
# Storybook Toolbars Addon
|
||||
|
||||
The Toolbars addon controls global story rendering options from [Storybook's](https://storybook.js.org) toolbar UI. It's a general purpose addon that can be used to:
|
||||
|
||||
- set a theme for your components
|
||||
- set your components' internationalization (i18n) locale
|
||||
- configure just about anything in Storybook that makes use of a global variable
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Toolbars is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-toolbars
|
||||
```
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: ['@storybook/addon-toolbars'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/toolbars-and-globals).
|
||||
|
||||
## FAQs
|
||||
|
||||
### How does this compare to `addon-contexts`?
|
||||
|
||||
`Addon-toolbars` is the successor to `addon-contexts`, which provided convenient global toolbars in Storybook's toolbar.
|
||||
|
||||
The primary difference between the two packages is that `addon-toolbars` makes use of Storybook's new **Story Args** feature, which has the following advantages:
|
||||
|
||||
- **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
|
||||
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
|
||||
|
||||
* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue 3, Angular, etc. out of the box with no framework logic needed in the addon.
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,79 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"theming",
|
||||
"i18n",
|
||||
"internationalization",
|
||||
"test",
|
||||
"essentials"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/toolbars"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-toolbars",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export const ADDON_ID = 'addon-toolbars' as const;
|
||||
export const ADDON_PARAM = 'toolbars' as const;
|
||||
@ -1 +0,0 @@
|
||||
export {};
|
||||
1
code/addons/toolbars/src/typings.d.ts
vendored
1
code/addons/toolbars/src/typings.d.ts
vendored
@ -1 +0,0 @@
|
||||
declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
|
||||
@ -1,49 +0,0 @@
|
||||
export const globalTypes = {
|
||||
sb_theme: {
|
||||
name: 'Theme',
|
||||
description: 'Global theme for components',
|
||||
toolbar: {
|
||||
icon: 'circlehollow',
|
||||
title: 'Theme',
|
||||
items: [
|
||||
{ value: 'light', icon: 'sun', title: 'light' },
|
||||
{ value: 'dark', icon: 'moon', title: 'dark' },
|
||||
{ value: 'side-by-side', icon: 'sidebyside', title: 'side by side' },
|
||||
{ value: 'stacked', icon: 'stacked', title: 'stacked' },
|
||||
],
|
||||
},
|
||||
},
|
||||
locale: {
|
||||
name: 'Locale',
|
||||
description: 'Internationalization locale',
|
||||
toolbar: {
|
||||
icon: 'globe',
|
||||
shortcuts: {
|
||||
next: {
|
||||
label: 'Go to next language',
|
||||
keys: ['L'],
|
||||
},
|
||||
previous: {
|
||||
label: 'Go to previous language',
|
||||
keys: ['K'],
|
||||
},
|
||||
reset: {
|
||||
label: 'Reset language',
|
||||
keys: ['meta', 'shift', 'L'],
|
||||
},
|
||||
},
|
||||
items: [
|
||||
{ title: 'Reset locale', type: 'reset' },
|
||||
{ value: 'en', right: '🇺🇸', title: 'English' },
|
||||
{ value: 'es', right: '🇪🇸', title: 'Español' },
|
||||
{ value: 'zh', right: '🇨🇳', title: '中文' },
|
||||
{ value: 'kr', right: '🇰🇷', title: '한국어' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const initialGlobals = {
|
||||
sb_theme: 'light',
|
||||
locale: 'en',
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,98 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"style",
|
||||
"essentials"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/viewport",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/viewport"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"memoizerific": "^1.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-viewport",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export const ADDON_ID = 'storybook/viewport';
|
||||
export const PARAM_KEY = 'viewport';
|
||||
@ -1,8 +0,0 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
export * from './defaults';
|
||||
export type * from './types';
|
||||
|
||||
export default () => definePreview(addonAnnotations);
|
||||
@ -1,244 +0,0 @@
|
||||
import type { FC, ReactNode } from 'react';
|
||||
import React, { Fragment, memo, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
|
||||
|
||||
import { GrowIcon, TransferIcon } from '@storybook/icons';
|
||||
|
||||
import memoize from 'memoizerific';
|
||||
import { useGlobals, useParameter, useStorybookApi } from 'storybook/manager-api';
|
||||
import { Global, styled } from 'storybook/theming';
|
||||
|
||||
import { PARAM_KEY } from '../constants';
|
||||
import { MINIMAL_VIEWPORTS } from '../defaults';
|
||||
import { registerShortcuts } from '../shortcuts';
|
||||
import type { Styles, ViewportMap, ViewportStyles } from '../types';
|
||||
import type { ViewportAddonParameter } from './ViewportAddonParameter';
|
||||
|
||||
interface ViewportItem {
|
||||
id: string;
|
||||
title: string;
|
||||
styles: Styles;
|
||||
type: 'desktop' | 'mobile' | 'tablet' | 'other';
|
||||
default?: boolean;
|
||||
}
|
||||
|
||||
const toList = memoize(50)((items: ViewportMap): ViewportItem[] => [
|
||||
...baseViewports,
|
||||
...Object.entries(items).map(([id, { name, ...rest }]) => ({ ...rest, id, title: name })),
|
||||
]);
|
||||
|
||||
const responsiveViewport: ViewportItem = {
|
||||
id: 'reset',
|
||||
title: 'Reset viewport',
|
||||
styles: null,
|
||||
type: 'other',
|
||||
};
|
||||
|
||||
const baseViewports: ViewportItem[] = [responsiveViewport];
|
||||
|
||||
const toLinks = memoize(50)((
|
||||
list: ViewportItem[],
|
||||
active: LinkBase,
|
||||
updateGlobals,
|
||||
close
|
||||
): Link[] => {
|
||||
return list
|
||||
.filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
|
||||
.map((i) => {
|
||||
return {
|
||||
...i,
|
||||
onClick: () => {
|
||||
updateGlobals({ viewport: i.id });
|
||||
close();
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
interface LinkBase {
|
||||
id: string;
|
||||
title: string;
|
||||
right?: ReactNode;
|
||||
type: 'desktop' | 'mobile' | 'tablet' | 'other';
|
||||
styles: ViewportStyles | ((s: ViewportStyles) => ViewportStyles) | null;
|
||||
}
|
||||
|
||||
interface Link extends LinkBase {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const flip = ({ width, height, ...styles }: ViewportStyles) => ({
|
||||
...styles,
|
||||
height: width,
|
||||
width: height,
|
||||
});
|
||||
|
||||
const ActiveViewportSize = styled.div({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
const ActiveViewportLabel = styled.div(({ theme }) => ({
|
||||
display: 'inline-block',
|
||||
textDecoration: 'none',
|
||||
padding: 10,
|
||||
fontWeight: theme.typography.weight.bold,
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
lineHeight: '1',
|
||||
height: 40,
|
||||
border: 'none',
|
||||
borderTop: '3px solid transparent',
|
||||
borderBottom: '3px solid transparent',
|
||||
background: 'transparent',
|
||||
}));
|
||||
|
||||
const IconButtonWithLabel = styled(IconButton)(() => ({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const IconButtonLabel = styled.div(({ theme }) => ({
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
marginLeft: 10,
|
||||
}));
|
||||
|
||||
const getStyles = (
|
||||
prevStyles: ViewportStyles | undefined,
|
||||
styles: Styles,
|
||||
isRotated: boolean
|
||||
): ViewportStyles | undefined => {
|
||||
if (styles === null) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const result = typeof styles === 'function' ? styles(prevStyles) : styles;
|
||||
return isRotated ? flip(result) : result;
|
||||
};
|
||||
|
||||
export const ViewportToolLegacy: FC = memo(function Tool() {
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
|
||||
const {
|
||||
viewports = MINIMAL_VIEWPORTS,
|
||||
defaultOrientation,
|
||||
defaultViewport,
|
||||
disable,
|
||||
} = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
|
||||
|
||||
const list = toList(viewports);
|
||||
const api = useStorybookApi();
|
||||
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
||||
|
||||
if (defaultViewport && !list.find((i) => i.id === defaultViewport)) {
|
||||
console.warn(
|
||||
`Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
|
||||
}, [viewports, globals, globals.viewport, updateGlobals, api]);
|
||||
|
||||
useEffect(() => {
|
||||
const defaultRotated = defaultOrientation === 'landscape';
|
||||
|
||||
if (
|
||||
(defaultViewport && globals.viewport !== defaultViewport) ||
|
||||
(defaultOrientation && globals.viewportRotated !== defaultRotated)
|
||||
) {
|
||||
updateGlobals({
|
||||
viewport: defaultViewport,
|
||||
viewportRotated: defaultRotated,
|
||||
});
|
||||
}
|
||||
// NOTE: we don't want to re-run this effect when `globals` changes
|
||||
// due to https://github.com/storybookjs/storybook/issues/26334
|
||||
//
|
||||
// Also, this *will* rerun every time you change story as the parameter is briefly `undefined`.
|
||||
// This behavior is intentional, if a bit of a happy accident in implementation.
|
||||
//
|
||||
// Ultimately this process of "locking in" a parameter value should be
|
||||
// replaced by https://github.com/storybookjs/storybook/discussions/23347
|
||||
// or something similar.
|
||||
//
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [defaultOrientation, defaultViewport, updateGlobals]);
|
||||
|
||||
const item =
|
||||
list.find((i) => i.id === globals.viewport) ||
|
||||
list.find((i) => i.id === defaultViewport) ||
|
||||
list.find((i) => i.default) ||
|
||||
responsiveViewport;
|
||||
|
||||
const ref = useRef<ViewportStyles>();
|
||||
|
||||
const styles = getStyles(ref.current, item.styles, globals.viewportRotated);
|
||||
|
||||
useEffect(() => {
|
||||
ref.current = styles;
|
||||
}, [item]);
|
||||
|
||||
if (disable || Object.entries(viewports).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
tooltip={({ onHide }) => (
|
||||
<TooltipLinkList links={toLinks(list, item, updateGlobals, onHide)} />
|
||||
)}
|
||||
closeOnOutsideClick
|
||||
onVisibleChange={setIsTooltipVisible}
|
||||
>
|
||||
<IconButtonWithLabel
|
||||
key="viewport"
|
||||
title="Change the size of the preview"
|
||||
active={isTooltipVisible || !!styles}
|
||||
onDoubleClick={() => {
|
||||
updateGlobals({ viewport: responsiveViewport.id });
|
||||
}}
|
||||
>
|
||||
<GrowIcon />
|
||||
{styles ? (
|
||||
<IconButtonLabel>
|
||||
{globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
|
||||
</IconButtonLabel>
|
||||
) : null}
|
||||
</IconButtonWithLabel>
|
||||
</WithTooltip>
|
||||
|
||||
{styles ? (
|
||||
<ActiveViewportSize>
|
||||
<Global
|
||||
styles={{
|
||||
[`iframe[data-is-storybook="true"]`]: {
|
||||
...(styles || {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ActiveViewportLabel title="Viewport width">
|
||||
{styles.width.replace('px', '')}
|
||||
</ActiveViewportLabel>
|
||||
<IconButton
|
||||
key="viewport-rotate"
|
||||
title="Rotate viewport"
|
||||
onClick={() => {
|
||||
updateGlobals({ viewportRotated: !globals.viewportRotated });
|
||||
}}
|
||||
>
|
||||
<TransferIcon />
|
||||
</IconButton>
|
||||
<ActiveViewportLabel title="Viewport height">
|
||||
{styles.height.replace('px', '')}
|
||||
</ActiveViewportLabel>
|
||||
</ActiveViewportSize>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
import type { ViewportMap } from '../types';
|
||||
|
||||
// TODO: remove at 9.0
|
||||
export interface ViewportAddonParameter {
|
||||
disable?: boolean;
|
||||
defaultOrientation?: 'portrait' | 'landscape';
|
||||
defaultViewport?: string;
|
||||
viewports?: ViewportMap;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import { PARAM_KEY as KEY } from './constants';
|
||||
import type { GlobalState } from './types';
|
||||
|
||||
const modern: Record<string, GlobalState> = {
|
||||
[KEY]: { value: undefined, isRotated: false },
|
||||
};
|
||||
|
||||
// TODO: remove in 9.0
|
||||
const legacy = { viewport: 'reset', viewportRotated: false };
|
||||
|
||||
export const initialGlobals = globalThis.FEATURES?.viewportStoryGlobals ? modern : legacy;
|
||||
1
code/addons/viewport/src/typings.d.ts
vendored
1
code/addons/viewport/src/typings.d.ts
vendored
@ -1 +0,0 @@
|
||||
declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features'];
|
||||
@ -1,83 +0,0 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
import { expect } from 'storybook/test';
|
||||
|
||||
// these stories only work with `viewportStoryGlobals` set to false
|
||||
// because the `default` prop is dropped and because, `values` changed to `options` and is now an object
|
||||
|
||||
const first = Object.keys(MINIMAL_VIEWPORTS)[0];
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
label: 'Click Me!',
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
viewports: MINIMAL_VIEWPORTS,
|
||||
},
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = {
|
||||
parameters: {},
|
||||
};
|
||||
|
||||
export const Selected = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: first,
|
||||
},
|
||||
},
|
||||
play: async () => {
|
||||
const viewportStyles = MINIMAL_VIEWPORTS[first].styles;
|
||||
const viewportDimensions = {
|
||||
width: typeof viewportStyles === 'object' && Number.parseInt(viewportStyles!.width, 10),
|
||||
height: typeof viewportStyles === 'object' && Number.parseInt(viewportStyles!.height, 10),
|
||||
};
|
||||
|
||||
const windowDimensions = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
};
|
||||
|
||||
await expect(viewportDimensions).toEqual(windowDimensions);
|
||||
},
|
||||
tags: ['!test'],
|
||||
};
|
||||
|
||||
export const Orientation = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: first,
|
||||
defaultOrientation: 'landscape',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Custom = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: 'phone',
|
||||
viewports: {
|
||||
phone: {
|
||||
name: 'Phone Width',
|
||||
styles: {
|
||||
height: '600px',
|
||||
width: '100vh',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled = {
|
||||
parameters: {
|
||||
viewport: { disable: true },
|
||||
},
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-vite",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "A plugin to run and build Storybooks with Vite",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
|
||||
"bugs": {
|
||||
|
||||
@ -20,11 +20,9 @@ const INCLUDE_CANDIDATES = [
|
||||
'@storybook/addon-designs/blocks',
|
||||
'@storybook/addon-docs/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-interactions/preview',
|
||||
'@storybook/addon-links/preview',
|
||||
@ -32,8 +30,6 @@ const INCLUDE_CANDIDATES = [
|
||||
'@storybook/addon-outline/preview',
|
||||
'@storybook/addon-themes',
|
||||
'@storybook/addon-themes/preview',
|
||||
'@storybook/addon-viewport',
|
||||
'@storybook/addon-viewport/preview',
|
||||
'@storybook/blocks',
|
||||
'@storybook/addon-test/preview',
|
||||
'@storybook/experimental-nextjs-vite/dist/preview.mjs',
|
||||
@ -75,7 +71,6 @@ const INCLUDE_CANDIDATES = [
|
||||
'fast-deep-equal',
|
||||
'html-tags',
|
||||
'isobject',
|
||||
'jsdoc-type-pratt-parser', // TODO: Remove this once it's converted to ESM: https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/173
|
||||
'loader-utils',
|
||||
'lodash/camelCase.js',
|
||||
'lodash/camelCase',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-webpack5",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"version": "9.0.0-alpha.9",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 470 KiB After Width: | Height: | Size: 470 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 371 KiB After Width: | Height: | Size: 371 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
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