_/\/\/\/\/\____/\/\__________________________________________/\/\__________/\/\____/\/\__/\/\/\/\_ _/\/\____/\/\__/\/\____/\/\/\______/\/\/\/\______/\/\/\____/\/\/\/\/\______/\/\____/\/\____/\/\___ _/\/\/\/\/\____/\/\________/\/\____/\/\__/\/\__/\/\/\/\/\____/\/\__________/\/\____/\/\____/\/\___ _/\/\__________/\/\____/\/\/\/\____/\/\__/\/\__/\/\__________/\/\__________/\/\____/\/\____/\/\___ _/\/\__________/\/\/\__/\/\/\/\/\__/\/\__/\/\____/\/\/\/\____/\/\/\__________/\/\/\/\____/\/\/\/\_ __________________________________________________________________________________________________
$ 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.
Clone the repository locally:
$ git clone firstname.lastname@example.org: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 windowpath/to/your/app $ npm link @planet/ui
Start your app's development environment as usual# Your App terminal windowpath/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
- 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.