@rtslabs/react-components

A library of React component primitives for use in company projects and experiments.

Local Development

Link the local repository using your package manager

machine/repos/rts-react-components $ yarn link

machine/repos/new-react-project $ yarn link @rtslabs/react-components

Installation

Add the following to your package.json

"@rtslabs/react-components": "git+ssh://[email protected]/rtslabs/rts-react-components.git#development",

Component Structuring

Components have been organized as individual modules to allow for future initiatives like separate packaing, tests, documentation, and distribution.

Component Structure

- carousel
  - src (component modules)
    - Carousel.js
    - CarouselSlide.js
    - CarouselControls.js
  - index.js (exports necessary components from ./src)
  - stories.js (storybook stories)
  - styles.js (component base styles)

Components

Accordion
Breadcrumbs
Button
Card
Chart
Checkbox
DevAlert
Dropdown
Icon
Input
Layout
Link
Navbar
Sidebar
Table
Tabs
Tooltip

Writing Component Stories

Basic Story Example

import React from 'react';
import { storiesOf } from '@storybook/react';

import { Button } from 'components/button';

// first argument to storiesOf controls the navigation text in Storybook's sidebar
const stories = storiesOf('Button', module);

// first argument to add controls the text in the subnavigation
stories.add('default', () => (
  <Button>Submit</Button>
));

Theme Structuring

@TODO update once project theme is updated to reflect the theme @chrism has been building for Centivo.

API

create(type, styles)

built on top of styled from react-emotion—used for building primitives and extending existing components. Styles passed to create will be merged with the base styles provided by this library.

ThemeProvider(Component)

Directly exported from emotion-theming for convenience. Passes theme directly to children via context. Can be used as the root component or anywhere within the component tree. Overriding works as expected—theme properties from parent ThemeProvider will be overriden by properties from nested ThemeProviders.

Overriding Styles

Using the theme prop

import DangerButton from '<project_component_root>/buttons/Danger';

const Wrapper = (props) => (
  <DangerButton
    theme={{
      backgroundColor: props.active ? 'green' : 'grey'
    }}
  />
);

export default Wrapper;

Presentational Components

import create, { Button } from '@rtslabs/react-components';

import theme from '<project_theme_location>';

const styles = {
  backgroundColor: theme.colors.roles.background,
  padding: theme.buttons.padding,

  ':hover': {
    backgroundColor: theme.colors.states.hover
  }
};

const DangerButton = create(Button, styles);

DangerButton.propTypes = { ... };
DangerButton.defaultProps = { ... };

export default DangerButton;

Class Components

import React, { Component } from 'react';
import create, { Button } from '@rtslabs/react-components';

import styles from '<project_component_root>/buttons/danger';

const DangerButtonBase = create(Button, styles);

class DangerButton extends Component {
  state = {
    clicked: false
  };

  onClick = () => this.setState({ clicked: true });

  render() {
    return (
      <DangerButtonBase onClick={this.onClick} {...this.props}>
        {this.props.children}
      </DangerButtonBase>
    );
  }
}

export default DangerButton;