A set of React UI components that supports Pinterest’s design language
Clone or download
chrislloyd TravisCI (#333)
Buildkite is a personal expense for me. This adds Gestalt's CI to also run in Travis.

- Travis has issues with zombie processes so I cleaned up the janky ./run_integration_tests script to cleanly kill all processes.
- I've disabled the bundlesize check from Danger (cc @bishwei) as it uses Buildkite's artifact storage.
- I've cleaned up the greenkeeper-lockfile steps from Buildkite that I don't have to port them to Travis and they're also unused.
Latest commit 92c80af Nov 11, 2018
Permalink
Failed to load latest commit information.
.buildkite TravisCI (#333) Nov 11, 2018
.github Masonry experiments warning (#374) Sep 24, 2018
docs Updated Masonry docs to have better prop descriptions (#417) Nov 7, 2018
flow-typed/npm Internal: Update flow-typed def for jest to match jest version (#346) Sep 7, 2018
flow/stubs Initial commit Feb 16, 2018
packages Updated tabs key to be a composite of index and href (#419) Nov 7, 2018
scripts TravisCI (#333) Nov 11, 2018
test Bumped React to 16.6 (#406) Oct 25, 2018
.babelrc babel-preset-es2015 to babel-preset-env (#85) May 2, 2018
.dockerignore Codecov (#185) May 16, 2018
.editorconfig Initial commit Feb 16, 2018
.eslintignore Internal: Flatten imports and use explicit extensions (#261) Jun 25, 2018
.eslintrc Update dependencies to enable Greenkeeper 🌴 (#282) Aug 29, 2018
.flowconfig [Flow] Bump flow to 0.81.0 (#376) Sep 24, 2018
.gitignore Internal: Workspaces (#22) Mar 3, 2018
.npmrc Initial commit Feb 16, 2018
.prettierignore Flow-typed support in Gestalt for third party packages (#174) May 13, 2018
.prettierrc Update dependencies to enable Greenkeeper 🌴 (#282) Aug 29, 2018
.stylelintrc TravisCI (#333) Nov 11, 2018
.travis.yml TravisCI (#333) Nov 11, 2018
CHANGELOG.md Updated tabs key to be a composite of index and href (#419) Nov 7, 2018
Dockerfile Internal: Convert ghostjs to puppeteer (#182) May 17, 2018
LICENSE Initial commit Feb 16, 2018
README.md Update dependencies to enable Greenkeeper 🌴 (#282) Aug 29, 2018
dangerfile.js TravisCI (#333) Nov 11, 2018
docker-compose.yml Add in greenkeeper env variables (#381) Sep 26, 2018
greenkeeper.json Fix the greenkeeper.json file (#322) Aug 30, 2018
netlify.toml Fix netlify build (#58) Mar 7, 2018
package.json TravisCI (#333) Nov 11, 2018
yarn.lock Bumped React to 16.6 (#406) Oct 25, 2018

README.md

Gestalt

Build status NPM Version Coverage status Greenkeeper badge

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:

  1. Checkout a new branch.
  2. Bump package version in packages/gestalt/package.json & update CHANGELOG.md.
  3. Open a pull request with the new version and land that in master.
  4. Once the version is bumped in master, checkout that commit locally.
  5. Run npm login using your npm username and password.
  6. Run the release script from the root directory of the project ./scripts/publish.js to publish the tag, npm package, and docs.
  7. Draft a new release from the tag at https://github.com/pinterest/gestalt/releases.

Typescript Support

Install the DefinitelyTyped definitions.

Install

npm i --save @types/gestalt

or

yarn add @types/gestalt