8base UI Kit

Storybook - https://8base.github.io/boost/

Start local

yarn storybook

Update snapshots

docker pull vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
docker run --privileged --name e2e-chrome -p 9222:9222 -d vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
yarn e2e:update

Usage

Basic usage

import{BoostProvider,Button}from'@8base/boost';constApp=()=>{return(<BoostProvider>
...
<Button>Some Text</Button></BoostProvider>)}

Usage with custom theme

import{BoostProvider,createTheme}from'@8base/boost';constcustomTheme=createTheme({/** Change the pallete of the color. */COLORS: {PRIMARY: '#3EB7F9',PRIMARY_TEXT_COLOR: 'darkorange',SECONDARY_TEXT_COLOR: 'orange',},/** Change the custom components styles if it needed. */components: {input: {root: {borderColor: 'gray',},modifiers: {hasError: {borderColor: 'red',}}},button: ({COLORS,SIZES})=>({root: {fontSize: SIZES.OVERLINE_1,},modifiers: {disabled: {backgroundColor: COLORS.RED,},},}),},});constApp=()=>{return(<BoostProvidertheme={customTheme}>
...
</BoostProvider>)}

Icons

Extends icons pack

To expand icons pack you should add babel-plugin-inline-react-svg or describe svg components manual.

import{BoostProvider,createTheme}from'@8base/boost';importSomeSvgIconfrom'./some-svg-icon.svg';importAnotherSvgIconfrom'./another-svg-icon.svg';consticons={
SomeSvgIcon,
AnotherSvgIcon,}constApp=()=>{return(<BoostProvidericons={icons}>
...
<Iconname="AnotherSvgIcon"size="lg"color="RED"/></BoostProvider>)}

Using with fontawesome

At the first you need to add install awesome font to the index.html as described in the fontawesome docs.

import{BoostProvider,createTheme}from'@8base/boost';constApp=()=>{return(<BoostProvider>
...
<IconclassName="fas fa-igloo"color="RED"size="lg"/></BoostProvider>)}