Chart: new gestalt-chart package setup (#3143)

pinterest · Aug 22, 2023 · 30d7f61 · 30d7f61
1 parent d20df7b
commit 30d7f61
Show file tree

Hide file tree

Showing 42 changed files with 628 additions and 24 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -5,6 +5,7 @@ docs/docs-components/metadata.js
 flow-typed
 node_modules
 packages/gestalt/dist
+packages/gestalt-charts/dist
 packages/gestalt-datepicker/dist
 packages/eslint-plugin-gestalt/dist
 packages/eslint-plugin-gestalt/src/__fixtures__
diff --git a/.github/pr-title-checker-config.json b/.github/pr-title-checker-config.json
@@ -11,7 +11,7 @@
       "ESLint plugin: ",
       "Tokens: "
     ],
-    "regexp": "^(?=.*(?:ActivationCard|Avatar|AvatarGroup|Badge|Box|Button|ButtonGroup|Callout|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|Module|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|SlimBanner|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextArea|TextField|TileData|Toast|Tooltip|Upsell|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
+    "regexp": "^(?=.*(?:ActivationCard|Avatar|AvatarGroup|Badge|Box|Button|ButtonGroup|Callout|Chart|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|Module|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|SlimBanner|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextArea|TextField|TileData|Toast|Tooltip|Upsell|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
     "regexpFlags": "",
     "ignoreLabels": []
   },

diff --git a/.github/workflows/alpha.yml b/.github/workflows/alpha.yml
@@ -56,6 +56,8 @@ jobs:
           cd packages/gestalt-design-tokens
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha
           cd ../gestalt
+          yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha
+           cd ../gestalt-charts
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha
           cd ../gestalt-datepicker
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -86,6 +86,8 @@ jobs:
           cd packages/gestalt-design-tokens
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}
           cd ../gestalt
+          yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}
+           cd ../gestalt-charts
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}
           cd ../gestalt-datepicker
           yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }}

