How to build a UI component library with NWB, Styled-Components and Storybook?

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

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

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

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

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