_/\/\/\/\/\____/\/\__________________________________________/\/\__________/\/\____/\/\__/\/\/\/\_ _/\/\____/\/\__/\/\____/\/\/\______/\/\/\/\______/\/\/\____/\/\/\/\/\______/\/\____/\/\____/\/\___ _/\/\/\/\/\____/\/\________/\/\____/\/\__/\/\__/\/\/\/\/\____/\/\__________/\/\____/\/\____/\/\___ _/\/\__________/\/\____/\/\/\/\____/\/\__/\/\__/\/\__________/\/\__________/\/\____/\/\____/\/\___ _/\/\__________/\/\/\__/\/\/\/\/\__/\/\__/\/\____/\/\/\/\____/\/\/\__________/\/\/\/\____/\/\/\/\_ __________________________________________________________________________________________________
$ 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 email@example.com:apps/ui.git
Then navigate to the project directory:
$ cd ui
And install dependencies with
$ npm install
@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
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
To develop UI components locally, while seeing the changes auto-reload inside another app
you're working on (eg.
@planet/ui and start the development server to watch changes:
# @planet/ui terminal window$ npm link
@planet/ui to 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
masterbranch (after it is approved).
masterto get latest updates.
rm -rf node_modules
git push --tags origin master
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.