hey-pharmacist-ecommerce 1.0.0

package/src/components/ProductCard.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ShoppingCart, Heart } from 'lucide-react';
+import { Product } from '@/lib/types';
+import { formatPrice } from '@/lib/utils/format';
+import { useCart } from '@/providers/CartProvider';
+import Image from 'next/image';
+
+interface ProductCardProps {
+  product: Product;
+  onClickProduct?: (product: Product) => void;
+}
+
+export function ProductCard({ product, onClickProduct }: ProductCardProps) {
+  const { addToCart } = useCart();
+  const [isAdding, setIsAdding] = useState(false);
+  const [isFavorited, setIsFavorited] = useState(false);
+
+  const handleAddToCart = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsAdding(true);
+    try {
+      await addToCart(product.id);
+    } finally {
+      setIsAdding(false);
+    }
+  };
+
+  const handleFavorite = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsFavorited(!isFavorited);
+  };
+
+  const discount = product.compareAtPrice 
+    ? Math.round(((product.compareAtPrice - product.price) / product.compareAtPrice) * 100)
+    : 0;
+
+  return (
+    <motion.div
+      whileHover={{ y: -8 }}
+      className="group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 cursor-pointer"
+      onClick={() => onClickProduct?.(product)}
+    >
+      {/* Image Container */}
+      <div className="relative aspect-square overflow-hidden bg-gray-100">
+        <Image
+          src={product.images[0] || '/placeholder-product.jpg'}
+          alt={product.name}
+          fill
+          className="object-cover group-hover:scale-110 transition-transform duration-500"
+        />
+        
+        {/* Badges */}
+        <div className="absolute top-4 left-4 flex flex-col gap-2">
+          {discount > 0 && (
+            <span className="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
+              -{discount}%
+            </span>
+          )}
+          {!product.inStock && (
+            <span className="bg-gray-900 text-white px-3 py-1 rounded-full text-sm font-bold">
+              Out of Stock
+            </span>
+          )}
+        </div>
+
+        {/* Favorite Button */}
+        <button
+          onClick={handleFavorite}
+          className="absolute top-4 right-4 p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-110"
+        >
+          <Heart
+            className={`w-5 h-5 ${isFavorited ? 'fill-red-500 text-red-500' : 'text-gray-700'}`}
+          />
+        </button>
+
+        {/* Quick Add Button - Shows on hover */}
+        {product.inStock && (
+          <motion.button
+            onClick={handleAddToCart}
+            disabled={isAdding}
+            className="absolute bottom-4 left-4 right-4 bg-primary-600 text-white py-3 rounded-xl font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-primary-700 flex items-center justify-center gap-2 shadow-lg"
+            whileTap={{ scale: 0.95 }}
+          >
+            <ShoppingCart className="w-5 h-5" />
+            {isAdding ? 'Adding...' : 'Quick Add'}
+          </motion.button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-4">
+        {/* Category */}
+        {product.category && (
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">
+            {product.category}
+          </p>
+        )}
+
+        {/* Product Name */}
+        <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">
+          {product.name}
+        </h3>
+
+        {/* Price */}
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-gray-900">
+            {formatPrice(product.price)}
+          </span>
+          {product.compareAtPrice && (
+            <span className="text-sm text-gray-500 line-through">
+              {formatPrice(product.compareAtPrice)}
+            </span>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+

package/src/components/ui/Badge.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'gray';
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export function Badge({ children, variant = 'primary', size = 'md', className = '' }: BadgeProps) {
+  const variants = {
+    primary: 'bg-primary-100 text-primary-700 border-primary-200',
+    secondary: 'bg-secondary-100 text-secondary-700 border-secondary-200',
+    success: 'bg-green-100 text-green-700 border-green-200',
+    warning: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    danger: 'bg-red-100 text-red-700 border-red-200',
+    gray: 'bg-gray-100 text-gray-700 border-gray-200',
+  };
+  
+  const sizes = {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-3 py-1 text-sm',
+  };
+
+  return (
+    <span className={`inline-flex items-center font-medium rounded-full border ${variants[variant]} ${sizes[size]} ${className}`}>
+      {children}
+    </span>
+  );
+}
+

package/src/components/ui/Button.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  disabled,
+  className = '',
+  children,
+  ...props
+}: ButtonProps) {
+  const baseStyles = 'font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed';
+  
+  const variants = {
+    primary: 'bg-primary-600 text-white hover:bg-primary-700 shadow-lg shadow-primary-500/30 hover:shadow-xl hover:shadow-primary-500/40',
+    secondary: 'bg-secondary-600 text-white hover:bg-secondary-700 shadow-lg shadow-secondary-500/30 hover:shadow-xl hover:shadow-secondary-500/40',
+    outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50',
+    ghost: 'text-gray-700 hover:bg-gray-100',
+  };
+  
+  const sizes = {
+    sm: 'px-4 py-2 text-sm',
+    md: 'px-6 py-3 text-base',
+    lg: 'px-8 py-4 text-lg',
+  };
+
+  return (
+    <motion.div
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      className="inline-block"
+    >
+      <button
+        className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        {isLoading ? (
+          <>
+            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Loading...
+          </>
+        ) : (
+          children
+        )}
+      </button>
+    </motion.div>
+  );
+}
+

package/src/components/ui/Input.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, helperText, className = '', ...props }, ref) => {
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`
+            w-full px-4 py-3 rounded-lg border-2 transition-all duration-200
+            ${error 
+              ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' 
+              : 'border-gray-200 focus:border-primary-500 focus:ring-primary-500/20'
+            }
+            focus:outline-none focus:ring-4
+            placeholder:text-gray-400
+            disabled:bg-gray-50 disabled:cursor-not-allowed
+            ${className}
+          `}
+          {...props}
+        />
+        {error && (
+          <p className="mt-2 text-sm text-red-600">{error}</p>
+        )}
+        {helperText && !error && (
+          <p className="mt-2 text-sm text-gray-500">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+

package/src/components/ui/Modal.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  const sizes = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+          />
+          
+          {/* Modal */}
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              className={`bg-white rounded-2xl shadow-2xl w-full ${sizes[size]} max-h-[90vh] overflow-hidden flex flex-col`}
+            >
+              {/* Header */}
+              {title && (
+                <div className="flex items-center justify-between p-6 border-b border-gray-200">
+                  <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
+                  <button
+                    onClick={onClose}
+                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
+                </div>
+              )}
+              
+              {/* Content */}
+              <div className="flex-1 overflow-y-auto p-6">
+                {children}
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+

package/src/components/ui/Skeleton.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className = '' }: SkeletonProps) {
+  return (
+    <div className={`animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] rounded ${className}`} />
+  );
+}
+
+export function ProductCardSkeleton() {
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden shadow-sm">
+      <Skeleton className="h-64 w-full" />
+      <div className="p-4 space-y-3">
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+        <div className="flex justify-between items-center pt-2">
+          <Skeleton className="h-8 w-24" />
+          <Skeleton className="h-10 w-10 rounded-full" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OrderCardSkeleton() {
+  return (
+    <div className="bg-white rounded-2xl p-6 shadow-sm">
+      <div className="flex justify-between items-start mb-4">
+        <div className="space-y-2 flex-1">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      <div className="space-y-3">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+    </div>
+  );
+}
+

package/src/hooks/useOrders.ts

@@ -0,0 +1,98 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Order } from '@/lib/types';
+import { ordersApi } from '@/lib/api/orders';
+
+export function useOrders(page: number = 1, limit: number = 10) {
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    limit: 10,
+    total: 0,
+    totalPages: 0,
+  });
+
+  const fetchOrders = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await ordersApi.getOrders(page, limit);
+      setOrders(response.data);
+      setPagination(response.pagination);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [page, limit]);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  return {
+    orders,
+    isLoading,
+    error,
+    pagination,
+    refetch: fetchOrders,
+  };
+}
+
+export function useOrder(id: string) {
+  const [order, setOrder] = useState<Order | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchOrder = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await ordersApi.getOrder(id);
+      if (response.success) {
+        setOrder(response.data);
+      }
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (id) {
+      fetchOrder();
+    }
+  }, [id, fetchOrder]);
+
+  return { order, isLoading, error, refetch: fetchOrder };
+}
+
+export function useCurrentOrders() {
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchCurrentOrders = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await ordersApi.getCurrentOrders();
+      if (response.success) {
+        setOrders(response.data);
+      }
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCurrentOrders();
+  }, [fetchCurrentOrders]);
+
+  return { orders, isLoading, error, refetch: fetchCurrentOrders };
+}
+

