@zevcommerce/theme-starter 1.0.0

package/src/sections/Header.tsx

@@ -0,0 +1,307 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { useTheme, useCartStore, resolveMenuUrl, getStorePermalink, getProducts } from '@zevcommerce/storefront-api';
+import { useRouter, useParams } from 'next/navigation';
+
+export default function Header() {
+  const { theme, storeConfig, menus } = useTheme();
+  const { openCart, items } = useCartStore();
+  const router = useRouter();
+  const params = useParams();
+
+  const header = theme?.settings?.header;
+  const logoSrc = header?.logo || storeConfig?.storeLogo;
+  const logoHeight = header?.logoHeight || 36;
+  const sticky = header?.sticky !== false;
+  const showSearch = header?.showSearch !== false;
+  const menuHandle = header?.menuHandle || 'main-menu';
+
+  const domain = (params?.domain as string) || storeConfig?.handle || '';
+  const storeName = storeConfig?.name || 'Store';
+
+  // Resolve menu
+  const availableMenus = Object.values(menus || {});
+  const defaultMenu = availableMenus.find((m: any) => m.isDefault);
+  const activeMenu = (menuHandle && menus?.[menuHandle]) || defaultMenu || availableMenus[0];
+  const menuItems = (activeMenu as any)?.items || [];
+
+  // UI state
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const cartCount = items.reduce((sum, item) => sum + item.quantity, 0);
+
+  // Lock body scroll
+  useEffect(() => {
+    document.body.style.overflow = (mobileOpen || searchOpen) ? 'hidden' : '';
+    return () => { document.body.style.overflow = ''; };
+  }, [mobileOpen, searchOpen]);
+
+  // Focus search input
+  useEffect(() => {
+    if (searchOpen) searchRef.current?.focus();
+  }, [searchOpen]);
+
+  // Escape key handler
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setSearchOpen(false);
+        setMobileOpen(false);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  // Search suggestions
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      if (searchQuery.length > 2) {
+        try {
+          const { data } = await getProducts(domain, 1, 5, searchQuery);
+          setSuggestions(data);
+        } catch {
+          setSuggestions([]);
+        }
+      } else {
+        setSuggestions([]);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery, domain]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!searchQuery.trim()) return;
+    router.push(getStorePermalink(domain, `/search?q=${encodeURIComponent(searchQuery)}`));
+    setSearchOpen(false);
+    setSearchQuery('');
+    setSuggestions([]);
+  };
+
+  return (
+    <>
+      <header
+        style={{
+          backgroundColor: 'var(--color-background)',
+          borderBottom: '1px solid #e5e7eb',
+          position: sticky ? 'sticky' : 'relative',
+          top: 0,
+          zIndex: 50,
+        }}
+      >
+        <div className="container mx-auto px-4 sm:px-6">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo */}
+            <Link href={getStorePermalink(domain, '/')} className="flex-shrink-0">
+              {logoSrc ? (
+                <img
+                  src={logoSrc}
+                  alt={storeName}
+                  style={{ height: `${logoHeight}px`, width: 'auto', objectFit: 'contain' }}
+                />
+              ) : (
+                <span
+                  className="text-xl font-bold"
+                  style={{ color: 'var(--color-text)' }}
+                >
+                  {storeName}
+                </span>
+              )}
+            </Link>
+
+            {/* Desktop Nav */}
+            <nav className="hidden md:flex items-center gap-6">
+              {menuItems.map((item: any) => (
+                <Link
+                  key={item.id}
+                  href={resolveMenuUrl(item, domain)}
+                  className="text-sm font-medium transition-colors hover:opacity-70"
+                  style={{ color: 'var(--color-text)' }}
+                >
+                  {item.title}
+                </Link>
+              ))}
+            </nav>
+
+            {/* Icons */}
+            <div className="flex items-center gap-3">
+              {/* Search */}
+              {showSearch && (
+                <button
+                  onClick={() => setSearchOpen(true)}
+                  aria-label="Search"
+                  className="p-2 transition-opacity hover:opacity-70"
+                  style={{ color: 'var(--color-text)' }}
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                  </svg>
+                </button>
+              )}
+
+              {/* Cart */}
+              <button
+                onClick={openCart}
+                aria-label="Cart"
+                className="relative p-2 transition-opacity hover:opacity-70"
+                style={{ color: 'var(--color-text)' }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
+                  <line x1="3" y1="6" x2="21" y2="6" />
+                  <path d="M16 10a4 4 0 01-8 0" />
+                </svg>
+                {cartCount > 0 && (
+                  <span
+                    className="absolute -top-0.5 -right-0.5 text-[10px] font-bold min-w-[18px] h-[18px] flex items-center justify-center rounded-full px-1"
+                    style={{ backgroundColor: 'var(--color-primary)', color: '#fff' }}
+                  >
+                    {cartCount}
+                  </span>
+                )}
+              </button>
+
+              {/* Mobile hamburger */}
+              <button
+                onClick={() => setMobileOpen(true)}
+                aria-label="Open menu"
+                className="md:hidden p-2 transition-opacity hover:opacity-70"
+                style={{ color: 'var(--color-text)' }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="3" y1="6" x2="21" y2="6" />
+                  <line x1="3" y1="12" x2="21" y2="12" />
+                  <line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Search Overlay */}
+      {searchOpen && (
+        <div
+          className="fixed inset-0 z-[200] flex items-start justify-center pt-24"
+          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+          onClick={(e) => { if (e.target === e.currentTarget) { setSearchOpen(false); setSuggestions([]); } }}
+        >
+          <div className="w-full max-w-lg mx-4 rounded-lg overflow-hidden" style={{ backgroundColor: 'var(--color-background)' }}>
+            <form onSubmit={handleSearch} className="flex items-center px-4 py-3 border-b" style={{ borderColor: '#e5e7eb' }}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="mr-3 flex-shrink-0" style={{ color: 'var(--color-text)', opacity: 0.4 }}>
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              <input
+                ref={searchRef}
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search products..."
+                className="flex-1 text-sm outline-none bg-transparent"
+                style={{ color: 'var(--color-text)' }}
+              />
+              <button
+                type="button"
+                onClick={() => { setSearchOpen(false); setSuggestions([]); setSearchQuery(''); }}
+                className="p-1 ml-2"
+                style={{ color: 'var(--color-text)', opacity: 0.4 }}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </form>
+            {suggestions.length > 0 && (
+              <div className="max-h-80 overflow-y-auto">
+                {suggestions.map((product) => (
+                  <Link
+                    key={product.id}
+                    href={getStorePermalink(domain, `/products/${product.slug}`)}
+                    onClick={() => { setSearchOpen(false); setSuggestions([]); setSearchQuery(''); }}
+                    className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-gray-50"
+                  >
+                    {product.media?.[0]?.url && (
+                      <img src={product.media[0].url} alt={product.title} className="w-10 h-10 object-cover rounded" />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate" style={{ color: 'var(--color-text)' }}>{product.title}</p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Mobile Menu */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-[200] md:hidden">
+          <div
+            className="absolute inset-0"
+            style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+            onClick={() => setMobileOpen(false)}
+          />
+          <div
+            className="absolute left-0 top-0 bottom-0 w-[80%] max-w-[320px] flex flex-col"
+            style={{ backgroundColor: 'var(--color-background)' }}
+          >
+            {/* Mobile header */}
+            <div className="flex items-center justify-between px-4 py-4 border-b" style={{ borderColor: '#e5e7eb' }}>
+              <Link href={getStorePermalink(domain, '/')} onClick={() => setMobileOpen(false)}>
+                {logoSrc ? (
+                  <img src={logoSrc} alt={storeName} style={{ height: '28px', width: 'auto' }} />
+                ) : (
+                  <span className="text-lg font-bold" style={{ color: 'var(--color-text)' }}>{storeName}</span>
+                )}
+              </Link>
+              <button
+                onClick={() => setMobileOpen(false)}
+                aria-label="Close menu"
+                className="p-1"
+                style={{ color: 'var(--color-text)' }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Links */}
+            <nav className="flex-1 overflow-y-auto px-4 py-4">
+              {menuItems.map((item: any) => (
+                <Link
+                  key={item.id}
+                  href={resolveMenuUrl(item, domain)}
+                  onClick={() => setMobileOpen(false)}
+                  className="block py-3 text-sm font-medium border-b transition-opacity hover:opacity-70"
+                  style={{ color: 'var(--color-text)', borderColor: '#f3f4f6' }}
+                >
+                  {item.title}
+                </Link>
+              ))}
+            </nav>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export const schema = {
+  type: 'header',
+  name: 'Header',
+  limit: 1,
+  settings: [],
+};

package/src/sections/Hero.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import Link from 'next/link';
+import { useTheme, getStorePermalink } from '@zevcommerce/storefront-api';
+import { useParams } from 'next/navigation';
+
+export default function Hero() {
+  const { theme, storeConfig } = useTheme();
+  const params = useParams();
+  const domain = (params?.domain as string) || storeConfig?.handle || '';
+
+  const hero = theme?.settings?.hero;
+  if (!hero?.enabled) return null;
+
+  const heading = hero.heading || 'Welcome to our store';
+  const subheading = hero.subheading || '';
+  const buttonText = hero.buttonText || 'Shop Now';
+  const buttonLink = hero.buttonLink || '/collections/all';
+  const overlayOpacity = (hero.overlayOpacity ?? 50) / 100;
+  const overlayColor = hero.overlayColor || '#000000';
+  const textColor = hero.textColor || '#ffffff';
+
+  const resolveImage = (img: any) => {
+    if (!img) return undefined;
+    if (typeof img === 'string') return img;
+    if (typeof img === 'object' && img.url) return img.url;
+    return undefined;
+  };
+
+  const bgImage = resolveImage(hero.backgroundImage);
+
+  return (
+    <section
+      className="relative flex items-center justify-center min-h-[60vh] md:min-h-[75vh]"
+      style={{
+        backgroundImage: bgImage ? `url("${bgImage}")` : undefined,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundColor: !bgImage ? '#1f2937' : undefined,
+      }}
+    >
+      {/* Overlay */}
+      <div
+        className="absolute inset-0"
+        style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 container mx-auto px-4 sm:px-6 py-16 text-center">
+        <h1
+          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight"
+          style={{ color: textColor }}
+        >
+          {heading}
+        </h1>
+        {subheading && (
+          <p
+            className="text-base sm:text-lg md:text-xl max-w-2xl mx-auto mb-8 opacity-90"
+            style={{ color: textColor }}
+          >
+            {subheading}
+          </p>
+        )}
+        {buttonText && (
+          <Link
+            href={getStorePermalink(domain, buttonLink)}
+            className="btn-primary inline-flex items-center px-6 py-3 sm:px-8 sm:py-3.5 text-sm sm:text-base font-semibold rounded-lg transition-opacity hover:opacity-90"
+            style={{ backgroundColor: 'var(--color-primary)', color: '#ffffff' }}
+          >
+            {buttonText}
+          </Link>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export const schema = {
+  type: 'hero',
+  name: 'Hero Banner',
+  limit: 1,
+  settings: [],
+};

package/src/sections/ProductDetail.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useTheme, useProduct, useCartStore, getStorePermalink } from '@zevcommerce/storefront-api';
+import { useParams } from 'next/navigation';
+import { formatPrice } from '../helpers/format-price';
+
+export default function ProductDetail() {
+  const { theme, storeConfig } = useTheme();
+  const { product, selectedVariant, quantity, setQuantity, setSelectedVariant } = useProduct();
+  const { addItem, openCart } = useCartStore();
+  const params = useParams();
+  const domain = (params?.domain as string) || storeConfig?.handle || '';
+  const currency = storeConfig?.currency || 'NGN';
+
+  const [activeImageIndex, setActiveImageIndex] = useState(0);
+  const [addedToCart, setAddedToCart] = useState(false);
+
+  // Reset state when product changes
+  useEffect(() => {
+    setActiveImageIndex(0);
+    setAddedToCart(false);
+  }, [product?.id]);
+
+  if (!product) {
+    return (
+      <div className="py-24 text-center" style={{ backgroundColor: 'var(--color-background)' }}>
+        <p className="text-sm" style={{ color: 'var(--color-text)', opacity: 0.5 }}>
+          Product not found
+        </p>
+      </div>
+    );
+  }
+
+  const images = product.media || [];
+  const variants = product.variants || [];
+  const hasVariants = variants.length > 1;
+
+  const currentVariant = selectedVariant || variants[0];
+  const price = parseFloat(currentVariant?.price || product.price || '0');
+  const compareAtPrice = parseFloat(currentVariant?.compareAtPrice || product.compareAtPrice || '0');
+  const isOnSale = compareAtPrice > 0 && compareAtPrice > price;
+
+  // Group variant options
+  const optionGroups: Record<string, string[]> = {};
+  variants.forEach((v: any) => {
+    (v.options || []).forEach((opt: any) => {
+      if (!optionGroups[opt.name]) optionGroups[opt.name] = [];
+      if (!optionGroups[opt.name].includes(opt.value)) {
+        optionGroups[opt.name].push(opt.value);
+      }
+    });
+  });
+
+  const handleAddToCart = () => {
+    if (!currentVariant) return;
+    addItem({
+      variantId: currentVariant.id,
+      productId: product.id,
+      title: product.title,
+      variantTitle: currentVariant.title || '',
+      price: currentVariant.price,
+      quantity,
+      image: images[0]?.url || '',
+      slug: product.slug,
+    });
+    setAddedToCart(true);
+    openCart();
+    setTimeout(() => setAddedToCart(false), 2000);
+  };
+
+  return (
+    <section className="py-8 md:py-16" style={{ backgroundColor: 'var(--color-background)' }}>
+      <div className="container mx-auto px-4 sm:px-6 max-w-6xl">
+        {/* Breadcrumb */}
+        <nav className="flex items-center gap-2 text-xs mb-8" style={{ color: 'var(--color-text)', opacity: 0.5 }}>
+          <Link href={getStorePermalink(domain, '/')} className="hover:opacity-70 transition-opacity">Home</Link>
+          <span>/</span>
+          <Link href={getStorePermalink(domain, '/collections/all')} className="hover:opacity-70 transition-opacity">Products</Link>
+          <span>/</span>
+          <span style={{ opacity: 1, color: 'var(--color-text)' }}>{product.title}</span>
+        </nav>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+          {/* Image Gallery */}
+          <div>
+            {/* Main Image */}
+            {images.length > 0 && (
+              <div className="relative aspect-square mb-3 rounded-lg overflow-hidden" style={{ backgroundColor: '#f3f4f6' }}>
+                <img
+                  src={images[activeImageIndex]?.url}
+                  alt={product.title}
+                  className="w-full h-full object-cover"
+                />
+                {isOnSale && (
+                  <span
+                    className="absolute top-3 left-3 text-xs font-semibold px-2.5 py-1 rounded"
+                    style={{ backgroundColor: '#ef4444', color: '#fff' }}
+                  >
+                    Sale
+                  </span>
+                )}
+              </div>
+            )}
+
+            {/* Thumbnails */}
+            {images.length > 1 && (
+              <div className="flex gap-2 overflow-x-auto">
+                {images.map((img: any, i: number) => (
+                  <button
+                    key={i}
+                    onClick={() => setActiveImageIndex(i)}
+                    className="flex-shrink-0 w-16 h-16 rounded overflow-hidden border-2 transition-colors"
+                    style={{
+                      borderColor: i === activeImageIndex ? 'var(--color-primary)' : 'transparent',
+                    }}
+                  >
+                    <img src={img.url} alt="" className="w-full h-full object-cover" />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Product Info */}
+          <div className="lg:sticky lg:top-24 lg:self-start">
+            {/* Vendor */}
+            {product.vendor && (
+              <p className="text-xs font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--color-primary)' }}>
+                {product.vendor}
+              </p>
+            )}
+
+            {/* Title */}
+            <h1
+              className="text-2xl md:text-3xl font-bold mb-3"
+              style={{ color: 'var(--color-text)' }}
+            >
+              {product.title}
+            </h1>
+
+            {/* Price */}
+            <div className="flex items-center gap-3 mb-6">
+              <span className="text-xl font-bold" style={{ color: 'var(--color-text)' }}>
+                {formatPrice(price, currency)}
+              </span>
+              {isOnSale && (
+                <span className="text-base line-through" style={{ color: 'var(--color-text)', opacity: 0.4 }}>
+                  {formatPrice(compareAtPrice, currency)}
+                </span>
+              )}
+            </div>
+
+            {/* Variant Selectors */}
+            {hasVariants && Object.entries(optionGroups).map(([optionName, values]) => {
+              const currentValue = currentVariant?.options?.find((o: any) => o.name === optionName)?.value;
+              return (
+                <div key={optionName} className="mb-5">
+                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--color-text)' }}>
+                    {optionName}: <span className="font-normal">{currentValue}</span>
+                  </label>
+                  <div className="flex flex-wrap gap-2">
+                    {values.map((val) => {
+                      const isSelected = currentValue === val;
+                      return (
+                        <button
+                          key={val}
+                          onClick={() => {
+                            const match = variants.find((v: any) =>
+                              v.options?.some((o: any) => o.name === optionName && o.value === val)
+                            );
+                            if (match) setSelectedVariant(match);
+                          }}
+                          className="px-4 py-2 text-sm border rounded transition-colors"
+                          style={{
+                            backgroundColor: isSelected ? 'var(--color-primary)' : 'transparent',
+                            color: isSelected ? '#fff' : 'var(--color-text)',
+                            borderColor: isSelected ? 'var(--color-primary)' : '#d1d5db',
+                          }}
+                        >
+                          {val}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+
+            {/* Quantity */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--color-text)' }}>
+                Quantity
+              </label>
+              <div className="inline-flex items-center border rounded" style={{ borderColor: '#d1d5db' }}>
+                <button
+                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                  className="px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                  style={{ color: 'var(--color-text)' }}
+                >
+                  -
+                </button>
+                <span className="px-4 py-2 text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+                  {quantity}
+                </span>
+                <button
+                  onClick={() => setQuantity(quantity + 1)}
+                  className="px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                  style={{ color: 'var(--color-text)' }}
+                >
+                  +
+                </button>
+              </div>
+            </div>
+
+            {/* Add to Cart */}
+            <button
+              onClick={handleAddToCart}
+              className="w-full py-3.5 text-sm font-semibold rounded-lg transition-opacity hover:opacity-90"
+              style={{ backgroundColor: 'var(--color-primary)', color: '#fff' }}
+            >
+              {addedToCart ? 'Added!' : 'Add to Cart'}
+            </button>
+
+            {/* Description */}
+            {product.description && (
+              <div className="mt-8 pt-8 border-t" style={{ borderColor: '#e5e7eb' }}>
+                <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--color-text)' }}>
+                  Description
+                </h3>
+                <div
+                  className="text-sm leading-relaxed prose prose-sm max-w-none"
+                  style={{ color: 'var(--color-text)', opacity: 0.7 }}
+                  dangerouslySetInnerHTML={{ __html: product.description }}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export const schema = {
+  type: 'product-detail',
+  name: 'Product Detail',
+  settings: [],
+  disabled_on: { templates: ['*'] },
+  enabled_on: { templates: ['product_detail'] },
+};