@shopify/create-hydrogen 0.2.0 → 0.16.0

package/templates/template-hydrogen/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/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/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"
+              image={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>
+  );
+}

package/templates/template-hydrogen/src/components/ProductDetails.client.jsx

@@ -0,0 +1,242 @@
+import {
+  Product,
+  flattenConnection,
+  useProduct,
+  useMoney,
+  useParsedMetafields,
+} from '@shopify/hydrogen/client';
+import ProductOptions from './ProductOptions.client';
+import Gallery from './Gallery.client';
+import {
+  BUTTON_PRIMARY_CLASSES,
+  BUTTON_SECONDARY_CLASSES,
+} from './Button.client';
+
+/**
+ * A client component that displays detailed information about a product to allow buyers to make informed decisions
+ */
+function ProductPriceMarkup() {
+  const product = useProduct();
+  const variantPrice = useMoney(product.selectedVariant.priceV2);
+  const variantCompareAtPrice = useMoney(
+    product.selectedVariant.compareAtPriceV2 ?? product.selectedVariant.priceV2,
+  );
+  return (
+    <div className="flex md:flex-col items-end font-semibold text-lg md:items-start md:mb-4">
+      {variantPrice.amount !== variantCompareAtPrice.amount && (
+        <span className="text-gray-500 line-through text-lg mr-2.5">
+          {variantCompareAtPrice.currencyNarrowSymbol}
+          {variantCompareAtPrice.amount}
+        </span>
+      )}
+      <span className="text-gray-900">
+        {variantPrice.currencyCode} {variantPrice.currencyNarrowSymbol}
+        {variantPrice.amount}
+      </span>
+      <Product.SelectedVariant.UnitPrice className="text-gray-500">
+        {({currencyCode, amount, currencyNarrowSymbol, referenceUnit}) =>
+          `${currencyCode} ${currencyNarrowSymbol}${amount}/${referenceUnit}`
+        }
+      </Product.SelectedVariant.UnitPrice>
+    </div>
+  );
+}
+
+function AddToCartMarkup() {
+  const {selectedVariant} = useProduct();
+  const isOutOfStock = !selectedVariant.availableForSale;
+
+  return (
+    <div className="space-y-2 mb-8">
+      <Product.SelectedVariant.AddToCartButton
+        className={BUTTON_PRIMARY_CLASSES}
+        disabled={isOutOfStock}
+      >
+        {isOutOfStock ? 'Out of stock' : 'Add to bag'}
+      </Product.SelectedVariant.AddToCartButton>
+      {isOutOfStock ? (
+        <p className="text-black text-center">Available in 2-3 weeks</p>
+      ) : (
+        <Product.SelectedVariant.BuyNowButton
+          className={BUTTON_SECONDARY_CLASSES}
+        >
+          Buy it now
+        </Product.SelectedVariant.BuyNowButton>
+      )}
+    </div>
+  );
+}
+
+function SizeChart() {
+  return (
+    <>
+      <h3
+        className="text-xl text-black font-semibold mt-8 mb-4"
+        id="size-chart"
+      >
+        Size Chart
+      </h3>
+      <table className="min-w-full table-fixed text-sm text-center bg-white">
+        <thead>
+          <tr className="bg-black text-white">
+            <th className="w-1/4 py-2 px-4 font-normal">Board Size</th>
+            <th className="w-1/4 py-2 px-4 font-normal">154</th>
+            <th className="w-1/4 py-2 px-4 font-normal">158</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="p-3 border border-black">Weight Range</td>
+            <td className="p-3 border border-black">120-180 lbs. /54-82kg</td>
+            <td className="p-3 border border-black">150-200 lbs. /68-91 kg</td>
+          </tr>
+          <tr>
+            <td className="p-3 border border-black">Waist Width</td>
+            <td className="p-3 border border-black">246mm</td>
+            <td className="p-3 border border-black">255mm</td>
+          </tr>
+          <tr>
+            <td className="p-3 border border-black">Stance Width</td>
+            <td className="p-3 border border-black">-40</td>
+            <td className="p-3 border border-black">-40</td>
+          </tr>
+          <tr>
+            <td className="p-3 border border-black">Binding Sizes</td>
+            <td className="p-3 border border-black">
+              Men&rsquo;s S/M, Women&rsquo;s S/M
+            </td>
+            <td className="p-3 border border-black">
+              Men&rsquo;s L, Women&rsquo;s L
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default function ProductDetails({product}) {
+  const initialVariant = flattenConnection(product.variants)[0];
+
+  const productMetafields = useParsedMetafields(product.metafields);
+  const sizeChartMetafield = productMetafields.find(
+    (metafield) =>
+      metafield.namespace === 'my_fields' && metafield.key === 'size_chart',
+  );
+  const sustainableMetafield = productMetafields.find(
+    (metafield) =>
+      metafield.namespace === 'my_fields' && metafield.key === 'sustainable',
+  );
+  const lifetimeWarrantyMetafield = productMetafields.find(
+    (metafield) =>
+      metafield.namespace === 'my_fields' &&
+      metafield.key === 'lifetime_warranty',
+  );
+
+  return (
+    <>
+      <Product product={product} initialVariantId={initialVariant.id}>
+        <div className="grid grid-cols-1 md:grid-cols-[2fr,1fr] gap-x-8 my-16">
+          <div className="md:hidden mt-5 mb-8">
+            <Product.Title
+              as="h1"
+              className="text-4xl font-bold text-black mb-4"
+            />
+            {product.vendor && (
+              <div className="text-sm font-medium mb-2 text-gray-900">
+                {product.vendor}
+              </div>
+            )}
+            <span />
+            <div className="flex justify-between md:block">
+              <ProductPriceMarkup />
+            </div>
+          </div>
+
+          <Gallery />
+
+          <div>
+            <div className="hidden md:block">
+              <Product.Title
+                as="h1"
+                className="text-5xl font-bold text-black mb-4"
+              />
+              {product.vendor && (
+                <div className="text-sm font-medium mb-2 text-gray-900">
+                  {product.vendor}
+                </div>
+              )}
+              <ProductPriceMarkup />
+            </div>
+            {/* Product Options */}
+            <div className="mt-8">
+              <ProductOptions />
+              {sizeChartMetafield?.value && (
+                <a
+                  href="#size-chart"
+                  className="block underline text-gray-500 text-sm tracking-wide my-4"
+                >
+                  Size Chart
+                </a>
+              )}
+              <AddToCartMarkup />
+              <div className="flex items space-x-4">
+                {sustainableMetafield?.value && (
+                  <span className="flex items-center mb-8">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="stroke-current text-blue-600 mr-3"
+                    >
+                      <path
+                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.7071-.7071M6.34315 6.34315l-.70711-.70711m12.72796.00005-.7071.70711M6.3432 17.6569l-.70711.7071M16 12c0 2.2091-1.7909 4-4 4-2.20914 0-4-1.7909-4-4 0-2.20914 1.79086-4 4-4 2.2091 0 4 1.79086 4 4Z"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-900 font-medium">
+                      Sustainable Material
+                    </span>
+                  </span>
+                )}
+                {lifetimeWarrantyMetafield?.value && (
+                  <span className="flex items-center mb-8">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="stroke-current text-blue-600 mr-3"
+                    >
+                      <path
+                        d="M9 12L11 14L15 10M20.6179 5.98434C20.4132 5.99472 20.2072 5.99997 20 5.99997C16.9265 5.99997 14.123 4.84453 11.9999 2.94434C9.87691 4.84446 7.07339 5.99985 4 5.99985C3.79277 5.99985 3.58678 5.9946 3.38213 5.98422C3.1327 6.94783 3 7.95842 3 9.00001C3 14.5915 6.82432 19.2898 12 20.622C17.1757 19.2898 21 14.5915 21 9.00001C21 7.95847 20.8673 6.94791 20.6179 5.98434Z"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-900 font-medium">
+                      Lifetime Warranty
+                    </span>
+                  </span>
+                )}
+              </div>
+            </div>
+            {/* Product Description */}
+            <Product.Description className="prose border-t border-gray-200 pt-6 text-black text-md" />
+            {sizeChartMetafield?.value && (
+              <div className="border-t border-gray-200">
+                <SizeChart />
+              </div>
+            )}
+          </div>
+        </div>
+      </Product>
+    </>
+  );
+}

package/{template-hydrogen → templates/template-hydrogen}/src/components/ProductOptions.client.jsx

@@ -1,5 +1,8 @@
 import {useProduct} from '@shopify/hydrogen/client';
 
+/**
+ * A client component that tracks a selected variant and/or selling plan state, as well as callbacks for modifying the state
+ */
 export default function ProductOptions() {
   const {options, setSelectedOption, selectedOptions} = useProduct();
 
@@ -7,11 +10,11 @@ export default function ProductOptions() {
     <>
       {options.map(({name, values}) => {
         return (
-          <fieldset key={name} className="mb-6">
-            <legend className="mb-2 d:mb-4 md:text-xl font-medium text-gray-900">
+          <fieldset key={name} className="mt-8">
+            <legend className="mb-4 text-xl font-medium text-gray-900">
               {name}
             </legend>
-            <div className="flex items-center flex-wrap gap-2">
+            <div className="flex items-center flex-wrap gap-4">
               {values.map((value) => {
                 const checked = selectedOptions[name] === value;
                 const id = `option-${name}-${value}`;
@@ -28,7 +31,7 @@ export default function ProductOptions() {
                       onChange={() => setSelectedOption(name, value)}
                     />
                     <div
-                      className={`p-2 border rounded-md cursor-pointer text-sm md:text-md ${
+                      className={`p-2 border cursor-pointer rounded text-sm md:text-md ${
                         checked ? 'bg-gray-900 text-white' : 'text-gray-900'
                       }`}
                     >

package/templates/template-hydrogen/src/components/Welcome.server.jsx

@@ -0,0 +1,188 @@
+import {useShopQuery, flattenConnection, Link} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+import {Suspense} from 'react';
+
+function ExternalIcon() {
+  return (
+    <svg
+      className="ml-3"
+      width="15"
+      height="14"
+      viewBox="0 0 15 14"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+    >
+      <path d="M8.11963 0.000976562C7.56734 0.000976562 7.11963 0.448692 7.11963 1.00098C7.11963 1.55326 7.56734 2.00098 8.11963 2.00098H10.7054L4.41252 8.29387C4.022 8.68439 4.022 9.31756 4.41252 9.70808C4.80305 10.0986 5.43621 10.0986 5.82674 9.70808L12.1196 3.41519V6.00098C12.1196 6.55326 12.5673 7.00098 13.1196 7.00098C13.6719 7.00098 14.1196 6.55326 14.1196 6.00098V1.00098C14.1196 0.448692 13.6719 0.000976562 13.1196 0.000976562H8.11963Z" />
+      <path d="M2.11963 2.00098C1.01506 2.00098 0.119629 2.89641 0.119629 4.00098V12.001C0.119629 13.1055 1.01506 14.001 2.11963 14.001H10.1196C11.2242 14.001 12.1196 13.1055 12.1196 12.001V9.00098C12.1196 8.44869 11.6719 8.00098 11.1196 8.00098C10.5673 8.00098 10.1196 8.44869 10.1196 9.00098V12.001H2.11963V4.00098L5.11963 4.00098C5.67191 4.00098 6.11963 3.55326 6.11963 3.00098C6.11963 2.44869 5.67191 2.00098 5.11963 2.00098H2.11963Z" />
+    </svg>
+  );
+}
+
+function DocsButton({url, label}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      className="bg-white shadow py-2 px-5 rounded-full inline-flex items-center hover:opacity-80"
+      rel="noreferrer"
+    >
+      {label}
+      <ExternalIcon />
+    </a>
+  );
+}
+
+function BoxFallback() {
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900 h-60"></div>
+  );
+}
+
+function StorefrontInfo() {
+  const {data} = useShopQuery({query: QUERY});
+  const shopName = data ? data.shop.name : '';
+  const products = data && flattenConnection(data.products);
+  const collections = data && flattenConnection(data.collections);
+  const totalProducts = products && products.length;
+  const totalCollections = collections && collections.length;
+
+  const pluralize = (count, noun, suffix = 's') =>
+    `${count} ${noun}${count === 1 ? '' : suffix}`;
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900">
+      <p className="text-md font-medium uppercase mb-4">Connected Storefront</p>
+      <h2 className="text-2xl font-bold mb-4">{shopName}</h2>
+      <p className="text-md">
+        {pluralize(totalProducts, 'Product')}
+        {', '}
+        {pluralize(totalCollections, 'Collection')}
+      </p>
+      {totalProducts === 0 && totalCollections === 0 && (
+        <div className="py-2 px-3 bg-red-100 text-md">
+          Use the{' '}
+          <a
+            href="https://shopify.dev/apps/tools/cli/getting-started"
+            className="text-primary font-mono font-bold underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Shopify CLI
+          </a>{' '}
+          to populate sample products and collections.
+        </div>
+      )}
+      <hr className="my-4" />
+      <a
+        href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/create#step-2-update-information-about-your-shopify-storefront"
+        className="text-md inline-flex items-center text-blue-700 font-medium hover:underline"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Change your storefront access token
+        <ExternalIcon />
+      </a>
+    </div>
+  );
+}
+
+function TemplateLinks() {
+  const {data} = useShopQuery({query: QUERY});
+  const products = data && flattenConnection(data.products);
+  const collections = data && flattenConnection(data.collections);
+
+  const firstProduct = products && products.length ? products[0].handle : '';
+  const firstCollection = collections[0] ? collections[0].handle : '';
+
+  return (
+    <div className="bg-white p-12 md:p-12 shadow-xl rounded-xl text-gray-900">
+      <p className="text-md font-medium uppercase mb-4">
+        Explore the templates
+      </p>
+      <ul>
+        <li className="mb-4">
+          <Link
+            to={`/collections/${firstCollection}`}
+            className="text-md font-medium text-blue-700 hover:underline"
+          >
+            Collection template
+          </Link>
+        </li>
+        <li className="mb-4">
+          <Link
+            to={`/products/${firstProduct}`}
+            className="text-md font-medium text-blue-700 hover:underline"
+          >
+            Product template
+          </Link>
+        </li>
+        <li>
+          <Link
+            to="/error-page"
+            className="text-md font-medium text-blue-700 hover:underline"
+          >
+            404 template
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * A server component that displays the content on the homepage of the Hydrogen app
+ */
+export default function Welcome() {
+  return (
+    <div className="text-gray-900 pt-16 rounded-[40px] my-16 px-4 xl:px-12 bg-gradient-to-b from-white -mx-4 xl:-mx-12">
+      <div className="text-center mb-16">
+        <h1 className="font-extrabold mb-4 text-5xl md:text-7xl">
+          Hello, Hydrogen
+        </h1>
+        <p className="text-lg mb-8">
+          Welcome to your custom storefront. Let&rsquo;s get building.
+        </p>
+        <div className="flex flex-col lg:flex-row justify-center items-center gap-8 text-gray-700">
+          <DocsButton
+            url="https://shopify.dev/custom-storefronts/hydrogen"
+            label="Browse Hydrogen documentation"
+          />
+          <DocsButton url="/graphql" label="Open the GraphiQL explorer" />
+          <DocsButton
+            url="https://github.com/Shopify/hydrogen-examples"
+            label="Explore Hydrogen examples"
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
+        <Suspense fallback={<BoxFallback />}>
+          <StorefrontInfo />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <TemplateLinks />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
+
+const QUERY = gql`
+  query welcomeContent {
+    shop {
+      name
+    }
+    products(first: 250) {
+      edges {
+        node {
+          handle
+        }
+      }
+    }
+    collections(first: 250) {
+      edges {
+        node {
+          handle
+        }
+      }
+    }
+  }
+`;

package/templates/template-hydrogen/src/entry-client.jsx

@@ -0,0 +1,7 @@
+import renderHydrogen from '@shopify/hydrogen/entry-client';
+
+function ClientApp({children}) {
+  return children;
+}
+
+export default renderHydrogen(ClientApp);

package/templates/template-hydrogen/src/entry-server.jsx

@@ -0,0 +1,6 @@
+import renderHydrogen from '@shopify/hydrogen/entry-server';
+import App from './App.server';
+
+const pages = import.meta.globEager('./pages/**/*.server.[jt](s|sx)');
+
+export default renderHydrogen(App, {pages});