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

package/templates/ecom/src/components/chip.tsx

@@ -0,0 +1,41 @@
+import * as styles from "./chip.css";
+
+type ChipProps = {
+  label: string;
+  selected?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+  // Optional swatch image (e.g. one per color); omit for a plain text chip.
+  media?: string;
+};
+
+/**
+ * One option value as a selectable pill. Rendered as a `radio` inside the
+ * variant picker's `radiogroup`; the picker owns selection state and passes
+ * `selected`/`disabled` computed from the sparse variant list.
+ */
+export function Chip({
+  label,
+  selected,
+  disabled,
+  onSelect,
+  media,
+}: ChipProps) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: custom radio; a styled button carries the swatch and disabled state a native radio cannot, inside the picker radiogroup.
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected ?? false}
+      aria-disabled={disabled ?? false}
+      disabled={disabled}
+      className={styles.chip({ selected, disabled })}
+      onClick={disabled ? undefined : onSelect}
+    >
+      {media ? (
+        <img className={styles.swatch} src={media} alt="" draggable={false} />
+      ) : null}
+      {label}
+    </button>
+  );
+}

package/templates/ecom/src/components/empty-state.stories.tsx

@@ -0,0 +1,3 @@
+import { EmptyState } from "./empty-state";
+
+export const NoResults = () => <EmptyState message="No products to show." />;

package/templates/ecom/src/components/empty-state.tsx

@@ -0,0 +1,12 @@
+import { sprinkles, text } from "../design/tokens";
+
+/** Centered message shown when there is nothing to render (e.g. no results). */
+export function EmptyState({ message }: { message: string }) {
+  return (
+    <div
+      className={sprinkles({ p: "l", textAlign: "center", color: "subtle" })}
+    >
+      <p className={text({ style: "bodyM" })}>{message}</p>
+    </div>
+  );
+}

package/templates/ecom/src/components/expandable-text.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// @todo: collapsed height before "read more" appears. Tune to your type scale.
+const COLLAPSED_MAX_HEIGHT = "6em";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: primitives.space["4xs"],
+});
+
+// `clamp` caps the height (applied whenever collapsed, so overflow can be
+// measured); `fade` masks the last line to a soft cutoff instead of an ellipsis
+// and is applied only when the text actually overflows (never on short copy).
+export const body = recipe({
+  base: {
+    color: colors.content.intense,
+    whiteSpace: "pre-line", // preserve paragraph breaks from the source
+  },
+  variants: {
+    clamp: {
+      true: { maxHeight: COLLAPSED_MAX_HEIGHT, overflow: "hidden" },
+      false: {},
+    },
+    fade: {
+      true: {
+        maskImage:
+          "linear-gradient(to bottom, black 0%, black 55%, transparent 100%)",
+        WebkitMaskImage:
+          "linear-gradient(to bottom, black 0%, black 55%, transparent 100%)",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { clamp: false, fade: false },
+});
+
+export const toggle = style({
+  padding: 0,
+  border: "none",
+  background: "none",
+  color: colors.common.accent,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.s,
+  cursor: "pointer",
+});

package/templates/ecom/src/components/expandable-text.stories.tsx

@@ -0,0 +1,20 @@
+import { ExpandableText } from "./expandable-text";
+
+const frame = { maxWidth: 360 };
+
+const LONG =
+  "A relaxed-fit jacket in water-repellent cotton.\n\nDropped shoulders, a two-way zip, and ribbed cuffs. Fully lined, with two zip pockets at the front and one inside. Designed to layer over a knit through the cooler months, and cut long enough to sit past the hip.";
+
+export const Long = () => (
+  <div style={frame}>
+    <ExpandableText>{LONG}</ExpandableText>
+  </div>
+);
+
+export const Short = () => (
+  <div style={frame}>
+    <ExpandableText>
+      A short description that never needs a toggle.
+    </ExpandableText>
+  </div>
+);

package/templates/ecom/src/components/expandable-text.tsx

@@ -0,0 +1,53 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { text } from "../design/tokens";
+import { useLabels } from "../i18n";
+import { cx } from "../lib/cx";
+import * as styles from "./expandable-text.css";
+
+/**
+ * Clamps long copy to a few lines with a "read more" toggle. Truncation is
+ * measured, not assumed: the toggle only appears when the text actually
+ * overflows the collapsed height, so short copy shows no button.
+ */
+export function ExpandableText({ children }: { children: string }) {
+  const labels = useLabels();
+  const bodyRef = useRef<HTMLParagraphElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+
+  const collapsed = !expanded;
+
+  // Measure against the collapsed height (the clamp is applied whenever
+  // collapsed, so scrollHeight vs clientHeight is meaningful). Re-run when the
+  // text changes (e.g. the client switches variant) so the toggle tracks it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: children re-triggers the measure, it is not read in the body.
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (el && collapsed) {
+      setOverflows(el.scrollHeight > el.clientHeight + 1);
+    }
+  }, [children, collapsed]);
+
+  return (
+    <div className={styles.container}>
+      <p
+        ref={bodyRef}
+        className={cx(
+          text({ style: "bodyS" }),
+          styles.body({ clamp: collapsed, fade: collapsed && overflows }),
+        )}
+      >
+        {children}
+      </p>
+      {overflows ? (
+        <button
+          type="button"
+          className={styles.toggle}
+          onClick={() => setExpanded((v) => !v)}
+        >
+          {expanded ? labels.readLess : labels.readMore}
+        </button>
+      ) : null}
+    </div>
+  );
+}

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