cision / rover-ui

React UI components for Cision apps

RoverUI

React 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 @cision/rover-ui

# npm
npm i @cision/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 { Media } from '@cision/rover-ui';

class Example extends Component {
  render() {
    return (
      <Media>
        <Media.Item>👋🏻</Media.Item>
      </Media>
    );
  }
}

If your front-end stack supports a CSS loader, you can add styles with import.

import '@cision/rover-ui/dist/rover-ui.css';

Otherwise, you'll want to put the rover-ui.css stylesheet in your static resources and load it with an plain old link.

<link href="%PUBLIC_URL%/rover-ui.css" rel="stylesheet" />

Contributing

See our Contribution guidelines for more information.

Reporting issues

Internal reports should be created on Cision Jira (more details to come)

Public issues can be reported at the GitHub issue tracker.

rover-ui's Issues

Discussion: Standard Spacing and/or CSS utilities

This actually gives us the opportunity to think about incorporating CSS utility classes or possibly standardizing on spacing. This way, we can limit the number of times we have to specifically set a padding/margin value.

For example, instead of defining styles explicitly and repeating values everywhere like this

<Paper padding='15px'>

We can have this:

<Paper padding='normal'>
// or
<Paper padding='xxsmall'>
// or 
<Paper padding='large' paddingBottom='small' />

Add Form Elements

We currently still depend on our internal @trendkite/ui library for form elements. Here are some form/input elements

• Input (see Add Form Elements (Input)).
• Radio
• Checkbox
• MultiLine
• Select
• TextArea
• Label

Replace tk-ui Pill with RoverUI Pill

Button display is set to Grid

`Tab.Item`s shouldn't require `className`

https://github.com/cision/rover-ui/blob/master/src/components/TabMenu/Item/index.js#L10

^ That fails if a Tab.Item's child doesn't have a className prop.

Migrate all templates

Add more icons to `Icon` component

This will need some checking in with Neal and/or Tina to validate that we're only adding good icons and not carrying over old bad useless icons from TK-UI

Play with react hooks

Since this lib is using react 16.7, yall should play with react hooks. It would not be a big lift to upgrade the existing codebases if yall want to stick with using hooks. This seems like a good opportunity to learn and weight the benefits of new react!

Reduce specificity of checked pill selector in css

Use webpack instead of rollup

I know rollup is easier out of the box, but I don't think we should use two different build systems on the frontend. The overhead of maintaining both will cause more headaches than figuring out how to use webpack to build a ui library, IMO. Unless there are other reasons to use rollup other than ease of use, I think we should use webpack. And I am more than willing to help get a webpack config up and running for new tkui.

Replace tk-ui Avatar with RoverUI Avatar

Pill Should Use Proxima Nova Font

currently displays with Source Sans, which is the old font.

Look into generating external CSS file

Right now, all styles for RoverUI are dependent on styleInject to include styles for the components we use. This is not ideal as the order of injection is impossible to control. Ideally, we would provide a way to inject RoverUI's CSS earlier in a build to ensure that any consumer's styles take precedence.

Audit what we have in TK-UI vs. RoverUI

Come up with a list of missing components.
Evaluate which ones are used regularly.
Evaluate which ones don't fit with the idea of being pure presentational components (like they involve too much Cision-specific state).

Put the list in a ? (issues / github project / markdown page?)

Add unit tests to buttons

Publish storybook page as part of npm publication

Add stylelint

Migrate all atoms

Add `ActivityBlock` component

Replace tk-ui badges with RoverUI Badges

Convert Paper to TypeScript

Fairly simple component to convert while still preserving PropTypes (with the exception of tag which could just be dropped).

storybook addon-actions doesn't work after upgrading to v5

No error message, but no actions getting dispatched either

Convert Badge to TypeScript

Fairly small footprint and a fairly simple component.

Regenerate and publish RoverUI storybook and add to build process

Migrate all organisms

Add unit tests to Responsive

Add typography helper components to RoverUI

Use old tk-ui components as a starting point, but consolidate colors and sizes to those in Figma.

Organize old tk-ui components

Organize original TK-UI components

• Atoms
• Molecules
• Organisms
• Will not migrate

Look into a way to change themes in Storybook

Instead of adding knobs to individual stories or having a "kitchen sink" story that has a theme knob, look into writing a custom decorator that can add "theme" switcher to demonstrate the "themeability" of the various components and also identify things we miss during our development

`Callout` component missing from module exports

It has a story and everything, but looks like it isn't import/exported from src/index.js

Form library and state management

Thoughts on using an external form library to better manage state:

Since we don’t want to be dependent on redux, using something else Is by far a better choice. Came across this article for some reference: https://blog.logrocket.com/comparing-react-form-builders-formik-v-unform

These look like great libraries that will work with react-datepicker which would be important as it will be needed for upcoming date input work.

Another considering is supporting validation and translation within that. unform and Yup seem to be worthy of strong consideration.

Both of these libraries are independent from redux and work with Yup validation as well as React Hooks. Does anyone have experience with either of these libraries or another similar option?

Dropdown menu item links shouldn't be underlined by default.

This could be interpreted either way, but currently the Dropdown.Menu.Item automatically uses an HTML a tag when there's an href attribute.
That's great, but the styles for that component don't specify text-decoration so some of our menu items are underlined.

Seems like the majority use case would be text-decoration: none

`Responsive.Container` doesn't work when its direct children are inline elements.

The container query looks like it needs a block-level child so it can measure its width.

Currently, if you add a Responsive.Container that only wraps an inline-level DOM element, it will never report width changes.

Proposed fix is adding a child <div> to Responsive.Container

Add story for `Badge`

Migrate all molecules

Add coding standards doc

Add husky for git commit hooks

Add husky so that we can have an effective way of linting/formatting/testing before code leaves our computer or gets released.

Replace tk-ui Button with RoverUI Button

Create documentation outline

Add `Button` component

Add installation instructions

Add `Icon` component

Add datepicker to RoverUI

Buttons with addons don't get vertically center-aligned by default.

I think align-items: center should be the default style for Button.
(align-contents: center is already there, so it seems unlikely someone would have been depending on a non-center alignment.)

Add most-wanted components to RoverUI

Please leave comments on this issue with any components you'd like to see in RoverUI that don't exist yet.

One component per comment, and add 👍s to add your vote to components mentioned by others.

We'll try to add the most wanted stuff first!

Set up best-practice storybook template

Looking into support for documentation in page on the newest example of storybook

Consider adding "margin" prop shortcuts

Adding wrapping divs to all of our existing components to preserve layout is annoying. Maybe steal idea from styled-system and use margin prop shortcuts:

<Button m="sm">
  {/* ... Button with "small" margin */}
</Button>

<Media>
  <Media.Item mr="auto"></Media.Item>
</Media>

Avatar component not rendering images

The component decides whether to render an image or not by performing aHEAD request to the given imageUrl, if the server responds with a 200 the image will be rendered. The problem is that if the server doesn't allow HEAD requests, images won't be rendered even though they are valid image URLs.

Another problem is that this URL check process is blocking the main thread.

Add StatusBar to rover-ui as Callout

Add `Paper` component