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

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

package/template-hydrogen/src/favicon.svg

@@ -1,15 +0,0 @@
-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>

package/template-hydrogen/src/pages/Index.server.jsx

@@ -1,186 +0,0 @@
-import {
-  useShopQuery,
-  flattenConnection,
-  ProductProviderFragment,
-} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-import HighlightedProduct from '../components/HightlightedProduct.client';
-import Layout from '../components/Layout.client';
-import ProductCard from '../components/ProductCard.client';
-
-export default function Index() {
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      numProducts: 3,
-      numProductMetafields: 0,
-      numProductVariants: 250,
-      numProductMedia: 1,
-      numProductVariantMetafields: 10,
-    },
-  });
-
-  const products = data ? flattenConnection(data.products) : [];
-
-  return (
-    <Layout>
-      <div className="z-0 gradient w-screen h-screen top-0 left-0 right-0 fixed" />
-      <div className="z-5 relative space-y-16">
-        <section className="md:px-4 pt-10 pb-4">
-          <HydrogenGettingStarted />
-        </section>
-
-        <section className="space-y-6 md:space-y-0 md:grid grid-cols-3 gap-10">
-          <div>
-            <CommerceReadyComponents />
-          </div>
-          <div className="col-span-2 md:flex shadow-xl p-4 md:p-6 rounded-md bg-white">
-            <HighlightedProduct product={products[0]} />
-          </div>
-        </section>
-
-        <section className="space-y-6 md:space-y-0 md:grid grid-cols-3 gap-10 flex flex-col-reverse flex-col">
-          <div className="col-span-2 md:flex shadow-xl p-4 md:p-6 rounded-md space-y-6 md:space-y-0 md:space-x-6 bg-white">
-            {[products[1], products[2]].map((product) => {
-              return (
-                <div key={product.id}>
-                  <ProductCard product={product} />
-                </div>
-              );
-            })}
-          </div>
-          <div>
-            <StyleWithTailwind />
-          </div>
-        </section>
-      </div>
-    </Layout>
-  );
-}
-
-function HydrogenGettingStarted() {
-  const links = [
-    {
-      text: 'Browse Hydrogen documentation',
-      url: 'https://shopify.dev/beta/hydrogen/',
-    },
-    {
-      text: 'Open the GraphiQL editor',
-      url: '/graphiql',
-    },
-    {
-      text: 'Explore starter templates',
-      url: '/',
-    },
-  ];
-
-  return (
-    <>
-      <h2 className="text-4xl md:text-7xl font-extrabold text-center">
-        Hello, Hydrogen
-      </h2>
-
-      <p className="text-xl text-center mt-4 mb-8">
-        Welcome to your custom storefront. Let‘s get building.
-      </p>
-
-      <ul className="md:flex justify-center gap-5 space-y-4 md:space-y-0">
-        {links.map((link) => (
-          <li key={link.url}>
-            <a
-              href={link.url}
-              className="rounded-full bg-white px-4 py-2 bg-opacity-80 flex items-center gap-2"
-            >
-              {link.text}
-              <svg
-                width="7"
-                height="13"
-                viewBox="0 0 7 13"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M1 1.5L6 6.5L1 11.5"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </a>
-          </li>
-        ))}
-      </ul>
-    </>
-  );
-}
-
-function CommerceReadyComponents() {
-  return (
-    <>
-      <h2 className="font-bold text-3xl">Commerce-ready components</h2>
-      <p className="text-xl leading-8 mt-2 mb-4">
-        Hydrogen includes the most common components for commerce, powered by
-        your Shopify custom storefront. They&apos;re accessible, performant, and
-        ready for implementation.
-      </p>
-      <a
-        className="text-blue-500 text-xl flex items-center gap-1"
-        href="https://shopify.dev/beta/hydrogen/"
-      >
-        Browse components
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-5 w-5"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-        >
-          <path
-            fillRule="evenodd"
-            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-            clipRule="evenodd"
-          />
-        </svg>
-      </a>
-    </>
-  );
-}
-
-function StyleWithTailwind() {
-  return (
-    <>
-      <h2 className="font-bold text-3xl">
-        Style with Tailwind or roll your own
-      </h2>
-      <p className="text-xl leading-8 mt-2 mb-4">
-        Hydrogen starter templates are styled using the flexible{' '}
-        <a className="text-blue-500" href="https://www.tailwindcss.com">
-          Tailwind CSS
-        </a>{' '}
-        framework. Start building with Tailwind&apos;s library or choose your
-        own styling - it&apos;s up to you.
-      </p>
-    </>
-  );
-}
-
-const QUERY = gql`
-  query indexContent(
-    $numProducts: Int!
-    $numProductMetafields: Int!
-    $numProductVariants: Int!
-    $numProductMedia: Int!
-    $numProductVariantMetafields: Int!
-  ) {
-    products(first: $numProducts) {
-      edges {
-        node {
-          ...ProductProviderFragment
-        }
-      }
-    }
-  }
-
-  ${ProductProviderFragment}
-`;

