@zevcommerce/theme-starter 1.0.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@zevcommerce/theme-starter",
+  "version": "1.0.0",
+  "description": "A simple, mobile-first theme for ZevCommerce",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js" },
+    "./preset.json": "./src/preset.json"
+  },
+  "zevcommerce": { "type": "theme", "handle": "starter", "engineVersion": ">=1.0.0" },
+  "scripts": { "build": "tsup", "dev": "tsup --watch", "typecheck": "tsc --noEmit" },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "@zevcommerce/theme-sdk": "^1.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

package/src/components/ThemeStyles.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useTheme } from '@zevcommerce/storefront-api';
+
+/**
+ * Injects global CSS variables and base utility classes
+ * derived from the theme's brand settings.
+ */
+export default function ThemeStyles() {
+  const { theme } = useTheme();
+  const brand = theme?.settings?.brand;
+
+  const primary    = brand?.primary    || '#2563EB';
+  const background = brand?.background || '#ffffff';
+  const text       = brand?.text       || '#374151';
+  const accent     = brand?.accent     || '#F59E0B';
+  const fontBody   = brand?.font       || 'Inter';
+
+  return (
+    <style>{`
+      :root {
+        --color-primary: ${primary};
+        --color-background: ${background};
+        --color-text: ${text};
+        --color-accent: ${accent};
+        --font-body: '${fontBody}', sans-serif;
+      }
+
+      body {
+        background-color: var(--color-background);
+        color: var(--color-text);
+        font-family: var(--font-body);
+        margin: 0;
+      }
+
+      .container {
+        width: 100%;
+        max-width: 1280px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+
+      @media (min-width: 640px) {
+        .container {
+          padding-left: 1.5rem;
+          padding-right: 1.5rem;
+        }
+      }
+
+      .btn-primary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem 1.5rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #ffffff;
+        background-color: var(--color-primary);
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        text-decoration: none;
+      }
+      .btn-primary:hover {
+        opacity: 0.9;
+      }
+
+      .btn-secondary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem 1.5rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--color-text);
+        background-color: transparent;
+        border: 1px solid var(--color-text);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background-color 0.2s ease, color 0.2s ease;
+        text-decoration: none;
+      }
+      .btn-secondary:hover {
+        background-color: var(--color-text);
+        color: var(--color-background);
+      }
+    `}</style>
+  );
+}

package/src/helpers/format-price.ts

@@ -0,0 +1,50 @@
+/**
+ * Currency-to-locale mapping for Intl.NumberFormat.
+ */
+const CURRENCY_LOCALES: Record<string, string> = {
+  USD: 'en-US',
+  EUR: 'de-DE',
+  GBP: 'en-GB',
+  NGN: 'en-NG',
+  GHS: 'en-GH',
+  KES: 'en-KE',
+  ZAR: 'en-ZA',
+  CAD: 'en-CA',
+  AUD: 'en-AU',
+  JPY: 'ja-JP',
+  INR: 'en-IN',
+  BRL: 'pt-BR',
+  MXN: 'es-MX',
+  AED: 'ar-AE',
+  SAR: 'ar-SA',
+  XOF: 'fr-SN',
+  XAF: 'fr-CM',
+  TZS: 'en-TZ',
+  UGX: 'en-UG',
+  RWF: 'en-RW',
+};
+
+/**
+ * Formats a numeric price into a localised currency string.
+ *
+ * @param amount  The price as a number or numeric string.
+ * @param currency  ISO 4217 currency code (e.g. "NGN").
+ * @returns  Formatted string, e.g. "NGN 1,500.00".
+ */
+export function formatPrice(amount: number | string, currency = 'NGN'): string {
+  const value = typeof amount === 'string' ? parseFloat(amount) : amount;
+  if (isNaN(value)) return `${currency} 0.00`;
+
+  const locale = CURRENCY_LOCALES[currency] || 'en-US';
+
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  } catch {
+    return `${currency} ${value.toFixed(2)}`;
+  }
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+import { defineTheme } from '@zevcommerce/theme-sdk';
+import { settingsSchema } from './settings';
+import { starterSectionRegistry, starterBlockRegistry } from './registry';
+import preset from './preset.json';
+
+const theme = defineTheme({
+  handle: 'starter',
+  name: 'Starter',
+  version: '1.0.0',
+  author: {
+    name: 'ZevCommerce',
+    url: 'https://zevcommerce.com',
+  },
+  description: 'A simple, mobile-first theme for ZevCommerce — perfect for getting started quickly.',
+  tags: ['simple', 'mobile-first', 'starter', 'minimal', 'responsive'],
+  settingsSchema,
+  defaultPreset: preset as any,
+  registry: {
+    sections: starterSectionRegistry,
+    blocks: starterBlockRegistry,
+  },
+});
+
+export default theme;
+export { settingsSchema } from './settings';
+export { starterSectionRegistry, starterBlockRegistry } from './registry';

