@procore/core-react

CORE React

A set of React components implementing the design system spec.

Requirements

Node 16+ YARN 4+

Usage

Install

Install @procore/core-react from NPM.

yarn add @procore/core-react

Install the peer dependencies.

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

Install the optional peer dependencies if necessary.

yarn add formik

Styles

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

• Border box and all elements

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

• Font Family

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.

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

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

Shadow DOM focus support

If your app renders interactive content inside an open shadow root (for example, micro-frontend content in a custom element), enable React Aria shadow-DOM focus traversal for core-react at app bootstrap.

This ensures focus containment and tab order can move through shadow-root content for components that use React Aria focus management, like Tearsheet, Modal, and overlays.

import { enableShadowDOM } from '@procore/core-react'

enableShadowDOM()

Call this once before mounting your app. The call is idempotent, and each application using its own core-react instance should invoke it during bootstrap.

Developing

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

yarn

All commands below will be ran in the package directory:

cd packages/core-react

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

yarn storybook

Testing

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

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 code of conduct.

In lieu of a formal styleguide, we use husky to create a precommit hook, which executes lint-staged to automatically format any git staged files using prettier.

License

The package is available under the Procore Developers License

About Procore

Procore - building the software that builds the world.

Learn more about the #1 most widely used construction management software at procore.com