@planet/ui

@planet/ui

_/\/\/\/\/\____/\/\__________________________________________/\/\__________/\/\____/\/\__/\/\/\/\_
_/\/\____/\/\__/\/\____/\/\/\______/\/\/\/\______/\/\/\____/\/\/\/\/\______/\/\____/\/\____/\/\___
_/\/\/\/\/\____/\/\________/\/\____/\/\__/\/\__/\/\/\/\/\____/\/\__________/\/\____/\/\____/\/\___
_/\/\__________/\/\____/\/\/\/\____/\/\__/\/\__/\/\__________/\/\__________/\/\____/\/\____/\/\___
_/\/\__________/\/\/\__/\/\/\/\/\__/\/\__/\/\____/\/\/\/\____/\/\/\__________/\/\/\/\____/\/\/\/\_
__________________________________________________________________________________________________

Reusable UI component and styles library for Planet built with React.

• Living Styleguide
• Wiki
• Issues
• Npm Package
• Slack Channel: #styleguide

Quickstart

Usage

To use in your project, simply install with yarn (or npm):

With yarn:

$ yarn add @planet/ui react react-dom styled-components

With npm:

$ npm install --save @planet/ui react react-dom styled-components

Dependencies

@planet/ui depends on the following packages:

• react
• react-dom
• styled-components*

*Although styled-components is a dependency, you won't necessarily need to implement any of your customizations using styled-components, or use it for styling the rest of your app. Read more about using styled-components in the customization section of the wiki.

Development

To get started developing, read our Contribution Guidelines and Wiki article on Contributing.

Setup

Clone the repository locally:

$ git clone [e-mail]:apps/ui.git

Then navigate to the project directory:

$ cd ui

And install dependencies with yarn:

$ yarn

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:

yarn 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 Sidebar (Please note our convention of using TitleCased names for components):

$ yarn forge Sidebar

Open the URL indicated in the terminal output to view the hot reloading enabled dev server!

Running Tests

There are 3 methods for running tests:

1. yarn test, which will verify the integrity of the installed depenendencies, and run all unit tests once.

2. yarn test:analyze, which will run all the unit tests once with instrumentation, and generates code quality and test coverage reports, available via yarn report

3. yarn test:watch, which will run your unit tests continuously by watching source and test files for changes.

If you encounter an error running yarn 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. explorer project):

1. Link @planet/ui and start the development server to watch changes:

   # @planet/ui terminal window
   
   $ yarn link
   $ yarn dev
   

2. Link @planet/ui to your app

   # Your App terminal window
   
   path/to/your/app $ yarn link @planet/ui
   

3. 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 npm.

When you're finished making updates commit your changes using yarn commit and push to your remote branch. @planet/ui uses commitizen to help ensure quality

Documentation

Check the project Wiki to learn more about @planet/ui.

Visit our Issues queue for troubleshooting and support.