3. Configure Storybook
Overview
We use Storybook for a lot of different useful features it offers. For an overview, have a look at our integrations overview for Storybook.
Install Storybook
We start by initializing Storybook using their CLI. We call it with npx, which runs the command (Storybook) without actually installing the dependency to our project. And as we won't be using their included examples, we just remove those immediately, too:
_10npx storybook init_10rm -rf src/stories
Let's have a look at our package.json, after having added Storybook:
Storybook dependencies
Those are the dependencies added through using npx storybook init. They ensure Storybook itself can be built for development and production.
It also includes Storybooks Essential addon, adding recommended addons by default: https://storybook.js.org/docs/react/essentials/introduction
New scripts entries
Next to the dependencies, two scripts entries were added by the Storybook init:
storybook: to start your Storybook in development / watch modebuild-storybook: to build a production ready, deployable version of your Storybook
Add the following lines to your .gitignore to exclude locally built versions of Storybook (e.g. by calling yarn build-storybook):
Configure Storybook
Now that we have installed Storybook, it's time to add some general configuration. We'll also add a first Welcome page to test everything configured so far actually works.
General configuration
For this we'll be looking at the .storybook folder, automatically created for us by npx storybook init. It contains all general configuration to make a Storybook your own, and allows to really adapt it to your use case. We'll set up some integrations that are convenient to use, especially when working with kickstartDS.
The folder contains two files for now:
.storybook/main.js.storybook/preview.js
main.js configuration
This file contains configuration for Storybook itself... which addons to load, additional addon configuration, Webpack build & compile configuration, and so on. We'll continue building this up while adding addons in the next steps.
For a detailed overview, have a look at Storybooks documentation.
After npx storybook init
Right after running Storybooks initialization, you should find it looking like this.
Remove quotes
We remove some quotes from main.js, because we're in a .js file.
Deactivate implicit Post CSS loader
As we don't need it, we deactivate the implicit Post CSS loader as recommended.
You can read more about this here.
Add glob for documentation
We'll be adding a few pages of documentation to test configuration, but these can also serve as the perfect starting point and orientation for your own growing documentation. For Storybook to pick up those pages, we have to tell it where those will be found. We'll be creating that folder docs/ later.
After npx storybook init
Right after running Storybooks initialization, you should find it looking like this.
Remove quotes
We remove some quotes from main.js, because we're in a .js file.
Deactivate implicit Post CSS loader
As we don't need it, we deactivate the implicit Post CSS loader as recommended.
You can read more about this here.
Add glob for documentation
We'll be adding a few pages of documentation to test configuration, but these can also serve as the perfect starting point and orientation for your own growing documentation. For Storybook to pick up those pages, we have to tell it where those will be found. We'll be creating that folder docs/ later.
preview.js configuration
This file specifically includes configuration for component previews, we'll need to make sure all needed CSS is loaded here... for example! Additionally, configuration for how stories are displayed can be adjusted globally, through the exports parameters and decorators (amongst others, learn more here).
After npx storybook init
We'll start off again with the file as created by Storybooks initialization.
Add story sorting
Adding a storySort function to the options allows us to ensure the Welcome page will always be displayed first. Everything else should be sorted alphabetically. Learn more about storySort.
After npx storybook init
We'll start off again with the file as created by Storybooks initialization.
Add story sorting
Adding a storySort function to the options allows us to ensure the Welcome page will always be displayed first. Everything else should be sorted alphabetically. Learn more about storySort.
Adding a Welcome page
As promised we add a Welcome page now, to verify configuration... and to have something in Storybook to display in the browser.
Create a folder docs at the root of your repository, and add a file welcome.stories.mdx to it. .mdx is an extension of the popular Markdown format, allowing the use of React / JSX components as part of your documentation. In the context of kickstartDS this also means being able to use all of your components as part of your Storybook documentation, too. For example having nice hero images on pages important to you!
Learn more about the .mdx format here.
_10mkdir -p docs_10touch docs/welcome.stories.mdx
Add the following content to it:
Define story title and category
We define a title and category for our Welcome page by importing and using Meta from @storybook/addon-docs, a component provided to us by Storybook.
This would also be a first example on the benefits of using .mdx for documentation.
Some initial dummy content
The rest of the file just contains some dummy content to start. Feel free to replace this with something more meaningful, but you'll probably want to revisit this page later, anyways!
Verifying configuration
It's not much, yet, but we can start our Storybook now to see our Welcome page in action:
_10yarn storybook
This should automatically open Storybook in your browser of choice. Next to displaying your first page (🙌), there's something interesting that happened!
As part of the left sidebar, and under your initially opened Welcome page, there'll be a section titled @kickstartds/base. This gets shown because we've added @kickstartds/base as a dependency before. kickstartDS uses Storybook composition to always include the base documentation (in the correct version used by your Design System) to your Storybook, as a handy reference!
Design Token integration
Next up is adding some glue code to have our Design Token set nicely integrated with Storybook. We can start by copying some stories provided by kickstartDS (those are the same that can be seen here).
Add storybook-design-token addon
For Design Token documentation we also use storybook-design-token as an addon. Mainly for its DesignTokenDocBlock component, which helps in rendering the pages we've copied. So we also install that, too:
_10cp -r node_modules/@kickstartds/core/lib/design-tokens docs/tokens_10yarn add -D storybook-design-token
But if you start your Storybook now (yarn storybook), you'll be greeted by empty pages. That's because we've not set up the actual Design Token integration with Storybook / our Style Dictionary, yet.
Integrate with Style Dictionary
As the storybook-design-token addon needs our tokens in a specific format (read more here), we adjust our Style Dictionary configuration in sd.config.cjs to include the provided Storybook configuration. We also tell it to put those Storybook specific files into our already existing src/token directory:
With that change, re-build your Design Token set:
_10yarn build-tokens
You'll notice it now writes two additional files for you, specifically for the Storybook integration:
Annotated tokens.css
Those are all of our Design Token converted to CSS custom properties (as with src/token/tokens.css), but with the correct storybook-design-token presenters already added.
icons.svg icon collection
Contains a collection of all used icons. Similarly to before, they just get annotated with the correct presenters for storybook-design-token for Storybook.
The file gets picked up by the addon automatically, we don't need to add any additional configuration.
_43yarn run v1.22.18_43$ kickstartDS tokens compile_43 _ _ _ _ _ ____ _____43 | | _(_) ___| | _____| |_ __ _ _ __| |_| _ \/ ___|_43 | |/ / |/ __| |/ / __| __/ _` | '__| __| | | \___ \_43 | <| | (__| <\__ \ || (_| | | | |_| |_| |___) |_43 |_|\_\_|\___|_|\_\___/\__\__,_|_| \__|____/|____/_43_43______________/\\\\\\\\\__/\\\______________/\\\\\\\\\\\________43 ___________/\\\////////__\/\\\_____________\/////\\\///_________43 _________/\\\/___________\/\\\_________________\/\\\____________43 ________/\\\_____________\/\\\_________________\/\\\____________43 _______\/\\\_____________\/\\\_________________\/\\\____________43 _______\//\\\____________\/\\\_________________\/\\\____________43 ________\///\\\__________\/\\\_________________\/\\\____________43 __/\\\____\////\\\\\\\\\_\/\\\\\\\\\\\\\\\__/\\\\\\\\\\\__/\\\__43 _\///________\/////////__\///////////////__\///////////__\///___43_43Version: 1.0.0_43For more information visit:_43https://www.kickstartDS.com/docs/intro/cli_43_43Starting..._43[kickstartDS: general] [info]: welcome to the kickstartDS CLI_43[kickstartDS: tokens/compile] starting: compile command with compile variable compile-task_43[1/1] [compile: check] [info]: checking prerequesites before starting_43[1/1] [compile: check] [info]: prerequesites met, starting_43[compile: cleanup] [info]: cleaning up temp dir /tmp/tokens-compile-compile-task before starting command_43[compile: cleanup] [info]: finished cleaning up temp dir /tmp/tokens-compile-compile-task before starting command_43[1/1] [compile: compile] [info]: running the compile subtask_43[1/1] [compile: compile] [info]: getting Style Dictionary from token files_43[1/1] [compile: compile] [info]: compiling Style Dictionary to needed CSS and assets_43_43css_43✔︎ src/token/tokens.css_43_43storybook_43✔︎ src/token/storybook/tokens.css_43✔︎ src/token/storybook/icons.svg_43[1/1] [compile: compile] [info]: copying generated CSS and assets to local folder_43[1/1] [compile: compile] [info]: finished running the compile subtask successfully_43[kickstartDS: tokens/compile] finished: compile command with compile variable compile-task_43Done in 1.08s.
Integrate with Storybook manager
The final piece of the puzzle to get our Design Token docs working is to actually load our prepared src/token/storybook/tokens.css file. As this is specific to Storybook (we'll use the untouched, converted CSS custom properties of src/token/tokens.css for preview.js), this will be done in a new file .storybook/manager.scss. We use Sass here, as it will be featured later in this guide for component customization, too.
Here it helps re-using the file in src/token, while also adding some CSS.
Create the file:
_10touch .storybook/manager.scss
And add the following content to it:
We pull in our generated tokens with @use, and add some CSS to ensure the icon colors actually get inherited.
Now that we've added a .scss file, we'll need to also add Sass compilation capabilities to our project. Install sass and add the following lines to your package.json:
_10yarn add -D sass
After adding sass
A single entry in devDependencies should've been added.
Re-order scripts entries
To keep some order in our scripts entries, we re-order them to be sorted alphabetically before adding some more.
Trailing commas
It's easy to mix up some trailing commas here!
Compile .storybook/manager.scss
We add a script entry called sass-manager, which when called will compile our Sass to a regular CSS file (placed in static/manager.css) to be read by Storybook.
Watch mode for .storybook/manager.scss
And while we're at it, we'll also add a watch task that can be used in development. This rebuilds your changes to manager.scss live, and triggers a reload in your browser subsequently.
After adding sass
A single entry in devDependencies should've been added.
Re-order scripts entries
To keep some order in our scripts entries, we re-order them to be sorted alphabetically before adding some more.
Trailing commas
It's easy to mix up some trailing commas here!
Compile .storybook/manager.scss
We add a script entry called sass-manager, which when called will compile our Sass to a regular CSS file (placed in static/manager.css) to be read by Storybook.
Watch mode for .storybook/manager.scss
And while we're at it, we'll also add a watch task that can be used in development. This rebuilds your changes to manager.scss live, and triggers a reload in your browser subsequently.
The correct place to put such CSS specific to Storybooks UI is .storybook/manager-head.html (you can read more about their CSS escape hatches here). We'll create that file, too:
_10touch .storybook/manager-head.html
And add the following content to it:
Finalizing Design Token integration steps
To get Storybook to pick up our static folder when run / compiled, and thus above relative reference to work, we also need to tell Storybook about it in .storybook/main.js. Further we have to add the storybook-design-token addon to the addons array. The designTokenGlob tells it where to find our token definitions (the annotated token.css from before):
Finally, we'll disable the storybook-design-token addon in Canvas views. It's output there is redundant when having explicit pages for Design Token, and tends to be a bit noisy in the context of a singular component, anyway. Learn more about that option (and other ones) in the official addon documentation.
As this is an option concerned with the general rendering of a Story, the change will have to be made in .storybook/preview.js:
If you re-start, or re-open, your Storybook now (yarn storybook), you'll be greeted by all your glorious Design Token. Neatly categorized by category and semantic meaning!
Empty tables in Firefox?
This was a bug with the storybook-design-token addon, see this issue.
This is fixed starting with version 2.8.0 of the addon. If you're affected, just update your version to ^2.8.0 or higher in your package.json, to fix the addon!
We'll add those additional files generated based on our Design Token set to our .gitignore now:
Add Storybook theming
We have a Design Token set, we have a Storybook... what better idea than to combine those two! Re-using our existing token to add some (reserved) theming to our general Storybook UI also serves as a great first, albeit small, demonstration for how useful a well constructed Design Token set can be!
Creating a Storybook theme involves creating two files, and adding a new output format (.js) to our Style Dictionary:
.storybook/manager.js: used to import and set our custom theme.storybook/themes.js: definition of our custom theme, using the new output format
Learn more about theming in Storybook.
Adding a Style Dictionary transform
We start off by adding the new Style Dictionary transform in sd.config.cjs:
The transforms ensure a naming format that we'll use in our .storybook/themes.js, up next. We also instruct our new transform to put the generate JavaScript file into our Storybook specific token folder src/token/storybook as tokens.js. We opt for JavaScript so an easy import from inside .storybook/themes.js is possible. This is also the reason for selecting javascript/es6 as the format.
With that new transform in place, re-build your Design Token set again:
_10yarn build-tokens
You'll be greeted by a new file being created at src/token/storybook/tokens.js:
_46yarn run v1.22.18_46$ kickstartDS tokens compile_46 _ _ _ _ _ ____ _____46 | | _(_) ___| | _____| |_ __ _ _ __| |_| _ \/ ___|_46 | |/ / |/ __| |/ / __| __/ _` | '__| __| | | \___ \_46 | <| | (__| <\__ \ || (_| | | | |_| |_| |___) |_46 |_|\_\_|\___|_|\_\___/\__\__,_|_| \__|____/|____/_46_46______________/\\\\\\\\\__/\\\______________/\\\\\\\\\\\________46 ___________/\\\////////__\/\\\_____________\/////\\\///_________46 _________/\\\/___________\/\\\_________________\/\\\____________46 ________/\\\_____________\/\\\_________________\/\\\____________46 _______\/\\\_____________\/\\\_________________\/\\\____________46 _______\//\\\____________\/\\\_________________\/\\\____________46 ________\///\\\__________\/\\\_________________\/\\\____________46 __/\\\____\////\\\\\\\\\_\/\\\\\\\\\\\\\\\__/\\\\\\\\\\\__/\\\__46 _\///________\/////////__\///////////////__\///////////__\///___46_46Version: 1.0.0_46For more information visit:_46https://www.kickstartDS.com/docs/intro/cli_46_46Starting..._46[kickstartDS: general] [info]: welcome to the kickstartDS CLI_46[kickstartDS: tokens/compile] starting: compile command with compile variable compile-task_46[1/1] [compile: check] [info]: checking prerequesites before starting_46[1/1] [compile: check] [info]: prerequesites met, starting_46[compile: cleanup] [info]: cleaning up temp dir /tmp/tokens-compile-compile-task before starting command_46[compile: cleanup] [info]: finished cleaning up temp dir /tmp/tokens-compile-compile-task before starting command_46[1/1] [compile: compile] [info]: running the compile subtask_46[1/1] [compile: compile] [info]: getting Style Dictionary from token files_46[1/1] [compile: compile] [info]: compiling Style Dictionary to needed CSS and assets_46_46css_46✔︎ src/token/tokens.css_46_46storybook_46✔︎ src/token/storybook/tokens.css_46✔︎ src/token/storybook/icons.svg_46_46js_46✔︎ src/token/storybook/tokens.js_46[1/1] [compile: compile] [info]: copying generated CSS and assets to local folder_46[1/1] [compile: compile] [info]: finished running the compile subtask successfully_46[kickstartDS: tokens/compile] finished: compile command with compile variable compile-task_46Done in 1.17s.
Adding .storybook/themes.js
Create the file .storybook/themes.js...
_10touch .storybook/themes.js
... and add the following content:
We import the create function from Storybook and our token. With those we create a new theme, with light as the base. We won't go into detail about the specific token applications now, but feel free to adjust brandTitle and brandUrl to your liking! brandImage will be added next...
Create a folder static on your project root now:
_10mkdir -p static
For this to work, we add our logo to the static/ directory created before, as logo.svg. If you don't have a fitting logo laying around now, feel free to just use ours (right click > save as).
Adding .storybook/manager.js
Now create the second file needed, .storybook/manager.js...
_10touch .storybook/manager.js
... and add this code to it:
We import addons from Storybook, and our newly created theme from .storybook/themes.js. We combine those to apply our theme to Storybook.
Add a fitting favicon
Our final addition for this section includes changing .storybook/manager-head.html again. Add the following lines to it:
This adds a good looking, custom favicon to our Storybook when opened in the browser, which really helps to find your own Design System... in a sea of tabs 😅.
The configuration expects the files favicon/favicon.ico and favicon/favicon-192-192.png to be placed in our static/ folder, like it was the case for logo.svg before.
Create the sub directory...
_10mkdir -p static/favicon
... and place your files inside. If you need something to continue, feel free to use our favicon.ico (right click > save as) and favicon-192-192.png (right click > save as) for now!
Finalizing Storybook theming
If you start your Storybook now (yarn storybook), you should feel right at home! You should see your own logo, your own colors and your font being applied to Storybook itself (or the ones you've used while testing around). Giving it your own, unique flavour... without being distracting!
As we've added one new generated file, we make sure to include it in our .gitignore:
Integrate with kickstartDS
What follows is in preparation for the next big chapter, adding components. It will have no immediately visible effect now, next to a small test component that we'll add to the Welcome page, but ensures a smoother experience going forward... without having to return to general setup tasks all the time.
Integration consists mainly of adding glue code and snippets to the Storybook configuration, to tell it about the existence of kickstartDS. How code should be handled, where CSS is located, and how our Icons work!
Transpile @kickstartDS components
Base components installed as part of @kickstartDS dependencies (e.g. @kickstartDS/base) are placed in your node_modules after installation. For those components to be compatible with Storybook, and its build & compilation pipeline, we need to ensure that they get transpiled (like your local code automatically is). Add the following webpackFinal configuration to .storybook/main.js:
This sets up everything needed to import components from @kickstartDS (e.g. import { Button } from "@kickstartds/base/lib/button"). First we add exemptions to the babel-loader for JavaScript code transpilation, which normally ignores code in node_modules. Additionally we add loaders for CSS / SCSS, allow includes from node_modules, configure the path our code lives in, and configure mainFields (learn about them here).
Read more about Storybooks Webpack builder, or Webpack in general, for details.
Adding a demo Button
To test our Storybook setup and integration actually works, we add a Button to our Welcome page.
First we import the Button component from @kickstartds/base/lib/button, to then add it to the end of the page with a label of "Learn more". To see all available options for such a Button component have a look at our Storybook.
If not still running, start your Storybook again now (yarn storybook), and browse to the Welcome page. You should be greeted by your newly added Button there. But there's something missing. It's not looking quite right, yet!
Add missing styles in preview.js
We need some base styles and JavaScript provided by @kickstartds/base, and our own Design Token set, the one converted to CSS custom properties in src/token/tokens.css.
Add the following lines to your .storybook/preview.js:
Re-start Storybook to revisit the Welcome page. Everything should be looking as expected now!
Adding an Icon to our Button
As a small motivation for the next section, change the Button markup in docs/welcome.stories.jsx slightly:
We add an Icon to the button using iconAfter (you can use iconAfter or iconBefore, or both!). To see a list of available Icons you can have a look at your Storybook. It should have a page titled Icons in the Design Tokens category. This has all of your .svg icons compiled, all those are possible inputs for icon here.
To see all options available on a Button, have a look at its documentation in Storybook (either in our docs, or locally through the composed docs in your sidebar).
If you re-check your Welcome page in the browser again now, you'll see the button having space reserved for an Icon. But the Icon itself is still missing. This is because we haven't included our Icon Sprite for component previews in Storybook, yet. The only reason they're successfully displayed on your Icons page currently, is that the storybook-design-token addon is picking them up using its own loader.
Let's add our Icon Sprite to Storybook for real, now!
Integrate Icons with Storybook previews
Instead of loading a bunch of single files per icon, we encourage compiling all your SVGs into one sprite. We offer different output formats for that through the pre-configured Style Dictionary in use (SVG, HTML, React). This can be included once in the page, and the elements will just be referenced. Learn more about sprites with <symbol> and <use> on MDN.
As with other changes that had to do with how Storybook renders our own components (in a preview context), we will need to adjust .storybook/preview.js again to integrate kickstartDS and Storybook:
We wrap Storybooks story rendering in two places. Firstly we import the default DocsContainer from @storybook/addon-docs and our Icons from ../src/token/icons/IconSprite, to then ensure that every time a docs page is rendered, our Icons get included there, too. Secondly we add our first decorator to the decorators array, also adding our imported Icons. This one is concerned with all the other story previews there are, read more about decorators here.
You might have stumbled over our Icons import above: import IconSprite from "../src/token/icons/IconSprite". That file doesn't actually exist (yet)! You might also recall how we've added annotated Design Token before, by adding a new transform to our Style Dictionary configuration. We'll now add another transform to it that takes our Icons and converts them to a JSX component-variant of our IconSprite, ready to be imported in .storybook/preview.js:
And, you know the drill by now, after changing our sd.config.cjs we'll want to re-compile our Style Dictionary...
_10yarn build-tokens
... to find a new output for jsx in the log, written to src/token/icons/IconSprite.js, as referenced by .storybook/preview.js:
_49yarn run v1.22.18_49$ kickstartDS tokens compile_49 _ _ _ _ _ ____ _____49 | | _(_) ___| | _____| |_ __ _ _ __| |_| _ \/ ___|_49 | |/ / |/ __| |/ / __| __/ _` | '__| __| | | \___ \_49 | <| | (__| <\__ \ || (_| | | | |_| |_| |___) |_49 |_|\_\_|\___|_|\_\___/\__\__,_|_| \__|____/|____/_49_49______________/\\\\\\\\\__/\\\______________/\\\\\\\\\\\________49 ___________/\\\////////__\/\\\_____________\/////\\\///_________49 _________/\\\/___________\/\\\_________________\/\\\____________49 ________/\\\_____________\/\\\_________________\/\\\____________49 _______\/\\\_____________\/\\\_________________\/\\\____________49 _______\//\\\____________\/\\\_________________\/\\\____________49 ________\///\\\__________\/\\\_________________\/\\\____________49 __/\\\____\////\\\\\\\\\_\/\\\\\\\\\\\\\\\__/\\\\\\\\\\\__/\\\__49 _\///________\/////////__\///////////////__\///////////__\///___49_49Version: 1.0.0_49For more information visit:_49https://www.kickstartDS.com/docs/intro/cli_49_49Starting..._49[kickstartDS: general] [info]: welcome to the kickstartDS CLI_49[kickstartDS: tokens/compile] starting: compile command with compile variable compile-task_49[1/1] [compile: check] [info]: checking prerequesites before starting_49[1/1] [compile: check] [info]: prerequesites met, starting_49[compile: cleanup] [info]: cleaning up temp dir /tmp/tokens-compile-compile-task before starting command_49[compile: cleanup] [info]: finished cleaning up temp dir /tmp/tokens-compile-compile-task before starting command_49[1/1] [compile: compile] [info]: running the compile subtask_49[1/1] [compile: compile] [info]: getting Style Dictionary from token files_49[1/1] [compile: compile] [info]: compiling Style Dictionary to needed CSS and assets_49_49css_49✔︎ src/token/tokens.css_49_49jsx_49✔︎ src/token/icons/IconSprite.js_49_49storybook_49✔︎ src/token/storybook/tokens.css_49✔︎ src/token/storybook/icons.svg_49_49js_49✔︎ src/token/storybook/tokens.js_49[1/1] [compile: compile] [info]: copying generated CSS and assets to local folder_49[1/1] [compile: compile] [info]: finished running the compile subtask successfully_49[kickstartDS: tokens/compile] finished: compile command with compile variable compile-task_49Done in 1.49s.
(Re-)open your Storybook now and change to the Welcome page. You should be greeted by a Button with its Icon visible, as configured in the component props!
Like before, we make sure to include the newly generated file in our .gitignore:
Integrate kickstartDS radio with Storybook actions
We use a small, light-weight communication component called radio (basically a mini PubSub) in all existing components for communication and event handling. It's part of our Core (@kickstartDS/core) architecture. To make debugging easier and more transparent, we connect our radio with Storybooks actions, and their actions addon.
Configuration is pretty easy, just add the following lines to .storybook/preview.js:
Now everytime a kickstartDS component emits an event over radio, it will be displayed in the Actions tab in Storybook.
Install remaining addons
Like the last step, this one will also mostly be done in preparation. We add some more addons, that each add a specific view of your components to Storybook:
- HTML rendering addon
- JSON Schema addon
- Component Token addon
This will give you a great overview of all aspects that make up a component in a Design System in general, and with kickstartDS specifically. Especially helpful while adding components in the next main chapter of this guide!
First add the addons to your project:
_10yarn add -D @kickstartds/storybook-addon-component-tokens @kickstartds/storybook-addon-jsonschema @whitespace/storybook-addon-html@git+https://github.com/lmestel/storybook-addon-html.git
Fork of @whitespace/storybook-addon-html
We currently need a fork of @whitespace/storybook-addon-html, because the original version of the addon just takes the HTML from the browser. This is problematic, because it means that markup might already be manipulated by client-side JavaScript (e.g. some classes being added). For our use, copy & paste of the initial HTML, we've switched the addon to use Reacts SSR Renderer.
To activate those addons, we need to add them to .storybook/main.js, too. They don't need any further configuration:
Fork of @whitespace/storybook-addon-html
We deactivate @kickstartds/storybook-addon-jsonschema for now, because there's a bug that needs to be fixed to make it compatible with the Open Source 2.0.0 release of kickstartDS. You can follow the progress for this on the following ticket: kickstartDS/storybook-addon-jsonschema/issues/19
Review changes
Let us review our package.json again now, it's starting to grow already:
HTML rendering addon
We use @whitespace/storybook-addon-html to add a tab to every component Canvas sidebar, where you can copy the currently configured component as a plain HTML component.
Design Token addon
For Design Token documentation we use storybook-design-token. Mainly for its DesignTokenDocBlock component, which helps rendering the pages we'll create to display our Design Token set.
JSON Schema addon
We use our own @kickstartds/storybook-addon-jsonschema to display our component structure / API in a Canvas tab, alongside the component.
Read more about it on our dedicated integration page.
Component Token addon
For this we use another Canvas and tab based addon we've written ourselves, to visualize your Component Token: @kickstartds/storybook-addon-component-token. Especially helps discovering the token layering applied to a component.
Read more about it on our dedicated integration page.
Result
With that, we've successfully added Storybook to our Design System, integrated it with our Design Token / Style Dictionary, adopted some concepts of kickstartDS, and even added a bit of theming! We have our main setup running now, including Storybook.
Next Step
It's time to get to the exciting part... adding components to our Design System. To learn about the different ways you can go about in that, follow our next section!
Code Sandbox
See the result of this step in the Code Sandbox below. It's showing specifically the result after this step. You can also view this on Github directly in the ds-guide repository, there's a branch for every step... and we're currently on the branch step/3 in the guide:
Toggle the file browser with the hamburger icon at the top left, or open it directly in your browser.