lune-ui-lib/README.md

Lune UI Components Library

# 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](https://mui.com/customization/theming/) in your project.

The components can be viewed on our [Storybook instance](https://storybook.lune.co/) (Lune SSO login required).

## Develop The Library

The Lune UI Lib is partially based on [MUI](https://mui.com/getting-started/installation/). 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`](https://reactjs.org/warnings/invalid-hook-call-warning.html) 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';
```