create-skybridge 0.0.0-dev.3581704 → 0.0.0-dev.35a7b38

package/templates/ecom/src/components/image-gallery.css.ts

@@ -0,0 +1,172 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+import { colors, primitives } from "../design/tokens";
+
+export const gallery = style({
+  position: "relative",
+});
+
+// Rail mode only (THUMBNAIL_RAIL): lay the rail beside the image on desktop. The
+// breakpoint matches the PDP's two-column grid and resolves against the same
+// `.detail` container, so the rail appears exactly when the page goes two-column.
+export const galleryRail = style({
+  "@container": {
+    "(min-width: 560px)": {
+      display: "flex",
+      flexDirection: "row",
+      gap: primitives.space["2xs"],
+      // Top-align so the rail sits beside the image; the rail's own max-height
+      // (set from the measured image height) caps it and scrolls the excess.
+      alignItems: "flex-start",
+    },
+  },
+});
+
+// Image column: the positioning context for the overlaid chevrons, and the flex
+// child that takes the width left of the rail on desktop.
+export const mainCol = style({
+  position: "relative",
+  minWidth: 0,
+  "@container": {
+    "(min-width: 560px)": { flex: 1 },
+  },
+});
+
+// Scroll-snap track: one image per view. Native swipe on touch; the chevrons
+// are the pointer affordance. Scrollbar hidden.
+export const track = style({
+  display: "flex",
+  overflowX: "auto",
+  scrollSnapType: "x mandatory",
+  scrollBehavior: "smooth",
+  scrollbarWidth: "none",
+  borderRadius: primitives.radius.m,
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { scrollBehavior: "auto" },
+  },
+});
+
+globalStyle(`${track}::-webkit-scrollbar`, { display: "none" });
+
+export const slide = style({
+  flex: "0 0 100%",
+  scrollSnapAlign: "start",
+  // Reserve a square box so images load without shifting the page. @todo: match
+  // the carousel card's aspect ratio / fit if you changed them there.
+  aspectRatio: "1",
+  backgroundColor: colors.surface.subtle,
+});
+
+export const image = style({
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  display: "block",
+  pointerEvents: "none",
+  userSelect: "none",
+});
+
+// Prev/next chevrons, vertically centered, disabled at the ends.
+export const nav = style({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  display: "grid",
+  placeItems: "center",
+  width: "36px",
+  height: "36px",
+  padding: 0,
+  borderRadius: primitives.radius.full,
+  border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+  backgroundColor: colors.surface.extraLight,
+  color: colors.content.intense,
+  cursor: "pointer",
+  transition: "opacity 150ms ease",
+  selectors: {
+    "&:disabled": { opacity: 0, pointerEvents: "none" },
+  },
+});
+
+export const navPrev = style({ left: primitives.space["3xs"] });
+export const navNext = style({ right: primitives.space["3xs"] });
+
+// Position indicator: a thin track with a fill sized to (index + 1) / count.
+// @todo: style to your brand — height, track/fill colors, radius, width, and placement.
+export const progress = style({
+  height: "3px",
+  marginTop: primitives.space["3xs"],
+  borderRadius: primitives.radius.full,
+  backgroundColor: colors.border.thin,
+  overflow: "hidden",
+});
+
+export const progressFill = style({
+  height: "100%",
+  borderRadius: primitives.radius.full,
+  backgroundColor: colors.content.intense,
+  transition: "width 200ms ease",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { transition: "none" },
+  },
+});
+
+// In rail mode the rail conveys position on desktop, so the progress bar is
+// mobile-only there.
+export const progressMobileOnly = style({
+  "@container": {
+    "(min-width: 560px)": { display: "none" },
+  },
+});
+
+// Desktop thumbnail rail (THUMBNAIL_RAIL). Hidden on mobile, where the swipe
+// track + progress bar own navigation. Capped to the image height via an inline
+// max-height and scrolls the excess. @todo: tune the rail width / thumb size.
+export const rail = style({
+  display: "none",
+  "@container": {
+    "(min-width: 560px)": {
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 0,
+      gap: primitives.space["2xs"],
+      width: "64px",
+      minHeight: 0,
+      overflowY: "auto",
+      scrollbarWidth: "none",
+    },
+  },
+});
+
+globalStyle(`${rail}::-webkit-scrollbar`, { display: "none" });
+
+export const thumb = style({
+  boxSizing: "border-box",
+  flexShrink: 0,
+  width: "100%",
+  aspectRatio: "1",
+  minHeight: 0, // let aspect-ratio win over the flex-item default min-height
+  padding: primitives.space["4xs"],
+  borderRadius: primitives.radius.m,
+  border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+  backgroundColor: colors.surface.extraLight,
+  cursor: "pointer",
+  transition: "border-color 150ms ease",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { transition: "none" },
+  },
+});
+
+// Selected thumb: thicker, accented border. border-box keeps the width swap from
+// shifting the rail layout.
+export const thumbActive = style({
+  borderColor: colors.common.accent,
+  borderWidth: primitives.stroke.medium,
+});
+
+export const thumbImage = style({
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  display: "block",
+  pointerEvents: "none",
+  userSelect: "none",
+});

