@nimahkh/react-component-library-skeleton v1.0.1
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.