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 branch 'next' into norbert/remove-addon-essentials

Browse Source
This commit is contained in:
Norbert de Langen 2025-03-28 12:36:31 +01:00
commit dc8b4f2d82
87 changed files with 728 additions and 1811 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -1,3 +1,7 @@
## 8.6.11
- Angular: Fix zone.js support for Angular libraries - [#30941](https://github.com/storybookjs/storybook/pull/30941), thanks @valentinpalkovic!
## 8.6.10
- Addon-docs: Fix non-string handling in Stories block - [#30913](https://github.com/storybookjs/storybook/pull/30913), thanks @JamesIves!

175
MIGRATION.md
View File

@ -1,6 +1,16 @@
<h1>Migration</h1>
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
- [A11y addon: Removed deprecated manual parameter](#a11y-addon-removed-deprecated-manual-parameter)
- [Button Component API Changes](#button-component-api-changes)
- [Documentation Generation Changes](#documentation-generation-changes)
- [Global State Management](#global-state-management)
- [Icon System Updates](#icon-system-updates)
- [Sidebar Component Changes](#sidebar-component-changes)
- [Testing Module Changes](#testing-module-changes)
- [Type System Updates](#type-system-updates)
- [Story Store API Changes](#story-store-api-changes)
- [CSF File Changes](#csf-file-changes)
- [The parameter docs.source.excludeDecorators has no effect in React](#the-parameter-docssourceexcludedecorators-has-no-effect-in-react)
- [Addon Viewport is moved to core](#addon-viewport-is-moved-to-core)
- [Addon Controls is moved to core](#addon-controls-is-moved-to-core)
@ -412,6 +422,171 @@
## From version 8.x to 9.0.0
### A11y addon: Removed deprecated manual parameter
The deprecated `manual` parameter from the A11y addon's parameters has been removed. Instead, use the `globals.a11y.manual` setting to control manual mode. For example:
```js
// Old way (no longer works)
export const MyStory = {
parameters: {
a11y: {
manual: true
}
}
};
// New way
export const MyStory = {
parameters: {
a11y: {
// other a11y parameters
}
}
globals: {
a11y: {
manual: true
}
}
};
// To enable manual mode globally, use .storybook/preview.js:
export const initialGlobals = {
a11y: {
manual: true
}
};
```
### Button Component API Changes
The Button component has been updated to use a more modern props API. The following props have been removed:
- `isLink`
- `primary`
- `secondary`
- `tertiary`
- `gray`
- `inForm`
- `small`
- `outline`
- `containsIcon`
Use the new `variant` and `size` props instead:
```diff
- <Button primary small>Click me</Button>
+ <Button variant="primary" size="small">Click me</Button>
```
### Documentation Generation Changes
The `autodocs` configuration option has been removed in favor of using tags:
```diff
// .storybook/preview.js
export default {
- docs: { autodocs: true }
};
// In your CSF files:
+ export default {
+ tags: ['autodocs']
+ };
```
### Global State Management
The `globals` field in project annotations has been renamed to `initialGlobals`:
```diff
export const preview = {
- globals: {
+ initialGlobals: {
theme: 'light'
}
};
```
Additionally loading the defaultValue from `globalTypes` isn't supported anymore. Use `initialGlobals` instead to define the defaultValue.
```diff
// .storybook/preview.js
export default {
+ initialGlobals: {
+ locale: 'en'
+ },
globalTypes: {
locale: {
description: 'Locale for components',
- defaultValue: 'en',
toolbar: {
title: 'Locale',
icon: 'circlehollow',
items: ['es', 'en'],
},
},
},
}
```
### Icon System Updates
Several icon-related exports have been removed:
- `IconButtonSkeleton`
- `Icons`
- `Symbols`
- Legacy icon exports
Use the new icon system from `@storybook/icons` instead:
```diff
- import { Icons, IconButtonSkeleton } from '@storybook/components';
+ import { ZoomIcon } from '@storybook/icons';
```
### Sidebar Component Changes
1. The 'extra' prop has been removed from the Sidebar's Heading component
2. Experimental sidebar features have been removed:
- `experimental_SIDEBAR_BOTTOM`
- `experimental_SIDEBAR_TOP`
### Testing Module Changes
The `TESTING_MODULE_RUN_ALL_REQUEST` event has been removed:
```diff
- import { TESTING_MODULE_RUN_ALL_REQUEST } from '@storybook/core-events';
+ import { TESTING_MODULE_RUN_REQUEST } from '@storybook/core-events';
```
### Type System Updates
The following types have been removed:
- `Addon_SidebarBottomType`
- `Addon_SidebarTopType`
- `DeprecatedState`
Import paths have been updated:
```diff
- import { SupportedRenderers } from './project_types';
+ import { SupportedRenderers } from 'storybook/internal/types';
```
### Story Store API Changes
Several deprecated methods have been removed from the StoryStore:
- `getSetStoriesPayload`
- `getStoriesJsonData`
- `raw`
- `fromId`
### CSF File Changes
Deprecated getters have been removed from the CsfFile class:
- `_fileName`
- `_makeTitle`
### The parameter docs.source.excludeDecorators has no effect in React
In React, the parameter `docs.source.excludeDecorators` option is no longer used.

24
code/addons/a11y/src/components/A11YPanel.tsx
View File

@ -56,14 +56,9 @@ const Centered = styled.span(({ theme }) => ({
},
}));
const Count = styled(Badge)({
padding: 4,
minWidth: 24,
});
export const A11YPanel: React.FC = () => {
const { manual: manualParameter } = useParameter<A11yParameters>(PARAM_KEY, {} as any);
const {
tab,
results,
status,
handleManual,
@ -81,7 +76,9 @@ export const A11YPanel: React.FC = () => {
label: (
<Tab>
Violations
<Count status="neutral">{violations.length}</Count>
<Badge compact status={tab === 'violations' ? 'active' : 'neutral'}>
{violations.length}
</Badge>
</Tab>
),
panel: (
@ -101,7 +98,9 @@ export const A11YPanel: React.FC = () => {
label: (
<Tab>
Passes
<Count status="neutral">{passes.length}</Count>
<Badge compact status={tab === 'passes' ? 'active' : 'neutral'}>
{passes.length}
</Badge>
</Tab>
),
panel: (
@ -121,7 +120,9 @@ export const A11YPanel: React.FC = () => {
label: (
<Tab>
Inconclusive
<Count status="neutral">{incomplete.length}</Count>
<Badge compact status={tab === 'incomplete' ? 'active' : 'neutral'}>
{incomplete.length}
</Badge>
</Tab>
),
panel: (
@ -138,7 +139,7 @@ export const A11YPanel: React.FC = () => {
type: RuleType.INCOMPLETION,
},
];
}, [results, handleSelectionChange, selectedItems, toggleOpen]);
}, [tab, results, handleSelectionChange, selectedItems, toggleOpen]);
return (
<>
@ -167,8 +168,7 @@ export const A11YPanel: React.FC = () => {
Run accessibility scan
</Button>
<p>
Update <code>{manualParameter ? 'parameters' : 'globals'}.a11y.manual</code> to
disable manual mode.
Update <code>globals.a11y.manual</code> to disable manual mode.
</p>
</>
)}

47
code/addons/a11y/src/components/A11yContext.test.tsx
View File

@ -166,24 +166,6 @@ describe('A11yContext', () => {
);
});
it('should set discrepancy to cliFailedButModeManual when in manual mode', () => {
mockedApi.useParameter.mockReturnValue({ manual: true });
mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
const Component = () => {
const { discrepancy } = useA11yContext();
return <div data-testid="discrepancy">{discrepancy}</div>;
};
const { getByTestId } = render(
<A11yContextProvider>
<Component />
</A11yContextProvider>
);
expect(getByTestId('discrepancy').textContent).toBe('cliFailedButModeManual');
});
it('should set discrepancy to cliFailedButModeManual when in manual mode (set via globals)', () => {
mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);
mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
@ -264,35 +246,6 @@ describe('A11yContext', () => {
expect(queryByTestId('status')).toHaveTextContent('running');
});
it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode', () => {
mockedApi.useParameter.mockReturnValue({ manual: true });
const emit = vi.fn();
mockedApi.useChannel.mockReturnValue(emit);
const Component = () => {
const { status } = useA11yContext();
return <div data-testid="status">{status}</div>;
};
const { queryByTestId } = render(
<A11yContextProvider>
<Component />
</A11yContextProvider>
);
expect(queryByTestId('status')).toHaveTextContent('manual');
const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
const storyRenderPhaseChangedPayload = {
newPhase: 'loading',
};
act(() => useChannelArgs[STORY_RENDER_PHASE_CHANGED](storyRenderPhaseChangedPayload));
expect(queryByTestId('status')).toHaveTextContent('manual');
});
it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode (set via globals)', () => {
mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);

9
code/addons/a11y/src/components/A11yContext.tsx
View File

@ -105,19 +105,14 @@ const defaultResult = {
type Status = 'initial' | 'manual' | 'running' | 'error' | 'component-test-error' | 'ran' | 'ready';
export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
const parameters = useParameter<A11yParameters>('a11y', {
manual: false,
});
const parameters = useParameter<A11yParameters>('a11y', {});
const [globals] = useGlobals() ?? [];
const api = useStorybookApi();
const getInitialStatus = useCallback((manual = false) => (manual ? 'manual' : 'initial'), []);
const manual = useMemo(
() => globals?.a11y?.manual ?? parameters.manual ?? false,
[globals?.a11y?.manual, parameters.manual]
);
const manual = useMemo(() => globals?.a11y?.manual ?? false, [globals?.a11y?.manual]);
const a11ySelection = useMemo(() => {
const value = api.getQueryParam('a11ySelection');

26
code/addons/a11y/src/components/Report/Details.tsx
View File

@ -31,12 +31,22 @@ const Info = styled.div({
flexDirection: 'column',
});
const RuleId = styled.div(({ theme }) => ({
display: 'block',
color: theme.textMutedColor,
marginTop: -10,
marginBottom: 10,
'@container (min-width: 800px)': {
display: 'none',
},
}));
const Description = styled.p({
margin: 0,
});
const Wrapper = styled.div({
containerType: 'inline-size',
display: 'flex',
flexDirection: 'column',
padding: '0 15px 20px 15px',
@ -56,7 +66,10 @@ const Content = styled.div<{ side: 'left' | 'right' }>(({ theme, side }) => ({
display: side === 'left' ? 'flex' : 'none',
flexDirection: 'column',
gap: 15,
margin: side === 'left' ? '15px 0 20px 0' : 0,
margin: side === 'left' ? '15px 0' : 0,
padding: side === 'left' ? '0 15px' : 0,
borderLeft: side === 'left' ? `1px solid ${theme.color.border}` : 'none',
'&:focus-visible': {
outline: 'none',
borderRadius: 4,
@ -124,12 +137,13 @@ interface DetailsProps {
export const Details = ({ item, type, selection, handleSelectionChange }: DetailsProps) => (
<Wrapper>
<Info>
<RuleId>{item.id}</RuleId>
<Description>
{item.description.endsWith('.') ? item.description : `${item.description}.`}
{item.description.endsWith('.') ? item.description : `${item.description}.`}{' '}
<Link href={item.helpUrl} target="_blank" withArrow>
How to resolve this
</Link>
</Description>
<Link href={item.helpUrl} target="_blank" withArrow>
Learn how to resolve this violation
</Link>
</Info>
<Tabs.Root

48
code/addons/a11y/src/components/Report/Report.tsx
View File

@ -27,8 +27,8 @@ const HeaderBar = styled.div(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: 5,
padding: '6px 5px 6px 15px',
gap: 6,
padding: '6px 10px 6px 15px',
minHeight: 40,
background: 'none',
color: 'inherit',
@ -40,26 +40,29 @@ const HeaderBar = styled.div(({ theme }) => ({
},
}));
const Title = styled.div(({ theme }) => ({
const Title = styled.div({
display: 'flex',
flexGrow: 1,
fontWeight: theme.typography.weight.bold,
gap: 6,
});
const RuleId = styled.div(({ theme }) => ({
display: 'none',
color: theme.textMutedColor,
'@container (min-width: 800px)': {
display: 'block',
},
}));
const RuleId = styled.span<{ onClick: (event: React.SyntheticEvent<Element>) => void }>(
({ theme }) => ({
display: 'none',
whiteSpace: 'nowrap',
cursor: 'text',
margin: 2,
color: theme.textMutedColor,
fontSize: theme.typography.size.s1,
fontWeight: theme.typography.weight.bold,
'@container (min-width: 800px)': {
display: 'inline-block',
},
})
);
const Count = styled.div(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: theme.textMutedColor,
width: 28,
height: 28,
}));
export interface ReportProps {
items: Result[];
@ -90,8 +93,11 @@ export const Report: FC<ReportProps> = ({
role="button"
data-active={!!selection}
>
<Title>{item.help}</Title>
<RuleId onClick={(event) => event.stopPropagation()}>{item.id}</RuleId>
<Title>
<strong>{item.help}</strong>
<RuleId>{item.id}</RuleId>
</Title>
<Count>{item.nodes.length}</Count>
<IconButton onClick={(event) => toggleOpen(event, type, item)}>
<Icon style={{ transform: `rotate(${selection ? -180 : 0}deg)` }} />
</IconButton>

64
code/addons/a11y/src/manager.test.tsx
View File

@ -10,6 +10,7 @@ import './manager';
vi.mock('storybook/manager-api');
const mockedApi = vi.mocked<api.API>(api as any);
mockedApi.useStorybookApi = vi.fn(() => ({ getSelectedPanel: vi.fn() }));
mockedApi.useAddonState = vi.fn();
const mockedAddons = vi.mocked(api.addons);
const registrationImpl = mockedAddons.register.mock.calls[0][1];
@ -44,21 +45,18 @@ describe('A11yManager', () => {
// when / then
expect(title()).toMatchInlineSnapshot(`
<div>
<Spaced
col={1}
>
<span
style={
{
"display": "inline-block",
"verticalAlign": "middle",
}
}
>
Accessibility
</span>
</Spaced>
<div
style={
{
"alignItems": "center",
"display": "flex",
"gap": 6,
}
}
>
<span>
Accessibility
</span>
</div>
`);
});
@ -77,26 +75,24 @@ describe('A11yManager', () => {
// when / then
expect(title()).toMatchInlineSnapshot(`
<div>
<Spaced
col={1}
<div
style={
{
"alignItems": "center",
"display": "flex",
"gap": 6,
}
}
>
<span>
Accessibility
</span>
<Badge
compact={true}
status="neutral"
>
<span
style={
{
"display": "inline-block",
"verticalAlign": "middle",
}
}
>
Accessibility
</span>
<Badge
status="neutral"
>
3
</Badge>
</Spaced>
3
</Badge>
</div>
`);
});

21
code/addons/a11y/src/manager.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Badge, Spaced } from 'storybook/internal/components';
import { Badge } from 'storybook/internal/components';
import { addons, types, useAddonState } from 'storybook/manager-api';
import { addons, types, useAddonState, useStorybookApi } from 'storybook/manager-api';
import { A11YPanel } from './components/A11YPanel';
import type { Results } from './components/A11yContext';
@ -11,19 +11,24 @@ import { VisionSimulator } from './components/VisionSimulator';
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
const Title = () => {
const api = useStorybookApi();
const selectedPanel = api.getSelectedPanel();
const [addonState] = useAddonState<Results>(ADDON_ID);
const violationsNb = addonState?.violations?.length || 0;
const incompleteNb = addonState?.incomplete?.length || 0;
const count = violationsNb + incompleteNb;
const suffix = count === 0 ? '' : <Badge status="neutral">{count}</Badge>;
const suffix =
count === 0 ? null : (
<Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
{count}
</Badge>
);
return (
<div>
<Spaced col={1}>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Accessibility</span>
{suffix}
</Spaced>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>Accessibility</span>
{suffix}
</div>
);
};

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

@ -12,8 +12,6 @@ export interface A11yParameters {
element?: ElementContext;
config?: Spec;
options?: RunOptions;
/** @deprecated Use globals.a11y.manual instead */
manual?: boolean;
disable?: boolean;
test?: A11yTest;
}

15
code/addons/a11y/src/preview.test.tsx
View File

@ -183,21 +183,6 @@ describe('afterEach', () => {
});
});
it('should not run accessibility checks when manual is true', async () => {
const context = createContext({
parameters: {
a11y: {
manual: true,
},
},
});
await experimental_afterEach(context);
expect(mockedRun).not.toHaveBeenCalled();
expect(context.reporting.addReport).not.toHaveBeenCalled();
});
it('should not run accessibility checks when disable is true', async () => {
const context = createContext({
parameters: {

1
code/addons/a11y/src/preview.tsx
View File

@ -18,7 +18,6 @@ export const experimental_afterEach: AfterEach<any> = async ({
const a11yGlobals = globals.a11y;
const shouldRunEnvironmentIndependent =
a11yParameter?.manual !== true &&
a11yParameter?.disable !== true &&
a11yParameter?.test !== 'off' &&
a11yGlobals?.manual !== true;

21
code/core/src/actions/manager.tsx
View File

@ -1,14 +1,16 @@
import React from 'react';
import { Badge, Spaced } from 'storybook/internal/components';
import { Badge } from 'storybook/internal/components';
import { STORY_CHANGED } from 'storybook/internal/core-events';
import { addons, types, useAddonState, useChannel } from 'storybook/manager-api';
import { addons, types, useAddonState, useChannel, useStorybookApi } from 'storybook/manager-api';
import { ADDON_ID, CLEAR_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
import ActionLogger from './containers/ActionLogger';
function Title() {
const api = useStorybookApi();
const selectedPanel = api.getSelectedPanel();
const [{ count }, setCount] = useAddonState(ADDON_ID, { count: 0 });
useChannel({
@ -23,14 +25,17 @@ function Title() {
},
});
const suffix = count === 0 ? '' : <Badge status="neutral">{count}</Badge>;
const suffix =
count === 0 ? null : (
<Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
{count}
</Badge>
);
return (
<div>
<Spaced col={1}>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Actions</span>
{suffix}
</Spaced>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>Actions</span>
{suffix}
</div>
);
}

3
code/core/src/cli/dirs.ts
View File

@ -2,14 +2,13 @@ import { dirname, join } from 'node:path';
import { temporaryDirectory, versions } from 'storybook/internal/common';
import type { JsPackageManager } from 'storybook/internal/common';
import type { SupportedFrameworks } from 'storybook/internal/types';
import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
import downloadTarballDefault from '@ndelangen/get-tarball';
import getNpmTarballUrlDefault from 'get-npm-tarball-url';
import invariant from 'tiny-invariant';
import { externalFrameworks } from './project_types';
import type { SupportedRenderers } from './project_types';
const resolveUsingBranchInstall = async (packageManager: JsPackageManager, request: string) => {
const tempDirectory = await temporaryDirectory();

2
code/core/src/cli/helpers.test.ts
View File

@ -4,12 +4,12 @@ import fsp from 'node:fs/promises';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import type { JsPackageManager } from 'storybook/internal/common';
import type { SupportedRenderers } from 'storybook/internal/types';
import { sep } from 'path';
import { IS_WINDOWS } from '../../../vitest.helpers';
import * as helpers from './helpers';
import type { SupportedRenderers } from './project_types';
import { SupportedLanguage } from './project_types';
const normalizePath = (path: string) => (IS_WINDOWS ? path.replace(/\//g, sep) : path);

5
code/core/src/cli/helpers.ts
View File

@ -3,10 +3,10 @@ import { cp, readFile, writeFile } from 'node:fs/promises';
import { join, resolve } from 'node:path';
import {
frameworkToRenderer as CoreFrameworkToRenderer,
type JsPackageManager,
type PackageJson,
type PackageJsonWithDepsAndDevDeps,
frameworkToRenderer,
} from 'storybook/internal/common';
import { versions as storybookMonorepoPackages } from 'storybook/internal/common';
import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
@ -142,9 +142,6 @@ type CopyTemplateFilesOptions = {
features: string[];
};
/** @deprecated Please use `frameworkToRenderer` from `storybook/internal/common` instead */
export const frameworkToRenderer = CoreFrameworkToRenderer;
export const frameworkToDefaultBuilder: Record<
SupportedFrameworks,
CoreBuilder | CommunityBuilder

8
code/core/src/cli/project_types.ts
View File

@ -1,7 +1,4 @@
import type {
SupportedRenderers as CoreSupportedRenderers,
SupportedFrameworks,
} from 'storybook/internal/types';
import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
import { minVersion, validRange } from 'semver';
@ -32,9 +29,6 @@ export const externalFrameworks: ExternalFramework[] = [
},
];
/** @deprecated Please use `SupportedRenderers` from `storybook/internal/types` instead */
export type SupportedRenderers = CoreSupportedRenderers;
export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
'react',
'react-native',

28
code/core/src/component-testing/components/PanelTitle.tsx
View File

@ -1,24 +1,30 @@
import React from 'react';
import { Badge, Spaced } from 'storybook/internal/components';
import { Badge } from 'storybook/internal/components';
import { useAddonState } from 'storybook/manager-api';
import { useAddonState, useStorybookApi } from 'storybook/manager-api';
import { ADDON_ID } from '../constants';
import { ADDON_ID, PANEL_ID } from '../constants';
export function PanelTitle() {
const api = useStorybookApi();
const selectedPanel = api.getSelectedPanel();
const [addonState = {}] = useAddonState(ADDON_ID);
const { hasException, interactionsCount } = addonState as any;
return (
<div>
<Spaced col={1}>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Component tests</span>
{interactionsCount && !hasException ? (
<Badge status="neutral">{interactionsCount}</Badge>
) : null}
{hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
</Spaced>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>Component tests</span>
{interactionsCount && !hasException ? (
<Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
{interactionsCount}
</Badge>
) : null}
{hasException ? (
<Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'negative'}>
{interactionsCount}
</Badge>
) : null}
</div>
);
}

5
code/core/src/components/components/Badge/Badge.stories.tsx
View File

@ -10,8 +10,13 @@ export default meta;
type Story = StoryObj<typeof meta>;
export const Default = { args: { children: 'Default' } } satisfies Story;
export const Active = { args: { status: 'active', children: 'Active' } } satisfies Story;
export const Positive = { args: { status: 'positive', children: 'Positive' } } satisfies Story;
export const Negative = { args: { status: 'negative', children: 'Negative' } } satisfies Story;
export const Neutral = { args: { status: 'neutral', children: 'Neutral' } } satisfies Story;
export const Warning = { args: { status: 'warning', children: 'Warning' } } satisfies Story;
export const Critical = { args: { status: 'critical', children: 'Critical' } } satisfies Story;
export const Compact = {
args: { compact: true, status: 'neutral', children: '12' },
} satisfies Story;

28
code/core/src/components/components/Badge/Badge.tsx
View File

@ -4,14 +4,16 @@ import { transparentize } from 'polished';
import { styled } from 'storybook/theming';
const BadgeWrapper = styled.div<BadgeProps>(
({ theme }) => ({
display: 'inline-block',
fontSize: 11,
lineHeight: '12px',
alignSelf: 'center',
padding: '4px 10px',
borderRadius: '3em',
({ theme, compact }) => ({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: theme.typography.size.s1,
fontWeight: theme.typography.weight.bold,
lineHeight: '12px',
minWidth: 20,
borderRadius: 20,
padding: compact ? '4px 7px' : '4px 10px',
}),
{
svg: {
@ -56,7 +58,7 @@ const BadgeWrapper = styled.div<BadgeProps>(
case 'neutral': {
return {
color: theme.textMutedColor,
background: theme.background.app,
background: theme.base === 'light' ? theme.background.app : theme.barBg,
boxShadow: `inset 0 0 0 1px ${transparentize(0.8, theme.textMutedColor)}`,
};
}
@ -70,6 +72,13 @@ const BadgeWrapper = styled.div<BadgeProps>(
: 'none',
};
}
case 'active': {
return {
color: theme.color.secondary,
background: theme.background.hoverable,
boxShadow: `inset 0 0 0 1px ${transparentize(0.9, theme.color.secondary)}`,
};
}
default: {
return {};
}
@ -78,7 +87,8 @@ const BadgeWrapper = styled.div<BadgeProps>(
);
export interface BadgeProps {
status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
compact?: boolean;
status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical' | 'active';
children?: React.ReactNode;
}

93
code/core/src/components/components/Button/Button.deprecated.stories.tsx
View File

@ -1,93 +0,0 @@
import React from 'react';
import { LinkIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Form } from '../form';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'Button (Deprecated)',
component: Button,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Default = { args: { children: 'Default' } };
export const FormButton: Story = {
render: (args) => <Form.Button {...args} />,
args: { children: 'Form.Button' },
};
export const Primary: Story = { args: { primary: true, children: 'Primary' } };
export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
export const Tertiary: Story = { args: { tertiary: true, children: 'Tertiary' } };
export const Gray: Story = { args: { gray: true, children: 'Gray' } };
export const Outline: Story = { args: { outline: true, children: 'Outline' } };
export const OutlinePrimary: Story = {
args: { outline: true, primary: true, children: 'Outline Primary' },
};
export const OutlineSecondary: Story = {
args: { outline: true, secondary: true, children: 'Outline Secondary' },
};
export const OutlineTertiary: Story = {
args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
};
export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
export const DisabledPrimary: Story = {
args: { disabled: true, primary: true, children: 'Disabled Priary' },
};
export const DisabledSecondary: Story = {
args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
};
export const DisabledTertiary: Story = {
args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
};
export const DisabledGray: Story = {
args: { disabled: true, gray: true, children: 'Disabled Gray' },
};
export const Small: Story = { args: { small: true, children: 'Small' } };
export const SmallPrimary: Story = {
args: { small: true, primary: true, children: 'Small Priary' },
};
export const SmallSecondary: Story = {
args: { small: true, secondary: true, children: 'Small Secondary' },
};
export const SmallTertiary: Story = {
args: { small: true, tertiary: true, children: 'Small Tertiary' },
};
export const SmallGray: Story = {
args: { small: true, gray: true, children: 'Small Gray' },
};
export const IsLink: Story = {
args: { isLink: true, children: 'Button as a link' },
};
export const IconPrimary: Story = {
args: {
primary: true,
containsIcon: true,
title: 'link',
children: <LinkIcon />,
},
};
export const IconOutline: Story = {
args: { outline: true, containsIcon: true, title: 'link', children: <LinkIcon /> },
};
export const IconOutlineSmall: Story = {
args: {
outline: true,
containsIcon: true,
small: true,
title: 'link',
children: <LinkIcon />,
},
};

67
code/core/src/components/components/Button/Button.tsx
View File

@ -1,8 +1,6 @@
import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
import React, { forwardRef, useEffect, useState } from 'react';
import { deprecate } from 'storybook/internal/client-logger';
import { Slot } from '@radix-ui/react-slot';
import { darken, lighten, rgba, transparentize } from 'polished';
import { isPropValid, styled } from 'storybook/theming';
@ -16,25 +14,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
disabled?: boolean;
active?: boolean;
animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
/** @deprecated Use {@link asChild} instead. This will be removed in Storybook 9.0 */
isLink?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
primary?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
secondary?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
tertiary?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
gray?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
inForm?: boolean;
/** @deprecated Use {@link size} instead. This will be removed in Storybook 9.0 */
small?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
outline?: boolean;
/** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
containsIcon?: boolean;
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@ -54,15 +33,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
) => {
let Comp: 'button' | 'a' | typeof Slot = 'button';
if (props.isLink) {
Comp = 'a';
}
if (asChild) {
Comp = Slot;
}
let localVariant = variant;
let localSize = size;
const [isAnimating, setIsAnimating] = useState(false);
@ -86,48 +59,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
return () => clearTimeout(timer);
}, [isAnimating]);
// Match the old API with the new API.
// TODO: Remove this after 9.0.
if (props.primary) {
localVariant = 'solid';
localSize = 'medium';
}
// Match the old API with the new API.
// TODO: Remove this after 9.0.
if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
localVariant = 'outline';
localSize = 'medium';
}
if (
props.small ||
props.isLink ||
props.primary ||
props.secondary ||
props.tertiary ||
props.gray ||
props.outline ||
props.inForm ||
props.containsIcon
) {
const buttonContent = React.Children.toArray(props.children).filter(
(e) => typeof e === 'string' && e !== ''
);
deprecate(
`Use of deprecated props in the button ${
buttonContent.length > 0 ? `"${buttonContent.join(' ')}"` : 'component'
} detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components`
);
}
return (
<StyledButton
as={Comp}
ref={ref}
variant={localVariant}
size={localSize}
variant={variant}
size={size}
padding={padding}
disabled={disabled}
active={active}

7
code/core/src/components/components/bar/bar.tsx
View File

@ -18,7 +18,7 @@ export const Side = styled.div<SideProps>(
whiteSpace: 'nowrap',
flexBasis: 'auto',
marginLeft: 3,
marginRight: 3,
marginRight: 10,
},
({ scrollable }) => (scrollable ? { flexShrink: 0 } : {}),
({ left }) =>
@ -32,10 +32,7 @@ export const Side = styled.div<SideProps>(
({ right }) =>
right
? {
marginLeft: 30,
'& > *': {
marginRight: 4,
},
gap: 6,
}
: {}
);

20
code/core/src/components/components/bar/button.tsx
View File

@ -132,23 +132,3 @@ export interface IconButtonProps {
active?: boolean;
disabled?: boolean;
}
const IconPlaceholder = styled.div(({ theme }) => ({
width: 14,
height: 14,
backgroundColor: theme.appBorderColor,
animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
}));
const IconButtonSkeletonWrapper = styled.div({
marginTop: 6,
padding: 7,
height: 28,
});
/** @deprecated This component will be removed in Storybook 9.0 */
export const IconButtonSkeleton = () => (
<IconButtonSkeletonWrapper>
<IconPlaceholder />
</IconButtonSkeletonWrapper>
);

5
code/core/src/components/index.ts
View File

@ -67,15 +67,12 @@ export { default as ListItem } from './components/tooltip/ListItem';
// Toolbar and subcomponents
export { Tabs, TabsState, TabBar, TabWrapper } from './components/tabs/tabs';
export { EmptyTabContent } from './components/tabs/EmptyTabContent';
export { IconButtonSkeleton, TabButton } from './components/bar/button';
export { TabButton } from './components/bar/button';
export { Separator, interleaveSeparators } from './components/bar/separator';
export { Bar, FlexBar } from './components/bar/bar';
export { AddonPanel } from './components/addon-panel/addon-panel';
// Graphics
export type { IconsProps } from './components/icon/icon';
export { Icons, Symbols } from './components/icon/icon';
export { icons } from './components/icon/icon';
export { StorybookLogo } from './brand/StorybookLogo';
export { StorybookIcon } from './brand/StorybookIcon';

35
code/core/src/controls/manager.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
import { AddonPanel, Badge } from 'storybook/internal/components';
import type {
ResponseData,
SaveStoryRequestPayload,
@ -9,26 +9,39 @@ import type {
import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
import type { Args } from 'storybook/internal/csf';
import { FailedIcon, PassedIcon } from '@storybook/icons';
import { dequal as deepEqual } from 'dequal';
import { addons, experimental_requestResponse, types, useArgTypes } from 'storybook/manager-api';
import {
addons,
experimental_requestResponse,
types,
useArgTypes,
useStorybookApi,
} from 'storybook/manager-api';
import { color } from 'storybook/theming';
import { ControlsPanel } from './components/ControlsPanel';
import { ADDON_ID, PARAM_KEY } from './constants';
function Title() {
const api = useStorybookApi();
const selectedPanel = api.getSelectedPanel();
const rows = useArgTypes();
const controlsCount = Object.values(rows).filter(
(argType) => argType?.control && !argType?.table?.disable
).length;
const suffix = controlsCount === 0 ? '' : <Badge status="neutral">{controlsCount}</Badge>;
const suffix =
controlsCount === 0 ? null : (
<Badge compact status={selectedPanel === ADDON_ID ? 'active' : 'neutral'}>
{controlsCount}
</Badge>
);
return (
<div>
<Spaced col={1}>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Controls</span>
{suffix}
</Spaced>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>Controls</span>
{suffix}
</div>
);
}
@ -71,7 +84,7 @@ export default addons.register(ADDON_ID, (api) => {
api.addNotification({
id: 'save-story-success',
icon: { name: 'passed', color: color.positive },
icon: <PassedIcon color={color.positive} />,
content: {
headline: 'Story saved',
subHeadline: (
@ -85,7 +98,7 @@ export default addons.register(ADDON_ID, (api) => {
} catch (error: any) {
api.addNotification({
id: 'save-story-error',
icon: { name: 'failed', color: color.negative },
icon: <FailedIcon color={color.negative} />,
content: {
headline: 'Failed to save story',
subHeadline:
@ -116,7 +129,7 @@ export default addons.register(ADDON_ID, (api) => {
api.addNotification({
id: 'save-story-success',
icon: { name: 'passed', color: color.positive },
icon: <PassedIcon color={color.positive} />,
content: {
headline: 'Story created',
subHeadline: (

3
code/core/src/core-events/index.ts
View File

@ -89,8 +89,6 @@ enum events {
TESTING_MODULE_CRASH_REPORT = 'testingModuleCrashReport',
TESTING_MODULE_PROGRESS_REPORT = 'testingModuleProgressReport',
TESTING_MODULE_RUN_REQUEST = 'testingModuleRunRequest',
/** @deprecated Use TESTING_MODULE_RUN_REQUEST instead */
TESTING_MODULE_RUN_ALL_REQUEST = 'testingModuleRunAllRequest',
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST = 'testingModuleCancelTestRunRequest',
TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE = 'testingModuleCancelTestRunResponse',
}
@ -160,7 +158,6 @@ export const {
TESTING_MODULE_CRASH_REPORT,
TESTING_MODULE_PROGRESS_REPORT,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_RUN_ALL_REQUEST,
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE,
} = events;

13
code/core/src/core-server/build-index.test.ts
View File

@ -10,6 +10,19 @@ describe('buildIndex', () => {
expect(index).toMatchInlineSnapshot(`
{
"entries": {
"my-component-a--docs": {
"id": "my-component-a--docs",
"importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/A.stories.jsx",
"name": "Docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "A",
"type": "docs",
},
"my-component-a--story-one": {
"componentPath": undefined,
"id": "my-component-a--story-one",

201
code/core/src/core-server/utils/StoryIndexGenerator.test.ts
View File

@ -40,7 +40,7 @@ const options: StoryIndexGeneratorOptions = {
configDir: join(__dirname, '__mockdata__'),
workingDir: join(__dirname, '__mockdata__'),
indexers: [csfIndexer],
docs: { defaultName: 'docs', autodocs: false },
docs: { defaultName: 'docs' },
};
describe('StoryIndexGenerator', () => {
@ -121,6 +121,19 @@ describe('StoryIndexGenerator', () => {
expect(storyIndex).toMatchInlineSnapshot(`
{
"entries": {
"f--docs": {
"id": "f--docs",
"importPath": "./src/F.story.ts",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "F",
"type": "docs",
},
"f--story-one": {
"componentPath": undefined,
"id": "f--story-one",
@ -154,6 +167,19 @@ describe('StoryIndexGenerator', () => {
expect(storyIndex).toMatchInlineSnapshot(`
{
"entries": {
"stories--docs": {
"id": "stories--docs",
"importPath": "./src/stories.ts",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "stories",
"type": "docs",
},
"stories--story-one": {
"componentPath": undefined,
"id": "stories--story-one",
@ -282,6 +308,19 @@ describe('StoryIndexGenerator', () => {
"title": "A",
"type": "story",
},
"b--docs": {
"id": "b--docs",
"importPath": "./src/B.stories.ts",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "B",
"type": "docs",
},
"b--story-one": {
"componentPath": undefined,
"id": "b--story-one",
@ -331,6 +370,19 @@ describe('StoryIndexGenerator', () => {
"title": "componentPath/package",
"type": "story",
},
"d--docs": {
"id": "d--docs",
"importPath": "./src/D.stories.jsx",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "D",
"type": "docs",
},
"d--story-one": {
"componentPath": undefined,
"id": "d--story-one",
@ -431,6 +483,19 @@ describe('StoryIndexGenerator', () => {
"title": "first-nested/deeply/Features",
"type": "story",
},
"h--docs": {
"id": "h--docs",
"importPath": "./src/H.stories.mjs",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "H",
"type": "docs",
},
"h--story-one": {
"componentPath": undefined,
"id": "h--story-one",
@ -787,37 +852,28 @@ describe('StoryIndexGenerator', () => {
await generator.initialize();
expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
[
"a--docs",
"a--story-one",
"b--docs",
"b--story-one",
"example-button--docs",
"example-button--story-one",
"d--docs",
"d--story-one",
"h--docs",
"h--story-one",
"componentpath-extension--docs",
"componentpath-extension--story-one",
"componentpath-noextension--docs",
"componentpath-noextension--story-one",
"componentpath-package--docs",
"componentpath-package--story-one",
"first-nested-deeply-f--docs",
"first-nested-deeply-f--story-one",
"first-nested-deeply-features--docs",
"first-nested-deeply-features--with-play",
"first-nested-deeply-features--with-story-fn",
"first-nested-deeply-features--with-render",
"first-nested-deeply-features--with-test",
"first-nested-deeply-features--with-csf-1",
"nested-button--docs",
"nested-button--story-one",
"second-nested-g--docs",
"second-nested-g--story-one",
]
`);
[
"a--story-one",
"b--docs",
"b--story-one",
"example-button--story-one",
"d--docs",
"d--story-one",
"h--docs",
"h--story-one",
"componentpath-extension--story-one",
"componentpath-noextension--story-one",
"componentpath-package--story-one",
"first-nested-deeply-f--story-one",
"first-nested-deeply-features--with-play",
"first-nested-deeply-features--with-story-fn",
"first-nested-deeply-features--with-render",
"first-nested-deeply-features--with-test",
"first-nested-deeply-features--with-csf-1",
"nested-button--story-one",
"second-nested-g--story-one",
]
`);
});
it('generates an entry for every CSF file when projectTags contains autodocs', async () => {
@ -864,21 +920,6 @@ describe('StoryIndexGenerator', () => {
`);
});
it('adds the autodocs tag to the autogenerated docs entries when docsOptions.autodocs = true', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|mjs|jsx)',
options
);
const generator = new StoryIndexGenerator([specifier], autodocsTrueOptions);
await generator.initialize();
const index = await generator.getIndex();
expect(index.entries['first-nested-deeply-f--docs'].tags).toEqual(
expect.arrayContaining(['autodocs'])
);
});
it('adds the autodocs tag to the autogenerated docs entries when projectTags contains autodocs', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|mjs|jsx)',
@ -1095,7 +1136,6 @@ describe('StoryIndexGenerator', () => {
"tags": [
"dev",
"test",
"autodocs",
"component-tag",
"story-tag",
"attached-mdx",
@ -1111,7 +1151,6 @@ describe('StoryIndexGenerator', () => {
"tags": [
"dev",
"test",
"autodocs",
"component-tag",
"story-tag",
],
@ -1572,6 +1611,19 @@ describe('StoryIndexGenerator', () => {
"title": "A",
"type": "story",
},
"b--docs": {
"id": "b--docs",
"importPath": "./src/B.stories.ts",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "B",
"type": "docs",
},
"b--story-one": {
"componentPath": undefined,
"id": "b--story-one",
@ -1815,30 +1867,33 @@ describe('StoryIndexGenerator', () => {
});
expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
[
"docs2-yabbadabbadooo--docs",
"d--story-one",
"b--story-one",
"nested-button--story-one",
"a--metaof",
"a--second-docs",
"a--story-one",
"second-nested-g--story-one",
"componentreference--docs",
"notitle--docs",
"example-button--story-one",
"h--story-one",
"componentpath-extension--story-one",
"componentpath-noextension--story-one",
"componentpath-package--story-one",
"first-nested-deeply-f--story-one",
"first-nested-deeply-features--with-play",
"first-nested-deeply-features--with-story-fn",
"first-nested-deeply-features--with-render",
"first-nested-deeply-features--with-test",
"first-nested-deeply-features--with-csf-1",
]
`);
[
"docs2-yabbadabbadooo--docs",
"d--docs",
"d--story-one",
"b--docs",
"b--story-one",
"nested-button--story-one",
"a--metaof",
"a--second-docs",
"a--story-one",
"second-nested-g--story-one",
"componentreference--docs",
"notitle--docs",
"example-button--story-one",
"h--docs",
"h--story-one",
"componentpath-extension--story-one",
"componentpath-noextension--story-one",
"componentpath-package--story-one",
"first-nested-deeply-f--story-one",
"first-nested-deeply-features--with-play",
"first-nested-deeply-features--with-story-fn",
"first-nested-deeply-features--with-render",
"first-nested-deeply-features--with-test",
"first-nested-deeply-features--with-csf-1",
]
`);
});
});

10
code/core/src/core-server/utils/StoryIndexGenerator.ts
View File

@ -400,7 +400,7 @@ export class StoryIndexGenerator {
// a) autodocs is globally enabled
// b) we have autodocs enabled for this file
const hasAutodocsTag = entries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
const createDocEntry = hasAutodocsTag && !!this.options.docs.autodocs;
const createDocEntry = hasAutodocsTag;
if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
const name = this.options.docs.defaultName ?? 'Docs';
@ -592,10 +592,7 @@ export class StoryIndexGenerator {
}
// If you link a file to a tagged CSF file, you have probably made a mistake
if (
worseEntry.tags?.includes(AUTODOCS_TAG) &&
!(this.options.docs.autodocs === true || projectTags?.includes(AUTODOCS_TAG))
) {
if (worseEntry.tags?.includes(AUTODOCS_TAG) && !projectTags?.includes(AUTODOCS_TAG)) {
throw new IndexingError(
`You created a component docs page for '${worseEntry.title}', but also tagged the CSF file with '${AUTODOCS_TAG}'. This is probably a mistake.`,
[betterEntry.importPath, worseEntry.importPath]
@ -768,7 +765,6 @@ export class StoryIndexGenerator {
getProjectTags(previewCode?: string) {
let projectTags = [] as Tag[];
const defaultTags = ['dev', 'test'];
const extraTags = this.options.docs.autodocs === true ? [AUTODOCS_TAG] : [];
if (previewCode) {
try {
const projectAnnotations = loadConfig(previewCode).parse();
@ -789,7 +785,7 @@ export class StoryIndexGenerator {
`);
}
}
return [...defaultTags, ...projectTags, ...extraTags];
return [...defaultTags, ...projectTags];
}
// Get the story file names in "imported order"

107
code/core/src/core-server/utils/__tests__/index-extraction.test.ts
View File

@ -14,7 +14,7 @@ const options: StoryIndexGeneratorOptions = {
configDir: join(__dirname, '..', '__mockdata__'),
workingDir: join(__dirname, '..', '__mockdata__'),
indexers: [],
docs: { defaultName: 'docs', autodocs: false },
docs: { defaultName: 'docs' },
};
describe('story extraction', () => {
@ -392,57 +392,6 @@ describe('story extraction', () => {
});
});
describe('docs entries from story extraction', () => {
it('adds docs entry when autodocs is globally enabled', async () => {
const relativePath = './src/A.stories.js';
const absolutePath = join(options.workingDir, relativePath);
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
const generator = new StoryIndexGenerator([specifier], {
...options,
docs: { defaultName: 'docs', autodocs: true },
indexers: [
{
test: /\.stories\.(m?js|ts)x?$/,
createIndex: async (fileName) => [
{
exportName: 'StoryOne',
__id: 'a--story-one',
name: 'Story One',
title: 'A',
tags: ['story-tag-from-indexer'],
importPath: fileName,
type: 'story',
},
],
},
],
});
const result = await generator.extractStories(specifier, absolutePath);
expect(result).toMatchInlineSnapshot(`
{
"dependents": [],
"entries": [
{
"componentPath": undefined,
"extra": {
"metaId": undefined,
"stats": {},
},
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"tags": [
"story-tag-from-indexer",
],
"title": "A",
"type": "story",
},
],
"type": "stories",
}
`);
});
it(`adds docs entry when autodocs is "tag" and an entry has the "${AUTODOCS_TAG}" tag`, async () => {
const relativePath = './src/A.stories.js';
const absolutePath = join(options.workingDir, relativePath);
@ -450,7 +399,7 @@ describe('docs entries from story extraction', () => {
const generator = new StoryIndexGenerator([specifier], {
...options,
docs: { defaultName: 'docs', autodocs: 'tag' },
docs: { defaultName: 'docs' },
indexers: [
{
test: /\.stories\.(m?js|ts)x?$/,
@ -507,56 +456,4 @@ describe('docs entries from story extraction', () => {
}
`);
});
it(`DOES NOT adds docs entry when autodocs is false and an entry has the "${AUTODOCS_TAG}" tag`, async () => {
const relativePath = './src/A.stories.js';
const absolutePath = join(options.workingDir, relativePath);
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
const generator = new StoryIndexGenerator([specifier], {
...options,
docs: { defaultName: 'docs', autodocs: false },
indexers: [
{
test: /\.stories\.(m?js|ts)x?$/,
createIndex: async (fileName) => [
{
exportName: 'StoryOne',
__id: 'a--story-one',
name: 'Story One',
title: 'A',
tags: [AUTODOCS_TAG, 'story-tag-from-indexer'],
importPath: fileName,
type: 'story',
},
],
},
],
});
const result = await generator.extractStories(specifier, absolutePath);
expect(result).toMatchInlineSnapshot(`
{
"dependents": [],
"entries": [
{
"componentPath": undefined,
"extra": {
"metaId": undefined,
"stats": {},
},
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"tags": [
"autodocs",
"story-tag-from-indexer",
],
"title": "A",
"type": "story",
},
],
"type": "stories",
}
`);
});
});

41
code/core/src/core-server/utils/stories-json.test.ts
View File

@ -47,7 +47,7 @@ const getInitializedStoryIndexGenerator = async (
indexers: [csfIndexer],
configDir: workingDir,
workingDir,
docs: { defaultName: 'docs', autodocs: false },
docs: { defaultName: 'docs' },
...overrides,
};
const generator = new StoryIndexGenerator(inputNormalizedStories, options);
@ -155,6 +155,19 @@ describe('useStoriesJson', () => {
"title": "A",
"type": "story",
},
"b--docs": {
"id": "b--docs",
"importPath": "./src/B.stories.ts",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "B",
"type": "docs",
},
"b--story-one": {
"id": "b--story-one",
"importPath": "./src/B.stories.ts",
@ -203,6 +216,19 @@ describe('useStoriesJson', () => {
"title": "componentPath/package",
"type": "story",
},
"d--docs": {
"id": "d--docs",
"importPath": "./src/D.stories.jsx",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "D",
"type": "docs",
},
"d--story-one": {
"id": "d--story-one",
"importPath": "./src/D.stories.jsx",
@ -334,6 +360,19 @@ describe('useStoriesJson', () => {
"title": "first-nested/deeply/Features",
"type": "story",
},
"h--docs": {
"id": "h--docs",
"importPath": "./src/H.stories.mjs",
"name": "docs",
"storiesImports": [],
"tags": [
"dev",
"test",
"autodocs",
],
"title": "H",
"type": "docs",
},
"h--story-one": {
"id": "h--story-one",
"importPath": "./src/H.stories.mjs",

10
code/core/src/csf-tools/CsfFile.ts
View File

@ -278,16 +278,6 @@ export class CsfFile {
imports: string[];
/** @deprecated Use `_options.fileName` instead */
get _fileName() {
return this._options.fileName;
}
/** @deprecated Use `_options.makeTitle` instead */
get _makeTitle() {
return this._options.makeTitle;
}
constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
this._ast = ast;
this._file = file;

2
code/core/src/csf/story.ts
View File

@ -405,8 +405,6 @@ export interface ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs
*/
beforeAll?: BeforeAll;
/** @deprecated Project `globals` renamed to `initiaGlobals` */
globals?: Globals;
initialGlobals?: Globals;
globalTypes?: GlobalTypes;
applyDecorators?: DecoratorApplicator<TRenderer, Args>;

6
code/core/src/manager-api/lib/addons.ts
View File

@ -8,8 +8,6 @@ import type {
Addon_Elements,
Addon_Loaders,
Addon_PageType,
Addon_SidebarBottomType,
Addon_SidebarTopType,
Addon_TestProviderType,
Addon_Type,
Addon_Types,
@ -70,8 +68,6 @@ export class AddonStore {
T extends
| Addon_Types
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_SIDEBAR_TOP
| Addon_TypesEnum.experimental_TEST_PROVIDER,
>(type: T): Addon_Collection<Addon_TypesMapping[T]> | any {
if (!this.elements[type]) {
@ -91,8 +87,6 @@ export class AddonStore {
id: string,
addon:
| Addon_BaseType
| Omit<Addon_SidebarTopType, 'id'>
| Omit<Addon_SidebarBottomType, 'id'>
| Omit<Addon_TestProviderType, 'id'>
| Omit<Addon_PageType, 'id'>
| Omit<Addon_WrapperType, 'id'>

4
code/core/src/manager-api/modules/addons.ts
View File

@ -29,9 +29,7 @@ export interface SubAPI {
T extends
| Addon_Types
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_TEST_PROVIDER
| Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types,
| Addon_TypesEnum.experimental_TEST_PROVIDER,
>(
type: T
) => Addon_Collection<Addon_TypesMapping[T]>;

4
code/core/src/manager-api/modules/experimental_testmodule.ts
View File

@ -1,6 +1,5 @@
import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_RUN_ALL_REQUEST,
TESTING_MODULE_RUN_REQUEST,
type TestProviderId,
type TestProviderState,
@ -98,9 +97,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => {
fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload);
// For backwards compatibility:
fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id });
return () => api.cancelTestProvider(id);
}

28
code/core/src/manager-api/root.tsx
View File

@ -88,7 +88,6 @@ export type State = layout.SubState &
whatsnew.SubState &
RouterData &
API_OptionsData &
DeprecatedState &
Other;
export type API = addons.SubAPI &
@ -107,15 +106,6 @@ export type API = addons.SubAPI &
whatsnew.SubAPI &
Other;
interface DeprecatedState {
/** @deprecated Use index */
storiesHash: API_IndexHash;
/** @deprecated Use previewInitialized */
storiesConfigured: boolean;
/** @deprecated Use indexError */
storiesFailed?: Error;
}
interface Other {
[key: string]: any;
}
@ -299,23 +289,7 @@ function ManagerConsumer<P = Combo>({
export function useStorybookState(): State {
const { state } = useContext(ManagerContext);
return {
...state,
// deprecated fields for back-compat
get storiesHash() {
deprecate('state.storiesHash is deprecated, please use state.index');
return this.index || {};
},
get storiesConfigured() {
deprecate('state.storiesConfigured is deprecated, please use state.previewInitialized');
return this.previewInitialized;
},
get storiesFailed() {
deprecate('state.storiesFailed is deprecated, please use state.indexError');
return this.indexError;
},
};
return state;
}
export function useStorybookApi(): API {
const { api } = useContext(ManagerContext);

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

@ -274,20 +274,3 @@ export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
},
},
};
export const WithOldIconFormat: Story = {
args: {
notification: {
id: '13',
onClear,
content: {
headline: 'Storybook notifications has a accessibility icon it can be any color!',
},
icon: {
name: 'accessibility',
color: 'gold',
},
link: undefined,
},
},
};

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

@ -1,15 +1,14 @@
import type { FC, SyntheticEvent } from 'react';
import React, { useCallback, useEffect, useRef } from 'react';
import type { IconsProps } from 'storybook/internal/components';
import { IconButton, Icons } from 'storybook/internal/components';
import { IconButton } from 'storybook/internal/components';
import { Link } from 'storybook/internal/router';
import { CloseAltIcon } from '@storybook/icons';
import { transparentize } from 'polished';
import { type State } from 'storybook/manager-api';
import { keyframes, styled, useTheme } from 'storybook/theming';
import { keyframes, styled } from 'storybook/theming';
import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
@ -133,31 +132,17 @@ const SubHeadline = styled.div(({ theme }) => ({
const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
icon,
content: { headline, subHeadline },
}) => {
const theme = useTheme();
const defaultColor = theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight;
return (
<>
{!icon || (
<NotificationIconWrapper>
{React.isValidElement(icon)
? icon
: typeof icon === 'object' &&
'name' in icon && (
<Icons icon={icon.name as IconsProps['icon']} color={icon.color || defaultColor} />
)}
</NotificationIconWrapper>
)}
<NotificationTextWrapper>
<Headline title={headline} hasIcon={!!icon}>
{headline}
</Headline>
{subHeadline && <SubHeadline>{subHeadline}</SubHeadline>}
</NotificationTextWrapper>
</>
);
};
}) => (
<>
{!icon || <NotificationIconWrapper>{icon}</NotificationIconWrapper>}
<NotificationTextWrapper>
<Headline title={headline} hasIcon={!!icon}>
{headline}
</Headline>
{subHeadline && <SubHeadline>{subHeadline}</SubHeadline>}
</NotificationTextWrapper>
</>
);
const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
width: 28,

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

@ -31,7 +31,7 @@ const menuItems = [
];
export const MenuHighlighted: Story = () => (
<Heading menuHighlighted menu={menuItems} isLoading={false} extra={[]} />
<Heading menuHighlighted menu={menuItems} isLoading={false} />
);
export const standardData = { menu: menuItems };
@ -50,7 +50,7 @@ export const Standard: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -69,7 +69,7 @@ export const StandardNoLink: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -88,7 +88,7 @@ export const LinkAndText: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -107,7 +107,7 @@ export const OnlyText: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -126,7 +126,7 @@ export const LongText: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -145,7 +145,7 @@ export const CustomTitle: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -164,7 +164,7 @@ export const CustomBrandImage: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -183,7 +183,7 @@ export const CustomBrandImageTall: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -202,7 +202,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -221,7 +221,7 @@ export const NoBrand: Story = () => {
},
}}
>
<Heading menu={menuItems} isLoading={false} extra={[]} />
<Heading menu={menuItems} isLoading={false} />
</ThemeProvider>
);
};
@ -230,7 +230,6 @@ export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
args: {
menu: menuItems,
skipLinkHref: '#storybook-preview-wrapper',
extra: [],
isLoading: false,
},
globals: { sb_theme: 'light' },

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

@ -2,7 +2,6 @@ import type { ComponentProps, FC } from 'react';
import React from 'react';
import { Button } from 'storybook/internal/components';
import type { Addon_SidebarTopType } from 'storybook/internal/types';
import { styled } from 'storybook/theming';
@ -13,7 +12,6 @@ import { SidebarMenu } from './Menu';
export interface HeadingProps {
menuHighlighted?: boolean;
menu: MenuList;
extra: Addon_SidebarTopType[];
skipLinkHref?: string;
isLoading: boolean;
onMenuClick?: SidebarMenuProps['onClick'];
@ -83,7 +81,6 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
menuHighlighted = false,
menu,
skipLinkHref,
extra,
isLoading,
onMenuClick,
...props
@ -102,7 +99,6 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
<Brand />
</BrandArea>
{isLoading ? null : extra.map(({ id, render: Render }) => <Render key={id} />)}
<SidebarMenu menu={menu} isHighlighted={menuHighlighted} onClick={onMenuClick} />
</HeadingWrapper>
);

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

@ -80,8 +80,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
this Storybook.
</Text>
<div>
{/* TODO: Make sure this button is working without the deprecated props */}
<Button small gray onClick={refresh}>
<Button size="small" variant="outline" onClick={refresh}>
<SyncIcon />
Refresh now
</Button>
@ -92,7 +91,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
<Text>Sign in to browse this Storybook.</Text>
<div>
{/* @ts-expect-error (non strict) */}
<Button small gray onClick={open}>
<Button size="small" variant="outline" onClick={open}>
<LockIcon />
Sign in
</Button>

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

@ -1,6 +1,5 @@
import React from 'react';
import { type Addon_SidebarTopType } from 'storybook/internal/types';
import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
import type { Meta, StoryObj } from '@storybook/react-vite';
@ -68,7 +67,6 @@ const meta = {
args: {
previewInitialized: true,
menu,
extra: [] as Addon_SidebarTopType[],
index: index,
indexJson: {
entries: {

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

@ -7,7 +7,7 @@ import {
TooltipNote,
WithTooltip,
} from 'storybook/internal/components';
import type { API_LoadedRefData, Addon_SidebarTopType, StoryIndex } from 'storybook/internal/types';
import type { API_LoadedRefData, StoryIndex } from 'storybook/internal/types';
import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
import { global } from '@storybook/global';
@ -117,7 +117,6 @@ export interface SidebarProps extends API_LoadedRefData {
refs: State['refs'];
allStatuses: StatusesByStoryIdAndTypeId;
menu: any[];
extra: Addon_SidebarTopType[];
storyId?: string;
refId?: string;
menuHighlighted?: boolean;
@ -137,7 +136,6 @@ export const Sidebar = React.memo(function Sidebar({
allStatuses,
previewInitialized,
menu,
extra,
menuHighlighted = false,
enableShortcuts = true,
isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
@ -162,7 +160,6 @@ export const Sidebar = React.memo(function Sidebar({
className="sidebar-header"
menuHighlighted={menuHighlighted}
menu={menu}
extra={extra}
skipLinkHref="#storybook-preview-wrapper"
isLoading={isLoading}
onMenuClick={onMenuClick}

10
code/core/src/manager/components/sidebar/__tests__/Sidebar.test.tsx
View File

@ -21,15 +21,7 @@ const factory = (props: Partial<SidebarProps>): RenderResult => {
return render(
<ThemeProvider theme={theme}>
<Sidebar
menu={[]}
index={{}}
previewInitialized
refs={{}}
allStatuses={{}}
extra={[]}
{...props}
/>
<Sidebar menu={[]} index={{}} previewInitialized refs={{}} allStatuses={{}} {...props} />
</ThemeProvider>
);
};

5
code/core/src/manager/container/Sidebar.tsx
View File

@ -46,10 +46,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
const whatsNewNotificationsEnabled =
state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP);
// eslint-disable-next-line react-hooks/exhaustive-deps
const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]);
return {
title: name,
url,
@ -64,7 +60,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
menu,
menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
enableShortcuts,
extra: top,
};
};

6
code/core/src/manager/globals/exports.ts
View File

@ -494,8 +494,6 @@ export default {
'H6',
'HR',
'IconButton',
'IconButtonSkeleton',
'Icons',
'Img',
'LI',
'Link',
@ -514,7 +512,6 @@ export default {
'Span',
'StorybookIcon',
'StorybookLogo',
'Symbols',
'SyntaxHighlighter',
'TT',
'TabBar',
@ -534,7 +531,6 @@ export default {
'components',
'createCopyToClipboardFunction',
'getStoryHref',
'icons',
'interleaveSeparators',
'nameSpaceClassNames',
'resetComponents',
@ -596,7 +592,6 @@ export default {
'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
'TESTING_MODULE_CRASH_REPORT',
'TESTING_MODULE_PROGRESS_REPORT',
'TESTING_MODULE_RUN_ALL_REQUEST',
'TESTING_MODULE_RUN_REQUEST',
'TOGGLE_WHATS_NEW_NOTIFICATIONS',
'UNHANDLED_ERRORS_WHILE_PLAYING',
@ -660,7 +655,6 @@ export default {
'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
'TESTING_MODULE_CRASH_REPORT',
'TESTING_MODULE_PROGRESS_REPORT',
'TESTING_MODULE_RUN_ALL_REQUEST',
'TESTING_MODULE_RUN_REQUEST',
'TOGGLE_WHATS_NEW_NOTIFICATIONS',
'UNHANDLED_ERRORS_WHILE_PLAYING',

2
code/core/src/preview-api/README-preview-web.md
View File

@ -30,7 +30,7 @@ A rendering story goes through these phases:
- `preparing` - (maybe async) import the story file and prepare the story function.
- `loading` - async loaders are running
- `rendering` - the `renderToDOM` function for the framework is running
- `rendering` - the `renderToCanvas` function for the framework is running
- `playing` - the `play` function is running
- `completed` - the story is done.

3
code/core/src/preview-api/modules/preview-web/Preview.tsx
View File

@ -56,9 +56,6 @@ const STORY_INDEX_PATH = './index.json';
export type MaybePromise<T> = Promise<T> | T;
export class Preview<TRenderer extends Renderer> {
/** @deprecated Will be removed in 8.0, please use channel instead */
serverChannel?: Channel;
protected storyStoreValue?: StoryStore<TRenderer>;
renderToCanvas?: RenderToCanvas<TRenderer>;

75
code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
View File

@ -164,7 +164,10 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
// @ts-expect-error Ignore protected property
expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
a: 'c',
});
});
it('emits the SET_GLOBALS event', async () => {
@ -208,7 +211,10 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'url',
one: 1,
});
@ -234,7 +240,10 @@ describe('PreviewWeb', () => {
});
await preview.ready();
expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
// @ts-expect-error Ignore protected property
expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
a: 'b',
});
});
});
@ -895,7 +904,10 @@ describe('PreviewWeb', () => {
emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
// @ts-expect-error Ignore protected property
expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
a: 'b',
});
});
it('passes globals in context to renderToCanvas', async () => {
@ -972,7 +984,8 @@ describe('PreviewWeb', () => {
});
expect(
(preview.storyStore as StoryStore<Renderer> as StoryStore<Renderer>)?.args.get(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer> as StoryStore<Renderer>)?.args.get(
'component-one--a'
)
).toEqual({
@ -1256,7 +1269,8 @@ describe('PreviewWeb', () => {
await waitForRender();
mockChannel.emit.mockClear();
const story = await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
// @ts-expect-error Ignore protected property
const story = await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
storyId: 'component-one--a',
});
preview.renderStoryToElement(story, 'story-element' as any, callbacks, {});
@ -1296,7 +1310,8 @@ describe('PreviewWeb', () => {
await waitForRender();
mockChannel.emit.mockClear();
const story = await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
// @ts-expect-error Ignore protected property
const story = await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
storyId: 'component-one--a',
});
preview.renderStoryToElement(story, 'story-element' as any, callbacks, {
@ -2284,7 +2299,10 @@ describe('PreviewWeb', () => {
updatedArgs: { foo: 'updated' },
});
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'updated',
one: 1,
});
@ -2296,7 +2314,10 @@ describe('PreviewWeb', () => {
});
await waitForSetCurrentStory();
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'updated',
one: 1,
});
@ -2308,7 +2329,10 @@ describe('PreviewWeb', () => {
});
await waitForSetCurrentStory();
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'updated',
one: 1,
});
@ -2877,7 +2901,10 @@ describe('PreviewWeb', () => {
mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
preview.onStoryIndexChanged();
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'url',
one: 1,
});
@ -3327,7 +3354,10 @@ describe('PreviewWeb', () => {
});
await waitForSetCurrentStory();
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'updated',
one: 1,
});
@ -3346,7 +3376,10 @@ describe('PreviewWeb', () => {
});
await waitForSetCurrentStory();
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'updated',
bar: 'edited',
one: 1,
@ -3517,7 +3550,10 @@ describe('PreviewWeb', () => {
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
// @ts-expect-error Ignore protected property
expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
a: 'c',
});
});
});
@ -3566,7 +3602,8 @@ describe('PreviewWeb', () => {
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
// @ts-expect-error Ignore protected property
expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
a: 'edited',
});
});
@ -3594,7 +3631,10 @@ describe('PreviewWeb', () => {
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
await waitForRender();
expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
expect(
// @ts-expect-error Ignore protected property
(preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
).toEqual({
foo: 'a',
one: 1,
global: 'added',
@ -3722,7 +3762,8 @@ describe('PreviewWeb', () => {
componentOneExports.b.play.mockImplementationOnce(async () => gate);
// @ts-expect-error (not strict)
preview.renderStoryToElement(
await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
// @ts-expect-error Ignore protected property
await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
storyId: 'component-one--b',
}),
{} as any,

444
code/core/src/preview-api/modules/store/StoryStore.test.ts
View File

@ -45,7 +45,7 @@ const importFn = vi.fn(async (path) => {
const projectAnnotations: ProjectAnnotations<any> = composeConfigs([
{
globals: { a: 'b' },
initialGlobals: { a: 'b' },
globalTypes: { a: { type: 'string' } },
argTypes: { a: { type: 'string' } },
render: vi.fn(),
@ -684,446 +684,4 @@ describe('StoryStore', () => {
]);
});
});
describe('raw', () => {
it('produces an array of stories', async () => {
const store = new StoryStore(storyIndex, importFn, projectAnnotations);
await store.cacheAllCSFFiles();
expect(store.raw()).toMatchInlineSnapshot(`
[
{
"applyAfterEach": [Function],
"applyBeforeEach": [Function],
"applyLoaders": [Function],
"argTypes": {
"a": {
"name": "a",
"type": {
"name": "string",
},
},
"foo": {
"name": "foo",
"type": {
"name": "string",
},
},
},
"component": undefined,
"componentId": "component-one",
"id": "component-one--a",
"initialArgs": {
"foo": "a",
},
"kind": "Component One",
"moduleExport": {
"args": {
"foo": "a",
},
},
"mount": [Function],
"name": "A",
"originalStoryFn": [MockFunction spy],
"parameters": {
"__isArgsStory": false,
"backgrounds": {
"disable": false,
"grid": {
"cellAmount": 5,
"cellSize": 20,
"opacity": 0.5,
},
},
"fileName": "./src/ComponentOne.stories.js",
"throwPlayFunctionExceptions": false,
},
"playFunction": undefined,
"renderToCanvas": undefined,
"runStep": [Function],
"story": "A",
"storyFn": [Function],
"storyGlobals": {},
"subcomponents": undefined,
"tags": [
"dev",
"test",
],
"testingLibraryRender": undefined,
"title": "Component One",
"unboundStoryFn": [Function],
"undecoratedStoryFn": [Function],
"usesMount": false,
},
{
"applyAfterEach": [Function],
"applyBeforeEach": [Function],
"applyLoaders": [Function],
"argTypes": {
"a": {
"name": "a",
"type": {
"name": "string",
},
},
"foo": {
"name": "foo",
"type": {
"name": "string",
},
},
},
"component": undefined,
"componentId": "component-one",
"id": "component-one--b",
"initialArgs": {
"foo": "b",
},
"kind": "Component One",
"moduleExport": {
"args": {
"foo": "b",
},
},
"mount": [Function],
"name": "B",
"originalStoryFn": [MockFunction spy],
"parameters": {
"__isArgsStory": false,
"backgrounds": {
"disable": false,
"grid": {
"cellAmount": 5,
"cellSize": 20,
"opacity": 0.5,
},
},
"fileName": "./src/ComponentOne.stories.js",
"throwPlayFunctionExceptions": false,
},
"playFunction": undefined,
"renderToCanvas": undefined,
"runStep": [Function],
"story": "B",
"storyFn": [Function],
"storyGlobals": {},
"subcomponents": undefined,
"tags": [
"dev",
"test",
],
"testingLibraryRender": undefined,
"title": "Component One",
"unboundStoryFn": [Function],
"undecoratedStoryFn": [Function],
"usesMount": false,
},
{
"applyAfterEach": [Function],
"applyBeforeEach": [Function],
"applyLoaders": [Function],
"argTypes": {
"a": {
"name": "a",
"type": {
"name": "string",
},
},
"foo": {
"name": "foo",
"type": {
"name": "string",
},
},
},
"component": undefined,
"componentId": "component-two",
"id": "component-two--c",
"initialArgs": {
"foo": "c",
},
"kind": "Component Two",
"moduleExport": {
"args": {
"foo": "c",
},
},
"mount": [Function],
"name": "C",
"originalStoryFn": [MockFunction spy],
"parameters": {
"__isArgsStory": false,
"backgrounds": {
"disable": false,
"grid": {
"cellAmount": 5,
"cellSize": 20,
"opacity": 0.5,
},
},
"fileName": "./src/ComponentTwo.stories.js",
"throwPlayFunctionExceptions": false,
},
"playFunction": undefined,
"renderToCanvas": undefined,
"runStep": [Function],
"story": "C",
"storyFn": [Function],
"storyGlobals": {},
"subcomponents": undefined,
"tags": [
"dev",
"test",
],
"testingLibraryRender": undefined,
"title": "Component Two",
"unboundStoryFn": [Function],
"undecoratedStoryFn": [Function],
"usesMount": false,
},
]
`);
});
});
describe('getSetStoriesPayload', () => {
it('maps stories list to payload correctly', async () => {
const store = new StoryStore(storyIndex, importFn, projectAnnotations);
await store.cacheAllCSFFiles();
expect(store.getSetStoriesPayload()).toMatchInlineSnapshot(`
{
"globalParameters": {},
"globals": {
"a": "b",
},
"kindParameters": {
"Component One": {},
"Component Two": {},
},
"stories": {
"component-one--a": {
"argTypes": {
"a": {
"name": "a",
"type": {
"name": "string",
},
},
"foo": {
"name": "foo",
"type": {
"name": "string",
},
},
},
"args": {
"foo": "a",
},
"component": undefined,
"componentId": "component-one",
"globals": {
"a": "b",
},
"id": "component-one--a",
"initialArgs": {
"foo": "a",
},
"kind": "Component One",
"name": "A",
"parameters": {
"__isArgsStory": false,
"backgrounds": {
"disable": false,
"grid": {
"cellAmount": 5,
"cellSize": 20,
"opacity": 0.5,
},
},
"fileName": "./src/ComponentOne.stories.js",
"throwPlayFunctionExceptions": false,
},
"playFunction": undefined,
"renderToCanvas": undefined,
"story": "A",
"storyGlobals": {},
"subcomponents": undefined,
"tags": [
"dev",
"test",
],
"testingLibraryRender": undefined,
"title": "Component One",
"usesMount": false,
},
"component-one--b": {
"argTypes": {
"a": {
"name": "a",
"type": {
"name": "string",
},
},
"foo": {
"name": "foo",
"type": {
"name": "string",
},
},
},
"args": {
"foo": "b",
},
"component": undefined,
"componentId": "component-one",
"globals": {
"a": "b",
},
"id": "component-one--b",
"initialArgs": {
"foo": "b",
},
"kind": "Component One",
"name": "B",
"parameters": {
"__isArgsStory": false,
"backgrounds": {
"disable": false,
"grid": {
"cellAmount": 5,
"cellSize": 20,
"opacity": 0.5,
},
},
"fileName": "./src/ComponentOne.stories.js",
"throwPlayFunctionExceptions": false,
},
"playFunction": undefined,
"renderToCanvas": undefined,
"story": "B",
"storyGlobals": {},
"subcomponents": undefined,
"tags": [
"dev",
"test",
],
"testingLibraryRender": undefined,
"title": "Component One",
"usesMount": false,
},
"component-two--c": {
"argTypes": {
"a": {
"name": "a",
"type": {
"name": "string",
},
},
"foo": {
"name": "foo",
"type": {
"name": "string",
},
},
},
"args": {
"foo": "c",
},
"component": undefined,
"componentId": "component-two",
"globals": {
"a": "b",
},
"id": "component-two--c",
"initialArgs": {
"foo": "c",
},
"kind": "Component Two",
"name": "C",
"parameters": {
"__isArgsStory": false,
"backgrounds": {
"disable": false,
"grid": {
"cellAmount": 5,
"cellSize": 20,
"opacity": 0.5,
},
},
"fileName": "./src/ComponentTwo.stories.js",
"throwPlayFunctionExceptions": false,
},
"playFunction": undefined,
"renderToCanvas": undefined,
"story": "C",
"storyGlobals": {},
"subcomponents": undefined,
"tags": [
"dev",
"test",
],
"testingLibraryRender": undefined,
"title": "Component Two",
"usesMount": false,
},
},
"v": 2,
}
`);
});
});
describe('getStoriesJsonData', () => {
describe('in back-compat mode', () => {
it('maps stories list to payload correctly', async () => {
const store = new StoryStore(storyIndex, importFn, projectAnnotations);
await store.cacheAllCSFFiles();
expect(store.getStoriesJsonData()).toMatchInlineSnapshot(`
{
"stories": {
"component-one--a": {
"id": "component-one--a",
"importPath": "./src/ComponentOne.stories.js",
"kind": "Component One",
"name": "A",
"parameters": {
"__isArgsStory": false,
"fileName": "./src/ComponentOne.stories.js",
},
"story": "A",
"title": "Component One",
},
"component-one--b": {
"id": "component-one--b",
"importPath": "./src/ComponentOne.stories.js",
"kind": "Component One",
"name": "B",
"parameters": {
"__isArgsStory": false,
"fileName": "./src/ComponentOne.stories.js",
},
"story": "B",
"title": "Component One",
},
"component-two--c": {
"id": "component-two--c",
"importPath": "./src/ComponentTwo.stories.js",
"kind": "Component Two",
"name": "C",
"parameters": {
"__isArgsStory": false,
"fileName": "./src/ComponentTwo.stories.js",
},
"story": "C",
"title": "Component Two",
},
},
"v": 3,
}
`);
});
});
});
});

109
code/core/src/preview-api/modules/store/StoryStore.ts
View File

@ -1,11 +1,9 @@
import { deprecate } from 'storybook/internal/client-logger';
import type { Canvas, CleanupCallback } from 'storybook/internal/csf';
import type { CleanupCallback } from 'storybook/internal/csf';
import {
CalledExtractOnStoreError,
MissingStoryFromCsfFileError,
} from 'storybook/internal/preview-errors';
import type {
BoundStory,
CSFFile,
ComponentTitle,
IndexEntry,
@ -18,7 +16,6 @@ import type {
PreparedStory,
ProjectAnnotations,
Renderer,
StoryContext,
StoryContextForEnhancers,
StoryId,
StoryIndex,
@ -28,7 +25,6 @@ import type {
import { mapValues, omitBy, pick } from 'es-toolkit';
import memoize from 'memoizerific';
import type { UserEventObject } from 'storybook/test';
import { HooksContext } from '../addons';
import { ArgsStore } from './ArgsStore';
@ -334,107 +330,4 @@ export class StoryStore<TRenderer extends Renderer> {
{} as Record<string, any>
);
}
// TODO: Remove in 9.0
getSetStoriesPayload() {
const stories = this.extract({ includeDocsOnly: true });
const kindParameters: Parameters = Object.values(stories).reduce(
(acc: Parameters, { title }: { title: ComponentTitle }) => {
acc[title] = {};
return acc;
},
{} as Parameters
);
return {
v: 2,
globals: this.userGlobals.get(),
globalParameters: {},
kindParameters,
stories,
};
}
// TODO: Remove in 9.0
// NOTE: this is legacy `stories.json` data for the `extract` script.
// It is used to allow v7 Storybooks to be composed in v6 Storybooks, which expect a
// `stories.json` file with legacy fields (`kind` etc).
getStoriesJsonData = (): StoryIndexV3 => {
const value = this.getSetStoriesPayload();
const allowedParameters = ['fileName', 'docsOnly', 'framework', '__id', '__isArgsStory'];
const stories: Record<StoryId, V3CompatIndexEntry> = mapValues(value.stories, (story) => {
const { importPath } = this.storyIndex.entries[story.id];
return {
...picky(story, ['id', 'name', 'title']),
importPath,
// These 3 fields were going to be dropped in v7, but instead we will keep them for the
// 7.x cycle so that v7 Storybooks can be composed successfully in v6 Storybook.
// In v8 we will (likely) completely drop support for `extract` and `getStoriesJsonData`
kind: story.title,
story: story.name,
parameters: {
...picky(story.parameters, allowedParameters),
fileName: importPath,
},
} as V3CompatIndexEntry;
});
return {
v: 3,
stories,
};
};
raw(): BoundStory<TRenderer>[] {
deprecate(
'StoryStore.raw() is deprecated and will be removed in 9.0, please use extract() instead'
);
return Object.values(this.extract())
.map(({ id }: { id: StoryId }) => this.fromId(id))
.filter(Boolean) as BoundStory<TRenderer>[];
}
fromId(storyId: StoryId): BoundStory<TRenderer> | null {
deprecate(
'StoryStore.fromId() is deprecated and will be removed in 9.0, please use loadStory() instead'
);
// Deprecated so won't make a proper error for this
// Deprecated so won't make a proper error for this
if (!this.cachedCSFFiles) {
// eslint-disable-next-line local-rules/no-uncategorized-errors
throw new Error('Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.');
}
let importPath;
try {
({ importPath } = this.storyIndex.storyIdToEntry(storyId));
} catch (err) {
return null;
}
const csfFile = this.cachedCSFFiles[importPath];
const story = this.storyFromCSFFile({ storyId, csfFile });
return {
...story,
storyFn: (update) => {
const context = {
...this.getStoryContext(story),
abortSignal: new AbortController().signal,
canvasElement: null!,
loaded: {},
step: (label, play) => story.runStep(label, play, context),
context: null!,
mount: null!,
canvas: {} as Canvas,
userEvent: {} as UserEventObject,
viewMode: 'story',
} as StoryContext<TRenderer>;
return story.unboundStoryFn({ ...context, ...update });
},
};
}
}

22
code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts
View File

@ -19,7 +19,6 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: {},
argTypesEnhancers: [],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: [],
@ -48,7 +47,6 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: {},
argTypesEnhancers: [],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: [],
@ -81,7 +79,6 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: {},
argTypesEnhancers: [],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: [],
@ -100,7 +97,7 @@ describe('composeConfigs', () => {
default: {
args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
initialGlobals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
},
},
@ -108,7 +105,7 @@ describe('composeConfigs', () => {
default: {
args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
initialGlobals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
globalTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
},
},
@ -120,8 +117,7 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
argTypesEnhancers: [],
globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
initialGlobals: {},
initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
loaders: [],
beforeAll: expect.any(Function),
@ -140,14 +136,14 @@ describe('composeConfigs', () => {
default: {
args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
initialGlobals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
},
},
{
args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
initialGlobals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
},
{
default: {
@ -162,8 +158,7 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
argTypesEnhancers: [],
globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
initialGlobals: {},
initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
loaders: [],
beforeAll: expect.any(Function),
@ -195,7 +190,6 @@ describe('composeConfigs', () => {
argsEnhancers: ['1', '2', '3', '4'],
argTypes: {},
argTypesEnhancers: ['1', '2', '3', '4'],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: ['1', '2', '3', '4'],
@ -228,7 +222,6 @@ describe('composeConfigs', () => {
argsEnhancers: ['1', '2', '3'],
argTypes: {},
argTypesEnhancers: ['1', '2', '3'],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: ['1', '2', '3'],
@ -257,7 +250,6 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: {},
argTypesEnhancers: [],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: [],
@ -287,7 +279,6 @@ describe('composeConfigs', () => {
{ a: '2', secondPass: true },
{ a: '4', secondPass: true },
],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: [],
@ -320,7 +311,6 @@ describe('composeConfigs', () => {
argsEnhancers: [],
argTypes: {},
argTypesEnhancers: [],
globals: {},
initialGlobals: {},
globalTypes: {},
loaders: [],

2
code/core/src/preview-api/modules/store/csf/composeConfigs.ts
View File

@ -59,7 +59,6 @@ export function composeConfigs<TRenderer extends Renderer>(
...allArgTypeEnhancers.filter((e) => !e.secondPass),
...allArgTypeEnhancers.filter((e) => e.secondPass),
],
globals: getObjectField(moduleExportList, 'globals'),
initialGlobals: getObjectField(moduleExportList, 'initialGlobals'),
globalTypes: getObjectField(moduleExportList, 'globalTypes'),
loaders: getArrayField(moduleExportList, 'loaders'),
@ -68,7 +67,6 @@ export function composeConfigs<TRenderer extends Renderer>(
experimental_afterEach: getArrayField(moduleExportList, 'experimental_afterEach'),
render: getSingletonField(moduleExportList, 'render'),
renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
runStep: composeStepRunners<TRenderer>(stepRunners),
tags: getArrayField(moduleExportList, 'tags'),

20
code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.test.ts
View File

@ -1,26 +1,8 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { describe, expect, it } from 'vitest';
import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
describe('normalizeProjectAnnotations', () => {
describe('blah', () => {
beforeEach(() => {
const warnThatThrows = vi.mocked(console.warn).getMockImplementation();
vi.mocked(console.warn).mockImplementation(() => {});
return () => {
vi.mocked(console.warn).mockImplementation(warnThatThrows!);
};
});
it('normalizes globals to initialGlobals', () => {
expect(
normalizeProjectAnnotations({
globals: { a: 'b' },
})
).toMatchObject({
initialGlobals: { a: 'b' },
});
});
});
it('passes through initialGlobals', () => {
expect(
normalizeProjectAnnotations({

15
code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts
View File

@ -1,4 +1,3 @@
import { deprecate } from 'storybook/internal/client-logger';
import type {
ArgTypes,
NormalizedProjectAnnotations,
@ -6,11 +5,8 @@ import type {
Renderer,
} from 'storybook/internal/types';
import { dedent } from 'ts-dedent';
import { inferArgTypes } from '../inferArgTypes';
import { inferControls } from '../inferControls';
import { combineParameters } from '../parameters';
import { normalizeArrays } from './normalizeArrays';
import { normalizeInputTypes } from './normalizeInputTypes';
@ -26,18 +22,9 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
loaders,
beforeEach,
experimental_afterEach,
globals,
initialGlobals,
...annotations
}: ProjectAnnotations<TRenderer>): NormalizedProjectAnnotations<TRenderer> {
if (globals && Object.keys(globals).length > 0) {
deprecate(dedent`
The preview.js 'globals' field is deprecated and will be removed in Storybook 9.0.
Please use 'initialGlobals' instead. Learn more:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewjs-globals-renamed-to-initialglobals
`);
}
return {
...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
@ -65,7 +52,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
// TODO: Make an architectural decision on the handling of core addons
inferControls,
],
initialGlobals: combineParameters(initialGlobals, globals),
initialGlobals,
...(annotations as NormalizedProjectAnnotations<TRenderer>),
};
}

9
code/core/src/preview-api/modules/store/csf/portable-stories.ts
View File

@ -29,7 +29,6 @@ import { HooksContext } from '../../../addons';
import { ReporterAPI } from '../reporter-api';
import { composeConfigs } from './composeConfigs';
import { getCsfFactoryAnnotations } from './csf-factory-utils';
import { getValuesFromArgTypes } from './getValuesFromArgTypes';
import { normalizeComponentAnnotations } from './normalizeComponentAnnotations';
import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
import { normalizeStory } from './normalizeStory';
@ -134,10 +133,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
normalizedProjectAnnotations
);
const globalsFromGlobalTypes = getValuesFromArgTypes(normalizedProjectAnnotations.globalTypes);
const globals = {
// TODO: remove loading from globalTypes in 9.0
...globalsFromGlobalTypes,
...normalizedProjectAnnotations.initialGlobals,
...story.storyGlobals,
};
@ -169,7 +165,10 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
if (story.renderToCanvas) {
context.renderToCanvas = async () => {
// Consolidate this renderContext with Context in SB 9.0
// TODO: Consolidate this renderContext with Context in SB 10.0
// Change renderToCanvas function to only use the context object
// and to make the renderContext an internal implementation detail
// wasnt'possible so far because showError and showException are not part of the story context (yet)
const unmount = await story.renderToCanvas?.(
{
componentId: story.componentId,

2
code/core/src/preview/README.md
View File

@ -30,7 +30,7 @@ A rendering story goes through these phases:
- `preparing` - (maybe async) import the story file and prepare the story function.
- `loading` - async loaders are running
- `rendering` - the `renderToDOM` function for the framework is running
- `rendering` - the `renderToCanvas` function for the framework is running
- `playing` - the `play` function is running
- `completed` - the story is done.

4
code/core/src/toolbar/components/ToolbarMenuButton.tsx
View File

@ -1,6 +1,8 @@
import React, { type FC } from 'react';
import { IconButton, Icons, type IconsProps } from 'storybook/internal/components';
import { IconButton } from 'storybook/internal/components';
import { Icons, type IconsProps } from '../../components/components/icon/icon';
interface ToolbarMenuButtonProps {
active: boolean;

2
code/core/src/toolbar/components/ToolbarMenuListItem.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import type { TooltipLinkListLink } from 'storybook/internal/components';
import { Icons } from 'storybook/internal/components';
import { Icons } from '../../components/components/icon/icon';
import type { ToolbarItem } from '../types';
export type ToolbarMenuListItemProps = {

3
code/core/src/toolbar/types.ts
View File

@ -1,6 +1,7 @@
import type { IconsProps } from 'storybook/internal/components';
import type { InputType } from 'storybook/internal/types';
import type { IconsProps } from '../components/components/icon/icon';
export type ToolbarShortcutType = 'next' | 'previous' | 'reset';
export type ToolbarItemType = 'item' | 'reset';

44
code/core/src/types/modules/addons.ts
View File

@ -26,10 +26,7 @@ import type { IndexEntry } from './indexer';
export type Addon_Types = Exclude<
Addon_TypesEnum,
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_TEST_PROVIDER
| Addon_TypesEnum.experimental_SIDEBAR_TOP
Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_TEST_PROVIDER
>;
export interface Addon_ArgType<TArg = unknown> extends InputType {
@ -291,7 +288,6 @@ export interface Addon_BaseMeta<ComponentType> {
*
* Used by addons for automatic prop table generation and display of other component metadata.
*
* @deprecated
* @example
*
* ```ts
@ -328,8 +324,6 @@ export type Addon_Type =
| Addon_BaseType
| Addon_PageType
| Addon_WrapperType
| Addon_SidebarBottomType
| Addon_SidebarTopType
| Addon_TestProviderType<Addon_TestProviderState>;
export interface Addon_BaseType {
/**
@ -350,8 +344,6 @@ export interface Addon_BaseType {
Addon_Types,
| Addon_TypesEnum.PREVIEW
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_SIDEBAR_TOP
| Addon_TypesEnum.experimental_TEST_PROVIDER
>;
/**
@ -448,24 +440,6 @@ export interface Addon_WrapperType {
>;
}
/** @deprecated This doesn't do anything anymore and will be removed in Storybook 9.0. */
export interface Addon_SidebarBottomType {
type: Addon_TypesEnum.experimental_SIDEBAR_BOTTOM;
/** The unique id of the tool. */
id: string;
/** A React.FunctionComponent. */
render: FC;
}
/** @deprecated This will be removed in Storybook 9.0. */
export interface Addon_SidebarTopType {
type: Addon_TypesEnum.experimental_SIDEBAR_TOP;
/** The unique id of the tool. */
id: string;
/** A React.FunctionComponent. */
render: FC;
}
export interface Addon_TestProviderType<
Details extends { [key: string]: any } = NonNullable<unknown>,
> {
@ -508,16 +482,12 @@ type Addon_TypeBaseNames = Exclude<
Addon_TypesEnum,
| Addon_TypesEnum.PREVIEW
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_SIDEBAR_TOP
| Addon_TypesEnum.experimental_TEST_PROVIDER
>;
export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
[Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
[Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
[Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
[Addon_TypesEnum.experimental_SIDEBAR_TOP]: Addon_SidebarTopType;
[Addon_TypesEnum.experimental_TEST_PROVIDER]: Addon_TestProviderType<Addon_TestProviderState>;
}
@ -570,18 +540,6 @@ export enum Addon_TypesEnum {
* @unstable
*/
experimental_PAGE = 'page',
/**
* This adds items in the bottom of the sidebar.
*
* @deprecated This doesn't do anything anymore and will be removed in Storybook 9.0.
*/
experimental_SIDEBAR_BOTTOM = 'sidebar-bottom',
/**
* This adds items in the top of the sidebar.
*
* @deprecated This will be removed in Storybook 9.0.
*/
experimental_SIDEBAR_TOP = 'sidebar-top',
/** This adds items to the Testing Module in the sidebar. */
experimental_TEST_PROVIDER = 'test-provider',
}

15
code/core/src/types/modules/api.ts
View File

@ -38,8 +38,6 @@ export interface API_ProviderData<API> {
export interface API_Provider<API> {
channel?: Channel;
/** @deprecated Will be removed in 8.0, please use channel instead */
serverChannel?: Channel;
renderPreview?: API_IframeRenderer;
handleAPI(api: API): void;
getConfig(): {
@ -88,8 +86,6 @@ export interface API_Layout {
panelPosition: API_PanelPositions;
showTabs: boolean;
showToolbar: boolean;
/** @deprecated, will be removed in 8.0 - this API no longer works */
isToolshown?: boolean;
}
export interface API_UI {
@ -120,14 +116,6 @@ interface OnClickOptions {
onDismiss: () => void;
}
/**
* @deprecated Use ReactNode for the icon instead.
* @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
*/
interface DeprecatedIconType {
name: string;
color?: string;
}
export interface API_Notification {
id: string;
content: {
@ -136,8 +124,7 @@ export interface API_Notification {
};
duration?: number;
link?: string;
// TODO: Remove DeprecatedIconType in 9.0
icon?: React.ReactNode | DeprecatedIconType;
icon?: React.ReactNode;
onClear?: (options: OnClearOptions) => void;
onClick?: (options: OnClickOptions) => void;
}

7
code/core/src/types/modules/core-common.ts
View File

@ -297,13 +297,6 @@ type CoreCommon_StorybookRefs = Record<
export type DocsOptions = {
/** What should we call the generated docs entries? */
defaultName?: string;
/**
* Should we generate a docs entry per CSF file? Set to 'tag' (the default) to generate an entry
* for every CSF file with the 'autodocs' tag.
*
* @deprecated Use `tags: ['autodocs']` in `.storybook/preview.js` instead
*/
autodocs?: boolean | 'tag';
/** Only show doc entries in the side bar (usually set with the `--docs` CLI flag) */
docsMode?: boolean;
};

2
code/core/src/types/modules/story.ts
View File

@ -47,8 +47,6 @@ export interface ProjectAnnotations<TRenderer extends Renderer>
addons?: ProjectAnnotations<TRenderer>[];
testingLibraryRender?: (...args: never[]) => { unmount: () => void };
renderToCanvas?: RenderToCanvas<TRenderer>;
/* @deprecated use renderToCanvas */
renderToDOM?: RenderToCanvas<TRenderer>;
}
type NamedExportsOrDefault<TExport> = TExport | { default: TExport };

6
code/core/template/stories/globals.stories.ts
View File

@ -21,7 +21,7 @@ export const Inheritance = {
play: async ({ canvasElement }: PlayFunctionContext<any>) => {
await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
foo: 'fooValue',
bar: 'barDefaultValue',
bar: 'barValue',
baz: 'bazComponentValue',
});
},
@ -63,7 +63,7 @@ export const Overrides1 = {
play: async ({ canvasElement }: PlayFunctionContext<any>) => {
await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
foo: 'fooOverridden1',
bar: 'barDefaultValue',
bar: 'barValue',
baz: 'bazOverridden1',
});
},
@ -82,7 +82,7 @@ export const Overrides2 = {
play: async ({ canvasElement }: PlayFunctionContext<any>) => {
await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
foo: 'fooOverridden2',
bar: 'barDefaultValue',
bar: 'barValue',
baz: 'bazOverridden2',
});
},

4
code/core/template/stories/preview.ts
View File

@ -57,6 +57,7 @@ export const decorators = [testProjectDecorator];
export const initialGlobals = {
foo: 'fooValue',
bar: 'barValue',
baz: 'bazValue',
sb_theme: 'light',
@ -69,9 +70,6 @@ export const initialGlobals = {
};
export const globalTypes = {
foo: { defaultValue: 'fooDefaultValue' },
bar: { defaultValue: 'barDefaultValue' },
sb_theme: {
name: 'Theme',
description: 'Global theme for components',

75
code/lib/blocks/src/components/Preview.stories.tsx
View File

@ -30,70 +30,70 @@ export const Loading = () => <PreviewSkeleton />;
export const CodeCollapsed = () => (
<Preview isExpanded={false} withSource={sourceStories.JSX.args}>
<Button secondary>Button 1</Button>
<Button variant="outline">Button 1</Button>
</Preview>
);
export const CodeExpanded = () => (
<Preview isExpanded withSource={sourceStories.JSX.args}>
<Button secondary>Button 1</Button>
<Button variant="outline">Button 1</Button>
</Preview>
);
export const CodeError = () => (
<Preview isExpanded withSource={sourceStories.SourceUnavailable.args}>
<Button secondary>Button 1</Button>
<Button variant="outline">Button 1</Button>
</Preview>
);
export const Single = () => (
<Preview>
<Button secondary>Button 1</Button>
<Button variant="outline">Button 1</Button>
</Preview>
);
export const Row = () => (
<Preview>
<Button secondary>Button 1</Button>
<Button secondary>Button 2</Button>
<Button secondary>Button 3</Button>
<Button secondary>Button 4</Button>
<Button secondary>Button 5</Button>
<Button secondary>Button 6</Button>
<Button secondary>Button 7</Button>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
<Button variant="outline">Button 4</Button>
<Button variant="outline">Button 5</Button>
<Button variant="outline">Button 6</Button>
<Button variant="outline">Button 7</Button>
</Preview>
);
export const Column = () => (
<Preview isColumn>
<Button secondary>Button 1</Button>
<Button secondary>Button 2</Button>
<Button secondary>Button 3</Button>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Preview>
);
export const GridWith3Columns = () => (
<Preview columns={3}>
<Button secondary>Button 1</Button>
<Button secondary>Button 2</Button>
<Button secondary>Button 3</Button>
<Button secondary>Button 4</Button>
<Button secondary>Button 5</Button>
<Button secondary>Button 6</Button>
<Button secondary>Button 7 long long long long long </Button>
<Button secondary>Button 8</Button>
<Button secondary>Button 9</Button>
<Button secondary>Button 10</Button>
<Button secondary>Button 11</Button>
<Button secondary>Button 12</Button>
<Button secondary>Button 13</Button>
<Button secondary>Button 14</Button>
<Button secondary>Button 15</Button>
<Button secondary>Button 16</Button>
<Button secondary>Button 17</Button>
<Button secondary>Button 18</Button>
<Button secondary>Button 19</Button>
<Button secondary>Button 20</Button>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
<Button variant="outline">Button 4</Button>
<Button variant="outline">Button 5</Button>
<Button variant="outline">Button 6</Button>
<Button variant="outline">Button 7 long long long long long </Button>
<Button variant="outline">Button 8</Button>
<Button variant="outline">Button 9</Button>
<Button variant="outline">Button 10</Button>
<Button variant="outline">Button 11</Button>
<Button variant="outline">Button 12</Button>
<Button variant="outline">Button 13</Button>
<Button variant="outline">Button 14</Button>
<Button variant="outline">Button 15</Button>
<Button variant="outline">Button 16</Button>
<Button variant="outline">Button 17</Button>
<Button variant="outline">Button 18</Button>
<Button variant="outline">Button 19</Button>
<Button variant="outline">Button 20</Button>
</Preview>
);
@ -241,10 +241,7 @@ export const WithCenteredMulti = (
</Preview>
);
export const WithAdditionalActions = (
args: any,
{ loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
) => (
export const WithAdditionalActions = () => (
<Preview
additionalActions={[
{
@ -256,6 +253,6 @@ export const WithAdditionalActions = (
},
]}
>
<Button secondary>Button 1</Button>
<Button variant="outline">Button 1</Button>
</Preview>
);

76
code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts
View File

@ -1,76 +0,0 @@
import { describe, expect, it } from 'vitest';
import type { StorybookConfig } from 'storybook/internal/types';
import { autodocsTags } from './autodocs-tags';
const check = async ({
main: mainConfig,
storybookVersion = '7.0.0',
previewConfigPath,
}: {
main: Partial<StorybookConfig> & Record<string, unknown>;
storybookVersion?: string;
previewConfigPath?: string;
}) => {
return autodocsTags.check({
packageManager: {} as any,
configDir: '',
mainConfig: mainConfig as any,
storybookVersion,
previewConfigPath,
});
};
it('with no docs setting', async () => {
await expect(
check({
main: {},
})
).resolves.toBeFalsy();
});
describe('docs.autodocs = true', () => {
it('errors with no preview.js', async () => {
await expect(
check({
main: {
docs: { autodocs: true },
},
})
).rejects.toThrowError();
});
it('continues with preview.js', async () => {
await expect(
check({
main: {
docs: { autodocs: true },
},
previewConfigPath: '.storybook/preview.js',
})
).resolves.toBeTruthy();
});
});
describe('docs.autodocs != true', () => {
it('docs.autodocs = false', async () => {
await expect(
check({
main: {
docs: { autodocs: false },
},
})
).resolves.toBeTruthy();
});
it('docs.autodocs = "tag"', async () => {
await expect(
check({
main: {
docs: { autodocs: 'tag' },
},
})
).resolves.toBeTruthy();
});
});

95
code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
View File

@ -1,95 +0,0 @@
import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
import type { DocsOptions } from 'storybook/internal/types';
import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import { updateMainConfig } from '../helpers/mainConfigFile';
import type { Fix } from '../types';
const logger = console;
const MIGRATION =
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated';
interface Options {
autodocs: DocsOptions['autodocs'];
mainConfigPath?: string;
previewConfigPath?: string;
}
export const autodocsTags: Fix<Options> = {
id: 'autodocs-tags',
versionRange: ['*.*.*', '>=8.0.*'],
async check({ mainConfig, mainConfigPath, previewConfigPath }) {
const autodocs = mainConfig?.docs?.autodocs;
if (autodocs === undefined) {
return null;
}
if (autodocs === true && !previewConfigPath) {
throw Error(dedent`
❌ Failed to remove the deprecated ${picocolors.cyan(
'docs.autodocs'
)} setting from ${picocolors.cyan(mainConfigPath)}.
There is no preview config file in which to add the ${picocolors.cyan('autodocs')} tag.
Please perform the migration by hand: ${picocolors.yellow(MIGRATION)}
`);
return null;
}
return { autodocs, mainConfigPath, previewConfigPath };
},
prompt({ autodocs, mainConfigPath, previewConfigPath }) {
let falseMessage = '',
trueMessage = '';
if (autodocs === false) {
falseMessage = dedent`
There is no ${picocolors.cyan('docs.autodocs = false')} equivalent.
You'll need to check your stories to ensure none are tagged with ${picocolors.cyan(
'autodocs'
)}.
`;
} else if (autodocs === true) {
trueMessage = ` and update ${picocolors.cyan(previewConfigPath)}`;
}
return dedent`
The ${picocolors.cyan('docs.autodocs')} setting in ${picocolors.cyan(
mainConfigPath
)} is deprecated.${falseMessage}
Learn more: ${picocolors.yellow(MIGRATION)}
Remove ${picocolors.cyan('docs.autodocs')}${trueMessage}?
`;
},
async run({ dryRun, mainConfigPath, result }) {
if (!dryRun) {
if (result.autodocs === true) {
logger.info(`✅ Adding "autodocs" tag to ${result.previewConfigPath}`);
const previewConfig = await readConfig(result.previewConfigPath!);
const tags = previewConfig.getFieldNode(['tags']);
if (tags) {
previewConfig.appendValueToArray(['tags'], 'autodocs');
} else {
previewConfig.setFieldValue(['tags'], ['autodocs']);
}
await writeConfig(previewConfig);
}
await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
logger.info(`✅ Removing "docs.autodocs" from ${mainConfigPath}`);
main.removeField(['docs', 'autodocs']);
});
}
},
};

48
code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts
View File

@ -1,48 +0,0 @@
import { afterEach, describe, expect, it, vi } from 'vitest';
import type { PackageJson, StorybookConfigRaw } from 'storybook/internal/types';
import { makePackageManager } from '../helpers/testing-helpers';
import { autodocsTrue } from './autodocs-true';
const checkAutodocs = async ({
packageJson = {},
main: mainConfig,
}: {
packageJson?: PackageJson;
main: Partial<StorybookConfigRaw> & Record<string, unknown>;
}) => {
return autodocsTrue.check({
packageManager: makePackageManager(packageJson),
mainConfig: mainConfig as StorybookConfigRaw,
storybookVersion: '7.0.0',
});
};
describe('autodocs-true fix', () => {
afterEach(() => {
vi.restoreAllMocks();
});
it('should skip when docs.autodocs is already defined', async () => {
await expect(checkAutodocs({ main: { docs: { autodocs: 'tag' } } })).resolves.toBeFalsy();
});
it('should throw when docs.docsPage contains invalid value', async () => {
const main = { docs: { docsPage: 123 } } as any;
await expect(checkAutodocs({ main })).rejects.toThrow();
});
it('should prompt when using docs.docsPage legacy property', async () => {
const main = { docs: { docsPage: true } } as any;
await expect(checkAutodocs({ main })).resolves.toEqual({
value: 'tag',
});
});
it('should prompt when not using docs.autodocs', async () => {
await expect(checkAutodocs({ main: {} })).resolves.toEqual({
value: true,
});
});
});

92
code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
View File

@ -1,92 +0,0 @@
import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import { updateMainConfig } from '../helpers/mainConfigFile';
import type { Fix } from '../types';
const logger = console;
interface AutodocsTrueFrameworkRunOptions {
value?: boolean | 'tag';
}
/** Set the `docs.autodocs` option to true if it isn't already set */
export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
id: 'autodocsTrue',
versionRange: ['<7', '>=7'],
async check({ mainConfig }) {
const { docs } = mainConfig;
const docsPageToAutodocsMapping = {
true: 'tag' as const,
automatic: true,
false: false,
};
// @ts-expect-error docsPage does not exist anymore but we need to account for legacy code
if (docs?.docsPage) {
// @ts-expect-error same as above
const oldValue = docs?.docsPage.toString();
if (!(oldValue in docsPageToAutodocsMapping)) {
throw new Error(`Unexpected value for docs.docsPage: ${oldValue}`);
}
return {
value: docsPageToAutodocsMapping[oldValue as keyof typeof docsPageToAutodocsMapping],
};
}
return docs?.autodocs === undefined ? { value: true } : null;
},
prompt({ value }) {
const autodocsFormatted = picocolors.cyan(
`docs: { autodocs: ${JSON.stringify(value ?? true)} }`
);
const tagWarning = dedent`
NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag,
please update your story files to use the 'autodocs' tag instead.
`;
if (value) {
return dedent`
We've changed the configuration of autodocs (previous docsPage), so now the value:
- docs.autodocs: true -- means automatically create docs for every CSF file
- docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag
- docs.autodocs: false -- means never create autodocs
Based on your prior configuration, we can set the \`docs.autodocs\` to keep your old behaviour:
${autodocsFormatted}
${value === 'tag' ? tagWarning : ''}
More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
)}
`;
}
return dedent`
We've detected that your main.js configuration file has not configured autodocs. In 6.x we
we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
${autodocsFormatted}
More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
)}
`;
},
async run({ result: { value }, dryRun, mainConfigPath }) {
logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
if (!dryRun) {
await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
main.removeField(['docs', 'docsPage']);
main.setFieldValue(['docs', 'autodocs'], value ?? true);
});
}
},
};

4
code/lib/cli-storybook/src/automigrate/fixes/index.ts
View File

@ -6,8 +6,6 @@ import { addonPostCSS } from './addon-postcss';
import { addonsAPI } from './addons-api';
import { angularBuilders } from './angular-builders';
import { angularBuildersMultiproject } from './angular-builders-multiproject';
import { autodocsTags } from './autodocs-tags';
import { autodocsTrue } from './autodocs-true';
import { builderVite } from './builder-vite';
import { consolidatedImports } from './consolidated-imports';
import { cra5 } from './cra5';
@ -54,7 +52,6 @@ export const allFixes: Fix[] = [
removedGlobalClientAPIs,
mdxgfm,
mdxToCSF,
autodocsTrue,
angularBuildersMultiproject,
angularBuilders,
wrapRequire,
@ -66,7 +63,6 @@ export const allFixes: Fix[] = [
mdx1to3,
upgradeStorybookRelatedDependencies,
vta,
autodocsTags,
initialGlobals,
addonA11yAddonTest,
consolidatedImports,

3
code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
View File

@ -1,7 +1,6 @@
import { join } from 'node:path';
import { frameworkToRenderer } from 'storybook/internal/cli';
import { frameworkPackages } from 'storybook/internal/common';
import { frameworkPackages, frameworkToRenderer } from 'storybook/internal/common';
import findUp from 'find-up';
import { dedent } from 'ts-dedent';

3
code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
View File

@ -1,6 +1,5 @@
import { normalize } from 'node:path';
import { frameworkToRenderer } from 'storybook/internal/cli';
import {
builderPackages,
extractProperFrameworkName,
@ -10,7 +9,7 @@ import {
rendererPackages,
} from 'storybook/internal/common';
import type { JsPackageManager } from 'storybook/internal/common';
import { getCoercedStorybookVersion } from 'storybook/internal/common';
import { frameworkToRenderer, getCoercedStorybookVersion } from 'storybook/internal/common';
import type { ConfigFile } from 'storybook/internal/csf-tools';
import { readConfig, writeConfig as writeConfigFile } from 'storybook/internal/csf-tools';
import type { StorybookConfigRaw } from 'storybook/internal/types';

3
code/lib/create-storybook/src/generators/baseGenerator.ts
View File

@ -183,9 +183,6 @@ const getFrameworkDetails = (
const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
const hasInteractiveStories = (rendererId: SupportedRenderers) =>
['react', 'angular', 'preact', 'svelte', 'vue3', 'html', 'solid', 'qwik'].includes(rendererId);
const hasFrameworkTemplates = (framework?: SupportedFrameworks) => {
if (!framework) {
return false;

2
code/package.json
View File

@ -102,7 +102,7 @@
"@nx/workspace": "20.2.2",
"@playwright/test": "1.48.1",
"@storybook/addon-a11y": "workspace:*",
"@storybook/addon-designs": "9.0.0--canary.1499c1a.0",
"@storybook/addon-designs": "9.0.0-next.1",
"@storybook/addon-docs": "workspace:*",
"@storybook/addon-jest": "workspace:*",
"@storybook/addon-links": "workspace:*",

4
code/renderers/react/src/__test__/portable-stories-factory.test.tsx
View File

@ -99,8 +99,8 @@ describe('projectAnnotations', () => {
setProjectAnnotations([
{
parameters: { injected: true },
globalTypes: {
locale: { defaultValue: 'en' },
initialGlobals: {
locale: 'en',
},
},
]);

6
code/renderers/react/src/__test__/portable-stories-legacy.test.tsx
View File

@ -13,7 +13,7 @@ import { composeStories, composeStory, setProjectAnnotations } from '..';
import type { Button } from './Button';
import * as stories from './Button.stories';
// TODO: Potentially remove this in Storybook 9.0 once we fully move users to the new portable stories API
// TODO: Potentially remove this in Storybook 9.0 once we fully move users to the new portable stories API (with CSF4)
describe('Legacy Portable Stories API', () => {
// example with composeStories, returns an object with all stories composed with args/decorators
const { CSF3Primary, LoaderStory } = composeStories(stories);
@ -70,9 +70,7 @@ describe('Legacy Portable Stories API', () => {
setProjectAnnotations([
{
parameters: { injected: true },
globalTypes: {
locale: { defaultValue: 'en' },
},
initialGlobals: { locale: 'en' },
},
]);
const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);

4
code/renderers/react/src/__test__/portable-stories.test.tsx
View File

@ -90,9 +90,7 @@ describe('projectAnnotations', () => {
setProjectAnnotations([
{
parameters: { injected: true },
globalTypes: {
locale: { defaultValue: 'en' },
},
initialGlobals: { locale: 'en' },
},
]);
const WithEnglishText = composeStory(ButtonStories.CSF2StoryWithLocale, ButtonStories.default);

4
code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
View File

@ -66,9 +66,7 @@ describe('projectAnnotations', () => {
setProjectAnnotations([
{
parameters: { injected: true },
globalTypes: {
locale: { defaultValue: 'en' },
},
initialGlobals: { locale: 'en' },
},
]);
const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);

10
code/yarn.lock
View File

@ -6327,9 +6327,9 @@ __metadata:
languageName: unknown
linkType: soft
"@storybook/addon-designs@npm:9.0.0--canary.1499c1a.0":
version: 9.0.0--canary.1499c1a.0
resolution: "@storybook/addon-designs@npm:9.0.0--canary.1499c1a.0"
"@storybook/addon-designs@npm:9.0.0-next.1":
version: 9.0.0-next.1
resolution: "@storybook/addon-designs@npm:9.0.0-next.1"
dependencies:
"@figspec/react": "npm:^1.0.0"
peerDependencies:
@ -6343,7 +6343,7 @@ __metadata:
optional: true
react-dom:
optional: true
checksum: 10c0/5fd56ad8832778590f1bcdd144c17c234482a137475747e8791e4be9a4ba7132a6089287a614586b86d06b6082de932ee19a8709f39888077cbac98bc60b3705
checksum: 10c0/6989444d6caeb7abbb1a763e0a29d0749c529216d03d690618575378845e4259ddcf1935f7990fb05667a373940086dbacdcc6c97ff3f11eaa76f132bb11a1d5
languageName: node
linkType: hard
@ -7346,7 +7346,7 @@ __metadata:
"@nx/workspace": "npm:20.2.2"
"@playwright/test": "npm:1.48.1"
"@storybook/addon-a11y": "workspace:*"
"@storybook/addon-designs": "npm:9.0.0--canary.1499c1a.0"
"@storybook/addon-designs": "npm:9.0.0-next.1"
"@storybook/addon-docs": "workspace:*"
"@storybook/addon-jest": "workspace:*"
"@storybook/addon-links": "workspace:*"

4
test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview.tsx
View File

@ -12,10 +12,12 @@ const preview: Preview = {
</div>
),
],
initialGlobals: {
locale: 'en',
},
globalTypes: {
locale: {
description: 'Locale for components',
defaultValue: 'en',
toolbar: {
title: 'Locale',
icon: 'circlehollow',

2
test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.playwright.ts
View File

@ -5,4 +5,4 @@ export default composeStories(stories);
export const SingleComposedStory = composeStory(stories.CSF3Primary, stories.default);
export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {globals: { locale: 'es' }});
export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, { initialGlobals: { locale: 'es' } });

2
test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx
View File

@ -55,7 +55,7 @@ describe('projectAnnotations', () => {
it('renders with custom projectAnnotations via composeStory params', () => {
const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
globalTypes: { locale: { defaultValue: 'pt' } },
initialGlobals: { locale: 'pt' },
});
const { getByText } = render(<WithPortugueseText />);
const buttonElement = getByText('Olá!');

2
test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.portable.ts
View File

@ -5,4 +5,4 @@ export default composeStories(stories);
export const SingleComposedStory = composeStory(stories.CSF3Primary, stories.default);
export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {globals: { locale: 'es' }});
export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {initialGlobals: { locale: 'es' }});