Initial commit

editor/components/commerce/collection.editor.tsx

@@ -0,0 +1,95 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { FolderOpen } from "lucide-react";
+import type { ShopifyCollection } from "@reacteditor/field-shopify";
+import { useCollectionProducts } from "~/editor/hooks/use-shopify-collections";
+import { ProductCard } from "./product-card";
+import { Typography } from "~/editor/theme/Typography";
+
+export type CollectionProps = {
+  collection: ShopifyCollection | null;
+  showDescription: "yes" | "no";
+};
+
+function CollectionView({
+  collection: selected,
+  showDescription,
+}: CollectionProps) {
+  const handle = selected?.handle ?? "";
+  const { collection, loading } = useCollectionProducts(handle, { first: 24 });
+
+  if (!selected) {
+    return (
+      <section className="py-20">
+        <div className="container mx-auto max-w-7xl px-6">
+          <div className="mx-auto max-w-md rounded-md border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
+            Pick a collection to render this page.
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // The hook flattens collection.products.edges into a plain Product[].
+  const products = (collection?.products as any[] | undefined) ?? [];
+  const description = collection?.description ?? selected.description;
+
+  return (
+    <section className="bg-background pb-24 pt-12 md:pt-20">
+      <div className="container mx-auto max-w-7xl px-6">
+        <header className="mx-auto mb-14 max-w-2xl text-center">
+          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+            Collection
+          </p>
+          <Typography variant="h1">
+            {collection?.title ?? selected.title}
+          </Typography>
+          {showDescription === "yes" && description ? (
+            <Typography variant="subtitle1" className="mt-4">
+              {description}
+            </Typography>
+          ) : null}
+        </header>
+
+        <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
+          {loading
+            ? Array.from({ length: 8 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-[4/5] w-full animate-pulse rounded-md bg-muted"
+                />
+              ))
+            : products.map((p: any) => <ProductCard key={p.id} product={p} />)}
+        </div>
+
+        {!loading && products.length === 0 ? (
+          <div className="mx-auto mt-12 max-w-md text-center text-sm text-muted-foreground">
+            This collection has no products yet.
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export function createCollectionEditor(opts: {
+  collectionField: any;
+}): ComponentConfig<CollectionProps> {
+  return {
+    label: "Collection page",
+    icon: <FolderOpen size={16} />,
+    category: "commerce",
+    defaultProps: { collection: null, showDescription: "no" },
+    fields: {
+      collection: { label: "Collection", ...opts.collectionField },
+      showDescription: {
+        label: "Description",
+        type: "radio",
+        options: [
+          { label: "Hide description", value: "no" },
+          { label: "Show description", value: "yes" },
+        ],
+      },
+    },
+    render: (props) => <CollectionView {...props} />,
+  };
+}