- Notifications
You must be signed in to change notification settings - Fork68
LeafyGreen UI – LeafyGreen's React UI Kit
License
mongodb/leafygreen-ui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A library of React components, CSS patterns, and CLI tools for MongoDB's LeafyGreen Design System.
- Create or open a React project
- Install the LeafyGreen CLI
npm install -g @lg-tools/cli
- Install all, or some LeafyGreen components
lg install
lg install button combobox
- Import LeafyGreen components into your project
importButtonfrom'@leafygreen-ui/button';import{Combobox,ComboboxOptions}from'@leafygreen-ui/combobox';
- Create or open a React project
- Install individual LeafyGreen components using
npm,pnpm, oryarn
pnpm add @leafygreen-ui/button
- Import LeafyGreen components into your project
importButtonfrom'@leafygreen-ui/button';
Node >= 18.0.0 required.
viahomebrew with
brew install nodeInstall PNPM >= 9.15.0.
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
Install dependencies and link packages.
pnpmruninit
Start up storybook to see all UI components that exist:
pnpmstart
Note: Running storybook doesn't trigger changes in dependencies, only the main component's — e.g. If you're looking atButton, and make a change toLib, you need to rebuildLib for Storybook to see those changes inButton.
To rebuild all packages:
pnpmbuild
To rebuild select packages, filter using--filter:
pnpmbuild--filter="[package]"// ex. --filter="@leafygreen-ui/hooks"
To actively developleafygreen-ui components within an application, the following script will link allleafygreen-ui components within your application to the localleafygreen-ui repository.
This will allow you to make changes to your local repository ofleafygreen-ui and see those changes immediately reflected within your running application. This allows you to develop both in isolation (withinleafygreen-ui) and in the context of your application.
To do this, clone this repository and navigate to the root directory (wherepackage.json is located), then run the following:
pnpm run link -- ${PATH_TO_APPLICATION}The script does several things in order:
This builds every
leafygreen-uicomponent so they are ready to be linkedIt scans your application for any installed
leafygreen-uicomponents in yournode_modules/@leafygreen-uifolder.NOTE: If the package is new and unpublished/not installed, you will need to create a directory for the new component within your application insidenode_modules/@leafygreen-uibefore running this command.If any
leafygreen-uicomponents are found then the script usespnpm linkto link everynode_modules/@leafygreen-uimodule to your localleafygreen-uirepository.
After the script completes, you can make changes directly to the component in your localleafygreen-ui repository. Once you do this, runpnpm build in the root of theleafygreen-ui repository and the changes will be visible on your running application.
To get started quickly and easily runpnpm 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-uidependencies in your new component, add the dependency to the component directory'stsconfig.json. - Run
pnpm run initto link all packages before starting development
When you runpnpm fix, we do the following:
- We run
pnpm prettier:fixso that we have consistently formatted code. - We run
pnpm eslint:fixto catch any syntax errors, unused variables, and any other easy-to-catch issues.
To fix all files in the repository, run the following:
pnpm fixTo check if any files need formatting without automatically formatting them, run the following:
pnpm prettier:checkTo run linting without automatically fixing issues, run the following:
pnpm eslint:checkTo run typechecking without compiling the code, run the following:
pnpm tsTo run the unit tests for our components, run the following:
pnpm testWhen making a PR that contains changes that should be included in a package's changelog, be sure to do so by running:
pnpm changesetThis will generate achanges.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.
Merge the automatically generated
Version PackagesPR that will contain appropriate version bumps and changelog documentation.Push the tags from the release up to Github.
git push --follow-tagsRead more in-depthpre-release guides here
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 abeta release of some component. Our work is being done on a branch callednew-feature
- Create a new branch off your component branch
git checkout -b pre-release- this makes sure your package updates stay independent
- Enter pre-release mode:
pnpm changeset pre enter beta(name can benext,beta,alpha, or any other name) - Update package versions
pnpm changeset version- This will update any packages with existing changeset files to version
X.Y.Z-beta.0(or whatever name you used)
- This will update any packages with existing changeset files to version
- Commit these updates
git commit -am "Prerelease version packages" - Build the component(s) you're pre-releasing
pnpm build <...components> - Publish the prerelease with
pnpm changeset publish
Any new work you do should be done in theoriginal (new-feature) branch.To publish a new pre-release version, pull the changes fromnew-feature into branchpre-release, and follow steps 3-5.
Whennew-feature is merged intomain, you can safely delete thepre-release branch
You can deploy a static build of our Storybook site to gh-pages from themain branch.
- First be sure you've built a static version of Storybook with the script:
build-storybook - Then deploy to gh-pages:
pnpm release:site
- Run
pnpm demo:site [your_github_username]. - If you haven't built a static version of Storybook yet, you will be prompted to do so.
- You will be asked for confirmation before Storybook is published.
The source files in this repository are made available under the terms of the Apache License, version 2.0.
About
LeafyGreen UI – LeafyGreen's React UI Kit
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.