mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Merge pull request #30804 from storybookjs/version-non-patch-from-9.0.0-alpha.3
Release: Prerelease 9.0.0-alpha.4
This commit is contained in:
Kasper Peulen
GitHub
commit
cc8754b3a8
@ -367,10 +367,10 @@ jobs:
|
||||
- report-workflow-on-failure
|
||||
chromatic-internal-storybook:
|
||||
executor:
|
||||
class: medium
|
||||
class: large
|
||||
name: sb_node_22_browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=6144
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
steps:
|
||||
# switched this to the CircleCI helper to get the full git history for TurboSnap
|
||||
- checkout
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
## 9.0.0-alpha.4
|
||||
|
||||
- Automigrate: Prefer framework import - [#30785](https://github.com/storybookjs/storybook/pull/30785), thanks @ndelangen!
|
||||
- Blocks: IconGallery improvement - [#30743](https://github.com/storybookjs/storybook/pull/30743), thanks @leeovictor!
|
||||
- CLI: Do not install renderer package on `init` - [#30799](https://github.com/storybookjs/storybook/pull/30799), thanks @ndelangen!
|
||||
- Core: Move @storybook/addon-actions into storybook - [#30765](https://github.com/storybookjs/storybook/pull/30765), thanks @valentinpalkovic!
|
||||
|
||||
## 9.0.0-alpha.3
|
||||
|
||||
- Addon A11y: Promote @storybook/global to full dependency - [#30723](https://github.com/storybookjs/storybook/pull/30723), thanks @mrginglymus!
|
||||
|
||||
44
MIGRATION.md
44
MIGRATION.md
@ -1,6 +1,7 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
|
||||
- [Actions addon moved to core](#actions-addon-moved-to-core)
|
||||
- [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)
|
||||
@ -121,17 +122,17 @@
|
||||
- [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
|
||||
- [Removed `config` preset](#removed-config-preset-1)
|
||||
- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
|
||||
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
|
||||
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
|
||||
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
|
||||
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
|
||||
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
|
||||
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
|
||||
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
|
||||
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
|
||||
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
|
||||
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
|
||||
- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
|
||||
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
|
||||
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
|
||||
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
|
||||
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
|
||||
- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
|
||||
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
|
||||
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
|
||||
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
|
||||
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [7.0 breaking changes](#70-breaking-changes)
|
||||
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
|
||||
@ -157,7 +158,7 @@
|
||||
- [Deploying build artifacts](#deploying-build-artifacts)
|
||||
- [Dropped support for file URLs](#dropped-support-for-file-urls)
|
||||
- [Serving with nginx](#serving-with-nginx)
|
||||
- [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
|
||||
- [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
|
||||
- [7.0 Core changes](#70-core-changes)
|
||||
- [7.0 feature flags removed](#70-feature-flags-removed)
|
||||
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
|
||||
@ -171,7 +172,7 @@
|
||||
- [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
|
||||
- [7.0 Vite changes](#70-vite-changes)
|
||||
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
|
||||
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [7.0 Webpack changes](#70-webpack-changes)
|
||||
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
||||
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
|
||||
@ -222,7 +223,7 @@
|
||||
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
|
||||
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
|
||||
- [Autoplay in docs](#autoplay-in-docs)
|
||||
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
|
||||
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
|
||||
- [`Story` type deprecated](#story-type-deprecated)
|
||||
@ -437,17 +438,24 @@
|
||||
|
||||
## From version 8.x to 9.0.0
|
||||
|
||||
### Actions addon 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.
|
||||
|
||||
### Dropped support for legacy packages
|
||||
|
||||
The following packages are no longer published as part of `9.0.0`:
|
||||
The following packages have been consolidated into the main `storybook` package:
|
||||
|
||||
| Old Package | New Path |
|
||||
| ---------------------- | ------------------------------ |
|
||||
| @storybook/manager-api | storybook/manager-api |
|
||||
| @storybook/preview-api | storybook/preview-api |
|
||||
| @storybook/theming | storybook/theming |
|
||||
| @storybook/test | storybook/test |
|
||||
| Old Package | New Path |
|
||||
| ------------------------ | --------------------- |
|
||||
| @storybook/manager-api | storybook/manager-api |
|
||||
| @storybook/preview-api | storybook/preview-api |
|
||||
| @storybook/theming | storybook/theming |
|
||||
| @storybook/test | storybook/test |
|
||||
| @storybook/addon-actions | storybook/actions |
|
||||
|
||||
Please un-install these packages, and ensure you have the `storybook` package installed.
|
||||
|
||||
|
||||
@ -37,10 +37,6 @@ const config = defineMain({
|
||||
directory: '../addons/a11y/template/stories',
|
||||
titlePrefix: 'addons/a11y',
|
||||
},
|
||||
{
|
||||
directory: '../addons/actions/template/stories',
|
||||
titlePrefix: 'addons/actions',
|
||||
},
|
||||
{
|
||||
directory: '../addons/backgrounds/template/stories',
|
||||
titlePrefix: 'addons/backgrounds',
|
||||
@ -144,7 +140,7 @@ const config = defineMain({
|
||||
...(configType === 'DEVELOPMENT'
|
||||
? {
|
||||
'storybook/internal/components': componentsPath,
|
||||
'storybook/internal/manager-api': managerApiPath,
|
||||
'storybook/manager-api': managerApiPath,
|
||||
'sb-original/image-context': imageContextPath,
|
||||
}
|
||||
: {}),
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { addons } from 'storybook/internal/manager-api';
|
||||
|
||||
import { startCase } from 'es-toolkit/compat';
|
||||
import { addons } from 'storybook/manager-api';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
|
||||
@ -2,17 +2,6 @@ import * as React from 'react';
|
||||
import { Fragment, useEffect } from 'react';
|
||||
|
||||
import type { Channel } from 'storybook/internal/channels';
|
||||
import { DocsContext as DocsContextProps, useArgs } from 'storybook/internal/preview-api';
|
||||
import type { PreviewWeb } from 'storybook/internal/preview-api';
|
||||
import {
|
||||
Global,
|
||||
ThemeProvider,
|
||||
convert,
|
||||
createReset,
|
||||
styled,
|
||||
themes,
|
||||
useTheme,
|
||||
} from 'storybook/internal/theming';
|
||||
|
||||
import { DocsContext } from '@storybook/blocks';
|
||||
import { global } from '@storybook/global';
|
||||
@ -28,6 +17,18 @@ import addonEssentials from '@storybook/addon-essentials';
|
||||
import addonTest from '@storybook/addon-test';
|
||||
import addonThemes from '@storybook/addon-themes';
|
||||
|
||||
import { DocsContext as DocsContextProps, useArgs } from 'storybook/preview-api';
|
||||
import type { PreviewWeb } from 'storybook/preview-api';
|
||||
import {
|
||||
Global,
|
||||
ThemeProvider,
|
||||
convert,
|
||||
createReset,
|
||||
styled,
|
||||
themes,
|
||||
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';
|
||||
|
||||
@ -42,7 +42,7 @@ export default mergeConfig(
|
||||
'**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
|
||||
'../lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
|
||||
],
|
||||
// TODO: bring this back once portable stories support storybook/internal/preview-api hooks
|
||||
// TODO: bring this back once portable stories support storybook/preview-api hooks
|
||||
// @ts-expect-error this type does not exist but the property does!
|
||||
testNamePattern: /^(?!.*(UseState)).*$/,
|
||||
browser: {
|
||||
|
||||
50
code/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch
generated
Normal file
50
code/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch
generated
Normal file
@ -0,0 +1,50 @@
|
||||
diff --git a/dist/cjs/utils/dataTransfer/Clipboard.js b/dist/cjs/utils/dataTransfer/Clipboard.js
|
||||
index 434be791b156984a8b76287bc0cc6c8955df4203..e28a15e85e2dccff058a18b4b80b099b7016d688 100644
|
||||
--- a/dist/cjs/utils/dataTransfer/Clipboard.js
|
||||
+++ b/dist/cjs/utils/dataTransfer/Clipboard.js
|
||||
@@ -155,10 +155,18 @@ async function writeDataTransferToClipboard(document, clipboardData) {
|
||||
}
|
||||
const g = globalThis;
|
||||
/* istanbul ignore else */ if (typeof g.afterEach === 'function') {
|
||||
- g.afterEach(()=>resetClipboardStubOnView(globalThis.window));
|
||||
+ g.afterEach(()=>{
|
||||
+ if(typeof globalThis.window !== 'undefined'){
|
||||
+ resetClipboardStubOnView(globalThis.window);
|
||||
+ }
|
||||
+ });
|
||||
}
|
||||
/* istanbul ignore else */ if (typeof g.afterAll === 'function') {
|
||||
- g.afterAll(()=>detachClipboardStubFromView(globalThis.window));
|
||||
+ g.afterAll(()=>{
|
||||
+ if(typeof globalThis.window !== 'undefined'){
|
||||
+ detachClipboardStubFromView(globalThis.window);
|
||||
+ }
|
||||
+ });
|
||||
}
|
||||
|
||||
exports.attachClipboardStubToView = attachClipboardStubToView;
|
||||
diff --git a/dist/esm/utils/dataTransfer/Clipboard.js b/dist/esm/utils/dataTransfer/Clipboard.js
|
||||
index 2ed2676b52adaee045d2594b051c08a4b133e7df..337e644ed268ad4ad0ce9a601d6d0aec73264d5e 100644
|
||||
--- a/dist/esm/utils/dataTransfer/Clipboard.js
|
||||
+++ b/dist/esm/utils/dataTransfer/Clipboard.js
|
||||
@@ -153,10 +153,18 @@ async function writeDataTransferToClipboard(document, clipboardData) {
|
||||
}
|
||||
const g = globalThis;
|
||||
/* istanbul ignore else */ if (typeof g.afterEach === 'function') {
|
||||
- g.afterEach(()=>resetClipboardStubOnView(globalThis.window));
|
||||
+ g.afterEach(()=>{
|
||||
+ if(typeof globalThis.window !== 'undefined'){
|
||||
+ resetClipboardStubOnView(globalThis.window);
|
||||
+ }
|
||||
+ });
|
||||
}
|
||||
/* istanbul ignore else */ if (typeof g.afterAll === 'function') {
|
||||
- g.afterAll(()=>detachClipboardStubFromView(globalThis.window));
|
||||
+ g.afterAll(()=>{
|
||||
+ if(typeof globalThis.window !== 'undefined'){
|
||||
+ detachClipboardStubFromView(globalThis.window);
|
||||
+ }
|
||||
+ });
|
||||
}
|
||||
|
||||
export { attachClipboardStubToView, createClipboardItem, detachClipboardStubFromView, readDataTransferFromClipboard, resetClipboardStubOnView, writeDataTransferToClipboard };
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { action } from "storybook/actions";
|
||||
import { Button } from "@storybook/react/demo";
|
||||
|
||||
const meta = {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { action } from "storybook/actions";
|
||||
import { Button } from "@storybook/react/demo";
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { action } from "storybook/actions";
|
||||
import { Button } from "@storybook/react/demo";
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { action } from "storybook/actions";
|
||||
import { Button } from "@storybook/react/demo";
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import type { Mock } from 'vitest';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { addons } from 'storybook/internal/preview-api';
|
||||
import { addons } from 'storybook/preview-api';
|
||||
|
||||
import { EVENTS } from './constants';
|
||||
|
||||
vi.mock('storybook/internal/preview-api');
|
||||
vi.mock('storybook/preview-api');
|
||||
const mockedAddons = vi.mocked(addons);
|
||||
|
||||
describe('a11yRunner', () => {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { addons } from 'storybook/internal/preview-api';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import type { AxeResults } from 'axe-core';
|
||||
import { addons } from 'storybook/preview-api';
|
||||
|
||||
import { EVENTS } from './constants';
|
||||
import type { A11yParameters } from './params';
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { ManagerContext } from 'storybook/internal/manager-api';
|
||||
import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import type axe from 'axe-core';
|
||||
import { ManagerContext } from 'storybook/manager-api';
|
||||
import { fn } from 'storybook/test';
|
||||
import { ThemeProvider, convert, themes } from 'storybook/theming';
|
||||
|
||||
import { A11YPanel } from './A11YPanel';
|
||||
import { A11yContext } from './A11yContext';
|
||||
|
||||
@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
|
||||
import { ThemeProvider, convert, themes } from 'storybook/theming';
|
||||
|
||||
import { A11YPanel } from './A11YPanel';
|
||||
import { type A11yContextStore, useA11yContext } from './A11yContext';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { ActionBar, ScrollArea } from 'storybook/internal/components';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import { CheckIcon, SyncIcon } from '@storybook/icons';
|
||||
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { useA11yContext } from './A11yContext';
|
||||
import { Report } from './Report';
|
||||
import { Tabs } from './Tabs';
|
||||
|
||||
@ -9,14 +9,14 @@ import {
|
||||
STORY_RENDER_PHASE_CHANGED,
|
||||
type StoryFinishedPayload,
|
||||
} from 'storybook/internal/core-events';
|
||||
import * as api from 'storybook/internal/manager-api';
|
||||
|
||||
import type { AxeResults } from 'axe-core';
|
||||
import * as api from 'storybook/manager-api';
|
||||
|
||||
import { EVENTS, TEST_PROVIDER_ID } from '../constants';
|
||||
import { A11yContextProvider, useA11yContext } from './A11yContext';
|
||||
|
||||
vi.mock('storybook/internal/manager-api');
|
||||
vi.mock('storybook/manager-api');
|
||||
const mockedApi = vi.mocked(api);
|
||||
|
||||
const storyId = 'button--primary';
|
||||
|
||||
@ -6,6 +6,10 @@ import {
|
||||
STORY_RENDER_PHASE_CHANGED,
|
||||
type StoryFinishedPayload,
|
||||
} from 'storybook/internal/core-events';
|
||||
|
||||
import { HIGHLIGHT } from '@storybook/addon-highlight';
|
||||
|
||||
import type { AxeResults, Result } from 'axe-core';
|
||||
import {
|
||||
useAddonState,
|
||||
useChannel,
|
||||
@ -13,13 +17,9 @@ import {
|
||||
useParameter,
|
||||
useStorybookApi,
|
||||
useStorybookState,
|
||||
} from 'storybook/internal/manager-api';
|
||||
import type { Report } from 'storybook/internal/preview-api';
|
||||
import { convert, themes } from 'storybook/internal/theming';
|
||||
|
||||
import { HIGHLIGHT } from '@storybook/addon-highlight';
|
||||
|
||||
import type { AxeResults, Result } from 'axe-core';
|
||||
} from 'storybook/manager-api';
|
||||
import type { Report } from 'storybook/preview-api';
|
||||
import { convert, themes } from 'storybook/theming';
|
||||
|
||||
import { ADDON_ID, EVENTS, TEST_PROVIDER_ID } from '../constants';
|
||||
import type { A11yParameters } from '../params';
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { NodeResult } from 'axe-core';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import type { RuleType } from '../A11YPanel';
|
||||
import HighlightToggle from './HighlightToggle';
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { NodeResult } from 'axe-core';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { useA11yContext } from '../A11yContext';
|
||||
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { Result } from 'axe-core';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
const Wrapper = styled.div({
|
||||
padding: 12,
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { Fragment, useState } from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import { ChevronSmallDownIcon } from '@storybook/icons';
|
||||
|
||||
import type { Result } from 'axe-core';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import type { RuleType } from '../A11YPanel';
|
||||
import { Elements } from './Elements';
|
||||
|
||||
@ -2,10 +2,10 @@ import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { Badge } from 'storybook/internal/components';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { CheckResult } from 'axe-core';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
const List = styled.div({
|
||||
display: 'flex',
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { TagValue } from 'axe-core';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
const Wrapper = styled.div({
|
||||
display: 'flex',
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { NodeResult, Result } from 'axe-core';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import type { RuleType } from './A11YPanel';
|
||||
import { useA11yContext } from './A11yContext';
|
||||
import HighlightToggle from './Report/HighlightToggle';
|
||||
|
||||
// TODO: reuse the Tabs component from storybook/internal/theming instead of re-building identical functionality
|
||||
// TODO: reuse the Tabs component from storybook/theming instead of re-building identical functionality
|
||||
|
||||
const Container = styled.div({
|
||||
width: '100%',
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import { ManagerContext } from 'storybook/internal/manager-api';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { ManagerContext } from 'storybook/manager-api';
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { Link } from 'storybook/internal/components';
|
||||
import { useStorybookApi } from 'storybook/internal/manager-api';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import { useStorybookApi } from 'storybook/manager-api';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import { describe, expect, it } from 'vitest';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
|
||||
import { ThemeProvider, convert, themes } from 'storybook/theming';
|
||||
|
||||
import { VisionSimulator, baseList } from './VisionSimulator';
|
||||
|
||||
|
||||
@ -2,10 +2,11 @@ import type { ReactNode } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
|
||||
import { Global, styled } from 'storybook/internal/theming';
|
||||
|
||||
import { AccessibilityIcon } from '@storybook/icons';
|
||||
|
||||
import { Global, styled } from 'storybook/theming';
|
||||
|
||||
import { Filters } from './ColorFilters';
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import * as api from 'storybook/internal/manager-api';
|
||||
import type { Addon_BaseType } from 'storybook/internal/types';
|
||||
|
||||
import * as api from 'storybook/manager-api';
|
||||
|
||||
import { PANEL_ID } from './constants';
|
||||
import './manager';
|
||||
|
||||
vi.mock('storybook/internal/manager-api');
|
||||
vi.mock('storybook/manager-api');
|
||||
const mockedApi = vi.mocked<api.API>(api as any);
|
||||
mockedApi.useAddonState = vi.fn();
|
||||
const mockedAddons = vi.mocked(api.addons);
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Badge, Spaced } from 'storybook/internal/components';
|
||||
import { addons, types, useAddonState } from 'storybook/internal/manager-api';
|
||||
|
||||
import { addons, types, useAddonState } from 'storybook/manager-api';
|
||||
|
||||
import { A11YPanel } from './components/A11YPanel';
|
||||
import type { Results } from './components/A11yContext';
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
## Advanced/Legacy Actions usage
|
||||
|
||||
For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions).
|
||||
|
||||
This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0).
|
||||
|
||||
## Manually-specified actions
|
||||
|
||||
Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
|
||||
|
||||
> _Note: Be mindful of the choice of the function's name. Avoid using Javascript reserved words such as **default** or **if**, as they will lead into unexpected errors._
|
||||
|
||||
```js
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Button from './button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const defaultView = () => <Button onClick={action('button-click')}>Hello World!</Button>;
|
||||
```
|
||||
|
||||
## Multiple actions
|
||||
|
||||
If your story requires multiple actions, it may be convenient to use `actions` to create many at once:
|
||||
|
||||
```js
|
||||
import { actions } from '@storybook/addon-actions';
|
||||
import Button from './button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
// This will lead to { onClick: action('onClick'), ... }
|
||||
const eventsFromNames = actions('onClick', 'onMouseOver');
|
||||
|
||||
// This will lead to { onClick: action('clicked'), ... }
|
||||
const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
|
||||
|
||||
export const first = () => <Button {...eventsFromNames}>Hello World!</Button>;
|
||||
|
||||
export const second = () => <Button {...eventsFromObject}>Hello World!</Button>;
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.
|
||||
|
||||
This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth.
|
||||
|
||||
The action logger, by default, will log all actions fired during the lifetime of the story. After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged.
|
||||
|
||||
To apply the configuration globally use the `configureActions` function in your `preview.js` file.
|
||||
|
||||
```js
|
||||
import { configureActions } from '@storybook/addon-actions';
|
||||
|
||||
configureActions({
|
||||
maxDepth: 100,
|
||||
// Limit the number of items logged into the actions panel
|
||||
limit: 20,
|
||||
});
|
||||
```
|
||||
|
||||
To apply the configuration per action use:
|
||||
|
||||
```js
|
||||
action('my-action', {
|
||||
maxDepth: 5,
|
||||
});
|
||||
```
|
||||
|
||||
### Available Options
|
||||
|
||||
| Name | Type | Description | Default |
|
||||
| -------------------- | ------- | ----------------------------------------------------------------------------------- | ------- |
|
||||
| `maxDepth` | Number | Configures the transferred depth of any logged objects. | `10` |
|
||||
| `clearOnStoryChange` | Boolean | Flag whether to clear the action logger when switching away from the current story. | `true` |
|
||||
| `limit` | Number | Limits the number of items logged in the action logger | `50` |
|
||||
@ -1,27 +0,0 @@
|
||||
# Storybook Addon Actions
|
||||
|
||||
Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Actions 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-actions
|
||||
```
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: ['@storybook/addon-actions'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,109 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "9.0.0-alpha.3",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"essentials",
|
||||
"data-state"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/actions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/actions"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./decorator": {
|
||||
"types": "./dist/decorator.d.ts",
|
||||
"import": "./dist/decorator.mjs",
|
||||
"require": "./dist/decorator.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register.js": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"react-native": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"decorator": [
|
||||
"dist/decorator.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",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"dequal": "^2.0.2",
|
||||
"polished": "^4.2.2",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-inspector": "^6.0.0",
|
||||
"telejson": "^7.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/decorator.ts",
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-actions",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
export * from './constants';
|
||||
export * from './models';
|
||||
export * from './runtime';
|
||||
|
||||
export default () => definePreview(addonAnnotations);
|
||||
|
||||
export type { ActionsParameters } from './types';
|
||||
@ -1,2 +0,0 @@
|
||||
export * from './addArgs';
|
||||
export * from './loaders';
|
||||
@ -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,10 +1,11 @@
|
||||
import React, { Fragment, memo, useCallback, useState } from 'react';
|
||||
|
||||
import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
|
||||
import { useGlobals, useParameter } from 'storybook/internal/manager-api';
|
||||
|
||||
import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
|
||||
|
||||
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';
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect } from 'storybook/internal/preview-api';
|
||||
import type { DecoratorFunction } from 'storybook/internal/types';
|
||||
|
||||
import { useEffect } from 'storybook/preview-api';
|
||||
|
||||
import { PARAM_KEY as KEY } from './constants';
|
||||
import { DEFAULT_BACKGROUNDS } from './defaults';
|
||||
import type { Config, GridConfig } from './types';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
|
||||
@ -3,11 +3,11 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
|
||||
|
||||
import { logger } from 'storybook/internal/client-logger';
|
||||
import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
|
||||
import { useGlobals, useParameter } from 'storybook/internal/manager-api';
|
||||
|
||||
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';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
export const ColorIcon = styled.span(
|
||||
({ background }: { background: string }) => ({
|
||||
|
||||
@ -2,10 +2,11 @@ import type { FC } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
|
||||
import { IconButton } from 'storybook/internal/components';
|
||||
import { useGlobals, useParameter } from 'storybook/internal/manager-api';
|
||||
|
||||
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() {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo } from 'storybook/internal/preview-api';
|
||||
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';
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo } from 'storybook/internal/preview-api';
|
||||
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';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import { addons, types } from 'storybook/internal/manager-api';
|
||||
import { addons, types } from 'storybook/manager-api';
|
||||
|
||||
import { BackgroundTool } from './components/Tool';
|
||||
import { ADDON_ID } from './constants';
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import {
|
||||
useArgTypes,
|
||||
useArgs,
|
||||
useGlobals,
|
||||
useParameter,
|
||||
useStorybookState,
|
||||
} from 'storybook/internal/manager-api';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
import type { ArgTypes } from 'storybook/internal/types';
|
||||
|
||||
import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { dequal as deepEqual } from 'dequal';
|
||||
import {
|
||||
useArgTypes,
|
||||
useArgs,
|
||||
useGlobals,
|
||||
useParameter,
|
||||
useStorybookState,
|
||||
} from 'storybook/manager-api';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { SaveStory } from './SaveStory';
|
||||
import { PARAM_KEY } from './constants';
|
||||
|
||||
@ -2,9 +2,8 @@ import React from 'react';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { expect, fireEvent, fn, userEvent, within } from 'storybook/test';
|
||||
import { action } from 'storybook/actions';
|
||||
import { expect, fireEvent, fn, within } from 'storybook/test';
|
||||
|
||||
import { SaveStory } from './SaveStory';
|
||||
|
||||
@ -41,7 +40,8 @@ export const Creating = {
|
||||
} satisfies Story;
|
||||
|
||||
export const Created: Story = {
|
||||
play: async (context) => {
|
||||
play: async ({ context, userEvent }) => {
|
||||
// eslint-disable-next-line storybook/context-in-play-function
|
||||
await Creating.play(context);
|
||||
|
||||
const dialog = await within(document.body).findByRole('dialog');
|
||||
|
||||
@ -9,10 +9,11 @@ import {
|
||||
TooltipNote,
|
||||
WithTooltip,
|
||||
} from 'storybook/internal/components';
|
||||
import { keyframes, styled } from 'storybook/internal/theming';
|
||||
|
||||
import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons';
|
||||
|
||||
import { keyframes, styled } from 'storybook/theming';
|
||||
|
||||
const slideIn = keyframes({
|
||||
from: { transform: 'translateY(40px)' },
|
||||
to: { transform: 'translateY(0)' },
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
export { PARAM_KEY } from './constants';
|
||||
|
||||
|
||||
@ -8,15 +8,10 @@ import type {
|
||||
} from 'storybook/internal/core-events';
|
||||
import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
|
||||
import type { Args } from 'storybook/internal/csf';
|
||||
import {
|
||||
addons,
|
||||
experimental_requestResponse,
|
||||
types,
|
||||
useArgTypes,
|
||||
} from 'storybook/internal/manager-api';
|
||||
import { color } from 'storybook/internal/theming';
|
||||
|
||||
import { dequal as deepEqual } from 'dequal';
|
||||
import { addons, experimental_requestResponse, types, useArgTypes } from 'storybook/manager-api';
|
||||
import { color } from 'storybook/theming';
|
||||
|
||||
import { ControlsPanel } from './ControlsPanel';
|
||||
import { ADDON_ID, PARAM_KEY } from './constants';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
|
||||
@ -2,11 +2,12 @@ import React from 'react';
|
||||
|
||||
import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
|
||||
import { addons, types, useChannel, useParameter } from 'storybook/internal/manager-api';
|
||||
import { ignoreSsrWarning, styled, useTheme } from 'storybook/internal/theming';
|
||||
|
||||
import { Source, type SourceParameters } from '@storybook/blocks';
|
||||
|
||||
import { addons, types, useChannel, useParameter } from 'storybook/manager-api';
|
||||
import { ignoreSsrWarning, styled, useTheme } from 'storybook/theming';
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Code',
|
||||
|
||||
@ -8,7 +8,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):
|
||||
|
||||
- [Actions](https://github.com/storybookjs/storybook/tree/next/code/addons/actions)
|
||||
- [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)
|
||||
@ -54,4 +53,4 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
Valid addon keys include: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
|
||||
Valid addon keys include: `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
|
||||
|
||||
@ -32,12 +32,6 @@
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./actions/preview": {
|
||||
"types": "./dist/actions/preview.d.ts",
|
||||
"import": "./dist/actions/preview.mjs",
|
||||
"require": "./dist/actions/preview.js"
|
||||
},
|
||||
"./actions/manager": "./dist/actions/manager.js",
|
||||
"./backgrounds/preview": {
|
||||
"types": "./dist/backgrounds/preview.d.ts",
|
||||
"import": "./dist/backgrounds/preview.mjs",
|
||||
@ -105,7 +99,6 @@
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "workspace:*",
|
||||
"@storybook/addon-backgrounds": "workspace:*",
|
||||
"@storybook/addon-controls": "workspace:*",
|
||||
"@storybook/addon-docs": "workspace:*",
|
||||
@ -138,7 +131,6 @@
|
||||
"./src/docs/manager.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/actions/manager.ts",
|
||||
"./src/backgrounds/manager.ts",
|
||||
"./src/controls/manager.ts",
|
||||
"./src/docs/manager.ts",
|
||||
@ -149,7 +141,6 @@
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts",
|
||||
"./src/actions/preview.ts",
|
||||
"./src/backgrounds/preview.ts",
|
||||
"./src/docs/preview.ts",
|
||||
"./src/highlight/preview.ts",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types needed for this)
|
||||
export * from '@storybook/addon-actions/manager';
|
||||
@ -1,3 +0,0 @@
|
||||
// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
|
||||
|
||||
export * from '@storybook/addon-actions/preview';
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import addonAnnotations from './preview';
|
||||
|
||||
|
||||
@ -4,13 +4,6 @@ import { serverRequire } from 'storybook/internal/common';
|
||||
import { logger } from 'storybook/internal/node-logger';
|
||||
|
||||
interface PresetOptions {
|
||||
/**
|
||||
* Allow to use @storybook/addon-actions
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-actions
|
||||
*/
|
||||
actions?: boolean;
|
||||
/**
|
||||
* Allow to use @storybook/addon-backgrounds
|
||||
*
|
||||
@ -89,7 +82,6 @@ export function addons(options: PresetOptions) {
|
||||
// NOTE: The order of these addons is important.
|
||||
return [
|
||||
'controls',
|
||||
'actions',
|
||||
'docs',
|
||||
'backgrounds',
|
||||
'viewport',
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import { composeConfigs } from 'storybook/internal/preview-api';
|
||||
|
||||
import actionsAddon from '@storybook/addon-actions';
|
||||
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
|
||||
@ -10,8 +7,9 @@ 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([
|
||||
actionsAddon(),
|
||||
// TODO: we can't use this as function because of the --test flag
|
||||
docsAddon,
|
||||
backgroundsAddon(),
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import type { ActionsParameters } from '@storybook/addon-actions';
|
||||
import type { BackgroundsParameters } from '@storybook/addon-backgrounds';
|
||||
import type { DocsParameters } from '@storybook/addon-docs';
|
||||
import type { HighlightParameters } from '@storybook/addon-highlight';
|
||||
@ -7,8 +6,7 @@ import type { OutlineParameters } from '@storybook/addon-outline';
|
||||
import type { ViewportParameters } from '@storybook/addon-viewport';
|
||||
|
||||
export interface EssentialsParameters
|
||||
extends ActionsParameters,
|
||||
BackgroundsParameters,
|
||||
extends BackgroundsParameters,
|
||||
DocsParameters,
|
||||
HighlightParameters,
|
||||
MeasureParameters,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import './preview';
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
/* eslint-env browser */
|
||||
import { STORY_CHANGED } from 'storybook/internal/core-events';
|
||||
import { addons } from 'storybook/internal/preview-api';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { addons } from 'storybook/preview-api';
|
||||
|
||||
import { HIGHLIGHT, HIGHLIGHT_STYLE_ID, RESET_HIGHLIGHT } from './constants';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
@ -20,8 +20,6 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
Note that `@storybook/addon-interactions` must be listed **after** `@storybook/addon-actions` or `@storybook/addon-essentials`.
|
||||
|
||||
## Usage
|
||||
|
||||
Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `storybook/test` instead of their original package. You can then use these libraries in your `play` function.
|
||||
|
||||
@ -9,10 +9,11 @@ import {
|
||||
UNHANDLED_ERRORS_WHILE_PLAYING,
|
||||
} from 'storybook/internal/core-events';
|
||||
import { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
|
||||
import { useAddonState, useChannel, useParameter } from 'storybook/internal/manager-api';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { useAddonState, useChannel, useParameter } from 'storybook/manager-api';
|
||||
|
||||
import { InteractionsPanel } from './components/InteractionsPanel';
|
||||
import { ADDON_ID } from './constants';
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { EmptyTabContent, Link } from 'storybook/internal/components';
|
||||
import { useStorybookApi } from 'storybook/internal/manager-api';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import { DocumentIcon, VideoIcon } from '@storybook/icons';
|
||||
|
||||
import { useStorybookApi } from 'storybook/manager-api';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
|
||||
|
||||
const Links = styled.div(({ theme }) => ({
|
||||
|
||||
@ -2,11 +2,11 @@ import * as React from 'react';
|
||||
|
||||
import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
|
||||
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
|
||||
import { styled, typography } from 'storybook/internal/theming';
|
||||
|
||||
import { ListUnorderedIcon } from '@storybook/icons';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
import { isChaiError, isJestError, useAnsiToHtmlFilter } from '../utils';
|
||||
import type { Controls } from './InteractionsPanel';
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { expect, userEvent, waitFor, within } from 'storybook/test';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { isChromatic } from '../../../../.storybook/isChromatic';
|
||||
import { getCalls, getInteractions } from '../mocks';
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
|
||||
import { Empty } from './EmptyState';
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { Fragment, useState } from 'react';
|
||||
|
||||
import { convert, styled, themes } from 'storybook/internal/theming';
|
||||
|
||||
import { ChevronSmallDownIcon } from '@storybook/icons';
|
||||
|
||||
import { convert, styled, themes } from 'storybook/theming';
|
||||
|
||||
const ListWrapper = styled.ul({
|
||||
listStyle: 'none',
|
||||
fontSize: 14,
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import { styled } from 'storybook/theming';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import { MatcherResult } from './MatcherResult';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { styled, typography } from 'storybook/internal/theming';
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
import { useAnsiToHtmlFilter } from '../utils';
|
||||
import { Node } from './MethodCall';
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { Call } from 'storybook/internal/instrumenter';
|
||||
import { styled, typography } from 'storybook/internal/theming';
|
||||
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
import { MethodCall, Node } from './MethodCall';
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@ import type { ReactElement } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
|
||||
import { useTheme } from 'storybook/internal/theming';
|
||||
|
||||
import { ObjectInspector } from '@devtools-ds/object-inspector';
|
||||
import { useTheme } from 'storybook/theming';
|
||||
|
||||
const colorsLight = {
|
||||
base: '#444',
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import { type Call, CallStates } from 'storybook/internal/instrumenter';
|
||||
import { styled, typography } from 'storybook/internal/theming';
|
||||
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
export interface StatusBadgeProps {
|
||||
status: Call['status'];
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { type Call, CallStates } from 'storybook/internal/instrumenter';
|
||||
import { styled, useTheme } from 'storybook/internal/theming';
|
||||
|
||||
import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled, useTheme } from 'storybook/theming';
|
||||
|
||||
export interface StatusIconProps {
|
||||
status: Call['status'];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { action } from 'storybook/actions';
|
||||
|
||||
import { parameters } from '../preview';
|
||||
import { Subnav } from './Subnav';
|
||||
|
||||
@ -12,7 +12,6 @@ import {
|
||||
} from 'storybook/internal/components';
|
||||
import type { Call, ControlStates } from 'storybook/internal/instrumenter';
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
|
||||
import {
|
||||
FastForwardIcon,
|
||||
@ -22,6 +21,8 @@ import {
|
||||
SyncIcon,
|
||||
} from '@storybook/icons';
|
||||
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import type { Controls } from './InteractionsPanel';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
|
||||
import type { Combo } from 'storybook/internal/manager-api';
|
||||
import { Consumer, addons, types, useAddonState } from 'storybook/internal/manager-api';
|
||||
|
||||
import type { Combo } from 'storybook/manager-api';
|
||||
import { Consumer, addons, types, useAddonState } from 'storybook/manager-api';
|
||||
|
||||
import { Panel } from './Panel';
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
|
||||
@ -1,24 +1,2 @@
|
||||
import { isAbsolute, join } from 'node:path';
|
||||
|
||||
import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
|
||||
|
||||
export function previewAnnotations(entry: string[] = [], options: { configDir: string }) {
|
||||
checkAddonOrder({
|
||||
before: {
|
||||
name: '@storybook/addon-actions',
|
||||
inEssentials: true,
|
||||
},
|
||||
after: {
|
||||
name: '@storybook/addon-interactions',
|
||||
inEssentials: false,
|
||||
},
|
||||
configFile: isAbsolute(options.configDir)
|
||||
? join(options.configDir, 'main')
|
||||
: join(process.cwd(), options.configDir, 'main'),
|
||||
getConfig: (configFile) => serverRequire(configFile),
|
||||
});
|
||||
return entry;
|
||||
}
|
||||
|
||||
// This annotation is read by addon-test, so it can throw an error if both addons are used
|
||||
export const ADDON_INTERACTIONS_IN_USE = true;
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
import { instrument } from 'storybook/internal/instrumenter';
|
||||
import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storybook/internal/types';
|
||||
|
||||
// This makes sure that storybook test loaders are always loaded when addon-interactions is used
|
||||
// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
|
||||
import 'storybook/test';
|
||||
|
||||
import type { InteractionsParameters } from './types';
|
||||
|
||||
export const runStep = instrument(
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
|
||||
|
||||
import Filter from 'ansi-to-html';
|
||||
import { type StorybookTheme, useTheme } from 'storybook/theming';
|
||||
|
||||
export function isTestAssertionError(error: unknown) {
|
||||
return isChaiError(error) || isJestError(error);
|
||||
|
||||
@ -4,7 +4,7 @@ import {
|
||||
expect,
|
||||
fireEvent,
|
||||
fn,
|
||||
userEvent,
|
||||
userEvent as testUserEvent,
|
||||
waitFor,
|
||||
waitForElementToBeRemoved,
|
||||
within,
|
||||
@ -32,7 +32,7 @@ export const Validation = {
|
||||
};
|
||||
|
||||
export const Type = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, userEvent }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.type(canvas.getByTestId('value'), 'foobar');
|
||||
},
|
||||
@ -45,7 +45,7 @@ export const Step = {
|
||||
};
|
||||
|
||||
export const TypeAndClear = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, userEvent }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.type(canvas.getByTestId('value'), 'initial value');
|
||||
await userEvent.clear(canvas.getByTestId('value'));
|
||||
@ -103,16 +103,16 @@ export const WithLoaders = {
|
||||
|
||||
const UserEventSetup = {
|
||||
play: async (context) => {
|
||||
const { args, canvasElement, step } = context;
|
||||
const user = userEvent.setup();
|
||||
const { args, canvasElement, step, userEvent } = context;
|
||||
const canvas = within(canvasElement);
|
||||
await step('Select and type on input using user-event v14 setup', async () => {
|
||||
const input = canvas.getByRole('textbox');
|
||||
await user.click(input);
|
||||
await user.type(input, 'Typing ...');
|
||||
await userEvent.click(input);
|
||||
await userEvent.type(input, 'Typing ...');
|
||||
});
|
||||
await step('Tab and press enter on submit button', async () => {
|
||||
await user.pointer([
|
||||
// Vitest's userEvent does not support pointer events, so we use storybook's
|
||||
await testUserEvent.pointer([
|
||||
{ keys: '[TouchA>]', target: canvas.getByRole('textbox') },
|
||||
{ keys: '[/TouchA]' },
|
||||
]);
|
||||
@ -122,8 +122,8 @@ const UserEventSetup = {
|
||||
// user event has a few issues on firefox, therefore we do it differently
|
||||
await fireEvent.click(submitButton);
|
||||
} else {
|
||||
await user.tab();
|
||||
await user.keyboard('{enter}');
|
||||
await userEvent.tab();
|
||||
await userEvent.keyboard('{enter}');
|
||||
await expect(submitButton).toHaveFocus();
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { FC, ReactElement } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import { styled } from 'storybook/internal/theming';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
const positiveConsoleRegex = /\[32m(.*?)\[39m/;
|
||||
const negativeConsoleRegex = /\[31m(.*?)\[39m/;
|
||||
|
||||
@ -2,9 +2,9 @@ import type { FC } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import { Link, Placeholder, ScrollArea, TabsState } from 'storybook/internal/components';
|
||||
import { convert, styled, themes } from 'storybook/internal/theming';
|
||||
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import { convert, styled, themes } from 'storybook/theming';
|
||||
|
||||
import type { Test } from '../hoc/provideJestResult';
|
||||
import { provideTests as provideJestResult } from '../hoc/provideJestResult';
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { Fragment, useState } from 'react';
|
||||
|
||||
import { convert, styled, themes } from 'storybook/internal/theming';
|
||||
|
||||
import { ChevronSmallDownIcon } from '@storybook/icons';
|
||||
|
||||
import { convert, styled, themes } from 'storybook/theming';
|
||||
|
||||
// eslint-disable-next-line import/no-named-as-default
|
||||
import Message from './Message';
|
||||
|
||||
|
||||
@ -2,7 +2,8 @@ import type { ComponentType } from 'react';
|
||||
import React, { Component as ReactComponent } from 'react';
|
||||
|
||||
import { STORY_CHANGED } from 'storybook/internal/core-events';
|
||||
import type { API } from 'storybook/internal/manager-api';
|
||||
|
||||
import type { API } from 'storybook/manager-api';
|
||||
|
||||
import { ADD_TESTS } from '../shared';
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { addons } from 'storybook/internal/preview-api';
|
||||
|
||||
import { addons } from 'storybook/preview-api';
|
||||
import { normalize, sep } from 'upath';
|
||||
|
||||
import { ADD_TESTS, defineJestParameter } from './shared';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { addons, types } from 'storybook/internal/manager-api';
|
||||
import { addons, types } from 'storybook/manager-api';
|
||||
|
||||
import Panel from './components/Panel';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
|
||||
|
||||
@ -80,7 +80,7 @@ export const third = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:
|
||||
|
||||
```js
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { action } from 'storybook/actions';
|
||||
import { hrefTo } from '@storybook/addon-links';
|
||||
|
||||
export default {
|
||||
|
||||
@ -8,7 +8,7 @@ const run = async () => {
|
||||
const content = await readFile('./dist/index.d.ts', 'utf-8');
|
||||
|
||||
const regexp = /'lib\/preview-api/;
|
||||
const replaced = content.replace(regexp, "'storybook/internal/preview-api");
|
||||
const replaced = content.replace(regexp, "'storybook/preview-api");
|
||||
|
||||
await writeFile('./dist/index.d.ts', replaced);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { definePreview } from 'storybook/internal/preview-api';
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
|
||||
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