Integrating Storybook 6 in a React project using Ant D 4 and Typescript

Before we begin

Table of Contents

Bootstrapping our project with TypeScript and Create-React-App

npx create-react-app my-app --template typescript
# 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

Ant D

A brief introduction to Ant Design

Install ANT Design

$ npm install antd$ yarn add antd
@import '~antd/dist/antd.css';

Advanced Guides

$ yarn add @craco/craco/* package.json */"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
}
/* craco.config.js */
module.exports = {
// ...
};

Customize Theme

/* 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';
$ yarn add craco-less

StoryBook

What Is Storybook?

Install Storybook

# Add Storybook:  npx sb init
# Starts Storybook in development mode  $ npm run storybook  $ yarn storybook
“resolutions”: {“babel-loader”: “8.1.0”}

Configuring Ant D with storybook

Conclusion