@tanstack/create 0.65.0 → 0.67.0

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/add-to-cart-button.tsx

@@ -0,0 +1,48 @@
+import { useAddToCart } from '#/hooks/use-cart'
+import type { ProductDetail, ProductDetailVariant } from '#/lib/shopify/queries'
+
+type AddToCartButtonProps = {
+  product: ProductDetail
+  variant: ProductDetailVariant | undefined
+  quantity?: number
+}
+
+export function AddToCartButton({
+  product,
+  variant,
+  quantity = 1,
+}: AddToCartButtonProps) {
+  const { mutate, isPending } = useAddToCart()
+  const disabled = !variant || !variant.availableForSale || isPending
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => {
+        if (!variant) return
+        mutate({
+          variantId: variant.id,
+          quantity,
+          line: {
+            productTitle: product.title,
+            productHandle: product.handle,
+            variantTitle: variant.title,
+            price: variant.price,
+            image: variant.image ?? product.images.nodes[0] ?? null,
+            selectedOptions: variant.selectedOptions,
+          },
+        })
+      }}
+      className="w-full rounded-full bg-[var(--storefront-accent)] px-6 py-3.5 text-sm font-medium text-[var(--storefront-accent-fg)] transition disabled:cursor-not-allowed disabled:opacity-50 hover:opacity-90"
+    >
+      {!variant
+        ? 'Select options'
+        : !variant.availableForSale
+          ? 'Sold out'
+          : isPending
+            ? 'Adding…'
+            : 'Add to cart'}
+    </button>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/components/shop/cart-line-item.tsx

@@ -0,0 +1,94 @@
+import { Link } from '@tanstack/react-router'
+
+import { Money } from '#/components/shop/money'
+import { ShopImage } from '#/components/shop/shop-image'
+import { useRemoveCartLine, useUpdateCartLine } from '#/hooks/use-cart'
+import type { CartLineDetail } from '#/lib/shopify/queries'
+
+type CartLineItemProps = {
+  line: CartLineDetail
+}
+
+export function CartLineItem({ line }: CartLineItemProps) {
+  const update = useUpdateCartLine()
+  const remove = useRemoveCartLine()
+  const merch = line.merchandise
+
+  return (
+    <li className="flex gap-4 border-b border-[var(--storefront-line)] py-6">
+      <Link
+        to="/shop/products/$handle"
+        params={{ handle: merch.product.handle }}
+        className="flex-shrink-0"
+      >
+        <ShopImage
+          src={merch.image?.url}
+          alt={merch.image?.altText ?? merch.product.title}
+          width={120}
+          height={150}
+          className="h-[150px] w-[120px] rounded-md object-cover"
+        />
+      </Link>
+      <div className="flex flex-1 flex-col gap-2">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <Link
+              to="/shop/products/$handle"
+              params={{ handle: merch.product.handle }}
+              className="text-base font-medium no-underline text-[var(--storefront-fg)]"
+            >
+              {merch.product.title}
+            </Link>
+            {merch.title && merch.title !== 'Default Title' && (
+              <p className="text-sm text-[var(--storefront-fg-muted)]">
+                {merch.selectedOptions.map((o) => o.value).join(' · ')}
+              </p>
+            )}
+          </div>
+          <Money
+            amount={line.cost.totalAmount.amount}
+            currencyCode={line.cost.totalAmount.currencyCode}
+            className="text-base font-medium"
+          />
+        </div>
+        <div className="mt-auto flex items-center justify-between gap-4">
+          <div className="inline-flex items-center rounded-full border border-[var(--storefront-line)]">
+            <button
+              type="button"
+              aria-label="Decrease quantity"
+              disabled={update.isPending || line.quantity <= 1}
+              onClick={() =>
+                update.mutate({ lineId: line.id, quantity: line.quantity - 1 })
+              }
+              className="px-3 py-1.5 text-base disabled:opacity-40"
+            >
+              −
+            </button>
+            <span className="min-w-[2rem] text-center text-sm">
+              {line.quantity}
+            </span>
+            <button
+              type="button"
+              aria-label="Increase quantity"
+              disabled={update.isPending}
+              onClick={() =>
+                update.mutate({ lineId: line.id, quantity: line.quantity + 1 })
+              }
+              className="px-3 py-1.5 text-base disabled:opacity-40"
+            >
+              +
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={() => remove.mutate({ lineId: line.id })}
+            disabled={remove.isPending}
+            className="text-sm text-[var(--storefront-fg-muted)] underline underline-offset-4 hover:text-[var(--storefront-fg)] disabled:opacity-40"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </li>
+  )
+}

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

