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).
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.
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.
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.
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.
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.
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>
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';