npm package: @getgrover/ui
Description: Reusable UI components for grover web apps
Author: grover.com
Latest version: 6.12.0

# 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 `<head>` of your applications `html`:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700;800&display=swap"
    rel="stylesheet"
/>
```

> [!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.