Lifeway Core

React components for MLC and Lifeway Account. This library contains basic components like buttons and inputs.

Installation

To use this component library, install it into your project like this:

npm install @lifeway/core

Usage

To use the library, wrap your application with the ThemeProvider.

import { ThemeProvider } from '@lifeway/core';

function Demo() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

This is important! This ensures all the theme colors are loaded into the document.

You can also override the default theme by providing a theme prop to the ThemeProvider.

<ThemeProvider 
    theme={{
        colors: {
            primary: {
                main: "blue",
                darker: "darkblue",
                contrastText: "white"
            }
        }
        typography: {
            color: "#414042"
        }
    }}
>
    <App />
</ThemeProvider>

There are 6 colors you can customize:

• primary
• secondary
• success
• warning
• info
• neutral

Any colors you don't override will retain their default values.

Development

To develop, add features or fix bugs, fork this repository and pull it down to your machine. Once downloaded, run:

npm install

This project uses Storybook to help test and develop components in isolation without needing to create an entire React application. To start developing, run:

npm run storybook

This will start Storybook locally and open a webpage where you can see all the components in the library.

When you're ready to publish your changes, increment the version number in package.json. Push up your changes to your fork and create a PR. When the PR is merged, a GitHub Action will run to build and publish the package to npm.

Other notes

This project uses Typescript to provide better intellisense for applications using this package.