npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gestalt-root

v0.0.10

Published

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.

Downloads

6

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:

npm i gestalt --save
npm i gestalt-charts --save
npm i gestalt-datepicker --save

Or via yarn:

pnpm add gestalt
pnpm add gestalt-charts
pnpm add gestalt-datepicker

Usage

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

import { Text } from '@zazcart/gestalt';
import '@zazcart/gestalt/dist/gestalt.css';
import '@zazcart/gestalt/dist/gestalt-datepicker.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 and components are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

yarn
pnpm test

Build and watch Gestalt & run the docs server:

pnpm start

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.

Codemod 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 TypeScript:

pnpm codemod --parser=tsx -t={relative/path/to/codemod} relative/path/to/your/code.tsx

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

Gestalt officiallty supports and maintains Typescript declarations files.

Issues

Gestalt is Pinterest's open-sourced design system. However, Gestalt's web component library is almost exclusively developed by a 5 engineer team within Pinterest, and our primary customers are Pinterest engineers who use Gestalt. The team’s priority is the needs of our internal Pinterest customers.

We do not have resources to work on features or issues requested only by external developers. We also handle a very large amount of internal support requests, so we do not have the resources to respond to external Github issues.

Pinterest is staying open source, as it's a great resource for the design and engineering community, but we don't provide support to external developers. If you need to get in touch, send us an email.

Troubleshooting

Take a look at our FAQ section if you run into any development problems.