diff --git a/.gitignore b/.gitignore
@@ -12,14 +12,17 @@ screenshots
 package-lock.json
 
 packages/gestalt/dist/*
+packages/gestalt-charts/dist/*
 packages/gestalt-datepicker/dist/*
 packages/eslint-plugin-gestalt/dist/*
 packages/gestalt-design-tokens/dist
 
 # the following files as they are maintained by hand
 !packages/gestalt/dist/gestalt.js.flow
+!packages/gestalt-charts/dist/gestalt-charts.js.flow
+!packages/gestalt-datepicker/dist/gestalt-datepicker.js.flow
 !packages/gestalt/dist/index.d.ts
-!packages/gestalt/dist/gestalt-datepicker.js.flow
+!packages/gestalt-charts/dist/index.d.ts
 !packages/gestalt-datepicker/dist/index.d.ts
 
 playwright/test-results

diff --git a/README.md b/README.md
@@ -10,13 +10,15 @@ The package can be installed via npm:
 
 ```bash
 npm i gestalt --save
+npm i gestalt-charts --save
 npm i gestalt-datepicker --save
 ```
 
 Or via yarn:
 
 ```bash
 yarn add gestalt
+yarn add gestalt-charts
 yarn add gestalt-datepicker
 ```
 
@@ -27,6 +29,8 @@ Gestalt exports each component as ES6 modules and a single, precompiled CSS file
 ```js
 import { Text } from 'gestalt';
 import 'gestalt/dist/gestalt.css';
+import 'gestalt/dist/gestalt-charts.css';
+import '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.

diff --git a/docs/docs-components/DevelopmentEditor.js b/docs/docs-components/DevelopmentEditor.js
@@ -3,6 +3,7 @@ import { type Node } from 'react';
 import { LiveError, LivePreview, LiveProvider } from 'react-live';
 import { Box, Flex, HelpButton, Link, Text } from 'gestalt';
 import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace
+import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace
 import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace
 import { useAppContext } from './appContext.js';
 import theme from './atomDark.js';
@@ -40,7 +41,7 @@ const reactImports = [
 
 const reactRegex = new RegExp(`(${reactImports.join('|')})`, 'g');
 
-const importsToRemove = ['gestalt', 'gestalt-datepicker', 'react'];
+const importsToRemove = ['gestalt', 'gestalt-charts', 'gestalt-datepicker', 'react'];
 
 const importsToRemoveRegex = new RegExp(
   `import (.|\n)*(${importsToRemove.map((item) => `'${item}'`).join('|')});`,
@@ -54,7 +55,7 @@ export default function DevelopmentEditor({ code }: {| code: ?string | (() => No
     return null;
   }
 
-  const scope = { ...gestalt, ...gestaltDatepicker };
+  const scope = { ...gestalt, ...gestaltChart, ...gestaltDatepicker };
 
   const codeFileCleaned = code
     ?.toString()

diff --git a/docs/docs-components/Example.js b/docs/docs-components/Example.js
@@ -2,6 +2,7 @@
 import { type Node } from 'react';
 import { LiveError, LivePreview, LiveProvider } from 'react-live';
 import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace
+import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace
 import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace
 import theme from './atomDark.js';
 import Card from './Card.js';
@@ -31,7 +32,7 @@ function Example({
   skipContrastCheck = false,
 }: Props): Node {
   const code = defaultCode.trim();
-  const scope = { ...gestalt, ...gestaltDatepicker };
+  const scope = { ...gestalt, ...gestaltChart, ...gestaltDatepicker };
 
   return (
     <Card

diff --git a/docs/docs-components/MainSectionCard.js b/docs/docs-components/MainSectionCard.js
@@ -3,6 +3,7 @@ import { type Node, useCallback } from 'react';
 import { LiveError, LivePreview, LiveProvider } from 'react-live';
 import { Box, Text } from 'gestalt';
 import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace
+import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace
 import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace
 import theme from './atomDark.js';
 import OpenSandboxButton from './buttons/OpenSandboxButton.js';
@@ -59,7 +60,7 @@ function MainSectionCard({
   type = 'info',
 }: Props): Node {
   const code = defaultCode?.trim();
-  const scope = { ...gestalt, ...gestaltDatepicker };
+  const scope = { ...gestalt, ...gestaltChart, ...gestaltDatepicker };
   const borderStyle =
     type !== 'info' ? `3px solid var(--color-background-${TYPE_TO_COLOR[type]}-base)` : undefined;
   const cardTitle = Array.isArray(title) ? title.join(', ') : title;

diff --git a/docs/docs-components/PageHeader.js b/docs/docs-components/PageHeader.js
@@ -1,6 +1,8 @@
 // @flow strict
 import { type Element, type Node } from 'react';
 import { Badge, Box, Flex, Heading, Link, SlimBanner, Text } from 'gestalt';
+import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace
+import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace
 import trackButtonClick from './buttons/trackButtonClick.js';
 import componentData from './data/components.js';
 import getByPlatform from './data/utils/getByPlatform.js';
@@ -11,8 +13,19 @@ import { SlimBannerExperiment } from './SlimBannerExperiment.js';
 
 const webComponentData = getByPlatform(componentData, { platform: 'web' });
 
+const gestaltChartComponents = Object.keys(gestaltChart);
+const gestaltDatepickerComponents = Object.keys(gestaltDatepicker);
+
 const buildSourceLinkPath = (componentName: string) => {
-  const packageName = componentName === 'DatePicker' ? 'gestalt-datepicker' : 'gestalt';
+  let packageName = 'gestalt';
+
+  if (gestaltChartComponents.includes(componentName)) {
+    packageName = 'gestalt-charts';
+  }
+
+  if (gestaltDatepickerComponents.includes(componentName)) {
+    packageName = 'gestalt-datepicker';
+  }
   return `packages/${packageName}/src/${componentName}.js`;
 };
 

diff --git a/docs/docs-components/SandpackExample.js b/docs/docs-components/SandpackExample.js
@@ -173,6 +173,7 @@ export default function SandpackExample({
       files={{
         '/styles.css': {
           code: `@import "gestalt/dist/gestalt.css";
+          @import "gestalt-charts/dist/gestalt-charts.css";
           @import "gestalt-datepicker/dist/gestalt-datepicker.css";
           * { margin: 0; padding: 0;}
           body, html, #root { height: 100%; }`,
@@ -190,6 +191,14 @@ export default function SandpackExample({
                 }),
                 hidden: true,
               },
+              '/node_modules/gestalt-charts/package.json': {
+                code: JSON.stringify({
+                  name: 'gestalt-charts',
+                  main: './dist/gestalt-charts.js',
+                  style: 'dist/gestalt-charts.css',
+                }),
+                hidden: true,
+              },
               '/node_modules/gestalt-datepicker/package.json': {
                 code: JSON.stringify({
                   name: 'gestalt-datepicker',
@@ -202,6 +211,10 @@ export default function SandpackExample({
                 code: files.js,
                 hidden: true,
               },
+              '/node_modules/gestalt-charts/dist/gestalt-charts.js': {
+                code: files.js,
+                hidden: true,
+              },
               '/node_modules/gestalt-datepicker/dist/gestalt-datepicker.js': {
                 code: files.js,
                 hidden: true,
@@ -210,6 +223,10 @@ export default function SandpackExample({
                 code: files.css,
                 hidden: true,
               },
+              '/node_modules/gestalt-charts/dist/gestalt-charts.css': {
+                code: files.css,
+                hidden: true,
+              },
               '/node_modules/gestalt-datepicker/dist/gestalt-datepicker.css': {
                 code: files.css,
                 hidden: true,
@@ -243,7 +260,7 @@ export default function SandpackExample({
         dependencies: {
           ...(files
             ? { classnames: 'latest' }
-            : { gestalt: 'latest', 'gestalt-datepicker': 'latest' }),
+            : { gestalt: 'latest', 'gestalt-charts': 'latest', 'gestalt-datepicker': 'latest' }),
           react: '18.2.0',
           'react-dom': '18.2.0',
         },

diff --git a/docs/docs-components/data/components.js b/docs/docs-components/data/components.js
@@ -22,6 +22,7 @@ import ButtonGroup from '../../graphics/general/ButtonGroup.svg';
 import ButtonLink from '../../graphics/general/ButtonLink.svg';
 import Callout from '../../graphics/general/Callout.svg';
 import Card from '../../graphics/general/Card.svg';
+// import Chart from '../../graphics/general/Chart.svg';
 import Checkbox from '../../graphics/general/Checkbox.svg';
 import Collage from '../../graphics/general/Collage.svg';
 import ComboBox from '../../graphics/general/ComboBox.svg';
@@ -494,6 +495,32 @@ const componentData: $ReadOnlyArray<ComponentData> = [
       },
     },
   },
+  // {
+  //   id: 'Chart',
+  //   platform: {
+  //     web: {
+  //       name: 'Chart',
+  //       visual: {
+  //         svg: <Chart />,
+  //       },
+  //       description: 'WIP ',
+  //       category: ['Data'],
+  //       status: {
+  //         accessible: {
+  //           summary: 'notAvailable',
+  //           a11yVisual: 'notAvailable',
+  //           a11yScreenreader: 'notAvailable',
+  //           a11yNavigation: 'notAvailable',
+  //           a11yComprehension: 'notAvailable',
+  //         },
+  //         documentation: 'notAvailable',
+  //         figmaStatus: 'notAvailable',
+  //         responsive: 'notAvailable',
+  //         status: 'notAvailable',
+  //       },
+  //     },
+  //   },
+  // },
   {
     id: 'Checkbox',
     platform: {

diff --git a/docs/docs-components/handleCodeSandbox.js b/docs/docs-components/handleCodeSandbox.js
@@ -1,6 +1,7 @@
 // @flow strict
 import LZString from 'lz-string';
 import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace
+import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace
 import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace
 
 const compress = (object: {|
@@ -12,6 +13,7 @@ const compress = (object: {|
       content: {|
         dependencies: {|
           gestalt: string,
+          'gestalt-charts': string,
           'gestalt-datepicker': string,
           react: string,
           'react-dom': string,
@@ -42,6 +44,7 @@ const dedupeArray = <T>(arr: $ReadOnlyArray<T>): $ReadOnlyArray<T> => [...new Se
 
 const handleCodeSandbox = async ({ code, title }: {| code: string, title: string |}) => {
   const gestaltComponents = Object.keys(gestalt);
+  const gestaltChartComponents = Object.keys(gestaltChart);
   const gestaltDatepickerComponents = Object.keys(gestaltDatepicker);
 
   const usedComponents = dedupeArray([
@@ -53,6 +56,10 @@ const handleCodeSandbox = async ({ code, title }: {| code: string, title: string
 
   const baseGestaltComponents = gestaltComponents.filter((x) => usedComponents.includes(x));
 
+  const baseGestaltChartComponents = gestaltChartComponents.filter((x) =>
+    usedComponents.includes(x),
+  );
+
   const baseGestaltDatePickerComponents = gestaltDatepickerComponents.filter((x) =>
     usedComponents.includes(x),
   );
@@ -61,6 +68,7 @@ const handleCodeSandbox = async ({ code, title }: {| code: string, title: string
     const imports = [`import "../node_modules/gestalt/dist/gestalt.css"`];
     if (baseGestaltDatePickerComponents.length > 0) {
       imports.push('import "../node_modules/gestalt-datepicker/dist/gestalt-datepicker.css";');
+      imports.push(`import { ${baseGestaltChartComponents.join(', ')} } from "gestalt-charts";`);
       imports.push(
         `import { ${baseGestaltDatePickerComponents.join(', ')} } from "gestalt-datepicker";`,
       );
@@ -83,6 +91,7 @@ const handleCodeSandbox = async ({ code, title }: {| code: string, title: string
             react: 'latest',
             'react-dom': 'latest',
             gestalt: 'latest',
+            'gestalt-charts': 'latest',
             'gestalt-datepicker': 'latest',
           },
           devDependencies: {

diff --git a/docs/docs-components/siteIndex.js b/docs/docs-components/siteIndex.js
@@ -113,6 +113,7 @@ const siteIndex: $ReadOnlyArray<siteIndexType> = [
       'ButtonLink',
       'ButtonGroup',
       'Callout',
+      'Chart',
       'Checkbox',
       'Collage',
       'Column',

diff --git a/docs/graphics/general/Chart.svg b/docs/graphics/general/Chart.svg
diff --git a/docs/markdown/get_started/developers/contributing/development_process.md b/docs/markdown/get_started/developers/contributing/development_process.md
@@ -182,6 +182,13 @@ git push -f origin HEAD
 
 - When sharing preview urls, you may have to remind viewers to toggle on development mode from the header menu. This is necessary to see unpublished changes in the code examples. To simplify sharing, you can add a `?devexample=true` parameter to the url to enable the examples by default.
 
+## Create a new package
+
+When should you create a new gestalt- package instead of adding a new component to the existing gestalt?
+
+Gestalt is a lightweight package with only 2 dependencies: "classnames" and "prop-types". By using the minimal amount of dependencies, we can maintain the size of the bundle small. If a new component requires external packages, it's worth isolating it in a single package so that importing Gestalt in our codebase keeps a small bundle.
+
+When adding a new package, follow the steps in this PR: https://github.com/pinterest/gestalt/pull/3143
 
 <details>
   <summary><b>My pull request fails on "Semver / Require Label (pull_request)", how do I fix it?</b></summary>

diff --git a/docs/package.json b/docs/package.json
@@ -6,7 +6,7 @@
   "homepage": "https://gestalt.pinterest.systems/",
   "scripts": {
     "dev": "(next dev) & (yarn dev-metadata)",
-    "dev-metadata": "nodemon -w ../packages/gestalt/src -w ../packages/gestalt-datepicker/src --exec 'yarn build-metadata'",
+    "dev-metadata": "nodemon -w ../packages/gestalt/src -w ../packages/gestalt-charts/src -w ../packages/gestalt-datepicker/src --exec 'yarn build-metadata'",
     "build": "yarn build-metadata && next build",
     "build-metadata": "../scripts/generateMetadata.js",
     "start": "next start"
@@ -15,6 +15,7 @@
     "@mdx-js/react": "^2.1.1",
     "date-fns": "^2.16.1",
     "gestalt": ">0.0.0",
+    "gestalt-charts": ">0.0.0",
     "gestalt-datepicker": ">0.0.0",
     "gestalt-design-tokens": ">0.0.0",
     "gray-matter": "^4.0.3",

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -1,6 +1,7 @@
 // @flow strict
 import '../docs.css';
 import 'gestalt/dist/gestalt.css';
+import 'gestalt-charts/dist/gestalt-charts.css';
 import 'gestalt-datepicker/dist/gestalt-datepicker.css';
 import { promises as fs } from 'fs';
 import path from 'path';

diff --git a/docs/pages/get_started/developers/installation.js b/docs/pages/get_started/developers/installation.js
@@ -28,6 +28,15 @@ or
 ~~~jsx
 yarn add gestalt
 ~~~
+To install the Chart package:
+~~~jsx
+npm i gestalt-charts --save
+~~~
+or
+~~~jsx
+yarn add gestalt-charts
+~~~
+
 To install the DatePicker package:
 ~~~jsx
 npm i gestalt-datepicker --save
@@ -66,6 +75,14 @@ import 'gestalt/dist/gestalt.css';
 import { DatePicker } from 'gestalt-datepicker';
 import 'gestalt-datepicker/dist/gestalt-datepicker.css';
 ~~~
+"
+          />
+          <Markdown
+            text="
+~~~jsx
+import { Chart } from 'gestalt-charts';
+import 'gestalt-charts/dist/gestalt-charts.css';
+~~~
 "
           />