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

package/template-hydrogen/src/components/Cart.client.jsx

@@ -1,287 +0,0 @@
-import {
-  useCart,
-  useCartLinesTotalQuantity,
-  Money,
-  CartToggle,
-  CartCheckoutButton,
-  Link,
-  CartLines,
-  CartLine,
-  CartShopPayButton,
-  CartTotal,
-} from '@shopify/hydrogen/client';
-
-export default function Cart() {
-  const itemCount = useCartLinesTotalQuantity();
-  const {error} = useCart();
-
-  return (
-    <div className="overflow-hidden md:h-auto pointer-events-auto">
-      <div className="flex flex-col shadow-xl max-h-full">
-        <header className="bg-white px-4 md:px-8 md:h-20 border-b border-gray-300 border-solid rounded-t-md flex flex-shrink-0 items-center justify-between">
-          <CartHeader />
-        </header>
-
-        <div className="bg-white px-4 md:px-8 overflow-y-scroll md:max-h-96">
-          {itemCount > 0 ? (
-            <CartLineItems />
-          ) : (
-            <p className="text-center text-gray-600 my-8">Your cart is empty</p>
-          )}
-        </div>
-
-        {error ? (
-          <div
-            className="border bg-red-200 border-red-400 text-red-800 mb-4 mx-8 px-4 py-3 rounded relative"
-            role="alert"
-          >
-            {error}
-          </div>
-        ) : null}
-
-        <footer
-          className={`${
-            itemCount > 0 ? 'border-t border-solid border-gray-300' : ''
-          } bg-white p-4 md:p-8 space-y-4 flex-shrink-0 rounded-b-md`}
-        >
-          {itemCount > 0 ? <CartFooter /> : null}
-        </footer>
-      </div>
-    </div>
-  );
-}
-
-export function CartIcon() {
-  const itemCount = useCartLinesTotalQuantity();
-
-  return (
-    <div className="relative">
-      <svg
-        width="19"
-        height="24"
-        viewBox="0 0 19 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.5894 7H3.41063C2.89451 7 2.46318 7.39279 2.415 7.90666L1.205 20.8133C1.09502 21.9865 2.01796 23 3.19627 23H15.8037C16.982 23 17.905 21.9865 17.795 20.8133L16.585 7.90666C16.5368 7.39279 16.1055 7 15.5894 7Z"
-          stroke="#1F2937"
-          strokeWidth="2"
-          strokeMiterlimit="10"
-          strokeLinecap="round"
-        />
-        <path
-          d="M6 7V9.98952C6 12.0075 7.63589 13.6434 9.65386 13.6434V13.6434C11.6718 13.6434 13.3077 12.0075 13.3077 9.98952V7"
-          stroke="#1F2937"
-          strokeWidth="2"
-        />
-        <path
-          d="M13 6L13 4.5C13 2.567 11.433 1 9.5 1V1C7.567 1 6 2.567 6 4.5L6 6"
-          stroke="#1F2937"
-          strokeWidth="2"
-          className={`${itemCount > 0 ? 'block' : 'hidden'}`}
-        />
-      </svg>
-
-      <div
-        className={`bg-blue-600 text-xs rounded-full leading-none text-white absolute bottom-0 right-0 flex items-center justify-center transform translate-y-1/2 transition-all ${
-          itemCount > 0 ? 'h-4 w-4' : 'h-0 w-0 overflow-hidden'
-        }`}
-      >
-        {itemCount > 0 ? itemCount : null}
-      </div>
-      <span className="sr-only">Cart, {itemCount} items</span>
-    </div>
-  );
-}
-
-function CartHeader() {
-  return (
-    <>
-      <CartToggle>
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5 text-gray-600"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </div>
-        <span className="sr-only">Close cart</span>
-      </CartToggle>
-      <div className="h-12 w-12 p-2 md:h-7 md:w-7 md:p-0">
-        <CartIcon />
-      </div>
-    </>
-  );
-}
-
-function CartLineItems() {
-  return (
-    <div role="table" aria-label="Shopping cart">
-      <div role="row" className="sr-only">
-        <div role="columnheader">Image</div>
-        <div role="columnheader">Item details</div>
-        <div role="columnheader">Price</div>
-      </div>
-      <CartLines>
-        {({merchandise}) => (
-          <div
-            role="row"
-            className="pt-8 pb-8 border-b border-solid border-gray-300 last:border-0"
-          >
-            <div className="flex space-x-8 relative">
-              <div role="cell">
-                <div className="w-20 h-20 relative">
-                  <Link to={`/products/${merchandise.product.handle}`}>
-                    <CartLine.Image className="bg-white rounded w-full h-full object-cover" />
-                  </Link>
-                </div>
-              </div>
-              <div
-                role="cell"
-                className="flex-grow flex flex-col justify-between"
-              >
-                <div className="flex gap-2">
-                  <div className="flex-grow">
-                    <CartLine.ProductTitle className="text-gray-900 font-semibold" />
-                    <CartLine.SelectedOptions className="text-sm">
-                      {({name, value}) => (
-                        <>
-                          {name}: {value}
-                        </>
-                      )}
-                    </CartLine.SelectedOptions>
-                    <CartLine.Attributes className="text-sm">
-                      {({key, value}) => (
-                        <>
-                          {key}: {value}
-                        </>
-                      )}
-                    </CartLine.Attributes>
-                  </div>
-                  <div className="flex-shrink">
-                    <CartLine.QuantityAdjustButton
-                      adjust="remove"
-                      aria-label="Remove from cart"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </CartLine.QuantityAdjustButton>
-                  </div>
-                </div>
-                <div className="flex mt-2">
-                  <div className="flex-grow">
-                    <div className="border border-solid border-gray-300 inline-flex items-center text-gray-500 rounded">
-                      <CartLine.QuantityAdjustButton
-                        adjust="decrease"
-                        className="p-2"
-                        aria-label="Decrease quantity"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="h-5 w-5"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </CartLine.QuantityAdjustButton>
-                      <CartLine.Quantity
-                        as="div"
-                        className="p-2 text-gray-900 text-center"
-                      />
-                      <CartLine.QuantityAdjustButton
-                        adjust="increase"
-                        className="p-2"
-                        aria-label="Increase quantity"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="h-5 w-5"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </CartLine.QuantityAdjustButton>
-                    </div>
-                  </div>
-                </div>
-                <CartLine.Price
-                  role="cell"
-                  className="absolute bottom-0 right-0 mb-3"
-                />
-              </div>
-            </div>
-          </div>
-        )}
-      </CartLines>
-    </div>
-  );
-}
-
-function CartFooter() {
-  const {subtotal} = useCart();
-
-  return (
-    <>
-      <div role="table" className="w-full" aria-label="Cost summary">
-        {subtotal && (
-          <div role="row" className="flex items-center justify-between">
-            <div role="rowheader" className="pb-2 font-semibold">
-              Subtotal
-            </div>
-            <div role="cell" className="text-right pb-2">
-              <Money money={subtotal} />
-            </div>
-          </div>
-        )}
-        <div role="row" className="flex items-center justify-between">
-          <div role="rowheader" className="font-semibold">
-            Shipping
-          </div>
-          <div role="cell" className="text-right">
-            Free
-          </div>
-        </div>
-        <div role="row" className="flex items-center justify-between">
-          <div role="rowheader" className="font-semibold">
-            Total
-          </div>
-          <CartTotal role="cell" className="text-right" />
-        </div>
-      </div>
-      <div className="space-y-2">
-        <CartShopPayButton className="flex justify-center w-full" />
-        <CartCheckoutButton className="block w-full text-white uppercase text-sm rounded-md md:mb-8 bg-black px-3 py-4 disabled:cursor-wait disabled:opacity-60">
-          Checkout
-        </CartCheckoutButton>
-      </div>
-    </>
-  );
-}

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

