create-skybridge 0.0.0-dev.08be486 → 0.0.0-dev.09043e8

package/templates/ecom/src/catalog/index.ts

@@ -0,0 +1,19 @@
+// The catalog: the app's single data seam. Both tools read products through
+// these two functions, and nothing else in the app touches a backend.
+//
+// @todo: pick your provider. Ship one of the modules next to this file, or add
+// your own (same two exports, same types) and re-export it here:
+//   ./mock.js      placeholder catalog, no backend needed (default)
+//   ./shopify.js   Shopify Storefront API, set the SHOPIFY_* vars in .env
+//
+// Writing your own: `search(input)` returns a `SearchResult`, `getProducts(ids)`
+// resolves ids in the requested order (that is the display order, so resolve by
+// id, never by catalog order). Both map your backend's rows into `Product`s, and
+// how you group them depends on your catalog:
+//   - simple products: one `Product` with a single variant, `options: []`
+//   - grouped: one `Product` per product, `card` = union of its variants
+//   - one card per variant: `card` = that variant
+// Either way `variants` holds ALL variants the source returns for the product;
+// the detail view reads them so the client can switch variant. Order `options`
+// with the imagery-driving axis first (see `Product`: order is semantic).
+export { getProducts, search } from "./mock.js";

package/templates/ecom/src/catalog/mock.ts

