You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
TLDR: Can someone show me an example of how to achieve a documentation only story with code examples for documenting css classes with @storybook/react essentially how this storybook page does it with @storybook/html?
I have a design system coded up in @storybook/react that I just upgraded to v8.0.9. This storybook has React components but also documents all of the css classes that ship with it. Due to breaking mdx changes, I'm migrating my mdx pages that documented all the css classes.
Documenting the components is straight forward enough and well documented. However for the css classes, it's purely documentational, there is not a component per-se to use in a CSF format story, which breaks the story paradigm. I need to write descriptions and have a visual example with source code for each class or combination of classes.
As an example of what I would like to do you can visit this public storybook page, this is not what I am working on, just an example of my goal. Looking at the source code in github, they are using @storybook/html. They have html based examples which they are importing into a story. This html source then gets wrapped in a code Canvas automatically with nicely formatted source code, it creates a single page in the left menu (No separate Documentation page), and includes several different classes and individual examples for each on one page. I've tried to do things as they are with this site in my own storybook, but it is not working at all. After adding html-loader to the webpack config and importing the html like they do, it just shows minified and escaped html as the story, not in a Canvas code block. We're on the same Storybook version btw. I think the difference is that @storybook/html can do stories differently than @storybook/react?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
TLDR: Can someone show me an example of how to achieve a documentation only story with code examples for documenting css classes with
@storybook/react
essentially how this storybook page does it with@storybook/html
?I have a design system coded up in
@storybook/react
that I just upgraded to v8.0.9. This storybook has React components but also documents all of the css classes that ship with it. Due to breaking mdx changes, I'm migrating my mdx pages that documented all the css classes.Documenting the components is straight forward enough and well documented. However for the css classes, it's purely documentational, there is not a component per-se to use in a CSF format story, which breaks the story paradigm. I need to write descriptions and have a visual example with source code for each class or combination of classes.
As an example of what I would like to do you can visit this public storybook page, this is not what I am working on, just an example of my goal. Looking at the source code in github, they are using
@storybook/html
. They have html based examples which they are importing into a story. This html source then gets wrapped in a codeCanvas
automatically with nicely formatted source code, it creates a single page in the left menu (No separate Documentation page), and includes several different classes and individual examples for each on one page. I've tried to do things as they are with this site in my own storybook, but it is not working at all. After addinghtml-loader
to the webpack config and importing the html like they do, it just shows minified and escaped html as the story, not in aCanvas
code block. We're on the same Storybook version btw. I think the difference is that@storybook/html
can do stories differently than@storybook/react
?Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions