create-snapify-app 0.0.0-stage → 1.1.1

package/template/modules/shop/src/public/ProductPage.tsx

@@ -0,0 +1,195 @@
+/**
+ * Snapify — module Boutique
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useEffect, useState } from 'react';
+import { BadgeCheck, ChevronLeft, ChevronRight, Headphones, RotateCcw, ShieldCheck, Truck } from 'lucide-react';
+import { isModuleActive, type PublicPageProps } from '@snapify/sdk';
+import { COMMERCE_PATHS, MODULE_IDS, type ProductCard } from '@snapify/sdk/commerce';
+import { AddToCartButton, Breadcrumbs, Container, Price, ProductGrid, QtyStepper, SectionHeading, WishlistButton, cn, discountPercent } from '@snapify/sdk/ui/commerce';
+import { NotFound } from './NotFound';
+import { useFetch } from './useFetch';
+import type { PublicCategory, Settings } from '../types';
+
+interface ProductDetail extends ProductCard {
+  images: string[];
+  sku: string;
+  description: string;
+  seoTitle: string;
+  seoDescription: string;
+  lowStock: boolean;
+}
+
+const REASSURANCE_ICONS = [Truck, ShieldCheck, RotateCcw, Headphones];
+const PROSE =
+  '[&_p]:mb-4 [&_ul]:mb-4 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5 [&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_h2]:mb-3 [&_h2]:mt-6 [&_h2]:font-heading [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-px-navy [&_h3]:mb-2 [&_h3]:mt-5 [&_h3]:font-semibold [&_h3]:text-px-navy [&_strong]:font-semibold [&_strong]:text-px-navy [&_a]:text-px-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-px-primary [&_blockquote]:pl-4 [&_blockquote]:italic';
+
+export function ProductPage({ slug, api, navigate, settings, setMeta }: PublicPageProps<Settings> & { slug: string }) {
+  const { data, error } = useFetch<{ product: ProductDetail; categories: PublicCategory[]; related: ProductCard[] }>(api, `/products/${encodeURIComponent(slug)}`);
+  const [index, setIndex] = useState(0);
+  const [qty, setQty] = useState(1);
+  const [tab, setTab] = useState<'description' | 'delivery'>('description');
+  const p = data?.product;
+
+  useEffect(() => {
+    if (p) setMeta({ title: p.seoTitle || p.name, description: p.seoDescription.slice(0, 160) });
+  }, [p, setMeta]);
+
+  if (error?.status === 404) return <NotFound navigate={navigate} />;
+  if (!p) {
+    return (
+      <Container className="grid gap-10 py-12 lg:grid-cols-2" aria-busy="true">
+        <div className="aspect-square animate-pulse rounded-3xl bg-px-surface" />
+        <div className="space-y-4 pt-6">
+          <div className="h-4 w-32 animate-pulse rounded bg-px-surface" />
+          <div className="h-10 w-3/4 animate-pulse rounded bg-px-surface" />
+          <div className="h-8 w-40 animate-pulse rounded bg-px-surface" />
+          <div className="h-24 animate-pulse rounded bg-px-surface" />
+        </div>
+      </Container>
+    );
+  }
+
+  const images = p.images.length ? p.images : [''];
+  const current = images[Math.min(index, images.length - 1)];
+  const category = data.categories[0];
+  const off = discountPercent(p.price, p.compareAtPrice);
+  const canBuy = isModuleActive(MODULE_IDS.cart);
+  const maxQty = p.stock ?? 99;
+  const reassurance = (settings.reassurance || '').split('\n').map((l) => l.trim()).filter(Boolean).slice(0, 4);
+
+  return (
+    <div className="pb-20">
+      <Container className="py-6">
+        <Breadcrumbs
+          navigate={navigate}
+          items={[
+            { label: 'Accueil', to: '/' },
+            { label: settings.shopTitle || 'Boutique', to: COMMERCE_PATHS.shop },
+            ...(category ? [{ label: category.name, to: COMMERCE_PATHS.category(category.slug) }] : []),
+            { label: p.name },
+          ]}
+        />
+      </Container>
+
+      <Container className="grid gap-10 lg:grid-cols-2 lg:gap-16">
+        <div className="lg:sticky lg:top-24 lg:self-start">
+          <div className="group relative aspect-square overflow-hidden rounded-3xl bg-px-surface">
+            {current ? <img src={current} alt={p.name} className="h-full w-full object-cover" /> : null}
+            {off ? <span className="absolute left-4 top-4 rounded-full bg-rose-500 px-3 py-1 text-xs font-semibold text-white">−{off} %</span> : null}
+            {images.length > 1 ? (
+              <>
+                <button type="button" aria-label="Image précédente" onClick={() => setIndex((i) => (i - 1 + images.length) % images.length)} className="absolute left-3 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-px-navy opacity-0 shadow transition group-hover:opacity-100">
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+                <button type="button" aria-label="Image suivante" onClick={() => setIndex((i) => (i + 1) % images.length)} className="absolute right-3 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-px-navy opacity-0 shadow transition group-hover:opacity-100">
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+              </>
+            ) : null}
+          </div>
+          {images.length > 1 ? (
+            <div className="mt-4 grid grid-cols-5 gap-3">
+              {images.map((src, i) => (
+                <button key={src + i} type="button" onClick={() => setIndex(i)} aria-label={`Image ${i + 1}`} className={cn('aspect-square overflow-hidden rounded-xl bg-px-surface ring-2 ring-offset-2 transition', i === index ? 'ring-px-primary' : 'ring-transparent hover:ring-px-border')}>
+                  <img src={src} alt="" className="h-full w-full object-cover" />
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="lg:pt-4">
+          <div className="flex flex-wrap items-center gap-2">
+            {category ? <span className="text-xs font-semibold uppercase tracking-[0.16em] text-px-primary">{category.name}</span> : null}
+            {p.badge ? <span className="rounded-full bg-px-navy px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">{p.badge}</span> : null}
+          </div>
+          <h1 className="mt-3 font-heading text-3xl font-semibold leading-tight tracking-tight text-px-navy sm:text-4xl">{p.name}</h1>
+          <div className="mt-5 flex items-center gap-3">
+            <Price amount={p.price} compareAt={p.compareAtPrice} currency={p.currency} size="lg" />
+            {off ? <span className="rounded-full bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-600">Économisez {off} %</span> : null}
+          </div>
+          {p.shortDescription ? <p className="mt-6 text-[15px] leading-relaxed text-px-text">{p.shortDescription}</p> : null}
+
+          <div className="mt-6 flex items-center gap-2 text-sm font-medium">
+            <span className={cn('h-2 w-2 rounded-full', !p.inStock ? 'bg-rose-500' : p.lowStock ? 'bg-amber-500' : 'bg-emerald-500')} />
+            {!p.inStock ? (
+              <span className="text-rose-600">Épuisé</span>
+            ) : p.lowStock && settings.showStock && p.stock !== null ? (
+              <span className="text-amber-700">Plus que {p.stock} en stock</span>
+            ) : (
+              <span className="text-emerald-700">En stock</span>
+            )}
+          </div>
+
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+            {canBuy && p.inStock ? <QtyStepper value={qty} onChange={setQty} max={Math.max(1, Math.min(99, maxQty))} /> : null}
+            {canBuy ? (
+              <div className="min-w-[200px] flex-1">
+                <AddToCartButton p={p} qty={qty} size="lg" block />
+              </div>
+            ) : null}
+            <WishlistButton productId={p.id} withLabel className={cn(!canBuy && 'flex-1')} />
+          </div>
+
+          {reassurance.length ? (
+            <ul className="mt-8 grid gap-3 rounded-2xl border border-px-border-soft bg-px-surface/60 p-5 sm:grid-cols-2">
+              {reassurance.map((line, i) => {
+                const Icon = REASSURANCE_ICONS[i % REASSURANCE_ICONS.length];
+                return (
+                  <li key={i} className="flex items-center gap-3 text-sm text-px-text">
+                    <Icon className="h-5 w-5 shrink-0 text-px-primary" />
+                    {line}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+
+          {p.sku ? (
+            <p className="mt-6 flex items-center gap-2 text-[13px] text-px-muted">
+              <BadgeCheck className="h-4 w-4" /> Référence : {p.sku}
+            </p>
+          ) : null}
+
+          <div className="mt-10 border-t border-px-border-soft pt-6">
+            <div className="flex gap-6 border-b border-px-border-soft" role="tablist">
+              {(
+                [
+                  ['description', 'Description'],
+                  ['delivery', 'Livraison et retours'],
+                ] as const
+              ).map(([key, label]) => (
+                <button key={key} type="button" role="tab" aria-selected={tab === key} onClick={() => setTab(key)} className={cn('-mb-px border-b-2 pb-3 text-sm font-semibold transition', tab === key ? 'border-px-navy text-px-navy' : 'border-transparent text-px-muted hover:text-px-navy')}>
+                  {label}
+                </button>
+              ))}
+            </div>
+            {tab === 'description' ? (
+              p.description ? (
+                <div className={cn('mt-5 text-[15px] leading-relaxed text-px-text', PROSE)} dangerouslySetInnerHTML={{ __html: p.description }} />
+              ) : (
+                <p className="mt-5 text-sm text-px-muted">Aucune description pour ce produit.</p>
+              )
+            ) : (
+              <div className="mt-5 space-y-3 text-[15px] leading-relaxed text-px-text">
+                {(settings.deliveryText || '').split('\n').filter(Boolean).map((l, i) => (
+                  <p key={i}>{l}</p>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </Container>
+
+      {data.related.length ? (
+        <Container className="mt-24">
+          <SectionHeading eyebrow="À découvrir" title="Vous aimerez aussi" />
+          <ProductGrid items={data.related} navigate={navigate} columns={4} />
+        </Container>
+      ) : null}
+    </div>
+  );
+}

package/template/modules/shop/src/public/index.tsx

@@ -0,0 +1,134 @@
+/**
+ * Snapify — module Boutique
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { definePublicModule, type PublicPageProps, type WidgetProps } from '@snapify/sdk';
+import { COMMERCE_PATHS } from '@snapify/sdk/commerce';
+import { ArrowRight } from 'lucide-react';
+import { Container, GridSkeleton, Link, ProductGrid, SectionHeading, cn } from '@snapify/sdk/ui/commerce';
+import { Catalog } from './Catalog';
+import { NotFound } from './NotFound';
+import { ProductPage } from './ProductPage';
+import { useFetch } from './useFetch';
+import type { PublicCategory, Settings } from '../types';
+import type { ProductCard } from '@snapify/sdk/commerce';
+
+function ShopPage(props: PublicPageProps<Settings>) {
+  const parts = props.path.split('/').filter(Boolean);
+  if (parts[0] === 'produit' && parts.length === 2) return <ProductPage key={parts[1]} slug={parts[1]} {...props} />;
+  if (parts[0] === 'boutique' && parts.length <= 2) return <Catalog key={parts[1] ?? ''} categorySlug={parts[1] ?? ''} {...props} />;
+  return <NotFound navigate={props.navigate} />;
+}
+
+interface ProductsOptions {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+  source?: string;
+  category?: string;
+  limit?: number;
+  columns?: string;
+  buttonLabel?: string;
+}
+
+function ProductsWidget({ options, api, navigate }: WidgetProps<Settings, ProductsOptions>) {
+  const o = options ?? {};
+  const columns = (Number(o.columns) || 4) as 3 | 4 | 5;
+  const limit = Math.min(24, Math.max(1, Number(o.limit) || 8));
+  const query = new URLSearchParams({ source: o.source || 'featured', category: o.category || '', limit: String(limit) }).toString();
+  const { data, error } = useFetch(api, `/widget/products?${query}`);
+  const res = data as { items: ProductCard[]; category: PublicCategory | null } | null;
+  const target = res?.category ? COMMERCE_PATHS.category(res.category.slug) : COMMERCE_PATHS.shop;
+  if (error || (res && !res.items.length)) return null;
+  return (
+    <Container>
+      <SectionHeading
+        eyebrow={o.eyebrow}
+        title={o.title}
+        subtitle={o.subtitle}
+        action={
+          o.buttonLabel ? (
+            <Link to={target} navigate={navigate} className="group inline-flex items-center gap-2 text-sm font-semibold text-px-navy hover:text-px-primary">
+              {o.buttonLabel}
+              <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
+            </Link>
+          ) : null
+        }
+      />
+      {res ? <ProductGrid items={res.items} navigate={navigate} columns={columns} /> : <GridSkeleton count={limit > 8 ? 8 : limit} columns={columns} />}
+    </Container>
+  );
+}
+
+interface CategoriesOptions {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+  limit?: number;
+  style?: string;
+}
+
+function CategoriesWidget({ options, api, navigate }: WidgetProps<Settings, CategoriesOptions>) {
+  const o = options ?? {};
+  const { data } = useFetch(api, '/categories');
+  const list = ((data as { categories: PublicCategory[] } | null)?.categories ?? []).filter((c) => c.count).slice(0, Math.max(1, Number(o.limit) || 6));
+  if (data && !list.length) return null;
+  return (
+    <Container>
+      <SectionHeading eyebrow={o.eyebrow} title={o.title} subtitle={o.subtitle} />
+      {!data ? (
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="aspect-[4/3] animate-pulse rounded-3xl bg-px-surface" />
+          ))}
+        </div>
+      ) : o.style === 'chips' ? (
+        <div className="flex flex-wrap gap-3">
+          {list.map((c) => (
+            <Link key={c.id} to={COMMERCE_PATHS.category(c.slug)} navigate={navigate} className="group inline-flex items-center gap-3 rounded-full border border-px-border bg-white py-1.5 pl-1.5 pr-5 transition hover:border-px-primary">
+              {c.image ? <img src={c.image} alt="" className="h-10 w-10 rounded-full object-cover" /> : <span className="h-10 w-10 rounded-full bg-px-surface" />}
+              <span className="text-sm font-semibold text-px-navy group-hover:text-px-primary">{c.name}</span>
+              <span className="text-xs text-px-muted">{c.count}</span>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <div className={cn('grid grid-cols-2 gap-4 sm:gap-6', list.length === 4 ? 'lg:grid-cols-4' : list.length >= 3 && 'md:grid-cols-3')}>
+          {list.map((c, i) => (
+            <Link
+              key={c.id}
+              to={COMMERCE_PATHS.category(c.slug)}
+              navigate={navigate}
+              className={cn(
+                'group relative block overflow-hidden rounded-3xl bg-px-navy',
+                list.length % 2 === 1 && i === 0 ? 'col-span-2 aspect-[16/7]' : 'aspect-[4/5]',
+                list.length % 3 !== 1 && list.length >= 3 && 'md:col-span-1 md:aspect-[4/5]',
+              )}
+            >
+              {c.image ? <img src={c.image} alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover opacity-90 transition duration-700 group-hover:scale-105" /> : null}
+              <span className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
+              <span className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-5 sm:p-6">
+                <span>
+                  <span className="block font-heading text-lg font-semibold text-white sm:text-2xl">{c.name}</span>
+                  <span className="mt-0.5 block text-[13px] text-white/75">
+                    {c.count} produit{(c.count ?? 0) > 1 ? 's' : ''}
+                  </span>
+                </span>
+                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white text-px-navy transition group-hover:bg-px-primary group-hover:text-white">
+                  <ArrowRight className="h-4 w-4" />
+                </span>
+              </span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+}
+
+export default definePublicModule<Settings>({
+  page: ShopPage,
+  widgets: { products: ProductsWidget, categories: CategoriesWidget },
+});

package/template/modules/shop/src/public/useFetch.ts

@@ -0,0 +1,26 @@
+/**
+ * Snapify — module Boutique
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useEffect, useState } from 'react';
+import type { ModuleApi } from '@snapify/sdk';
+
+/** Chargement d'une route du module ; les données précédentes restent affichées pendant le rechargement. */
+export function useFetch<T = unknown>(api: ModuleApi, path: string | null) {
+  const [state, setState] = useState<{ data: T | null; error: { message: string; status?: number } | null; loading: boolean }>({ data: null, error: null, loading: !!path });
+  useEffect(() => {
+    if (!path) return;
+    let alive = true;
+    setState((s) => ({ ...s, loading: true, error: null }));
+    api.get<T>(path).then(
+      (data) => alive && setState({ data, error: null, loading: false }),
+      (e: Error & { status?: number }) => alive && setState((s) => ({ data: s.data, error: { message: e.message, status: e.status }, loading: false }))
+    );
+    return () => {
+      alive = false;
+    };
+  }, [api, path]);
+  return state;
+}