@grid-trade-x/ui

Современная библиотека React компонентов с TypeScript, SCSS modules и полным набором инструментов для разработки. Совместима с Next.js 15.4.6+ и React 18/19.

🛠 Технологический стек

• Сборка: tsup
• Тесты: vitest + @testing-library/react
• Превью компонентов: Ladle
• Качество кода: ESLint + Prettier
• Стили: SCSS modules
• Типизация: TypeScript

📦 Установка

npm install @grid-trade-x/ui
# или
yarn add @grid-trade-x/ui
# или
pnpm add @grid-trade-x/ui

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

В Next.js проекте (App Router)

// app/page.tsx
'use client'; // Не обязательно - компоненты уже имеют "use client"

import { Button } from '@grid-trade-x/ui';

export default function HomePage() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Hello!')}>
        Click me
      </Button>
    </div>
  );
}

🎨 Настройка шрифтов

UI пакет использует CSS переменные для типографики. Подключите шрифты в вашем приложении:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

:root {
  --gtx-font-family-primary: 'Inter', sans-serif;
}

Подробнее: FONTS.md

В обычном React проекте

import React from 'react';
import { Button } from '@grid-trade-x/ui';

function App() {
  return (
    <div>
      <Button variant="primary">Hello World</Button>
    </div>
  );
}

🛠 Разработка

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

npm install

Доступные команды

# Сборка проекта
npm run build

# Разработка с watch режимом
npm run dev

# Запуск тестов
npm run test

# Запуск тестов с UI
npm run test:ui

# Запуск тестов один раз
npm run test:run

# Превью компонентов (Ladle)
npm run preview

# Линтинг
npm run lint
npm run lint:fix

# Форматирование
npm run format
npm run format:check

📁 Структура проекта

src/
├── components/          # React компоненты
│   └── Button/         # Пример компонента
│       ├── Button.tsx
│       ├── Button.module.scss
│       ├── Button.test.tsx
│       └── Button.stories.tsx
├── test/               # Настройки тестов
│   └── setup.ts
├── types/              # TypeScript типы
│   └── scss.d.ts
└── index.ts           # Главный экспорт

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

Проект использует Vitest с @testing-library/react для тестирования компонентов.

# Запуск всех тестов
npm run test

# Запуск тестов с UI
npm run test:ui

🎨 Превью компонентов

Ladle предоставляет быстрый способ просмотра и тестирования компонентов:

npm run preview

Откройте http://localhost:61000 для просмотра stories.

🎯 SCSS Modules

Проект настроен для работы с SCSS modules. Создавайте файлы стилей с расширением .module.scss:

// Button.module.scss
.button {
  padding: 12px 24px;
  // ...
}

// Button.tsx
import styles from './Button.module.scss';

export const Button = () => <button className={styles.button}>Click me</button>;

📝 Качество кода

• ESLint: Проверка кода на ошибки и соответствие стандартам
• Prettier: Автоматическое форматирование кода
• TypeScript: Строгая типизация

# Проверка кода
npm run lint

# Автоисправление
npm run lint:fix

# Форматирование
npm run format

🔧 Конфигурация

• tsup.config.ts - настройки сборки
• vitest.config.ts - настройки тестов
• .ladle/config.mjs - настройки Ladle
• .eslintrc.js - настройки ESLint
• .prettierrc - настройки Prettier

🚀 Next.js Integration

For Next.js projects, see NEXTJS_INTEGRATION.md for detailed integration instructions with Next.js font optimization.

🎨 Button Usage Guide

For detailed button usage examples and best practices, see BUTTON_USAGE_GUIDE.md.

Quick Start for Next.js

npm install @grid-trade-x/ui

import { Button, Typography } from '@grid-trade-x/ui';
// Стили импортируются автоматически! 🎉

// Your Next.js component
export default function MyPage() {
  return (
    <div>
      <Typography variant="h1">Hello World</Typography>
      <Button variant="primary">Click me</Button>
    </div>
  );
}