You knew that already then you could skip this upcoming part.
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
npx -p @storybook/cli sb init — type react
This will check your app and start to install all required dependencies for your app, add stories dir and .storybook for config your storybook, also two scripts in package.json one for storybook in Development and another one for build storybook in Production.
Running yarn storybook to start your terminal on port: 6006.
You’ll your component normally without the custom fonts if you have one, then it will come to the purpose of this article.
Let’s say that in your app have a custom font for me as an example will be
I have it under src/styles/ArmWrestler.woff
What we need to do first to storybook to add these files is:
.storybookdir and add this code in it:
What that says it will take config that comes from storybook and push my custom handling for fonts with it.so it means that configs will be merged together.[This is not Overriding].
first, one for styling to handle fonts inside any scss files.
A second one for bundling my custom fonts with storybook.
- Add head html file for storybook by creating the file inside your
preview-head.htmland put this in it:
What that says to take fonts inside my styles/and inject in the head of iframe.html that will be generated from storybook, see the console.
3.Update package JSON for watching styling in my app
With that, everything is done your stories should pick the font the same as in the app.
If you like it, don’t forget to hit like and subscribe for more articles and also video’s! Yes, I do have YouTube Channel you could find this already there.
This article has been shared also on coderreview.io
Also on Medium
Happy Coding 💻