@@ -1,15 +0,0 @@
-import {CartProvider as ShopifyCartProvider} from '@shopify/hydrogen/client';
-
-/**
- * TODO: Remove this re-export once we find a long-term solution for
- * mixed Hydrogen Client Components.
- * @see https://github.com/Shopify/hydrogen/issues/383
- */
-
-export default function CartProvider({children, cart, numCartLines}) {
-  return (
-    <ShopifyCartProvider cart={cart} numCartLines={numCartLines}>
-      {children}
-    </ShopifyCartProvider>
-  );
-}

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

@@ -1,22 +0,0 @@
-import {useShopQuery} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-import Seo from './Seo.client';
-
-export default function SeoServer() {
-  const {
-    data: {
-      shop: {name: shopName},
-    },
-  } = useShopQuery({query: QUERY});
-
-  return <Seo shopName={shopName} />;
-}
-
-const QUERY = gql`
-  query shopName {
-    shop {
-      name
-    }
-  }
-`;

package/template-hydrogen/src/components/Footer.jsx

@@ -1,12 +0,0 @@
-export default function Footer() {
-  return (
-    <footer
-      role="contentinfo"
-      className="flex items-center justify-between p-4 md:py-8 md:px-8 max-w-7xl mx-auto"
-    >
-      <p className="text-gray-600">© 2021 Shopify</p>
-      <div>{/* TODO: Payment icons */}</div>
-      <p className="text-gray-400">Powered by Shopify</p>
-    </footer>
-  );
-}

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

