# Grover UI `react` components
> [!TIP]
> Are you looking for help migrating to v6? Check out the [migration guide](MIGRATION.md).
---
### Installation:
```js
yarn add @getgrover/ui
```
### Usage:
Import fonts:
Every consumer of this library is expected to add the required fonts on its own. This can be done by adding the following snippet to the `` of your applications `html`:
```html
```
> [!NOTE]
> Its also important that consumers set the `font-family` for the elements making use of the font. Starting in v6, `theme.typography` styles no longer set `font-family` for you. Recommended `font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;`
Every component is a named export. You can import any component as follows:
```ts
import { Button } from '@getgrover/ui';
```
The UI library currently offers two different build outputs: umd (main) and esm (module). Depending on your build setup your bundler will prefer the tree-shakable esm.
### Storybook
The storybook deployment for the UI library can be found here: https://main.ui-storybook-dev.eu-staging.grover.com/
### Development:
This repository is maintained by @devsbb/retention but everyone is welcome to contribute. For contributing guidelines, please see [contributing](../ui/.github/CONTRIBUTING.md).
Local development process implemented through [`@storybook/react`](https://github.com/storybooks/storybook/tree/master/app/react). Please read this documentation before staring developing new components.
1. Create new component in `/packages` folder
2. Import new component through init. file `/index.ts`
3. Create new story in the component folder `packages/NewComponent/NewComponent.stories.jsx`
4. Type `yarn start` to run the development server
5. Storybook started on => http://localhost:6006/
6. Repeat 1-4 (_"Hot Module Replacement"_ is running)
### Customization
We want consumers to be able to customize UI components according to their needs. Since we build all new components via `styled-components`, there are have two ways for a single component to allow it's customization:
- if we want the consumer to slightly alter the component look, we export its settings via the theme.
- if we want to allow any customization to build new components on top of the current one, we go with the `classNames` + `styled.attrs` approach (take a look at the `Input` component).
### Release process
This project uses semantic releases.
> [!IMPORTANT]
> PR names must follow Angular Commit Message Conventions. If they don't no release will be triggered, nor will the commit appear in the changelog part of the release.
> [!IMPORTANT]
> When merging PRs, ensure that the "squash and merge" option is selected to ensure that each PR only results in a single changelog line. If the standard "merge" option is selected, each commit in the PR will appear as a separate changelog item.