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

$3

`js
import { BoostProvider, Button } from '@8base/boost';

const App = () => {
return (

...
Some Text

)
}
`

$3

`js
import { BoostProvider, createTheme } from '@8base/boost';


const customTheme = 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,
},
},
}),
},
});


const App = () => {
return (

...

)
}
`




Icons

$3

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

`js
import { BoostProvider, createTheme } from '@8base/boost';

import SomeSvgIcon from './some-svg-icon.svg';
import AnotherSvgIcon from './another-svg-icon.svg';

const icons = {
SomeSvgIcon,
AnotherSvgIcon,
}

const App = () => {
return (

...


)
}
`




$3

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

`js
import { BoostProvider, createTheme } from '@8base/boost';

const App = () => {
return (

...


)
}
``