- Gestalt is a set of React UI components that enforces Pinterests 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
- 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:
- cd packages/gestalt
- yarn watch
- Start the docs server:
- cd docs
- yarn start
- open "http://localhost:8080"
- Visit http://localhost:8080/ and click on a component to view the docs.
- Using the Masonry playground:
- cd test && yarn start
- open "http://localhost:3000"
- Running Masonry's integration tests. This will leave lots of Firefox processes hanging around, so please be warned.
- ./run_integration_tests
- Releasing
- The following outlines our release process:
- Checkout a new branch.
- Bump package version in
- packages/gestalt/package.json
- & update CHANGELOG.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.
- Publish the tag, npm package, and docs with:
- ./scripts/publish.js
- .
- Draft a release from the tag and update the release notes from the CHANGELOG at github.com/pinterest/g.
来源: https://juejin.im/entry/5ab08a7af265da23826dce1e