Gratio UI Copmponents

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

Разработка

Установите зависимости и запустите 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

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