npm - astro-component-kit - Versions diffs - 0.4.0 → 0.4.1 - Mend

astro-component-kit 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

package/src/components/lib/templates/ecommerce-editorial/EditorialLayout.astro ADDED Viewed

@@ -0,0 +1,216 @@
+---
+/**
+ * EditorialLayout — Full HTML document for the editorial e-commerce template: ShopHeaderEditorial
+ * with mega menu, main slot, ShopFooterWordmark and CartToast. Owns the "Forma" look through
+ * design tokens: serif display font, square corners, terracotta accent, light + dark palettes.
+ *
+ * @param {string} title - Page title (store name is appended).
+ * @param {string} description - Meta description.
+ * @param {EditorialStore} store - Catalogue and settings. Default: Forma demo store.
+ * @param {EditorialRoutes} routes - Page URLs.
+ * @param {string} currentHref - Highlights the matching menu link.
+ * @param {string} theme - Initial theme (light|dark|auto). The header toggle overrides it per visitor. Default 'light'.
+ * @param {boolean} seedCart - Pre-fill an empty bag with demo items (previews only). Default false.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ * @param {boolean} minimal - Hide the menu and footer columns (checkout focus mode). Default false.
+ * @param {string} lang - Document language. Default 'en'.
+ */
+import '../../../../styles/global.css';
+import ShopHeaderEditorial from '../../sections/ShopHeaderEditorial.astro';
+import ShopFooterWordmark from '../../sections/ShopFooterWordmark.astro';
+import CartToast from '../../ecommerce/CartToast.astro';
+import { formaStore, editorialRoutes, editorialCategoryHref, type EditorialStore, type EditorialRoutes } from './data';
+interface Props {
+  title: string;
+  description?: string;
+  store?: EditorialStore;
+  routes?: EditorialRoutes;
+  currentHref?: string;
+  theme?: 'light' | 'dark' | 'auto';
+  seedCart?: boolean;
+  noindex?: boolean;
+  minimal?: boolean;
+  lang?: string;
+}
+const {
+  title,
+  description,
+  store = formaStore,
+  routes = editorialRoutes,
+  currentHref,
+  theme = 'light',
+  seedCart = false,
+  noindex = false,
+  minimal = false,
+  lang = 'en',
+} = Astro.props;
+const fullTitle = title.includes(store.name) ? title : `${title} — ${store.name} Studio`;
+const half = Math.ceil(store.categories.length / 2);
+const links = [
+  {
+    label: 'Shop',
+    href: routes.shop,
+    columns: [
+      { title: 'Categories', links: store.categories.slice(0, half).map((c) => ({ label: c.name, href: editorialCategoryHref(routes, c.id) })) },
+      { title: 'More', links: store.categories.slice(half).map((c) => ({ label: c.name, href: editorialCategoryHref(routes, c.id) })) },
+      { title: 'Edits', links: [{ label: 'New in', href: `${routes.shop}?sort=featured` }, { label: 'Under €100', href: `${routes.shop}?sort=price-asc` }, { label: 'Gifts', href: routes.shop }] },
+    ],
+    feature: { title: 'The Autumn edit', text: 'Warm, quiet pieces for the colder months.', href: `${routes.product}wool-overcoat/`, icon: 'jacket', hue: 18 },
+  },
+  { label: 'New in', href: `${routes.shop}?sort=featured` },
+  { label: 'Objects', href: editorialCategoryHref(routes, 'objects') },
+];
+const seed = seedCart
+  ? [
+      { id: 'linen-overshirt::Oat / M', name: 'Linen Overshirt', price: 145, qty: 1, variant: 'Oat / M', icon: 'shirt' as const, hue: 30 },
+      { id: 'kiln-mug::Clay', name: 'Kiln Mug', price: 32, qty: 2, variant: 'Clay', icon: 'mug' as const, hue: 14 },
+    ]
+  : [];
+const footerColumns = [
+  { title: 'Shop', links: store.categories.map((c) => ({ label: c.name, href: editorialCategoryHref(routes, c.id) })) },
+  { title: 'Care', links: [{ label: 'Shipping', href: '#' }, { label: 'Returns', href: '#' }, { label: 'Repairs', href: '#' }, { label: 'Size guide', href: '#' }] },
+  { title: 'Studio', links: [{ label: 'About', href: '#' }, { label: 'Journal', href: '#' }, { label: 'Stockists', href: '#' }] },
+];
+---
+<!doctype html>
+<html lang={lang} class="theme-forma" data-theme={theme === 'auto' ? 'light' : theme}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{fullTitle}</title>
+    {description && <meta name="description" content={description} />}
+    {noindex && <meta name="robots" content="noindex, follow" />}
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&display=swap" rel="stylesheet" />
+    <script is:inline define:vars={{ initial: theme }}>
+      (function () {
+        var t = initial;
+        try { t = localStorage.getItem('ack-theme') || t; } catch (e) {}
+        if (t === 'auto') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.dataset.theme = t;
+      })();
+    </script>
+    <slot name="head" />
+  </head>
+  <body class="forma">
+    <a class="forma__skip" href="#main">Skip to content</a>
+    <ShopHeaderEditorial
+      brand={store.name}
+      brandHref={routes.home}
+      announcement={minimal ? '' : store.announcement}
+      links={minimal ? [] : links}
+      searchHref={minimal ? '' : routes.shop}
+      bagHref={routes.bag}
+      cartKey={store.cartKey}
+      currentHref={currentHref}
+    />
+    <main id="main" class="forma__main" tabindex="-1">
+      <slot />
+    </main>
+    <ShopFooterWordmark brand={store.name} brandHref={routes.home} columns={minimal ? [] : footerColumns} contact={minimal ? undefined : store.contact} copyright={`© ${new Date().getFullYear()} ${store.name} Studio · Demo store built with Astro Components Kit`} />
+    <CartToast cartKey={store.cartKey} position="bottom-right" actionLabel="View bag" addedTitle="Added to bag" />
+    {seed.length > 0 && <div hidden data-forma-seed={JSON.stringify(seed)} data-key={store.cartKey}></div>}
+  </body>
+</html>
+<script>
+  import { createCart } from '../../ecommerce/cart-store';
+  // Demo seed (previews) + "View bag" goes to the bag page instead of a drawer.
+  const seed = document.querySelector<HTMLElement>('[data-forma-seed]');
+  if (seed) { try { createCart(seed.dataset.key).seed(JSON.parse(seed.dataset.formaSeed || '[]')); } catch { /* ignore */ } }
+  document.addEventListener('ack:cart-open', () => {
+    const bag = document.querySelector<HTMLAnchorElement>('a[data-bag-link]');
+    if (bag) window.location.href = bag.href;
+  });
+  // Expose the header height so sticky toolbars sit right under it.
+  const header = document.querySelector<HTMLElement>('[data-shop-header]');
+  const setH = () => { if (header) document.documentElement.style.setProperty('--shop-header-h', `${header.offsetHeight}px`); };
+  setH();
+  window.addEventListener('resize', setH);
+</script>
+<style is:global>
+  .theme-forma {
+    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+    --r-sm: 2px;
+    --r-md: 3px;
+    --r-lg: 4px;
+    --r-xl: 6px;
+    --shop-header-h: 106px;
+  }
+  .theme-forma[data-theme='light'] {
+    --c-bg: #f3efe8;
+    --c-bg-1: #fbf9f5;
+    --c-bg-2: #e7e1d6;
+    --c-surface: rgba(23, 21, 18, 0.03);
+    --c-border: rgba(23, 21, 18, 0.14);
+    --c-text-1: #171512;
+    --c-text-2: #514b44;
+    --c-text-3: #6d665e;
+    --c-primary: #9c3d1c;
+    --c-primary-light: #9c3d1c;
+    --c-primary-glow: rgba(156, 61, 28, 0.14);
+    --c-accent: #7a2e14;
+    --shop-accent: #9c3d1c;
+    --c-on-primary: #ffffff;
+    --ink-rgb: 23 21 18;
+    --paper-rgb: 251 249 245;
+    --c-success: #2f6b3a;
+    --c-warning: #8a4b06;
+    --c-danger: #a8261b;
+    --pm-ink-s: 45%;
+    --pm-ink-l: 32%;
+    --pm-soft-s: 30%;
+    --pm-soft-l: 80%;
+    --pm-soft-a: 0.95;
+    color-scheme: light;
+  }
+  .theme-forma[data-theme='dark'] {
+    --c-bg: #12110f;
+    --c-bg-1: #1a1815;
+    --c-bg-2: #24211c;
+    --c-surface: rgba(242, 237, 229, 0.03);
+    --c-border: rgba(242, 237, 229, 0.14);
+    --c-text-1: #f2ede5;
+    --c-text-2: #bcb4a8;
+    --c-text-3: #948b7f;
+    --c-primary: #e2835a;
+    --c-primary-light: #e2835a;
+    --c-primary-glow: rgba(226, 131, 90, 0.16);
+    --c-accent: #f0b796;
+    --shop-accent: #e2835a;
+    --c-on-primary: #1a0d07;
+    --ink-rgb: 242 237 229;
+    --paper-rgb: 18 17 15;
+    --c-success: #7fc48c;
+    --c-warning: #e7b46a;
+    --c-danger: #f08a7a;
+    --pm-ink-s: 45%;
+    --pm-ink-l: 76%;
+    --pm-soft-s: 25%;
+    --pm-soft-l: 24%;
+    --pm-soft-a: 0.8;
+    color-scheme: dark;
+  }
+  body.forma { background: var(--c-bg); color: var(--c-text-2); overflow-x: clip; }
+  body.forma::before { display: none; }
+  .forma ::selection { background: var(--shop-accent); color: var(--c-on-primary); }
+  .forma__main { outline: none; }
+  .forma-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
+  .forma__skip { position: fixed; top: -60px; left: 12px; z-index: 2000; padding: 0.6rem 1rem; background: var(--c-text-1); color: var(--c-bg); font-weight: 700; transition: top 0.2s ease; }
+  .forma__skip:focus { top: 12px; color: var(--c-bg); }
+  .forma .section-space { padding-block: clamp(3rem, 7vw, 6rem); }
+  /* Reused library pieces, tuned to the editorial look */
+  .forma .badge { border-radius: var(--r-sm); }
+  .forma .cart-toast { border-radius: var(--r-sm); }
+  .forma .anim-input, .forma .custom-select, .forma .stepper { border-radius: var(--r-sm); background: var(--c-bg-1); border-color: var(--c-border); }
+  .theme-forma[data-theme='light'] .anim-input, .theme-forma[data-theme='light'] .custom-select { background: #fff; }
+</style>

package/src/components/lib/templates/ecommerce-editorial/EditorialProductPage.astro ADDED Viewed

@@ -0,0 +1,205 @@
+---
+/**
+ * EditorialProductPage — Editorial product detail: stacked full-bleed images on the left, a sticky
+ * info column (VariantPicker colour + size, add to bag, StockIndicator, size guide and care notes),
+ * then "Complete the look" (ShopProductRail) and reviews (ShopReviewsEditorial).
+ *
+ * Usage (src/pages/product/[slug].astro):
+ *   import { EditorialProductPage, formaStore } from 'astro-component-kit/templates/ecommerce-editorial';
+ *   export const getStaticPaths = () => formaStore.products.map((p) => ({ params: { slug: p.slug } }));
+ *   <EditorialProductPage slug={Astro.params.slug} />
+ *
+ * @param {string} slug - Product slug. Default: first product.
+ * @param {EditorialStore} store - Catalogue and settings.
+ * @param {EditorialRoutes} routes - Page URLs.
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ * @param {boolean} seedCart - Pre-fill the bag with demo items. Default false.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import EditorialLayout from './EditorialLayout.astro';
+import ProductMedia from '../../ecommerce/ProductMedia.astro';
+import ProductRating from '../../ecommerce/ProductRating.astro';
+import VariantPicker from '../../ecommerce/VariantPicker.astro';
+import StockIndicator from '../../ecommerce/StockIndicator.astro';
+import ShopProductRail from '../../sections/ShopProductRail.astro';
+import ShopReviewsEditorial from '../../sections/ShopReviewsEditorial.astro';
+import { formatMoney } from '../../ecommerce/cart-store';
+import type { Product, StoreCategory } from '../../ecommerce/types';
+import { formaStore, editorialRoutes, editorialCategoryHref, type EditorialStore, type EditorialRoutes } from './data';
+interface Props {
+  slug?: string;
+  store?: EditorialStore;
+  routes?: EditorialRoutes;
+  theme?: 'light' | 'dark' | 'auto';
+  seedCart?: boolean;
+  noindex?: boolean;
+}
+const { slug, store = formaStore, routes = editorialRoutes, theme = 'light', seedCart = false, noindex = false } = Astro.props as Props;
+const catalog: EditorialStore = store;
+const product: Product = catalog.products.find((p: Product) => p.slug === slug) ?? catalog.products[0];
+const category: StoreCategory | undefined = catalog.categories.find((c: StoreCategory) => c.id === product.category);
+const money = { currency: store.currency, locale: store.locale };
+const inStock = product.inStock !== false;
+const views = [0, 1, 2, 3].map((i) => ({ hue: (product.hue ?? 30) + i * 14, turn: [0, -12, 10, 0][i], zoom: [1, 1.25, 0.9, 1.5][i], variant: (i % 2 ? 'glow' : 'soft') as 'glow' | 'soft' }));
+const related: Product[] = catalog.products.filter((p: Product) => p.slug !== product.slug && p.category !== product.category).slice(0, 6);
+const payload = JSON.stringify({ id: product.slug, name: product.name, price: product.price, icon: product.icon, hue: product.hue, image: product.image });
+const productReviews = catalog.reviews.filter((r: EditorialStore['reviews'][number]) => r.product === product.name);
+---
+<EditorialLayout title={product.name} description={product.description} store={store} routes={routes} theme={theme} seedCart={seedCart} noindex={noindex}>
+  <div class="forma-wrap">
+    <nav class="pdp-crumbs" aria-label="Breadcrumb">
+      <ol>
+        <li><a href={routes.home}>Home</a></li>
+        <li><a href={routes.shop}>Shop</a></li>
+        {category && <li><a href={editorialCategoryHref(routes, category.id)}>{category.name}</a></li>}
+        <li><span aria-current="page">{product.name}</span></li>
+      </ol>
+    </nav>
+    <div class="pdp">
+      <div class="pdp__gallery" aria-label={`${product.name} images`} role="group">
+        {product.image ? (
+          <ProductMedia image={product.image} alt={product.name} ratio="4 / 5" />
+        ) : (
+          views.map((v, i) => (
+            <div class:list={['pdp__view', { 'pdp__view--wide': i === 0 || i === 3 }]} style={`--turn: ${v.turn}deg; --zoom: ${v.zoom}`}>
+              <ProductMedia icon={product.icon} hue={v.hue} ratio={i === 0 || i === 3 ? '4 / 5' : '3 / 4'} variant={v.variant} size="lg" />
+            </div>
+          ))
+        )}
+      </div>
+      <div class="pdp__info">
+        <p class="pdp__cat">{category?.name}{product.badge && <span> · {product.badge}</span>}</p>
+        <h1 class="pdp__title">{product.name}</h1>
+        <p class="pdp__price">
+          <span>{formatMoney(product.price, money)}</span>
+          {product.compareAt && <s><span class="sr-only">Was </span>{formatMoney(product.compareAt, money)}</s>}
+        </p>
+        {product.rating !== undefined && (
+          <a class="pdp__rating" href="#reviews"><ProductRating value={product.rating} count={product.reviews} /></a>
+        )}
+        {product.description && <p class="pdp__desc">{product.description}</p>}
+        <div class="pdp__pickers">
+          {product.colors && product.colors.length > 0 && (
+            <VariantPicker label="Colour" name="pdp-color" type="swatch" size="sm" target="pdp-add" options={product.colors.map((c: { name: string; hex: string }) => ({ label: c.name, hex: c.hex }))} />
+          )}
+          {product.sizes && product.sizes.length > 0 && (
+            <VariantPicker label="Size" name="pdp-size" type="pill" size="sm" target="pdp-add" options={product.sizes.map((s: string) => ({ label: s }))} selected={Math.floor(product.sizes.length / 2)} />
+          )}
+        </div>
+        {product.sizes && product.sizes.length > 0 && (
+          <details class="pdp__guide">
+            <summary>Size guide</summary>
+            <p>Our pieces are cut relaxed. If you are between sizes, choose the smaller one for a closer fit. Model is 183 cm and wears size M.</p>
+          </details>
+        )}
+        <button
+          type="button"
+          class="pdp__add"
+          id="pdp-add"
+          data-add-to-cart={payload}
+          data-cart-key={store.cartKey}
+          data-open-cart="false"
+          data-added-label="Added to bag ✓"
+          disabled={!inStock}
+        ><span data-label>{inStock ? `Add to bag — ${formatMoney(product.price, money)}` : 'Sold out'}</span></button>
+        {inStock && product.stock !== undefined && product.stock <= 5 && (
+          <StockIndicator stock={product.stock} viewers={6 + ((product.reviews ?? 0) % 11)} variant="inline" size="sm" />
+        )}
+        <ul class="pdp__notes">
+          <li>Complimentary shipping over {formatMoney(store.freeShippingThreshold, money)}</li>
+          <li>Free returns within 30 days</li>
+          <li>Free repairs, for life</li>
+        </ul>
+        <div class="pdp__acc">
+          <details open><summary>Materials &amp; care</summary><p>Natural fibres, traceable to the mill. Wash cold, dry flat, iron while damp. Every piece comes with a care card.</p></details>
+          <details><summary>Made by</summary><p>A family workshop we have worked with since day one. Small batches, fair wages and audited conditions.</p></details>
+          <details><summary>Shipping &amp; returns</summary><p>Ships in 1–2 days in plastic-free packaging. Return anything within 30 days — we cover the label.</p></details>
+        </div>
+      </div>
+    </div>
+  </div>
+  {related.length > 0 && (
+    <div class="forma-wrap section-space">
+      <ShopProductRail eyebrow="Pairs well with" title="Complete the *look*" products={related} productBase={routes.product} link={{ label: 'Shop all', href: routes.shop }} id="pdp-rail" currency={store.currency} locale={store.locale} cartKey={store.cartKey} />
+    </div>
+  )}
+  <div class="forma-wrap section-space pdp-reviews" id="reviews">
+    <ShopReviewsEditorial eyebrow="Reviews" score={product.rating ?? 4.8} count={product.reviews ?? 0} reviews={productReviews.length ? productReviews : store.reviews} />
+  </div>
+</EditorialLayout>
+<style>
+  .pdp-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: var(--sp-5) 0; list-style: none; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
+  .pdp-crumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
+  .pdp-crumbs a { color: inherit; }
+  .pdp-crumbs a:hover, .pdp-crumbs [aria-current] { color: var(--c-text-1); }
+  .pdp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
+  .pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+  .pdp__view--wide { grid-column: 1 / -1; }
+  .pdp__view :global(.p-media__art) { transform: rotate(var(--turn)) scale(var(--zoom)); }
+  .pdp__view :global(.p-media) { border-radius: var(--r-sm); }
+  .pdp__info { position: sticky; top: calc(var(--shop-header-h) + 1.5rem); display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-8); }
+  .pdp__cat { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-2); }
+  .pdp__cat span { color: var(--shop-accent); }
+  .pdp__title { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; color: var(--c-text-1); }
+  .pdp__price { display: flex; gap: var(--sp-3); margin: 0; font-size: 1.2rem; color: var(--c-text-1); font-variant-numeric: tabular-nums; }
+  .pdp__price s { color: var(--c-text-2); }
+  .pdp__rating { width: fit-content; }
+  .pdp__rating :global(.p-rating) { --p-rating-star: var(--shop-accent); }
+  .pdp__desc { margin: 0; max-width: 34rem; line-height: 1.7; }
+  .pdp__pickers { display: grid; gap: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
+  .pdp__pickers { --vp-radius: var(--r-sm); --vp-active-bg: var(--c-text-1); --vp-active-color: var(--c-bg); --vp-active-border: var(--c-text-1); --vp-ring: var(--c-text-1); }
+  .pdp__guide summary, .pdp__acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: var(--c-text-1); font-size: 0.9rem; cursor: pointer; list-style: none; }
+  .pdp__guide summary { width: fit-content; min-height: 40px; text-decoration: underline; text-underline-offset: 4px; }
+  .pdp__guide summary::-webkit-details-marker, .pdp__acc summary::-webkit-details-marker { display: none; }
+  .pdp__guide p, .pdp__acc p { margin: 0 0 var(--sp-4); font-size: 0.9rem; line-height: 1.7; }
+  .pdp__add {
+    width: 100%;
+    min-height: 58px;
+    border: 0;
+    border-radius: var(--r-sm);
+    background: var(--c-text-1);
+    color: var(--c-bg);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease;
+  }
+  .pdp__add:hover:not(:disabled), .pdp__add.is-added { background: var(--shop-accent); color: var(--c-on-primary); }
+  .pdp__add:disabled { opacity: 0.4; cursor: not-allowed; }
+  .pdp__add:focus-visible, .pdp-crumbs a:focus-visible, .pdp summary:focus-visible, .pdp__rating:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 3px; }
+  .pdp__notes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; }
+  .pdp__notes li::before { content: '— '; color: var(--shop-accent); }
+  .pdp__acc { border-top: 1px solid var(--c-border); }
+  .pdp__acc details { border-bottom: 1px solid var(--c-border); }
+  .pdp__acc summary::after { content: '+'; font-size: 1.2rem; transition: transform 0.2s ease; }
+  .pdp__acc details[open] summary::after { transform: rotate(45deg); }
+  .pdp-reviews { padding-top: 0; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @media (max-width: 900px) {
+    .pdp { grid-template-columns: 1fr; }
+    .pdp__info { position: static; }
+    .pdp__gallery { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; }
+    .pdp__view, .pdp__view--wide { grid-column: auto; scroll-snap-align: start; }
+  }
+</style>

package/src/components/lib/templates/ecommerce-editorial/EditorialShopPage.astro ADDED Viewed

@@ -0,0 +1,112 @@
+---
+/**
+ * EditorialShopPage — Editorial catalogue: ShopCategoryHero, sticky FilterBar (chips, refine
+ * panel, sort, live count) and a grid of ProductCardMinimal with quick add.
+ *
+ * Usage (src/pages/shop.astro):
+ *   import { EditorialShopPage } from 'astro-component-kit/templates/ecommerce-editorial';
+ *   <EditorialShopPage />
+ * Category links use `?category=<id>`; pass `category` to build one static page per category.
+ *
+ * @param {EditorialStore} store - Catalogue and settings.
+ * @param {EditorialRoutes} routes - Page URLs.
+ * @param {string} category - Pre-selected category id.
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ * @param {boolean} seedCart - Pre-fill the bag with demo items. Default false.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import EditorialLayout from './EditorialLayout.astro';
+import ShopCategoryHero from '../../sections/ShopCategoryHero.astro';
+import ShopNewsletterEditorial from '../../sections/ShopNewsletterEditorial.astro';
+import FilterBar from '../../ecommerce/FilterBar.astro';
+import ProductCardMinimal from '../../ecommerce/ProductCardMinimal.astro';
+import { formaStore, editorialRoutes, editorialProductHref, editorialCategoryHref, type EditorialStore, type EditorialRoutes } from './data';
+interface Props {
+  store?: EditorialStore;
+  routes?: EditorialRoutes;
+  category?: string;
+  theme?: 'light' | 'dark' | 'auto';
+  seedCart?: boolean;
+  noindex?: boolean;
+}
+const { store = formaStore, routes = editorialRoutes, category, theme = 'light', seedCart = false, noindex = false } = Astro.props;
+const active = store.categories.find((c) => c.id === category);
+const maxPrice = Math.ceil(Math.max(...store.products.map((p) => p.price)) / 50) * 50;
+const colors = Array.from(new Map(store.products.flatMap((p) => p.colors ?? []).map((c) => [c.name, c])).values());
+const chips = store.categories.map((c) => ({ id: c.id, name: c.name, count: store.products.filter((p) => p.category === c.id).length }));
+const title = active?.name ?? 'All pieces';
+const text = active?.description ?? 'Everything we make, in one place — clothing, shoes, bags and objects for the home. Filter by category, colour or price.';
+---
+<EditorialLayout title={title} description={text} store={store} routes={routes} currentHref={routes.shop} theme={theme} seedCart={seedCart} noindex={noindex}>
+  <div class="forma-wrap">
+    <ShopCategoryHero
+      breadcrumb={[{ label: 'Home', href: routes.home }, { label: 'Shop', href: routes.shop }, ...(active ? [{ label: active.name }] : [])]}
+      title={title}
+      count={active ? chips.find((c) => c.id === active.id)?.count : store.products.length}
+      text={text}
+      links={[]}
+      visuals={[]}
+    />
+  </div>
+  <div class="forma-wrap">
+    <FilterBar
+      target="forma-grid"
+      categories={chips}
+      selected={active ? [active.id] : []}
+      maxPrice={maxPrice}
+      colors={colors}
+      total={store.products.length}
+      countLabel="pieces"
+      currency={store.currency}
+      locale={store.locale}
+    />
+  </div>
+  <div class="forma-wrap shop-grid-wrap">
+    <ul class="shop-grid" id="forma-grid">
+      {store.products.map((p, i) => (
+        <li><ProductCardMinimal product={p} href={editorialProductHref(routes, p.slug)} index={i + 1} currency={store.currency} locale={store.locale} cartKey={store.cartKey} /></li>
+      ))}
+    </ul>
+    <div class="shop-empty" data-product-empty hidden role="status">
+      <p class="shop-empty__title">Nothing matches — yet.</p>
+      <p>Try another colour or <a href={editorialCategoryHref(routes)}>see everything</a>.</p>
+    </div>
+  </div>
+  <div class="section-space">
+    <ShopNewsletterEditorial size="sm" title="New pieces, *first*" />
+  </div>
+</EditorialLayout>
+<style>
+  .shop-grid-wrap { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
+  .shop-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(0.75rem, 1.5vw, 1.25rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .shop-grid > li { min-width: 0; }
+  .shop-grid > li:nth-child(7n + 1) { grid-column: span 2; }
+  .shop-grid > li:nth-child(7n + 1) :global(.p-media) { aspect-ratio: 3 / 2 !important; }
+  .shop-grid > li[hidden] { display: none; }
+  .shop-grid > li:nth-child(7n + 1) :global(.pcm__title) { font-size: 1.5rem; }
+  .shop-empty { padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; }
+  .shop-empty[hidden] { display: none; }
+  .shop-empty p { margin: 0; }
+  .shop-empty__title { font-family: var(--font-display); font-size: 2rem; color: var(--c-text-1); }
+  .shop-empty a { color: var(--c-text-1); text-decoration: underline; }
+  @media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+  @media (max-width: 760px) {
+    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .shop-grid > li:nth-child(7n + 1) { grid-column: 1 / -1; }
+  }
+</style>

package/src/components/lib/templates/ecommerce-editorial/data.ts ADDED Viewed

@@ -0,0 +1,125 @@
+// src/components/lib/templates/ecommerce-editorial/data.ts
+// Demo catalogue and settings for the editorial e-commerce template ("Forma Studio").
+// Copy this file, swap in your products and pass it as `store` to every page.
+import type { Product, ShippingRate, StoreCategory } from '../../ecommerce/types';
+export interface EditorialRoutes {
+  home: string;
+  shop: string;
+  /** Product URL prefix — pages live at `${product}${slug}/`. */
+  product: string;
+  bag: string;
+  checkout: string;
+}
+export interface EditorialStore {
+  name: string;
+  tagline: string;
+  announcement: string;
+  currency: string;
+  locale: string;
+  cartKey: string;
+  freeShippingThreshold: number;
+  shippingFlat: number;
+  taxRate: number;
+  promoCodes: Record<string, number>;
+  shippingRates: ShippingRate[];
+  categories: StoreCategory[];
+  products: Product[];
+  newIn: string[];
+  look: Array<{ slug: string; x: number; y: number }>;
+  reviews: Array<{ quote: string; name: string; place?: string; product?: string; rating?: number }>;
+  values: Array<{ title: string; text: string }>;
+  contact: { title: string; lines: string[] };
+}
+export const editorialRoutes: EditorialRoutes = {
+  home: '/',
+  shop: '/shop/',
+  product: '/product/',
+  bag: '/bag/',
+  checkout: '/checkout/',
+};
+const C = {
+  oat: { name: 'Oat', hex: '#d9cbb3' },
+  ink: { name: 'Ink', hex: '#22252b' },
+  rust: { name: 'Rust', hex: '#9c3d1c' },
+  sage: { name: 'Sage', hex: '#8a9a7b' },
+  chalk: { name: 'Chalk', hex: '#ece7de' },
+  clay: { name: 'Clay', hex: '#b07a5a' },
+};
+export const formaStore: EditorialStore = {
+  name: 'Forma',
+  tagline: 'Clothing and objects made slowly, in small runs, by workshops we know by name.',
+  announcement: 'Complimentary shipping over €150 · Free returns within 30 days',
+  currency: 'EUR',
+  locale: 'en-GB',
+  cartKey: 'forma-bag',
+  freeShippingThreshold: 150,
+  shippingFlat: 8,
+  taxRate: 0,
+  promoCodes: { FORMA10: 10 },
+  shippingRates: [
+    { id: 'standard', label: 'Standard', eta: '2–4 business days', price: 8 },
+    { id: 'express', label: 'Express', eta: 'Next business day', price: 18 },
+    { id: 'studio', label: 'Collect at the studio', eta: 'Madrid · ready tomorrow', price: 0 },
+  ],
+  categories: [
+    { id: 'clothing', name: 'Clothing', description: 'Overshirts, knitwear and outerwear in natural fibres.', icon: 'jacket', hue: 22 },
+    { id: 'shoes', name: 'Shoes', description: 'Leather and suede, resoleable.', icon: 'sneaker', hue: 28 },
+    { id: 'bags', name: 'Bags', description: 'Canvas and leather that soften with age.', icon: 'bag', hue: 34 },
+    { id: 'objects', name: 'Objects', description: 'Stoneware, lighting and living things.', icon: 'mug', hue: 14 },
+    { id: 'accessories', name: 'Accessories', description: 'Eyewear and watches, quietly made.', icon: 'sunglasses', hue: 200 },
+  ],
+  products: [
+    { slug: 'linen-overshirt', name: 'Linen Overshirt', price: 145, category: 'clothing', badge: 'New', colors: [C.oat, C.ink, C.rust], sizes: ['XS', 'S', 'M', 'L', 'XL'], icon: 'shirt', hue: 30, rating: 4.8, reviews: 96, stock: 4,
+      description: 'A relaxed overshirt in heavyweight Portuguese linen, garment-washed for softness. Corozo buttons, two patch pockets, a boxy cut that layers over knitwear.' },
+    { slug: 'merino-crew', name: 'Merino Crew Knit', price: 160, category: 'clothing', colors: [C.sage, C.oat, C.ink], sizes: ['S', 'M', 'L', 'XL'], icon: 'jacket', hue: 95, rating: 4.9, reviews: 142,
+      description: 'Extra-fine Italian merino knitted in a dense, flat gauge. Breathable, itch-free and made to be worn next to the skin all winter.' },
+    { slug: 'wool-overcoat', name: 'Wool Overcoat', price: 320, compareAt: 380, category: 'clothing', badge: 'Archive price', colors: [C.rust, C.ink], sizes: ['S', 'M', 'L'], icon: 'jacket', hue: 18, rating: 4.7, reviews: 54, stock: 2,
+      description: 'A single-breasted coat in boiled wool from a mill in Biella. Unlined, light and warm, with a soft shoulder.' },
+    { slug: 'organic-tee', name: 'Organic Heavy Tee', price: 55, category: 'clothing', colors: [C.chalk, C.ink, C.sage, C.clay], sizes: ['XS', 'S', 'M', 'L', 'XL'], icon: 'shirt', hue: 40, rating: 4.6, reviews: 310,
+      description: 'A 240 gsm organic cotton tee with a structured collar that keeps its shape wash after wash.' },
+    { slug: 'dune-loafer', name: 'Dune Suede Loafer', price: 210, category: 'shoes', colors: [C.clay, C.ink], sizes: ['39', '40', '41', '42', '43', '44'], icon: 'sneaker', hue: 28, rating: 4.7, reviews: 77, stock: 3,
+      description: 'Hand-lasted suede loafers on a Blake-stitched leather sole. Resoleable for years of wear.' },
+    { slug: 'canvas-runner', name: 'Canvas Runner', price: 135, category: 'shoes', badge: 'New', colors: [C.chalk, C.sage], sizes: ['38', '39', '40', '41', '42', '43'], icon: 'sneaker', hue: 90, rating: 4.5, reviews: 41,
+      description: 'Organic canvas upper, natural rubber sole and recycled laces. Light enough for everyday.' },
+    { slug: 'field-tote', name: 'Field Tote', price: 120, category: 'bags', colors: [C.rust, C.oat, C.ink], icon: 'bag', hue: 18, rating: 4.9, reviews: 203,
+      description: 'Waxed cotton canvas with vegetable-tanned leather handles. Holds a laptop, a lunch and a book.' },
+    { slug: 'day-rucksack', name: 'Day Rucksack', price: 185, category: 'bags', colors: [C.ink, C.sage], icon: 'backpack', hue: 150, rating: 4.6, reviews: 66,
+      description: 'A roll-top rucksack in recycled nylon with a padded sleeve and a quiet, magnetic closure.' },
+    { slug: 'kiln-mug', name: 'Kiln Mug', price: 32, category: 'objects', colors: [C.clay, C.chalk], icon: 'mug', hue: 14, rating: 4.9, reviews: 388,
+      description: 'Wheel-thrown stoneware from a family workshop in La Bisbal. Each glaze pools a little differently.' },
+    { slug: 'paper-lamp', name: 'Paper Table Lamp', price: 140, category: 'objects', badge: 'New', colors: [C.chalk], icon: 'lamp', hue: 40, rating: 4.7, reviews: 29,
+      description: 'Washi paper on an oak base. Throws a soft, warm light that makes small rooms feel bigger.' },
+    { slug: 'olive-planter', name: 'Olive Planter', price: 58, category: 'objects', colors: [C.sage, C.chalk], icon: 'plant', hue: 110, rating: 4.4, reviews: 18, inStock: false,
+      description: 'A matte terracotta planter with a saucer, sized for a young olive tree.' },
+    { slug: 'acetate-frames', name: 'Acetate Frames', price: 175, category: 'accessories', colors: [C.ink, C.clay], icon: 'sunglasses', hue: 200, rating: 4.8, reviews: 61,
+      description: 'Bio-acetate frames with polarised lenses, made in Cadore. Comes with a linen case.' },
+  ],
+  newIn: ['linen-overshirt', 'canvas-runner', 'paper-lamp', 'merino-crew', 'field-tote', 'acetate-frames'],
+  look: [
+    { slug: 'linen-overshirt', x: 40, y: 32 },
+    { slug: 'field-tote', x: 68, y: 60 },
+    { slug: 'kiln-mug', x: 26, y: 74 },
+  ],
+  reviews: [
+    { quote: 'The overshirt has been washed forty times and it only gets softer. It is the first thing I reach for.', name: 'Inés M.', place: 'Valencia', product: 'Linen Overshirt', rating: 5 },
+    { quote: 'Packaging without plastic, a handwritten note, and a mug that feels made for my hands.', name: 'Jonas P.', place: 'Hamburg', product: 'Kiln Mug', rating: 5 },
+    { quote: 'They repaired the strap of my tote for free, two years after I bought it. That is rare.', name: 'Amira S.', place: 'Lyon', product: 'Field Tote', rating: 5 },
+  ],
+  values: [
+    { title: 'Honest materials', text: 'Linen, wool, organic cotton and stoneware — traceable to the mill and the kiln.' },
+    { title: 'Made in small runs', text: 'Each piece is produced in batches of a few hundred, never mass-manufactured.' },
+    { title: 'Kept for years', text: 'Free repairs on everything we make, and a buy-back for pieces you have outgrown.' },
+  ],
+  contact: { title: 'Visit the studio', lines: ['Calle del Pez 14, Madrid', 'Tue–Sat · 11:00–20:00', 'hello@forma.studio'] },
+};
+export const editorialProductHref = (routes: EditorialRoutes, slug: string) => `${routes.product}${slug}/`;
+export const editorialCategoryHref = (routes: EditorialRoutes, id?: string) => (id ? `${routes.shop}?category=${encodeURIComponent(id)}` : routes.shop);
+export const pickEditorial = (store: EditorialStore, slugs: string[]) =>
+  slugs.map((s) => store.products.find((p) => p.slug === s)).filter((p): p is Product => Boolean(p));