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

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

# Структура компонентов wgp-next-shop-ui-lib

## 📁 Организация компонентов

```
ui-lib/src/
├── index.js                      # Главный файл экспортов
├── components/
│   ├── Layout/                   # Компоненты макета
│   │   ├── Header/
│   │   │   ├── Header.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── Logo.jsx
│   │   │   ├── SearchBar.jsx
│   │   │   ├── CartButton.jsx
│   │   │   ├── AccountButton.jsx
│   │   │   └── MobileMenu.jsx
│   │   ├── Footer/
│   │   │   ├── Footer.jsx
│   │   │   ├── FooterLinks.jsx
│   │   │   ├── FooterSocial.jsx
│   │   │   └── FooterCopyright.jsx
│   │   └── Sidebar/
│   │       ├── Sidebar.jsx
│   │       └── SidebarMenu.jsx
│   │
│   ├── Catalog/                  # Компоненты каталога
│   │   ├── ProductCard/
│   │   │   ├── ProductCard.jsx
│   │   │   ├── ProductImage.jsx
│   │   │   ├── ProductInfo.jsx
│   │   │   ├── ProductPrice.jsx
│   │   │   └── ProductActions.jsx
│   │   ├── ProductGrid/
│   │   │   ├── ProductGrid.jsx
│   │   │   └── ProductGridSkeleton.jsx
│   │   ├── ProductDetail/
│   │   │   ├── ProductDetail.jsx
│   │   │   ├── ProductGallery.jsx
│   │   │   ├── ProductVariations.jsx
│   │   │   └── ProductTabs.jsx
│   │   ├── CategoryList/
│   │   │   ├── CategoryList.jsx
│   │   │   ├── CategoryCard.jsx
│   │   │   └── CategoryBreadcrumbs.jsx
│   │   └── Filters/
│   │       ├── FilterPanel.jsx
│   │       ├── PriceFilter.jsx
│   │       ├── CheckboxFilter.jsx
│   │       ├── RangeFilter.jsx
│   │       └── FilterMobile.jsx
│   │
│   ├── Cart/                     # Компоненты корзины
│   │   ├── Cart.jsx
│   │   ├── CartItem.jsx
│   │   ├── CartSummary.jsx
│   │   ├── CartDrawer.jsx
│   │   └── MiniCart.jsx
│   │
│   ├── Search/                   # Компоненты поиска
│   │   ├── SearchInput.jsx
│   │   ├── SearchResults.jsx
│   │   ├── SearchSuggestions.jsx
│   │   ├── SearchFilters.jsx
│   │   └── SearchModal.jsx
│   │
│   ├── Auth/                     # Компоненты авторизации
│   │   ├── LoginForm.jsx
│   │   ├── RegisterForm.jsx
│   │   ├── ForgotPassword.jsx
│   │   ├── UserProfile.jsx
│   │   └── SocialLogin.jsx
│   │
│   ├── Checkout/                 # Компоненты оформления заказа
│   │   ├── CheckoutForm.jsx
│   │   ├── ShippingForm.jsx
│   │   ├── PaymentForm.jsx
│   │   ├── OrderSummary.jsx
│   │   └── CheckoutSteps.jsx
│   │
│   ├── Common/                   # Общие UI компоненты
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   ├── IconButton.jsx
│   │   │   └── LoadingButton.jsx
│   │   ├── Modal/
│   │   │   ├── Modal.jsx
│   │   │   ├── ModalHeader.jsx
│   │   │   ├── ModalBody.jsx
│   │   │   └── ModalFooter.jsx
│   │   ├── Form/
│   │   │   ├── Input.jsx
│   │   │   ├── Select.jsx
│   │   │   ├── Checkbox.jsx
│   │   │   ├── Radio.jsx
│   │   │   └── TextArea.jsx
│   │   ├── Loading/
│   │   │   ├── Spinner.jsx
│   │   │   ├── Skeleton.jsx
│   │   │   └── ProgressBar.jsx
│   │   ├── Feedback/
│   │   │   ├── Alert.jsx
│   │   │   ├── Toast.jsx
│   │   │   └── Notification.jsx
│   │   └── Navigation/
│   │       ├── Breadcrumbs.jsx
│   │       ├── Pagination.jsx
│   │       ├── Tabs.jsx
│   │       └── Steps.jsx
│   │
│   └── Media/                    # Медиа компоненты
│       ├── Slider/
│       │   ├── Slider.jsx
│       │   ├── SliderDots.jsx
│       │   ├── SliderArrows.jsx
│       │   └── SliderThumbs.jsx
│       ├── Gallery/
│       │   ├── ImageGallery.jsx
│       │   ├── ImageViewer.jsx
│       │   └── ImageZoom.jsx
│       └── Banner/
│           ├── Banner.jsx
│           ├── HeroBanner.jsx
│           └── PromoBanner.jsx
│
├── hooks/                        # Переиспользуемые хуки
│   ├── useCart.js
│   ├── useSearch.js
│   ├── useFilters.js
│   ├── useAuth.js
│   ├── useLocalStorage.js
│   └── useDebounce.js
│
├── utils/                        # Утилиты
│   ├── api.js                    # API клиенты
│   ├── formatters.js             # Форматирование данных
│   ├── constants.js              # Константы
│   ├── helpers.js                # Вспомогательные функции
│   └── validators.js             # Валидация
│
├── styles/                       # Стили
│   ├── globals.css
│   ├── components/               # Стили компонентов
│   └── themes/                   # Темы
│       ├── default.css
│       └── dark.css
│
└── types/                        # TypeScript типы
    ├── index.ts
    ├── product.ts
    ├── cart.ts
    ├── user.ts
    └── api.ts
```

## 🎯 Принципы архитектуры

### 1. **Модульность**
- Каждый компонент в отдельной папке
- Четкое разделение ответственности
- Переиспользуемые подкомпоненты

### 2. **Кастомизация**
- Поддержка тем через CSS переменные
- Переопределение компонентов через пропсы
- Гибкая система стилей

### 3. **Типизация**
- TypeScript интерфейсы для всех компонентов
- Строгая типизация API
- Документация через типы

### 4. **Производительность**
- Ленивая загрузка больших компонентов
- Мемоизация где необходимо
- Оптимизированные рендеры

## 🚀 Экспорты

```javascript
// Layout
export { Header, Navbar, Logo, SearchBar } from './components/Layout/Header';
export { Footer, FooterLinks } from './components/Layout/Footer';

// Catalog  
export { ProductCard, ProductGrid, ProductDetail } from './components/Catalog';
export { CategoryList, Filters } from './components/Catalog';

// Cart
export { Cart, CartItem, CartDrawer, MiniCart } from './components/Cart';

// Search
export { SearchInput, SearchResults, SearchModal } from './components/Search';

// Common
export { Button, Modal, Input, Spinner } from './components/Common';

// Media
export { Slider, Gallery, Banner } from './components/Media';

// Hooks
export { useCart, useSearch, useAuth } from './hooks';

// Utils
export { api, formatters, constants } from './utils';
```