hydrogen-forge 0.1.0

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

@@ -0,0 +1,296 @@
+import {Suspense} from 'react';
+import {Await, NavLink, useAsyncValue} from 'react-router';
+import {
+  type CartViewPayload,
+  useAnalytics,
+  useOptimisticCart,
+} from '@shopify/hydrogen';
+import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
+import {useAside} from '~/components/Aside';
+
+export interface HeaderProps {
+  header: HeaderQuery;
+  cart: Promise<CartApiQueryFragment | null>;
+  isLoggedIn: Promise<boolean>;
+  publicStoreDomain: string;
+}
+
+type Viewport = 'desktop' | 'mobile';
+
+export function Header({
+  header,
+  isLoggedIn,
+  cart,
+  publicStoreDomain,
+}: HeaderProps) {
+  const {shop, menu} = header;
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-secondary-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
+      <div className="container-narrow flex h-16 items-center justify-between">
+        {/* Logo */}
+        <NavLink
+          prefetch="intent"
+          to="/"
+          className="flex items-center space-x-2 text-xl font-bold text-secondary-900 transition-colors hover:text-primary-600"
+          end
+        >
+          {shop.name}
+        </NavLink>
+
+        {/* Desktop Navigation */}
+        <Navigation
+          menu={menu}
+          viewport="desktop"
+          primaryDomainUrl={header.shop.primaryDomain.url}
+          publicStoreDomain={publicStoreDomain}
+        />
+
+        {/* Header Actions */}
+        <HeaderActions isLoggedIn={isLoggedIn} cart={cart} />
+      </div>
+    </header>
+  );
+}
+
+export function Navigation({
+  menu,
+  primaryDomainUrl,
+  viewport,
+  publicStoreDomain,
+}: {
+  menu: HeaderProps['header']['menu'];
+  primaryDomainUrl: HeaderProps['header']['shop']['primaryDomain']['url'];
+  viewport: Viewport;
+  publicStoreDomain: HeaderProps['publicStoreDomain'];
+}) {
+  const {close} = useAside();
+
+  const baseStyles =
+    viewport === 'desktop'
+      ? 'hidden md:flex items-center space-x-6'
+      : 'flex flex-col space-y-4';
+
+  const linkStyles =
+    viewport === 'desktop'
+      ? 'text-sm font-medium text-secondary-600 transition-colors hover:text-secondary-900'
+      : 'text-lg font-medium text-secondary-900 hover:text-primary-600';
+
+  const activeLinkStyles =
+    viewport === 'desktop'
+      ? 'text-sm font-medium text-secondary-900'
+      : 'text-lg font-medium text-primary-600';
+
+  return (
+    <nav className={baseStyles} role="navigation">
+      {viewport === 'mobile' && (
+        <NavLink
+          end
+          onClick={close}
+          prefetch="intent"
+          to="/"
+          className={({isActive}) => (isActive ? activeLinkStyles : linkStyles)}
+        >
+          Home
+        </NavLink>
+      )}
+      {(menu || FALLBACK_HEADER_MENU).items.map((item) => {
+        if (!item.url) return null;
+
+        // if the url is internal, we strip the domain
+        const url =
+          item.url.includes('myshopify.com') ||
+          item.url.includes(publicStoreDomain) ||
+          item.url.includes(primaryDomainUrl)
+            ? new URL(item.url).pathname
+            : item.url;
+
+        return (
+          <NavLink
+            end
+            key={item.id}
+            onClick={close}
+            prefetch="intent"
+            to={url}
+            className={({isActive}) =>
+              isActive ? activeLinkStyles : linkStyles
+            }
+          >
+            {item.title}
+          </NavLink>
+        );
+      })}
+    </nav>
+  );
+}
+
+function HeaderActions({
+  isLoggedIn,
+  cart,
+}: Pick<HeaderProps, 'isLoggedIn' | 'cart'>) {
+  return (
+    <nav className="flex items-center space-x-4" role="navigation">
+      <MobileMenuToggle />
+      <NavLink
+        prefetch="intent"
+        to="/account"
+        className="hidden text-sm font-medium text-secondary-600 transition-colors hover:text-secondary-900 sm:block"
+      >
+        <Suspense fallback="Sign in">
+          <Await resolve={isLoggedIn} errorElement="Sign in">
+            {(isLoggedIn) => (isLoggedIn ? 'Account' : 'Sign in')}
+          </Await>
+        </Suspense>
+      </NavLink>
+      <SearchToggle />
+      <CartToggle cart={cart} />
+    </nav>
+  );
+}
+
+function MobileMenuToggle() {
+  const {open} = useAside();
+  return (
+    <button
+      className="inline-flex h-10 w-10 items-center justify-center rounded-md text-secondary-600 transition-colors hover:bg-secondary-100 hover:text-secondary-900 md:hidden"
+      onClick={() => open('mobile')}
+      aria-label="Open menu"
+    >
+      <svg
+        className="h-6 w-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 6h16M4 12h16M4 18h16"
+        />
+      </svg>
+    </button>
+  );
+}
+
+function SearchToggle() {
+  const {open} = useAside();
+  return (
+    <button
+      className="inline-flex h-10 w-10 items-center justify-center rounded-md text-secondary-600 transition-colors hover:bg-secondary-100 hover:text-secondary-900"
+      onClick={() => open('search')}
+      aria-label="Search"
+    >
+      <svg
+        className="h-5 w-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+    </button>
+  );
+}
+
+function CartBadge({count}: {count: number | null}) {
+  const {open} = useAside();
+  const {publish, shop, cart, prevCart} = useAnalytics();
+
+  return (
+    <button
+      className="relative inline-flex h-10 w-10 items-center justify-center rounded-md text-secondary-600 transition-colors hover:bg-secondary-100 hover:text-secondary-900"
+      onClick={() => {
+        open('cart');
+        publish('cart_viewed', {
+          cart,
+          prevCart,
+          shop,
+          url: window.location.href || '',
+        } as CartViewPayload);
+      }}
+      aria-label={`Cart${count ? ` (${count} items)` : ''}`}
+    >
+      <svg
+        className="h-5 w-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+        />
+      </svg>
+      {count !== null && count > 0 && (
+        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs font-medium text-white">
+          {count > 99 ? '99+' : count}
+        </span>
+      )}
+    </button>
+  );
+}
+
+function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
+  return (
+    <Suspense fallback={<CartBadge count={null} />}>
+      <Await resolve={cart}>
+        <CartBanner />
+      </Await>
+    </Suspense>
+  );
+}
+
+function CartBanner() {
+  const originalCart = useAsyncValue() as CartApiQueryFragment | null;
+  const cart = useOptimisticCart(originalCart);
+  return <CartBadge count={cart?.totalQuantity ?? 0} />;
+}
+
+const FALLBACK_HEADER_MENU = {
+  id: 'gid://shopify/Menu/199655587896',
+  items: [
+    {
+      id: 'gid://shopify/MenuItem/461609500728',
+      resourceId: null,
+      tags: [],
+      title: 'Collections',
+      type: 'HTTP',
+      url: '/collections',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461609533496',
+      resourceId: null,
+      tags: [],
+      title: 'Blog',
+      type: 'HTTP',
+      url: '/blogs/journal',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461609566264',
+      resourceId: null,
+      tags: [],
+      title: 'Policies',
+      type: 'HTTP',
+      url: '/policies',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461609599032',
+      resourceId: 'gid://shopify/Page/92591030328',
+      tags: [],
+      title: 'About',
+      type: 'PAGE',
+      url: '/pages/about',
+      items: [],
+    },
+  ],
+};

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

