# rbs-react-ui-components

> React component set for develope inner system

Latest version **1.1.8** (published 2019-09-26) · 0 weekly downloads

## Install

```sh
npm install rbs-react-ui-components
pnpm add rbs-react-ui-components
yarn add rbs-react-ui-components
bun add rbs-react-ui-components
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2019-09-26 |
| First published | 2017-07-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 375.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chak.noriss, noflex |

## Links

- npm: https://www.npmjs.com/package/rbs-react-ui-components
- npm.io page: https://npm.io/package/rbs-react-ui-components

## Dependencies (4)

- [polished](https://npm.io/package/polished.md) 2.3.3
- [prop-types](https://npm.io/package/prop-types.md) 15.5.10
- [react-datepicker](https://npm.io/package/react-datepicker.md) 2.2.0
- [styled-components](https://npm.io/package/styled-components.md) 4.1.3

## Recent versions

- 1.1.8 (latest) — 2019-09-26
- 1.1.7 — 2019-05-27
- 1.1.6 — 2019-04-26
- 0.4.5 — 2019-04-26
- 1.1.5 — 2019-04-26
- 0.4.4 — 2019-04-26
- 0.4.2 — 2019-04-26
- 1.1.4 — 2019-04-09
- 1.1.3 — 2019-04-05
- 1.1.2 — 2019-04-05
- 1.1.0 — 2019-03-26
- 1.0.1 — 2019-03-14
- 1.0.0 — 2019-02-21
- 0.5.1 — 2019-02-08
- 0.4.1 — 2018-10-09
- … 40 more at https://npm.io/package/rbs-react-ui-components/versions

## README

> Набор React-компонентов для внутренней разработки РБС

## Установка

```sh
npm install --save-dev rbs-react-ui-components
```

## Использование

Для использования иконок нужно подключить шрифты с иконками из библиотеки.

```sh
import icomoonTtf from 'rbs-react-ui-components/Icon/icomoon/icomoon.ttf';
import icomoonWoff from 'rbs-react-ui-components/Icon/icomoon/icomoon.woff';
import icomoonSvg from 'rbs-react-ui-components/Icon/icomoon/icomoon.svg';
```

Для компонентов предусмотрена частичная темизация (изменение базовых цветов, обводок, размеров), основанная на ThemeProvider из библиотеки styled-components `https://www.styled-components.com/docs/advanced#theming`. Основные параметры описаны в `src/components/core/themes/base.js`.
Свойствами темы является обычный объект, его можно расширять и изменять, перезаписывая текущие значения.
Например, изменение базовой палитры и частичное изменение размеров тултипа:

```sh
const theme = {
  global: {
    accentColors: {
      default: 'blue',
      action: 'orange',
      negative: 'red',
      positive: 'green',
    },
  },
  tooltip: {
    sizes: {
      s: {
        fontSize: '10px',
        padding: '6px 10px',
      },
      m: {
        fontSize: '16px',
        padding: '12px 14px',
      },
    },
  },
}
```

```sh
import React, { Fragment } from 'react'
import { createGlobalStyle } from 'styled-components'

import { Theme } from 'rbs-react-ui-components'
import Button from 'rbs-react-ui-components/Button'

import robotoRegular from '*/fonts/font_roboto_regular.ttf'
import robotoThin from '*/fonts/font_roboto_thin.ttf'
import robotoLight from '*/fonts/font_roboto_light.ttf'
import robotoMedium from '*/fonts/font_roboto_medium.ttf'

import icomoonTtf from 'rbs-react-ui-components/Icon/icomoon/icomoon.ttf';
import icomoonWoff from 'rbs-react-ui-components/Icon/icomoon/icomoon.woff';
import icomoonSvg from 'rbs-react-ui-components/Icon/icomoon/icomoon.svg';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'rbsOldIcons';
    src:
      url('${icomoonTtf}?yct89m') format('truetype'),
      url('${icomoonWoff}?yct89m') format('woff'),
      url('${icomoonSvg}?yct89m#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url(${robotoThin});
  }

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(${robotoLight});
  }

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(${robotoRegular});
  }

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(${robotoMedium});
  }
`

const theme = {
  global: {
    accentColors: {
      default: 'blue',
      action: 'orange',
      negative: 'red',
      positive: 'green',
    },
  },
  tooltip: {
    sizes: {
      s: {
        fontSize: '10px',
        padding: '6px 10px',
      },
      m: {
        fontSize: '16px',
        padding: '12px 14px',
      },
    },
  },
};

export const App = () => (
  <Theme theme={theme}>
    <Fragment>
      <GlobalStyle />
      <div>
        <h2>Welcome to React</h2>
        <Button />
      </div>
    </Fragment>
  </Theme>
)
```

---
_Source: https://npm.io/package/rbs-react-ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._