@shopify/create-hydrogen 1.0.0-alpha.23 → 1.0.4

package/templates/template-hydrogen-default/src/components/CartIconWithItems.client.jsx

@@ -0,0 +1,28 @@
+import {useCart} from '@shopify/hydrogen/client';
+
+import CartIcon from './CartIcon';
+
+/**
+ * A client component that specifies the icon to use if a cart contains merchandise
+ */
+export default function CartIconWithItems() {
+  const {totalQuantity} = useCart();
+
+  return (
+    <>
+      <div className="relative">
+        <CartIcon />
+
+        <div
+          className={`bg-blue-700 text-xs rounded-full leading-none text-white absolute bottom-3 right-1 flex items-center justify-center transform translate-y-1/2 transition-all ${
+            totalQuantity > 0 ? 'h-4 w-4' : 'h-0 w-0 overflow-hidden'
+          }`}
+          aria-hidden
+        >
+          {totalQuantity > 0 ? totalQuantity : null}
+        </div>
+      </div>
+      <span className="sr-only">Cart, {totalQuantity} items</span>
+    </>
+  );
+}

package/templates/template-hydrogen-default/src/components/CartProvider.client.jsx

@@ -0,0 +1,35 @@
+import {useCallback} from 'react';
+import {CartProvider as ShopifyCartProvider} from '@shopify/hydrogen/client';
+
+import CartUIProvider, {useCartUI} from './CartUIProvider.client';
+
+/**
+ * A client component that creates a cart object and provides callbacks that can be accessed by any descendent component using the `useCart` hook and related hooks
+ */
+export default function CartProvider({children, numCartLines}) {
+  return (
+    <CartUIProvider>
+      <Provider numCartLines={numCartLines}>{children}</Provider>
+    </CartUIProvider>
+  );
+}
+
+function Provider({children, numCartLines}) {
+  const {openCart} = useCartUI();
+
+  const open = useCallback(() => {
+    openCart();
+  }, [openCart]);
+
+  return (
+    <>
+      <ShopifyCartProvider
+        numCartLines={numCartLines}
+        onLineAdd={open}
+        onCreate={open}
+      >
+        {children}
+      </ShopifyCartProvider>
+    </>
+  );
+}

package/templates/template-hydrogen-default/src/components/CartToggle.client.jsx

@@ -0,0 +1,30 @@
+import {useCartUI} from './CartUIProvider.client';
+import CartIconWithItems from './CartIconWithItems.client';
+
+/**
+ * A client component that defines the behavior when a user toggles a cart
+ */
+export default function CartToggle({handleClick}) {
+  const cartUI = useCartUI();
+
+  if (cartUI == null) {
+    throw new Error('CartToggle must be a descendent of a CartUIProvider');
+  }
+
+  const {isCartOpen, toggleCart} = cartUI;
+
+  return (
+    <button
+      type="button"
+      aria-expanded={isCartOpen}
+      aria-controls="cart"
+      onClick={() => {
+        toggleCart();
+        handleClick();
+      }}
+    >
+      <CartIconWithItems />
+      <span className="sr-only">Open cart</span>
+    </button>
+  );
+}

package/templates/template-hydrogen-default/src/components/CartUIProvider.client.jsx

@@ -0,0 +1,45 @@
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  useContext,
+  createContext,
+} from 'react';
+
+export const CartContext = createContext(null);
+
+/**
+ * A client component that defines the behavior that occurs when a user is interacting with a cart (for example, opening or closing it)
+ */
+export default function CartUIProvider({children}) {
+  const [open, setOpen] = useState(false);
+
+  const openCart = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+
+  const closeCart = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const toggleCart = useCallback(() => {
+    setOpen(!open);
+  }, [setOpen, open]);
+
+  const contextValue = useMemo(() => {
+    return {
+      isCartOpen: open,
+      openCart,
+      closeCart,
+      toggleCart,
+    };
+  }, [open, openCart, closeCart, toggleCart]);
+
+  return (
+    <CartContext.Provider value={contextValue}>{children}</CartContext.Provider>
+  );
+}
+
+export function useCartUI() {
+  return useContext(CartContext);
+}

package/templates/template-hydrogen-default/src/components/CountrySelector.client.jsx

