JSPM

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:

1. Border box and all elements

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

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

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

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

Building

yarn build

Testing

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

yarn test

Jest Configuration

To ensure your Jest tests work seamlessly with @procore/core-react, we provide a configuration wrapper that you can easily use in your Jest setup.

Using Jest config file

jest.config.js

const { coreReactJestConfig } = require('@procore/core-react/jestConfig');

module.exports = coreReactJestConfig({
  // Your existing Jest config
});

Using Hammer

hammer.config.js

import { coreReactJestConfig } from '@procore/core-react/jestConfig';

export default {
  testJest: (defaultConfig) => coreReactJestConfig({
    ...defaultConfig,
    // Your existing Jest config
  })
};

Using Core Scripts

procore.config.js

const { coreReactJestConfig } = require('@procore/core-react/jestConfig');

module.exports = () => ({
  jestOverride: (defaultConfig) => coreReactJestConfig({
    ...defaultConfig,
    // Your existing Jest config
  }),
});

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