# How to create a react component library using Storybook, TypeScript, SCSS, and Rollup? ## Introduction The beautiful thing about react is that it lets you break down UI into smaller components and reuse them at multiple places in your project, but that's not it, you can standardize your components and publish them to npm or yarn and let other people use your components in their projects. In this post, I'll show you how you can create a component library for reactJS using Typescript, Storybook, SCSS, and Rollup. It's not necessary to create a big library, you can create a library for a single component such as a *Date Picker* or you can create a full-fledged library like material UI. A UI component library is very essential for organizations to maintain a consistent UI across different projects. However, you do not need to create a component library just for a single project as all components can be maintained in that particular project but if you work on multiple side projects and have similar components that you copy-paste from one project to another then it is better to create a library for those components. So let's get started with our library ## Setting up the library ### Getting Started Before starting this project make sure you have node js and npm installed globally in your system. If not, you can download node from [here](https://nodejs.org/en/) Create a folder and name it whatever you want, but for the sake of this article let's name this folder react-lib, and if you are planning to publish this library to npm then check if the package name is available on [*npm*](https://npmjs.org) registry Open Terminal and navigate to your project directory and run ```bash npm init -y ``` This initializes a node project in the current directory. The `-y` flag when passed to the NPM command tells the generator to use the defaults instead of asking questions, and a file `package.json` is created at the root of your directory ![package.json](https://cdn.hashnode.com/res/hashnode/image/upload/v1643534270391/HSBlwZPbD.png) ### React & React DOM Let's install `react` and `react-dom` as dev dependencies ```bash npm i -D react react-dom ``` We are creating this library for reactJS so it is required that a project that uses this library must have `react` and `react-dom` as dependencies so let's add `react` and `react-dom` as peer dependencies in our `package.json` file. ![add-peerdeps](https://cdn.hashnode.com/res/hashnode/image/upload/v1643535785984/3I0kcbmmDx.png) ### Basic Folder Structure Before adding storybook and typescript and moving further let's create a basic folder structure for our project. You can have any folder structure that you prefer. ![folder-structure.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643537525915/7UJOTuzaI.png) ### Installing Typescript First, install typescript globally in your system with the following command ```bash npm i typescript -g ``` Then install `typescript` and `@types/react` as a dev dependency in your project. ```bash npm i -D typescript @types/react ``` Then create a `tsconfig.json` file using the following command. ```bash tsc --init ``` This file will allow you to configure further and customize how Typescript and `tsc` compiler interact. Open `tsconfig.json` and change the following configuration. ```json ... "compilerOptions" : { ... "jsx": "react", ... "module": "es6", ... "moduleResolution": "node", .... "outDir": "./dist", .... } .... ``` ### Getting Storybook [*Storybook*](https://storybook.js.org/) is an open-source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. It works with a javascript library such as React, Vue, Angular, etc. To install the storybook in our library run this command: ```bash npx sb init ``` You should now be able to run Storybook locally by running `npm run storybook` or if you prefer `yarn storybook`. Here is a preview of the Storybook application: ![Storybook-preview](https://cdn.hashnode.com/res/hashnode/image/upload/v1644612086127/W16wg95bD.png) #### Making sense of the folder structure `npx sb init` generates some files and folders let's take a look at them ![folder-storybook.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643541132428/J7Z_VWKxr.png) ##### The `stories` folder Storybook is smart enough and detects that the project uses Typescript and React so it creates some example components and documentation pages inside the `stories` folder in `src`. You can go ahead and remove everything from this folder but I recommend taking a peek inside to explore a little. - `Introduction.stories.mdx` contains the documentation used to generate the Introduction page in the storybook preview above. Files with `.mdx` extension are written using MDX which is an amalgamation of JSX and Markdown. It helps to write component stories alongside their documentation at the same place. - All files like `.tsx` are the react components created with typescript and files like `.stories.tsx` is used to preview the stories in the storybook and helps us to develop component in isolation ##### The `.storybook` folder Contains files for customizing Storybook: - `main.js` defines the file pattern used by Storybook to determine what to include in the showcase application. By default, Storybook uses files containing .stories in their name. ```js "stories": [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ] ``` [***Addons***](https://storybook.js.org/addons/) for the Storybook application are also defined in `main.js.` ```js "addons": [ "@storybook/addon-links", "@storybook/addon-essentials" ] ``` - `preview.js` configures how actions and controls will show up depending on the prop's name. By default, props such as onClick, onSubmit that start with `on` are automatically interpreted by Storybook as actions, so when triggered, they get logged inside Storybook's Actions addon. Besides, props suffixed with background and color will show a color picker control, whereas props suffixed with Date display a date picker control. ``` js export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, } ``` ##### The `package.json` file `npx sb init` command adds all dev dependencies needed by the storybook and it also adds the following scripts in the `package.json` file ```json "scripts": { "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" } ``` - `npm run storybook` starts a development server locally on your machine - `npm build-storybook` builds the static storybook application ready to be deployed ### Adding SASS support Storybook uses webpack to bundle all the code when we run `storybook` or `build-storybook` script. By default, Storybook does not come with sass support. In order to add sass to our library, we need to add some packages and extend the webpack config in `.stoybook/main.js` Add the following dev dependencies for adding sass support ```bash npm i -D sass style-loader css-loader sass-loader@10.2.0 ``` Let's understand these dependencies - `sass` is a pure JavaScript implementation of Sass. - `style-loader` inject CSS into the DOM. - `css-loader` interprets @import and url() like import/require() and will resolve them. - `sass-loader` loads a Sass/SCSS file and compiles it to CSS. We are using a specific version because the latest version of sass-loader has a conflicting peer dependency issue with webpack that is used by the storybook internally. To extend the webpack configuration lets add the following code in `.storybook/main.js` ```js const path = require("path"); ``` ```js ..... addons: ["@storybook/addon-links", "@storybook/addon-essentials"], framework: "@storybook/react", webpackFinal: async (config, { configType }) => { // Make whatever fine-grained changes you need config.module.rules.push({ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"], include: path.resolve(__dirname, "../"), }); // Return the altered config return config; } .... ``` With Sass support added, we are ready to build our components. ## Creating our first component ### Creating a button component You can create any sort of component that you need to, but for the sake of this post let's create a Button component that can be reused. Inside the components folder, create a file named `Button.tsx` . First, we'll define the interface of the props that are required by the button. We start by importing react inside our file and our button props extends the HTML button element as we might pass different props like `onClick` or `type` that are native to the HTML button element. ```js import React from "react"; export interface ButtonProps extends React.HTMLAttributes { children: React.ReactNode; variant: "primary" | "danger"; shape?: "rounded"; } ``` We are getting the following props - `children` that will be rendered inside the button element. - `variant` : the variant of button i.e. `primary` or `danger` in this case. - we also have an optional `shape` prop. Now Let's add our component ```js export const Button: React.FC = ({ children, variant, shape, ...props }) => { const classNames = `btn btn-${variant} btn-${shape}`; return ( ); }; ``` Here we are returning an HTML button element from our function and we'll use the `variant` and `shape` prop to create different classNames and add them to our `