Knit UI Kit

UI библиотека компонентов для проектов Knit-toys, основанная на shadcn/ui.

Установка

# В проекте, где вы хотите использовать ui-kit:
npm install @knit/ui-kit

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

// Импорт стилей
import '@knit/ui-kit/styles.css'; 

// Импорт компонентов
import { Button } from '@knit/ui-kit';

// Использование в компоненте
function MyComponent() {
  return (
    <div>
      <Button variant="default">Нажми меня</Button>
    </div>
  )
}

Разработка

Добавление новых компонентов

UI-kit использует shadcn-ui для управления компонентами. Для добавления нового компонента:

# Перейти в директорию ui-kit
cd packages/shared/ui-kit

# Добавить компонент через CLI
npm run add:component

# Выбрать нужный компонент из списка, например: button, card, etc.

После добавления компонента через CLI, не забудьте добавить его экспорт в src/index.ts:

// src/index.ts
// ...существующие импорты

// Добавить экспорт нового компонента
export * from './components/your-new-component';

Сборка и публикация

Для сборки пакета:

# Через Makefile
make ui-kit-build

# Или напрямую
cd packages/shared/ui-kit && npm run build

Публикация в npm registry

Перед публикацией, убедитесь что:

1. Вы авторизованы в npm: npm login
2. Имя пакета (@knit/ui-kit) уникальное или принадлежит вашей организации
3. Версия пакета обновлена (в package.json)

Для публикации:

# Через Makefile
make ui-kit-publish

# Или напрямую
cd packages/shared/ui-kit && npm run publish:npm

Локальная публикация для тестирования

Для тестирования пакета без публикации в npm, можно использовать yalc:

# Через Makefile
make ui-kit-publish-local

# Затем в проекте, где хотите использовать пакет
cd your-frontend-app
yalc add @knit/ui-kit

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

На данный момент библиотека находится в стадии разработки. После добавления компонентов через CLI shadcn, они будут доступны для импорта.

Особенности

• Используется Vite для сборки библиотеки
• TypeScript для типизации
• Поддержка Tailwind CSS
• Основано на компонентах shadcn/ui
• Темная и светлая темы через CSS переменные