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

Установка

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

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

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

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. Свойствами темы является обычный объект, его можно расширять и изменять, перезаписывая текущие значения. Например, изменение базовой палитры и частичное изменение размеров тултипа:

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',
      },
    },
  },
}

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>
)