package/src/hooks/useProducts.ts

@@ -0,0 +1,125 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Product, ProductFilters, Category } from '@/lib/types';
+import { productsApi } from '@/lib/api/products';
+
+export function useProducts(filters?: ProductFilters, page: number = 1, limit: number = 20) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    limit: 20,
+    total: 0,
+    totalPages: 0,
+  });
+
+  const fetchProducts = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await productsApi.getProducts(filters, page, limit);
+      setProducts(response.data);
+      setPagination(response.pagination);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [filters, page, limit]);
+
+  useEffect(() => {
+    fetchProducts();
+  }, [fetchProducts]);
+
+  return {
+    products,
+    isLoading,
+    error,
+    pagination,
+    refetch: fetchProducts,
+  };
+}
+
+export function useProduct(id: string) {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await productsApi.getProduct(id);
+        if (response.success) {
+          setProduct(response.data);
+        }
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (id) {
+      fetchProduct();
+    }
+  }, [id]);
+
+  return { product, isLoading, error };
+}
+
+export function useFeaturedProducts(limit: number = 8) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchFeaturedProducts = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await productsApi.getFeaturedProducts(limit);
+        if (response.success) {
+          setProducts(response.data);
+        }
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchFeaturedProducts();
+  }, [limit]);
+
+  return { products, isLoading, error };
+}
+
+export function useCategories() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await productsApi.getCategories();
+        if (response.success) {
+          setCategories(response.data);
+        }
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchCategories();
+  }, []);
+
+  return { categories, isLoading, error };
+}
+

