A tooling ecosystem
Gestalt is supported by an ecosystem of tools with the main goal of simplifying processes and automating tasks.
Gestalt's tooling ecosystem has several customers: the Gestalt development team, Pinterest engineers and designers, and non-Pinterest users of Gestalt.
The Gestalt team can highly benefit from measurement tools that support the communication of Gestalt's impact as well as inform Gestalt development decisions, generic codemods to modify Gestalt components after API changes, and generic scripts to locate Gestalt components in a codebase to simplify component usage analysis.
Any other engineers will highly benefit from reducing the amount of steps to adopt Gestalt by automating fixes and increasing Gestalt discoverability, bringing documentation closer to the code editor, and improving and speeding up Gestalt’s onboarding experience
Developer velocity tools
Every major breaking change on our library comes with a codemod to facilitate the upgrade of the Gestalt dependency. Some codemods are custom built for each upgrade while some upgrades take advantage of generic codemods that only require running a codemod command with options.
Custom codemods can be found in this directory under the corresponding upgrade version. Generic codemods (for common tasks like renaming components or props) can be found in this directory. When generic codemods are use for an upgrade, the specific command is included in the pull request with the major version change.
The generic codemods available are:
- renameComponent to rename Gestalt components.
- modifyProp to modify (rename or remove) Gestalt component props.
- modifyPropValue to modify (rename, add, or remove) prop-value combinations in Gestalt component.
- detectManualReplacement to throw error messages upon detection of components, props, and prop-value combinations in Gestalt components.
To learn more about developing generic codemods, read this page.
Visual Studio Code tooling
Props documentation on hover in Visual Studio Code
You can now see component and props documentation on hover in VSCode for certain Gestalt components. Quickly see what a component looks like, its sizes and other props documentation.
Visual Studio Code extension for Gestalt
Access Gestalt component snippets and documentation right on your VSCode editor. Right at your fingertips!
Gestalt Usage Visualizer
Visualize and easily identify the Gestalt usage on a page.
Monitor Gestalt usage metrics with a full suite of dashboards.
To effectively communicate the impact of Gestalt, we measure and track adoption. The quantitative measurement of adoption is an important metric to determine if we're making forward progress towards system usage.
The following table lists the currently available metrics to track Gestalt adoption. Most metrics are in absolute (#) units, while a few are expressed in relative units (%)
# total Gestalt components / (# native DOM elements + # total Gestalt component); % per site
# total Gestalt components; # per component
# total Gestalt components; # per prop & component
# total Gestalt components; # per prop value & prop & component
# total Gestalt extension components; # per component
# total Gestalt extension components; # per prop & component
# total Gestalt extension components; # per prop value & prop & component
# total native DOM elements; # per tag
# total native DOM elements; # per attribute & tag
# total native DOM elements; # per attribute value & attribute & tag
# total deprecated components; # per component
# total deprecated components; # per site
# Gestalt Box with dangerouslySetInlineStyle prop / (# total Gestalt Box); % per site
# most used CSS attributes passed to dangerouslySetInlineStyle; # per site