WGP Next-Shop UI Library

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

📦 Установка

npm install wgp-next-shop-ui-lib

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

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 (рекомендуемый)

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

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

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

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

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

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

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

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

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

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

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

{
  "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. Создайте папку компонента:

mkdir -p src/components/Category/ComponentName

2. Создайте файл компонента:

'use client';

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

export default ComponentName;

3. Добавьте экспорт в src/index.js:

export { default as ComponentName } from './components/Category/ComponentName/ComponentName.jsx';

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

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

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 компонент

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 компонент

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: [email protected]