Rendition NPM | npm.io

Rendition

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

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://resin-io-modules.github.io/rendition

Each component has its own README file that can be seen at the bottom of it's page.

Core

Typography

Beta

Form

Extra

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.

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
w	`ResponsiveStyle`	sets the width
fontSize	`ResponsiveStyle`	sets the font size
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';

Unstable/Beta components

Some components in the storybook are grouped seperately under the Beta label. These components are experimental and still under development, as such their API may change without notice. They should not be used in a production application. If you would like to try them out they can be loaded using import * from 'rendition/dist/unstable'.

Developing

Clone this repository and then run:

npm ci

The interactive storybook can be launched by running:

npm run storybook

Code is automatically linted and formatted by Husky as a pre-commit hook.

The interactive storybook can be published by running:

npm run publish-storybook

Testing

npm test

Visual testing

Visual testing relies on a consistent execution environment, ensuring that control inputs and fonts are always rendered the same way. To ensure this happens both screenshot generation and testing steps are run inside a docker container. If you have made changes to a component that will affect the way it looks in a story, screenshots should be recreated using npm run generate-screenshots which will spawn a docker container, generate screenshots and copy them back toy your local file system. Screenshots of each story are stored in the __screenshots__ directory. When the test suite runs, new screenshots are created and compared against the existing ones in the __screenshots__ directory. Any differences will cause the tests to fail, as it indicates an unexpected visual change to a component. A full report of the visual test can be found at .reg/report.html.