Skip to content

Commit 97bfaab

Browse files
valentinpalkovicvalentinpalkovic
authored
Merge pull request #25459 from storybookjs/yann/remove-deprecated-source-block-props
Doc blocks: Remove deprecated props from Source block
2 parents 91f1bb8 + 0bdf657 commit 97bfaab

File tree

7 files changed

+67
-502
lines changed

7 files changed

+67
-502
lines changed

‎MIGRATION.md

+18
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@
5959
- [Description Doc block properties](#description-doc-block-properties)
6060
- [Story Doc block properties](#story-doc-block-properties)
6161
- [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
62+
- [Source Doc block properties](#source-doc-block-properties)
63+
- [Canvas Doc block properties](#canvas-doc-block-properties)
6264
- [`Primary` Doc block properties](#primary-doc-block-properties)
6365
- [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and--storybookchannel-websocket)
6466
- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
@@ -950,6 +952,22 @@ api.collapseAll() // becomes api.emit(STORIES_COLLAPSE_ALL)
950952
api.expandAll() // becomes api.emit(STORIES_EXPAND_ALL)
951953
```
952954

955+
#### Source Doc block properties
956+
957+
`id` and `ids` are now removed in favor of the `of` property. [More info](#doc-blocks).
958+
959+
#### Canvas Doc block properties
960+
961+
The following properties were removed from the Canvas Doc block:
962+
963+
- children
964+
- isColumn
965+
- columns
966+
- withSource
967+
- mdxSource
968+
969+
[More info](#doc-blocks).
970+
953971
#### `Primary` Doc block properties
954972

955973
The `name` prop is now removed in favor of the `of` property. [More info](#doc-blocks).

‎code/ui/blocks/src/blocks/Canvas.tsx

+10-153
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,17 @@
11
/* eslint-disable react/destructuring-assignment */
2-
import React, { Children, useContext } from 'react';
3-
import type { FC, ReactElement, ReactNode } from 'react';
4-
import type { ModuleExport, ModuleExports, PreparedStory, Renderer } from '@storybook/types';
5-
import { deprecate } from '@storybook/client-logger';
6-
import dedent from 'ts-dedent';
2+
import React, { useContext } from 'react';
3+
import type { FC } from 'react';
4+
import type { ModuleExport, ModuleExports } from '@storybook/types';
75
import type { Layout, PreviewProps as PurePreviewProps } from '../components';
8-
import { Preview as PurePreview, PreviewSkeleton } from '../components';
9-
import type { DocsContextProps } from './DocsContext';
6+
import { Preview as PurePreview } from '../components';
107
import { DocsContext } from './DocsContext';
11-
import type { SourceContextProps } from './SourceContainer';
128
import { SourceContext } from './SourceContainer';
139
import type { SourceProps } from './Source';
14-
import { useSourceProps, SourceState as DeprecatedSourceState, SourceState } from './Source';
15-
import { useStories } from './useStory';
10+
import { useSourceProps } from './Source';
1611
import type { StoryProps } from './Story';
17-
import { getStoryId, Story } from './Story';
12+
import { Story } from './Story';
1813
import { useOf } from './useOf';
1914

20-
export { DeprecatedSourceState as SourceState };
21-
22-
type DeprecatedCanvasProps = {
23-
/**
24-
* @deprecated multiple stories are not supported
25-
*/
26-
isColumn?: boolean;
27-
/**
28-
* @deprecated multiple stories are not supported
29-
*/
30-
columns?: number;
31-
/**
32-
* @deprecated use `sourceState` instead
33-
*/
34-
withSource?: DeprecatedSourceState;
35-
/**
36-
* @deprecated use `source.code` instead
37-
*/
38-
mdxSource?: string;
39-
/**
40-
* @deprecated reference stories with the `of` prop instead
41-
*/
42-
children?: ReactNode;
43-
};
44-
4515
type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
4616
/**
4717
* Pass the export defining a story to render that story
@@ -92,129 +62,16 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
9262
story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay' | '__forceInitialArgs' | '__primary'>;
9363
};
9464

95-
const useDeprecatedPreviewProps = (
96-
{
97-
withSource,
98-
mdxSource,
99-
children,
100-
layout: layoutProp,
101-
...props
102-
}: DeprecatedCanvasProps & { of?: ModuleExport; layout?: Layout },
103-
docsContext: DocsContextProps<Renderer>,
104-
sourceContext: SourceContextProps
105-
) => {
106-
/*
107-
get all story IDs by traversing through the children,
108-
filter out any non-story children (e.g. text nodes)
109-
and then get the id from each story depending on available props
110-
*/
111-
const storyIds = (Children.toArray(children) as ReactElement[])
112-
.filter((c) => c.props && (c.props.id || c.props.name || c.props.of))
113-
.map((c) => getStoryId(c.props, docsContext));
114-
115-
const stories = useStories(storyIds, docsContext);
116-
const isLoading = stories.some((s) => !s);
117-
const sourceProps = useSourceProps(
118-
{
119-
...(mdxSource ? { code: decodeURI(mdxSource) } : { ids: storyIds }),
120-
...(props.of && { of: props.of }),
121-
},
122-
docsContext,
123-
sourceContext
124-
);
125-
if (withSource === SourceState.NONE) {
126-
return { isLoading, previewProps: props };
127-
}
128-
129-
// if the user has specified a layout prop, use that...
130-
let layout = layoutProp;
131-
// ...otherwise, try to infer it from the story parameters
132-
stories.forEach((story) => {
133-
if (layout || !story) {
134-
return;
135-
}
136-
layout = story?.parameters.layout ?? story.parameters.docs?.canvas?.layout;
137-
});
138-
139-
return {
140-
isLoading,
141-
previewProps: {
142-
...props, // pass through columns etc.
143-
layout: layout ?? 'padded',
144-
withSource: sourceProps,
145-
isExpanded: (withSource || sourceProps.state) === SourceState.OPEN,
146-
},
147-
};
148-
};
149-
150-
export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
65+
export const Canvas: FC<CanvasProps> = (props) => {
15166
const docsContext = useContext(DocsContext);
15267
const sourceContext = useContext(SourceContext);
153-
const { children, of, source } = props;
68+
const { of, source } = props;
15469
if ('of' in props && of === undefined) {
15570
throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
15671
}
15772

158-
const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
159-
160-
let story: PreparedStory;
161-
let sourceProps;
162-
/**
163-
* useOf and useSourceProps will throw if they can't find the story, in the scenario where
164-
* the doc is unattached (no primary story) and 'of' is undefined.
165-
* That scenario is valid in the deprecated API, where children is used as story refs rather than 'of'.
166-
* So if children is passed we allow the error to be swallowed and we'll use them instead.
167-
* We use two separate try blocks and throw the error afterwards to not break the rules of hooks.
168-
*/
169-
let hookError;
170-
try {
171-
({ story } = useOf(of || 'story', ['story']));
172-
} catch (error) {
173-
if (!children) {
174-
hookError = error;
175-
}
176-
}
177-
try {
178-
sourceProps = useSourceProps({ ...source, ...(of && { of }) }, docsContext, sourceContext);
179-
} catch (error) {
180-
if (!children) {
181-
hookError = error;
182-
}
183-
}
184-
if (hookError) {
185-
// eslint-disable-next-line @typescript-eslint/no-throw-literal
186-
throw hookError;
187-
}
188-
189-
if (props.withSource) {
190-
deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
191-
192-
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
193-
`);
194-
}
195-
if (props.mdxSource) {
196-
deprecate(dedent`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
197-
198-
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
199-
`);
200-
}
201-
if (props.isColumn !== undefined || props.columns !== undefined) {
202-
deprecate(dedent`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story.
203-
204-
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
205-
`);
206-
}
207-
if (children) {
208-
deprecate(dedent`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
209-
210-
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
211-
`);
212-
return isLoading ? (
213-
<PreviewSkeleton />
214-
) : (
215-
<PurePreview {...previewProps}>{children}</PurePreview>
216-
);
217-
}
73+
const { story } = useOf(of || 'story', ['story']);
74+
const sourceProps = useSourceProps({ ...source, ...(of && { of }) }, docsContext, sourceContext);
21875

21976
const layout =
22077
props.layout ?? story.parameters.layout ?? story.parameters.docs?.canvas?.layout ?? 'padded';

0 commit comments

Comments
 (0)