@@ -0,0 +1,116 @@
+import {useCallback, useMemo} from 'react';
+import {useAvailableCountries, useCountry} from '@shopify/hydrogen/client';
+import {Listbox} from '@headlessui/react';
+
+/**
+ * A client component that selects the appropriate country to display for products on a website
+ */
+export default function CountrySelector() {
+  const availableCountries = useAvailableCountries();
+
+  const countries = useMemo(
+    () => [...availableCountries].sort((a, b) => a.name.localeCompare(b.name)),
+    [availableCountries],
+  );
+
+  const [selectedCountry, setSelectedCountry] = useCountry();
+
+  const setCountry = useCallback(
+    (isoCode) => {
+      setSelectedCountry(
+        countries.find((country) => country.isoCode === isoCode),
+      );
+    },
+    [countries, setSelectedCountry],
+  );
+
+  return (
+    <div className="hidden lg:block">
+      <Listbox onChange={setCountry}>
+        {({open}) => (
+          <>
+            <Listbox.Button className="font-medium text-sm h-8 p-2 flex items-center">
+              <span className="mr-4">{selectedCountry.name}</span>
+              <ArrowIcon isOpen={open} />
+            </Listbox.Button>
+
+            <Listbox.Options className="absolute z-10 mt-2">
+              <div className="bg-white p-4 rounded-lg drop-shadow-2xl">
+                <Listbox.Option
+                  disabled
+                  className="p-2 text-md text-left font-medium uppercase"
+                >
+                  Country
+                </Listbox.Option>
+                {countries.map((country) => {
+                  const isSelected =
+                    country.isoCode === selectedCountry.isoCode;
+                  return (
+                    <Listbox.Option
+                      key={country.isoCode}
+                      value={country.isoCode}
+                    >
+                      {({active}) => (
+                        <div
+                          className={`w-36 py-2 px-3 flex justify-between items-center text-left cursor-pointer rounded
+                          ${active ? 'bg-gray-200' : null}`}
+                        >
+                          {country.name}
+                          {isSelected ? <CheckIcon /> : null}
+                        </div>
+                      )}
+                    </Listbox.Option>
+                  );
+                })}
+              </div>
+            </Listbox.Options>
+          </>
+        )}
+      </Listbox>
+    </div>
+  );
+}
+
+export function CheckIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
+        stroke="#354CF6"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ArrowIcon({isOpen}) {
+  return (
+    <svg
+      className={`transition-transform duration-300 ${
+        isOpen ? 'rotate-180' : null
+      }`}
+      aria-hidden="true"
+      width="10"
+      height="6"
+      viewBox="0 0 10 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z"
+        fill="#374151"
+      />
+    </svg>
+  );
+}

package/templates/template-hydrogen-default/src/components/DefaultSeo.server.jsx

@@ -0,0 +1,36 @@
+import {useShopQuery, Seo, CacheDays} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+/**
+ * A server component that fetches a `shop.name` and sets default values and templates for every page on a website
+ */
+export default function DefaultSeo() {
+  const {
+    data: {
+      shop: {name: shopName, description: shopDescription},
+    },
+  } = useShopQuery({
+    query: QUERY,
+    cache: CacheDays(),
+    preload: '*',
+  });
+
+  return (
+    <Seo
+      type="defaultSeo"
+      data={{
+        title: shopName,
+        description: shopDescription,
+      }}
+    />
+  );
+}
+
+const QUERY = gql`
+  query shopInfo {
+    shop {
+      name
+      description
+    }
+  }
+`;

package/templates/template-hydrogen-default/src/components/FeaturedCollection.jsx

@@ -0,0 +1,26 @@
+import {Image, Link} from '@shopify/hydrogen';
+
+/**
+ * A shared component that defines a single featured collection to display on a storefront
+ */
+export default function FeaturedCollection({collection}) {
+  return collection ? (
+    <div className="shadow-xl rounded-xl grid grid-cols-1 lg:grid-cols-2 items-center bg-white overflow-hidden">
+      {collection.image ? (
+        <Image width="622" height="465" data={collection.image} />
+      ) : null}
+      <div className="px-10 py-10 lg:py-0">
+        <h2 className="text-gray-700 text-3xl font-bold mb-5">
+          {collection.title}
+        </h2>
+        <p className="text-lg text-gray-500 mb-6">{collection.description}</p>
+        <Link
+          to={`/collections/${collection.handle}`}
+          className="inline-block bg-gray-900 text-white text-lg font-medium rounded-md py-4 px-16 uppercase"
+        >
+          Shop Collection
+        </Link>
+      </div>
+    </div>
+  ) : null;
+}

