create-skybridge 0.0.0-dev.356dbec → 0.0.0-dev.35a7b38

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>
+  );
+}

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

@@ -0,0 +1,134 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// Carousel tuning knobs. @todo: tune to your card design.
+const gap = primitives.space["2xs"]; // gap between cards
+// Cards visible at each width; the fractional part is the peek that signals the
+// row scrolls. If you change a count, adjust the gap multiplier in its
+// `--card-width` calc (full gaps visible = the whole-number part).
+const CARDS_VISIBLE = 2.5;
+const CARDS_VISIBLE_COMPACT = 1.5;
+// Below this container width, switch to the compact count.
+const COMPACT_MAX_WIDTH = "560px";
+
+// Structural wrapper (kept as a plain class so the nav-reveal globalStyle below
+// can target it). The recipe composes it as its base.
+const carouselBase = style({
+  position: "relative",
+  // Size cards against the carousel width, not the iframe viewport.
+  containerType: "inline-size",
+});
+
+// `framed: true` frames the whole carousel; the default is flush (pair it with
+// framed cards instead). Pick one of the two.
+export const carousel = recipe({
+  base: carouselBase,
+  variants: {
+    framed: {
+      // @todo: tune the outer frame to your brand. Soften the shadow in dark
+      // mode if the strip reads as a hard box against the host.
+      true: {
+        // Pad top/bottom only; the leading/trailing inset lives on the track's
+        // own `framed` variant so it scrolls away. Cards bleed to the left/right
+        // border, and `overflow: hidden` masks them to the rounded corners, so
+        // a scrolled card disappears exactly at the frame edge.
+        paddingBlock: primitives.space.xs,
+        borderRadius: primitives.radius.l,
+        border: `${primitives.stroke.thin} solid ${colors.border.thin}`,
+        backgroundColor: colors.surface.extraLight,
+        boxShadow: "0 10px 20px -20px rgba(0, 0, 0, 0.18)",
+        overflow: "hidden",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { framed: false },
+});
+
+// Kept as a plain class so the scrollbar-hiding globalStyle below can target it.
+// The recipe composes it as its base.
+const trackBase = style({
+  display: "flex",
+  gap,
+  overflowX: "auto",
+  scrollSnapType: "x mandatory",
+  scrollBehavior: "smooth",
+  scrollbarWidth: "none",
+  vars: { "--card-width": `calc((100% - 2 * ${gap}) / ${CARDS_VISIBLE})` },
+  "@container": {
+    [`(max-width: ${COMPACT_MAX_WIDTH})`]: {
+      vars: {
+        "--card-width": `calc((100% - ${gap}) / ${CARDS_VISIBLE_COMPACT})`,
+      },
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { scrollBehavior: "auto" },
+  },
+});
+
+globalStyle(`${trackBase}::-webkit-scrollbar`, { display: "none" });
+
+// `framed: true` adds an inset on both ends. Padding on the scroll track (not on
+// the frame) so it shows before the first card and after the last at rest, but
+// scrolls away in between: a card scrolled past clips at the border, not at a
+// fixed gutter. scroll-padding keeps mandatory snap from collapsing the inset.
+export const track = recipe({
+  base: trackBase,
+  variants: {
+    framed: {
+      true: {
+        paddingInline: primitives.space.xs,
+        scrollPaddingInline: primitives.space.xs,
+      },
+      false: {},
+    },
+    // Skeleton state: lock the scroll, there is nothing to scroll to yet.
+    loading: {
+      true: { overflowX: "hidden" },
+      false: {},
+    },
+  },
+  defaultVariants: { framed: false, loading: false },
+});
+
+export const cell = style({
+  flex: "0 0 var(--card-width)",
+  scrollSnapAlign: "start",
+});
+
+// Prev/next buttons: desktop only. Hidden on touch, revealed on hover/focus,
+// disabled at the scroll 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",
+  opacity: 0,
+  transition: "opacity 150ms ease",
+  selectors: {
+    "&:disabled": { opacity: 0, pointerEvents: "none" },
+  },
+  "@media": {
+    "(hover: none)": { display: "none" },
+  },
+});
+
+export const navPrev = style({ left: primitives.space["3xs"] });
+export const navNext = style({ right: primitives.space["3xs"] });
+
+// Reveal the (enabled) buttons on hover or keyboard focus within the carousel.
+globalStyle(
+  `${carouselBase}:hover ${nav}:not(:disabled), ${carouselBase}:focus-within ${nav}:not(:disabled)`,
+  { opacity: 1 },
+);

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import type { Price } from "../types.js";
+import { ProductCard, ProductCardSkeleton } from "./product-card";
+import { ProductCarousel } from "./product-carousel";
+
+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";
+
+type Sample = { title: string; price: Price; outOfStock?: boolean };
+
+const SAMPLE: Sample[] = [
+  { title: "Merino wool sweater", price: { amount: 129.9, currency: "EUR" } },
+  { title: "Oxford cotton shirt", price: { amount: 79, currency: "EUR" } },
+  { title: "Slim chino trousers", price: { amount: 89.5, currency: "EUR" } },
+  {
+    title: "Leather derby shoes",
+    price: { amount: 210, currency: "EUR" },
+    outOfStock: true,
+  },
+  { title: "Cashmere scarf", price: { amount: 145, currency: "EUR" } },
+  { title: "Quilted field jacket", price: { amount: 320, currency: "EUR" } },
+];
+
+function sampleCards(): ReactNode[] {
+  const cards: ReactNode[] = [];
+  for (let i = 0; i < SAMPLE.length; i++) {
+    const item = SAMPLE[i];
+    cards.push(
+      <ProductCard
+        key={i}
+        title={item.title}
+        price={item.price}
+        media={[IMAGE]}
+        outOfStock={item.outOfStock}
+      />,
+    );
+  }
+  return cards;
+}
+
+export const Default = () => <ProductCarousel>{sampleCards()}</ProductCarousel>;
+
+export const Loading = () => {
+  const skeletons: ReactNode[] = [];
+  for (let i = 0; i < 4; i++) {
+    skeletons.push(<ProductCardSkeleton key={i} />);
+  }
+  return <ProductCarousel loading>{skeletons}</ProductCarousel>;
+};
+
+export const FewItems = () => (
+  <ProductCarousel>
+    <ProductCard
+      title="Merino wool sweater"
+      price={{ amount: 129.9, currency: "EUR" }}
+      media={[IMAGE]}
+    />
+    <ProductCard
+      title="Oxford cotton shirt"
+      price={{ amount: 79, currency: "EUR" }}
+      media={[IMAGE]}
+    />
+  </ProductCarousel>
+);