@shopify/create-hydrogen 0.1.3 → 0.15.0

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}
-`;

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

@@ -1,39 +0,0 @@
-import {
-  Link,
-  ProductProvider,
-  ProductTitle,
-  SelectedVariantImage,
-  SelectedVariantPrice,
-} from '@shopify/hydrogen/client';
-
-export default function ProductCard({product}) {
-  const firstVariant = product?.variants?.edges[0]?.node;
-
-  if (!product) return null;
-
-  return (
-    <ProductProvider product={product} initialVariantId={firstVariant.id}>
-      <Link to={`/products/${product.handle}`}>
-        <SelectedVariantImage className="rounded-md bg-gray-100 h-80 w-96 mb-2" />
-        <ProductTitle className="text-gray-900 font-medium" />
-      </Link>
-      <div className="flex items-center">
-        <SelectedVariantPrice className="text-gray-900">
-          {({currencyCode, amount, currencyNarrowSymbol}) => {
-            return (
-              <span>{`${currencyCode} ${currencyNarrowSymbol}${amount}`}</span>
-            );
-          }}
-        </SelectedVariantPrice>
-        <SelectedVariantPrice
-          priceType="compareAt"
-          className="text-gray-400 line-through"
-        >
-          {({amount, currencyNarrowSymbol}) => {
-            return <span>{`${currencyNarrowSymbol}${amount}`}</span>;
-          }}
-        </SelectedVariantPrice>
-      </div>
-    </ProductProvider>
-  );
-}

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

@@ -1,184 +0,0 @@
-import {Product} from '@shopify/hydrogen/client';
-
-import Layout from './Layout.client';
-import ProductOptions from './ProductOptions.client';
-import Gallery from './Gallery.client';
-import Seo from './Seo.client';
-
-export default function ProductDetails({data}) {
-  return (
-    <Layout>
-      <Seo product={data.product} />
-      <Product
-        product={data.product}
-        initialVariantId={data.product.variants.edges[0].node.id}
-      >
-        <div className="py-4 md:grid md:grid-cols-2 lg:grid-cols-3 gap-12">
-          <div className="md:hidden pb-4 flex justify-between items-top">
-            <Product.Title as="h1" className="font-bold text-2xl" />
-            <div className="flex items-center gap-1">
-              <Product.SelectedVariant.Price className="text-xl" />
-              <Product.SelectedVariant.Price
-                priceType="compareAt"
-                className="line-through text-gray-400"
-              />
-            </div>
-          </div>
-
-          <section className="lg:col-span-2 grid gap-10" aria-label="Gallery">
-            <Gallery />
-          </section>
-
-          <section
-            className="my-4 md:my-0 max-w-md flex flex-col gap-6"
-            aria-label="Product details"
-          >
-            {/* eslint-disable-next-line @shopify/jsx-prefer-fragment-wrappers */}
-            <div>
-              <Product.Title className="text-gray-900 text-3xl font-medium" />
-
-              <Product.Metafield
-                namespace="reviews"
-                keyName="rating"
-                className="text-yellow-500 text-lg"
-              />
-
-              <div className="my-4 gap-1 hidden md:block">
-                <Product.SelectedVariant.Price className="font-semibold text-gray-900 text-2xl">
-                  {({currencyCode, amount, currencyNarrowSymbol}) => {
-                    return (
-                      <span>{`${currencyCode} ${currencyNarrowSymbol}${amount}`}</span>
-                    );
-                  }}
-                </Product.SelectedVariant.Price>
-                <Product.SelectedVariant.Price
-                  priceType="compareAt"
-                  className="text-gray-400 line-through text-xl"
-                >
-                  {({amount, currencyNarrowSymbol}) => {
-                    return <span>{`${currencyNarrowSymbol}${amount}`}</span>;
-                  }}
-                </Product.SelectedVariant.Price>
-
-                <Product.SelectedVariant.UnitPrice className="text-gray-900 text-base">
-                  {({
-                    currencyCode,
-                    amount,
-                    currencyNarrowSymbol,
-                    referenceUnit,
-                  }) => {
-                    return (
-                      <span>{`${currencyCode} ${currencyNarrowSymbol}${amount}/${referenceUnit}`}</span>
-                    );
-                  }}
-                </Product.SelectedVariant.UnitPrice>
-
-                <Product.SelectedVariant.Metafield
-                  namespace="my_fields"
-                  keyName="no_tax"
-                >
-                  {({value}) => {
-                    return value ? <span>We pay the tax!</span> : null;
-                  }}
-                </Product.SelectedVariant.Metafield>
-              </div>
-
-              <ProductOptions />
-
-              <div className="my-8 space-y-2">
-                <Product.SelectedVariant.AddToCartButton className="rounded-md bg-gray-900 text-white text-center p-4 text-sm uppercase w-full">
-                  Add to bag
-                </Product.SelectedVariant.AddToCartButton>
-                <Product.SelectedVariant.BuyNowButton className="rounded-md bg-white border border-black text-center p-4 text-sm uppercase w-full">
-                  Buy it now
-                </Product.SelectedVariant.BuyNowButton>
-                <Product.SelectedVariant.ShopPayButton className="flex justify-center w-full" />
-              </div>
-
-              <ul className="flex gap-2">
-                <Product.Metafield
-                  namespace="my_fields"
-                  keyName="made_in_canada"
-                >
-                  {({value}) => {
-                    return value ? (
-                      <li className="uppercase text-xs bg-red-500 text-white text-center font-semibold rounded-full h-20 w-20 flex items-center justify-center p-3">
-                        Made in Canada
-                      </li>
-                    ) : null;
-                  }}
-                </Product.Metafield>
-                <Product.Metafield namespace="my_fields" keyName="flex">
-                  {({value}) => {
-                    return (
-                      <li className="uppercase bg-gray-600 text-white text-center font-semibold rounded-full h-20 w-20 flex flex-col items-center justify-center p-3">
-                        <span className="text-xs">Flex</span>
-                        <span className="text-4xl">{value}</span>
-                      </li>
-                    );
-                  }}
-                </Product.Metafield>
-              </ul>
-
-              <Product.Description className="prose" />
-
-              <section className="mt-4">
-                <h3 className="text-lg font-semibold">Care Guide</h3>
-                <Product.Metafield
-                  namespace="descriptors"
-                  keyName="care_guide"
-                />
-              </section>
-
-              <section className="mt-4">
-                <h3 className="text-lg font-semibold">Specs</h3>
-                <ul>
-                  <li>
-                    Weight:{' '}
-                    <Product.Metafield
-                      namespace="my_fields"
-                      keyName="product_weight"
-                    />
-                  </li>
-                  <li>
-                    Length:{' '}
-                    <Product.Metafield namespace="my_fields" keyName="length" />
-                  </li>
-                  <li>
-                    Width:{' '}
-                    <Product.Metafield namespace="my_fields" keyName="width" />
-                  </li>
-                  <li>
-                    Manufactured on:{' '}
-                    <Product.Metafield
-                      namespace="my_fields"
-                      keyName="manufacture_date"
-                    />
-                  </li>
-                  <li>
-                    Manufactured by:{' '}
-                    <Product.Metafield
-                      namespace="my_fields"
-                      keyName="manufacturer_url"
-                    >
-                      {({value}) => {
-                        return (
-                          <a href={value} className="inline-block">
-                            <Product.Metafield
-                              namespace="my_fields"
-                              keyName="manufacturer_name"
-                            />
-                          </a>
-                        );
-                      }}
-                    </Product.Metafield>
-                  </li>
-                </ul>
-              </section>
-            </div>
-          </section>
-        </div>
-      </Product>
-    </Layout>
-  );
-}

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

@@ -1,75 +0,0 @@
-import {useShop, Helmet} from '@shopify/hydrogen/client';
-
-export default function Seo({shopName, product}) {
-  const {locale} = useShop();
-  const lang = locale.split(/[-_]/)[0];
-
-  if (product) {
-    const variant = product.variants.edges[0].node;
-    const price = variant.priceV2;
-    const image = product.images.edges[0]?.node;
-    const title = product.seo?.title ?? product.title;
-    const description = product.seo?.description ?? product.description;
-
-    /* TODO: Find a way to get the full URL */
-    const url = typeof window === 'undefined' ? '' : window.location.href;
-
-    return (
-      <Helmet>
-        <title>{title}</title>
-        <meta name="description" content={description} />
-        {url && <meta property="og:url" content={url} />}
-        <meta property="og:title" content={title} />
-        <meta property="og:type" content="product" />
-        <meta property="og:description" content={description} />
-        <meta property="og:price:amount" content={price.amount} />
-        <meta property="og:price:currency" content={price.currencyCode} />
-
-        {image && <meta property="og:image" content={image.originalSrc} />}
-        {image && (
-          <meta property="og:image:secure_url" content={image.originalSrc} />
-        )}
-
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={title} />
-        <meta name="twitter:description" content={description} />
-
-        <script type="application/ld+json">{`
-          {
-            "@context": "https://schema.org/",
-            "@type": "Product",
-            "name": "${product.title}",
-            "image": [
-              ${image ? `"${image.originalSrc}"` : ''}
-            ],
-            "description": "${description}",
-            "brand": {
-              "@type": "Brand",
-              "name": "${product.vendor}"
-            },
-            "offers": {
-              "@type": "Offer",
-              "url": "${url}",
-              "priceCurrency": "${price.currencyCode}",
-              "price": "${price.amount}",
-              "availability": "https://schema.org/${
-                variant.availableForSale ? 'InStock' : 'OutOfStock'
-              }"
-            }
-          }
-        `}</script>
-      </Helmet>
-    );
-  }
-
-  /**
-   * Return a global SEO helper if no other props were passed.
-   * Useful for placing in the "main" <App> container.
-   */
-  return (
-    <Helmet defaultTitle={shopName} titleTemplate={`%s - ${shopName}`}>
-      <html lang={lang} />
-      <meta property="og:site_name" content={shopName} />
-    </Helmet>
-  );
-}

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

@@ -1,12 +0,0 @@
-import renderHydrogen from '@shopify/hydrogen/entry-client';
-import {ShopifyProvider} from '@shopify/hydrogen/client';
-
-import shopifyConfig from '../shopify.config';
-
-function ClientApp({children}) {
-  return (
-    <ShopifyProvider shopifyConfig={shopifyConfig}>{children}</ShopifyProvider>
-  );
-}
-
-export default renderHydrogen(ClientApp);

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

@@ -1,7 +0,0 @@
-import renderHydrogen from '@shopify/hydrogen/entry-server';
-
-import App from './App.server';
-
-export default renderHydrogen(App, () => {
-  // Custom hook
-});