How to build a UI component library with NWB, Styled-Components and Storybook?
Tags: react, javascript, tutorial, nwb
Published: 2019-10-13 03:58:50

---
title: How to build a UI component library with NWB, Styled-Components and Storybook?
published: true
description: Build a UI component library from scratch and deploy it to NPM
tags: react, javascript, tutorial, nwb
---


## Here's how you can build your own component library for React with NWB, Styled-Components and Storybook.

> **Prerequisite** : NodeJS Environment

**But first why would you want to build a separate component library anyway?**

The answers to that is that component libraries are best built when you are working in a team setting. Using a component library will improve consistency and let designers work together. In the end, designers will use the same workflow as front-end development which increases collaboration and efficiency.

The guys over [here](https://www.getopensocial.com/blog/open-source/advantages-component-library) explain it a whole lot better than I do

**So what do we need to do first ?**

First we install globally a tool called [NWB](https://github.com/insin/nwb) 
```
npm install -g nwb
```

>NWB is a tool for quick development with React and developing Npm modules for the web

## Creating your project

In the terminal use the  `nwb new`  command to create a new React component project:

```
nwb new react-component my-fancy-ui
```

You'll be asked a few questions about your project's build configuration.
You can follow the guidelines [here](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#build-configuration-questions) on how to answer these questions.

**Then in the terminal cd into your project**

`cd my-fancy-ui`

The following directory structure will be created, with  `react`  and  `react-dom`  dependencies installed from npm into  `node_modules/`:

```
my-fancy-ui/
  .gitignore
  .travis.yml
  CONTRIBUTING.md
  nwb.config.js
  package.json
  README.md
  demo/
    src/
      index.js
  node_modules/
  src/
    index.js
  tests/
    .eslintrc
    index-test.js
```

We're not going to use the `demo` directory for this tutorial since we're going to use storybook to demo our components, you can delete it if you want or keep it around as a playground ¯\\\_(ツ)_/¯

## Adding [Styled-Components](https://www.styled-components.com)

Now we add styled-components to the project by typing this following command into the terminal
```
npm install --save styled-components
```

> **FYI** - Styled-components allows you to write actual CSS code to style your components by utilising tagged template literals (a recent addition to JavaScript) and the power of CSS 

After installing styled-components we can now create our first component
So this is what we do

 1. Create a ***components*** folder inside `src/`
 2. Create a ***Button*** folder inside `src/components`
 3. Create an ***index.js*** file inside `src/components/Button`

**We can now create our Button's code**
Insert the following code as the contents of `src/components/Button/index.js`

```
import React from 'react';
import styled from 'styled-components';

const getPaddingBySize = (props) => {
    const sizes ={
        small: "5",
        medium: "10px",
        large: "15px"
    }
    return sizes[props.size];
}

const Button = styled.button`
    width: 100px;
    padding: ${props => getPaddingBySize(props)};
    background: #fff;
    border: 1px solid #000
    border-radius: 5px;
    margin: 5px;
`

export default Button;
```
Okay, so now we want to see what our Button looks like right?

## Adding  [Storybook](https://storybook.js.org/docs/guides/guide-react/)

Add  `@storybook/react`  to your project. To do that, run the following command in your terminal:

```
npm install @storybook/react --save-dev
```

> **FYI** - Storybook is an open source tool for developing UI components in isolation for React

After installing Storybook we can then add Stories for our Button Component so in the folder `src/components/Button` alongside the `index.js` file create a file called `index.stories.js`

and insert the following code
```
import React from 'react';
import Button from './index';

export default { title: 'Button' };

export const small = () => <Button size='small'>Small</Button>;

export const medium = () => <Button size='medium'>Medium</Button>;

export const large = () => <Button size='large'>Large</Button>;
```

> These are our Button's stories for all Button sizes

We can now run Storybook and test our new Button component using the command `start-storybook` in the terminal, but first before we do that let's add this command as a script to our pakage.json so we can easily run it  from an npm context in the future. So add the following entry to the **Scripts** section of your **Package.Json**

```
	"scripts: {
		...
		"storybook":  "start-storybook"
	}
	
```

You can then run storybook on your project by using `npm run storybook`
This will be the  output in your browser

<a href="https://ibb.co/kgf8ynG"><img src="https://i.ibb.co/C5Z7tdw/story.png" alt="story" border="0" /></a>

Now we can create, tweak and edit components whilst watching them live on Storybook. Nice!

The only logical question to ask now would be *how do we deploy our components to NPM and use them on our React Apps?*

## Publishing To Npm

First we need to empty the contents of `src/index.js`, so open up your favorite IDE and delete the code inside that file.

Now insert this code into the empty `src/index.js` file

```
export Button from './components/Button';
```

This code imports and exports your Button component. This is how we are going to expose our components for external use by other libraries .

> **FYI** - Every component you create will need to be exported from this file so the src/umd.js file can acces it for transpilation

Then create the following file  `src/umd.js`  and add the following code

```
import * as components from './index.js'
export default components
```

This code exports all the components imported in from src/index.js as one default export *{ Button, Spoon, Knife }*  and it now makes it possible for external react apps to import our components when the library is built.
e.g 
```
import { Button } from "my-fancy-ui"
```

The  src/umd.js file is the entry point for our transpilers that's why it imports and exports all components

### Build
You can then alter the build script in your package.json to the following
```
nwb build-react-component --copy-files --no-demo
```
`npm run build`  will prepare the library for publishing, creating:

-   A CommonJS build in  `lib/`
-   An ES modules build in  `es/`  (enabled by default / without configuration)
-   UMD development and production builds in  `umd/`  (if configuration is provided)

### Publish 
Once you've built your project, it's ready for publishing to npm using whatever your preferred process for doing that is, with the simplest being manually running  `publish`:

```
npm publish
```

Don't forget to run `npm login` first 

And We're done :)

Here's a code potato

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s3fxypbh1fu4mxhcm4te.gif)