@relotus/utkonos

Table of Contents

• @relotus/utkonos
  • Описание
  • Установка
  • Обновление
  • Использование
  • SingleDatePicker & DateRangePicker
  • Стилизация
  • Правила наименования CSS .class селекторов

@relotus/utkonos

Описание

@relotus/utkonos - библиотека React UI компонентов.

Установка

npm i @relotus/utkonos

Вместе с самим пакетом устанавливаются peerDependencies. Версии пакетов фиксированы.

Добавить в файл общих стилей дополнительные стили компонентов:

@import '@relotus/utkonos/index';

Обновление

npm i @relotus/utkonos@latest

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

import ReactDOM from 'react-dom';

import { Button } from '@relotus/utkonos';

function App() {
  return <Button>Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

SingleDatePicker & DateRangePicker

Подключение и использование компонентов выбора дат дополнительно требует выполнения скрипта инициализации (/* 1 */) и языковой локализации пакета moment (/* 2 */). Перечисленные действия необходимо реализовать в коде проекта только один раз. Для этих целей рекомендуется использовать файл src/index.tsx (или аналогичный), являющийся базовой точкой входа в проект.

Компоненты <SingleDatePicker /> и <DateRangePicker /> - это стилизованные компоненты библиотеки react-dates. API компонентов повторяет API компонентов библиотеки, а также включает несколько дополнительно возможностей (например, валидация полей ввода).

Подключение и использование компонентов <SingleDatePicker /> и <DateRangePicker />:

import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment'; /* 2 */

import 'moment/locale/ru'; /* 2 */

import 'react-dates/initialize'; /* 1 */

import { SingleDatePicker } from '@relotus/utkonos';

moment.locale('ru-Ru'); /* 2 */

function App() {
  const [date, setDate] = React.useState(null);

  return <SingleDatePicker date={date} onDateChange={setDate} />;
}

ReactDOM.render(<App />, document.querySelector('#app'));

Стилизация

Для стилизации компонентов используется SCSS.

Главному классу компонента дается имя компонента в camelCase с префиксом uu-:

.uu-button {
  font-size: 13px;
  line-height: 36px;
}

Важно давать уникальное имена CSS классам в рамках всех компонентов. Это сделано для того, чтобы дать возможность менять стили на уровне проектов.

Пример кастомизации стиля кнопки на уровне проекта:

.root :global(.uu-button) {
  font-size: 16px;
}

Правила наименования CSS .class селекторов

Название CSS-классов задается в camelCase с префиксом uu-:

/* index.scss */
.uu-awesomeComponent {
  display: flex;
  justify-content: center;
}

Для задания модификаторов используется БЭМ нотация с использованием _ в качестве разделителя.

Булевый модификатор:

/* index.scss */
.uu-awesomeComponent_loading {
  opacity: 0.5;
}

Модификатор ключ-значение:

/* index.scss */
.uu-awesomeComponent_view_primary {
  background-color: #c0ffee;
}
.uu-awesomeComponent_view_secondary {
  background-color: #bada55;
}

Для кастомизации компонента рекомендуется добавлять в API дополнительный prop className.

Пример задания классов в рамках компонента:

/* index.tsx */
import React from 'react';
import cn from 'classnames';

import './index.scss';

type Props = {
  /**
   * Стилевое оформление для визуального выделения блокирующего действие процесса
   *
   * @default false
   */
  loading?: boolean;
  /**
   * Стилевое оформление для визуального выделения блокирующего действие процесса
   *
   * @default "primary"
   */
  view?: 'primary' | 'secondary';
  /** Дополнительный класс */
  className?: string;
};

export function AwesomeComponent(props: Props): JSX.Element {
  const { className, loading = false, view = 'primary' } = props;
  return (
    <div
      className={cn(className, 'uu-awesomeComponent', `uu-awesomeComponent_view_${view}`, {
        'uu-awesomeComponent_loading': loading,
      })}
    />
  );
}