React Component Library

Testing

npm run test

Building

npm run build

Storybook

To run a live-reload Storybook server on your local machine:

npm run storybook

To export your Storybook as static files:

npm run storybook:export

You can then serve the files under storybook-static using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library

Generating New Components

npm run generate Avatar

This will generate:

/src
  /Avatar
    Avatar.tsx
    Avatar.stories.tsx
    Avatar.test.tsx
    Avatar.types.ts
    Avatar.scss

The default templates for each file can be modified under util/templates.

Don't forget to add the component to your index.ts exports if you want the library to export the component!

Publishing

Usage

import React from "react";
import { TestComponent } from "harvey-component-library";

const App = () => (
  <div className="app-container">
    <h1>Hello I'm consuming the component library</h1>
    <TestComponent theme="primary" />
  </div>
);

export default App;

Using Component Library SASS Variables

@import '~harvey-component-library/build/typography';

.example-container {
    @include heading;

    color: $harvey-white;
}

Additional Help

Using Alternatives to Sass

Less or Stylus

The Rollup plugin rollup-plugin-postcss supports Sass, Less and Stylus:

• For Stylus, install stylus: yarn add stylus --dev
• For Less, install less: yarn add less --dev

You can then remove node-sass from your dependencies.

CSS Modules

If you want to use CSS Modules, update postcss in rollup-config.js to:

postcss({
  modules: true
})

Styled Components

If you want to use styled-components, the changes required are a bit more involved. As such, I've created a branch where I've got styled-components working in this component library, check it out here.

Component Code Splitting

Code splitting of your components is not supported by default.

import TestComponent from 'harvey-component-library/build/TestComponent';

Please note, there's an issue with code splitting and using rollup-plugin-postcss. I recommend using rollup-plugin-sass instead alongside code splitting.

Supporting Image Imports

Add the following library to your component library @rollup/plugin-image:

npm i -D @rollup/plugin-image

Then add it to rollup-config.js:

...
plugins:[
  ...,
  image(),
  ...
]
...

You can then import and render images in your components like:

import logo from "./rollup.png";

export const ImageComponent = () => (
  <div>
    <img src={logo} />
  </div>
);

Supporting JSON Imports

Add the following library to your component library @rollup/plugin-json:

npm i -D @rollup/plugin-json

Then add it to rollup-config.js:

...
plugins:[
  ...,
  json(),
  ...
]
...

You can then import and use JSON as ES6 Modules:

import data from "./some-data.json";

export const JsonDataComponent = () => <div>{data.description}</div>;

Checkout the official Rollup plugin list for additional helpful plugins.