@@ -0,0 +1,111 @@
+import { useState } from 'react'
+
+import { Money } from '#/components/shop/money'
+import {
+  useApplyDiscountCode,
+  useRemoveDiscountCode,
+} from '#/hooks/use-cart'
+import type { CartDetail } from '#/lib/shopify/queries'
+
+type CartSummaryProps = {
+  cart: CartDetail
+}
+
+export function CartSummary({ cart }: CartSummaryProps) {
+  const [code, setCode] = useState('')
+  const apply = useApplyDiscountCode()
+  const remove = useRemoveDiscountCode()
+  const appliedCode = cart.discountCodes.find((c) => c.applicable)
+
+  return (
+    <aside className="flex flex-col gap-4 rounded-2xl border border-[var(--storefront-line)] p-6">
+      <h2 className="text-lg font-medium">Order summary</h2>
+
+      <div className="flex justify-between text-sm">
+        <span>Subtotal</span>
+        <Money
+          amount={cart.cost.subtotalAmount.amount}
+          currencyCode={cart.cost.subtotalAmount.currencyCode}
+        />
+      </div>
+      {cart.cost.totalTaxAmount && Number(cart.cost.totalTaxAmount.amount) > 0 && (
+        <div className="flex justify-between text-sm text-[var(--storefront-fg-muted)]">
+          <span>Estimated tax</span>
+          <Money
+            amount={cart.cost.totalTaxAmount.amount}
+            currencyCode={cart.cost.totalTaxAmount.currencyCode}
+          />
+        </div>
+      )}
+      <p className="text-sm text-[var(--storefront-fg-muted)]">
+        Shipping calculated at checkout.
+      </p>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          if (code.trim()) {
+            apply.mutate(
+              { code: code.trim() },
+              { onSuccess: () => setCode('') },
+            )
+          }
+        }}
+        className="flex flex-col gap-2"
+      >
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="Discount code"
+            className="min-w-0 flex-1 rounded-full border border-[var(--storefront-line)] bg-transparent px-4 py-2 text-sm focus:border-[var(--storefront-accent)] focus:outline-none"
+          />
+          <button
+            type="submit"
+            disabled={apply.isPending || !code.trim()}
+            className="rounded-full border border-[var(--storefront-line)] px-4 py-2 text-sm font-medium hover:border-[var(--storefront-accent)] disabled:opacity-40"
+          >
+            Apply
+          </button>
+        </div>
+        {apply.error && (
+          <p className="text-xs text-red-600">{(apply.error as Error).message}</p>
+        )}
+        {appliedCode && (
+          <div className="flex items-center justify-between rounded-full bg-[var(--storefront-line)]/40 px-4 py-2 text-xs">
+            <span>
+              Applied: <strong>{appliedCode.code}</strong>
+            </span>
+            <button
+              type="button"
+              onClick={() => remove.mutate()}
+              disabled={remove.isPending}
+              className="underline underline-offset-2 disabled:opacity-40"
+            >
+              Remove
+            </button>
+          </div>
+        )}
+      </form>
+
+      <div className="flex justify-between border-t border-[var(--storefront-line)] pt-4 text-base font-medium">
+        <span>Total</span>
+        <Money
+          amount={cart.cost.totalAmount.amount}
+          currencyCode={cart.cost.totalAmount.currencyCode}
+        />
+      </div>
+
+      <a
+        href={cart.checkoutUrl}
+        className="block w-full rounded-full bg-[var(--storefront-accent)] px-6 py-3.5 text-center text-sm font-medium text-[var(--storefront-accent-fg)] no-underline transition hover:opacity-90"
+      >
+        Checkout
+      </a>
+      <p className="text-center text-xs text-[var(--storefront-fg-muted)]">
+        Secure checkout powered by Shopify
+      </p>
+    </aside>
+  )
+}

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]))
+}