ndelangen/retail-ui

React controls to implement standards at https://guides.kontur.ru/

React UI

• Changelog

Квик-старт

yarn add @skbkontur/react-ui

И используем компонентики у себя в проекте:

/* ... */
import Button from '@skbkontur/react-ui/Button'
import Toast from '@skbkontur/react-ui/Toast'

const MyApp = () => (
  <div>
    Click this button
    {' '}
    <Button onClick={() => Toast.push('Hey!')}>Click me</Button>
  </div>
)

Если ругается, что regeneratorRuntime не определен, то необходимо подключить regenerator-runtime или babel-polyfill, например в index.html

Слоу-старт

Необходимо в конфиг webpack добавить следующие лоадеры:

/* ... */
module: {
  /* ... */
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'stage-0', 'react']
      },
      include: /retail-ui/
    },
    {
      test: /\.less$/,
      loaders: ['style', 'css', 'less'],
      include: /retail-ui/
    },
    {test: /\.(png|woff|woff2|eot)$/, loader: "file-loader"}
  ]
  /* ... */
}
/* ... */

Хотим другой цвет кнопки!

Тут придется юзать слоу-старт. В конфиге нужно указать

/* ... */
resolve: {
  /* ... */
  alias: {
    'react-ui-theme.less': 'path-to-my-theme-variables.less'
  }
  /* ... */
}
/* ... */

Список переменных можно глянуть в components/variables.less

Не могу прокинуть css-класс компонентам. Как кастомизировать?

Никак.

Тестирование

Тестирование происходит с использованием jest и gemini. Для запуска тестов на gemini необходимо проставить переменные окружения SAUCE_USERNAME и SAUCE_ACCESS_KEY.
Для запуска только jest тестов можно выполнить npm run unit-test

Помощь в развитии

Мы рады любой сторонней помощи. Не стесняйтесь писать в issues баги и идеи для развития библиотеки.
Присылайте пулл-реквесты. Даже если в них нет поддержки IE8. Мы доделаем (: