Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mongodb/leafygreen-ui
LeafyGreen UI – LeafyGreen's React UI Kit
https://github.com/mongodb/leafygreen-ui
design-system emotion mongodb react ui-kit
Last synced: 1 day ago
JSON representation
LeafyGreen UI – LeafyGreen's React UI Kit
- Host: GitHub
- URL: https://github.com/mongodb/leafygreen-ui
- Owner: mongodb
- License: apache-2.0
- Created: 2018-11-08T01:14:44.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-23T20:33:32.000Z (4 days ago)
- Last Synced: 2024-12-23T21:28:29.551Z (4 days ago)
- Topics: design-system, emotion, mongodb, react, ui-kit
- Language: TypeScript
- Homepage: https://www.mongodb.design
- Size: 108 MB
- Stars: 221
- Watchers: 202
- Forks: 66
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
LeafyGreen UI
A library of React components, CSS patterns, and CLI tools for MongoDB's LeafyGreen Design System.
## Getting Started
### With LeafyGreen CLI
1. Create or open a React project
2. Install the LeafyGreen CLI
```bash
npm install -g @lg-tools/cli
```
3. Install all, or some LeafyGreen components
```bash
lg install
```
```bash
lg install button combobox
```
3. Import LeafyGreen components into your project
```tsx
import Button from '@leafygreen-ui/button';
import { Combobox, ComboboxOptions } from '@leafygreen-ui/combobox';
```
### Without CLI
1. Create or open a React project
2. Install individual LeafyGreen components using `npm` or `yarn`
```bash
yarn add @leafygreen-ui/button
```
3. Import LeafyGreen components into your project
```tsx
import Button from '@leafygreen-ui/button';
```
## Packages
| Package | Latest | Downloads | Docs |
| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| [@leafygreen-ui/a11y](./packages/a11y) | [](https://www.npmjs.com/package/@leafygreen-ui/a11y) |  | [Docs](http://mongodb.design/component/a11y/live-example) |
| [@leafygreen-ui/avatar](./packages/avatar) | [](https://www.npmjs.com/package/@leafygreen-ui/avatar) |  | [Docs](http://mongodb.design/component/avatar/live-example) |
| [@leafygreen-ui/badge](./packages/badge) | [](https://www.npmjs.com/package/@leafygreen-ui/badge) |  | [Docs](http://mongodb.design/component/badge/live-example) |
| [@leafygreen-ui/banner](./packages/banner) | [](https://www.npmjs.com/package/@leafygreen-ui/banner) |  | [Docs](http://mongodb.design/component/banner/live-example) |
| [@leafygreen-ui/box](./packages/box) | [](https://www.npmjs.com/package/@leafygreen-ui/box) |  | [Docs](http://mongodb.design/component/box/live-example) |
| [@leafygreen-ui/button](./packages/button) | [](https://www.npmjs.com/package/@leafygreen-ui/button) |  | [Docs](http://mongodb.design/component/button/live-example) |
| [@leafygreen-ui/callout](./packages/callout) | [](https://www.npmjs.com/package/@leafygreen-ui/callout) |  | [Docs](http://mongodb.design/component/callout/live-example) |
| [@leafygreen-ui/card](./packages/card) | [](https://www.npmjs.com/package/@leafygreen-ui/card) |  | [Docs](http://mongodb.design/component/card/live-example) |
| [@leafygreen-ui/checkbox](./packages/checkbox) | [](https://www.npmjs.com/package/@leafygreen-ui/checkbox) |  | [Docs](http://mongodb.design/component/checkbox/live-example) |
| [@leafygreen-ui/chip](./packages/chip) | [](https://www.npmjs.com/package/@leafygreen-ui/chip) |  | [Docs](http://mongodb.design/component/chip/live-example) |
| [@leafygreen-ui/code](./packages/code) | [](https://www.npmjs.com/package/@leafygreen-ui/code) |  | [Docs](http://mongodb.design/component/code/live-example) |
| [@leafygreen-ui/combobox](./packages/combobox) | [](https://www.npmjs.com/package/@leafygreen-ui/combobox) |  | [Docs](http://mongodb.design/component/combobox/live-example) |
| [@leafygreen-ui/confirmation-modal](./packages/confirmation-modal) | [](https://www.npmjs.com/package/@leafygreen-ui/confirmation-modal) |  | [Docs](http://mongodb.design/component/confirmation-modal/live-example) |
| [@leafygreen-ui/copyable](./packages/copyable) | [](https://www.npmjs.com/package/@leafygreen-ui/copyable) |  | [Docs](http://mongodb.design/component/copyable/live-example) |
| [@leafygreen-ui/date-picker](./packages/date-picker) | [](https://www.npmjs.com/package/@leafygreen-ui/date-picker) |  | [Docs](http://mongodb.design/component/date-picker/live-example) |
| [@leafygreen-ui/date-utils](./packages/date-utils) | [](https://www.npmjs.com/package/@leafygreen-ui/date-utils) |  | [Docs](http://mongodb.design/component/date-utils/live-example) |
| [@leafygreen-ui/descendants](./packages/descendants) | [](https://www.npmjs.com/package/@leafygreen-ui/descendants) |  | [Docs](http://mongodb.design/component/descendants/live-example) |
| [@leafygreen-ui/emotion](./packages/emotion) | [](https://www.npmjs.com/package/@leafygreen-ui/emotion) |  | [Docs](http://mongodb.design/component/emotion/live-example) |
| [@leafygreen-ui/empty-state](./packages/empty-state) | [](https://www.npmjs.com/package/@leafygreen-ui/empty-state) |  | [Docs](http://mongodb.design/component/empty-state/live-example) |
| [@leafygreen-ui/expandable-card](./packages/expandable-card) | [](https://www.npmjs.com/package/@leafygreen-ui/expandable-card) |  | [Docs](http://mongodb.design/component/expandable-card/live-example) |
| [@leafygreen-ui/form-field](./packages/form-field) | [](https://www.npmjs.com/package/@leafygreen-ui/form-field) |  | [Docs](http://mongodb.design/component/form-field/live-example) |
| [@leafygreen-ui/form-footer](./packages/form-footer) | [](https://www.npmjs.com/package/@leafygreen-ui/form-footer) |  | [Docs](http://mongodb.design/component/form-footer/live-example) |
| [@leafygreen-ui/guide-cue](./packages/guide-cue) | [](https://www.npmjs.com/package/@leafygreen-ui/guide-cue) |  | [Docs](http://mongodb.design/component/guide-cue/live-example) |
| [@leafygreen-ui/hooks](./packages/hooks) | [](https://www.npmjs.com/package/@leafygreen-ui/hooks) |  | [Docs](http://mongodb.design/component/hooks/live-example) |
| [@leafygreen-ui/icon](./packages/icon) | [](https://www.npmjs.com/package/@leafygreen-ui/icon) |  | [Docs](http://mongodb.design/component/icon/live-example) |
| [@leafygreen-ui/icon-button](./packages/icon-button) | [](https://www.npmjs.com/package/@leafygreen-ui/icon-button) |  | [Docs](http://mongodb.design/component/icon-button/live-example) |
| [@leafygreen-ui/info-sprinkle](./packages/info-sprinkle) | [](https://www.npmjs.com/package/@leafygreen-ui/info-sprinkle) |  | [Docs](http://mongodb.design/component/info-sprinkle/live-example) |
| [@leafygreen-ui/inline-definition](./packages/inline-definition) | [](https://www.npmjs.com/package/@leafygreen-ui/inline-definition) |  | [Docs](http://mongodb.design/component/inline-definition/live-example) |
| [@leafygreen-ui/input-option](./packages/input-option) | [](https://www.npmjs.com/package/@leafygreen-ui/input-option) |  | [Docs](http://mongodb.design/component/input-option/live-example) |
| [@leafygreen-ui/leafygreen-provider](./packages/leafygreen-provider) | [](https://www.npmjs.com/package/@leafygreen-ui/leafygreen-provider) |  | [Docs](http://mongodb.design/component/leafygreen-provider/live-example) |
| [@leafygreen-ui/lib](./packages/lib) | [](https://www.npmjs.com/package/@leafygreen-ui/lib) |  | [Docs](http://mongodb.design/component/lib/live-example) |
| [@leafygreen-ui/loading-indicator](./packages/loading-indicator) | [](https://www.npmjs.com/package/@leafygreen-ui/loading-indicator) |  | [Docs](http://mongodb.design/component/loading-indicator/live-example) |
| [@leafygreen-ui/logo](./packages/logo) | [](https://www.npmjs.com/package/@leafygreen-ui/logo) |  | [Docs](http://mongodb.design/component/logo/live-example) |
| [@leafygreen-ui/marketing-modal](./packages/marketing-modal) | [](https://www.npmjs.com/package/@leafygreen-ui/marketing-modal) |  | [Docs](http://mongodb.design/component/marketing-modal/live-example) |
| [@leafygreen-ui/menu](./packages/menu) | [](https://www.npmjs.com/package/@leafygreen-ui/menu) |  | [Docs](http://mongodb.design/component/menu/live-example) |
| [@leafygreen-ui/modal](./packages/modal) | [](https://www.npmjs.com/package/@leafygreen-ui/modal) |  | [Docs](http://mongodb.design/component/modal/live-example) |
| [@leafygreen-ui/number-input](./packages/number-input) | [](https://www.npmjs.com/package/@leafygreen-ui/number-input) |  | [Docs](http://mongodb.design/component/number-input/live-example) |
| [@leafygreen-ui/pagination](./packages/pagination) | [](https://www.npmjs.com/package/@leafygreen-ui/pagination) |  | [Docs](http://mongodb.design/component/pagination/live-example) |
| [@leafygreen-ui/palette](./packages/palette) | [](https://www.npmjs.com/package/@leafygreen-ui/palette) |  | [Docs](http://mongodb.design/component/palette/live-example) |
| [@leafygreen-ui/password-input](./packages/password-input) | [](https://www.npmjs.com/package/@leafygreen-ui/password-input) |  | [Docs](http://mongodb.design/component/password-input/live-example) |
| [@leafygreen-ui/pipeline](./packages/pipeline) | [](https://www.npmjs.com/package/@leafygreen-ui/pipeline) |  | [Docs](http://mongodb.design/component/pipeline/live-example) |
| [@leafygreen-ui/polymorphic](./packages/polymorphic) | [](https://www.npmjs.com/package/@leafygreen-ui/polymorphic) |  | [Docs](http://mongodb.design/component/polymorphic/live-example) |
| [@leafygreen-ui/popover](./packages/popover) | [](https://www.npmjs.com/package/@leafygreen-ui/popover) |  | [Docs](http://mongodb.design/component/popover/live-example) |
| [@leafygreen-ui/portal](./packages/portal) | [](https://www.npmjs.com/package/@leafygreen-ui/portal) |  | [Docs](http://mongodb.design/component/portal/live-example) |
| [@leafygreen-ui/radio-box-group](./packages/radio-box-group) | [](https://www.npmjs.com/package/@leafygreen-ui/radio-box-group) |  | [Docs](http://mongodb.design/component/radio-box-group/live-example) |
| [@leafygreen-ui/radio-group](./packages/radio-group) | [](https://www.npmjs.com/package/@leafygreen-ui/radio-group) |  | [Docs](http://mongodb.design/component/radio-group/live-example) |
| [@leafygreen-ui/ripple](./packages/ripple) | [](https://www.npmjs.com/package/@leafygreen-ui/ripple) |  | [Docs](http://mongodb.design/component/ripple/live-example) |
| [@leafygreen-ui/search-input](./packages/search-input) | [](https://www.npmjs.com/package/@leafygreen-ui/search-input) |  | [Docs](http://mongodb.design/component/search-input/live-example) |
| [@leafygreen-ui/segmented-control](./packages/segmented-control) | [](https://www.npmjs.com/package/@leafygreen-ui/segmented-control) |  | [Docs](http://mongodb.design/component/segmented-control/live-example) |
| [@leafygreen-ui/select](./packages/select) | [](https://www.npmjs.com/package/@leafygreen-ui/select) |  | [Docs](http://mongodb.design/component/select/live-example) |
| [@leafygreen-ui/side-nav](./packages/side-nav) | [](https://www.npmjs.com/package/@leafygreen-ui/side-nav) |  | [Docs](http://mongodb.design/component/side-nav/live-example) |
| [@leafygreen-ui/skeleton-loader](./packages/skeleton-loader) | [](https://www.npmjs.com/package/@leafygreen-ui/skeleton-loader) |  | [Docs](http://mongodb.design/component/skeleton-loader/live-example) |
| [@leafygreen-ui/split-button](./packages/split-button) | [](https://www.npmjs.com/package/@leafygreen-ui/split-button) |  | [Docs](http://mongodb.design/component/split-button/live-example) |
| [@leafygreen-ui/stepper](./packages/stepper) | [](https://www.npmjs.com/package/@leafygreen-ui/stepper) |  | [Docs](http://mongodb.design/component/stepper/live-example) |
| [@leafygreen-ui/table](./packages/table) | [](https://www.npmjs.com/package/@leafygreen-ui/table) |  | [Docs](http://mongodb.design/component/table/live-example) |
| [@leafygreen-ui/tabs](./packages/tabs) | [](https://www.npmjs.com/package/@leafygreen-ui/tabs) |  | [Docs](http://mongodb.design/component/tabs/live-example) |
| [@leafygreen-ui/testing-lib](./packages/testing-lib) | [](https://www.npmjs.com/package/@leafygreen-ui/testing-lib) |  | [Docs](http://mongodb.design/component/testing-lib/live-example) |
| [@leafygreen-ui/text-area](./packages/text-area) | [](https://www.npmjs.com/package/@leafygreen-ui/text-area) |  | [Docs](http://mongodb.design/component/text-area/live-example) |
| [@leafygreen-ui/text-input](./packages/text-input) | [](https://www.npmjs.com/package/@leafygreen-ui/text-input) |  | [Docs](http://mongodb.design/component/text-input/live-example) |
| [@leafygreen-ui/toast](./packages/toast) | [](https://www.npmjs.com/package/@leafygreen-ui/toast) |  | [Docs](http://mongodb.design/component/toast/live-example) |
| [@leafygreen-ui/toggle](./packages/toggle) | [](https://www.npmjs.com/package/@leafygreen-ui/toggle) |  | [Docs](http://mongodb.design/component/toggle/live-example) |
| [@leafygreen-ui/tokens](./packages/tokens) | [](https://www.npmjs.com/package/@leafygreen-ui/tokens) |  | [Docs](http://mongodb.design/component/tokens/live-example) |
| [@leafygreen-ui/tooltip](./packages/tooltip) | [](https://www.npmjs.com/package/@leafygreen-ui/tooltip) |  | [Docs](http://mongodb.design/component/tooltip/live-example) |
| [@leafygreen-ui/typography](./packages/typography) | [](https://www.npmjs.com/package/@leafygreen-ui/typography) |  | [Docs](http://mongodb.design/component/typography/live-example) |
| [@lg-charts/line-chart](./charts/line-chart) | [](https://www.npmjs.com/package/@lg-charts/line-chart) |  | [Docs](http://mongodb.design/component/line-chart/live-example) |
| [@lg-chat/avatar](./chat/avatar) | [](https://www.npmjs.com/package/@lg-chat/avatar) |  | [Docs](http://mongodb.design/component/avatar/live-example) |
| [@lg-chat/chat-disclaimer](./chat/chat-disclaimer) | [](https://www.npmjs.com/package/@lg-chat/chat-disclaimer) |  | [Docs](http://mongodb.design/component/chat-disclaimer/live-example) |
| [@lg-chat/chat-window](./chat/chat-window) | [](https://www.npmjs.com/package/@lg-chat/chat-window) |  | [Docs](http://mongodb.design/component/chat-window/live-example) |
| [@lg-chat/fixed-chat-window](./chat/fixed-chat-window) | [](https://www.npmjs.com/package/@lg-chat/fixed-chat-window) |  | [Docs](http://mongodb.design/component/fixed-chat-window/live-example) |
| [@lg-chat/input-bar](./chat/input-bar) | [](https://www.npmjs.com/package/@lg-chat/input-bar) |  | [Docs](http://mongodb.design/component/input-bar/live-example) |
| [@lg-chat/leafygreen-chat-provider](./chat/leafygreen-chat-provider) | [](https://www.npmjs.com/package/@lg-chat/leafygreen-chat-provider) |  | [Docs](http://mongodb.design/component/leafygreen-chat-provider/live-example) |
| [@lg-chat/lg-markdown](./chat/lg-markdown) | [](https://www.npmjs.com/package/@lg-chat/lg-markdown) |  | [Docs](http://mongodb.design/component/lg-markdown/live-example) |
| [@lg-chat/message](./chat/message) | [](https://www.npmjs.com/package/@lg-chat/message) |  | [Docs](http://mongodb.design/component/message/live-example) |
| [@lg-chat/message-feed](./chat/message-feed) | [](https://www.npmjs.com/package/@lg-chat/message-feed) |  | [Docs](http://mongodb.design/component/message-feed/live-example) |
| [@lg-chat/message-feedback](./chat/message-feedback) | [](https://www.npmjs.com/package/@lg-chat/message-feedback) |  | [Docs](http://mongodb.design/component/message-feedback/live-example) |
| [@lg-chat/message-prompts](./chat/message-prompts) | [](https://www.npmjs.com/package/@lg-chat/message-prompts) |  | [Docs](http://mongodb.design/component/message-prompts/live-example) |
| [@lg-chat/message-rating](./chat/message-rating) | [](https://www.npmjs.com/package/@lg-chat/message-rating) |  | [Docs](http://mongodb.design/component/message-rating/live-example) |
| [@lg-chat/rich-links](./chat/rich-links) | [](https://www.npmjs.com/package/@lg-chat/rich-links) |  | [Docs](http://mongodb.design/component/rich-links/live-example) |
| [@lg-chat/title-bar](./chat/title-bar) | [](https://www.npmjs.com/package/@lg-chat/title-bar) |  | [Docs](http://mongodb.design/component/title-bar/live-example) |
| [@lg-tools/build](./tools/build) | [](https://www.npmjs.com/package/@lg-tools/build) |  | [Docs](http://mongodb.design/component/build/live-example) |
| [@lg-tools/cli](./tools/cli) | [](https://www.npmjs.com/package/@lg-tools/cli) |  | [Docs](http://mongodb.design/component/cli/live-example) |
| [@lg-tools/codemods](./tools/codemods) | [](https://www.npmjs.com/package/@lg-tools/codemods) |  | [Docs](http://mongodb.design/component/codemods/live-example) |
| [@lg-tools/create](./tools/create) | [](https://www.npmjs.com/package/@lg-tools/create) |  | [Docs](http://mongodb.design/component/create/live-example) |
| [@lg-tools/eslint-plugin](./tools/eslint-plugin) | [](https://www.npmjs.com/package/@lg-tools/eslint-plugin) |  | [Docs](http://mongodb.design/component/eslint-plugin/live-example) |
| [@lg-tools/install](./tools/install) | [](https://www.npmjs.com/package/@lg-tools/install) |  | [Docs](http://mongodb.design/component/install/live-example) |
| [@lg-tools/link](./tools/link) | [](https://www.npmjs.com/package/@lg-tools/link) |  | [Docs](http://mongodb.design/component/link/live-example) |
| [@lg-tools/lint](./tools/lint) | [](https://www.npmjs.com/package/@lg-tools/lint) |  | [Docs](http://mongodb.design/component/lint/live-example) |
| [@lg-tools/meta](./tools/meta) | [](https://www.npmjs.com/package/@lg-tools/meta) |  | [Docs](http://mongodb.design/component/meta/live-example) |
| [@lg-tools/slackbot](./tools/slackbot) | [](https://www.npmjs.com/package/@lg-tools/slackbot) |  | [Docs](http://mongodb.design/component/slackbot/live-example) |
| [@lg-tools/storybook](./tools/storybook) | [](https://www.npmjs.com/package/@lg-tools/storybook) |  | [Docs](http://mongodb.design/component/storybook/live-example) |
| [@lg-tools/storybook-addon](./tools/storybook-addon) | [](https://www.npmjs.com/package/@lg-tools/storybook-addon) |  | [Docs](http://mongodb.design/component/storybook-addon/live-example) |
| [@lg-tools/storybook-decorators](./tools/storybook-decorators) | [](https://www.npmjs.com/package/@lg-tools/storybook-decorators) |  | [Docs](http://mongodb.design/component/storybook-decorators/live-example) |
| [@lg-tools/storybook-utils](./tools/storybook-utils) | [](https://www.npmjs.com/package/@lg-tools/storybook-utils) |  | [Docs](http://mongodb.design/component/storybook-utils/live-example) |
| [@lg-tools/test](./tools/test) | [](https://www.npmjs.com/package/@lg-tools/test) |  | [Docs](http://mongodb.design/component/test/live-example) |
| [@lg-tools/test-harnesses](./tools/test-harnesses) | [](https://www.npmjs.com/package/@lg-tools/test-harnesses) |  | [Docs](http://mongodb.design/component/test-harnesses/live-example) |
| [@lg-tools/update](./tools/update) | [](https://www.npmjs.com/package/@lg-tools/update) |  | [Docs](http://mongodb.design/component/update/live-example) |
| [@lg-tools/validate](./tools/validate) | [](https://www.npmjs.com/package/@lg-tools/validate) |  | [Docs](http://mongodb.design/component/validate/live-example) |
## Developement
### Setup
1. Node >= 18.0.0 required.
via [homebrew](https://brew.sh/) with `brew install node`
via [nodejs installer](https://nodejs.org/en/)
2. Install Yarn >= 1.20.0.
[Yarn Installation documentation](https://classic.yarnpkg.com/en/docs/install/#mac-stable)
3. Clone the repository.
```bash
# Navigate to the directory you'd like to clone the repository into
$ cd ~/my/repositories
# Clone the repository.
# We recommend installing using the SSH address rather than the HTTPS one to make authentication easier for you. To set up SSH authentication with GitHub, see their guide: https://docs.github.com/en/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account
```
4. Install dependencies and link packages.
```ts
yarn run init
```
### Storybook
Start up storybook to see all UI components that exist:
```ts
yarn start
```
Note: Running storybook doesn't trigger changes in dependencies, only the main component's — e.g. If you're looking at `Button`, and make a change to `Lib`, you need to rebuild `Lib` for Storybook to see those changes in `Button`.
### Building Packages
To rebuild all packages:
```ts
yarn build
```
To rebuild select packages, filter using `--filter`:
```ts
yarn build --filter="[package]"
// ex. --filter="@leafygreen-ui/hooks"
```
### Development within an Application
To actively develop `leafygreen-ui` components within an application, the following script will link all `leafygreen-ui` components within your application to the local `leafygreen-ui` repository.
This will allow you to make changes to your local repository of `leafygreen-ui` and see those changes immediately reflected within your running application. This allows you to develop both in isolation (within `leafygreen-ui`) and in the context of your application.
To do this, clone this repository and navigate to the root directory (where `package.json` is located), then run the following:
```
yarn run link -- ${PATH_TO_APPLICATION}
```
The script does several things in order:
1. This builds every `leafygreen-ui` component so they are ready to be linked
2. It scans your application for any installed `leafygreen-ui` components in your `node_modules/@leafygreen-ui` folder.
**NOTE:** If the package is new and unpublished/not installed, you will need to create a directory for the new component within your application inside `node_modules/@leafygreen-ui` before running this command.
3. If any `leafygreen-ui` components are found then the script uses `yarn link` to link every `node_modules/@leafygreen-ui` module to your local `leafygreen-ui` repository.
After the script completes, you can make changes directly to the component in your local `leafygreen-ui` repository. Once you do this, run `yarn build` in the root of the `leafygreen-ui` repository and the changes will be visible on your running application.
## create-leafygreen-app
An externally maintained script to bootstrap a React app with all Leafygreen UI components.
Create a new React app with Leafygreen UI components pre-installed
```bash
npx create-leafygreen-app@latest
```
Create a new Next app
```bash
npx create-leafygreen-app@latest --next
```
Install all Leafygreen UI components to an existing project
```bash
npx create-leafygreen-app@latest --packages-only
```
## Creating New Component
### Getting Started
To get started quickly and easily run `yarn create-package my-new-package`. When you run this command, we create a directory containing all of the boilerplate code that you'll need to start developing your new Component.
Note: it's important to follow the kebab-casing convention described above.
- Add the new component to `build.tsconfig.json`
- If you are using any `leafygreen-ui` dependencies in your new component, add the dependency to the component directory's `tsconfig.json`.
- Run `yarn run init` to link all packages before starting development
## Formatting and linting
When you run `yarn fix`, we do the following:
- We run `yarn prettier:fix` so that we have consistently formatted code.
- We run `yarn eslint:fix` to catch any syntax errors, unused variables, and any other easy-to-catch issues.
To fix all files in the repository, run the following:
```
yarn fix
```
To check if any files need formatting without automatically formatting them, run the following:
```
yarn prettier:check
```
To run linting without automatically fixing issues, run the following:
```
yarn eslint:check
```
## Typechecking
To run typechecking without compiling the code, run the following:
```
yarn ts
```
## Testing
To run the unit tests for our components, run the following:
```
yarn test
```
## Committing
When making a PR that contains changes that should be included in a package's changelog, be sure to do so by running:
```
yarn changeset
```
This will generate a `changes.json` file, keeping track of version upgrades and update descriptions. We follow semver conventions for versioning, so each change will either be major, minor, or patch.
Make sure that the PR includes the changes made by running this command.
## Publishing
1. Merge the automatically generated `Version Packages` PR that will contain appropriate version bumps and changelog documentation.
2. Push the tags from the release up to Github.
```
git push --follow-tags
```
### Publishing Pre-releases
Read more in-depth [pre-release guides here](https://github.com/changesets/changesets/blob/main/docs/prereleases.md)
Pre-releases let you publish an alpha/beta/next version of a component, allowing developers to test a component before fully releasing a component.
Let's imagine we want to publish a `beta` release of some component. Our work is being done on a branch called `new-feature`
1. Create a new branch off your component branch `git checkout -b pre-release`
- this makes sure your package updates stay independent
2. Enter pre-release mode: `yarn changeset pre enter beta` (name can be `next`, `beta`, `alpha`, or any other name)
3. Update package versions `yarn changeset version`
- This will update any packages with existing changeset files to version `X.Y.Z-beta.0` (or whatever name you used)
4. Commit these updates `git commit -am "Prerelease version packages"`
5. Build the component(s) you're pre-releasing `yarn build <...components>`
6. Publish the prerelease with `yarn changeset publish`
Any new work you do should be done in the _original_ (`new-feature`) branch.
To publish a new pre-release version, pull the changes from `new-feature` into branch `pre-release`, and follow steps 3-5.
When `new-feature` is merged into `main`, you can safely delete the `pre-release` branch
## Deploy gh-pages
You can deploy a static build of our Storybook site to gh-pages from the `main` branch.
1. First be sure you've built a static version of Storybook with the script: `build-storybook`
2. Then deploy to gh-pages: `yarn release:site`
### To deploy to your own mirror of leafygreen-ui
1. Run `yarn demo:site [your_github_username]`.
2. If you haven't built a static version of Storybook yet, you will be prompted to do so.
3. You will be asked for confirmation before Storybook is published.
## License
The source files in this repository are made available under the terms of the Apache License, version 2.0.