@tanstack/create 0.64.0 → 0.66.0

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/empty-state.tsx

@@ -0,0 +1,29 @@
+import { Link } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+
+type EmptyStateProps = {
+  title: string
+  description?: string
+  cta?: { label: string; to: string }
+  children?: ReactNode
+}
+
+export function EmptyState({ title, description, cta, children }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center gap-4 rounded-2xl border border-dashed border-[var(--storefront-line)] px-6 py-16 text-center">
+      <h2 className="text-xl font-medium">{title}</h2>
+      {description && (
+        <p className="max-w-md text-[var(--storefront-fg-muted)]">{description}</p>
+      )}
+      {children}
+      {cta && (
+        <Link
+          to={cta.to}
+          className="rounded-full border border-[var(--storefront-fg)] px-5 py-2 text-sm font-medium no-underline text-[var(--storefront-fg)]"
+        >
+          {cta.label}
+        </Link>
+      )}
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/money.tsx

@@ -0,0 +1,11 @@
+import { formatMoney } from '#/lib/shopify/format'
+
+type MoneyProps = {
+  amount: string | number
+  currencyCode: string
+  className?: string
+}
+
+export function Money({ amount, currencyCode, className }: MoneyProps) {
+  return <span className={className}>{formatMoney(amount, currencyCode)}</span>
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/product-card.tsx

@@ -0,0 +1,74 @@
+import { Link } from '@tanstack/react-router'
+
+import { Money } from '#/components/shop/money'
+import { ShopImage } from '#/components/shop/shop-image'
+import type { ProductListItem } from '#/lib/shopify/queries'
+
+type ProductCardProps = {
+  product: ProductListItem
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  const minPrice = product.priceRange.minVariantPrice
+  const maxPrice = product.priceRange.maxVariantPrice
+  const compareAt = product.compareAtPriceRange.minVariantPrice
+  const onSale =
+    Number(compareAt.amount) > 0 &&
+    Number(compareAt.amount) > Number(minPrice.amount)
+  const soldOut = !product.variants.nodes.some((v) => v.availableForSale)
+
+  return (
+    <Link
+      to="/shop/products/$handle"
+      params={{ handle: product.handle }}
+      className="group flex flex-col gap-3 no-underline text-[var(--storefront-fg)]"
+    >
+      <div
+        className="relative overflow-hidden bg-[var(--storefront-line)]"
+        style={{ aspectRatio: '4 / 5', borderRadius: 'var(--storefront-radius)' }}
+      >
+        <ShopImage
+          src={product.featuredImage?.url}
+          alt={product.featuredImage?.altText ?? product.title}
+          width={600}
+          height={750}
+          sizes="(min-width: 1024px) 25vw, (min-width: 640px) 33vw, 50vw"
+          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+        />
+        {soldOut && (
+          <span className="absolute left-3 top-3 rounded-full bg-[var(--storefront-bg)]/90 px-2.5 py-1 text-xs font-medium uppercase tracking-wide">
+            Sold out
+          </span>
+        )}
+        {!soldOut && onSale && (
+          <span className="absolute left-3 top-3 rounded-full bg-[var(--storefront-accent)] px-2.5 py-1 text-xs font-medium uppercase tracking-wide text-[var(--storefront-accent-fg)]">
+            Sale
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col gap-1">
+        <h3 className="text-sm font-medium leading-snug">{product.title}</h3>
+        <p className="text-sm text-[var(--storefront-fg-muted)]">
+          {onSale && (
+            <span className="mr-2 line-through">
+              <Money
+                amount={compareAt.amount}
+                currencyCode={compareAt.currencyCode}
+              />
+            </span>
+          )}
+          <Money amount={minPrice.amount} currencyCode={minPrice.currencyCode} />
+          {Number(maxPrice.amount) > Number(minPrice.amount) && (
+            <>
+              {' – '}
+              <Money
+                amount={maxPrice.amount}
+                currencyCode={maxPrice.currencyCode}
+              />
+            </>
+          )}
+        </p>
+      </div>
+    </Link>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/product-grid.tsx

@@ -0,0 +1,24 @@
+import { ProductCard } from '#/components/shop/product-card'
+import type { ProductListItem } from '#/lib/shopify/queries'
+
+type ProductGridProps = {
+  products: ReadonlyArray<ProductListItem>
+}
+
+export function ProductGrid({ products }: ProductGridProps) {
+  if (products.length === 0) {
+    return (
+      <p className="py-16 text-center text-[var(--storefront-fg-muted)]">
+        No products yet.
+      </p>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 lg:grid-cols-4">
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/shop-image.tsx

@@ -0,0 +1,57 @@
+import { shopifyImageUrl } from '#/lib/shopify/format'
+
+type ShopImageProps = {
+  src: string | null | undefined
+  alt: string | null | undefined
+  width: number
+  height?: number
+  className?: string
+  sizes?: string
+  loading?: 'eager' | 'lazy'
+}
+
+export function ShopImage({
+  src,
+  alt,
+  width,
+  height,
+  className,
+  sizes,
+  loading = 'lazy',
+}: ShopImageProps) {
+  if (!src) {
+    return (
+      <div
+        aria-hidden
+        className={className}
+        style={{
+          background: 'var(--storefront-line)',
+          aspectRatio: height ? `${width} / ${height}` : '1',
+        }}
+      />
+    )
+  }
+
+  const transformed = shopifyImageUrl(src, { width, height, format: 'webp' })
+  const srcSet = [1, 2]
+    .map((dpr) => {
+      const w = width * dpr
+      const h = height ? height * dpr : undefined
+      return `${shopifyImageUrl(src, { width: w, height: h, format: 'webp' })} ${dpr}x`
+    })
+    .join(', ')
+
+  return (
+    <img
+      src={transformed}
+      srcSet={srcSet}
+      sizes={sizes}
+      alt={alt ?? ''}
+      width={width}
+      height={height}
+      loading={loading}
+      decoding="async"
+      className={className}
+    />
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/shop.css

@@ -0,0 +1,58 @@
+/*
+ * Shop theme tokens. Override these six variables in your own CSS to re-theme
+ * the storefront without touching components.
+ */
+:root {
+  --storefront-bg: #ffffff;
+  --storefront-fg: #0a0a0a;
+  --storefront-fg-muted: #525252;
+  --storefront-line: #e5e5e5;
+  --storefront-accent: #0a0a0a;
+  --storefront-accent-fg: #ffffff;
+  --storefront-radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --storefront-bg: #0a0a0a;
+    --storefront-fg: #fafafa;
+    --storefront-fg-muted: #a3a3a3;
+    --storefront-line: #262626;
+    --storefront-accent: #fafafa;
+    --storefront-accent-fg: #0a0a0a;
+  }
+}
+
+:root[data-theme='dark'] {
+  --storefront-bg: #0a0a0a;
+  --storefront-fg: #fafafa;
+  --storefront-fg-muted: #a3a3a3;
+  --storefront-line: #262626;
+  --storefront-accent: #fafafa;
+  --storefront-accent-fg: #0a0a0a;
+}
+
+.shop-root {
+  background: var(--storefront-bg);
+  color: var(--storefront-fg);
+}
+
+.shop-prose {
+  max-width: 65ch;
+  line-height: 1.7;
+}
+.shop-prose h1,
+.shop-prose h2,
+.shop-prose h3 {
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin-top: 1.5em;
+}
+.shop-prose p {
+  margin: 0.75em 0;
+}
+.shop-prose a {
+  color: var(--storefront-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/variant-selector.tsx

@@ -0,0 +1,79 @@
+import type { ProductDetail, ProductDetailVariant } from '#/lib/shopify/queries'
+
+type VariantSelectorProps = {
+  product: ProductDetail
+  selectedOptions: Record<string, string>
+  onChange: (next: Record<string, string>) => void
+}
+
+export function VariantSelector({
+  product,
+  selectedOptions,
+  onChange,
+}: VariantSelectorProps) {
+  if (product.options.length === 1 && product.options[0]?.values.length === 1) {
+    return null
+  }
+
+  return (
+    <div className="space-y-5">
+      {product.options.map((option) => (
+        <div key={option.id}>
+          <div className="mb-2 flex items-baseline justify-between">
+            <h3 className="text-sm font-medium">{option.name}</h3>
+            <span className="text-sm text-[var(--storefront-fg-muted)]">
+              {selectedOptions[option.name]}
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {option.values.map((value) => {
+              const selected = selectedOptions[option.name] === value
+              const wouldBe = { ...selectedOptions, [option.name]: value }
+              const matchingVariant = findVariant(product.variants.nodes, wouldBe)
+              const available = matchingVariant?.availableForSale ?? false
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => onChange(wouldBe)}
+                  disabled={!available && !selected}
+                  className={[
+                    'min-w-[3rem] rounded-full border px-4 py-2 text-sm transition',
+                    selected
+                      ? 'border-[var(--storefront-accent)] bg-[var(--storefront-accent)] text-[var(--storefront-accent-fg)]'
+                      : 'border-[var(--storefront-line)] hover:border-[var(--storefront-accent)]',
+                    !available && !selected
+                      ? 'cursor-not-allowed opacity-40 line-through'
+                      : '',
+                  ].join(' ')}
+                >
+                  {value}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function findVariant(
+  variants: ReadonlyArray<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  return variants.find((variant) =>
+    variant.selectedOptions.every(
+      (opt) => selected[opt.name] === opt.value,
+    ),
+  )
+}
+
+export function defaultSelectedOptions(
+  product: ProductDetail,
+): Record<string, string> {
+  const firstAvailable = product.variants.nodes.find((v) => v.availableForSale)
+  const source = firstAvailable ?? product.variants.nodes[0]
+  if (!source) return {}
+  return Object.fromEntries(source.selectedOptions.map((o) => [o.name, o.value]))
+}

package/src/frameworks/react/add-ons/shopify/assets/src/hooks/use-cart.ts

@@ -0,0 +1,276 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  Image as StorefrontImage,
+  MoneyV2,
+} from '@shopify/hydrogen-react/storefront-api-types'
+
+import {
+  addToCart,
+  applyDiscountCode,
+  getCart,
+  removeCartLine,
+  removeDiscountCode,
+  updateCartLine,
+} from '#/server/shopify/cart.functions'
+import type { CartDetail, CartLineDetail } from '#/lib/shopify/queries'
+
+/**
+ * Shared React Query key for the current user's cart.
+ *
+ * The cart ID lives in an httpOnly cookie on the server, so the client never
+ * needs to know it — a single cache key is enough. Route loaders can prefetch
+ * into this key so the first render already has the data.
+ */
+export const CART_QUERY_KEY = ['shopify', 'cart'] as const
+
+const CART_MUTATION_KEY = ['shopify', 'cart', 'mutate'] as const
+
+/**
+ * Explicit in-flight counter. We don't rely on `queryClient.isMutating()`
+ * because its semantics at `onSettled` time vary across React Query versions.
+ * A module-level counter is unambiguous: increment in onMutate, decrement in
+ * onSettled, invalidate when the count hits zero.
+ *
+ * @see https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query
+ */
+let cartMutationsInFlight = 0
+
+function trackMutationStart() {
+  cartMutationsInFlight++
+}
+
+function settleWhenIdle(qc: ReturnType<typeof useQueryClient>) {
+  cartMutationsInFlight = Math.max(0, cartMutationsInFlight - 1)
+  if (cartMutationsInFlight === 0) {
+    return qc.invalidateQueries({ queryKey: CART_QUERY_KEY })
+  }
+}
+
+export function useCart() {
+  const query = useQuery<CartDetail | null>({
+    queryKey: CART_QUERY_KEY,
+    queryFn: () => getCart(),
+    staleTime: 30_000,
+  })
+
+  return {
+    cart: query.data ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+    refetch: query.refetch,
+    totalQuantity: query.data?.totalQuantity ?? 0,
+  }
+}
+
+type AddToCartLineSnapshot = {
+  productTitle: string
+  productHandle: string
+  variantTitle: string
+  price: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  image: Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null
+  selectedOptions: Array<{ name: string; value: string }>
+}
+
+type AddToCartInput = {
+  variantId: string
+  quantity?: number
+  /** Product snapshot for optimistic line rendering. */
+  line?: AddToCartLineSnapshot
+}
+
+export function useAddToCart() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: AddToCartInput) =>
+      addToCart({
+        data: { variantId: input.variantId, quantity: input.quantity ?? 1 },
+      }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      const quantity = input.quantity ?? 1
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+
+      if (previous && input.line) {
+        const snap = input.line
+        const existingIdx = previous.lines.nodes.findIndex(
+          (l) => l.merchandise.id === input.variantId,
+        )
+
+        let nextLines: CartDetail['lines']['nodes']
+        if (existingIdx >= 0) {
+          nextLines = previous.lines.nodes.map((l, i) =>
+            i === existingIdx ? { ...l, quantity: l.quantity + quantity } : l,
+          )
+        } else {
+          const lineTotal = String(Number(snap.price.amount) * quantity)
+          nextLines = [
+            {
+              id: `optimistic-${Date.now()}`,
+              quantity,
+              merchandise: {
+                id: input.variantId,
+                title: snap.variantTitle,
+                availableForSale: true,
+                selectedOptions: snap.selectedOptions,
+                price: snap.price,
+                image: snap.image,
+                product: {
+                  handle: snap.productHandle,
+                  title: snap.productTitle,
+                },
+              },
+              cost: {
+                totalAmount: {
+                  amount: lineTotal,
+                  currencyCode: snap.price.currencyCode,
+                },
+              },
+            } satisfies CartLineDetail,
+            ...previous.lines.nodes,
+          ]
+        }
+
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextLines.reduce((s, l) => s + l.quantity, 0),
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      } else if (previous) {
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: (previous.totalQuantity ?? 0) + quantity,
+        })
+      }
+
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSuccess: (cart) => {
+      qc.setQueryData(CART_QUERY_KEY, cart)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useUpdateCartLine() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { lineId: string; quantity: number }) =>
+      updateCartLine({ data: input }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        const nextLines = previous.lines.nodes.map((line) =>
+          line.id === input.lineId
+            ? { ...line, quantity: input.quantity }
+            : line,
+        )
+        const nextQty = nextLines.reduce((sum, line) => sum + line.quantity, 0)
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextQty,
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      }
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useRemoveCartLine() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { lineId: string }) => removeCartLine({ data: input }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        const nextLines = previous.lines.nodes.filter(
+          (line) => line.id !== input.lineId,
+        )
+        const nextQty = nextLines.reduce((sum, line) => sum + line.quantity, 0)
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextQty,
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      }
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useApplyDiscountCode() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { code: string }) =>
+      applyDiscountCode({ data: { code: input.code } }),
+    onMutate: async () => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+    },
+    onSuccess: (cart) => {
+      qc.setQueryData(CART_QUERY_KEY, cart)
+    },
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useRemoveDiscountCode() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: () => removeDiscountCode(),
+    onMutate: async () => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          discountCodes: [],
+        })
+      }
+      return { previous }
+    },
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+    onSettled: () => settleWhenIdle(qc),
+  })
+}

package/src/frameworks/react/add-ons/shopify/assets/src/hooks/use-customer.ts.ejs

@@ -0,0 +1,22 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { useQuery } from '@tanstack/react-query'
+
+import { getCustomer } from '#/server/shopify/customer.functions'
+import type { CustomerProfile } from '#/lib/shopify/customer-queries'
+
+export const CUSTOMER_QUERY_KEY = ['shopify', 'customer'] as const
+
+export function useCustomer() {
+  const query = useQuery<CustomerProfile | null>({
+    queryKey: CUSTOMER_QUERY_KEY,
+    queryFn: () => getCustomer(),
+    staleTime: 60_000,
+  })
+  return {
+    customer: query.data ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+  }
+}

package/src/frameworks/react/add-ons/shopify/assets/src/integrations/shopify/header-cart.tsx

@@ -0,0 +1,37 @@
+import { Link } from '@tanstack/react-router'
+
+import { useCart } from '#/hooks/use-cart'
+
+export default function ShopifyHeaderCart() {
+  const { totalQuantity } = useCart()
+  return (
+    <Link
+      to="/shop/cart"
+      className="relative inline-flex items-center justify-center rounded-xl p-2 transition hover:bg-[var(--storefront-line)]/40"
+      aria-label={`Cart, ${totalQuantity} item${totalQuantity === 1 ? '' : 's'}`}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="22"
+        height="22"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M3 4h2.5l1.5 12.5a1.5 1.5 0 0 0 1.5 1.3h9.4a1.5 1.5 0 0 0 1.5-1.2L21 7H6"
+        />
+        <circle cx="9" cy="20.5" r="1.2" />
+        <circle cx="18" cy="20.5" r="1.2" />
+      </svg>
+      {totalQuantity > 0 && (
+        <span className="absolute -right-0.5 -top-0.5 inline-flex min-w-[1.1rem] items-center justify-center rounded-full bg-[var(--storefront-accent,#0a0a0a)] px-1 text-[10px] font-semibold leading-[1.1rem] text-[var(--storefront-accent-fg,#fff)]">
+          {totalQuantity}
+        </span>
+      )}
+    </Link>
+  )
+}