How to show stories/component API props

[sanju-developer]

Hey @JeremyRH

Thanks for this addon.

I have one scenario please let me know if it's feasible with this addon. I'm having TextField story and in Docs section I want to show it's API like this they are showing in MUI.

// input.stories.tsx

Requiement and I want API section like this

Is there any way we can do?

[JeremyRH]

I would create an .mdx file in the component's stories and have it organized under the component's section:

// src/Button/stories/docs.stories.mdx
import { Meta } from '@storybook/addon-docs';
import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';

<Meta
  title="Stories/Button/Docs" // this puts it under "Button" stories.
  parameters={{
    viewMode: 'docs',
    previewTabs: { canvas: { hidden: true } },
  }}
/>

// Show whatever you want using @storybook/blocks or other components

See the docs plugin for more info. There is also a way to create a template for all stories but I haven't tried that.

Something I've been considering for my personal projects is having one doc page per component and that doc page has a live code editor (Playground component) section. The other stories show more specific use cases and wouldn't use the live code editor at all.

[sanju-developer]

Hey @JeremyRH ,

Can you please share any dummy code where you are using story with playground and showing all those props API docs like this:

I'm not able to find out away how I can show these props as an API.

// input.stories.mdx

// editableStory.source.tsx

Any help would be appreciated :)

[JeremyRH]

When I refactor some of my stories, I'll let you know!