Integrating Storybook 6 in a React project using Ant D 4 and Typescript
--
Before we begin
Recently, I came across a problem with configuring one of the projects built on React,Typescript and ant D with storybook. I didn’t find a clear way to integrate ant D styling within the storybook stories.
In this article i will try to show how to integrate all of that in a clear and cohesive way.
Table of Contents
– Bootstraping our project with TypeScript and Create-React-App
–Configuring ant D with storybook
Bootstrapping our project with TypeScript and Create-React-App
You can start a new TypeScript app using templates. To use the provided TypeScript template, append
--template typescriptto the creation command.
npx create-react-app my-app --template typescriptIf the cra project already exists, first install the following ts types dependency:
# Add dependency to a CRA project$ npm install — save typescript @types/node @types/react @types/react-dom @types/jest$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
Then rename the file ending in .js to .tsx.
For more information on using ts in cra, check out the official documentation: Adding TypeScript
It compiles beautifully with no special settings to enable or packages to download. All the files that would have been .js files are now .ts or .tsx.
Ant D
A brief introduction to Ant Design
Ant Design, also known as “Ant D” is a components library for ReactJS. It is open source by a Chinese company name “Ant Design” (Owned by Alibaba Group). Over the past years, Ant Design has gained a lot of attention from the open source community with over 35k stars on GitHub. Although coming from China but thanks to the community, it’s well documented in English.
✨ Features
🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization in every detail.
Source: Ant Design
I have found ANT Design as the smartest option to design our web applications using react. It provides high quality components. If you look around the documentation provided by ANT and observe its demo of different features, you will find it as the best option for your application.
Install ANT Design
We install ANT Design to our system with this following command:
$ npm install antd$ yarn add antd
Add antd/dist/antd.css at the top of src/App.css.
@import '~antd/dist/antd.css';Advanced Guides
In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using craco which is one of create-react-app’s custom config solutions.
Install craco and modify the scripts field in package.json:
$ yarn add @craco/craco/* package.json */"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
}
Then create a craco.config.js at root directory of your project for further overriding.
/* craco.config.js */
module.exports = {
// ...
};Customize Theme
According to the Customize Theme documentation, we need to modify less variables via a loader like less-loader. We can use craco-less to achieve that,
First we should modify src/App.css to src/App.less, then import less file instead:
/* src/App.ts */// remove this line
import './App.css';// add this line
import './App.less';/* src/App.less */// remove this line
@import '~antd/dist/antd.css';// add this line
@import '~antd/dist/antd.less';
Then install craco-less and modify craco.config.js as follows:
$ yarn add craco-lessStoryBook
What Is Storybook?
Storybook markets itself as a playground for UI components. Its main focus is “writing stories.”
Storybook uses the concept of stories to document components.
A story usually contains a single state of one component, almost like a visual test case. Technically, a story is a function that returns something that can be rendered to a the screen.
Your component storybook will contain different stories for many different components.
Each story we write will contain a single state, for example:
What’s great about Storybook is that it works with many popular front-end frameworks and libraries such as React, Vue, React Native, Angular, and more.
I have always found storybook to be a great way of independently and rapidly develop components. It allows developers to write and visually test components with various behaviors exposed by it and to validate whether or not the look and feel is correct. This also works as a nice playground for the designers to validate the specifications of the developed components. This provides quick feedback and a clean working documentation for developers. I think this pretext is needed to understand why we even need a storybook integration.
Install Storybook
Use the Storybook CLI to install it in a single command. Run this inside your existing project’s root directory:
# Add Storybook: npx sb init
If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it.
sb initis not made for empty projectsStorybook needs to be installed into a project that is already setup with a framework. It will not work on an empty project. There are many ways to bootstrap an app on of them is create-react-app.
During its install process, Storybook will look into your project’s dependencies and provide you with the best configuration available.
Depending on your framework, first build your app and then check that everything worked by running:
# Starts Storybook in development mode $ npm run storybook $ yarn storybook
It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you’ll be greeted by a welcome screen.
Add resolutions of babel-loader on your package.json, as sometimes there will be conflict with react-script and storybook babel-loader dependencies.
“resolutions”: {“babel-loader”: “8.1.0”}and you package.json finally will lock like :
Configuring Ant D with storybook
After adding typescript , adding Ant D, adding our less configuration with craco , and installing storybook. the last step is to make them work together.
Storybook comes with his own web-pack config. Modify .storybook/main.js like below:
Modify .storybook/preview.js like below:
And you have it. You can add any Ant D component, and storybook will present it gracefully. So let’s do that. In src/stories, create src/stories/Card.stories.tsx file.
Example of a card stories with Ant D Card example from the their documentation:
And here you can see that the stories are loaded with the Ant D theme:
Conclusion
Altering the storybook web-pack config and adding the needed loader for the less files , and you will have full control on the component styling .
I’d love to connect! Find me on LinkedIn, GitHub.
You can find the source code for this article by going to this repo.
