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

merge next

Browse Source
This commit is contained in:
Norbert de Langen 2025-02-12 15:55:41 +01:00
parent b57e9ef765
commit 38bb600f5b
274 changed files with 11312 additions and 2525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/config.yml
View File

@ -205,7 +205,7 @@ jobs:
name: Knip
command: |
cd code
yarn knip --no-exit-code
yarn knip --no-exit-code
- report-workflow-on-failure
- cancel-workflow-on-failure
bench-packages:

6
code/.storybook/main.ts
View File

@ -1,12 +1,12 @@
import { join } from 'node:path';
import type { StorybookConfig } from '../frameworks/react-vite';
import { defineMain } from '../frameworks/react-vite/src/node';
const componentsPath = join(__dirname, '../core/src/components');
const managerApiPath = join(__dirname, '../core/src/manager-api');
const imageContextPath = join(__dirname, '../frameworks/nextjs/src/image-context.ts');
const config: StorybookConfig = {
const config = defineMain({
stories: [
'./*.stories.@(js|jsx|ts|tsx)',
{
@ -170,6 +170,6 @@ const config: StorybookConfig = {
} satisfies typeof viteConfig);
},
// logLevel: 'debug',
};
});
export default config;

38
code/.storybook/preview.tsx
View File

@ -18,7 +18,20 @@ import { DocsContext } from '@storybook/blocks';
import { global } from '@storybook/global';
import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
// TODO add empty preview
// import * as storysource from '@storybook/addon-storysource';
// import * as designs from '@storybook/addon-designs/preview';
import addonTest from '@storybook/experimental-addon-test';
import { definePreview } from '@storybook/react-vite';
import addonA11y from '@storybook/addon-a11y';
import addonEssentials from '@storybook/addon-essentials';
import addonThemes from '@storybook/addon-themes';
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';
import { isChromatic } from './isChromatic';
const { document } = global;
@ -120,7 +133,7 @@ const ThemedSetRoot = () => {
// eslint-disable-next-line no-underscore-dangle
const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
export const loaders = [
const loaders = [
/**
* This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
* story will specify which stories they need in the index with:
@ -169,7 +182,7 @@ export const loaders = [
},
] as Loader[];
export const decorators = [
const decorators = [
// This decorator adds the DocsContext created in the loader above
(Story, { loaded: { docsContext } }) =>
docsContext ? (
@ -307,11 +320,7 @@ export const decorators = [
},
] satisfies Decorator[];
export const parameters = {
options: {
storySort: (a, b) =>
a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
},
const parameters = {
docs: {
theme: themes.light,
toc: {},
@ -360,4 +369,17 @@ export const parameters = {
},
};
export const tags = ['test', 'vitest'];
export default definePreview({
addons: [
addonThemes(),
addonEssentials(),
addonA11y(),
addonTest(),
addonsPreview,
templatePreview,
],
decorators,
loaders,
tags: ['test', 'vitest'],
parameters,
});

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

@ -3,25 +3,12 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
import { setProjectAnnotations } from '@storybook/react';
import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
// eslint-disable-next-line import/namespace
import * as testAnnotations from '@storybook/experimental-addon-test/preview';
import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
import * as componentAnnotations from '../core/template/stories/preview';
// register global components used in many stories
import '../renderers/react/template/components';
import * as projectAnnotations from './preview';
import preview from './preview';
vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));
const annotations = setProjectAnnotations([
a11yAddonAnnotations,
projectAnnotations,
componentAnnotations,
coreAnnotations,
testAnnotations,
preview.composed,
{
// experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
// https://vitest.dev/guide/browser/interactivity-api.html

7
code/addons/a11y/src/index.ts
View File

@ -1,2 +1,9 @@
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export { PARAM_KEY } from './constants';
export * from './params';
export type { A11yParameters } from './types';
export default () => definePreview(addonAnnotations);

2
code/addons/a11y/src/params.ts
View File

@ -1,4 +1,4 @@
import type { ElementContext, ImpactValue, RunOptions, Spec } from 'axe-core';
import type { ElementContext, RunOptions, Spec } from 'axe-core';
export interface Setup {
element?: ElementContext;

48
code/addons/a11y/src/types.ts
View File

@ -1,3 +1,49 @@
import type { AxeResults } from 'axe-core';
import type { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
export type A11YReport = AxeResults | { error: Error };
export interface A11yParameters {
/**
* Accessibility configuration
*
* @see https://storybook.js.org/docs/writing-tests/accessibility-testing
*/
a11y?: {
/** Manual configuration for specific elements */
element?: ElementContext;
/**
* Configuration for the accessibility rules
*
* @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
*/
config?: Spec;
/**
* Options for the accessibility checks To learn more about the available options,
*
* @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
*/
options?: RunOptions;
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
};
}
export interface A11yGlobals {
/**
* Accessibility configuration
*
* @see https://storybook.js.org/docs/writing-tests/accessibility-testing
*/
a11y: {
/**
* Prevent the addon from executing automated accessibility checks upon visiting a story. You
* can still trigger the checks from the addon panel.
*
* @see https://storybook.js.org/docs/writing-tests/accessibility-testing#turn-off-automated-a11y-tests
*/
manual?: boolean;
};
}

8
code/addons/actions/src/index.ts
View File

@ -1,3 +1,11 @@
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';

2
code/addons/actions/src/runtime/action.ts
View File

@ -74,7 +74,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
);
if (storyRenderer) {
const deprecated = !window?.FEATURES?.disallowImplicitActionsInRenderV8;
const deprecated = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8;
const error = new ImplicitActionsDuringRendering({
phase: storyRenderer.phase!,
name,

38
code/addons/actions/src/types.ts Normal file
View File

@ -0,0 +1,38 @@
export interface ActionsParameters {
/**
* Actions configuration
*
* @see https://storybook.js.org/docs/essentials/actions#parameters
*/
actions: {
/**
* Create actions for each arg that matches the regex. (**NOT recommended, see below**)
*
* This is quite useful when your component has dozens (or hundreds) of methods and you do not
* want to manually apply the fn utility for each of those methods. However, this is not the
* recommended way of writing actions. That's because automatically inferred args are not
* available as spies in your play function. If you use argTypesRegex and your stories have play
* functions, you will need to also define args with the fn utility to test them in your play
* function.
*
* @example `argTypesRegex: '^on.*'`
*/
argTypesRegex?: string;
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
/**
* Binds a standard HTML event handler to the outermost HTML element rendered by your component
* and triggers an action when the event is called for a given selector. The format is
* `<eventname> <selector>`. The selector is optional; it defaults to all elements.
*
* **To enable this feature, you must use the `withActions` decorator.**
*
* @example `handles: ['mouseover', 'click .btn']`
*
* @see https://storybook.js.org/docs/essentials/actions#action-event-handlers
*/
handles?: string[];
};
}

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

@ -43,6 +43,16 @@
"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",

11
code/addons/backgrounds/src/decorator.ts
View File

@ -1,9 +1,5 @@
import { useEffect } from 'storybook/internal/preview-api';
import type {
Renderer,
StoryContext,
PartialStoryFn as StoryFunction,
} from 'storybook/internal/types';
import type { DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY as KEY } from './constants';
import { DEFAULT_BACKGROUNDS } from './defaults';
@ -21,10 +17,7 @@ const GRID_SELECTOR_BASE = 'addon-backgrounds-grid';
const transitionStyle = isReduceMotionEnabled() ? '' : 'transition: background-color 0.3s;';
export const withBackgroundAndGrid = (
StoryFn: StoryFunction<Renderer>,
context: StoryContext<Renderer>
) => {
export const withBackgroundAndGrid: DecoratorFunction = (StoryFn, context) => {
const { globals, parameters, viewMode, id } = context;
const {
options = DEFAULT_BACKGROUNDS,

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

@ -1,2 +1,7 @@
// make it work with --isolatedModules
export default {};
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export default () => definePreview(addonAnnotations);
export type { BackgroundsParameters, BackgroundsGlobals } from './types';

11
code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts
View File

@ -1,18 +1,11 @@
import { useEffect, useMemo } from 'storybook/internal/preview-api';
import type {
Renderer,
StoryContext,
PartialStoryFn as StoryFunction,
} from 'storybook/internal/types';
import type { DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import { addBackgroundStyle, clearStyles, isReduceMotionEnabled } from '../utils';
import { getBackgroundColorByName } from './getBackgroundColorByName';
export const withBackground = (
StoryFn: StoryFunction<Renderer>,
context: StoryContext<Renderer>
) => {
export const withBackground: DecoratorFunction = (StoryFn, context) => {
const { globals, parameters } = context;
const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];

8
code/addons/backgrounds/src/legacy/withGridLegacy.ts
View File

@ -1,14 +1,10 @@
import { useEffect, useMemo } from 'storybook/internal/preview-api';
import type {
Renderer,
StoryContext,
PartialStoryFn as StoryFunction,
} from 'storybook/internal/types';
import type { DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import { addGridStyle, clearStyles } from '../utils';
export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
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;

10
code/addons/backgrounds/src/preview.ts
View File

@ -1,5 +1,3 @@
import type { Addon_DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY as KEY } from './constants';
import { withBackgroundAndGrid } from './decorator';
import { DEFAULT_BACKGROUNDS } from './defaults';
@ -7,7 +5,7 @@ import { withBackground } from './legacy/withBackgroundLegacy';
import { withGrid } from './legacy/withGridLegacy';
import type { Config, GlobalState } from './types';
export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals
export const decorators = globalThis.FEATURES?.backgroundsStoryGlobals
? [withBackgroundAndGrid]
: [withGrid, withBackground];
@ -20,7 +18,7 @@ export const parameters = {
},
disable: false,
// TODO: remove in 9.0
...(!FEATURES?.backgroundsStoryGlobals && {
...(!globalThis.FEATURES?.backgroundsStoryGlobals && {
values: Object.values(DEFAULT_BACKGROUNDS),
}),
} satisfies Partial<Config>,
@ -30,4 +28,6 @@ const modern: Record<string, GlobalState> = {
[KEY]: { value: undefined, grid: false },
};
export const initialGlobals = FEATURES?.backgroundsStoryGlobals ? modern : { [KEY]: null };
export const initialGlobals = globalThis.FEATURES?.backgroundsStoryGlobals
? modern
: { [KEY]: null };

30
code/addons/backgrounds/src/types.ts
View File

@ -21,3 +21,33 @@ export interface Config {
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;
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
/** Configuration for the background grid */
grid?: Partial<GridConfig>;
/** Available background colors */
values?: Array<Background>;
};
}
export interface BackgroundsGlobals {
/**
* Backgrounds configuration
*
* @see https://storybook.js.org/docs/essentials/backgrounds#globals
*/
backgrounds: GlobalState;
}

6
code/addons/controls/src/index.ts
View File

@ -1 +1,7 @@
import { definePreview } from 'storybook/internal/preview-api';
export { PARAM_KEY } from './constants';
export default () => definePreview({});
export type { ControlsParameters } from './types';

37
code/addons/controls/src/types.ts Normal file
View File

@ -0,0 +1,37 @@
export interface ControlsParameters {
/**
* Controls configuration
*
* @see https://storybook.js.org/docs/essentials/controls#parameters-1
*/
controls: {
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
/** Disable the ability to create or edit stories from the Controls panel */
disableSaveFromUI?: boolean;
/** Exclude specific properties from the Controls panel */
exclude?: string[] | RegExp;
/**
* Show the full documentation for each property in the Controls addon panel, including the
* description and default value.
*/
expanded?: boolean;
/** Exclude only specific properties in the Controls panel */
include?: string[] | RegExp;
/**
* Preset color swatches for the color picker control
*
* @example PresetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)',
* '#fe4a49']
*/
presetColors?: Array<string | { color: string; title?: string }>;
/** Controls sorting order */
sort?: 'none' | 'alpha' | 'requiredFirst';
};
}

1
code/addons/docs/ember/index.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export declare const setJSONDoc: (jsonDoc: any) => void;

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

@ -81,6 +81,25 @@
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"typesVersions": {
"*": {
"*": [
"dist/index.d.ts"
],
"angular": [
"angular/index.d.ts"
],
"blocks": [
"dist/blocks.d.ts"
],
"ember": [
"ember/index.d.ts"
],
"preview": [
"dist/preview.d.ts"
]
}
},
"files": [
"dist/**/*",
"angular/**/*",

7
code/addons/docs/src/index.ts
View File

@ -1,2 +1,9 @@
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export * from '@storybook/blocks';
export { DocsRenderer } from './DocsRenderer';
export type { DocsParameters } from './types';
export default () => definePreview(addonAnnotations);

40
code/addons/docs/src/manager.tsx
View File

@ -2,9 +2,10 @@ import React from 'react';
import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
import { addons, types, useChannel, useParameter } from 'storybook/internal/manager-api';
import { ignoreSsrWarning, styled, useTheme } from 'storybook/internal/theming';
import { Source } from '@storybook/blocks';
import { Source, type SourceParameters } from '@storybook/blocks';
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
@ -27,25 +28,46 @@ addons.register(ADDON_ID, (api) => {
disabled: (parameters) => !parameters?.docs?.codePanel,
match: ({ viewMode }) => viewMode === 'story',
render: ({ active }) => {
const [codeSnippet, setSourceCode] = useAddonState<{
source: string;
format: SyntaxHighlighterFormatTypes;
}>(ADDON_ID, {
source: '',
format: 'html',
const parameter = useParameter(PARAM_KEY, {
source: { code: '' } as SourceParameters,
theme: 'dark',
});
const [codeSnippet, setSourceCode] = React.useState<{
source?: string;
format?: SyntaxHighlighterFormatTypes;
}>({});
useChannel({
[SNIPPET_RENDERED]: ({ source, format }) => {
setSourceCode({ source, format });
},
});
const theme = useTheme();
const isDark = theme.base !== 'light';
return (
<AddonPanel active={!!active}>
<Source code={codeSnippet.source} format={codeSnippet.format} dark />
<SourceStyles>
<Source
{...parameter.source}
code={parameter.source.code || codeSnippet.source}
format={parameter.source.format || codeSnippet.format}
dark={isDark}
/>
</SourceStyles>
</AddonPanel>
);
},
});
});
const SourceStyles = styled.div(() => ({
height: '100%',
[`> :first-child${ignoreSsrWarning}`]: {
margin: 0,
height: '100%',
boxShadow: 'none',
},
}));

219
code/addons/docs/src/types.ts Normal file
View File

@ -0,0 +1,219 @@
import type { ModuleExport, ModuleExports } from '@storybook/types';
type StoryBlockParameters = {
/** Whether a story's play function runs when shown in docs page */
autoplay?: boolean;
/**
* Set a minimum height (note for an iframe this is the actual height) when rendering a story in
* an iframe or inline. This overrides `parameters.docs.story.iframeHeight` for iframes.
*/
height?: string;
/** IFrame configuration */
iframeHeight?: string;
/**
* Whether the story is rendered inline (in the same browser frame as the other docs content) or
* in an iframe
*/
inline?: boolean;
/** Specifies the CSF file to which the story is associated */
meta: ModuleExports;
/**
* Specifies which story is rendered by the Story block. If no `of` is defined and the MDX file is
* attached, the primary (first) story will be rendered.
*/
of: ModuleExport;
};
type ControlsBlockParameters = {
/** Exclude specific properties from the Controls panel */
exclude?: string[] | RegExp;
/** Exclude only specific properties in the Controls panel */
include?: string[] | RegExp;
/** Controls sorting order */
sort?: 'none' | 'alpha' | 'requiredFirst';
};
type ArgTypesBlockParameters = {
/** Exclude specific arg types from the args table */
exclude?: string[] | RegExp;
/** Exclude only specific arg types from the args table */
include?: string[] | RegExp;
/**
* Specifies which story to get the arg types from. If a CSF file exports is provided, it will use
* the primary (first) story in the file.
*/
of: ModuleExport | ModuleExports;
/**
* Controls arg types order
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#sort
*/
sort?: 'none' | 'alpha' | 'requiredFirst';
};
type CanvasBlockParameters = {
/**
* Provides any additional custom actions to show in the bottom right corner. These are simple
* buttons that do anything you specify in the onClick function.
*/
additionalActions?: {
className?: string;
disabled?: boolean;
onClick: () => void;
title: string | JSX.Element;
}[];
/** Provide HTML class(es) to the preview element, for custom styling. */
className?: string;
/**
* Specify how the canvas should layout the story.
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#layout
*/
layout?: 'centered' | 'fullscreen' | 'padded';
/** Specifies which story is rendered */
of: ModuleExport;
/** Show story source code */
sourceState?: 'hidden' | 'shown';
/**
* Story configuration
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#story
*/
story?: StoryBlockParameters;
/** Disable story source code */
withSource?: 'open' | 'closed' | 'none';
/** Whether to render a toolbar containing tools to interact with the story. */
withToolbar?: 'open' | 'closed' | 'none';
};
type DescriptionBlockParameters = {
/** Component description */
component?: string;
/** Story description */
story?: string;
};
type SourceBlockParameters = {
/** The source code to be rendered. Will be inferred if not passed */
code?: string;
/** Whether to render the code in dark mode */
dark?: boolean;
/** Determines if decorators are rendered in the source code snippet. */
excludeDecorators?: boolean;
/**
* The formatting used on source code. Both true and 'dedent' have the same effect of removing any
* extraneous indentation. Supports all valid prettier parser names.
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#format
*/
format?: boolean | 'dedent' | string;
// TODO: We could try to extract types from 'SupportedLanguages' in SyntaxHighlihter, but for now we inline them
/** Source code language */
language?:
| 'bash'
| 'css'
| 'graphql'
| 'html'
| 'json'
| 'jsextra'
| 'jsx'
| 'md'
| 'text'
| 'tsx'
| 'typescript'
| 'yml';
/**
* Specifies which story is rendered by the Source block. If no of is defined and the MDX file is
* attached, the primary (first) story will be rendered.
*/
of: ModuleExport;
/** Source code transformations */
transform?: (code: string, storyContext: any) => string;
/**
* Specifies how the source code is rendered.
*
* @default 'auto'
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#type
*/
type?: 'auto' | 'code' | 'dynamic';
};
export interface DocsParameters {
/**
* Docs configuration
*
* @see https://storybook.js.org/docs/writing-docs
*/
docs?: {
/**
* The subtitle displayed when shown in docs page
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes
*/
argTypes?: ArgTypesBlockParameters;
/**
* Canvas configuration when shown in docs page
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas
*/
canvas?: CanvasBlockParameters;
/**
* Controls block configuration
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls
*/
controls?: ControlsBlockParameters;
/**
* Component/story description when shown in docs page
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-description#writing-descriptions
*/
description?: DescriptionBlockParameters;
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
/**
* Replace the default documentation template used by Storybook with your own
*
* @see https://storybook.js.org/docs/writing-docs/autodocs#write-a-custom-template
*/
page?: unknown;
/**
* Source code configuration when shown in docs page
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source
*/
source?: SourceBlockParameters;
/**
* Story configuration
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-story
*/
story?: StoryBlockParameters;
/**
* The subtitle displayed when shown in docs page
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-subtitle
*/
subtitle?: string;
/**
* The title displayed when shown in docs page
*
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-title
*/
title?: string;
};
}

32
code/addons/docs/template/stories/codePanel/index.stories.tsx vendored Normal file
View File

@ -0,0 +1,32 @@
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],
parameters: {
chromatic: { disable: true },
docs: {
codePanel: true,
},
},
};
export const Default = { args: { label: 'Default' } };
export const CustomCode = {
args: { label: 'Custom code' },
parameters: {
docs: {
source: {
code: '<button>Custom code</button>',
},
},
},
};
export const WithoutPanel = {
args: { label: 'Without panel' },
parameters: {
docs: {
codePanel: false,
},
},
};

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

@ -62,15 +62,15 @@ export const Story = {
const actualReactDomVersion = (await canvas.findByTestId('react-dom')).textContent;
const actualReactDomServerVersion = (await canvas.findByTestId('react-dom-server')).textContent;
step('Expect React packages to all resolve to the same version', () => {
step('Expect React packages to all resolve to the same version', async () => {
// react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
expect(actualReactDomVersion!.startsWith(actualReactVersion!)).toBeTruthy();
await expect(actualReactDomVersion!.startsWith(actualReactVersion!)).toBeTruthy();
if (parameters.renderer === 'preact') {
// the preact/compat alias doesn't have a version export in react-dom/server
return;
}
expect(actualReactDomServerVersion).toBe(actualReactVersion);
await expect(actualReactDomServerVersion).toBe(actualReactVersion);
});
},
};

23
code/addons/docs/template/stories/sourcePanel/index.stories.tsx vendored
View File

@ -1,23 +0,0 @@
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],
parameters: {
chromatic: { disable: true },
docs: {
codePanel: false,
},
},
};
export const One = { args: { label: 'One' } };
export const Two = { args: { label: 'Two' } };
export const WithSource = {
args: { label: 'Three' },
parameters: {
docs: {
codePanel: true,
},
},
};

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

@ -27,6 +27,11 @@
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./preview": {
"types": "./dist/preview.d.ts",
"import": "./dist/preview.mjs",
"require": "./dist/preview.js"
},
"./actions/preview": {
"types": "./dist/actions/preview.d.ts",
"import": "./dist/actions/preview.mjs",
@ -72,11 +77,22 @@
"import": "./dist/viewport/preview.mjs",
"require": "./dist/viewport/preview.js"
},
"./preset": "./dist/preset.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",
@ -111,10 +127,13 @@
},
"bundler": {
"nodeEntries": [
"./src/index.ts",
"./src/preset.ts",
"./src/docs/preset.ts",
"./src/docs/mdx-react-shim.ts"
],
"exportEntries": [
"./src/index.ts"
],
"entries": [
"./src/docs/manager.ts"
],
@ -129,6 +148,7 @@
"./src/viewport/manager.ts"
],
"previewEntries": [
"./src/preview.ts",
"./src/actions/preview.ts",
"./src/backgrounds/preview.ts",
"./src/docs/preview.ts",

1
code/addons/essentials/src/backgrounds/manager.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-backgrounds/manager';

1
code/addons/essentials/src/backgrounds/preview.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-backgrounds/preview';

1
code/addons/essentials/src/docs/manager.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-docs/manager';

1
code/addons/essentials/src/highlight/preview.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-highlight/preview';

108
code/addons/essentials/src/index.ts
View File

@ -1,107 +1,5 @@
import { isAbsolute, join } from 'node:path';
import { definePreview } from 'storybook/internal/preview-api';
import { serverRequire } from 'storybook/internal/common';
import { logger } from 'storybook/internal/node-logger';
import addonAnnotations from './preview';
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
*
* @default true
* @see https://storybook.js.org/addons/@storybook/addon-backgrounds
*/
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
*
* @default true
* @see https://storybook.js.org/addons/@storybook/addon-measure
*/
measure?: boolean;
/**
* Allow to use @storybook/addon-outline
*
* @default true
* @see https://storybook.js.org/addons/@storybook/addon-outline
*/
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) => {
const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
const mainFile = join(absoluteConfigDir, 'main');
return serverRequire(mainFile) ?? {};
};
export function addons(options: PresetOptions) {
const checkInstalled = (addonName: string, main: any) => {
const addon = `@storybook/addon-${addonName}`;
const existingAddon = main.addons?.find((entry: string | { name: string }) => {
const name = typeof entry === 'string' ? entry : entry.name;
return name?.startsWith(addon);
});
if (existingAddon) {
logger.info(`Found existing addon ${JSON.stringify(existingAddon)}, skipping.`);
}
return !!existingAddon;
};
const main = requireMain(options.configDir);
// NOTE: The order of these addons is important.
return [
'controls',
'actions',
'docs',
'backgrounds',
'viewport',
'toolbars',
'measure',
'outline',
'highlight',
]
.filter((key) => (options as any)[key] !== false)
.filter((addon) => !checkInstalled(addon, main))
.map((addon) => {
// We point to the re-export from addon-essentials to support yarn pnp and pnpm.
return `@storybook/addon-essentials/${addon}`;
});
}
export default () => definePreview(addonAnnotations);

1
code/addons/essentials/src/outline/manager.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-outline/manager';

1
code/addons/essentials/src/outline/preview.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-outline/preview';

107
code/addons/essentials/src/preset.ts Normal file
View File

@ -0,0 +1,107 @@
import { isAbsolute, join } from 'node:path';
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
*
* @default true
* @see https://storybook.js.org/addons/@storybook/addon-backgrounds
*/
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
*
* @default true
* @see https://storybook.js.org/addons/@storybook/addon-measure
*/
measure?: boolean;
/**
* Allow to use @storybook/addon-outline
*
* @default true
* @see https://storybook.js.org/addons/@storybook/addon-outline
*/
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) => {
const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
const mainFile = join(absoluteConfigDir, 'main');
return serverRequire(mainFile) ?? {};
};
export function addons(options: PresetOptions) {
const checkInstalled = (addonName: string, main: any) => {
const addon = `@storybook/addon-${addonName}`;
const existingAddon = main.addons?.find((entry: string | { name: string }) => {
const name = typeof entry === 'string' ? entry : entry.name;
return name?.startsWith(addon);
});
if (existingAddon) {
logger.info(`Found existing addon ${JSON.stringify(existingAddon)}, skipping.`);
}
return !!existingAddon;
};
const main = requireMain(options.configDir);
// NOTE: The order of these addons is important.
return [
'controls',
'actions',
'docs',
'backgrounds',
'viewport',
'toolbars',
'measure',
'outline',
'highlight',
]
.filter((key) => (options as any)[key] !== false)
.filter((addon) => !checkInstalled(addon, main))
.map((addon) => {
// We point to the re-export from addon-essentials to support yarn pnp and pnpm.
return `@storybook/addon-essentials/${addon}`;
});
}

22
code/addons/essentials/src/preview.ts Normal file
View File

@ -0,0 +1,22 @@
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
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';
export default composeConfigs([
actionsAddon(),
// TODO: we can't use this as function because of the --test flag
docsAddon,
backgroundsAddon(),
viewportAddon(),
measureAddon(),
outlineAddon(),
highlightAddon(),
]);

16
code/addons/essentials/src/types.ts Normal file
View File

@ -0,0 +1,16 @@
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';
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 ActionsParameters,
BackgroundsParameters,
DocsParameters,
HighlightParameters,
MeasureParameters,
OutlineParameters,
ViewportParameters {}

1
code/addons/essentials/src/viewport/manager.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-viewport/manager';

1
code/addons/essentials/src/viewport/preview.ts
View File

@ -1,2 +1 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-viewport/preview';

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

@ -39,6 +39,16 @@
"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",

10
code/addons/highlight/src/index.ts
View File

@ -1,4 +1,8 @@
export { HIGHLIGHT, RESET_HIGHLIGHT } from './constants';
import { definePreview } from 'storybook/internal/preview-api';
// make it work with --isolatedModules
export default {};
import './preview';
export { HIGHLIGHT, RESET_HIGHLIGHT } from './constants';
export type { HighlightParameters } from './types';
export default () => definePreview({});

11
code/addons/highlight/src/types.ts Normal file
View File

@ -0,0 +1,11 @@
export interface HighlightParameters {
/**
* Highlight configuration
*
* @see https://storybook.js.org/docs/essentials/highlight#parameters
*/
highlight: {
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
};
}

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

@ -40,6 +40,16 @@
"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",

7
code/addons/interactions/src/index.ts
View File

@ -1,2 +1,5 @@
// make it work with --isolatedModules
export default {};
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export default () => definePreview(addonAnnotations);

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

@ -1,11 +1,13 @@
import type { PlayFunction, StepLabel, StoryContext } from 'storybook/internal/types';
import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storybook/internal/types';
import { instrument } from '@storybook/instrumenter';
// 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';
export const { step: runStep } = instrument(
import type { InteractionsParameters } from './types';
export const runStep = instrument(
{
// It seems like the label is unused, but the instrumenter has access to it
// The context will be bounded later in StoryRender, so that the user can write just:
@ -15,8 +17,9 @@ export const { step: runStep } = instrument(
step: (label: StepLabel, play: PlayFunction, context: StoryContext) => play(context),
},
{ intercept: true }
);
// perhaps csf types need to be updated? StepRunner expects Promise<void> and not Promise<void> | void
).step as StepRunner;
export const parameters = {
export const parameters: InteractionsParameters['test'] = {
throwPlayFunctionExceptions: false,
};

14
code/addons/interactions/src/types.ts Normal file
View File

@ -0,0 +1,14 @@
export interface InteractionsParameters {
/**
* Interactions configuration
*
* @see https://storybook.js.org/docs/essentials/interactions
*/
test: {
/** Ignore unhandled errors during test execution */
dangerouslyIgnoreUnhandledErrors?: boolean;
/** Whether to throw exceptions coming from the play function */
throwPlayFunctionExceptions?: boolean;
};
}

10
code/addons/jest/src/shared.ts
View File

@ -2,6 +2,8 @@ import type { StorybookInternalParameters } from 'storybook/internal/types';
import invariant from 'tiny-invariant';
import type { JestParameters } from './types';
// addons, panels and events get unique names using a prefix
export const PARAM_KEY = 'test';
export const ADDON_ID = 'storybookjs/test';
@ -9,11 +11,9 @@ export const PANEL_ID = `${ADDON_ID}/panel`;
export const ADD_TESTS = `${ADDON_ID}/add_tests`;
interface AddonParameters extends StorybookInternalParameters {
jest?: string | string[] | { disabled: true };
}
export function defineJestParameter(parameters: AddonParameters): string[] | null {
export function defineJestParameter(
parameters: JestParameters & StorybookInternalParameters
): string[] | null {
const { jest, fileName: filePath } = parameters;
if (typeof jest === 'string') {

8
code/addons/jest/src/types.ts Normal file
View File

@ -0,0 +1,8 @@
export interface JestParameters {
/**
* Jest configuration
*
* @see https://github.com/storybookjs/storybook/blob/next/code/addons/jest/README.md#usage
*/
jest?: string | string[] | { disabled: true };
}

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

@ -48,6 +48,9 @@
"*": [
"dist/index.d.ts"
],
"preview": [
"dist/preview.d.ts"
],
"react": [
"dist/react/index.d.ts"
]

6
code/addons/links/src/index.ts
View File

@ -1 +1,7 @@
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export { linkTo, hrefTo, withLinks, navigate } from './utils';
export default () => definePreview(addonAnnotations);

4
code/addons/links/src/preview.ts
View File

@ -1,5 +1,3 @@
import type { Addon_DecoratorFunction } from 'storybook/internal/types';
import { withLinks } from './index';
export const decorators: Addon_DecoratorFunction[] = [withLinks];
export const decorators = [withLinks];

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

@ -1,2 +1,7 @@
// make it work with --isolatedModules
export default {};
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export type { MeasureParameters } from './types';
export default () => definePreview(addonAnnotations);

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

@ -1,9 +1,7 @@
import type { Addon_DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY } from './constants';
import { withMeasure } from './withMeasure';
export const decorators: Addon_DecoratorFunction[] = [withMeasure];
export const decorators = [withMeasure];
export const initialGlobals = {
[PARAM_KEY]: false,

11
code/addons/measure/src/types.ts Normal file
View File

@ -0,0 +1,11 @@
export interface MeasureParameters {
/**
* Measure configuration
*
* @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
*/
measure: {
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
};
}

8
code/addons/measure/src/withMeasure.ts
View File

@ -1,10 +1,6 @@
/* eslint-env browser */
import { useEffect } from 'storybook/internal/preview-api';
import type {
Renderer,
StoryContext,
PartialStoryFn as StoryFunction,
} from 'storybook/internal/types';
import type { DecoratorFunction } from 'storybook/internal/types';
import { destroy, init, rescale } from './box-model/canvas';
import { drawSelectedElement } from './box-model/visualizer';
@ -18,7 +14,7 @@ function findAndDrawElement(x: number, y: number) {
drawSelectedElement(nodeAtPointerRef);
}
export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
export const withMeasure: DecoratorFunction = (StoryFn, context) => {
const { measureEnabled } = context.globals;
useEffect(() => {

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

@ -45,6 +45,16 @@
"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",
@ -80,7 +90,7 @@
"./src/manager.tsx"
],
"previewEntries": [
"./src/preview.tsx"
"./src/preview.ts"
]
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",

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

@ -1,2 +1,7 @@
// make it work with --isolatedModules
export default {};
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export type { OutlineParameters } from './types';
export default () => definePreview(addonAnnotations);

4
code/addons/outline/src/preview.tsx → code/addons/outline/src/preview.ts
View File

@ -1,9 +1,7 @@
import type { Addon_DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY } from './constants';
import { withOutline } from './withOutline';
export const decorators: Addon_DecoratorFunction[] = [withOutline];
export const decorators = [withOutline];
export const initialGlobals = {
[PARAM_KEY]: false,

11
code/addons/outline/src/types.ts Normal file
View File

@ -0,0 +1,11 @@
export interface OutlineParameters {
/**
* Outline configuration
*
* @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
*/
outline: {
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
};
}

8
code/addons/outline/src/withOutline.ts
View File

@ -1,15 +1,11 @@
import { useEffect, useMemo } from 'storybook/internal/preview-api';
import type {
Renderer,
StoryContext,
PartialStoryFn as StoryFunction,
} from 'storybook/internal/types';
import type { DecoratorFunction } from 'storybook/internal/types';
import { PARAM_KEY } from './constants';
import { addOutlineStyles, clearStyles } from './helpers';
import outlineCSS from './outlineCSS';
export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
export const withOutline: DecoratorFunction = (StoryFn, context) => {
const { globals } = context;
const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
const isInDocs = context.viewMode === 'docs';

1
code/addons/storysource/src/index.ts
View File

@ -1,3 +1,4 @@
import { ADDON_ID, PANEL_ID } from './events';
export { ADDON_ID, PANEL_ID };
export type { StorySourceParameters } from './types';

38
code/addons/storysource/src/types.ts Normal file
View File

@ -0,0 +1,38 @@
export interface StorySourceParameters {
/**
* Storysource addon configuration
*
* @see https://github.com/storybookjs/storybook/tree/next/code/addons/storysource
*/
storySource?: {
/** Dark mode for source code */
dark?: boolean;
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
/** Source code formatting options */
format?: 'jsx' | 'typescript' | 'javascript';
/** Source code language */
language?: string;
/** Source code loader options */
loaderOptions?: {
/** Ignore specific patterns */
ignore?: string[];
/** Include specific patterns */
include?: string[];
/** Parser options */
parser?: string;
/** Pretty print source code */
prettierConfig?: object;
};
/** Show story source code */
showCode?: boolean;
/** Source code transformations */
transformSource?: (source: string, storyContext: any) => string;
};
}

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

@ -23,6 +23,12 @@
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
"imports": {
"#manager-store": {
"storybook": "./src/manager-store.mock.ts",
"default": "./src/manager-store.ts"
}
},
"exports": {
".": {
"types": "./dist/index.d.ts",
@ -66,6 +72,16 @@
"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/**/*",
"templates/**/*",

22
code/addons/test/src/components/Description.tsx
View File

@ -22,32 +22,18 @@ const PositiveText = styled.span(({ theme }) => ({
interface DescriptionProps extends Omit<ComponentProps<typeof Wrapper>, 'results'> {
state: TestProviderConfig & TestProviderState;
watching: boolean;
entryId?: string;
results?: TestResultResult[];
}
export function Description({ state, entryId, results, ...props }: DescriptionProps) {
const isMounted = React.useRef(false);
const [isUpdated, setUpdated] = React.useState(false);
export function Description({ state, watching, entryId, results, ...props }: DescriptionProps) {
const { setModalOpen } = React.useContext(GlobalErrorContext);
useEffect(() => {
if (isMounted.current) {
setUpdated(true);
const timeout = setTimeout(setUpdated, 2000, false);
return () => {
clearTimeout(timeout);
};
}
isMounted.current = true;
}, [state.config]);
const errorMessage = state.error?.message;
let description: string | React.ReactNode = 'Not run';
if (isUpdated) {
description = <PositiveText>Settings updated</PositiveText>;
} else if (state.running) {
if (state.running) {
description = state.progress
? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}`
: 'Starting...';
@ -70,7 +56,7 @@ export function Description({ state, entryId, results, ...props }: DescriptionPr
<RelativeTime timestamp={state.progress.finishedAt} />
</>
);
} else if (state.watching) {
} else if (watching) {
description = 'Watching for file changes';
}

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

@ -6,9 +6,10 @@ import { styled } from 'storybook/internal/theming';
import { Addon_TypesEnum } from 'storybook/internal/types';
import type { Meta, StoryObj } from '@storybook/react';
import { fn, within } from '@storybook/test';
import { expect, fn } from '@storybook/test';
import type { Config, Details } from '../constants';
import { type Details, storeOptions } from '../constants';
import { store as mockStore } from '../manager-store.mock';
import { TestProviderRender } from './TestProviderRender';
type Story = StoryObj<typeof TestProviderRender>;
@ -36,26 +37,16 @@ const config: TestProviderConfig = {
name: 'Test Provider',
type: Addon_TypesEnum.experimental_TEST_PROVIDER,
runnable: true,
watchable: true,
};
const baseState: TestProviderState<Details, Config> = {
const baseState: TestProviderState<Details> = {
cancellable: true,
cancelling: false,
crashed: false,
error: undefined,
failed: false,
running: false,
watching: false,
config: {
a11y: false,
coverage: false,
},
details: {
config: {
a11y: false,
coverage: false,
},
testResults: [
{
endTime: 0,
@ -108,6 +99,11 @@ export default {
parameters: {
layout: 'fullscreen',
},
beforeEach: async () => {
return () => {
mockStore.setState(storeOptions.initialState);
};
},
} as Meta<typeof TestProviderRender>;
export const Default: Story = {
@ -134,9 +130,11 @@ export const Watching: Story = {
state: {
...config,
...baseState,
watching: true,
},
},
beforeEach: async () => {
mockStore.setState((s) => ({ ...s, watching: true }));
},
};
export const WithCoverageNegative: Story = {
@ -145,20 +143,12 @@ export const WithCoverageNegative: Story = {
...config,
...baseState,
details: {
config: {
a11y: false,
coverage: true,
},
testResults: [],
coverageSummary: {
percentage: 20,
status: 'negative',
},
},
config: {
a11y: false,
coverage: true,
},
},
},
};
@ -170,19 +160,11 @@ export const WithCoverageWarning: Story = {
...baseState,
details: {
testResults: [],
config: {
a11y: false,
coverage: true,
},
coverageSummary: {
percentage: 50,
status: 'warning',
},
},
config: {
a11y: false,
coverage: true,
},
},
},
};
@ -194,19 +176,11 @@ export const WithCoveragePositive: Story = {
...baseState,
details: {
testResults: [],
config: {
a11y: false,
coverage: true,
},
coverageSummary: {
percentage: 80,
status: 'positive',
},
},
config: {
a11y: false,
coverage: true,
},
},
},
};
@ -216,24 +190,14 @@ export const Editing: Story = {
state: {
...config,
...baseState,
config: {
a11y: false,
coverage: false,
},
details: {
testResults: [],
config: {
a11y: false,
coverage: false,
},
},
},
},
play: async ({ canvasElement }) => {
const screen = within(canvasElement);
screen.getByLabelText(/Show settings/).click();
play: async ({ canvas }) => {
(await canvas.findByLabelText('Show settings')).click();
},
};
@ -242,19 +206,43 @@ export const EditingAndWatching: Story = {
state: {
...config,
...baseState,
watching: true,
config: {
a11y: true,
coverage: true, // should be automatically disabled in the UI
},
details: {
testResults: [],
config: {
a11y: true,
coverage: true, // should be automatically disabled in the UI
},
},
},
},
beforeEach: Watching.beforeEach,
play: Editing.play,
};
export const TogglingSettings: Story = {
args: {
state: {
...config,
...baseState,
details: {
testResults: [],
},
},
},
play: async ({ canvas, step }) => {
await step('Enable coverage', async () => {
(await canvas.findByLabelText('Show settings')).click();
(await canvas.findByLabelText('Coverage')).click();
await expect(mockStore.setState).toHaveBeenCalledOnce();
mockStore.setState.mockClear();
});
(await canvas.findByLabelText('Hide settings')).click();
await step('Enable watch mode', async () => {
(await canvas.findByLabelText('Enable watch mode')).click();
await expect(mockStore.setState).toHaveBeenCalledOnce();
(await canvas.findByLabelText('Show settings')).click();
await expect(await canvas.findByLabelText('Coverage')).toBeDisabled();
});
},
};

123
code/addons/test/src/components/TestProviderRender.tsx
View File

@ -1,12 +1,4 @@
import React, {
type ComponentProps,
type FC,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import React, { type ComponentProps, type FC, useMemo, useState } from 'react';
import {
Button,
@ -15,13 +7,8 @@ import {
TooltipNote,
WithTooltip,
} from 'storybook/internal/components';
import {
TESTING_MODULE_CONFIG_CHANGE,
type TestProviderConfig,
type TestProviderState,
} from 'storybook/internal/core-events';
import type { Tag } from 'storybook/internal/csf';
import { addons, useStorybookState } from 'storybook/internal/manager-api';
import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
import { addons, experimental_useUniversalStore } from 'storybook/internal/manager-api';
import type { API } from 'storybook/internal/manager-api';
import { styled, useTheme } from 'storybook/internal/theming';
@ -35,14 +22,13 @@ import {
StopAltIcon,
} from '@storybook/icons';
import { isEqual } from 'es-toolkit';
import { debounce } from 'es-toolkit/compat';
import { store } from '#manager-store';
import {
ADDON_ID as A11Y_ADDON_ID,
PANEL_ID as A11y_ADDON_PANEL_ID,
} from '../../../a11y/src/constants';
import { type Config, type Details, PANEL_ID } from '../constants';
import { type Details, PANEL_ID } from '../constants';
import { type TestStatus } from '../node/reporter';
import { Description } from './Description';
import { TestStatusIcon } from './TestStatusIcon';
@ -117,7 +103,7 @@ const statusMap: Record<TestStatus, ComponentProps<typeof TestStatusIcon>['statu
type TestProviderRenderProps = {
api: API;
state: TestProviderConfig & TestProviderState<Details, Config>;
state: TestProviderConfig & TestProviderState<Details>;
entryId?: string;
} & ComponentProps<typeof Container>;
@ -130,24 +116,10 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
const [isEditing, setIsEditing] = useState(false);
const theme = useTheme();
const coverageSummary = state.details?.coverageSummary;
const storybookState = useStorybookState();
const isA11yAddon = addons.experimental_getRegisteredAddons().includes(A11Y_ADDON_ID);
const isA11yAddonInitiallyChecked = useMemo(() => {
const internalIndex = storybookState.internal_index;
if (!internalIndex || !isA11yAddon) {
return false;
}
return Object.values(internalIndex.entries).some((entry) => entry.tags?.includes('a11y-test'));
}, [isA11yAddon, storybookState.internal_index]);
const [config, updateConfig] = useConfig(
api,
state.id,
state.config || { a11y: isA11yAddonInitiallyChecked, coverage: false }
);
const [{ config, watching }, setStoreState] = experimental_useUniversalStore(store);
const isStoryEntry = entryId?.includes('--') ?? false;
@ -191,15 +163,13 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
return 'positive';
}, [state.running, isA11yAddon, config.a11y, a11yResults]);
const a11yNotPassedAmount = state.config?.a11y
const a11yNotPassedAmount = config?.a11y
? a11yResults?.filter((result) => result?.status === 'failed' || result?.status === 'warning')
.length
: undefined;
const a11ySkippedAmount =
state.running || !state?.details.config?.a11y || !state.config?.a11y
? null
: a11yResults?.filter((result) => !result).length;
state.running || !config?.a11y ? null : a11yResults?.filter((result) => !result).length;
const a11ySkippedLabel = a11ySkippedAmount
? a11ySkippedAmount === 1 && isStoryEntry
@ -240,6 +210,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
state={state}
entryId={entryId}
results={results}
watching={watching}
/>
</Info>
@ -262,18 +233,23 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
</Button>
</WithTooltip>
)}
{!entryId && state.watchable && (
{!entryId && (
<WithTooltip
hasChrome={false}
trigger="hover"
tooltip={<TooltipNote note={`${state.watching ? 'Disable' : 'Enable'} watch mode`} />}
tooltip={<TooltipNote note={`${watching ? 'Disable' : 'Enable'} watch mode`} />}
>
<Button
aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode`}
aria-label={`${watching ? 'Disable' : 'Enable'} watch mode`}
variant="ghost"
padding="small"
active={state.watching}
onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)}
active={watching}
onClick={() =>
setStoreState((s) => ({
...s,
watching: !watching,
}))
}
disabled={state.running || isEditing}
>
<EyeIcon />
@ -339,7 +315,12 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
<Checkbox
type="checkbox"
checked={config.a11y}
onChange={() => updateConfig({ a11y: !config.a11y })}
onChange={() =>
setStoreState((s) => ({
...s,
config: { ...s.config, a11y: !config.a11y },
}))
}
/>
}
/>
@ -352,9 +333,14 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
right={
<Checkbox
type="checkbox"
checked={state.watching ? false : config.coverage}
disabled={state.watching}
onChange={() => updateConfig({ coverage: !config.coverage })}
checked={watching ? false : config.coverage}
disabled={watching}
onChange={() =>
setStoreState((s) => ({
...s,
config: { ...s.config, coverage: !config.coverage },
}))
}
/>
}
/>
@ -447,44 +433,3 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
</Container>
);
};
function useConfig(api: API, providerId: string, initialConfig: Config) {
const updateTestProviderState = useCallback(
(config: Config) => {
api.updateTestProviderState(providerId, { config });
api.emit(TESTING_MODULE_CONFIG_CHANGE, { providerId, config });
},
[api, providerId]
);
const [currentConfig, setConfig] = useState<Config>(initialConfig);
const lastConfig = useRef(initialConfig);
const saveConfig = useCallback(
debounce((config: Config) => {
if (!isEqual(config, lastConfig.current)) {
updateTestProviderState(config);
lastConfig.current = config;
}
}, 500),
[api, providerId]
);
const updateConfig = useCallback(
(update: Partial<Config>) => {
setConfig((value) => {
const updated = { ...value, ...update };
saveConfig(updated);
return updated;
});
},
[saveConfig]
);
useEffect(() => {
updateTestProviderState(initialConfig);
}, []);
return [currentConfig, updateConfig] as const;
}

26
code/addons/test/src/constants.ts
View File

@ -19,16 +19,32 @@ export const SUPPORTED_FRAMEWORKS = [
];
export const SUPPORTED_RENDERERS = ['@storybook/react', '@storybook/svelte', '@storybook/vue3'];
export interface Config {
coverage: boolean;
a11y: boolean;
}
export type Details = {
testResults: TestResult[];
config: Config;
coverageSummary?: {
status: 'positive' | 'warning' | 'negative' | 'unknown';
percentage: number;
};
};
export type StoreState = {
config: {
coverage: boolean;
a11y: boolean;
};
watching: boolean;
};
export const storeOptions = {
id: ADDON_ID,
initialState: {
config: {
coverage: false,
a11y: false,
},
watching: false,
},
};
export const STORE_CHANNEL_EVENT_NAME = `UNIVERSAL_STORE:${storeOptions.id}`;

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

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

7
code/addons/test/src/manager-store.mock.ts Normal file
View File

@ -0,0 +1,7 @@
import { experimental_MockUniversalStore } from 'storybook/internal/manager-api';
import * as testUtils from '@storybook/test';
import { storeOptions } from './constants';
export const store = testUtils.mocked(new experimental_MockUniversalStore(storeOptions, testUtils));

5
code/addons/test/src/manager-store.ts Normal file
View File

@ -0,0 +1,5 @@
import { experimental_UniversalStore } from 'storybook/internal/manager-api';
import { type StoreState, storeOptions } from './constants';
export const store = experimental_UniversalStore.create<StoreState>(storeOptions);

9
code/addons/test/src/manager.tsx
View File

@ -10,11 +10,13 @@ import {
Addon_TypesEnum,
} from 'storybook/internal/types';
import { store } from '#manager-store';
import { GlobalErrorContext, GlobalErrorModal } from './components/GlobalErrorModal';
import { Panel } from './components/Panel';
import { PanelTitle } from './components/PanelTitle';
import { TestProviderRender } from './components/TestProviderRender';
import { ADDON_ID, type Config, type Details, PANEL_ID, TEST_PROVIDER_ID } from './constants';
import { ADDON_ID, type Details, PANEL_ID, TEST_PROVIDER_ID } from './constants';
import type { TestStatus } from './node/reporter';
const statusMap: Record<TestStatus, API_StatusValue> = {
@ -36,7 +38,6 @@ addons.register(ADDON_ID, (api) => {
addons.add(TEST_PROVIDER_ID, {
type: Addon_TypesEnum.experimental_TEST_PROVIDER,
runnable: true,
watchable: true,
name: 'Component tests',
// @ts-expect-error: TODO: Fix types
render: (state) => {
@ -82,7 +83,7 @@ addons.register(ADDON_ID, (api) => {
details: { ...state.details, ...update.details },
};
if ((!state.running && update.running) || (!state.watching && update.watching)) {
if ((!state.running && update.running) || store.getState().watching) {
// Clear coverage data when starting test run or enabling watch mode
delete updated.details.coverageSummary;
}
@ -148,7 +149,7 @@ addons.register(ADDON_ID, (api) => {
return updated;
},
} satisfies Omit<Addon_TestProviderType<Details, Config>, 'id'>);
} satisfies Omit<Addon_TestProviderType<Details>, 'id'>);
}
const filter = ({ state }: Combo) => {

8
code/addons/test/src/node/boot-test-runner.test.ts
View File

@ -6,7 +6,6 @@ import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_PROGRESS_REPORT,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_WATCH_MODE_REQUEST,
} from '@storybook/core/core-events';
// eslint-disable-next-line depend/ban-dependencies
@ -102,13 +101,6 @@ describe('bootTestRunner', () => {
type: TESTING_MODULE_RUN_REQUEST,
});
mockChannel.emit(TESTING_MODULE_WATCH_MODE_REQUEST, 'baz');
expect(child.send).toHaveBeenCalledWith({
args: ['baz'],
from: 'server',
type: TESTING_MODULE_WATCH_MODE_REQUEST,
});
mockChannel.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, 'qux');
expect(child.send).toHaveBeenCalledWith({
args: ['qux'],

18
code/addons/test/src/node/boot-test-runner.ts
View File

@ -3,10 +3,8 @@ import { type ChildProcess } from 'node:child_process';
import type { Channel } from 'storybook/internal/channels';
import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_CONFIG_CHANGE,
TESTING_MODULE_CRASH_REPORT,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_WATCH_MODE_REQUEST,
type TestingModuleCrashReportPayload,
} from 'storybook/internal/core-events';
@ -14,7 +12,7 @@ import {
import { execaNode } from 'execa';
import { join } from 'pathe';
import { TEST_PROVIDER_ID } from '../constants';
import { STORE_CHANNEL_EVENT_NAME, TEST_PROVIDER_ID } from '../constants';
import { log } from '../logger';
const MAX_START_TIME = 30000;
@ -43,18 +41,16 @@ const bootTestRunner = async (channel: Channel) => {
const forwardRun = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_RUN_REQUEST });
const forwardWatchMode = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_WATCH_MODE_REQUEST });
const forwardCancel = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST });
const forwardConfigChange = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_CONFIG_CHANGE });
const forwardStore = (...args: any) => {
child?.send({ args, from: 'server', type: STORE_CHANNEL_EVENT_NAME });
};
const killChild = () => {
channel.off(TESTING_MODULE_RUN_REQUEST, forwardRun);
channel.off(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
channel.off(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
channel.off(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange);
channel.off(STORE_CHANNEL_EVENT_NAME, forwardStore);
child?.kill();
child = null;
};
@ -83,6 +79,8 @@ const bootTestRunner = async (channel: Channel) => {
}
});
channel.on(STORE_CHANNEL_EVENT_NAME, forwardStore);
child.on('message', (result: any) => {
if (result.type === 'ready') {
// Resend events that triggered (during) the boot sequence, now that Vitest is ready
@ -93,9 +91,7 @@ const bootTestRunner = async (channel: Channel) => {
// Forward all events from the channel to the child process
channel.on(TESTING_MODULE_RUN_REQUEST, forwardRun);
channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
channel.on(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange);
resolve();
} else if (result.type === 'error') {

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

@ -182,7 +182,6 @@ export class StorybookReporter implements Reporter {
} as TestingModuleProgressReportProgress,
details: {
testResults,
config: this.testManager.config,
},
};
}

112
code/addons/test/src/node/test-manager.test.ts
View File

@ -1,12 +1,14 @@
import { describe, expect, it, vi } from 'vitest';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { createVitest as actualCreateVitest } from 'vitest/node';
import { experimental_MockUniversalStore } from 'storybook/internal/core-server';
import { Channel, type ChannelTransport } from '@storybook/core/channels';
import type { StoryIndex } from '@storybook/types';
import path from 'pathe';
import { TEST_PROVIDER_ID } from '../constants';
import { TEST_PROVIDER_ID, storeOptions } from '../constants';
import { TestManager } from './test-manager';
const setTestNamePattern = vi.hoisted(() => vi.fn());
@ -79,7 +81,7 @@ global.fetch = vi.fn().mockResolvedValue({
),
});
const options: ConstructorParameters<typeof TestManager>[1] = {
const options: ConstructorParameters<typeof TestManager>[2] = {
onError: (message, error) => {
throw error;
},
@ -88,36 +90,48 @@ const options: ConstructorParameters<typeof TestManager>[1] = {
describe('TestManager', () => {
it('should create a vitest instance', async () => {
new TestManager(mockChannel, options);
await new Promise((r) => setTimeout(r, 1000));
expect(createVitest).toHaveBeenCalled();
new TestManager(mockChannel, new experimental_MockUniversalStore(storeOptions, vi), options);
await vi.waitFor(() => {
expect(createVitest).toHaveBeenCalled();
});
});
it('should call onReady callback', async () => {
new TestManager(mockChannel, options);
await new Promise((r) => setTimeout(r, 1000));
expect(options.onReady).toHaveBeenCalled();
new TestManager(mockChannel, new experimental_MockUniversalStore(storeOptions, vi), options);
await vi.waitFor(() => {
expect(options.onReady).toHaveBeenCalled();
});
});
it('TestManager.start should start vitest and resolve when ready', async () => {
const testManager = await TestManager.start(mockChannel, options);
const testManager = await TestManager.start(
mockChannel,
new experimental_MockUniversalStore(storeOptions, vi),
options
);
expect(testManager).toBeInstanceOf(TestManager);
expect(createVitest).toHaveBeenCalled();
});
it('should handle watch mode request', async () => {
const testManager = await TestManager.start(mockChannel, options);
expect(testManager.config.watchMode).toBe(false);
const testManager = await TestManager.start(
mockChannel,
new experimental_MockUniversalStore(storeOptions, vi),
options
);
expect(createVitest).toHaveBeenCalledTimes(1);
await testManager.handleWatchModeRequest({ providerId: TEST_PROVIDER_ID, watchMode: true });
expect(testManager.config.watchMode).toBe(true);
await testManager.handleWatchModeRequest(true);
expect(createVitest).toHaveBeenCalledTimes(1); // shouldn't restart vitest
});
it('should handle run request', async () => {
vitest.globTestSpecs.mockImplementation(() => tests);
const testManager = await TestManager.start(mockChannel, options);
const testManager = await TestManager.start(
mockChannel,
new experimental_MockUniversalStore(storeOptions, vi),
options
);
expect(createVitest).toHaveBeenCalledTimes(1);
await testManager.handleRunRequest({
@ -130,7 +144,11 @@ describe('TestManager', () => {
it('should filter tests', async () => {
vitest.globTestSpecs.mockImplementation(() => tests);
const testManager = await TestManager.start(mockChannel, options);
const testManager = await TestManager.start(
mockChannel,
new experimental_MockUniversalStore(storeOptions, vi),
options
);
await testManager.handleRunRequest({
providerId: TEST_PROVIDER_ID,
@ -149,55 +167,73 @@ describe('TestManager', () => {
});
it('should handle coverage toggling', async () => {
const testManager = await TestManager.start(mockChannel, options);
expect(testManager.config.coverage).toBe(false);
const testManager = await TestManager.start(
mockChannel,
new experimental_MockUniversalStore(storeOptions, vi),
options
);
expect(createVitest).toHaveBeenCalledTimes(1);
createVitest.mockClear();
await testManager.handleConfigChange({
providerId: TEST_PROVIDER_ID,
config: { coverage: true, a11y: false },
});
expect(testManager.config.coverage).toBe(true);
await testManager.handleConfigChange(
{
coverage: true,
a11y: false,
},
{
coverage: false,
a11y: false,
}
);
expect(createVitest).toHaveBeenCalledTimes(1);
createVitest.mockClear();
await testManager.handleConfigChange({
providerId: TEST_PROVIDER_ID,
config: { coverage: false, a11y: false },
});
expect(testManager.config.coverage).toBe(false);
await testManager.handleConfigChange(
{
coverage: false,
a11y: false,
},
{
coverage: true,
a11y: false,
}
);
expect(createVitest).toHaveBeenCalledTimes(1);
});
it('should temporarily disable coverage on focused tests', async () => {
vitest.globTestSpecs.mockImplementation(() => tests);
const testManager = await TestManager.start(mockChannel, options);
expect(testManager.config.coverage).toBe(false);
expect(createVitest).toHaveBeenCalledTimes(1);
const mockStore = new experimental_MockUniversalStore(storeOptions, vi);
const testManager = await TestManager.start(mockChannel, mockStore, options);
await testManager.handleConfigChange({
providerId: TEST_PROVIDER_ID,
config: { coverage: true, a11y: false },
expect(createVitest).toHaveBeenCalledTimes(1);
createVitest.mockClear();
mockStore.setState((s) => ({ ...s, config: { coverage: true, a11y: false } }));
await vi.waitFor(() => {
expect(createVitest).toHaveBeenCalledTimes(1);
});
expect(testManager.config.coverage).toBe(true);
expect(createVitest).toHaveBeenCalledTimes(2);
createVitest.mockClear();
await testManager.handleRunRequest({
providerId: TEST_PROVIDER_ID,
indexUrl: 'http://localhost:6006/index.json',
storyIds: ['button--primary', 'button--secondary'],
});
// expect vitest to be restarted twice, without and with coverage
expect(createVitest).toHaveBeenCalledTimes(4);
expect(createVitest).toHaveBeenCalledTimes(2);
expect(vitest.runFiles).toHaveBeenCalledWith([], true);
createVitest.mockClear();
await testManager.handleRunRequest({
providerId: TEST_PROVIDER_ID,
indexUrl: 'http://localhost:6006/index.json',
});
// don't expect vitest to be restarted, as we're running all tests
expect(createVitest).toHaveBeenCalledTimes(4);
expect(createVitest).not.toHaveBeenCalled();
expect(vitest.runFiles).toHaveBeenCalledWith(tests, true);
});
});

87
code/addons/test/src/node/test-manager.ts
View File

@ -1,31 +1,25 @@
import type { Channel } from 'storybook/internal/channels';
import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_CONFIG_CHANGE,
TESTING_MODULE_PROGRESS_REPORT,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_WATCH_MODE_REQUEST,
type TestingModuleCancelTestRunRequestPayload,
type TestingModuleConfigChangePayload,
type TestingModuleProgressReportPayload,
type TestingModuleRunRequestPayload,
type TestingModuleWatchModeRequestPayload,
} from 'storybook/internal/core-events';
import type { experimental_UniversalStore } from 'storybook/internal/core-server';
import { type Config, TEST_PROVIDER_ID } from '../constants';
import { isEqual } from 'es-toolkit';
import { type StoreState, TEST_PROVIDER_ID } from '../constants';
import { VitestManager } from './vitest-manager';
export class TestManager {
vitestManager: VitestManager;
config = {
watchMode: false,
coverage: false,
a11y: false,
};
constructor(
private channel: Channel,
public store: experimental_UniversalStore<StoreState>,
private options: {
onError?: (message: string, error: Error) => void;
onReady?: () => void;
@ -34,31 +28,27 @@ export class TestManager {
this.vitestManager = new VitestManager(this);
this.channel.on(TESTING_MODULE_RUN_REQUEST, this.handleRunRequest.bind(this));
this.channel.on(TESTING_MODULE_CONFIG_CHANGE, this.handleConfigChange.bind(this));
this.channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, this.handleWatchModeRequest.bind(this));
this.channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, this.handleCancelRequest.bind(this));
this.store.onStateChange((state, previousState) => {
if (!isEqual(state.config, previousState.config)) {
this.handleConfigChange(state.config, previousState.config);
}
if (state.watching !== previousState.watching) {
this.handleWatchModeRequest(state.watching);
}
});
this.vitestManager.startVitest().then(() => options.onReady?.());
}
async handleConfigChange(payload: TestingModuleConfigChangePayload<Config>) {
if (payload.providerId !== TEST_PROVIDER_ID) {
return;
}
async handleConfigChange(config: StoreState['config'], previousConfig: StoreState['config']) {
process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(config);
const previousConfig = this.config;
this.config = {
...this.config,
...payload.config,
} satisfies Config;
process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(payload.config);
if (previousConfig.coverage !== payload.config.coverage) {
if (config.coverage !== previousConfig.coverage) {
try {
await this.vitestManager.restartVitest({
coverage: this.config.coverage,
coverage: config.coverage,
});
} catch (e) {
this.reportFatalError('Failed to change coverage configuration', e);
@ -66,27 +56,17 @@ export class TestManager {
}
}
async handleWatchModeRequest(payload: TestingModuleWatchModeRequestPayload<Config>) {
if (payload.providerId !== TEST_PROVIDER_ID) {
return;
}
this.config.watchMode = payload.watchMode;
async handleWatchModeRequest(watching: boolean) {
const coverage = this.store.getState().config.coverage ?? false;
if (payload.config) {
this.handleConfigChange({
providerId: payload.providerId,
config: payload.config,
});
}
if (this.config.coverage) {
if (coverage) {
try {
if (payload.watchMode) {
if (watching) {
// if watch mode is toggled on and coverage is already enabled, restart vitest without coverage to automatically disable it
await this.vitestManager.restartVitest({ coverage: false });
} else {
// if watch mode is toggled off and coverage is already enabled, restart vitest with coverage to automatically re-enable it
await this.vitestManager.restartVitest({ coverage: this.config.coverage });
await this.vitestManager.restartVitest({ coverage });
}
} catch (e) {
this.reportFatalError('Failed to change watch mode while coverage was enabled', e);
@ -94,25 +74,20 @@ export class TestManager {
}
}
async handleRunRequest(payload: TestingModuleRunRequestPayload<Config>) {
async handleRunRequest(payload: TestingModuleRunRequestPayload) {
try {
if (payload.providerId !== TEST_PROVIDER_ID) {
return;
}
if (payload.config) {
this.handleConfigChange({
providerId: payload.providerId,
config: payload.config,
});
}
const state = this.store.getState();
/*
If we're only running a subset of stories, we have to temporarily disable coverage,
as a coverage report for a subset of stories is not useful.
*/
const temporarilyDisableCoverage =
this.config.coverage && !this.config.watchMode && (payload.storyIds ?? []).length > 0;
state.config.coverage && !state.watching && (payload.storyIds ?? []).length > 0;
if (temporarilyDisableCoverage) {
await this.vitestManager.restartVitest({
coverage: false,
@ -125,7 +100,7 @@ export class TestManager {
if (temporarilyDisableCoverage) {
// Re-enable coverage if it was temporarily disabled because of a subset of stories was run
await this.vitestManager.restartVitest({ coverage: this.config.coverage });
await this.vitestManager.restartVitest({ coverage: state?.config.coverage });
}
} catch (e) {
this.reportFatalError('Failed to run tests', e);
@ -152,9 +127,13 @@ export class TestManager {
this.options.onError?.(message, error);
}
static async start(channel: Channel, options: typeof TestManager.prototype.options = {}) {
static async start(
channel: Channel,
store: experimental_UniversalStore<StoreState>,
options: typeof TestManager.prototype.options = {}
) {
return new Promise<TestManager>((resolve) => {
const testManager = new TestManager(channel, {
const testManager = new TestManager(channel, store, {
...options,
onReady: () => {
resolve(testManager);

8
code/addons/test/src/node/vitest-manager.ts
View File

@ -21,7 +21,7 @@ import path, { dirname, join, normalize } from 'pathe';
import { satisfies } from 'semver';
import slash from 'slash';
import { COVERAGE_DIRECTORY, type Config } from '../constants';
import { COVERAGE_DIRECTORY } from '../constants';
import { log } from '../logger';
import type { StorybookCoverageReporterOptions } from './coverage-reporter';
import { StorybookReporter } from './reporter';
@ -227,7 +227,7 @@ export class VitestManager {
this.runningPromise = null;
}
async runTests(requestPayload: TestingModuleRunRequestPayload<Config>) {
async runTests(requestPayload: TestingModuleRunRequestPayload) {
if (!this.vitest) {
await this.startVitest();
} else {
@ -253,7 +253,7 @@ export class VitestManager {
this.filterStories(story, spec.moduleId, { include, exclude, skip })
);
if (matches.length) {
if (!this.testManager.config.watchMode) {
if (!this.testManager.store.getState().watching) {
// Clear the file cache if watch mode is not enabled
this.updateLastChanged(spec.moduleId);
}
@ -387,7 +387,7 @@ export class VitestManager {
// when watch mode is disabled, don't trigger any tests (below)
// but still invalidate the cache for the changed file, which is handled above
if (!this.testManager.config.watchMode) {
if (!this.testManager.store.getState().watching) {
return;
}

11
code/addons/test/src/node/vitest.ts
View File

@ -1,7 +1,10 @@
import process from 'node:process';
import { Channel } from 'storybook/internal/channels';
import { experimental_UniversalStore } from 'storybook/internal/core-server';
import type { StoreState } from '../constants';
import { storeOptions } from '../constants';
import { TestManager } from './test-manager';
process.env.TEST = 'true';
@ -20,7 +23,13 @@ const channel: Channel = new Channel({
},
});
new TestManager(channel, {
// eslint-disable-next-line no-underscore-dangle
(experimental_UniversalStore as any).__prepare(
channel,
experimental_UniversalStore.Environment.SERVER
);
new TestManager(channel, experimental_UniversalStore.create<StoreState>(storeOptions), {
onError: (message, error) => {
process.send?.({ type: 'error', message, error: error.stack ?? error });
},

90
code/addons/test/src/preset.ts
View File

@ -9,18 +9,27 @@ import {
serverRequire,
} from 'storybook/internal/common';
import {
TESTING_MODULE_CONFIG_CHANGE,
TESTING_MODULE_CRASH_REPORT,
TESTING_MODULE_PROGRESS_REPORT,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_WATCH_MODE_REQUEST,
type TestingModuleCrashReportPayload,
type TestingModuleProgressReportPayload,
} from 'storybook/internal/core-events';
import { oneWayHash, telemetry } from 'storybook/internal/telemetry';
import { experimental_UniversalStore } from 'storybook/internal/core-server';
import { cleanPaths, oneWayHash, sanitizeError, telemetry } from 'storybook/internal/telemetry';
import type { Options, PresetProperty, PresetPropertyFn, StoryId } from 'storybook/internal/types';
import { isAbsolute, join } from 'pathe';
import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import { COVERAGE_DIRECTORY, STORYBOOK_ADDON_TEST_CHANNEL, TEST_PROVIDER_ID } from './constants';
import {
COVERAGE_DIRECTORY,
STORYBOOK_ADDON_TEST_CHANNEL,
type StoreState,
TEST_PROVIDER_ID,
storeOptions,
} from './constants';
import { log } from './logger';
import { runTestRunner } from './node/boot-test-runner';
@ -56,6 +65,11 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
const framework = await getFrameworkName(options);
const store = experimental_UniversalStore.create<StoreState>({
...storeOptions,
leader: true,
});
// Only boot the test runner if the builder is vite, else just provide interactions functionality
if (!builderName?.includes('vite')) {
if (framework.includes('nextjs')) {
@ -77,13 +91,12 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
};
channel.on(TESTING_MODULE_RUN_REQUEST, execute(TESTING_MODULE_RUN_REQUEST));
channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, (payload) => {
if (payload.watchMode) {
execute(TESTING_MODULE_WATCH_MODE_REQUEST)(payload);
store.onStateChange((state) => {
if (state.watching) {
runTestRunner(channel);
}
});
channel.on(TESTING_MODULE_CONFIG_CHANGE, execute(TESTING_MODULE_CONFIG_CHANGE));
if (!core.disableTelemetry) {
const packageJsonPath = require.resolve('@storybook/experimental-addon-test/package.json');
@ -102,6 +115,65 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
addonVersion,
});
});
store.onStateChange(async (state, previous) => {
if (state.watching && !previous.watching) {
await telemetry('testing-module-watch-mode', {
provider: TEST_PROVIDER_ID,
watchMode: state.watching,
});
}
});
channel.on(
TESTING_MODULE_PROGRESS_REPORT,
async (payload: TestingModuleProgressReportPayload) => {
if (payload.providerId !== TEST_PROVIDER_ID) {
return;
}
const status = 'status' in payload ? payload.status : undefined;
const progress = 'progress' in payload ? payload.progress : undefined;
const error = 'error' in payload ? payload.error : undefined;
const config = store.getState().config;
if ((status === 'success' || status === 'cancelled') && progress?.finishedAt) {
await telemetry('testing-module-completed-report', {
provider: TEST_PROVIDER_ID,
status,
config,
duration: progress?.finishedAt - progress?.startedAt,
numTotalTests: progress?.numTotalTests,
numFailedTests: progress?.numFailedTests,
numPassedTests: progress?.numPassedTests,
});
}
if (status === 'failed') {
await telemetry('testing-module-completed-report', {
provider: TEST_PROVIDER_ID,
status,
config,
...(options.enableCrashReports && {
error: error && sanitizeError(error),
}),
});
}
}
);
channel.on(TESTING_MODULE_CRASH_REPORT, async (payload: TestingModuleCrashReportPayload) => {
if (payload.providerId !== TEST_PROVIDER_ID) {
return;
}
await telemetry('testing-module-crash-report', {
provider: payload.providerId,
...(options.enableCrashReports && {
error: cleanPaths(payload.error.message),
}),
});
});
}
return channel;

14
code/addons/test/src/types.ts Normal file
View File

@ -0,0 +1,14 @@
export interface TestParameters {
/**
* Test addon configuration
*
* @see https://storybook.js.org/docs/writing-tests/test-addon
*/
test: {
/** Ignore unhandled errors during test execution */
dangerouslyIgnoreUnhandledErrors?: boolean;
/** Whether to throw exceptions coming from the play function */
throwPlayFunctionExceptions?: boolean;
};
}

14
code/addons/test/src/vitest-plugin/test-utils.ts
View File

@ -3,7 +3,11 @@
/* eslint-disable no-underscore-dangle */
import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
import { type Report, composeStory } from 'storybook/internal/preview-api';
import {
type Report,
composeStory,
getCsfFactoryAnnotations,
} from 'storybook/internal/preview-api';
import type { ComponentAnnotations, ComposedStoryFn } from 'storybook/internal/types';
import { server } from '@vitest/browser/context';
@ -26,13 +30,15 @@ export const testStory = (
skipTags: string[]
) => {
return async (context: TestContext & { story: ComposedStoryFn }) => {
const annotations = getCsfFactoryAnnotations(story, meta);
const composedStory = composeStory(
story,
meta,
annotations.story,
annotations.meta!,
{ initialGlobals: (await getInitialGlobals?.()) ?? {}, tags: await getTags?.() },
undefined,
annotations.preview,
exportName
);
if (composedStory === undefined || skipTags?.some((tag) => composedStory.tags.includes(tag))) {
context.skip();
}

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

@ -44,6 +44,16 @@
"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",

14
code/addons/themes/src/constants.ts
View File

@ -1,24 +1,16 @@
import type { ThemeAddonState, ThemesParameters } from './types';
export const PARAM_KEY = 'themes' as const;
export const ADDON_ID = `storybook/${PARAM_KEY}` as const;
export const GLOBAL_KEY = 'theme' as const;
export const THEME_SWITCHER_ID = `${ADDON_ID}/theme-switcher` as const;
export interface ThemeAddonState {
themesList: string[];
themeDefault?: string;
}
export const DEFAULT_ADDON_STATE: ThemeAddonState = {
themesList: [],
themeDefault: undefined,
};
export interface ThemeParameters {
themeOverride?: string;
disable?: boolean;
}
export const DEFAULT_THEME_PARAMETERS: ThemeParameters = {};
export const DEFAULT_THEME_PARAMETERS: ThemesParameters['themes'] = {};
export const THEMING_EVENTS = {
REGISTER_THEMES: `${ADDON_ID}/REGISTER_THEMES`,

8
code/addons/themes/src/decorators/helpers.ts
View File

@ -4,8 +4,10 @@ import type { StoryContext } from 'storybook/internal/types';
import dedent from 'ts-dedent';
import type { ThemeParameters } from '../constants';
import { DEFAULT_THEME_PARAMETERS, GLOBAL_KEY, PARAM_KEY, THEMING_EVENTS } from '../constants';
import type { ThemesParameters as Parameters } from '../types';
type ThemesParameters = Parameters['themes'];
/**
* @param StoryContext
@ -15,7 +17,7 @@ export function pluckThemeFromContext({ globals }: StoryContext): string {
return globals[GLOBAL_KEY] || '';
}
export function useThemeParameters(context?: StoryContext): ThemeParameters {
export function useThemeParameters(context?: StoryContext): ThemesParameters {
deprecate(
dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
- const { themeOverride } = context.parameters.themes ?? {};
@ -23,7 +25,7 @@ export function useThemeParameters(context?: StoryContext): ThemeParameters {
);
if (!context) {
return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
return useParameter<ThemesParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemesParameters;
}
return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS;

10
code/addons/themes/src/index.ts
View File

@ -1,3 +1,9 @@
// make it work with --isolatedModules
export default {};
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export type { ThemesGlobals, ThemesParameters } from './types';
export default () => definePreview(addonAnnotations);
export * from './decorators';

8
code/addons/themes/src/theme-switcher.tsx
View File

@ -13,7 +13,6 @@ import { styled } from 'storybook/internal/theming';
import { PaintBrushIcon } from '@storybook/icons';
import type { ThemeAddonState, ThemeParameters } from './constants';
import {
DEFAULT_ADDON_STATE,
DEFAULT_THEME_PARAMETERS,
@ -22,6 +21,9 @@ import {
THEME_SWITCHER_ID,
THEMING_EVENTS,
} from './constants';
import type { ThemesParameters as Parameters, ThemeAddonState } from './types';
type ThemesParameters = Parameters['themes'];
const IconButtonLabel = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2 - 1,
@ -31,10 +33,10 @@ const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesL
const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
const { themeOverride, disable } = useParameter<ThemeParameters>(
const { themeOverride, disable } = useParameter<ThemesParameters>(
PARAM_KEY,
DEFAULT_THEME_PARAMETERS
) as ThemeParameters;
) as ThemesParameters;
const [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals();
const channel = addons.getChannel();

23
code/addons/themes/src/types.ts Normal file
View File

@ -0,0 +1,23 @@
export interface ThemeAddonState {
themesList: string[];
themeDefault?: string;
}
export interface ThemesParameters {
/**
* Themes configuration
*
* @see https://github.com/storybookjs/storybook/blob/next/code/addons/themes/README.md
*/
themes: {
/** Remove the addon panel and disable the addon's behavior */
disable?: boolean;
/** Which theme to override for the story */
themeOverride?: string;
};
}
export interface ThemesGlobals {
/** Which theme to override for the story */
theme?: string;
}

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

@ -39,6 +39,16 @@
"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",

6
code/addons/viewport/src/index.ts
View File

@ -1,2 +1,8 @@
import { definePreview } from 'storybook/internal/preview-api';
import * as addonAnnotations from './preview';
export * from './defaults';
export type * from './types';
export default () => definePreview(addonAnnotations);

3
code/addons/viewport/src/preview.ts
View File

@ -1,5 +1,4 @@
import { PARAM_KEY as KEY } from './constants';
import { MINIMAL_VIEWPORTS } from './defaults';
import type { GlobalState } from './types';
const modern: Record<string, GlobalState> = {
@ -9,4 +8,4 @@ const modern: Record<string, GlobalState> = {
// TODO: remove in 9.0
const legacy = { viewport: 'reset', viewportRotated: false };
export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy;
export const initialGlobals = globalThis.FEATURES?.viewportStoryGlobals ? modern : legacy;

60
code/addons/viewport/src/types.ts
View File

@ -24,5 +24,63 @@ export interface Config {
disable: boolean;
}
export type GlobalState = { value: string | undefined; isRotated: boolean };
export type GlobalState = {
/**
* When set, the viewport is applied and cannot be changed using the toolbar. Must match the key
* of one of the available viewports.
*/
value: string | undefined;
/**
* When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to
* landscape orientation.
*/
isRotated: boolean;
};
export type GlobalStateUpdate = Partial<GlobalState>;
export interface ViewportParameters {
/**
* Viewport configuration
*
* @see https://storybook.js.org/docs/essentials/viewport#parameters
*/
viewport: {
/**
* Specifies the default orientation used when viewing a story. Only available if you haven't
* enabled the globals API.
*/
defaultOrientation?: 'landscape' | 'portrait';
/**
* Specifies the default viewport used when viewing a story. Must match a key in the viewports
* (or options) object.
*/
defaultViewport?: string;
/**
* Remove the addon panel and disable the addon's behavior . If you wish to turn off this addon
* for the entire Storybook, you should do so when registering addon-essentials
*
* @see https://storybook.js.org/docs/essentials/index#disabling-addons
*/
disabled?: boolean;
/**
* Specify the available viewports. The width and height values must include the unit, e.g.
* '320px'.
*/
viewports?: Viewport; // TODO: use ModernViewport in 9.0
};
}
export interface ViewportGlobals {
/**
* Viewport configuration
*
* @see https://storybook.js.org/docs/essentials/viewport#globals
*/
viewport: {
[key: string]: GlobalState;
};
}

2
code/builders/builder-vite/input/iframe.html
View File

@ -64,6 +64,6 @@
<!-- [BODY HTML SNIPPET HERE] -->
<div id="storybook-root"></div>
<div id="storybook-docs"></div>
<script type="module" src="virtual:@storybook/builder-vite/vite-app.js"></script>
<script type="module" src="virtual:/@storybook/builder-vite/vite-app.js"></script>
</body>
</html>

11
code/builders/builder-vite/src/codegen-modern-iframe-script.ts
View File

@ -14,7 +14,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
[],
options
);
const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile]
const [previewFileUrl, ...previewAnnotationURLs] = [previewOrConfigFile, ...previewAnnotations]
.filter(Boolean)
.map((path) => processPreviewAnnotation(path, projectRoot));
@ -23,6 +23,12 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
// modules are provided, the rest are null. We can just re-import everything again in that case.
const getPreviewAnnotationsFunction = `
const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
const preview = await import('${previewFileUrl}');
if (isPreview(preview.default)) {
return preview.default.composed;
}
const configs = await Promise.all([${previewAnnotationURLs
.map(
(previewAnnotation, index) =>
@ -30,7 +36,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
`hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
)
.join(',\n')}])
return composeConfigs(configs);
return composeConfigs([...configs, preview]);
}`;
// eslint-disable-next-line @typescript-eslint/no-shadow
@ -73,6 +79,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
setup();
import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
import { isPreview } from 'storybook/internal/csf';
import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';

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

@ -17,6 +17,7 @@ const INCLUDE_CANDIDATES = [
'@storybook/addon-backgrounds/preview',
'@storybook/addon-designs/blocks',
'@storybook/addon-docs/preview',
'@storybook/addon-essentials/preview',
'@storybook/addon-essentials/actions/preview',
'@storybook/addon-essentials/actions/preview',
'@storybook/addon-essentials/backgrounds/preview',

2
code/builders/builder-vite/src/transform-iframe-html.ts
View File

@ -51,7 +51,7 @@ export async function transformIframeHtml(html: string, options: Options) {
if (configType === 'DEVELOPMENT') {
return transformedHtml.replace(
'virtual:@storybook/builder-vite/vite-app.js',
'virtual:/@storybook/builder-vite/vite-app.js',
`/@id/__x00__${SB_VIRTUAL_FILES.VIRTUAL_APP_FILE}`
);
}

8
code/builders/builder-vite/src/virtual-file-names.ts
View File

@ -1,8 +1,8 @@
export const SB_VIRTUAL_FILES = {
VIRTUAL_APP_FILE: 'virtual:@storybook/builder-vite/vite-app.js',
VIRTUAL_STORIES_FILE: 'virtual:@storybook/builder-vite/storybook-stories.js',
VIRTUAL_PREVIEW_FILE: 'virtual:@storybook/builder-vite/preview-entry.js',
VIRTUAL_ADDON_SETUP_FILE: 'virtual:@storybook/builder-vite/setup-addons.js',
VIRTUAL_APP_FILE: 'virtual:/@storybook/builder-vite/vite-app.js',
VIRTUAL_STORIES_FILE: 'virtual:/@storybook/builder-vite/storybook-stories.js',
VIRTUAL_PREVIEW_FILE: 'virtual:/@storybook/builder-vite/preview-entry.js',
VIRTUAL_ADDON_SETUP_FILE: 'virtual:/@storybook/builder-vite/setup-addons.js',
};
export function getResolvedVirtualModuleId(virtualModuleId: string) {

13
code/builders/builder-webpack5/templates/virtualModuleModernEntry.js
View File

@ -1,11 +1,22 @@
import { createBrowserChannel } from 'storybook/internal/channels';
import { isPreview } from 'storybook/internal/csf';
import { PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api';
import { global } from '@storybook/global';
import { importFn } from '{{storiesFilename}}';
const getProjectAnnotations = () => composeConfigs(['{{previewAnnotations_requires}}']);
const getProjectAnnotations = () => {
const previewAnnotations = ['{{previewAnnotations_requires}}'];
// the last one in this array is the user preview
const userPreview = previewAnnotations[previewAnnotations.length - 1]?.default;
if (isPreview(userPreview)) {
return userPreview.composed;
}
return composeConfigs(previewAnnotations);
};
const channel = createBrowserChannel({ page: 'preview' });
addons.setChannel(channel);

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

@ -41,6 +41,8 @@ export * from './utils/strip-abs-node-modules-path';
export * from './utils/formatter';
export * from './utils/get-story-id';
export * from './utils/posix';
export * from './utils/get-addon-names';
export * from './utils/sync-main-preview-addons';
export * from './js-package-manager';
export { versions };

23
code/core/src/common/utils/get-addon-annotations.test.ts Normal file
View File

@ -0,0 +1,23 @@
import { describe, expect, it } from 'vitest';
import { getAnnotationsName } from './get-addon-annotations';
describe('getAnnotationsName', () => {
it('should handle @storybook namespace and camel case conversion', () => {
expect(getAnnotationsName('@storybook/addon-essentials')).toBe('addonEssentials');
});
it('should handle other namespaces and camel case conversion', () => {
expect(getAnnotationsName('@kudos-components/testing/module')).toBe(
'kudosComponentsTestingModule'
);
});
it('should handle strings without namespaces', () => {
expect(getAnnotationsName('plain-text/example')).toBe('plainTextExample');
});
it('should handle strings with multiple special characters', () => {
expect(getAnnotationsName('@storybook/multi-part/example-test')).toBe('multiPartExampleTest');
});
});

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