@@ -1,36 +0,0 @@
-import {useProduct, MediaFile} from '@shopify/hydrogen/client';
-
-export default function Gallery() {
-  return (
-    <>
-      <GalleryPreview />
-    </>
-  );
-}
-
-function GalleryPreview() {
-  const {media} = useProduct();
-
-  if (!media.length) {
-    return null;
-  }
-
-  return (
-    <ul className="grid lg:grid-cols-2 gap-10">
-      {media.map((med) => {
-        return (
-          <li key={med.id} className="relative">
-            <MediaFile
-              className="w-full bg-white rounded-md object-cover"
-              media={med}
-              options={{
-                height: '1000',
-                crop: 'center',
-              }}
-            />
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

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

@@ -1,46 +0,0 @@
-import {Link, CartToggle} from '@shopify/hydrogen/client';
-
-import {CartIcon} from './Cart.client';
-
-export default function Header() {
-  return (
-    <header
-      className="z-10 relative flex items-center justify-between pt-3 md:pt-12 md:pb-4 md:px-8 max-w-7xl mx-auto"
-      role="banner"
-    >
-      <nav>
-        <ul className="hidden md:flex items-center justify-center space-x-6 font-medium relative">
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/" className="flex items-center justify-center">
-              Collections
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Link>
-          </li>
-        </ul>
-      </nav>
-      <Link
-        className="text-center font-bold uppercase text-2xl tracking-widest absolute left-1/2 transform -translate-x-1/2"
-        to="/"
-      >
-        My Shop
-      </Link>
-      <CartToggle className="h-12 w-12 p-2 mr-2 md:mr-0 md:h-7 md:w-7 md:p-0">
-        <CartIcon />
-      </CartToggle>
-    </header>
-  );
-}

package/template-hydrogen/src/components/HightlightedProduct.client.jsx

@@ -1,54 +0,0 @@
-import {
-  ProductProvider,
-  SelectedVariantImage,
-  ProductTitle,
-  SelectedVariantPrice,
-  SelectedVariantAddToCartButton,
-  Link,
-} from '@shopify/hydrogen/client';
-
-import ProductOptions from './ProductOptions.client';
-
-export default function HighlightedProduct({product}) {
-  if (!product) {
-    return null;
-  }
-
-  return (
-    <ProductProvider
-      product={product}
-      initialVariantId={product.variants.edges[0].node.id}
-    >
-      <SelectedVariantImage className="rounded-md bg-gray-100 w-full md:min-h-96 md:w-96 object-cover" />
-      <div className="pt-4 md:pl-10 w-full flex flex-col">
-        <Link to={`/products/${product.handle}`}>
-          <ProductTitle className="text-gray-900 text-xl md:text-3xl font-medium" />
-        </Link>
-        <div className="my-2 md:my-4 md:mb-16">
-          <SelectedVariantPrice className="font-semibold md:font-medium text-gray-900 md:text-xl">
-            {({currencyCode, amount, currencyNarrowSymbol}) => {
-              return (
-                <span>{`${currencyCode} ${currencyNarrowSymbol}${amount}`}</span>
-              );
-            }}
-          </SelectedVariantPrice>
-          <SelectedVariantPrice
-            priceType="compareAt"
-            className="text-gray-400 line-through md:text-xl"
-          >
-            {({amount, currencyNarrowSymbol}) => {
-              return <span>{`${currencyNarrowSymbol}${amount}`}</span>;
-            }}
-          </SelectedVariantPrice>
-        </div>
-        <ProductOptions />
-        <SelectedVariantAddToCartButton className="rounded-md bg-gray-900 text-white text-center p-4 text-sm uppercase w-full mt-4 mb-2">
-          Add to bag
-        </SelectedVariantAddToCartButton>
-        <p className="text-gray-500 text-xs text-center">
-          Free shipping and 30 day returns
-        </p>
-      </div>
-    </ProductProvider>
-  );
-}

package/template-hydrogen/src/components/Layout.client.jsx

@@ -1,61 +0,0 @@
-import {
-  CartUIProvider,
-  CartContainer,
-  useCartUI,
-} from '@shopify/hydrogen/client';
-
-import Header from './Header.client';
-import Footer from './Footer';
-import Cart from './Cart.client';
-
-export default function Layout({children}) {
-  return (
-    <CartUIProvider>
-      <InnerLayout>{children}</InnerLayout>
-    </CartUIProvider>
-  );
-}
-
-function InnerLayout({children}) {
-  const {isCartOpen, closeCart} = useCartUI();
-
-  return (
-    <>
-      <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">
-        <Header />
-        {/* eslint-disable-next-line @shopify/jsx-prefer-fragment-wrappers */}
-        <div>
-          <div
-            className={`z-50 fixed top-0 bottom-0 left-0 right-0 bg-black transition-opacity duration-400 ${
-              isCartOpen ? 'opacity-20' : 'opacity-0 pointer-events-none'
-            }`}
-            onClick={isCartOpen ? closeCart : null}
-          />
-          <CartContainer
-            id="cart"
-            className={`pointer-events-none z-50 fixed right-0 top-0 bottom-0 md:p-5 flex flex-col w-full max-w-md min-w-sm transition-transform duration-500 transform-gpu ${
-              isCartOpen ? 'right-0' : 'translate-x-full'
-            }`}
-          >
-            <Cart />
-          </CartContainer>
-        </div>
-        <main
-          id="mainContent"
-          className="mx-auto max-w-7xl p-4 md:py-5 md:px-8"
-        >
-          {children}
-        </main>
-        <Footer />
-      </div>
-    </>
-  );
-}

package/template-hydrogen/src/components/MediaPlaceholder.jsx

@@ -1,21 +0,0 @@
-export default function MediaPlaceholder({text}) {
-  return (
-    <div className="text-gray-500 h-full w-full p-4 bg-gray-200 flex flex-col items-center justify-center space-y-4">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-10 w-10"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          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>
-      {text && <p className="text-sm max-w-xs text-center">{text}</p>}
-    </div>
-  );
-}

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

@@ -1,104 +0,0 @@
-import {useShopQuery, MediaFile} from '@shopify/hydrogen';
-import {Link} from '@shopify/hydrogen/client';
-import gql from 'graphql-tag';
-
-import Layout from './Layout.client';
-import ProductCard from './ProductCard.client';
-
-export default function NotFound() {
-  const {data} = useShopQuery({query: QUERY});
-  const {products} = data;
-
-  return (
-    <Layout>
-      <div className="text-center py-10 md:py-40 max-w-2xl mx-auto space-y-6">
-        <h1 className="text-4xl font-extrabold leading-tight">
-          We’ve lost this page
-        </h1>
-        <p className="text-xl 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>
-        <Link
-          className="block max-w-md mx-auto text-white p-3 rounded mb-8 uppercase text-lg bg-black"
-          to="/"
-        >
-          Take me to the home page
-        </Link>
-      </div>
-
-      <hr className="border-gray-300" />
-
-      <h2 className="my-8 text-2xl text-gray-700 font-bold">
-        Products you might like
-      </h2>
-
-      <ul className="grid lg:grid-cols-3 gap-6 my-4">
-        {products.edges.map((edge) => (
-          <li key={edge.node.id}>
-            <ProductCard product={edge.node} />
-          </li>
-        ))}
-      </ul>
-    </Layout>
-  );
-}
-
-const QUERY = gql`
-  fragment NotFoundProductDetails on Product {
-    id
-    title
-    handle
-    priceRange {
-      maxVariantPrice {
-        amount
-        currencyCode
-      }
-      minVariantPrice {
-        amount
-        currencyCode
-      }
-    }
-    variants(first: 1) {
-      edges {
-        node {
-          priceV2 {
-            currencyCode
-            amount
-          }
-          compareAtPriceV2 {
-            currencyCode
-            amount
-          }
-          image {
-            ...ImageFragment
-          }
-          selectedOptions {
-            name
-            value
-          }
-        }
-      }
-    }
-    media(first: 1) {
-      edges {
-        node {
-          ...MediaFileFragment
-        }
-      }
-    }
-  }
-
-  query Products {
-    products(first: 3) {
-      edges {
-        node {
-          id
-          ...NotFoundProductDetails
-        }
-      }
-    }
-  }
-
-  ${MediaFile.Fragment}
-`;