rc-shared-components v1.9.0

Red Coral Shared Components Library

npm i --save rc-shared-components

This is a library of React components wrapping Semantic UI React components, styled per the Red Coral design language. Each component is prefixed with an "RC" (RCButton, RCInput), and so on.

Project Structure

• React
• TypeScript
• Semantic UI
• Semantic UI React
• Rollup for library bundling
• styled-components for CSS in JS
• Storybook to show all of the available components in a demo
• Jest and React Testing Library to enable testing of the components

Running the Demo Locally

Prerequisites

• If you get an error running any npm command, it is because you do not have Node installed on your machine. To do so, Download Node here and follow the steps in the Node installer before proceding with the following steps.

Steps

1. Open Terminal or Command Prompt and navigate to the root directory of rc-shared-components.

cd <YOUR_WORKSPACE_PATH>/rc-shared-components

2. Copy the command below which will ensure you have the latest packages, and then will start the Storybook components demo.

npm i && npm start

When this command has finished running, it will open up a browser window / tab at http://localhost:6006.

Development

Testing

npm run test

Building

npm run build

Storybook

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

npm run storybook:start

To export your Storybook as static files:

npm run storybook:build

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

Installing Component Library Locally

Let's say you have another project (test-app) on your machine that you want to try installing the component library into without having to first publish the component library.

First let's create an npm link for the component library, so that it will pull from our local copy. At the root of rc-shared-components, simply run:

npm link

Then, in the test-app directory, you can run:

npm link rc-shared-components

which will link the local component library as a dependency in test-app. It'll then appear as a dependency in package.json like:

  ...
  "dependencies": {
    ...
    "rc-shared-components": "file:rc-shared-components",
    ...
  },
  ...

Your components can then be imported and used in that project.

Publishing

First, make sure you have an NPM account and are logged into NPM using the npm login command.

• Make sure to update the version number in package.json following the correct SEMVER guidelines
• Update the CHANGELOG.md document with the changes
• Then run the following command which will build and publish the dist to npm:

npm run build:publish