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

–Ant Design

–Storybook

–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 typescript to the creation command.

npx create-react-app my-app --template typescript

If 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-less

StoryBook

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 init is not made for empty projects

Storybook 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store