@@ -0,0 +1,174 @@
+import {Await, Link} from 'react-router';
+import {Suspense, useId} from 'react';
+import type {
+  CartApiQueryFragment,
+  FooterQuery,
+  HeaderQuery,
+} from 'storefrontapi.generated';
+import {Aside} from '~/components/Aside';
+import {Footer} from '~/components/Footer';
+import {Header, Navigation} from '~/components/Header';
+import {CartMain} from '~/components/CartMain';
+import {
+  SEARCH_ENDPOINT,
+  SearchFormPredictive,
+} from '~/components/SearchFormPredictive';
+import {SearchResultsPredictive} from '~/components/SearchResultsPredictive';
+
+interface PageLayoutProps {
+  cart: Promise<CartApiQueryFragment | null>;
+  footer: Promise<FooterQuery | null>;
+  header: HeaderQuery;
+  isLoggedIn: Promise<boolean>;
+  publicStoreDomain: string;
+  children?: React.ReactNode;
+}
+
+export function PageLayout({
+  cart,
+  children = null,
+  footer,
+  header,
+  isLoggedIn,
+  publicStoreDomain,
+}: PageLayoutProps) {
+  return (
+    <Aside.Provider>
+      <CartAside cart={cart} />
+      <SearchAside />
+      <MobileMenuAside header={header} publicStoreDomain={publicStoreDomain} />
+      {header && (
+        <Header
+          header={header}
+          cart={cart}
+          isLoggedIn={isLoggedIn}
+          publicStoreDomain={publicStoreDomain}
+        />
+      )}
+      <main>{children}</main>
+      <Footer
+        footer={footer}
+        header={header}
+        publicStoreDomain={publicStoreDomain}
+      />
+    </Aside.Provider>
+  );
+}
+
+function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
+  return (
+    <Aside type="cart" heading="CART">
+      <Suspense fallback={<p>Loading cart ...</p>}>
+        <Await resolve={cart}>
+          {(cart) => {
+            return <CartMain cart={cart} layout="aside" />;
+          }}
+        </Await>
+      </Suspense>
+    </Aside>
+  );
+}
+
+function SearchAside() {
+  const queriesDatalistId = useId();
+  return (
+    <Aside type="search" heading="SEARCH">
+      <div className="predictive-search">
+        <br />
+        <SearchFormPredictive>
+          {({fetchResults, goToSearch, inputRef}) => (
+            <>
+              <input
+                name="q"
+                onChange={fetchResults}
+                onFocus={fetchResults}
+                placeholder="Search"
+                ref={inputRef}
+                type="search"
+                list={queriesDatalistId}
+              />
+              &nbsp;
+              <button onClick={goToSearch}>Search</button>
+            </>
+          )}
+        </SearchFormPredictive>
+
+        <SearchResultsPredictive>
+          {({items, total, term, state, closeSearch}) => {
+            const {articles, collections, pages, products, queries} = items;
+
+            if (state === 'loading' && term.current) {
+              return <div>Loading...</div>;
+            }
+
+            if (!total) {
+              return <SearchResultsPredictive.Empty term={term} />;
+            }
+
+            return (
+              <>
+                <SearchResultsPredictive.Queries
+                  queries={queries}
+                  queriesDatalistId={queriesDatalistId}
+                />
+                <SearchResultsPredictive.Products
+                  products={products}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                <SearchResultsPredictive.Collections
+                  collections={collections}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                <SearchResultsPredictive.Pages
+                  pages={pages}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                <SearchResultsPredictive.Articles
+                  articles={articles}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                {term.current && total ? (
+                  <Link
+                    onClick={closeSearch}
+                    to={`${SEARCH_ENDPOINT}?q=${term.current}`}
+                  >
+                    <p>
+                      View all results for <q>{term.current}</q>
+                      &nbsp; →
+                    </p>
+                  </Link>
+                ) : null}
+              </>
+            );
+          }}
+        </SearchResultsPredictive>
+      </div>
+    </Aside>
+  );
+}
+
+function MobileMenuAside({
+  header,
+  publicStoreDomain,
+}: {
+  header: PageLayoutProps['header'];
+  publicStoreDomain: PageLayoutProps['publicStoreDomain'];
+}) {
+  return (
+    header.menu &&
+    header.shop.primaryDomain?.url && (
+      <Aside type="mobile" heading="MENU">
+        <Navigation
+          menu={header.menu}
+          viewport="mobile"
+          primaryDomainUrl={header.shop.primaryDomain.url}
+          publicStoreDomain={publicStoreDomain}
+        />
+      </Aside>
+    )
+  );
+}

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {Pagination} from '@shopify/hydrogen';
+
+/**
+ * <PaginatedResourceSection > is a component that encapsulate how the previous and next behaviors throughout your application.
+ */
+export function PaginatedResourceSection<NodesType>({
+  connection,
+  children,
+  resourcesClassName,
+}: {
+  connection: React.ComponentProps<typeof Pagination<NodesType>>['connection'];
+  children: React.FunctionComponent<{node: NodesType; index: number}>;
+  resourcesClassName?: string;
+}) {
+  return (
+    <Pagination connection={connection}>
+      {({nodes, isLoading, PreviousLink, NextLink}) => {
+        const resourcesMarkup = nodes.map((node, index) =>
+          children({node, index}),
+        );
+
+        return (
+          <div>
+            <PreviousLink>
+              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+            </PreviousLink>
+            {resourcesClassName ? (
+              <div className={resourcesClassName}>{resourcesMarkup}</div>
+            ) : (
+              resourcesMarkup
+            )}
+            <NextLink>
+              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+            </NextLink>
+          </div>
+        );
+      }}
+    </Pagination>
+  );
+}

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