package/src/preset.json

@@ -0,0 +1,126 @@
+{
+  "name": "Starter",
+  "settings": {
+    "brand": {
+      "primary": "#2563EB",
+      "background": "#ffffff",
+      "text": "#374151",
+      "accent": "#F59E0B",
+      "font": "Inter"
+    },
+    "header": {
+      "logo": null,
+      "logoHeight": 36,
+      "sticky": true,
+      "showSearch": true,
+      "menuHandle": "main-menu"
+    },
+    "hero": {
+      "enabled": true,
+      "backgroundImage": null,
+      "heading": "Welcome to our store",
+      "subheading": "Discover amazing products at great prices.",
+      "buttonText": "Shop Now",
+      "buttonLink": "/collections/all",
+      "overlayOpacity": 50,
+      "overlayColor": "#000000",
+      "textColor": "#ffffff"
+    },
+    "products": {
+      "enabled": true,
+      "heading": "Featured Products",
+      "collection": "all",
+      "limit": 8,
+      "columns": "4"
+    },
+    "contact": {
+      "enabled": false,
+      "heading": "Get in Touch",
+      "showPhone": true,
+      "phone": "",
+      "showEmail": true,
+      "email": "",
+      "showWhatsApp": false,
+      "whatsapp": "",
+      "showAddress": false,
+      "address": ""
+    },
+    "footer": {
+      "description": "",
+      "menuHandle": "footer",
+      "copyright": "",
+      "instagram": "",
+      "facebook": "",
+      "twitter": "",
+      "tiktok": ""
+    },
+    "announcement": {
+      "enabled": false,
+      "text": "Free shipping on orders over $50!",
+      "backgroundColor": "#2563EB",
+      "textColor": "#ffffff"
+    }
+  },
+  "sections": {
+    "announcement_1": {
+      "type": "announcement",
+      "settings": {}
+    },
+    "header_1": {
+      "type": "header",
+      "settings": {}
+    },
+    "hero_1": {
+      "type": "hero",
+      "settings": {}
+    },
+    "featured_products_1": {
+      "type": "featured-products",
+      "settings": {}
+    },
+    "contact_info_1": {
+      "type": "contact-info",
+      "settings": {}
+    },
+    "footer_1": {
+      "type": "footer",
+      "settings": {}
+    },
+    "main-product": {
+      "type": "product-detail",
+      "settings": {}
+    },
+    "main-collection": {
+      "type": "product-list",
+      "settings": {}
+    },
+    "main-cart": {
+      "type": "cart-page",
+      "settings": {}
+    },
+    "main-checkout": {
+      "type": "checkout-page",
+      "settings": {}
+    }
+  },
+  "layout": {
+    "header": [
+      "announcement_1",
+      "header_1"
+    ],
+    "content": [
+      "hero_1",
+      "featured_products_1",
+      "contact_info_1"
+    ],
+    "footer": [
+      "footer_1"
+    ]
+  },
+  "templates": {
+    "product_detail": { "order": ["main-product"] },
+    "collection": { "order": ["main-collection"] },
+    "cart": { "order": ["main-cart"] },
+    "checkout": { "order": ["main-checkout"] }
+  }
+}

package/src/registry.ts

