Hammer React Library

<h1 align="center">
  Hammer React Library
</h1>

Hammer React contains flexible, customizable, reusable components and utilities for building complex UIs and layered design systems.

## Hammer and Anvil2 Note

In this monorepo, there are both Hammer and Anvil2 packages. Hammer (e.g. `@servicetitan/hammer-react`), is the base library that the Anvil team maintains and `@servicetitan/anvil2` builds on top of.

Anvil2 is more opinionated and ServiceTitan-specific, and can also include more complex components and customizations of Hammer.

Much of the source code for Anvil2 components (`packages/anvil2`) actually exists in this package. When releasing updates, making changes in Hammer will automatically propagate to Anvil2, as long as the component/function/type is exported from the `packages/anvil2` package as well.

# Getting Started

## Installation

We recommend installing Hammer React by running the following `npm` command (or the equivalent `yarn`/`pnpm` command) in your project folder:

```
npm install @servicetitan/hammer-react
```

## Usage

### Components

Components can be imported as named exports from the package root:

```tsx
import { Button, Icon } from "@servicetitan/hammer-react";
```

### Icons

> To learn more about Hammer Icons, head to [`packages/hammer-icon`](../hammer-icon/README.md).

Hammer icons are expected to be used with the [SVGR](https://github.com/gregberge/svgr) library, which will import SVGs as React components. SVGR is already included in the build process for this package.

Importing and using an icon:

```tsx
import { Button, Icon } from "@servicetitan/hammer-react";

import Warning from "@servicetitan/hammer-icon/mdi/round/warning.svg";
import Star from "@servicetitan/hammer-icon/mdi/round/star.svg";
import LocalSettings from "@servicetitan/hammer-icon/mdi/round/local_settings.svg";

export const Example = () => (
  <>
    <Icon svg={Warning} size="large" />
    <Button icon={Star} aria-label="Favorite" />
    <Button icon={LocalSettings}>Settings</Button>
  </>
);
```

# Contributing

We welcome contributions of all kinds from design to code!

Please reach out to our team in [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) if you would like to make a contribution.

Check out the [root-level Contributing docs](../../README.md#contributing) for more details on making changes to this package.