@wix/agent-skills 1.18.2 → 1.19.1

package/skills/wix-headless-fast/references/storefront/app/components/storefront/ShopView.tsx

@@ -1,66 +0,0 @@
-// The full shop surface: live category filter bar + product grid, styled from the @theme
-// tokens. Mount as-is (Astro: one island with server-fetched initial data; SPA: no props).
-import { useShop } from "../../hooks/storefront/useShop";
-import type { Category, ProductSummary } from "../../wix/storefront/types";
-import ProductGrid, { type ProductGridProps } from "./ProductGrid";
-
-export interface ShopViewProps {
-  /** Server-fetched data (Astro/Next SSR) — omit in a SPA and it fetches client-side. */
-  initialProducts?: ProductSummary[];
-  initialCategories?: Category[];
-  emptyMessage?: string;
-  productHref?: ProductGridProps["productHref"];
-  LinkComponent?: ProductGridProps["LinkComponent"];
-  CardComponent?: ProductGridProps["CardComponent"];
-}
-
-const pill = (active: boolean) =>
-  `rounded-full border px-4 py-1.5 text-sm font-medium transition-colors ${
-    active
-      ? "border-primary bg-primary text-primary-foreground"
-      : "border-border text-foreground hover:bg-secondary"
-  }`;
-
-export default function ShopView({
-  initialProducts,
-  initialCategories,
-  emptyMessage,
-  productHref,
-  LinkComponent,
-  CardComponent,
-}: ShopViewProps) {
-  const { products, categories, activeCategoryId, setActiveCategoryId, loading, error } = useShop({
-    initialProducts,
-    initialCategories,
-  });
-
-  return (
-    <div>
-      {categories.length > 1 && (
-        <div className="mb-8 flex flex-wrap gap-2" role="group" aria-label="Categories">
-          <button type="button" className={pill(activeCategoryId === null)} onClick={() => setActiveCategoryId(null)}>
-            All
-          </button>
-          {categories.map((c) => (
-            <button
-              key={c.id}
-              type="button"
-              className={pill(activeCategoryId === c.id)}
-              onClick={() => setActiveCategoryId(c.id)}
-            >
-              {c.name}
-            </button>
-          ))}
-        </div>
-      )}
-      {error && <p className="mb-4 text-sm text-red-600">{error}</p>}
-      <ProductGrid
-        products={loading ? null : products}
-        emptyMessage={emptyMessage}
-        productHref={productHref}
-        LinkComponent={LinkComponent}
-        CardComponent={CardComponent}
-      />
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/VariantPicker.tsx

@@ -1,103 +0,0 @@
-// Option/modifier selector — wire as-is on the PDP (color options render as swatches, text
-// options as pills, modifiers as pills or a text input). Styled from the @theme tokens.
-import type { ProductModifier } from "../../wix/storefront/types";
-import type { OptionGroupView } from "../../hooks/storefront/useProductDetail";
-
-export interface VariantPickerProps {
-  optionGroups: OptionGroupView[];
-  selectOption: (optionName: string, choiceName: string) => void;
-  modifiers?: ProductModifier[];
-  modifierValues?: Record<string, string>;
-  setModifier?: (key: string, value: string) => void;
-}
-
-const chip = (selected: boolean) =>
-  `rounded-full border px-4 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40 disabled:line-through ${
-    selected
-      ? "border-primary bg-primary text-primary-foreground"
-      : "border-border text-foreground hover:bg-secondary"
-  }`;
-
-export default function VariantPicker({
-  optionGroups,
-  selectOption,
-  modifiers = [],
-  modifierValues = {},
-  setModifier,
-}: VariantPickerProps) {
-  return (
-    <div>
-      {optionGroups.map((group) => (
-        <div className="mb-5" key={group.id || group.name}>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {group.name}
-          </p>
-          <div className="flex flex-wrap items-center gap-2">
-            {group.choices.map((choice) =>
-              group.isColor && choice.colorCode ? (
-                <button
-                  key={choice.choiceId || choice.name}
-                  type="button"
-                  style={{ background: choice.colorCode }}
-                  title={choice.name}
-                  aria-label={`${group.name}: ${choice.name}`}
-                  aria-pressed={choice.selected}
-                  disabled={!choice.inStock}
-                  onClick={() => selectOption(group.name, choice.name)}
-                  className={`h-8 w-8 rounded-full border transition-shadow disabled:cursor-not-allowed disabled:opacity-35 ${
-                    choice.selected
-                      ? "border-primary ring-2 ring-primary ring-offset-2 ring-offset-background"
-                      : "border-border"
-                  }`}
-                />
-              ) : (
-                <button
-                  key={choice.choiceId || choice.name}
-                  type="button"
-                  aria-pressed={choice.selected}
-                  disabled={!choice.inStock}
-                  onClick={() => selectOption(group.name, choice.name)}
-                  className={chip(choice.selected)}
-                >
-                  {choice.name}
-                </button>
-              ),
-            )}
-          </div>
-        </div>
-      ))}
-
-      {modifiers.map((m) => (
-        <div className="mb-5" key={m.key}>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {m.name}
-            {m.mandatory ? " *" : ""}
-          </p>
-          {m.type === "text" ? (
-            <input
-              type="text"
-              value={modifierValues[m.key] ?? ""}
-              onChange={(e) => setModifier?.(m.key, e.target.value)}
-              aria-label={m.name}
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-shadow focus:ring-2 focus:ring-primary"
-            />
-          ) : (
-            <div className="flex flex-wrap gap-2">
-              {m.choices.map((c) => (
-                <button
-                  key={c.key}
-                  type="button"
-                  aria-pressed={modifierValues[m.key] === c.key}
-                  onClick={() => setModifier?.(m.key, c.key)}
-                  className={chip(modifierValues[m.key] === c.key)}
-                >
-                  {c.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app-astro/pages/products/[slug].astro

@@ -1,56 +0,0 @@
----
-// Product detail page — wire as-is; theme via SiteLayout's tokens.
-//
-// This is a Wix ITEM PAGE: the wixMetadata export + <SEO.Tags> below are what let the site
-// owner edit this page's title/description/OG in the dashboard, and register the route in
-// the sitemap. Keep all three SEO pieces when editing this file.
-import SiteLayout from "../../layouts/SiteLayout.astro";
-import ProductDetailView from "../../components/storefront/ProductDetailView";
-import { fetchProductBySlug } from "../../wix/storefront/catalog";
-import { WIX_APPS } from "@wix/essentials";
-import { SEO } from "@wix/seo/components";
-import { loadSEOTagsServiceConfig } from "@wix/seo/services";
-import { seoTags } from "@wix/seo";
-
-export const wixMetadata = {
-  appDefId: WIX_APPS.checkoutAndOrders.id,
-  pageIdentifier: WIX_APPS.checkoutAndOrders.productPageMetadata.pageIdentifier,
-  identifiers: {
-    slug: WIX_APPS.checkoutAndOrders.productPageMetadata.identifiers.handle,
-  },
-};
-
-const slug = Astro.params.slug!;
-
-// Behind Wix's proxy the request URL is the internal one — the real public page URL
-// arrives on x-wix-forwarded-url. The SEO service needs the public URL.
-const forwardedUrl = Astro.request.headers.get("x-wix-forwarded-url");
-const pageUrl =
-  forwardedUrl && URL.canParse(forwardedUrl) && /^https?:$/.test(new URL(forwardedUrl).protocol)
-    ? forwardedUrl
-    : Astro.url.href;
-
-let product = null;
-let seoTagsServiceConfig = null;
-try {
-  [product, seoTagsServiceConfig] = await Promise.all([
-    fetchProductBySlug(slug),
-    loadSEOTagsServiceConfig({
-      pageUrl,
-      itemType: seoTags.ItemType.STORES_PRODUCT,
-      itemData: { slug },
-    }),
-  ]);
-} catch {
-  // Guarded: an unhandled SSR throw truncates the response mid-stream.
-}
-
-if (!product) {
-  return new Response(null, { status: 404 });
-}
----
-
-<SiteLayout title={product.name}>
-  <SEO.Tags seoTagsServiceConfig={seoTagsServiceConfig} slot="seo-tags" />
-  <ProductDetailView client:load initial={product} />
-</SiteLayout>

package/skills/wix-headless-fast/references/storefront/app-astro/pages/shop.astro

@@ -1,23 +0,0 @@
----
-// Shop listing — products and categories are fetched SERVER-SIDE (SEO) and handed to the
-// island as serialized DTO props; category switches then filter live on the client.
-// Wire as-is; theme via SiteLayout's tokens.
-import SiteLayout from "../layouts/SiteLayout.astro";
-import ShopView from "../components/storefront/ShopView";
-import { fetchProducts, fetchCategories } from "../wix/storefront/catalog";
-import type { Category, ProductSummary } from "../wix/storefront/types";
-
-let products: ProductSummary[] = [];
-let categories: Category[] = [];
-try {
-  [products, categories] = await Promise.all([fetchProducts(), fetchCategories()]);
-} catch {
-  // An unguarded SSR throw truncates the response mid-stream; the island renders the
-  // shipped empty state instead.
-}
----
-
-<SiteLayout title="Shop">
-  <h1 class="mb-8 text-2xl font-semibold tracking-tight">Shop</h1>
-  <ShopView client:load initialProducts={products} initialCategories={categories} />
-</SiteLayout>