@@ -0,0 +1,35 @@
+import Header from './sections/Header';
+import { schema as HeaderSchema } from './sections/Header';
+import Announcement from './sections/Announcement';
+import { schema as AnnouncementSchema } from './sections/Announcement';
+import Hero from './sections/Hero';
+import { schema as HeroSchema } from './sections/Hero';
+import FeaturedProducts from './sections/FeaturedProducts';
+import { schema as FeaturedProductsSchema } from './sections/FeaturedProducts';
+import ContactInfo from './sections/ContactInfo';
+import { schema as ContactInfoSchema } from './sections/ContactInfo';
+import Footer from './sections/Footer';
+import { schema as FooterSchema } from './sections/Footer';
+import ProductDetail from './sections/ProductDetail';
+import { schema as ProductDetailSchema } from './sections/ProductDetail';
+import ProductList from './sections/ProductList';
+import { schema as ProductListSchema } from './sections/ProductList';
+import CartSection from './sections/CartSection';
+import { schema as CartSectionSchema } from './sections/CartSection';
+import CheckoutSection from './sections/CheckoutSection';
+import { schema as CheckoutSectionSchema } from './sections/CheckoutSection';
+
+export const starterSectionRegistry: Record<string, { component: any; schema: any }> = {
+  'header': { component: Header as any, schema: HeaderSchema },
+  'announcement': { component: Announcement as any, schema: AnnouncementSchema },
+  'hero': { component: Hero as any, schema: HeroSchema },
+  'featured-products': { component: FeaturedProducts as any, schema: FeaturedProductsSchema },
+  'contact-info': { component: ContactInfo as any, schema: ContactInfoSchema },
+  'footer': { component: Footer as any, schema: FooterSchema },
+  'product-detail': { component: ProductDetail as any, schema: ProductDetailSchema },
+  'product-list': { component: ProductList as any, schema: ProductListSchema },
+  'cart-page': { component: CartSection as any, schema: CartSectionSchema },
+  'checkout-page': { component: CheckoutSection as any, schema: CheckoutSectionSchema },
+};
+
+export const starterBlockRegistry: Record<string, { component: any; schema: any }> = {};

package/src/sections/Announcement.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useTheme } from '@zevcommerce/storefront-api';
+
+export default function Announcement() {
+  const { theme } = useTheme();
+  const announcement = theme?.settings?.announcement;
+
+  if (!announcement?.enabled) return null;
+
+  const text = announcement.text || 'Free shipping on orders over $50!';
+  const backgroundColor = announcement.backgroundColor || '#2563EB';
+  const textColor = announcement.textColor || '#ffffff';
+
+  return (
+    <div
+      className="py-2.5 text-center"
+      style={{ backgroundColor, color: textColor, fontFamily: 'var(--font-body)' }}
+    >
+      <p className="text-xs sm:text-sm font-medium px-4">{text}</p>
+    </div>
+  );
+}
+
+export const schema = {
+  type: 'announcement',
+  name: 'Announcement Bar',
+  limit: 1,
+  settings: [],
+};