package/template-hydrogen/src/pages/blogs/[handle]/[articleHandle].server.jsx

@@ -1,49 +0,0 @@
-import {RawHtml, useShopQuery} from '@shopify/hydrogen';
-import {useParams} from 'react-router-dom';
-import gql from 'graphql-tag';
-
-import Layout from '../../../components/Layout.client';
-
-export default function Article() {
-  const {handle, articleHandle} = useParams();
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {handle, articleHandle},
-  });
-
-  const article = data.blogByHandle.articleByHandle;
-
-  return (
-    <Layout>
-      <section className="my-8 px-4 pt-10 pb-4 text-white">
-        <h1 className="text-7xl mb-4 font-semibold tracking-tight">
-          {article.title}
-        </h1>
-      </section>
-
-      <section className="my-8 bg-white rounded-3xl p-10 sticky shadow-2xl">
-        <p className="font-medium mt-1">
-          Published {new Date(article.publishedAt).toLocaleDateString()} by{' '}
-          {article.author.name}
-        </p>
-
-        <RawHtml string={article.contentHtml} className="prose mt-8" />
-      </section>
-    </Layout>
-  );
-}
-
-const QUERY = gql`
-  query ArticleDetails($handle: String!, $articleHandle: String!) {
-    blogByHandle(handle: $handle) {
-      articleByHandle(handle: $articleHandle) {
-        title
-        contentHtml
-        publishedAt
-        author: authorV2 {
-          name
-        }
-      }
-    }
-  }
-`;

package/template-hydrogen/src/pages/blogs/[handle].server.jsx

@@ -1,76 +0,0 @@
-import {useParams} from 'react-router-dom';
-import {useShopQuery, RawHtml, Link} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-import Layout from '../../components/Layout.client';
-
-export default function Blog() {
-  const {handle} = useParams();
-  const {data} = useShopQuery({query: QUERY, variables: {handle}});
-
-  const blog = data.blogByHandle;
-
-  return (
-    <Layout>
-      <div className="relative">
-        <section className="my-8 px-4 pt-10 pb-4 text-white">
-          <h1 className="text-7xl mb-4 font-semibold tracking-tight">
-            {blog.title}
-          </h1>
-        </section>
-
-        <section className="my-8 px-4 pb-4">
-          <ul className="space-y-12 mt-8">
-            {blog.articles.edges.map((edge) => {
-              const article = edge.node;
-              return (
-                <li
-                  key={article.id}
-                  className="p-5 rounded-3xl overflow-hidden shadow-2xl bg-white bg-opacity-70"
-                >
-                  <h2 className="text-xl font-medium">
-                    <Link to={`/blogs/${handle}/${article.handle}`}>
-                      {article.title}
-                    </Link>
-                  </h2>
-                  <p className="font-medium mt-1">
-                    Published on{' '}
-                    {new Date(article.publishedAt).toLocaleDateString()} by{' '}
-                    {article.author.name}
-                  </p>
-
-                  <RawHtml
-                    string={article.contentHtml}
-                    className="mt-2 prose"
-                  />
-                </li>
-              );
-            })}
-          </ul>
-        </section>
-      </div>
-    </Layout>
-  );
-}
-
-const QUERY = gql`
-  query BlogDetails($handle: String!) {
-    blogByHandle(handle: $handle) {
-      title
-      articles(first: 10) {
-        edges {
-          node {
-            id
-            title
-            handle
-            publishedAt
-            contentHtml
-            author {
-              name
-            }
-          }
-        }
-      }
-    }
-  }
-`;