diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx index fda87f38fd6..e720e4a2bd6 100644 --- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx @@ -11,13 +11,13 @@ overhauled and improved in 7.0, and the legacy mode is now deprecated and will b removed in 8.0. - + - + ## Duplicate stories diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx index 76c7a52f6f2..ad5f02145d8 100644 --- a/code/ui/blocks/src/blocks/Story.tsx +++ b/code/ui/blocks/src/blocks/Story.tsx @@ -32,6 +32,10 @@ type StoryRefProps = { * @deprecated Use of={storyExport} instead */ id?: string; + /** + * @deprecated Use of={storyExport} and define the story in the CSF file + */ + story?: StoryAnnotations; /** * Pass the export defining a story to render that story * @@ -83,11 +87,22 @@ type StoryParameters = { export type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters; export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => { - const { id, of, meta } = props as StoryRefProps; + const { id, of, meta, story } = props as StoryRefProps; - if (of) { + // The `story={moduleExports}` prop is a legacy prop for stories defined in CSF files, but + // "declared" in MDX files (the CSF file has no meta export or doesn't match the stories glob). + // In this case, the `.stories.mdx` file will have actually ended up declaring the story + // so we can reference the story just the same as an `of={moduleExports}` would have. + // See https://github.com/storybookjs/mdx2-csf/issues/3 + if (story) { + deprecate( + 'The `story` prop is deprecated, please export your stories from CSF files and reference them with `of={}`.' + ); + } + + if (of || story) { if (meta) context.referenceMeta(meta, false); - const resolved = context.resolveOf(of, ['story']); + const resolved = context.resolveOf(of || story, ['story']); return resolved.story.id; } diff --git a/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx new file mode 100644 index 00000000000..5792e46d764 --- /dev/null +++ b/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Story as StoryBlock } from '../Story'; +import * as ButtonStories from '../../examples/Button.stories'; + +const meta: Meta = { + component: StoryBlock, + parameters: { + relativeCsfPaths: ['../examples/Button.stories'], + }, +}; +export default meta; + +type Story = StoryObj; + +export const StoryExport: Story = { + args: { + story: ButtonStories.Primary, + }, +};