@procore/core-react/README.md

React library of Procore Design Guidelines

## CORE React ![npm](https://img.shields.io/npm/v/@procore/core-react.svg) ![npm](https://img.shields.io/npm/dt/@procore/core-react.svg)

A set of React components implementing the design system spec.

## Requirements

Node 16+
YARN 4+

## Usage

### Install

Install `@procore/core-react` from [NPM](https://www.npmjs.com/package/@procore/core-react).

```sh
yarn add @procore/core-react
```

Install the peer dependencies.

```sh
yarn add styled-components @procore/globalization-toolkit react-beautiful-dnd react react-dom
```

Install the optional peer dependencies if necessary.

```sh
yarn add formik
```

### Styles

Core React's styled components handle all style inclusion except for two cases:

1. Border box and all elements

```css
*,
::after,
::before {
  box-sizing: border-box;
}
```

2. Font Family

```css
font-family: Inter, 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC',
  'Noto Sans TC', Arial, sans-serif;
```

### Imports

Named imports support tree shaking and types.

```tsx
import { Button, ButtonProps } from '@procore/core-react'
import { Cog } from '@procore/core-icons'

export function ButtonCustom(props: ButtonProps) {
  return <Button {...props} icon={<Cog />} />
}
```

## Developing

To get started, type the following from the project root directory:

```sh
yarn
```

All commands below will be ran in the package directory:

```sh
cd packages/core-react
```

We use Storybook to develop. Stories are broken into two categories, Demos for interactions and Coverage for displaying variants.

```sh
yarn storybook
```

## Testing

Testing currently consists of Jest snapshots and React Testing Library tests.

```sh
yarn test
```

Additional testing includes Visual Regression Testing (VRT) that is ran in CI, which compares pixel snapshots of Storybook Coverage stories.

## Building

```
yarn build
```

## Contributing and Styleguide

Bug reports and pull requests are welcome on GitHub at https://github.com/procore/core. This project is
intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the
[Contributor Covenant](http://contributor-covenant.org) code of conduct.

In lieu of a formal styleguide, we use [husky](https://github.com/typicode/husky) to create a `precommit` hook, which executes [lint-staged](https://github.com/okonet/lint-staged) to automatically format any git staged files using [prettier](https://github.com/prettier/prettier).

## License

The package is available under the [Procore Developers License](https://developers.procore.com/terms_and_conditions)

## About Procore

<img
  src="https://www.procore.com/images/procore_logo.png"
  alt="Procore Logo"
  width="250px"
/>

Procore - building the software that builds the world.

Learn more about the #1 most widely used construction management software at [procore.com](https://www.procore.com/)