@@ -0,0 +1,134 @@
+import type { SearchInput } from "../tools/search-products.js";
+import type { Product, SearchResult, Spec } from "../types.js";
+
+// Placeholder catalog provider, so both tools answer before a backend exists.
+// Images are inline SVG placeholders, so no CSP domain is needed.
+// @todo: delete this module once you point `./index.js` at a real provider.
+
+function shot(fill: string): 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%3C/svg%3E`;
+}
+
+const JACKET_SPECS: Spec[] = [
+  { label: "Material", value: "Water-repellent cotton" },
+  { label: "Fit", value: "Relaxed" },
+];
+
+// Deliberately long, to exercise the detail page's scroll and "read more".
+const JACKET_DESCRIPTION = "Relaxed-fit jacket in water-repellent cotton.";
+
+const MOCK_PRODUCTS: Product[] = [
+  {
+    id: "field-jacket",
+    options: [
+      {
+        id: "color",
+        label: "Color",
+        values: [
+          { id: "black", label: "Black", media: shot("2b2b2b") },
+          { id: "sand", label: "Sand", media: shot("d8c7a8") },
+        ],
+      },
+    ],
+    variants: [
+      {
+        id: "fj-black",
+        selection: { color: "black" },
+        title: "Field jacket — Black",
+        description: JACKET_DESCRIPTION,
+        price: { amount: 229, currency: "EUR" },
+        media: [shot("2b2b2b")],
+        url: "https://example.com/field-jacket-black",
+        specs: JACKET_SPECS,
+      },
+      {
+        id: "fj-sand",
+        selection: { color: "sand" },
+        title: "Field jacket — Sand",
+        description: JACKET_DESCRIPTION,
+        price: { amount: 249, currency: "EUR" },
+        media: [shot("d8c7a8")],
+        url: "https://example.com/field-jacket-sand",
+        specs: JACKET_SPECS,
+      },
+    ],
+    card: {
+      title: "Field jacket",
+      description: "Relaxed-fit jacket in water-repellent cotton.",
+      price: { amount: 229, currency: "EUR" },
+      media: [shot("2b2b2b")],
+      specs: JACKET_SPECS,
+    },
+  },
+  {
+    id: "canvas-tote",
+    options: [],
+    variants: [
+      {
+        id: "canvas-tote",
+        selection: {},
+        title: "Canvas tote",
+        description: "Sturdy everyday tote with an inner pocket.",
+        price: { amount: 39, currency: "EUR" },
+        media: [shot("e1e1e1")],
+        url: "https://example.com/canvas-tote",
+        specs: [{ label: "Material", value: "Cotton canvas" }],
+      },
+    ],
+    card: {
+      title: "Canvas tote",
+      description: "Sturdy everyday tote with an inner pocket.",
+      price: { amount: 39, currency: "EUR" },
+      media: [shot("e1e1e1")],
+      specs: [{ label: "Material", value: "Cotton canvas" }],
+    },
+  },
+  {
+    id: "wool-beanie",
+    options: [],
+    variants: [
+      {
+        id: "wool-beanie",
+        selection: {},
+        title: "Wool beanie",
+        description: "Ribbed merino beanie with a folded brim.",
+        price: { amount: 45, currency: "EUR" },
+        media: [shot("6b7f9e")],
+        url: "https://example.com/wool-beanie",
+        outOfStock: true,
+        specs: [{ label: "Material", value: "Merino wool" }],
+      },
+    ],
+    card: {
+      title: "Wool beanie",
+      description: "Ribbed merino beanie with a folded brim.",
+      price: { amount: 45, currency: "EUR" },
+      media: [shot("6b7f9e")],
+      outOfStock: true,
+      specs: [{ label: "Material", value: "Merino wool" }],
+    },
+  },
+];
+
+// Ignores the input: every mock product matches every query.
+export async function search(_input: SearchInput): Promise<SearchResult> {
+  return {
+    products: MOCK_PRODUCTS,
+    pages: { current: 1, total: 1 },
+    totalHits: MOCK_PRODUCTS.length,
+  };
+}
+
+// Requested order is the display order, so resolve by id, not catalog order.
+export async function getProducts(ids: string[]): Promise<Product[]> {
+  const products: Product[] = [];
+  for (const id of ids) {
+    for (const product of MOCK_PRODUCTS) {
+      if (product.id === id) {
+        products.push(product);
+        break;
+      }
+    }
+  }
+  return products;
+}

package/templates/ecom/src/catalog/shopify.ts

@@ -0,0 +1,264 @@
+import type { SearchInput } from "../tools/search-products.js";
+import type {
+  Option,
+  Price,
+  Product,
+  SearchResult,
+  Spec,
+  Variant,
+} from "../types.js";
+
+// Shopify Storefront API provider. To use it:
+//   1. re-export this module from `./index.js` instead of `./mock.js`
+//   2. set SHOPIFY_STORE_DOMAIN and SHOPIFY_STOREFRONT_TOKEN in .env
+//   3. uncomment the `csp` block in `src/tools/render-carousel.ts` with
+//      `https://cdn.shopify.com` and your store domain
+//
+// Product ids are Shopify handles, not GIDs: stable, readable, and far cheaper
+// in model context than `gid://shopify/Product/8123456789`.
+
+const API_VERSION = "2026-07";
+const PAGE_SIZE = 20;
+
+// Only the fields this app renders. Options are derived from the variants'
+// `selectedOptions`, so the product-level `options` field is not queried.
+const PRODUCT_FIELDS = `
+fragment ProductFields on Product {
+  handle
+  title
+  description
+  vendor
+  productType
+  onlineStoreUrl
+  availableForSale
+  priceRange { minVariantPrice { amount currencyCode } }
+  images(first: 10) { nodes { url } }
+  variants(first: 100) {
+    nodes {
+      id
+      title
+      availableForSale
+      price { amount currencyCode }
+      image { url }
+      selectedOptions { name value }
+    }
+  }
+}`;
+
+type ShopifyMoney = { amount: string; currencyCode: string };
+
+type ShopifyProduct = {
+  handle: string;
+  title: string;
+  description: string;
+  vendor: string;
+  productType: string;
+  onlineStoreUrl: string | null;
+  availableForSale: boolean;
+  priceRange: { minVariantPrice: ShopifyMoney };
+  images: { nodes: { url: string }[] };
+  variants: {
+    nodes: {
+      id: string;
+      title: string;
+      availableForSale: boolean;
+      price: ShopifyMoney;
+      image: { url: string } | null;
+      selectedOptions: { name: string; value: string }[];
+    }[];
+  };
+};
+
+async function storefront(query: string, variables: Record<string, unknown>) {
+  const domain = process.env.SHOPIFY_STORE_DOMAIN;
+  const token = process.env.SHOPIFY_STOREFRONT_TOKEN;
+  if (!domain || !token) {
+    throw new Error(
+      "Missing SHOPIFY_STORE_DOMAIN or SHOPIFY_STOREFRONT_TOKEN in the environment.",
+    );
+  }
+
+  const response = await fetch(
+    `https://${domain}/api/${API_VERSION}/graphql.json`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Shopify-Storefront-Access-Token": token,
+      },
+      body: JSON.stringify({ query, variables }),
+    },
+  );
+  if (!response.ok) {
+    throw new Error(`Shopify ${response.status}: ${await response.text()}`);
+  }
+
+  const { data, errors } = await response.json();
+  if (errors) {
+    throw new Error(`Shopify: ${JSON.stringify(errors)}`);
+  }
+  return data;
+}
+
+function toPrice(money: ShopifyMoney): Price {
+  return { amount: Number(money.amount), currency: money.currencyCode };
+}
+
+// @todo: Shopify has no generic "specs" field. Vendor and product type are a
+// starting point; swap in your own metafields once you know their namespace.
+function toSpecs(node: ShopifyProduct): Spec[] {
+  const specs: Spec[] = [];
+  if (node.vendor) {
+    specs.push({ label: "Brand", value: node.vendor });
+  }
+  if (node.productType) {
+    specs.push({ label: "Type", value: node.productType });
+  }
+  return specs;
+}
+
+function toProduct(node: ShopifyProduct): Product {
+  const specs = toSpecs(node);
+  const images: string[] = [];
+  for (const image of node.images.nodes) {
+    images.push(image.url);
+  }
+
+  // Walk the variants once, building both the variants and the axes they vary
+  // on. Shopify option names are used as-is for ids, so a variant's
+  // `selectedOptions` maps straight onto `selection`.
+  const options: Option[] = [];
+  const variants: Variant[] = [];
+  for (const variant of node.variants.nodes) {
+    const selection: Record<string, string> = {};
+    for (const selected of variant.selectedOptions) {
+      selection[selected.name] = selected.value;
+
+      let option: Option | undefined;
+      for (const candidate of options) {
+        if (candidate.id === selected.name) {
+          option = candidate;
+          break;
+        }
+      }
+      if (!option) {
+        option = { id: selected.name, label: selected.name, values: [] };
+        options.push(option);
+      }
+
+      let known = false;
+      for (const value of option.values) {
+        if (value.id === selected.value) {
+          known = true;
+          break;
+        }
+      }
+      if (!known) {
+        option.values.push({
+          id: selected.value,
+          label: selected.value,
+          media: variant.image?.url,
+        });
+      }
+    }
+
+    variants.push({
+      id: variant.id,
+      selection,
+      title: variant.title === "Default Title" ? node.title : variant.title,
+      description: node.description,
+      price: toPrice(variant.price),
+      media: variant.image ? [variant.image.url] : images,
+      url: node.onlineStoreUrl ?? undefined,
+      outOfStock: !variant.availableForSale,
+      specs,
+    });
+  }
+
+  // A single-variant product has no axes to pick from.
+  if (variants.length < 2) {
+    options.length = 0;
+  }
+
+  return {
+    id: node.handle,
+    options,
+    variants,
+    card: {
+      title: node.title,
+      description: node.description,
+      price: toPrice(node.priceRange.minVariantPrice),
+      media: images,
+      url: node.onlineStoreUrl ?? undefined,
+      outOfStock: !node.availableForSale,
+      specs,
+    },
+  };
+}
+
+export async function search({
+  keyword,
+  sort,
+  priceRange,
+}: SearchInput): Promise<SearchResult> {
+  // Shopify's search DSL: a bare term matches title, vendor, type and tags;
+  // extra clauses narrow it. @todo: add your own (`tag:`, `product_type:`…).
+  let query = keyword;
+  if (priceRange) {
+    const [min, max] = priceRange.split("-");
+    query += ` variants.price:>=${min} variants.price:<=${max}`;
+  }
+
+  const data = await storefront(
+    `${PRODUCT_FIELDS}
+    query Search($query: String!, $sortKey: ProductSortKeys!, $reverse: Boolean!, $first: Int!) {
+      products(query: $query, sortKey: $sortKey, reverse: $reverse, first: $first) {
+        nodes { ...ProductFields }
+      }
+    }`,
+    {
+      query,
+      sortKey: sort ? "PRICE" : "RELEVANCE",
+      reverse: sort === "price-desc",
+      first: PAGE_SIZE,
+    },
+  );
+
+  const products: Product[] = [];
+  for (const node of data.products.nodes) {
+    products.push(toProduct(node));
+  }
+  // Storefront paginates by cursor and reports no total, so both counts are
+  // left out rather than faked.
+  return { products };
+}
+
+export async function getProducts(ids: string[]): Promise<Product[]> {
+  // One aliased lookup per handle, so the response comes back in the order the
+  // model asked for.
+  const declarations: string[] = [];
+  const fields: string[] = [];
+  const variables: Record<string, string> = {};
+  for (let index = 0; index < ids.length; index++) {
+    declarations.push(`$h${index}: String!`);
+    fields.push(`p${index}: product(handle: $h${index}) { ...ProductFields }`);
+    variables[`h${index}`] = ids[index];
+  }
+
+  const data = await storefront(
+    `${PRODUCT_FIELDS}
+    query Products(${declarations.join(", ")}) {
+      ${fields.join("\n      ")}
+    }`,
+    variables,
+  );
+
+  const products: Product[] = [];
+  for (let index = 0; index < ids.length; index++) {
+    const node = data[`p${index}`];
+    if (node) {
+      products.push(toProduct(node));
+    }
+  }
+  return products;
+}

