cw-react-components v0.1.1
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
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 tablecards
: array of objects with card information, each key should correspond to atype
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 cardactions
: 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',
},
...
};