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
- Create a components folder inside
src/
- Create a Button folder inside
src/components
- 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
Top comments (2)
The storybook step isn't very clear to me.
How come there is no config for it? I followed your step
but it's giving me an error about the said config.
You need to do
npx sb init
afterwards :)