package/src/sections/CartSection.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import Link from 'next/link';
+import { useTheme, useCartStore, getStorePermalink } from '@zevcommerce/storefront-api';
+import { useParams } from 'next/navigation';
+import { formatPrice } from '../helpers/format-price';
+
+export default function CartSection() {
+  const { storeConfig } = useTheme();
+  const { items, totalPrice, removeItem, updateQuantity } = useCartStore();
+  const params = useParams();
+  const domain = (params?.domain as string) || storeConfig?.handle || '';
+  const currency = storeConfig?.currency || 'NGN';
+
+  const total = typeof totalPrice === 'function' ? totalPrice() : totalPrice;
+
+  if (items.length === 0) {
+    return (
+      <div className="py-24 text-center" style={{ backgroundColor: 'var(--color-background)' }}>
+        <div className="container mx-auto px-4 sm:px-6">
+          <div
+            className="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center"
+            style={{ backgroundColor: '#f3f4f6' }}
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: 'var(--color-text)', opacity: 0.4 }}>
+              <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>
+          </div>
+          <h1 className="text-xl font-bold mb-2" style={{ color: 'var(--color-text)' }}>
+            Your cart is empty
+          </h1>
+          <p className="text-sm mb-6" style={{ color: 'var(--color-text)', opacity: 0.5 }}>
+            Start browsing to add items to your cart.
+          </p>
+          <Link
+            href={getStorePermalink(domain, '/collections/all')}
+            className="btn-primary"
+          >
+            Browse Products
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  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-4xl">
+        <h1 className="text-2xl md:text-3xl font-bold mb-8" style={{ color: 'var(--color-text)' }}>
+          Your Cart
+          <span className="text-base font-normal ml-2" style={{ opacity: 0.5 }}>
+            ({items.length} {items.length === 1 ? 'item' : 'items'})
+          </span>
+        </h1>
+
+        {/* Cart Items */}
+        <div className="divide-y" style={{ borderColor: '#e5e7eb' }}>
+          {items.map((item) => (
+            <div key={item.variantId} className="flex gap-4 py-6">
+              {/* Image */}
+              {item.image && (
+                <Link
+                  href={getStorePermalink(domain, `/products/${item.slug}`)}
+                  className="flex-shrink-0"
+                >
+                  <img
+                    src={item.image}
+                    alt={item.title}
+                    className="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-lg"
+                  />
+                </Link>
+              )}
+
+              {/* Details */}
+              <div className="flex-1 min-w-0">
+                <Link
+                  href={getStorePermalink(domain, `/products/${item.slug}`)}
+                  className="text-sm font-medium hover:opacity-70 transition-opacity"
+                  style={{ color: 'var(--color-text)' }}
+                >
+                  {item.title}
+                </Link>
+                {item.variantTitle && (
+                  <p className="text-xs mt-1" style={{ color: 'var(--color-text)', opacity: 0.5 }}>
+                    {item.variantTitle}
+                  </p>
+                )}
+                <p className="text-sm font-semibold mt-2" style={{ color: 'var(--color-text)' }}>
+                  {formatPrice(parseFloat(item.price) * item.quantity, currency)}
+                </p>
+
+                {/* Quantity controls */}
+                <div className="flex items-center gap-3 mt-3">
+                  <div className="inline-flex items-center border rounded text-sm" style={{ borderColor: '#d1d5db' }}>
+                    <button
+                      onClick={() => updateQuantity(item.variantId, -1)}
+                      className="px-2.5 py-1 hover:bg-gray-50 transition-colors"
+                      style={{ color: 'var(--color-text)' }}
+                    >
+                      -
+                    </button>
+                    <span className="px-3 py-1" style={{ color: 'var(--color-text)' }}>
+                      {item.quantity}
+                    </span>
+                    <button
+                      onClick={() => updateQuantity(item.variantId, 1)}
+                      className="px-2.5 py-1 hover:bg-gray-50 transition-colors"
+                      style={{ color: 'var(--color-text)' }}
+                    >
+                      +
+                    </button>
+                  </div>
+                  <button
+                    onClick={() => removeItem(item.variantId)}
+                    className="text-xs font-medium transition-opacity hover:opacity-70"
+                    style={{ color: '#ef4444' }}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Summary */}
+        <div className="mt-8 pt-6 border-t" style={{ borderColor: '#e5e7eb' }}>
+          <div className="flex items-center justify-between mb-6">
+            <span className="text-base font-semibold" style={{ color: 'var(--color-text)' }}>
+              Total
+            </span>
+            <span className="text-lg font-bold" style={{ color: 'var(--color-text)' }}>
+              {formatPrice(total, currency)}
+            </span>
+          </div>
+          <Link
+            href={getStorePermalink(domain, '/checkout')}
+            className="btn-primary w-full text-center block py-3.5"
+          >
+            Proceed to Checkout
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export const schema = {
+  type: 'cart-page',
+  name: 'Cart Page',
+  settings: [],
+  disabled_on: { templates: ['*'] },
+  enabled_on: { templates: ['cart'] },
+};

package/src/sections/CheckoutSection.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { CheckoutForm } from '@zevcommerce/storefront-api';
+
+export default function CheckoutSection() {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background)' }}>
+      <div className="container mx-auto px-4 sm:px-6 py-8 md:py-16 max-w-4xl">
+        <CheckoutForm />
+      </div>
+    </div>
+  );
+}
+
+export const schema = {
+  type: 'checkout-page',
+  name: 'Checkout Page',
+  settings: [],
+  disabled_on: { templates: ['*'] },
+  enabled_on: { templates: ['checkout'] },
+};