@shopify/create-hydrogen 1.0.9 → 2.0.2

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

@@ -1,98 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,50 +0,0 @@
-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>
-  );
-}

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

@@ -1,233 +0,0 @@
-import {
-  flattenConnection,
-  useProduct,
-  useParsedMetafields,
-  ProductProvider,
-  ProductTitle,
-  ProductDescription,
-  ProductPrice,
-  AddToCartButton,
-  BuyNowButton,
-} from '@shopify/hydrogen/client';
-import ProductOptions from './ProductOptions.client';
-import Gallery from './Gallery.client';
-import {
-  BUTTON_PRIMARY_CLASSES,
-  BUTTON_SECONDARY_CLASSES,
-} from './Button.client';
-
-function AddToCartMarkup() {
-  const {selectedVariant} = useProduct();
-  const isOutOfStock = !selectedVariant.availableForSale;
-
-  return (
-    <div className="space-y-2 mb-8">
-      <AddToCartButton
-        className={BUTTON_PRIMARY_CLASSES}
-        disabled={isOutOfStock}
-      >
-        {isOutOfStock ? 'Out of stock' : 'Add to bag'}
-      </AddToCartButton>
-      {isOutOfStock ? (
-        <p className="text-black text-center">Available in 2-3 weeks</p>
-      ) : (
-        <BuyNowButton
-          variantId={selectedVariant.id}
-          className={BUTTON_SECONDARY_CLASSES}
-        >
-          Buy it now
-        </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 (
-    <>
-      <ProductProvider data={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">
-            <ProductTitle
-              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">
-              <ProductPrice
-                className="text-gray-500 line-through text-lg font-semibold"
-                priceType="compareAt"
-                variantId={initialVariant.id}
-              />
-              <ProductPrice
-                className="text-gray-900 text-lg font-semibold"
-                variantId={initialVariant.id}
-              />
-            </div>
-          </div>
-
-          <Gallery />
-
-          <div>
-            <div className="hidden md:block">
-              <ProductTitle
-                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>
-              )}
-              <ProductPrice
-                className="text-gray-500 line-through text-lg font-semibold"
-                priceType="compareAt"
-                variantId={initialVariant.id}
-              />
-              <ProductPrice
-                className="text-gray-900 text-lg font-semibold"
-                variantId={initialVariant.id}
-              />
-            </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 */}
-            <ProductDescription 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>
-      </ProductProvider>
-    </>
-  );
-}

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

@@ -1,49 +0,0 @@
-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();
-
-  return (
-    <>
-      {options.map(({name, values}) => {
-        return (
-          <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-4">
-              {values.map((value) => {
-                const checked = selectedOptions[name] === value;
-                const id = `option-${name}-${value}`;
-
-                return (
-                  <label key={id} htmlFor={id}>
-                    <input
-                      className="sr-only"
-                      type="radio"
-                      id={id}
-                      name={`option[${name}]`}
-                      value={value}
-                      checked={checked}
-                      onChange={() => setSelectedOption(name, value)}
-                    />
-                    <div
-                      className={`p-2 border cursor-pointer rounded text-sm md:text-md ${
-                        checked ? 'bg-gray-900 text-white' : 'text-gray-900'
-                      }`}
-                    >
-                      {value}
-                    </div>
-                  </label>
-                );
-              })}
-            </div>
-          </fieldset>
-        );
-      })}
-    </>
-  );
-}