Gestalt

A set of React UI components that supports Pinterest’s design language

Design SystemReactComponent Toolkit
pinterest/gestaltgestalt.pinterest.systems/gestalt

README

Gestalt · NPM Version License


Gestalt is Pinterest’s design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.

Visit the official Gestalt Documentation

Installation


The package can be installed via npm:

  1. ``` sh
  2. npm i gestalt --save
  3. npm i gestalt-datepicker --save
  4. ```

Or via yarn:

  1. ``` sh
  2. yarn add gestalt
  3. yarn add gestalt-datepicker
  4. ```

Usage


Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

  1. ``` js
  2. import { Text } from 'gestalt';
  3. import 'gestalt/dist/gestalt.css';
  4. ```

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 and components are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

  1. ``` sh
  2. yarn
  3. yarn test
  4. ```

Build and watch Gestalt & run the docs server:

  1. ``` sh
  2. yarn start
  3. ```

Visit http://localhost:8888/ and click on a component to view the docs.

Codemods


When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process. Codemods are organized by release in /packages/gestalt-codemods.

Usage


Clone the Gestalt repo locally if you haven't already. Run the relevant codemod(s) in the relevant directory of your repo (not the Gestalt repo): anywhere the component to be updated is used. Example usage for a codebase using Flow:

  1. ``` sh
  2. yarn codemod --parser=flow -t={relative/path/to/codemod} relative/path/to/your/code
  3. ```

For a dry run to see what the changes will be, add the -d (dry run) and -p (print output) flags (pipe stdout to a file for easier inspection if you like).

Releasing


Every commit to master performs a release. As a reviewer, ensure the correct label is attached to every PR. Please follow semantic versioning.

- patch release: documentation updates / spelling mistakes in code / internal scripts
- minor release: add component / add component props / API change with codemod
- major release: backwards incompatible API change without codemod

Example PR title: Avatar: Add outline prop

Typescript Support


Install the DefinitelyTyped definitions.

Installation


Install via npm:

  1. ``` sh
  2. npm i --save @types/gestalt
  3. ```

Or via yarn:

  1. ``` sh
  2. yarn add @types/gestalt
  3. ```