package/templates/template-hydrogen-default/src/components/Footer.server.jsx

@@ -0,0 +1,103 @@
+import {Link} from '@shopify/hydrogen';
+
+/**
+ * A server component that specifies the content of the footer on the website
+ */
+export default function Footer({collection, product}) {
+  return (
+    <footer role="contentinfo">
+      <div className="relative bg-white border-t border-b border-black border-opacity-5">
+        <div className="mx-auto max-w-7xl px-4 py-14 md:px-8 grid grid-cols-1 md:grid-cols-3 gap-12">
+          <div>
+            <h2 className="text-md font-medium uppercase mb-4">Community</h2>
+            <ul className="mt-8 space-y-4">
+              <li className="text-sm font-medium text-gray-600 hover:text-gray-900">
+                <a
+                  href="https://github.com/Shopify/hydrogen/discussions"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="fill-current text-gray-600 mr-3"
+                    width="26"
+                    height="20"
+                    viewBox="0 0 21 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M10.1319 0.000976562C4.60874 0.000976562 0.135254 4.58917 0.135254 10.2539C0.135254 14.7908 2.99679 18.6229 6.97045 19.9814C7.47028 20.0711 7.65772 19.7635 7.65772 19.4944C7.65772 19.2509 7.64522 18.4434 7.64522 17.5848C5.13357 18.059 4.48379 16.9568 4.28385 16.38C4.17139 16.0853 3.68406 15.1753 3.2592 14.9318C2.90932 14.7396 2.40949 14.2654 3.2467 14.2526C4.03394 14.2397 4.59625 14.9959 4.78369 15.3035C5.68338 16.8542 7.1204 16.4185 7.6952 16.1494C7.78267 15.4829 8.04508 15.0343 8.33249 14.778C6.10824 14.5217 3.78402 13.6374 3.78402 9.71564C3.78402 8.60063 4.17139 7.67786 4.80868 6.96016C4.70871 6.70383 4.35883 5.65291 4.90864 4.24313C4.90864 4.24313 5.74586 3.97399 7.65772 5.29406C8.45745 5.06336 9.30716 4.94802 10.1569 4.94802C11.0066 4.94802 11.8563 5.06336 12.656 5.29406C14.5679 3.96117 15.4051 4.24313 15.4051 4.24313C15.9549 5.65291 15.605 6.70383 15.5051 6.96016C16.1424 7.67786 16.5297 8.58781 16.5297 9.71564C16.5297 13.6502 14.193 14.5217 11.9688 14.778C12.3311 15.0984 12.6435 15.7136 12.6435 16.6748C12.6435 18.0461 12.631 19.1483 12.631 19.4944C12.631 19.7635 12.8185 20.0839 13.3183 19.9814C15.3028 19.2943 17.0273 17.9861 18.2489 16.2411C19.4706 14.4962 20.128 12.4022 20.1285 10.2539C20.1285 4.58917 15.655 0.000976562 10.1319 0.000976562Z"
+                    />
+                  </svg>
+                  Github discussions
+                </a>
+              </li>
+              <li className="text-sm font-medium text-gray-600 hover:text-gray-900">
+                <a
+                  href="https://discord.gg/ppSbThrFaS"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="fill-current text-gray-600 mr-3"
+                    width="26"
+                    height="20"
+                    viewBox="0 0 26 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M21.3103 1.67597C19.691 0.893476 17.9595 0.324791 16.1494 0.000976562C15.9271 0.416095 15.6673 0.974439 15.4883 1.4186C13.564 1.11972 11.6574 1.11972 9.76855 1.4186C9.58952 0.974439 9.3239 0.416095 9.0996 0.000976562C7.28746 0.324791 5.55403 0.895566 3.93472 1.68012C0.668559 6.77767 -0.216844 11.7486 0.225859 16.649C2.39215 18.3198 4.49155 19.3348 6.55551 19.9989C7.06512 19.2745 7.51962 18.5045 7.91116 17.693C7.16546 17.4003 6.45123 17.0392 5.77638 16.6199C5.95541 16.4829 6.13054 16.3397 6.29973 16.1923C10.4159 18.1807 14.8882 18.1807 18.9551 16.1923C19.1263 16.3397 19.3014 16.4829 19.4785 16.6199C18.8016 17.0412 18.0855 17.4024 17.3398 17.6951C17.7313 18.5045 18.1838 19.2766 18.6954 20.001C20.7614 19.3368 22.8627 18.3219 25.029 16.649C25.5484 10.9682 24.1416 6.04292 21.3103 1.67597ZM8.47192 13.6353C7.2363 13.6353 6.22299 12.4439 6.22299 10.9931C6.22299 9.5423 7.21466 8.34886 8.47192 8.34886C9.72922 8.34886 10.7425 9.54021 10.7209 10.9931C10.7228 12.4439 9.72922 13.6353 8.47192 13.6353ZM16.7829 13.6353C15.5473 13.6353 14.534 12.4439 14.534 10.9931C14.534 9.5423 15.5256 8.34886 16.7829 8.34886C18.0402 8.34886 19.0535 9.54021 19.0319 10.9931C19.0319 12.4439 18.0402 13.6353 16.7829 13.6353Z" />
+                  </svg>
+                  Discord
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h2 className="text-md font-medium uppercase mb-4">Templates</h2>
+            <ul className="mt-8 space-y-4">
+              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
+                <Link to="/home">Home</Link>
+              </li>
+              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
+                <Link to={`/products/${product?.handle}`}>Product</Link>
+              </li>
+              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
+                <Link to={`/collections/${collection?.handle}`}>
+                  Collection
+                </Link>
+              </li>
+              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
+                <Link to="/404">404</Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h2 className="text-md font-medium uppercase mb-4">Docs</h2>
+            <ul className="mt-8 space-y-4">
+              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
+                <a href="https://shopify.dev/custom-storefronts/hydrogen">
+                  Hydrogen overview
+                </a>
+              </li>
+              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
+                <a href="https://shopify.dev/custom-storefronts/hydrogen/reference">
+                  Hydrogen reference
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="py-6 px-4 md:px-8 bg-gray-50">
+        <p className="text-gray-600">© {new Date().getFullYear()} Shopify</p>
+      </div>
+    </footer>
+  );
+}

