Storybook - Creating docs

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Congrats on all your accomplishments. Keep up the great work. I have some questions regarding creating my mental health and drug prevention platform I am trying to figure out for years. Wanting to make sure I give easy access on my site to anyone who wants to read or write about their personal experiences and struggles. Possibly stories that will have a positive impact on so many suffering today. A place where I can share my stories but at the same time not make this about me. My mission is to help others and save as many lives as I can along my journey. Universities are keeping hush hush about the amount of over doses on campuses today. Fetinal is killing so many innocent people. I am not looking to expose any universities I am only looking to make a positive impact on our communities. So many athletes like myself who played sports at high levels have been left In the shadows alone suffering from mental health or addiction. Everyone wants to hide not face the truth. So if I can save a few lives along my journey by taking a step out of my comfort zone, knowing it will help save others. Then I am willing to do whatever it takes to save lives. I may not be a web developer, or computer savvy. But I continue to learn each day from my two boys who not only inspire me but continue make my heart beat every single day. If you have any suggestions for me on where I should start my foundation for this project then I would greatly appreciate you're feedback and suggestions. I am always wanting to inspire millions of people online who may be suffering or struggling. Making the most positive impact I possibly know how to on this planet is something I continue to improve on each day. My lacrosse and basketball teams I coach each season have not only inspired me but these kids continue to teach me more about life then I have ever imagined. Being able to treat my players the way I wanted to be treated growing up is one of the biggest blessings of my Life. Over the last 41 years I have experienced many challenges like so many of us. But the strength and power we continue to gain each time we plow through another obstacle is worth fighting for. I wish I was able to create the most amazing mental health and drug prevention platform. Not for therapist or doctors to use. Only for the everyday person, who experiences the everyday struggles, but embraces it by sharing with the community so we can all help each other grow day by day. I believe with my stories, site, blog, and other features that I can really make a huge footprint on the Mental Health and Drug Prevention World by keeping this true to the main cause. Saving one life at a time. This concept is something that can only be effective and created by someone who has been years of experience and knows the industry inside out. I don’t know it all but I have seen and experienced enough to make my concept successful. Thousands have tried this before, but the thousands also have one thing In common, they want the quick money as fast as they can possibly get it. Starting a mental health concept like this money should be last on the list. This is about saving lives and making a positive impact on our society. If I benefit financially down the rd great. But if I’m benefiting then so is the rest of my community benefitting. I view this one way and one way only when it comes to money. I would much rather make millions with groups of people vs. just keeping it all for myself, because when we all eat together as a team the ultimate reward taste that much better. My concern right now is saving lives not money. I appreciate your feedback and suggestions. Sorry for the long message. I know this is not private. So for anyone else who reads this I would love feedback as well. Thanks for everything.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Now that we have a good basic understanding of stories in Storybook, let's take a closer look at how we can leverage it to create some docs.
When you use Storybook, you automatically get built-in docs. It can aggregate stories, text, tables, and code samples into a single page for each component.
This can be super beneficial to explain in more detail how your components work and what needs to be used and set up.
By default, the docs auto-generate based on the arguments and main component.
If we look at our button component, we can see that the docs combine everything we have set up.

It's also possible to add multiple components into one docs page. This could be useful when you are using various components that group together.
You can achieve this by using the subComponents options like this.
export default {
title: 'ButtonGroup',
component: ButtonGroup,
subcomponents: { Button },
};
This will show the components in tabs. The only downside is that you lose control over the sub-components, so you can't interact with their properties.
We can also replace the docs page with an MDX page, which will give us more freedom.
To achieve that, add a page called Button.docs.mdx.
That file could have contents like this:
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';
<Meta title="MDX/Button" component={Button} />
export const Template = (args) => <Button {...args } />
# Badge
Let's define a custom button:
<Canvas>
<Story
id="example-button--primary"
args={{
label: 'Unchecked',
}}>
{Template.bind({})}
</Story>
</Canvas>
And then, we can modify our existing button story to use this doc page instead.
import ButtonDocsMDX from './Button.doc.mdx';
export default {
title: 'Example/Button',
component: Button,
parameters: {
docs: {
page: ButtonDocsMDX,
},
},
};
And now, if we visit the docs page for the button component, we see this custom format in action.

The cool part is that we can mix and match, perhaps for some components, it's enough to use the default docs, but in some cases, you might want to add more details.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter