printer-ui

This component library was created using the tutorial How to Create and Publish a React Component Library

Overview

Adding/updating a component happens inside the src/components directory

/src
|--/index.ts                # default package export
|--/components
|----/index.ts              # export each individual component
|----/Button
|------/Button.tsx          # presentational component code
|------/Button.test.tsx     # unit tests
|------/Button.stories.tsx  # storybook template
|------/index.ts            # container component code

Develop

Use Storybook to create and view components in the library

$ npm run storybook

Test

Run Jest test suite with React Testing Library

$ npm run test

Build

$ npm run rollup

Publish

Update the package version

// package.json
{
  ...
  "version": "1.0.0"
  ...
}

Update package-lock.json

$ npm install

Authenticate with npmjs

$ npm login

Run publish command:

For version 3:

$ npm publish --tag stable-v3

For version 4:

$ npm publish

Usage

Install printer-ui package

For version 3:

$ npm install printer-ui@stable-v3

For version 4:

$ npm install printer-ui@latest

Use the components in your React app

import { Button } from 'printer-ui';

const App = () => {
  return <Button />;
};