Storybook: Storybook Docs custom Preview component

[kykungz]

Bug or support request summary

Is there a way to create my own custom component that will act like Preview block (can contain multiple Story and each Story generates its own story)?

Default Preview block:

import { Story, Preview } from '@storybook/addon-docs/blocks'

<Preview>
  <Story name="primary">
    <Button type="primary">Primary</Button>
  </Story>
  <Story name="default">
    <Button type="default">Default</Button>
  </Story>
</Preview>

So I tried:

<div>
  <Story name="primary">
    <Button type="primary">Primary</Button>
  </Story>
  <Story name="default">
    <Button type="default">Default</Button>
  </Story>
</div>

and it showed 2 No component or story to display blocks in my storybook.

Is there a way to create my own component, say ShowCase component which will contain multiple Story. I just want to customize my own Preview and behaviour.

[github-actions[bot]]

Automention: Hey @elevatebart @jeroenreumkens @shilman, you've been tagged! Can you give a hand here?

[shilman]

@kykungz Yeah Preview is a bit special. We can either fix Storybook's MDX compiler to be more forgiving, or it's possible that MDX components configuration might allow you to override somehow. https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#mdx-component-overrides

[tassoevan]

@shilman BTW, there is no way to get source code without wrapping it into a Story component, right? So Preview can't really be used for documentation-only stories.

[shilman]

@tassoevan There's a PR for this https://github.com/storybookjs/storybook/pull/7966

[matheo]

@shilman is there a way to mark a story as primary,
when they are distributed in many files for the same category?

[shilman]

@matheo Nope. The primary story is the first story, so if you're defining stories in multiple files, you need to either control the load order or (MAYBE) use the storySort option to control (have not verified the latter)