package/templates/ecom/src/components/image-gallery.stories.tsx

@@ -0,0 +1,30 @@
+import { ImageGallery } from "./image-gallery";
+
+function shot(fill: string) {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23${fill}'/%3E%3Ccircle cx='200' cy='200' r='110' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E`;
+}
+
+// The gallery's desktop layout (and the optional THUMBNAIL_RAIL) query a
+// `container-type` host, which the PDP's `.detail` provides in the app. The
+// story supplies its own so it previews at a realistic width and renders
+// correctly whichever way THUMBNAIL_RAIL is set — swipe when off, rail when on.
+const frame = {
+  containerType: "inline-size" as const,
+  width: 600,
+  maxWidth: "100%",
+};
+
+export const Multiple = () => (
+  <div style={frame}>
+    <ImageGallery
+      media={[shot("e1e1e1"), shot("c9d4f5"), shot("f5d4c9")]}
+      alt="Product"
+    />
+  </div>
+);
+
+export const Single = () => (
+  <div style={frame}>
+    <ImageGallery media={[shot("e1e1e1")]} alt="Product" />
+  </div>
+);

package/templates/ecom/src/components/image-gallery.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from "react";
+import { useLabels } from "../i18n";
+import { cx } from "../lib/cx";
+import * as styles from "./image-gallery.css";
+
+// @todo: show a thumbnail rail beside the image on desktop (at the two-column
+// breakpoint); swipe-only when false. Off by default. When true, tune the rail
+// width / thumb size in image-gallery.css.ts. The rail is capped to the image
+// height and scrolls its excess; deferred polish (add if it earns it): an
+// edge-fade mask and auto-centering the active thumb.
+const THUMBNAIL_RAIL: boolean = true;
+
+function Chevron({ direction }: { direction: "left" | "right" }) {
+  const d = direction === "left" ? "M15 18l-6-6 6-6" : "M9 18l6-6-6-6";
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={d} />
+    </svg>
+  );
+}
+
+/**
+ * Product image gallery: a native scroll-snap track with prev/next chevrons and
+ * a progress bar; the current index is read from scroll position (no library).
+ * With the rail on, a desktop thumbnail rail is added as a second controller of
+ * the SAME track (shared index, click = scroll). Mobile is always the swipe
+ * track.
+ */
+export function ImageGallery({ media, alt }: { media: string[]; alt: string }) {
+  const labels = useLabels();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [index, setIndex] = useState(0);
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  function onScroll() {
+    const el = trackRef.current;
+    if (el) {
+      setIndex(Math.round(el.scrollLeft / el.clientWidth));
+    }
+  }
+
+  function scrollToIndex(i: number) {
+    const el = trackRef.current;
+    if (el) {
+      el.scrollTo({ left: i * el.clientWidth });
+    }
+  }
+
+  // Rail only: cap the rail to the main image's height so its extra thumbnails
+  // scroll instead of dangling past the image. A vertical scroll container needs
+  // a definite height; the square image provides it, measured here.
+  useEffect(() => {
+    if (!THUMBNAIL_RAIL) {
+      return;
+    }
+    const el = trackRef.current;
+    if (!el) {
+      return;
+    }
+    const measure = () => setImageHeight(el.clientHeight);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const multiple = media.length > 1;
+
+  return (
+    <section
+      className={cx(styles.gallery, THUMBNAIL_RAIL && styles.galleryRail)}
+      aria-roledescription={labels.carousel}
+      aria-label={alt}
+    >
+      {THUMBNAIL_RAIL && multiple ? (
+        <div
+          className={styles.rail}
+          style={{ maxHeight: imageHeight ? `${imageHeight}px` : undefined }}
+        >
+          {media.map((src, i) => (
+            <button
+              key={src}
+              type="button"
+              className={cx(styles.thumb, i === index && styles.thumbActive)}
+              aria-label={`${alt} (${i + 1})`}
+              aria-current={i === index}
+              onClick={() => scrollToIndex(i)}
+            >
+              <img
+                className={styles.thumbImage}
+                src={src}
+                alt=""
+                draggable={false}
+              />
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      <div className={styles.mainCol}>
+        <div ref={trackRef} className={styles.track} onScroll={onScroll}>
+          {media.map((src, i) => (
+            <div key={src} className={styles.slide}>
+              <img
+                className={styles.image}
+                src={src}
+                alt={i === 0 ? alt : ""}
+                loading={i === 0 ? "eager" : "lazy"}
+                draggable={false}
+              />
+            </div>
+          ))}
+        </div>
+
+        {multiple ? (
+          <>
+            <button
+              type="button"
+              aria-label={labels.previous}
+              className={cx(styles.nav, styles.navPrev)}
+              disabled={index === 0}
+              onClick={() => scrollToIndex(index - 1)}
+            >
+              <Chevron direction="left" />
+            </button>
+            <button
+              type="button"
+              aria-label={labels.next}
+              className={cx(styles.nav, styles.navNext)}
+              disabled={index === media.length - 1}
+              onClick={() => scrollToIndex(index + 1)}
+            >
+              <Chevron direction="right" />
+            </button>
+            <div
+              className={cx(
+                styles.progress,
+                THUMBNAIL_RAIL && styles.progressMobileOnly,
+              )}
+              aria-hidden="true"
+            >
+              <div
+                className={styles.progressFill}
+                style={{ width: `${((index + 1) / media.length) * 100}%` }}
+              />
+            </div>
+          </>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/templates/ecom/src/components/product-card.css.ts

@@ -0,0 +1,155 @@
+import { keyframes, style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// @todo: number of title lines before it truncates with an ellipsis. Exported
+// so the skeleton reserves the same number of lines.
+export const TITLE_LINES = 2;
+
+// `framed: true` gives each card its own container; the default is a plain
+// layout shell (pair it with a framed carousel instead). Pick one, not both.
+export const card = recipe({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: primitives.space["3xs"],
+    width: "100%",
+    textAlign: "left",
+  },
+  variants: {
+    framed: {
+      // @todo: tune the card container to your brand.
+      true: {
+        padding: primitives.space["3xs"],
+        borderRadius: primitives.radius.m,
+        border: `${primitives.stroke.thin} solid ${colors.border.thin}`,
+        backgroundColor: colors.surface.extraLight,
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { framed: false },
+});
+
+// Turns a whole card into one tap target (opens the detail view) using the
+// stretched-link pattern: the card renders normally, and a transparent <button>
+// overlays it. A real button (not role="button") gives keyboard + screen-reader
+// support for free, and it holds no flow content, so the markup stays valid
+// (a <button> wrapping the card's <article>/<p> would not be).
+export const cardClickable = style({ position: "relative" });
+
+export const cardButton = style({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  padding: 0,
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  borderRadius: primitives.radius.m,
+});
+
+export const imageBox = style({
+  position: "relative",
+  aspectRatio: "1",
+  overflow: "hidden",
+  borderRadius: primitives.radius.m,
+  // Stage behind the product image. @todo: pick the surface token that suits
+  // your imagery (a neutral grey for transparent cutouts, `extraLight`/white
+  // for full-bleed photos).
+  backgroundColor: colors.surface.subtle,
+});
+
+export const image = style({
+  width: "100%",
+  height: "100%",
+  // @todo: `contain` never crops; switch to `cover` for uniform, bleed-friendly
+  // cutout images.
+  objectFit: "contain",
+  display: "block",
+  // Keep image drag from hijacking the swipe/scroll gesture.
+  pointerEvents: "none",
+  userSelect: "none",
+});
+
+export const imageDimmed = style({ opacity: 0.5 });
+
+export const placeholder = style({
+  width: "100%",
+  height: "100%",
+  backgroundColor: colors.surface.subtle,
+});
+
+export const oosBadge = style({
+  position: "absolute",
+  top: primitives.space["3xs"],
+  left: primitives.space["3xs"],
+  padding: `${primitives.space["5xs"]} ${primitives.space["3xs"]}`,
+  borderRadius: primitives.radius.s,
+  backgroundColor: colors.surface.extraLight,
+  color: colors.content.intense,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.xs,
+});
+
+export const body = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: primitives.space["5xs"],
+});
+
+export const title = style({
+  color: colors.content.intense,
+  display: "-webkit-box",
+  WebkitLineClamp: TITLE_LINES,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  // Reserve the clamp height (title line-height is 1.5) so prices line up
+  // across cards whatever the title length.
+  minHeight: `calc(${TITLE_LINES} * 1.5em)`,
+});
+
+export const price = style({ color: colors.content.subtle });
+
+// Skeleton (loading state).
+const pulse = keyframes({
+  "0%": { opacity: 1 },
+  "50%": { opacity: 0.4 },
+  "100%": { opacity: 1 },
+});
+
+export const skeletonBox = style({
+  backgroundColor: colors.surface.subtle,
+  borderRadius: primitives.radius.s,
+  animation: `${pulse} 1.5s ease-in-out infinite`,
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { animation: "none" },
+  },
+});
+
+export const skeletonImage = style({
+  aspectRatio: "1",
+  borderRadius: primitives.radius.m,
+});
+
+// Text rows (title lines + price), evenly spaced. Its own container rather than
+// `body` so the skeleton can breathe a little more without moving the real card.
+export const skeletonBody = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: primitives.space["4xs"],
+});
+
+export const skeletonLine = style({ height: primitives.font.size.m });
+
+// Last title line and the price row are stubbed short, the way text ends.
+export const skeletonLineShort = style({
+  height: primitives.font.size.m,
+  width: "60%",
+});
+
+export const skeletonPrice = style({
+  height: primitives.font.size.m,
+  width: "40%",
+});

package/templates/ecom/src/components/product-card.stories.tsx

@@ -0,0 +1,58 @@
+import { ProductCard, ProductCardSkeleton } from "./product-card";
+
+const IMAGE =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect width='240' height='240' fill='%23e5e5e5'/%3E%3Ccircle cx='120' cy='120' r='70' fill='%23bcbcbc'/%3E%3C/svg%3E";
+
+const frame = { maxWidth: 220 };
+
+export const Default = () => (
+  <div style={frame}>
+    <ProductCard
+      title="Merino wool sweater"
+      price={{ amount: 129.9, currency: "EUR" }}
+      media={[IMAGE]}
+    />
+  </div>
+);
+
+export const LongTitle = () => (
+  <div style={frame}>
+    <ProductCard
+      title="Extra long product title that wraps onto two lines and then clamps"
+      price={{ amount: 1290, currency: "USD" }}
+      media={[IMAGE]}
+    />
+  </div>
+);
+
+export const NoImage = () => (
+  <div style={frame}>
+    <ProductCard
+      title="Product without an image"
+      price={{ amount: 49, currency: "EUR" }}
+    />
+  </div>
+);
+
+export const NoPrice = () => (
+  <div style={frame}>
+    <ProductCard title="Price on request" media={[IMAGE]} />
+  </div>
+);
+
+export const OutOfStock = () => (
+  <div style={frame}>
+    <ProductCard
+      title="Sold out product"
+      price={{ amount: 89, currency: "EUR" }}
+      media={[IMAGE]}
+      outOfStock
+    />
+  </div>
+);
+
+export const Skeleton = () => (
+  <div style={frame}>
+    <ProductCardSkeleton />
+  </div>
+);

package/templates/ecom/src/components/product-card.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+import { useUser } from "skybridge/web";
+import { text } from "../design/tokens";
+import { useLabels } from "../i18n";
+import { cx } from "../lib/cx";
+import { formatPrice } from "../lib/format";
+import type { Price } from "../types.js";
+import * as styles from "./product-card.css";
+
+type ProductCardProps = {
+  title: string;
+  price?: Price;
+  media?: string[]; // all images; the card decides which to show
+  outOfStock?: boolean;
+};
+
+// @todo: for boxed cards (border + background), set this to true and leave the
+// carousel unframed. Pick one, not both.
+const FRAMED = false;
+
+/**
+ * A single product card: image, title, price, and an out-of-stock treatment.
+ * Maps a product's display fields to markup; the view passes them in.
+ */
+export function ProductCard({
+  title,
+  price,
+  media,
+  outOfStock,
+}: ProductCardProps) {
+  const { locale } = useUser();
+  const labels = useLabels();
+  // Show the first image. @todo: the rest of `media` is available here, e.g.
+  // to cross-fade to media[1] on hover.
+  const cover = media?.[0];
+  return (
+    <article className={styles.card({ framed: FRAMED })}>
+      <div className={styles.imageBox}>
+        {cover ? (
+          <img
+            className={cx(styles.image, outOfStock && styles.imageDimmed)}
+            src={cover}
+            alt={title}
+            loading="lazy"
+            draggable={false}
+          />
+        ) : (
+          <div className={styles.placeholder} />
+        )}
+        {outOfStock ? (
+          <span className={styles.oosBadge}>{labels.outOfStock}</span>
+        ) : null}
+      </div>
+
+      <div className={styles.body}>
+        <p
+          className={cx(
+            text({ style: "bodyS", weight: "medium" }),
+            styles.title,
+          )}
+        >
+          {title}
+        </p>
+        {price ? (
+          <p className={cx(text({ style: "bodyS" }), styles.price)}>
+            {formatPrice(price, locale)}
+          </p>
+        ) : null}
+        {/* @todo: extra fields. Render catalog-specific data here, e.g. from the
+            product's `attributes`: ratings, discounts, tags, badges. */}
+      </div>
+    </article>
+  );
+}
+
+/** Placeholder card shown while the tool resolves. Same footprint as the card
+ *  so the layout does not jump when data arrives. */
+export function ProductCardSkeleton() {
+  const titleLines: ReactNode[] = [];
+  for (let i = 0; i < styles.TITLE_LINES; i++) {
+    const isLast = i === styles.TITLE_LINES - 1;
+    titleLines.push(
+      <div
+        key={i}
+        className={cx(
+          styles.skeletonBox,
+          isLast ? styles.skeletonLineShort : styles.skeletonLine,
+        )}
+      />,
+    );
+  }
+  return (
+    <div className={styles.card({ framed: FRAMED })} aria-hidden="true">
+      <div className={cx(styles.skeletonBox, styles.skeletonImage)} />
+      <div className={styles.skeletonBody}>
+        {titleLines}
+        <div className={cx(styles.skeletonBox, styles.skeletonPrice)} />
+      </div>
+    </div>
+  );
+}