balena-io-modules / rendition

A library of React UI components

Rendition

A library of UI components, built using React, styled-components and styled-system.

Table of Contents

• Installation
• Usage
• Components
• Development
• Testing
• Upgrading

Installation

npm install --save rendition

Usage

Wrap your application in the Provider component and start using components!

import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Box, Provider } from 'rendition';

ReactDOM.render(
  <Provider>
    <Box my={3} mx={['auto', 15]}>
      <Button primary emphasized>Click me</Button>
    </Box>
  </Provider>,
  document.getElementById('root')
);

Components

For an interactive demo of all components, see https://balena-io-modules.github.io/rendition

Provider

Wrap your application in the <Provider> component so that child components can correctly inherit the default theme. You can optionally provide your own theme.

Accessing the theme object

You can access the theme object in <Provider>'s descendant components using the useTheme hook:

import React from 'react'
import { useTheme } from 'rendition';

const MyComponent = () => {
  const theme = useTheme()

  // ...
}

Styled system

All components support styled-system attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of string | number | Array<string | number>. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the theme property of the Provider component, by default this is set to [32, 48, 64, 80] where each number is the screen width in ems.

Name	Type	Description
width	ResponsiveStyle	sets the width
minWidth	ResponsiveStyle	sets the min-width
maxWidth	ResponsiveStyle	sets the max-width
height	ResponsiveStyle	sets the height
minHeight	ResponsiveStyle	sets the min-height
maxHeight	ResponsiveStyle	sets the max-height
fontSize	ResponsiveStyle	sets the font size
display	ResponsiveStyle	sets the display css property
color	ResponsiveStyle	sets the color css property
bg	ResponsiveStyle	sets the background css property
m	ResponsiveStyle	sets the margin css property
mt	ResponsiveStyle	sets the margin-top css property
mr	ResponsiveStyle	sets the margin-right css property
mb	ResponsiveStyle	sets the margin-bottom css property
ml	ResponsiveStyle	sets the margin-bottom css property
mx	ResponsiveStyle	sets both the margin-right and margin-left css properties
my	ResponsiveStyle	sets both the margin-top and margin-bottom css properties
p	ResponsiveStyle	sets the padding css property
pt	ResponsiveStyle	sets the padding-top css property
pr	ResponsiveStyle	sets the padding-right css property
pb	ResponsiveStyle	sets the padding-bottom css property
pl	ResponsiveStyle	sets the padding-left css property
px	ResponsiveStyle	sets both the padding-right and padding-left css properties
py	ResponsiveStyle	sets both the padding-top and padding-bottom css properties

*ResponsiveStyle corresponds to a type of string | number | Array<string | number>

Extra components

Some components in the storybook are grouped separately under the Extra label. These components are not loaded by default as they rely on other large packages that you may not want to include in your application. If you would like to use them they can be loaded using by prefixing the component name with rendition/dist/extra/. For example to load the Markdown components you can use:

import { Markdown } from 'rendition/dist/extra/Markdown';

Contributing

Please read our contribution guidelines

rendition's Issues

Update readme to reflect new version

Move to Preact and styled-components

Preact's License is a lot less scary than react's and is a much smaller library.
We only lose features that we don't care about, e.g. older browsers and the createClass API.

The argument for a switch to styled components is a more about usability in my opinion. I would really like to see each component be entirely self-contained, rather than having to load an additional stylesheet. I'm a fan of styled-components as it is very straightforward and easy to get started with, but I'm willing to be swayed another way.
https://emotion.sh/ looks like a good alternative to styled-components that provides better performance in a smaller package.

@Shou @craig-mulligan I'm interested to hear your thoughts

Implement remaining elements from the styleguide

• Inputs
• Dropdowns
• Buttons
• Warnings and alerts
• Modals
• Tables
• Navbar

If 'Date Time' Pine Type display is not given a value it displays the current time

No value should be displayed if the component is not provided with valid data.

Fix devicestausgauge hover glitch in edge

Connects to https://github.com/resin-io/resin-ui/issues/1266

Add logic for allowing an array of rules to be passed to sieve.filter()

Don't show an input field when filtering on a boolean value

At the moment if you have a boolean value in your schema you will see an unnecessary input field for boolean values.

Add styled-components babel plugin to improve debugging expierence

https://github.com/styled-components/babel-plugin-styled-components

Add an example data set to filters story

Auto publish to github pages on master merge

This should be a straightforward job on travis/circle

Add support for variated view storage in filters.

In most instances, a user will want views to be stored as a single array.
I think we need to change up the views model to either be a single array, or an object with the following format.

[
    {
        key: 'global', // Unique key for this set of views
        scopeLabel: 'everyone', // Text shown when selecting where to save view
        title: 'Global', // Text shown above views in views menu
        data: [] // array of views
    }
]

add 'publish-storybook' npm script

The script appears to have been deleted in the last merge

Gauge component should allow you to specify legend order

Add Banner

Add pine types component from pensieve

