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

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

@@ -0,0 +1,56 @@
+import {useServerState} from '@shopify/hydrogen/client';
+
+/**
+ * A client component that provides functionality to initially show a subset of products and a button to load more products
+ */
+export default function LoadMoreProducts({startingCount}) {
+  const {pending, serverState, setServerState} = useServerState();
+
+  return (
+    <div className="flex justify-center h-14">
+      {pending ? (
+        <SpinnerIcon />
+      ) : (
+        <button
+          type="button"
+          disabled={pending}
+          className={`uppercase border-4 bg-white border-black text-black text-center px-5 py-3 font-mono font-bold drop-shadow-lg active:drop-shadow-none hover:bg-black hover:text-white hover:border-white ${
+            pending ? 'opacity-50' : undefined
+          }`}
+          onClick={() => {
+            setServerState(
+              'collectionProductCount',
+              serverState.collectionProductCount
+                ? serverState.collectionProductCount + 24
+                : startingCount + 1,
+            );
+          }}
+        >
+          Load more
+        </button>
+      )}
+    </div>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="54"
+      height="54"
+      viewBox="0 0 54 54"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="animate-spin"
+    >
+      <path
+        d="M43.6663 27.0002C43.6663 36.2049 36.2044 43.6668 26.9997 43.6668C17.7949 43.6668 10.333 36.2049 10.333 27.0002C10.333 17.7954 17.7949 10.3335 26.9997 10.3335C36.2044 10.3335 43.6663 17.7954 43.6663 27.0002ZM13.6663 27.0002C13.6663 34.364 19.6359 40.3335 26.9997 40.3335C34.3635 40.3335 40.333 34.364 40.333 27.0002C40.333 19.6364 34.3635 13.6668 26.9997 13.6668C19.6359 13.6668 13.6663 19.6364 13.6663 27.0002Z"
+        fill="#E6E7EB"
+      />
+      <path
+        d="M26.9997 10.3332C29.1884 10.3332 31.3556 10.7643 33.3777 11.6018C35.3998 12.4394 37.2371 13.6671 38.7848 15.2147C40.3324 16.7624 41.5601 18.5997 42.3977 20.6218C43.2352 22.6439 43.6663 24.8111 43.6663 26.9998L40.333 26.9998C40.333 25.2489 39.9881 23.5151 39.3181 21.8974C38.648 20.2797 37.6659 18.8099 36.4278 17.5717C35.1896 16.3336 33.7198 15.3515 32.1021 14.6814C30.4844 14.0114 28.7506 13.6665 26.9997 13.6665L26.9997 10.3332Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,26 @@
+import CartIcon from './CartIcon';
+import OpenIcon from './OpenIcon';
+
+/**
+ * A shared component and Suspense call that's used in `App.server.jsx` to let your app wait for code to load while declaring a loading state
+ */
+export default function LoadingFallback() {
+  return (
+    <header className="h-20 lg:h-32 max-w-screen text-gray-700">
+      <div className="fixed z-10 h-20 lg:h-32 w-full bg-white/90 border-b border-black border-opacity-5 px-6 md:px-8 md:py-6 lg:pt-8 lg:pb-0 mx-auto">
+        <div className="h-full flex lg:flex-col place-content-between">
+          <div className="text-center w-full flex justify-between items-center">
+            <div className="hidden lg:block w-16" />
+            <div className="lg:hidden flex justify-center items-center w-7 h-full">
+              <OpenIcon />
+            </div>
+            <p className="font-black uppercase text-3xl tracking-widest">
+              Snowdevil
+            </p>
+            <CartIcon />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,64 @@
+import {useCallback} from 'react';
+import {useAvailableCountries, useCountry} from '@shopify/hydrogen/client';
+import {Listbox} from '@headlessui/react';
+
+import {ArrowIcon, CheckIcon} from './CountrySelector.client';
+
+/**
+ * A client component that selects the appropriate country to display for products on a mobile storefront
+ */
+export default function MobileCountrySelector() {
+  const countries = [...useAvailableCountries()].sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+  const [selectedCountry, setSelectedCountry] = useCountry();
+
+  const setCountry = useCallback(
+    (isoCode) => {
+      setSelectedCountry(
+        countries.find((country) => country.isoCode === isoCode),
+      );
+    },
+    [countries, setSelectedCountry],
+  );
+
+  return (
+    <div className="mt-8 rounded border border-gray-200 w-full">
+      <Listbox onChange={setCountry}>
+        {({open}) => (
+          <>
+            <Listbox.Button className="w-full flex justify-between text-sm items-center py-5 px-7">
+              {selectedCountry.name}
+              <ArrowIcon isOpen={open} />
+            </Listbox.Button>
+            <Listbox.Options className="w-full px-3 pb-2 text-lg">
+              <Listbox.Option
+                disabled
+                className="font-medium px-4 pb-4 w-full text-left 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={`py-2 px-4 rounded flex justify-between items-center text-left w-full cursor-pointer ${
+                          active ? 'bg-gray-100' : null
+                        }`}
+                      >
+                        {country.name}
+                        {isSelected ? <CheckIcon /> : null}
+                      </div>
+                    )}
+                  </Listbox.Option>
+                );
+              })}
+            </Listbox.Options>
+          </>
+        )}
+      </Listbox>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import {Fragment, useEffect, useState} from 'react';
+import {Link} from '@shopify/hydrogen/client';
+import {FocusTrap} from '@headlessui/react';
+
+import MobileCountrySelector from './MobileCountrySelector.client';
+import OpenIcon from './OpenIcon';
+
+/**
+ * A client component that defines the navigation for a mobile storefront
+ */
+export default function MobileNavigation({collections, isOpen, setIsOpen}) {
+  const OpenFocusTrap = isOpen ? FocusTrap : Fragment;
+
+  const [topScrollOffset, setTopScrollOffset] = useState(0);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTopScrollOffset(window.scrollY);
+      document.body.style.position = 'fixed';
+    } else {
+      document.body.style.position = '';
+      window.scrollTo(0, parseInt(topScrollOffset, 10));
+    }
+  }, [isOpen, topScrollOffset]);
+
+  return (
+    <div className="lg:hidden">
+      <OpenFocusTrap>
+        <button
+          type="button"
+          className="flex justify-center items-center w-7 h-full"
+          onClick={() => setIsOpen((previousIsOpen) => !previousIsOpen)}
+        >
+          {isOpen ? <CloseIcon /> : <OpenIcon />}
+        </button>
+        {isOpen ? (
+          <div className="fixed -left-0 top-20 w-full h-screen z-10 bg-gray-50 px-4 md:px-12 py-7">
+            <ul>
+              {collections.map((collection) => (
+                <li className="border-b border-gray-200" key={collection.id}>
+                  <Link
+                    className="group py-5 text-gray-700 flex items-center justify-between"
+                    to={`/collections/${collection.handle}`}
+                    onClick={() => setIsOpen(false)}
+                  >
+                    {collection.title}
+                    <ArrowRightIcon className="hidden group-hover:block" />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+            <MobileCountrySelector />
+          </div>
+        ) : null}
+      </OpenFocusTrap>
+    </div>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 17L17 1M1 1L17 17"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ArrowRightIcon({className}) {
+  return (
+    <svg
+      className={className}
+      width="7"
+      height="12"
+      viewBox="0 0 7 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.999762 12C0.743762 12 0.487762 11.902 0.292762 11.707C-0.0982383 11.316 -0.0982383 10.684 0.292762 10.293L4.58576 6.00001L0.292762 1.70701C-0.0982383 1.31601 -0.0982383 0.684006 0.292762 0.293006C0.683762 -0.0979941 1.31576 -0.0979941 1.70676 0.293006L6.70676 5.29301C7.09776 5.68401 7.09776 6.31601 6.70676 6.70701L1.70676 11.707C1.51176 11.902 1.25576 12 0.999762 12Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,14 @@
+import {useMoney} from '@shopify/hydrogen/client';
+
+/**
+ * A client component that renders a product's compare at price
+ */
+export default function MoneyCompareAtPrice({money}) {
+  const {amount, currencyNarrowSymbol} = useMoney(money);
+  return (
+    <span className="line-through text-lg mr-2.5 text-gray-500">
+      {currencyNarrowSymbol}
+      {amount}
+    </span>
+  );
+}

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

@@ -0,0 +1,15 @@
+import {useMoney} from '@shopify/hydrogen/client';
+
+/**
+ * A client component that defines the currency code, currency symbol, and amount of a product
+ */
+export default function MoneyPrice({money}) {
+  const {currencyCode, currencyNarrowSymbol, amount} = useMoney(money);
+  return (
+    <span className="text-black text-md">
+      {currencyCode}
+      {currencyNarrowSymbol}
+      {amount}
+    </span>
+  );
+}

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

@@ -0,0 +1,23 @@
+import {Link} from '@shopify/hydrogen/client';
+
+/**
+ * A client component that defines the navigation for a web storefront
+ */
+export default function Navigation({collections}) {
+  return (
+    <nav className="hidden lg:block text-center">
+      <ul className="md:flex items-center justify-center">
+        {collections.map((collection) => (
+          <li key={collection.id}>
+            <Link
+              to={`/collections/${collection.handle}`}
+              className="block p-4 hover:opacity-80"
+            >
+              {collection.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

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

@@ -0,0 +1,93 @@
+import {
+  useShopQuery,
+  ProductProviderFragment,
+  flattenConnection,
+} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+import Layout from './Layout.server';
+import Button from './Button.client';
+import ProductCard from './ProductCard';
+
+/**
+ * A server component that defines the content to display when a page isn't found (404 error)
+ */
+function NotFoundHero() {
+  return (
+    <div className="py-10 border-b border-gray-200">
+      <div className="max-w-3xl text-center mx-4 md:mx-auto">
+        <h1 className="font-bold text-4xl md:text-5xl text-gray-900 mb-6 mt-6">
+          We&#39;ve lost this page
+        </h1>
+        <p className="text-lg m-8 text-gray-500">
+          We couldn’t find the page you’re looking for. Try checking the URL or
+          heading back to the home page.
+        </p>
+        <Button
+          className="w-full md:mx-auto md:w-96"
+          url="/"
+          label="Take me to the home page"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function NotFound({country = {isoCode: 'US'}}) {
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      country: country.isoCode,
+      numProductMetafields: 0,
+      numProductVariants: 250,
+      numProductMedia: 0,
+      numProductVariantMetafields: 0,
+      numProductVariantSellingPlanAllocations: 0,
+      numProductSellingPlanGroups: 0,
+      numProductSellingPlans: 0,
+    },
+  });
+  const products = data ? flattenConnection(data.products) : [];
+
+  return (
+    <Layout>
+      <NotFoundHero />
+      <div className="my-8">
+        <p className="mb-8 text-lg text-black font-medium uppercase">
+          Products you might like
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+          {products.map((product) => (
+            <div key={product.id}>
+              <ProductCard product={product} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+const QUERY = gql`
+  query NotFoundProductDetails(
+    $country: CountryCode
+    $includeReferenceMetafieldDetails: Boolean = false
+    $numProductMetafields: Int!
+    $numProductVariants: Int!
+    $numProductMedia: Int!
+    $numProductVariantMetafields: Int!
+    $numProductVariantSellingPlanAllocations: Int!
+    $numProductSellingPlanGroups: Int!
+    $numProductSellingPlans: Int!
+  ) @inContext(country: $country) {
+    products(first: 3) {
+      edges {
+        node {
+          ...ProductProviderFragment
+        }
+      }
+    }
+  }
+
+  ${ProductProviderFragment}
+`;

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

@@ -0,0 +1,33 @@
+/**
+ * A shared component that specifies the icon to render when opened
+ */
+export default function OpenIcon() {
+  return (
+    <svg
+      width="24"
+      height="20"
+      viewBox="0 0 24 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.800049 1.9999C0.800049 1.11625 1.51639 0.399902 2.40005 0.399902H21.6C22.4837 0.399902 23.2001 1.11625 23.2001 1.9999C23.2001 2.88356 22.4837 3.5999 21.6 3.5999H2.40005C1.51639 3.5999 0.800049 2.88356 0.800049 1.9999Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.800049 9.9999C0.800049 9.11625 1.51639 8.3999 2.40005 8.3999H21.6C22.4837 8.3999 23.2001 9.11625 23.2001 9.9999C23.2001 10.8836 22.4837 11.5999 21.6 11.5999H2.40005C1.51639 11.5999 0.800049 10.8836 0.800049 9.9999Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.800049 17.9999C0.800049 17.1162 1.51639 16.3999 2.40005 16.3999H21.6C22.4837 16.3999 23.2001 17.1162 23.2001 17.9999C23.2001 18.8836 22.4837 19.5999 21.6 19.5999H2.40005C1.51639 19.5999 0.800049 18.8836 0.800049 17.9999Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,50 @@
+import {Image, Link} from '@shopify/hydrogen';
+
+import MoneyCompareAtPrice from './MoneyCompareAtPrice.client';
+import MoneyPrice from './MoneyPrice.client';
+
+/**
+ * A shared component that displays a single product to allow buyers to quickly identify a particular item of interest
+ */
+export default function ProductCard({product}) {
+  const selectedVariant = product.variants.edges[0].node;
+
+  if (selectedVariant == null) {
+    return null;
+  }
+
+  return (
+    <div className="text-md mb-4 relative">
+      <Link to={`/products/${product.handle}`}>
+        <div className="rounded-lg border-2 border-gray-200 mb-2 relative flex items-center justify-center overflow-hidden object-cover h-96">
+          {selectedVariant.image ? (
+            <Image
+              className="bg-white absolute w-full h-full transition-all duration-500 ease-in-out transform bg-center bg-cover object-center object-contain hover:scale-110"
+              data={selectedVariant.image}
+            />
+          ) : null}
+          {!selectedVariant?.availableForSale && (
+            <div className="absolute top-3 left-3 rounded-3xl text-xs bg-black text-white py-3 px-4">
+              Out of stock
+            </div>
+          )}
+        </div>
+
+        <span className="text-black font-semibold mb-0.5">{product.title}</span>
+
+        {product.vendor && (
+          <p className="text-gray-900 font-medium text-sm mb-0.5">
+            {product.vendor}
+          </p>
+        )}
+
+        <div className="flex ">
+          {selectedVariant.compareAtPriceV2 && (
+            <MoneyCompareAtPrice money={selectedVariant.compareAtPriceV2} />
+          )}
+          <MoneyPrice money={selectedVariant.priceV2} />
+        </div>
+      </Link>
+    </div>
+  );
+}