Gratio UI Components

Пакет с простыми гибко кастомизируемыми компонентами.

Разработка

Установите зависимости и запустите StyleGuide локально:

npm i
npm run dev

Откроется стайлгайд в котором можно сразу видеть изменения, которые вы внесёте в код. При необходимости правьте файл guide.tsx если хотите проверить как будет выглядеть тот или иной пропс компонентов.

После внесения изменений выполните build:

npm run build

Как использовать компоненты в проектах

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

Компоненты можно использовать напрямую без темы:

import { Button, Spinner } from '@gratio/ui';

const App = () => (
  <div>
    <Button onClick={() => {}}>Click me</Button>
    <Spinner size={30} />
  </div>
)

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

Все компоненты используют semantic colors из ThemeProvider. Оберните приложение в ThemeProvider для кастомизации:

import React from 'react';
import { ThemeProvider, Button } from '@gratio/ui';

// Светлая тема
const lightTheme = {
  background: {
    primary: '#83ec4a',    // Основной цвет (кнопки, активные элементы)
    secondary: '#f0f0f0',  // Вторичный фон
    tertiary: '#ffffff'    // Фон контейнеров
  },
  text: {
    primary: '#000000',    // Основной текст
    secondary: '#606060',  // Вторичный текст
    tertiary: '#999999'    // Tertiary текст (placeholders)
  },
  border: {
    primary: '#cccccc',    // Основные границы
    secondary: '#e0e0e0'   // Вторичные границы
  }
};

// Тёмная тема
const darkTheme = {
  background: {
    primary: '#2b67d1',
    secondary: '#1a3d5c',
    tertiary: '#0f2942'
  },
  text: {
    primary: '#ffffff',
    secondary: '#b8dcff',
    tertiary: '#8ab4db'
  },
  border: {
    primary: '#5ab0ff',
    secondary: '#3a5f7d'
  }
};

export function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Button onClick={() => {}}>Themed Button</Button>
    </ThemeProvider>
  );
}

Как работают semantic colors

Каждый компонент использует семантические цвета из темы:

• Button: background.primary + text.primary
• Input: border.primary + text.primary
• Checkbox: border.primary (unchecked), background.primary (checked)
• Spinner: background.primary
• Steps: активный - background.primary, неактивный - border.secondary
• Tags: фон - background.secondary, выбранный - background.primary

Все свойства темы опциональны - если не указаны, используются дефолтные значения.

Дополнительные утилиты

В пакете есть вспомогательные функции и хуки

import { getCurrentDate, daysUntil, pluarizeText, formatNumber, makeHexColorOpacity } from '@gratio/ui/shared';
// Все утилиты импортятся из @gratio/ui/shared
getCurrentDate - получение текущей даты с читаемым названием месяца
daysUntil - расчёт количества оставшихся дней до переданной даты
pluarizeText - выбор подходящей к числу формы слова: pluarizeText(13, ['день', 'дня', 'дней']) -> 'дней'
formatNumber - разеделение разрядов цифры пробелами

makeHexColorOpacity - Если нужно сделать какой-то RGB-цвет прозрачным для использования in-JS:
<div style={{ background: makeHexColorOpacity(theme.background, 0.5) }} />

Также есть вспомогательные хуки (импорт из @gratio/ui оставлен для совместимости)

// Хук для установки CSS-in-JS стилей для элементов при наведении.
import { useHover } from '@gratio/ui';
...
const hover = useHover({ backgroundColor: "blue" })
return (<p {...hover} >Hover me!</p>)