wgp-next-shop-ui-lib/README.md

Библиотека UI-компонентов для Next-Shop с поддержкой e-commerce функций

# WGP Next-Shop UI Library

Комплексная библиотека UI-компонентов для создания e-commerce решений на Next.js с поддержкой Elasticsearch и 1C-Битрикс.

## 📦 Установка

```bash
npm install wgp-next-shop-ui-lib
```

## 🚀 Быстрый старт

```jsx
import { ProductCard, Slider, useCart } from 'wgp-next-shop-ui-lib';

function App() {
  const { addItem, items, totalPrice } = useCart();

  const product = {
    id: '1',
    name: 'Товар',
    price: 1000,
    image: '/product.jpg'
  };

  return (
    <div>
      <ProductCard 
        product={product} 
        onAddToCart={addItem}
      />
      <p>Товаров в корзине: {items.length}</p>
      <p>Общая стоимость: {totalPrice} ₽</p>
    </div>
  );
}
```

## 🔧 Локальная разработка

### Метод 1: npm link (рекомендуемый)

Для удобной разработки без постоянной публикации пакета:

```bash
# В папке ui-lib
npm link

# В основном проекте
npm link wgp-next-shop-ui-lib

# Теперь изменения в ui-lib применяются мгновенно!
npm run dev
```

### Отключение npm link

```bash
# В основном проекте
npm unlink wgp-next-shop-ui-lib
npm install wgp-next-shop-ui-lib@latest

# В папке ui-lib
npm unlink
```

### Метод 2: Прямой путь в package.json

Альтернативный способ - указать локальный путь:

```json
{
  "dependencies": {
    "wgp-next-shop-ui-lib": "file:./ui-lib"
  }
}
```

### Метод 3: Монорепо с workspace

```json
{
  "workspaces": [
    "ui-lib",
    "apps/*"
  ]
}
```

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

### Layout
- `Header` - Шапка сайта
- `Footer` - Подвал сайта  
- `Navbar` - Навигационное меню
- `Logo` - Логотип

### Catalog
- `ProductCard` - Карточка товара
- `ProductGrid` - Сетка товаров
- `CategoryList` - Список категорий
- `Filters` - Фильтры товаров

### Cart
- `Cart` - Корзина покупок
- `CartItem` - Элемент корзины
- `MiniCart` - Мини-корзина

### Media
- `Slider` - Универсальный слайдер
- `PayList` - Список способов оплаты
- `Gallery` - Галерея изображений

### Common
- `Button` - Кнопка с вариантами стилей
- `Modal` - Модальное окно
- `Form` - Компоненты форм

## 🎯 Hooks

- `useCart` - Управление корзиной
- `useSearch` - Поиск товаров
- `useFilters` - Фильтрация

## 🛠 Utils

- `constants` - Константы для e-commerce
- API клиенты и утилиты

## 📝 Разработка нового компонента

1. Создайте папку компонента:
```bash
mkdir -p src/components/Category/ComponentName
```

2. Создайте файл компонента:
```jsx
'use client';

const ComponentName = ({ 
  // пропсы
}) => {
  return (
    <div>
      {/* JSX */}
    </div>
  );
};

export default ComponentName;
```

3. Добавьте экспорт в `src/index.js`:
```jsx
export { default as ComponentName } from './components/Category/ComponentName/ComponentName.jsx';
```

4. Обновите версию в `package.json`

5. Опубликуйте (для продакшена):
```bash
npm publish
```

## 🔄 Workflow разработки

### Локальная разработка
1. `npm link` в ui-lib
2. `npm link wgp-next-shop-ui-lib` в основном проекте
3. Разрабатывайте компоненты с hot reload
4. Тестируйте на `/test-components`


# Уже выполнено:
cd ui-lib && npm link                    # Создана глобальная ссылка
cd .. && npm link wgp-next-shop-ui-lib   # Проект связан с локальной версией

# Теперь просто разрабатывайте:
# 1. Редактируйте файлы в ui-lib/src/
# 2. Изменения сразу видны в браузере
# 3. Тестируйте на http://localhost:3002/test-components

# Быстрое связывание/отвязывание
npm run link:ui      # Связать с локальной версией
npm run unlink:ui    # Вернуться к npm версии

# Разработка с автосвязыванием
npm run dev:link     # Связать и запустить dev
npm run dev:unlink   # Отвязать и запустить dev


### Публикация
1. Обновите версию в `package.json`
2. `npm publish`
3. `npm install wgp-next-shop-ui-lib@latest` в проектах

## 🎨 Примеры использования

### PayList компонент

```jsx
import { PayList } from 'wgp-next-shop-ui-lib'

function CheckoutPage() {
  const customMethods = [
    { id: 'card', name: 'Банковская карта', icon: '💳' }
  ];

  return (
    <PayList 
      title="Выберите способ оплаты"
      paymentMethods={customMethods}
      customStyles={{
        container: 'border-2 border-blue-100',
        title: 'text-blue-600'
      }}
      onMethodClick={(method) => {
        console.log('Выбран:', method.name);
      }}
    />
  );
}
```

### ProductCard компонент

```jsx
import { ProductCard } from 'wgp-next-shop-ui-lib'

function CatalogPage() {
  const product = {
    id: 1,
    name: 'Товар',
    price: 1999,
    images: ['/image.jpg']
  };

  return (
    <ProductCard 
      product={product}
      onAddToCart={(product) => {
        // добавить в корзину
      }}
    />
  );
}
```

## 📋 TODO

- [ ] Добавить больше компонентов Layout
- [ ] Создать систему тем
- [ ] Добавить TypeScript определения
- [ ] Создать Storybook для документации
- [ ] Добавить тесты компонентов

## 🤝 Участие в разработке

1. Форк проекта
2. Создание ветки для фичи
3. Локальная разработка с `npm link`
4. Тестирование на `/test-components`
5. Pull request

---

Версия: 0.2.7  
Автор: IvanPin  
Лицензия: ISC

## 📞 Поддержка

- GitHub Issues: [ссылка на репозиторий]
- Email: support@webgoodpeople.com