package/src/index.ts

@@ -0,0 +1,71 @@
+// Main Provider
+export { EcommerceProvider } from './providers/EcommerceProvider';
+
+// Individual Providers
+export { ThemeProvider, useTheme } from './providers/ThemeProvider';
+export { AuthProvider, useAuth } from './providers/AuthProvider';
+export { CartProvider, useCart } from './providers/CartProvider';
+
+// Screens
+export { ShopScreen } from './screens/ShopScreen';
+export { ProductDetailScreen } from './screens/ProductDetailScreen';
+export { CartScreen } from './screens/CartScreen';
+export { CheckoutScreen } from './screens/CheckoutScreen';
+export { LoginScreen } from './screens/LoginScreen';
+export { RegisterScreen } from './screens/RegisterScreen';
+export { ProfileScreen } from './screens/ProfileScreen';
+export { OrdersScreen } from './screens/OrdersScreen';
+export { CurrentOrdersScreen } from './screens/CurrentOrdersScreen';
+
+// Components
+export { Header } from './components/Header';
+export { Footer } from './components/Footer';
+export { ProductCard } from './components/ProductCard';
+export { CartItem } from './components/CartItem';
+export { OrderCard } from './components/OrderCard';
+export { EmptyState } from './components/EmptyState';
+
+// UI Components
+export { Button } from './components/ui/Button';
+export { Input } from './components/ui/Input';
+export { Badge } from './components/ui/Badge';
+export { Modal } from './components/ui/Modal';
+export { Skeleton, ProductCardSkeleton, OrderCardSkeleton } from './components/ui/Skeleton';
+
+// Hooks
+export { useProducts, useProduct, useFeaturedProducts, useCategories } from './hooks/useProducts';
+export { useOrders, useOrder, useCurrentOrders } from './hooks/useOrders';
+
+// API
+export { productsApi } from './lib/api/products';
+export { authApi } from './lib/api/auth';
+export { cartApi } from './lib/api/cart';
+export { ordersApi } from './lib/api/orders';
+
+// API Adapter (for advanced usage)
+export { initializeApiAdapter, getApiConfiguration } from './lib/api-adapter';
+
+// Types
+export type {
+  EcommerceConfig,
+  Product,
+  ProductFilters,
+  Category,
+  CartItem as CartItemType,
+  Cart,
+  Order,
+  OrderItem,
+  OrderStatus,
+  Address,
+  User,
+  AuthTokens,
+  LoginCredentials,
+  RegisterData,
+  ApiResponse,
+  PaginatedResponse,
+} from './lib/types';
+
+// Utils
+export { formatPrice, formatDate, truncate, getInitials } from './lib/utils/format';
+export { generateColorShades, hexToRgb } from './lib/utils/colors';
+