Chart: new gestalt-chart package setup

[AlbertCarreras]

Summary

What changed?

Internal: new gestalt-chart package setup

DOCUMENTATION

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, these are the three areas where you must do changes

####FIRST: BASIC SETUP

####Gestalt packages

• create a new folder within /packages following the pattern gestalt-<component_name>

• create 2 subfolders: /dist and /src

• create files:

  • /: package.json*, and rollup.config.js*
  • /src: index.js*, .css, .js, and .jsdom.js.
  • /dist: gestalt-<component_name>.js.flow*

• Use /package/gestalt or/package/gestalt-datepicker files as templates (copy & paste).

#####Gestalt configuration

• Add the new package to the following files
  • .gitignore: Important step so that build files inside /dist do not get pushed to Github.
    
  • .eslintignore: Important step to prevent getting eslint errors in build files inside /dist.
    
• gestalt/package.json: Important step so that your package gets built when running cd ~/gestalt && yarn build as well when you build the Gestalt Docs while developing when running cd ~/gestalt && yarn start.
  
  • gestalt/package.json: Important step so that Netlify can build your new package when pushed to Github.
    

####SECOND: DEVELOP YOUR COMPONENT

#####Gestalt Packages

• Configure the new package//package.json to correctly setup dependencies:
  
• Configure the new package//rollup.config.js to correctly build your package:
  
• Develop your new component: .js and .css.
  • If your component is using external dependencies (external components), it might come with its own CSS styles.
  • A good approach is to not import the CSS file from the dependency (small bundles) and create a new file that only styles the classnames on the features used in the new component.
  • This approach will help you prevent styling while overriding the imported CSS.
  • The Gestalt library uses CSS modules. If your external component allows injecting your own classnames, use CSS modules. If not, work with global classes; to use global classes, wrap your component with:

• Test your new component with @react-testing-library
• Run yarn build
  

####THIRD: CODE EDITORS & SANDBOXES

Add the new package to all code editors and sandboxes so they can work with your new package

Original datepicker package PR: https://github.com/pinterest/gestalt/pull/913/files#diff-528119d81e5a10738ae49f5e20d333ebc37cea63657eb9069281693e6dae0ad3

[netlify]

✅ Deploy Preview for gestalt ready!

Name	Link
🔨 Latest commit	7e64daa
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/64e4c9187cf33b0008f252de
😎 Deploy Preview	https://deploy-preview-3143--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rlingineni]

Seems Okay!

[diyorbek]

What's this file for?

[diyorbek]

LGTM 👍