# cw-react-components

React components Storybook repository for CW Platform

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

## Install

```bash
npm install
```

## Develop

To launch the local Storybook with hot reloading, run:

```bash
npm run dev
```

## Production

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

```bash
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:

```bash
npm run build:docs
```

and commit the resultant `/docs` files


## Folder Structure

- [.storybook](#storybook)
  - [themes](#storybookthemes)
- [docs](#docs)
- [src](#srccomponents)
  - [components](#srccomponents)
    - [cardTable](#srccomponentscardtable)
    - [utils](#srccomponentsutils)
      - [hooks](#srccomponentsutilshooks)
      - [styles](#srccomponentsutilsstyles)
      - [types](#srccomponentsutilstypes)
  - [fonts](#srcfonts-srcicons)
  - [icons](#srcfonts-srcicons)
  - [themes](#srcthemes)
    - [utils](#srcthemesutils)
      - [colorPickers](#srcthemesutilscolorpickers)
      - [fontPickers](#srcthemesutilsfontpickers)
      - [mediaQueries](#srcthemesutilsmediaqueries)

## .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.

```jsx
<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`.

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

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

export default InsuranceTypeTemplate;
```

or even adding custom functionality:

```jsx
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:

```js
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:

```jsx
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:

```js
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:

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

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

```js
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:

```js
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:

```js
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

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

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

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

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