package/templates/ecom/src/components/chip.css.ts

@@ -0,0 +1,63 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// A selectable pill used for option values (sizes, colors…). `selected`,
+// `outOfStock` and `nonExistent` are driven by the variant picker from the
+// sparse variant list.
+// @todo: tune the chip to your brand (radius, borders, selected treatment).
+export const chip = recipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: primitives.space["4xs"],
+    minHeight: "44px", // touch target
+    padding: `${primitives.space["4xs"]} ${primitives.space["3xs"]}`,
+    borderRadius: primitives.radius.m,
+    border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+    backgroundColor: colors.surface.extraLight,
+    color: colors.content.intense,
+    fontFamily: primitives.font.family.primary,
+    fontSize: primitives.font.size.s,
+    cursor: "pointer",
+    transition: "border-color 150ms ease",
+    "@media": {
+      "(prefers-reduced-motion: reduce)": { transition: "none" },
+    },
+  },
+  variants: {
+    selected: {
+      true: {
+        borderColor: colors.common.accent,
+        borderWidth: primitives.stroke.medium,
+      },
+      false: {},
+    },
+    outOfStock: {
+      // Struck but still clickable; the buy CTA carries the state.
+      true: {
+        color: colors.content.subtle,
+        textDecoration: "line-through",
+      },
+      false: {},
+    },
+    nonExistent: {
+      // Faded and non-interactive, distinct from sold out above.
+      true: {
+        opacity: 0.35,
+        cursor: "default",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { selected: false, outOfStock: false, nonExistent: false },
+});
+
+// Small color/material swatch shown before the label on image chips.
+export const swatch = style({
+  width: "20px",
+  height: "20px",
+  borderRadius: primitives.radius.full,
+  objectFit: "cover",
+  display: "block",
+});

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

@@ -0,0 +1,27 @@
+import { Chip } from "./chip";
+
+const SWATCH =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%233b6cf0'/%3E%3C/svg%3E";
+
+const row = {
+  display: "flex",
+  gap: 8,
+  flexWrap: "wrap" as const,
+  maxWidth: 320,
+};
+
+export const States = () => (
+  <div style={row}>
+    <Chip label="M" />
+    <Chip label="L" selected />
+    <Chip label="XL" outOfStock /> {/* exists, sold out: clickable */}
+    <Chip label="XXL" nonExistent /> {/* combination does not exist */}
+  </div>
+);
+
+export const WithSwatch = () => (
+  <div style={row}>
+    <Chip label="Blue" media={SWATCH} selected />
+    <Chip label="Black" media={SWATCH} />
+  </div>
+);

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

@@ -0,0 +1,49 @@
+import * as styles from "./chip.css";
+
+type ChipProps = {
+  label: string;
+  selected?: boolean;
+  // Exists but sold out: struck-through and greyed, still clickable
+  outOfStock?: boolean;
+  // The combination does not exist at all (hole in the variant matrix):
+  // faded and non-interactive
+  nonExistent?: 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`/`outOfStock`/`nonExistent` computed from the sparse variant list.
+ * An out-of-stock chip stays operable: aria-disabled announces the state to
+ * assistive tech without blocking activation. A nonexistent chip is natively
+ * disabled: the combination cannot be composed.
+ */
+export function Chip({
+  label,
+  selected,
+  outOfStock,
+  nonExistent,
+  onSelect,
+  media,
+}: ChipProps) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: custom radio; a styled button carries the swatch and availability states a native radio cannot, inside the picker radiogroup.
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected ?? false}
+      aria-disabled={outOfStock ?? false}
+      disabled={nonExistent ?? false}
+      className={styles.chip({ selected, outOfStock, nonExistent })}
+      onClick={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>
+);