hydrogen-forge 0.1.0

package/templates/starter/app/components/ProductForm.tsx

@@ -0,0 +1,156 @@
+import {Link, useNavigate} from 'react-router';
+import {type MappedProductOptions} from '@shopify/hydrogen';
+import type {
+  Maybe,
+  ProductOptionValueSwatch,
+} from '@shopify/hydrogen/storefront-api-types';
+import {AddToCartButton} from './AddToCartButton';
+import {useAside} from './Aside';
+import type {ProductFragment} from 'storefrontapi.generated';
+
+export function ProductForm({
+  productOptions,
+  selectedVariant,
+}: {
+  productOptions: MappedProductOptions[];
+  selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
+}) {
+  const navigate = useNavigate();
+  const {open} = useAside();
+
+  return (
+    <div className="space-y-6">
+      {/* Product Options */}
+      {productOptions.map((option) => {
+        // If there is only a single value in the option values, don't display the option
+        if (option.optionValues.length === 1) return null;
+
+        return (
+          <div key={option.name} className="space-y-3">
+            <h5 className="text-sm font-medium text-secondary-900">
+              {option.name}
+            </h5>
+            <div className="flex flex-wrap gap-2">
+              {option.optionValues.map((value) => {
+                const {
+                  name,
+                  handle,
+                  variantUriQuery,
+                  selected,
+                  available,
+                  exists,
+                  isDifferentProduct,
+                  swatch,
+                } = value;
+
+                const baseClasses =
+                  'relative flex min-w-[3rem] items-center justify-center rounded-md border px-3 py-2 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2';
+
+                const stateClasses = selected
+                  ? 'border-primary-600 bg-primary-50 text-primary-700'
+                  : available
+                    ? 'border-secondary-300 bg-white text-secondary-900 hover:border-secondary-400'
+                    : 'border-secondary-200 bg-secondary-50 text-secondary-400 cursor-not-allowed';
+
+                if (isDifferentProduct) {
+                  return (
+                    <Link
+                      key={option.name + name}
+                      className={`${baseClasses} ${stateClasses}`}
+                      prefetch="intent"
+                      preventScrollReset
+                      replace
+                      to={`/products/${handle}?${variantUriQuery}`}
+                    >
+                      <ProductOptionSwatch swatch={swatch} name={name} />
+                      {!available && (
+                        <span className="absolute inset-0 flex items-center justify-center">
+                          <span className="h-px w-full rotate-[-45deg] bg-secondary-400" />
+                        </span>
+                      )}
+                    </Link>
+                  );
+                }
+
+                return (
+                  <button
+                    key={option.name + name}
+                    type="button"
+                    className={`${baseClasses} ${stateClasses}`}
+                    disabled={!exists}
+                    onClick={() => {
+                      if (!selected && exists) {
+                        void navigate(`?${variantUriQuery}`, {
+                          replace: true,
+                          preventScrollReset: true,
+                        });
+                      }
+                    }}
+                  >
+                    <ProductOptionSwatch swatch={swatch} name={name} />
+                    {!available && exists && (
+                      <span className="absolute inset-0 flex items-center justify-center">
+                        <span className="h-px w-full rotate-[-45deg] bg-secondary-400" />
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Add to Cart */}
+      <div className="space-y-3 pt-2">
+        <AddToCartButton
+          disabled={!selectedVariant || !selectedVariant.availableForSale}
+          onClick={() => {
+            open('cart');
+          }}
+          lines={
+            selectedVariant
+              ? [
+                  {
+                    merchandiseId: selectedVariant.id,
+                    quantity: 1,
+                    selectedVariant,
+                  },
+                ]
+              : []
+          }
+        >
+          {selectedVariant?.availableForSale ? 'Add to Cart' : 'Sold Out'}
+        </AddToCartButton>
+      </div>
+    </div>
+  );
+}
+
+function ProductOptionSwatch({
+  swatch,
+  name,
+}: {
+  swatch?: Maybe<ProductOptionValueSwatch> | undefined;
+  name: string;
+}) {
+  const image = swatch?.image?.previewImage?.url;
+  const color = swatch?.color;
+
+  if (!image && !color) {
+    return <span>{name}</span>;
+  }
+
+  return (
+    <span
+      aria-label={name}
+      className="block h-6 w-6 rounded-full border border-secondary-300 shadow-sm"
+      style={{
+        backgroundColor: color || 'transparent',
+        backgroundImage: image ? `url(${image})` : undefined,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    />
+  );
+}

package/templates/starter/app/components/ProductGallery.tsx

@@ -0,0 +1,164 @@
+import {useState} from 'react';
+import {Image} from '@shopify/hydrogen';
+
+export interface ProductGalleryProps {
+  images: Array<{
+    id?: string;
+    url: string;
+    altText?: string | null;
+    width?: number;
+    height?: number;
+  }>;
+  selectedVariantImage?: {
+    id?: string;
+    url: string;
+    altText?: string | null;
+    width?: number;
+    height?: number;
+  } | null;
+}
+
+export function ProductGallery({
+  images,
+  selectedVariantImage,
+}: ProductGalleryProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // If there's a selected variant image, find its index or use it as the main image
+  const allImages = selectedVariantImage
+    ? [
+        selectedVariantImage,
+        ...images.filter((img) => img.id !== selectedVariantImage.id),
+      ]
+    : images;
+
+  const mainImage = allImages[selectedIndex] || allImages[0];
+  const hasThumbnails = allImages.length > 1;
+
+  if (!allImages.length) {
+    return (
+      <div className="aspect-square w-full rounded-lg bg-secondary-100">
+        <div className="flex h-full w-full items-center justify-center">
+          <svg
+            className="h-16 w-16 text-secondary-300"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1}
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Main Image */}
+      <div className="relative aspect-square overflow-hidden rounded-lg bg-secondary-100">
+        {mainImage && (
+          <Image
+            alt={mainImage.altText || 'Product image'}
+            aspectRatio="1/1"
+            data={mainImage}
+            sizes="(min-width: 1024px) 50vw, 100vw"
+            className="h-full w-full object-cover object-center"
+          />
+        )}
+
+        {/* Navigation Arrows */}
+        {hasThumbnails && (
+          <>
+            <button
+              type="button"
+              className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-white/80 p-2 shadow-md backdrop-blur-sm transition-all hover:bg-white disabled:opacity-50"
+              onClick={() =>
+                setSelectedIndex((prev) =>
+                  prev === 0 ? allImages.length - 1 : prev - 1,
+                )
+              }
+              aria-label="Previous image"
+            >
+              <svg
+                className="h-5 w-5 text-secondary-900"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-white/80 p-2 shadow-md backdrop-blur-sm transition-all hover:bg-white disabled:opacity-50"
+              onClick={() =>
+                setSelectedIndex((prev) =>
+                  prev === allImages.length - 1 ? 0 : prev + 1,
+                )
+              }
+              aria-label="Next image"
+            >
+              <svg
+                className="h-5 w-5 text-secondary-900"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </>
+        )}
+
+        {/* Image Counter */}
+        {hasThumbnails && (
+          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white backdrop-blur-sm">
+            {selectedIndex + 1} / {allImages.length}
+          </div>
+        )}
+      </div>
+
+      {/* Thumbnails */}
+      {hasThumbnails && (
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {allImages.map((image, index) => (
+            <button
+              key={image.id || index}
+              type="button"
+              className={`relative aspect-square w-16 flex-shrink-0 overflow-hidden rounded-md transition-all ${
+                index === selectedIndex
+                  ? 'ring-2 ring-primary-600 ring-offset-2'
+                  : 'opacity-70 hover:opacity-100'
+              }`}
+              onClick={() => setSelectedIndex(index)}
+              aria-label={`View image ${index + 1}`}
+            >
+              <Image
+                alt={image.altText || `Product thumbnail ${index + 1}`}
+                aspectRatio="1/1"
+                data={image}
+                sizes="64px"
+                className="h-full w-full object-cover object-center"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/starter/app/components/ProductGrid.tsx

@@ -0,0 +1,64 @@
+import {ProductCard, type ProductCardProps} from './ProductCard';
+
+export interface ProductGridProps {
+  products: ProductCardProps['product'][];
+  columns?: 2 | 3 | 4;
+  loading?: 'eager' | 'lazy';
+  showVendor?: boolean;
+}
+
+export function ProductGrid({
+  products,
+  columns = 4,
+  loading = 'lazy',
+  showVendor = false,
+}: ProductGridProps) {
+  const gridCols = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+  };
+
+  if (!products || products.length === 0) {
+    return (
+      <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-dashed border-secondary-300 bg-secondary-50">
+        <p className="text-secondary-500">No products found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`grid gap-4 sm:gap-6 ${gridCols[columns]}`}>
+      {products.map((product, index) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          loading={index < 4 ? 'eager' : loading}
+          showVendor={showVendor}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function ProductGridSkeleton({columns = 4}: {columns?: 2 | 3 | 4}) {
+  const gridCols = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+  };
+
+  return (
+    <div className={`grid gap-4 sm:gap-6 ${gridCols[columns]}`}>
+      {Array.from({length: columns * 2}).map((_, index) => (
+        <div key={index} className="animate-pulse">
+          <div className="aspect-square rounded-lg bg-secondary-200" />
+          <div className="mt-3 space-y-2">
+            <div className="h-4 w-3/4 rounded bg-secondary-200" />
+            <div className="h-4 w-1/2 rounded bg-secondary-200" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/starter/app/components/ProductImage.tsx

@@ -0,0 +1,23 @@
+import type {ProductVariantFragment} from 'storefrontapi.generated';
+import {Image} from '@shopify/hydrogen';
+
+export function ProductImage({
+  image,
+}: {
+  image: ProductVariantFragment['image'];
+}) {
+  if (!image) {
+    return <div className="product-image" />;
+  }
+  return (
+    <div className="product-image">
+      <Image
+        alt={image.altText || 'Product Image'}
+        aspectRatio="1/1"
+        data={image}
+        key={image.id}
+        sizes="(min-width: 45em) 50vw, 100vw"
+      />
+    </div>
+  );
+}

package/templates/starter/app/components/ProductItem.tsx

@@ -0,0 +1,44 @@
+import {Link} from 'react-router';
+import {Image, Money} from '@shopify/hydrogen';
+import type {
+  ProductItemFragment,
+  CollectionItemFragment,
+  RecommendedProductFragment,
+} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/lib/variants';
+
+export function ProductItem({
+  product,
+  loading,
+}: {
+  product:
+    | CollectionItemFragment
+    | ProductItemFragment
+    | RecommendedProductFragment;
+  loading?: 'eager' | 'lazy';
+}) {
+  const variantUrl = useVariantUrl(product.handle);
+  const image = product.featuredImage;
+  return (
+    <Link
+      className="product-item"
+      key={product.id}
+      prefetch="intent"
+      to={variantUrl}
+    >
+      {image && (
+        <Image
+          alt={image.altText || product.title}
+          aspectRatio="1/1"
+          data={image}
+          loading={loading}
+          sizes="(min-width: 45em) 400px, 100vw"
+        />
+      )}
+      <h4>{product.title}</h4>
+      <small>
+        <Money data={product.priceRange.minVariantPrice} />
+      </small>
+    </Link>
+  );
+}

package/templates/starter/app/components/ProductPrice.tsx

@@ -0,0 +1,97 @@
+import {Money} from '@shopify/hydrogen';
+import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
+
+export interface ProductPriceProps {
+  price?: MoneyV2;
+  compareAtPrice?: MoneyV2 | null;
+  size?: 'sm' | 'md' | 'lg';
+  layout?: 'inline' | 'stacked';
+}
+
+export function ProductPrice({
+  price,
+  compareAtPrice,
+  size = 'md',
+  layout = 'inline',
+}: ProductPriceProps) {
+  const isOnSale =
+    compareAtPrice?.amount &&
+    price?.amount &&
+    parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+
+  const sizeClasses = {
+    sm: 'text-sm',
+    md: 'text-lg',
+    lg: 'text-2xl',
+  };
+
+  const containerClasses =
+    layout === 'inline' ? 'flex items-center gap-2' : 'flex flex-col gap-1';
+
+  if (!price) {
+    return (
+      <span className={`${sizeClasses[size]} text-secondary-500`}>&nbsp;</span>
+    );
+  }
+
+  return (
+    <div className={containerClasses}>
+      {isOnSale ? (
+        <>
+          <span className={`${sizeClasses[size]} font-semibold text-red-600`}>
+            <Money data={price} />
+          </span>
+          {compareAtPrice && (
+            <span
+              className={`${size === 'lg' ? 'text-lg' : 'text-sm'} text-secondary-500 line-through`}
+            >
+              <Money data={compareAtPrice} />
+            </span>
+          )}
+          <SaleBadge
+            price={price}
+            compareAtPrice={compareAtPrice}
+            size={size}
+          />
+        </>
+      ) : (
+        <span
+          className={`${sizeClasses[size]} font-semibold text-secondary-900`}
+        >
+          <Money data={price} />
+        </span>
+      )}
+    </div>
+  );
+}
+
+function SaleBadge({
+  price,
+  compareAtPrice,
+  size,
+}: {
+  price: MoneyV2;
+  compareAtPrice: MoneyV2;
+  size: 'sm' | 'md' | 'lg';
+}) {
+  const savings = parseFloat(compareAtPrice.amount) - parseFloat(price.amount);
+  const percentOff = Math.round(
+    (savings / parseFloat(compareAtPrice.amount)) * 100,
+  );
+
+  if (percentOff <= 0) return null;
+
+  const badgeSizeClasses = {
+    sm: 'text-xs px-1.5 py-0.5',
+    md: 'text-xs px-2 py-0.5',
+    lg: 'text-sm px-2 py-1',
+  };
+
+  return (
+    <span
+      className={`${badgeSizeClasses[size]} rounded bg-red-100 font-medium text-red-700`}
+    >
+      Save {percentOff}%
+    </span>
+  );
+}