Gatsby Interface
Storybook available at gatsby-interface.netlify.com:
Installation
Using npm:
npm install gatsby-interface --save
Using Yarn:
yarn add gatsby-interface
Fonts
Certain Gatsby Interface components require the Futura PT
webfont. These files are git-ignored to prevent the unauthorized release of licensed assets, and are not included in this repository.
Gatsby Inc. employees can download these fonts from our Google Drive. Put all those folders in src/assets/futura-pt
and you should be good to go!
Development
- Clone the repository:
git clone https://github.com/gatsby-inc/gatsby-interface.git
. - Install dependencies:
yarn
. - Run Storybook:
yarn storybook
.
Adding a new component
If you want to add a new component to gatsby-interface
, run yarn scaffold:component
to create stubs:
yarn scaffold:component MyNewComponent
This script will do the following:
- Create a
MyNewComponent
directory for the component at ./src/components
- Generate a file for the component itself,
MyNewComponent.tsx
, with stubs for props type, styles and even some variants - Generate a story file,
MyNewComponent.stories.tsx
, which follows the suggestions from Component Checklist proposal. - Generate an index file,
index.ts
, which reexports everything from the component file - Add export statements to library index files:
./src/index.ts
and ./index-ts-only.ts
.
Everything that is generated should be working out of the box and be ready to shipped (though please avoid shipping the stubs 😅)
Contributing
These are some patterns and best practices we use when contributing to gatsby-interface
:
Chromatic testing
To run the visual testing tool, run CHROMATIC_APP_CODE=<insert_app_code> yarn chromatic
You can find the app code in the Chromatic dashboard - https://www.chromaticqa.com
❗ Code of Conduct
Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