MBT UI Kit

React компонентная библиотека со стилями на SCSS для Electron приложений.

Установка

npm install mbt-ui-kit
# или
bun install mbt-ui-kit

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

import { Button, Input } from "mbt-ui-kit";
import "mbt-ui-kit/styles";

function App() {
  return (
    <div>
      <Input label="Email" placeholder="Введите email" showSearchIcon />
      <Button>Отправить</Button>
    </div>
  );
}

Компоненты

Button

Кнопка с тремя состояниями: default, hover, disabled.

<Button>Start</Button>
<Button disabled>Start</Button>
<Button fullWidth>Start</Button>

Input

Текстовое поле с label и опциональной иконкой.

<Input label="Label" placeholder="text_input" showSearchIcon />
<Input label="Label" placeholder="text_input" muted />
<Input placeholder="text_input" fullWidth />

Typography

Компоненты для заголовков, текста и метрик.

<Heading level={1}>Main Title</Heading>
<Text>Regular text</Text>
<Text strong>Strong text</Text>
<Metric large>1,234</Metric>

MenuButton

Кнопка для боковых меню с иконкой и текстом.

<MenuButton>Training</MenuButton>
<MenuButton selected>Training</MenuButton>
<MenuButton small>Training</MenuButton>

Разработка

# Установка зависимостей
bun install

# Запуск Storybook
bun storybook

# Сборка библиотеки
bun run build

# Линтинг и форматирование
bun run lint
bun run format

Дизайн-токены

Токены дизайн-системы доступны в трёх форматах для максимальной гибкости.

1. TypeScript/JavaScript

Импорт только токенов (без компонентов и стилей):

import { tokens, colors, spacing, radius } from "mbt-ui-kit/tokens";

const MyComponent = () => (
  <div style={{ 
    backgroundColor: colors.primary,
    padding: spacing[4],
    borderRadius: radius.sm 
  }}>
    Content
  </div>
);

Или из основного пакета:

import { colors, spacing, fontSizes } from "mbt-ui-kit";

Доступные токены:

• colors — цветовая палитра
• fonts — семейства шрифтов
• fontSizes — размеры текста
• fontWeights — начертания шрифтов
• spacing — отступы и размеры
• radius — радиусы скругления
• zIndex — z-индексы
• transitions — анимации

2. CSS Custom Properties

Импорт CSS переменных:

import "mbt-ui-kit/tokens.css";

Использование в CSS/SCSS:

.my-class {
  background-color: var(--mbt-color-primary);
  padding: var(--mbt-space-4);
  border-radius: var(--mbt-radius-sm);
  font-family: var(--mbt-font-primary);
  transition: all var(--mbt-transition-fast);
}

Все переменные имеют префикс --mbt- для избежания конфликтов.

3. SCSS Variables (для расширения библиотеки)

@use "mbt-ui-kit/src/styles/tokens" as *;

.my-class {
  background-color: $primary;
  padding: $space-4;
  border-radius: $radius-sm;
  font-family: $font-ui-primary;
}

TypeScript

Библиотека полностью типизирована с подробными JSDoc комментариями.

Лицензия

MIT