package/templates/template-hydrogen-default/src/components/Gallery.client.jsx

@@ -0,0 +1,66 @@
+import {useProduct, MediaFile, Image} from '@shopify/hydrogen/client';
+
+/**
+ * A client component that defines a media gallery for hosting images, 3D models, and videos of products
+ */
+export default function Gallery() {
+  const {media, selectedVariant} = useProduct();
+
+  const featuredMedia = selectedVariant.image || media[0]?.image;
+  const featuredMediaSrc = featuredMedia?.url.split('?')[0];
+  const galleryMedia = media.filter((med) => {
+    if (
+      med.mediaContentType === MODEL_3D_TYPE ||
+      med.mediaContentType === VIDEO_TYPE ||
+      med.mediaContentType === EXTERNAL_VIDEO_TYPE
+    ) {
+      return true;
+    }
+
+    return !med.image.url.includes(featuredMediaSrc);
+  });
+
+  if (!media.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className="gap-4 flex md:grid md:grid-cols-2 overflow-x-scroll no-scrollbar scroll-snap-x scroll-smooth h-[485px] md:h-auto place-content-start"
+      tabIndex="-1"
+    >
+      <Image
+        data={selectedVariant.image}
+        className="w-[80vw] md:w-full h-full md:h-auto object-cover object-center flex-shrink-0 md:flex-shrink-none snap-start md:col-span-2 border border-gray-200 rounded-lg"
+      />
+      {galleryMedia.map((med) => {
+        let extraProps = {};
+
+        if (med.mediaContentType === MODEL_3D_TYPE) {
+          extraProps = MODEL_3D_PROPS;
+        }
+
+        return (
+          <MediaFile
+            tabIndex="0"
+            key={med.id || med.image.id}
+            className="w-[80vw] md:w-auto h-full md:h-auto object-cover object-center transition-all snap-start border border-gray-200 flex-shrink-0 rounded-lg"
+            data={med}
+            options={{
+              height: '485',
+              crop: 'center',
+            }}
+            {...extraProps}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+const MODEL_3D_TYPE = 'MODEL_3D';
+const MODEL_3D_PROPS = {
+  interactionPromptThreshold: '0',
+};
+const VIDEO_TYPE = 'VIDEO';
+const EXTERNAL_VIDEO_TYPE = 'EXTERNAL_VIDEO';

package/templates/template-hydrogen-default/src/components/Header.client.jsx

@@ -0,0 +1,62 @@
+import {useEffect, useState} from 'react';
+import {Link} from '@shopify/hydrogen/client';
+
+import CartToggle from './CartToggle.client';
+import {useCartUI} from './CartUIProvider.client';
+import CountrySelector from './CountrySelector.client';
+import Navigation from './Navigation.client';
+import MobileNavigation from './MobileNavigation.client';
+
+/**
+ * A client component that specifies the content of the header on the website
+ */
+export default function Header({collections, storeName}) {
+  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
+  const {isCartOpen} = useCartUI();
+
+  useEffect(() => {
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+
+    setScrollbarWidth(scrollbarWidth);
+  }, [isCartOpen]);
+
+  return (
+    <header className="h-20 lg:h-32" role="banner">
+      <div
+        className={`fixed z-20 h-20 lg:h-32 w-full border-b border-gray-200 px-6 md:px-8 md:py-6 lg:pt-8 lg:pb-0 mx-auto bg-white ${
+          isMobileNavOpen ? '' : 'bg-opacity-95'
+        }`}
+      >
+        <div
+          className="h-full flex lg:flex-col place-content-between"
+          style={{
+            paddingRight: isCartOpen ? scrollbarWidth : 0,
+          }}
+        >
+          <div className="text-center w-full flex justify-between items-center">
+            <CountrySelector />
+            <MobileNavigation
+              collections={collections}
+              isOpen={isMobileNavOpen}
+              setIsOpen={setIsMobileNavOpen}
+            />
+            <Link
+              className="font-black uppercase text-3xl tracking-widest"
+              to="/"
+            >
+              {storeName}
+            </Link>
+            <CartToggle
+              handleClick={() => {
+                if (isMobileNavOpen) setIsMobileNavOpen(false);
+              }}
+            />
+          </div>
+          <Navigation collections={collections} storeName={storeName} />
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/template-hydrogen-default/src/components/Layout.server.jsx

@@ -0,0 +1,86 @@
+import {
+  Image,
+  useShopQuery,
+  flattenConnection,
+  LocalizationProvider,
+  CacheHours,
+} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+import Header from './Header.client';
+import Footer from './Footer.server';
+import Cart from './Cart.client';
+import {Suspense} from 'react';
+
+/**
+ * A server component that defines a structure and organization of a page that can be used in different parts of the Hydrogen app
+ */
+export default function Layout({children, hero}) {
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      numCollections: 3,
+    },
+    cache: CacheHours(),
+    preload: '*',
+  });
+  const collections = data ? flattenConnection(data.collections) : null;
+  const products = data ? flattenConnection(data.products) : null;
+  const storeName = data ? data.shop.name : '';
+
+  return (
+    <LocalizationProvider preload="*">
+      <div className="absolute top-0 left-0">
+        <a
+          href="#mainContent"
+          className="p-4 focus:block sr-only focus:not-sr-only"
+        >
+          Skip to content
+        </a>
+      </div>
+      <div className="min-h-screen max-w-screen text-gray-700 font-sans">
+        {/* TODO: Find out why Suspense needs to be here to prevent hydration errors. */}
+        <Suspense fallback={null}>
+          <Header collections={collections} storeName={storeName} />
+          <Cart />
+        </Suspense>
+        <main role="main" id="mainContent" className="relative bg-gray-50">
+          {hero}
+          <div className="mx-auto max-w-7xl p-4 md:py-5 md:px-8">
+            {children}
+          </div>
+        </main>
+        <Footer collection={collections[0]} product={products[0]} />
+      </div>
+    </LocalizationProvider>
+  );
+}
+
+const QUERY = gql`
+  query layoutContent($numCollections: Int!) {
+    shop {
+      name
+    }
+    collections(first: $numCollections) {
+      edges {
+        node {
+          description
+          handle
+          id
+          title
+          image {
+            ...ImageFragment
+          }
+        }
+      }
+    }
+    products(first: 1) {
+      edges {
+        node {
+          handle
+        }
+      }
+    }
+  }
+  ${Image.Fragment}
+`;