cw-react-components

React components Storybook repository for CW Platform

Storybook: https://coverwallet.github.io/cw-react-components

Install

npm install

Develop

To launch the local Storybook with hot reloading, run:

npm run dev

Production

The minimized version of the components lives in the dist folder. To compile a production ready bundle, execute:

npm run build

and commit the resultant /dist files

Update docs

To update the remote Storybook in https://coverwallet.github.io/cw-react-components, run:

npm run build:docs

and commit the resultant /docs files

Folder Structure

• .storybook
  • themes
• docs
• src
  • components
    • cardTable
    • utils
      • hooks
      • styles
      • types
  • fonts
  • icons
  • themes
    • utils
      • colorPickers
      • fontPickers
      • mediaQueries

.storybook

All config related files for the Storybook demo of the components. It has its own webpack.config to process the Storybook application both locally and for the docs

.storybook/themes

Theme configuration for Storybook

docs

Github pages docs accessible from https://coverwallet.github.io/cw-react-components. This files are automatically generated when running yarn build:docs and if they are pushed to master, the docs in the github page will update with the latest changes in the library

src/components

Each UI component is contained in its own folder next to the stories directly related with that component (present in *.stories.js files)

src/components/cardTable

CardTable component that receives three props:

• sections: array of objects with the column information for the card table
• cards: array of objects with card information, each key should correspond to a type in the sections column info, see storybook for more details. There could be two special types:
  • status: will show the status component at the bottom left of the card
  • actions: array of objects with label and handlers for each card. The handlers will receive the card info as argument. It will show the card actions component at the right end of the card

CardTable will render a TableHeader with the section title of each column in a CardItemHeader component and a Card component for each card in cards.

Each Card will render a CardItem for each key in the cards object in the corresponding column . If the card info lacks some key present in the sections types, an empty CardItem will be rendered there instead. If the card has some key that is not present in the sections types, that information will not be rendered.

<CardTable
  sections={[{ type: 'insuranceType' }, { type: 'accountName' }]}
  cards={[
    {
      insuranceType: 'General Liability',
      accountName: 'A & S Transportation',
      premium: 400, // not present in the sections' types, it won't be rendered
    },
    {
      insuranceType: 'General Liability',
      // accountName: null, // will render an empty CardItem for this column
      premium: 500, // not present in the sections' types, it won't be rendered
    },
  ]}
/>

To have a custom template for the insuranceType key, a custom template for the CardItem can be defined simply by extending the basic StyledCardItem.

import styled from 'styled-components';
import { StyledCardItem } from 'cardItem';

const InsuranceTypeTemplate = styled(StyledCardItem)`
  custom: style;
`;

export default InsuranceTypeTemplate;

or even adding custom functionality:

import styled from 'styled-components';
import { StyledCardItem } from 'cardItem';

const CustomStyles = styled(StyledCardItem)`
  custom: style;
`;

const InsuranceTypeTemplate = ({ value, ...props }) => (
  <CustomStyles {...props}>{value}</CustomStyles>
);

export default InsuranceTypeTemplate;

The template will receive a prop value with the value for the insuranceType in the card object, and the rest of the props used for styles, like theme.

The template needs to be added to the basic CardItem with:

import CardItem from 'cardItem';
import InsuranceTypeTemplate from 'insuranceTypeTemplate';

CardItem.addTemplates({
  insuranceType: InsuranceTypeTemplate,
});

The same can be done for the CardItemHeader, usefull when the custom CardItem for a key has more space reserved for it, to keep the same space reserved for the card header:

import CardItemHeader, { BaseStyledHeader } from 'cardItemHeader';

const CustomHeader = styled(BaseStyledHeader)`
  flex-basis: 20%;
`;

CardItemHeader.addTemplates({
  insuranceType: CustomHeader,
});

src/components/utils

JS common functionality between components

src/components/utils/hooks

Common react hooks for components

src/components/utils/styles

Common styles for styled components, to be used as:

import styled from 'styled-components';
import commonStyle from 'Components/utils/styles/commonStyle';

const NewComponent = styled(commonStyle);
// or
const NewComponent = styled.div`
  ${commonStyle}
`;

src/components/utils/types

Custom types to be used in React PropTypes with utilities to reason about them

src/fonts, src/icons

Static assets for fonts and icons. Imported through webpack loaders

src/themes

Platform themes for the UI components

src/themes/utils

Pickers for theme attributes

src/themes/utils/colorPickers

Each theme base color can be used in any style component as:

styled.div`
  color: ${primaryColor};
`;

An opacity can be specified accessing the corresponding property of the picker for that specific fixed opacity:

styled.div`
  color: ${primaryColor[0.2]}; // Primary Color at 20% alpha
  color: ${primaryColor[0.4]}; // Primary Color at 40% alpha
  color: ${primaryColor[0.6]}; // Primary Color at 60% alpha
  color: ${primaryColor[0.8]}; // Primary Color at 80% alpha
`;

The Notification Color Picker should be preexecuted with the status:

styled.div`
  color: ${notificationColor('success')}; // theme color for success
  color: ${notificationColor('error')}; // theme color for error
  color: ${notificationColor('info')}; // theme color for info
  color: ${notificationColor('warning')}; // theme color for warning

  color: ${notificationColor(
    'success',
  )[0.4]}; // theme color for warning at 40% alpha
`;

src/themes/utils/fontPickers

The font size can be specified in any styled component as:

styled.div`
  font-size: ${textSize('M')};
`;

where 'M' is the size of the text defined for each theme. The possible values are (with equivalent in pixels for the base theme):

XS    => 10px
S     => 12px
M     => 14px
L     => 16px
XL    => 18px
XXL   => 24px
XXXL  => 28px

src/themes/utils/mediaQueries

Media query helpers for the theme

import { screenSize } from 'Themes/utils/mediaQueries';

styled.div`
  @media ${screenSize('desktop')} {
    width: 122px;
  }
`;

where 'desktop' is a breakpoint defined in the theme:

const theme = {
  ...
  sizes: {
    mobile: '0px',
    tablet: '767px',
    landscape: '1024px',
    desktop: '1200px',
  },
  ...
};