Coog React Component Library

This projet is a React UI component libraries designed to used in the Coopengo ecosystem.

The component set is built specifically for React development. This ensures zero dependencies and all the components are fully optimized for React.

There's a dedicated documentation available at https://coopengo.github.io/coog-portal/.

Coog React component library using:

• Rollup
• Sass
• TypeScript

It also features:

• Storybook to help you create and show off your components
• Jest and React Testing Library enabling testing of the components

Development

Testing

yarn test

Building

yarn build

Storybook

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

yarn storybook

To export your Storybook as static files:

yarn storybook:export

You can then serve the files under storybook-static using S3, GitHub pages, Express etc.

Generating New Components

This project included a handy NodeJS util file under util called create-component.js. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:

yarn generate YourComponentName

This will generate:

/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.stories.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
    YourComponentName.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!

Using Component Library SASS Variables

You can export SASS variables to projects consuming the library. As such, the rollup-plugin-copy NPM package is used to copy the typography.scss and variables.scss into the build directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.

Additional Help

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:

yarn add -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.