Examples for non-MDX doc pages

[theiliad]

Hi,
I generate multiple stories for multiple different frameworks using JS, so essentially rather than having individual files or lines of code for each story I have this:

I can wrap my JSX in a <div> for instance and add documentations to the story, however it won't take the styling of an MDX generated doc page:

Am I doing something wrong?

How would I get the styling above by just using my current dynamic setup rather than building out stories in physical MDX files?

[shilman]

When you use addon-docs, it should automatically generate a DocsPage for you that looks roughly like the example below (minus the collaborators and share link for now). You don't need to write any MDX to get that.

[theiliad]

When you use addon-docs, it should automatically generate a DocsPage for you that looks roughly like the example below (minus the collaborators and share link for now). You don't need to write any MDX to get that.

Thanks for the response @shilman.

I get an empty page in the docs tab.

Would I be able to create a page that uses the individual docs blocks?
(e.g. build out a page using JSX where I can include the live code editor & demo of a story by just providing the story ID?)

Currently I'm building out the UI manually https://carbon-design-system.github.io/carbon-charts/react/?path=/story/bar-vertical--simple-bar-discrete

[shilman]

@theiliad Re: empty docs tab, do you have a repro I can look at? It should work out of the box as long as all your @storybook/* packages are on the same version (5.2.x or 5.3.x, pref the latter).

Re: individual docs blocks: yes, you can build out a custom page and there are examples here (official documentation forthcoming ... ironic):

https://github.com/storybookjs/storybook/blob/master/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js#L19

[theiliad]

@theiliad Re: empty docs tab, do you have a repro I can look at? It should work out of the box as long as all your @storybook/* packages are on the same version (5.2.x or 5.3.x, pref the latter).

Re: individual docs blocks: yes, you can build out a custom page and there are examples here (official documentation forthcoming ... ironic):

https://github.com/storybookjs/storybook/blob/master/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js#L19

Great! I'll try it out and let you know 💯

All packages are on the same version, if I can't get it to work I'll send some links here 🙂

I did search everywhere I could before creating the issue but couldn't find that.
It'd be good to add a couple of more links to the READMEs to point to these code samples.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!