# @8base/boost

> [![Build Status](https://travis-ci.org/8base/boost.svg?branch=master)](https://travis-ci.org/8base/boost)

Latest version **1.12.1** (published 2022-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @8base/boost
pnpm add @8base/boost
yarn add @8base/boost
bun add @8base/boost
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.12.1 |
| Published | 2022-04-15 |
| First published | 2018-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 8base |
| Maintainers | 8base-bot, selnapenek, 8basetimmyers, s1owjke, eugene.antonevich, ilazarev |

## Links

- npm: https://www.npmjs.com/package/@8base/boost
- npm.io page: https://npm.io/package/@8base/boost

## Dependencies (16)

- [color](https://npm.io/package/color.md) ^3.0.0
- [luxon](https://npm.io/package/luxon.md) 1.7.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [deepmerge](https://npm.io/package/deepmerge.md) ^3.0.0
- [recompose](https://npm.io/package/recompose.md) ^0.27.0
- [react-popper](https://npm.io/package/react-popper.md) ^1.3.2
- [react-portal](https://npm.io/package/react-portal.md) ^4.1.5
- [react-select](https://npm.io/package/react-select.md) ^3.0.4
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.16
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.5.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.15
- [emotion-theming](https://npm.io/package/emotion-theming.md) ^10.0.14
- [react-datepicker](https://npm.io/package/react-datepicker.md) ^2.3.0
- [react-input-mask](https://npm.io/package/react-input-mask.md) ^2.0.4
- [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.7.1
- [react-dropdown-tree-select](https://npm.io/package/react-dropdown-tree-select.md) 1.13.0

## Recent versions

- 1.12.1 (latest) — 2022-04-15
- 1.12.0 — 2022-03-28
- 1.11.8 — 2022-02-04
- 1.11.7 — 2021-11-25
- 1.11.6 — 2021-04-21
- 1.11.5 — 2021-04-08
- 1.11.4 — 2021-04-01
- 1.11.3 — 2021-01-25
- 1.11.2 — 2021-01-25
- 1.11.1 — 2021-01-25
- 1.11.0 — 2021-01-25
- 1.10.0 — 2020-09-10
- 1.9.4 — 2020-03-19
- 1.9.3 — 2020-03-16
- 1.9.2 — 2020-01-09
- … 248 more at https://npm.io/package/@8base/boost/versions

## README

[![Build Status](https://travis-ci.org/8base/boost.svg?branch=master)](https://travis-ci.org/8base/boost)

# 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

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

const App = () => {
  return (
    <BoostProvider>
      ...
      <Button>Some Text</Button>
    </BoostProvider>
  )
}
```

### Usage with custom theme

```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 (
    <BoostProvider theme={ customTheme }>
      ...
    </BoostProvider>
  )
}
```


## Icons

### Extends icons pack
To expand icons pack you should add [babel-plugin-inline-react-svg](https://www.npmjs.com/package/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 (
    <BoostProvider icons={ icons }>
      ...
      <Icon name="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](https://fontawesome.com/start).

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

const App = () => {
  return (
    <BoostProvider>
      ...
      <Icon className="fas fa-igloo" color="RED" size="lg" />
    </BoostProvider>
  )
}
```

---
_Source: https://npm.io/package/@8base/boost · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._