_/\/\/\/\/\____/\/\__________________________________________/\/\__________/\/\____/\/\__/\/\/\/\_ _/\/\____/\/\__/\/\____/\/\/\______/\/\/\/\______/\/\/\____/\/\/\/\/\______/\/\____/\/\____/\/\___ _/\/\/\/\/\____/\/\________/\/\____/\/\__/\/\__/\/\/\/\/\____/\/\__________/\/\____/\/\____/\/\___ _/\/\__________/\/\____/\/\/\/\____/\/\__/\/\__/\/\__________/\/\__________/\/\____/\/\____/\/\___ _/\/\__________/\/\/\__/\/\/\/\/\__/\/\__/\/\____/\/\/\/\____/\/\/\__________/\/\/\/\____/\/\/\/\_ __________________________________________________________________________________________________
Reusable UI component and styles library for Planet built with React.
- Living Styleguide
- Npm Package
- Slack Channel: #styleguide
To use in your project, simply install with npm (or yarn):
$ npm install --save @planet/ui react react-dom
$ yarn add @planet/ui react react-dom
@planet/ui depends on the following packages:
emotionis a dependency, you won't necessarily need to implement any of your customizations using
emotion, or use it for styling the rest of your app. Read more about using
emotionin the customization section of the wiki.
To get started developing, read our Contribution Guidelines and Wiki article on Contributing.
Clone the repository locally:
$ git clone email@example.com:apps/ui.git
Then navigate to the project directory:
$ cd ui
And install dependencies with
$ npm install
Developing Components Independently
@planet/ui comes with a development server included, so you can work on components outside of any specific project.
To develop components locally, all you need to do is:
npm run start
Create a new Component
To create a new component from a starting template, including the styleguide markdown file, styles,
and unit tests, simply run the following command (to create a new component called
note our convention of using TitleCased names for components):
$ npm run forge Sidebar
Open the URL indicated in the terminal output to view the hot reloading enabled dev server!
There are 3 methods for running tests:
npm run test, which will verify the integrity of the installed dependencies, and run all unit tests once.
npm run test:analyze, which will run all the unit tests once with instrumentation, and generates code quality and test coverage reports, available via
npm run report
npm run test:watch, which will run your unit tests continuously by watching source and test files for changes.
If you encounter an error running
npm run test:watch, and you are running Mac OS X Sierra, you may need to
brew install watchman and try again. More info
Developing Components with Another Application
To develop UI components locally, while seeing the changes auto-reload inside another app
you're working on (eg.
@planet/uiand start the development server to watch changes:
# @planet/ui terminal window $ npm link
@planet/uito your app
# Your App terminal window path/to/your/app $ npm link @planet/ui
Start your app's development environment as usual
# Your App terminal window path/to/you/app $ npm run dev # or whatever your project does
Now, if you make changes to a component in
@planet/ui locally, the change
will automatically reload in your app as if you had installed it with
When you're finished making updates commit your changes using
npm run commit (
or following conventional commits) and push to
your remote branch.
@planet/ui uses commitizen to help ensure quality
- Merge your MR to
masterbranch (after it is approved).
- In your local git repo, pull and rebase
masterto get latest updates.
- Clean your
rm -rf node_modules
- Bump the NPM version with
- Push new tags to git:
git push --tags origin master
- Publish the package to NPM:
- Verify the publication on NPM
To patch a version, use
npm version patch in step 4 above.
Check the project Wiki to learn more about
Visit our Issues queue for troubleshooting and support.