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: 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({
});
Using Hammer
hammer.config.js
import { coreReactJestConfig } from '@procore/core-react/jestConfig';
export default {
testJest: (defaultConfig) => coreReactJestConfig({
...defaultConfig,
})
};
Using Core Scripts
procore.config.js
const { coreReactJestConfig } = require('@procore/core-react/jestConfig');
module.exports = () => ({
jestOverride: (defaultConfig) => coreReactJestConfig({
...defaultConfig,
}),
});
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