React Component Library

Usage

Let's say you created a public NPM package called annexcloud-loyalty with the LoyaltyComponent component created in this repository.

Usage of the component (after the library installed as a dependency into another project) will be:

import React from "react";
import { LoyaltyComponent } from "annexcloud-loyalty";

const App = () => (
  <div className="app-container">
    <h1>Hello I'm consuming the annexcloud-loyalty dashboard</h1>
    <LoyaltyComponent theme="primary" />
  </div>
);

export default App;

Check out this Code Sandbox for a live example.

Using Component Library SASS Variables

I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the rollup-plugin-copy NPM package and used it to copy the src/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.

For example, let's say you installed annexcloud-loyalty into your project. To use the exported variables/mixins, in a SASS file you would do the following:

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

.example-container {
    @include heading;

    color: $harvey-white;
}

Additional Help

Dark Mode

The example component LoyaltyComponent respects the user's dark mode operating system preferences and renders the component in the appropriate theme.

This is achieved by using the media query: @media (prefers-color-scheme: dark) in combination with CSS variables. The colours that change depending on dark mode preference can be found in src/variables.scss. Example usage of these variables can be found within src/LoyaltyComponent/LoyaltyComponent.scss.