LeafyGreen UI Kit

A set of CSS styles and React components built with design in mind.

Check out all of the components in action!

Package Table of Contents

• A11y
• Badge
• Banner
• Box
• Button
• Callout
• Card
• Checkbox
• Code
• Combobox
• Confirmation Modal
• Copyable
• Emotion
• Expandable Card
• Form Footer
• Hooks
• Icon
• Icon Button
• Inline Definition
• Interaction Ring
• LeafyGreen Provider
• Lib
• Logo
• Marketing Modal
• Menu
• Modal
• MongoNav (This package lives in a private repository)
• Palette
• Pipeline
• Popover
• Portal
• Radio Box Group
• Radio Group
• Ripple
• Segmented Control
• Select
• Side Nav
• Stepper
• Table
• Tabs
• Testing Lib
• Text Area
• Text Input
• Toast
• Toggle
• Tokens
• Tooltip
• Typography

Developer Setup

1. Node >= 14.0.0 and Node < 17.0.0 required.

   via homebrew with brew install node

   via nodejs installer

2. Install Yarn >= 1.16.0.

   Yarn Installation documentation

3. Clone the repository.

   # 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.

   yarn run init

Use yarn build to rebuild all packages. Pass in a specific package name to rebuild select packages:

yarn build button icon

Additionally, pass in the --watch flag to rebuild packages on change.

Development

1. Start up storybook to see all UI components that exist.

   yarn start

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.

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.

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

Commiting

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

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: yarn 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.