@tanstack/create 0.65.0 → 0.66.0

package/dist/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/dist/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/dist/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/dist/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/dist/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>
+  )
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/lib/shopify/customer-queries.ts.ejs

@@ -0,0 +1,228 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+/**
+ * GraphQL queries for the Shopify Customer Account API.
+ *
+ * The Customer Account API has its own schema, distinct from the Storefront
+ * API. We hand-type the slices we use; if the surface area grows we can wire
+ * up @shopify/customer-account-api-codegen later.
+ */
+
+export const CUSTOMER_QUERY = /* GraphQL */ `
+  query Customer {
+    customer {
+      id
+      firstName
+      lastName
+      emailAddress {
+        emailAddress
+      }
+      phoneNumber {
+        phoneNumber
+      }
+      defaultAddress {
+        id
+        firstName
+        lastName
+        address1
+        address2
+        city
+        zoneCode
+        zip
+        territoryCode
+        phoneNumber
+      }
+    }
+  }
+`
+
+export type CustomerProfile = {
+  id: string
+  firstName: string | null
+  lastName: string | null
+  emailAddress: { emailAddress: string } | null
+  phoneNumber: { phoneNumber: string } | null
+  defaultAddress: CustomerAddress | null
+}
+
+export type CustomerQueryResult = { customer: CustomerProfile }
+
+export type CustomerAddress = {
+  id: string
+  firstName: string | null
+  lastName: string | null
+  address1: string | null
+  address2: string | null
+  city: string | null
+  zoneCode: string | null
+  zip: string | null
+  territoryCode: string | null
+  phoneNumber: string | null
+}
+
+export const CUSTOMER_ADDRESSES_QUERY = /* GraphQL */ `
+  query CustomerAddresses($first: Int!) {
+    customer {
+      addresses(first: $first) {
+        nodes {
+          id
+          firstName
+          lastName
+          address1
+          address2
+          city
+          zoneCode
+          zip
+          territoryCode
+          phoneNumber
+        }
+      }
+      defaultAddress {
+        id
+      }
+    }
+  }
+`
+
+export type CustomerAddressesQueryResult = {
+  customer: {
+    addresses: { nodes: Array<CustomerAddress> }
+    defaultAddress: { id: string } | null
+  }
+}
+
+export const ORDERS_QUERY = /* GraphQL */ `
+  query CustomerOrders($first: Int!, $after: String) {
+    customer {
+      orders(first: $first, after: $after, sortKey: PROCESSED_AT, reverse: true) {
+        nodes {
+          id
+          name
+          processedAt
+          financialStatus
+          fulfillmentStatus
+          totalPrice {
+            amount
+            currencyCode
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`
+
+export type OrderListItem = {
+  id: string
+  name: string
+  processedAt: string
+  financialStatus: string | null
+  fulfillmentStatus: string | null
+  totalPrice: { amount: string; currencyCode: string }
+}
+
+export type OrdersQueryResult = {
+  customer: {
+    orders: {
+      nodes: Array<OrderListItem>
+      pageInfo: { hasNextPage: boolean; endCursor: string | null }
+    }
+  }
+}
+
+export const ORDER_QUERY = /* GraphQL */ `
+  query Order($id: ID!) {
+    order(id: $id) {
+      id
+      name
+      processedAt
+      financialStatus
+      fulfillmentStatus
+      totalPrice {
+        amount
+        currencyCode
+      }
+      subtotal {
+        amount
+        currencyCode
+      }
+      totalShipping {
+        amount
+        currencyCode
+      }
+      totalTax {
+        amount
+        currencyCode
+      }
+      shippingAddress {
+        firstName
+        lastName
+        address1
+        address2
+        city
+        zoneCode
+        zip
+        territoryCode
+      }
+      lineItems(first: 50) {
+        nodes {
+          id
+          title
+          quantity
+          variantTitle
+          price {
+            amount
+            currencyCode
+          }
+          image {
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+    }
+  }
+`
+
+export type OrderDetailLine = {
+  id: string
+  title: string
+  quantity: number
+  variantTitle: string | null
+  price: { amount: string; currencyCode: string }
+  image: {
+    url: string
+    altText: string | null
+    width: number | null
+    height: number | null
+  } | null
+}
+
+export type OrderDetail = {
+  id: string
+  name: string
+  processedAt: string
+  financialStatus: string | null
+  fulfillmentStatus: string | null
+  totalPrice: { amount: string; currencyCode: string }
+  subtotal: { amount: string; currencyCode: string } | null
+  totalShipping: { amount: string; currencyCode: string } | null
+  totalTax: { amount: string; currencyCode: string } | null
+  shippingAddress: {
+    firstName: string | null
+    lastName: string | null
+    address1: string | null
+    address2: string | null
+    city: string | null
+    zoneCode: string | null
+    zip: string | null
+    territoryCode: string | null
+  } | null
+  lineItems: { nodes: Array<OrderDetailLine> }
+}
+
+export type OrderQueryResult = { order: OrderDetail | null }