RoverUI

UI Component Library used at Cision

RoverUI is a collection of UI components originally built for and by Cision. These components should help the Cision team build applications that look hot, in React, quickly.

Install

# yarn
yarn add rover-ui

# npm
npm install --save rover-ui

For more instructions on installing and using the RoverUI package in your app, see the docs in Storybook

To install and develop or run locally, you're in the right place.

Usage

import React, { Component } from 'react';

import MyComponent from 'rover-ui';

class Example extends Component {
  render() {
    return <MyComponent />;
  }
}

Contributing

What to avoid in RoverUI

It's not a repository for all shared components. Don't try to add components that deal specifically with business logic and concepts here. Don't try to add components that handle whole layout areas.

Run locally

Read the Code Guidelines
Download the repository
From the root, run yarn to install dependencies.
Run yarn storybook to start a local copy of the docs with living examples you can develop against
Add components using the provided templates (see "Creating a new component" below) or modify components
Add or modify tests, stories, READMEs and styles in the relevant places in your component's folder.
Add your component to example/src/App.js
When everything looks good in storybook, run yarn build from the root to build the dist folder.
From the example/ directory, run yarn start.
That should open a new tab in your browser with an example page that imports the compiled components.

Publishing a new version

To publish the npm package, you'll need a free account on npmjs.com, and you'll need to be added to the list of maintainers by one of the current RoverUI maintainers.

Bump the package.json's version using semver. We're currently in alpha, and probably will be for a while. Versions are cheap.
If all tests look good (yarn test), submit a pull-request against the master branch through Github. We're using the master branch for now, but by the time we're out of alpha, we'll have a dev branch.
Once you have at least one PR approval from a champion and no pending requests for changes, you can merge in to master.
After merging to master, from your local machine, run yarn release in the root. You'll be prompted for the publish version, which should match the package version.

Reporting issues

Report issues at the Github issue tracker.

Champions

The main RoverUI champions currently are:

Chelsea Shaw
Chris Garcia
Matthew Wells

Creating a new component

We use hygen templates to make adding component boilerplate much simpler.

# rover-ui
$ yarn hygen component new Dropdown

Loaded templates: _templates
       added: src/components/Dropdown/index.js
      inject: src/index.js
       added: src/components/Dropdown/README.md
       added: src/components/Dropdown/story.js
      inject: src/stories/index.js
       added: src/components/Dropdown/test.js

At any time you can see what generators we have configured using hygen help.

Customizing the theme with a custom build

There are a few different styling paradigms at work in RoverUI. Currently, the best way to customize appearance is by forking the project and making a custom build.

Fork the rover-ui repository
Edit files
Run yarn build from the project root
Publish your fork
Point your front-end consumer app at the fork

Now, you can edit CSS-in-JS and/or the CSS custom properties that are imported for use in CSS modules.

CSS-in-JS

RoverUI uses styled-components and styled-system on some components. Any component that's currently wrapped in the withDefaultTheme HOC should be using theme properties.

To customize CSS-in-JS themes, edit src/shared/theme.js and the files it imports.

Customize the CSS module theme with a custom build

RoverUI uses CSS modules with css-loader on some components.

To customize the CSS modules theme, edit src/shared/**/*.css

hpieroni/rover-ui