@@ -0,0 +1,151 @@
+import {Link} from 'react-router';
+import {Image, Money} from '@shopify/hydrogen';
+import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
+import {useVariantUrl} from '~/lib/variants';
+
+export interface ProductCardProps {
+  product: {
+    id: string;
+    title: string;
+    handle: string;
+    featuredImage?: {
+      id?: string;
+      url: string;
+      altText?: string | null;
+      width?: number;
+      height?: number;
+    } | null;
+    priceRange: {
+      minVariantPrice: MoneyV2;
+      maxVariantPrice: MoneyV2;
+    };
+    compareAtPriceRange?: {
+      minVariantPrice: MoneyV2;
+    };
+    availableForSale?: boolean;
+    vendor?: string;
+  };
+  loading?: 'eager' | 'lazy';
+  showVendor?: boolean;
+  aspectRatio?: '1/1' | '4/5' | '3/4' | '16/9';
+}
+
+export function ProductCard({
+  product,
+  loading = 'lazy',
+  showVendor = false,
+  aspectRatio = '1/1',
+}: ProductCardProps) {
+  const variantUrl = useVariantUrl(product.handle);
+  const image = product.featuredImage;
+  const isOnSale =
+    product.compareAtPriceRange?.minVariantPrice?.amount &&
+    parseFloat(product.compareAtPriceRange.minVariantPrice.amount) >
+      parseFloat(product.priceRange.minVariantPrice.amount);
+  const isSoldOut = product.availableForSale === false;
+
+  return (
+    <Link
+      className="group block"
+      key={product.id}
+      prefetch="intent"
+      to={variantUrl}
+    >
+      {/* Image Container */}
+      <div className="relative aspect-square overflow-hidden rounded-lg bg-secondary-100">
+        {image ? (
+          <Image
+            alt={image.altText || product.title}
+            aspectRatio={aspectRatio}
+            data={image}
+            loading={loading}
+            sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
+            className="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <svg
+              className="h-12 w-12 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>
+        )}
+
+        {/* Badges */}
+        <div className="absolute left-2 top-2 flex flex-col gap-1">
+          {isOnSale && (
+            <span className="rounded bg-red-500 px-2 py-0.5 text-xs font-medium text-white">
+              Sale
+            </span>
+          )}
+          {isSoldOut && (
+            <span className="rounded bg-secondary-900 px-2 py-0.5 text-xs font-medium text-white">
+              Sold out
+            </span>
+          )}
+        </div>
+
+        {/* Quick Add Button (optional hover state) */}
+        <div className="absolute bottom-0 left-0 right-0 translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+          <div className="bg-white/90 p-2 backdrop-blur-sm">
+            <span className="block text-center text-sm font-medium text-secondary-900">
+              View Product
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Product Info */}
+      <div className="mt-3 space-y-1">
+        {showVendor && product.vendor && (
+          <p className="text-xs uppercase tracking-wide text-secondary-500">
+            {product.vendor}
+          </p>
+        )}
+        <h3 className="text-sm font-medium text-secondary-900 transition-colors group-hover:text-primary-600">
+          {product.title}
+        </h3>
+        <ProductCardPrice
+          price={product.priceRange.minVariantPrice}
+          compareAtPrice={product.compareAtPriceRange?.minVariantPrice}
+        />
+      </div>
+    </Link>
+  );
+}
+
+function ProductCardPrice({
+  price,
+  compareAtPrice,
+}: {
+  price: MoneyV2;
+  compareAtPrice?: MoneyV2;
+}) {
+  const isOnSale =
+    compareAtPrice?.amount &&
+    parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className={`text-sm font-medium ${isOnSale ? 'text-red-600' : 'text-secondary-900'}`}
+      >
+        <Money data={price} />
+      </span>
+      {isOnSale && compareAtPrice && (
+        <span className="text-sm text-secondary-500 line-through">
+          <Money data={compareAtPrice} />
+        </span>
+      )}
+    </div>
+  );
+}