The types component from pensieve ( https://github.com/resin-io/pensieve/tree/master/src/services/types ) can be used for representing different pinejs types as UI components, we should move it to this module so it can be re-used by other components.

Device status gauge is black with 1 device

Ensure PineTypes tests don't throw when presented with a null value

Add Maps component

Add a component for displaying a google map, as well as markers on that map.

Re-implement tests

Using jest would be a good start https://facebook.github.io/jest/

install fails on node 8 + npm 5

node sass is failing see here: sass/node-sass#1991 the said it should be fixed with npm 5.0.2 but travis still fails with that for now I'm locking the ci to node 7.

Export a themeprovider component

Users should wrap their app in the <ThemeProvider> component, which will essentially be rebass' <Provider> component with our theme pre-injected.

#70 breaks the placeholder color for zero count gauge

Add code with copy to exports

`publish-storybook` script is failing

Uglify JS is unable to parse an arrow function imported into the bundle from resin-semver

Failed to build the storybook
static/preview.8657f91df26baa59b122.bundle.js from UglifyJs
Unexpected token: operator (>) [static/preview.8657f91df26baa59b122.bundle.js:76641,30]

Write a detailed usage guide

Similar to the one for reactstrap https://reactstrap.github.io/components/alerts/
It should show valid prop values, the rendered output and example code.

Add documentation for less variables and colors

We should list the variables used, and their defaults. Similar to https://getbootstrap.com/css/#less-variables

Use `gh-pages` module for publishing storybook.

We can use the gh-pages module instead of a custom bash script for publishing the storybook.

Add code-with-copy component

Add husky precommit hook

The precommit should run lint and prettier.

Add progress bar component

Use travis to build dist files

See discussion here #56 (comment)

NPM build is broken

Imports are broken with the current npm build

Have the components library use Bootstrap 4 and reactstrap as a base

https://github.com/reactstrap/reactstrap/
The idea is to use reactstrap as a base for our custom components.
The components library will include the BS4 library as well as the components
We'll also need to convert existing Less files to Sass.

CodeWithCopy component should fail gracefully

If the text prop is not set the component should try and use the copy prop and vice versa.
This will ease problems where you try and shorthand the component and end up with undefined in your clipboard.

components

primitives

• Text

• Image

• Heading

• Link

• Button

• Paragraph

• List

• List Item

• Table

• Grid

• input

• PageHeader

• Jumbotron

• Navbar

• Dropdown

• LoadingBar

Refactor device status gauge

Based on @craig-mulligan review here #29
I propose that we provide a generic gauge component as suggested, and also provide one wrapped in some simple logic that will make it specific to devices.

Fix Sieve filter logic for filtering arrays

Add device status gauge component

import methods

@LucianBuzzo as we discussed, it's not desirable to enforce a long import path or keep components in the root of the module directory.

I found what I think is a really nice alternative: https://github.com/ant-design/babel-plugin-import

It's a babel plugin that imports the components based on a small config. So we'd just tell users of the component lib to add this to there .babelrc

{
  "libraryName": "resin-components",
  "libraryDirectory": "dist",  // default: lib
}

Then they could use import components like this:

import { button } from 'resin-components';

And it'd translate too:

import button from 'resin-components/dist/button';

It also has an option to import the less modularly, which would decrease amount of css they build.

Nice thing is that they can still use it the old fashioned way too.

What'd you think?

Auto publish to npm on master merge

This should be a straightforward job on travis/circle

Add support for human friendly labels when using filters/schema

Currently, the filterable field uses the field name on the display.
If my model looks like this:

const schema = {
  is_supported: {
    type: 'Boolean'
  }
};

Then the output looks like this:

Ideally I want to provide human friendly labels to my schema.

NPM package doesn't contain dist folder

Fix `is` prop

Currently <Button is='a'>hello world</Button> Will render a <button> markup instead of <a>.

Gauge renders the placeholder color when only one item has value

See: andreaferretti/paths-js#47

Add filter component from pensieve

The filter component from the pensieve project should be moved to this repo https://github.com/resin-io/pensieve/tree/master/src/components/filters

Setup CI

We can start with Travis

Increase z-index on filters modal

Convert to TypeScript

Styling

So I've been playing around with different styling techniques for the component library. We had 3 constraints when trying.

• locally scoped styles
• easily themeable
• performant

My first experiment was with css-modules + scss and bootstrap. It worked okay, but connecting the theme-ability between bootstraps _variables.scss and the components css modules. I ended up using a sass-resource-loader to add the scss variables so they are available in every css module. But it was pretty messy when using it externally.

You'd need several loaders and an alias pointing to the projects variables.scss file as well a bunch of peer dependencies. You can see what it looks like in the first commit of this project.

I then found styled-components it's built by some of the founders of the css-modules project and is a sort of hybrid between js styles and css modules.

The thing I like about it is that it allows you to change styles based on props without writing them as inline styles. So you can keep things locally scoped without increase specificity. It's also got a neat themeProvider utility which allows you to access the theme object via this.props.theme.

So it ticks these boxes.

• locally scoped styles
• easily themeable

Performance is something I'm unsure about. styled-components builds a unique class and adds it as a styled tag in <head/> it's great cause you only get styles you use on the page. but it could bloat bundle.js especially if we add some libs state dependent styling eg [chroma.js](https://github.com/gka/chroma.js/)

Here's a good comparison of the styling options available: https://github.com/styled-components/comparison.

What do you guys think? As you can tell I'm very much leaning to styled-components we'd have to rebuild a few components that bootstrap would have given us but it'll give us a lot more control, and it'll be more usable and configurable in other projects.

@emirotin @pimterry @LucianBuzzo

Add underline buttons

This is currently used for the 'View Pricing' button on the billing page