lune-ui-lib

Lune UI Components Library

Library of UI components for React client-side applications. Use within your Lune projects to keep the style system consistent. If you can't find a component you need - add it here first and import it in your project. All reusable components should live here.

The lib also exports the Lune MUI Theme object and is its Single Source of Truth. Import it and use it if using MUI Theming in your project.

The components can be viewed on our Storybook instance (Lune SSO login required).

Develop The Library

The Lune UI Lib is partially based on MUI. MUI components should be used internally where appropriate even if your new component is just a wrapper that injects styling into an MUI Component. Styling values like spacing, colors, typography etc. should generally reference existing values from the Lune Theme object.

Working locally in Storybook

The easiest way to see your component in action is to run Storybook locally.

• Add you comp
• Add a story for your comp (see examples in src/stories)
• Make sure you have modules "react" and "react-dom" installed locally (but do NOT add them to devDependencies)
• Run yarn storybook

Storybook can act like your local dev server complete with hot reloading.

Working on lune-ui-lib within your webapp

You can symlink the lune-ui-lib folder to your webapp's node_modules folder to immediately see your component in the intended context without merging or publishing:

In lib project:

$ yarn link
$ yarn watch

On your webapp:

linking:

$ yarn link lune-ui-lib
$ yarn install
$ yarn start

unlinking:

$ yarn unlink lune-ui-lib
$ yarn install --force

aaand you're good to go!

If you get Invalid Hook Call Warning error, you should make sure react and react-dom are NOT present in the node-modules of lune-ui-lib.

Publish your component

To add a new component to the library, follow these steps:

• Add new components to the src/components directory.
• Add a story in src/stories/ for each component.
• Open a PR and (eventually) merge it to master

This will kick off a Github action that will automatically bump the minor version of the library and publish to npm.

Run tests

To run tests you must first install react and react-dom as

yarn add -D react react-dom

Then yarn test.

Please do not include react(-dom) in your commit.

Use The Library

The Lune Theme

If your project uses MUI Theming, you should inject the Lune Theme object into the MUI Theme Provider

import { ThemeProvider } from '@material-ui/styles';
import { LuneTheme } from 'lune-ui-lib';

<ThemeProvider theme={LuneTheme}>
  <MyApp />
</ThemeProvider>

Add lune-ui-lib library to your project

This works like any other npm module. In your project:

$ yarn add lune-ui-lib

Then import the stuff you need eg:

import { Button } from 'lune-ui-lib';