Setting Up Storybook for Company Design Systems
Developing the component library with Storybook
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Build a Complete Company Design System course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:22] So let's start setting up our storybook packets by following the guide that is provided from Storybook. And to do this we can go to Storybook Packets and then we can run NPX Storybook and then in it.
[00:23 - 00:48] We'll wait a little bit and then we can press yes and then select react. Perfect now the installation is done and Storybook comes with some add-ons out of the box like docs and control that we will find out shortly what they are doing.
[00:49 - 01:13] But let's add one more control that we will work with which is called the accessibility add-on. So in our case we are already in the Storybook Packets so let's get back and let's add the accessibility add-on.
[01:14 - 01:49] And to use this we can go into the Storybook Packets and then under the dot storybook folder and under the main say yes we can import our add-on and save it. Now let's go and start our Storybook server.
[01:50 - 03:16] Now we can see now that we have Storybook this is the welcome page and now we have some components for example this is the example component from Storybook and example button component. Those are the add-ons that comes with Storybook pre-installed like the talks add-on which is really nice for documenting our components and play with some controls like here and inside the canvas we can see if we refresh the page and remove the custom colors that the add-on that we installed detects automatically accessibility issues like the accessibility issue in this button that we don't have enough contrast in our button and we can validate that it works appropriately if we pass a darker color and now we can see zero violations and five passes which is really nice and the last thing we should do to make everything work properly as we are going to import later on our components is to create a Type Script config file and then again extend our root TypeScript configuration and define our base URL and everything we need to work with React components and let's move to the next lesson and start creating our first stories.