JSPM

CORE React

A set of React components implementing the design system spec.

Requirements

Node 14+ NPM or Yarn

Usage

Install

Install @procore/core-react from NPM.

yarn add @procore/core-react

or

npm install @procore/core-react

Install the peer dependencies.

yarn add formik styled-components react react-dom

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 />} />
}

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, Enzyme tests, and React Testing Library tests.

yarn test

Visual Regression Testing is ran in CI, pixel snapshots of 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