A set of React components implementing the design system spec.
Node 16+ YARN 1.22+
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
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;
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 />} />
}
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 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.
yarn build
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.
The package is available under the Procore Developers License
Procore - building the software that builds the world.
Learn more about the #1 most widely used construction management software at procore.com