Gestalt
Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.
View the full docs or Check out the Gestalt playground
Install
npm i gestalt --save
or yarn add gestalt
Usage
Gestalt exports each component as ES6 modules and a single, precompiled CSS file:
import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';
That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.
Development
Gestalt is a multi-project monorepo. The docs, components and integration tests are all organized as separate packages that share similar tooling.
Install project dependencies and run tests:
yarn
yarn test
Build and watch Gestalt & run the docs server:
yarn start
Visit http://localhost:3000/ and click on a component to view the docs.
Using the Masonry playground:
cd test && yarn start
open "http://localhost:3001/Masonry"
Running Masonry's integration tests. This will leave lots of Firefox processes hanging around, so please be warned.
./run_integration_tests
Releasing
If you haven’t already, you’ll first need to create an npm account. Once you've done that
you can setup your username and email in Yarn using yarn login
.
The following outlines our release process:
- Checkout a new branch.
- Bump package version in
packages/gestalt/package.json
& updateCHANGELOG.md
. - Open a pull request with the new version and land that in master.
- Once the version is bumped in master, checkout that commit locally.
- Run
npm login
using your npm username and password. - Run the release script from the root directory of the project
./scripts/publish.js
to publish the tag, npm package, and docs. - Draft a new release from the tag at https://github.com/pinterest/gestalt/releases.