npm - @shopify/create-hydrogen - Versions diffs - 0.2.1 → 0.18.0 - Mend

@shopify/create-hydrogen 0.2.1 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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/pages/Index.server.jsx DELETED Viewed

@@ -1,199 +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';
-import MediaPlaceholder from '../components/MediaPlaceholder';
-export default function Index() {
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      numProducts: 3,
-      numProductMetafields: 0,
-      numProductVariants: 250,
-      numProductMedia: 1,
-      numProductVariantMetafields: 10,
-      numProductVariantSellingPlanAllocations: 10,
-      numProductSellingPlanGroups: 10,
-      numProductSellingPlans: 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">
-            {products[0] ? (
-              <HighlightedProduct product={products[0]} />
-            ) : (
-              <MediaPlaceholder text="Your product here" />
-            )}
-          </div>
-        </section>
-        <section className="space-y-6 md:space-y-0 md:grid grid-cols-3 gap-10 flex flex-col-reverse">
-          {products.length > 2 && (
-            <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!
-    $numProductVariantSellingPlanAllocations: Int!
-    $numProductSellingPlanGroups: Int!
-    $numProductSellingPlans: Int!
-  ) {
-    products(first: $numProducts) {
-      edges {
-        node {
-          ...ProductProviderFragment
-        }
-      }
-    }
-  }
-  ${ProductProviderFragment}
-`;

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

@@ -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 DELETED Viewed

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

package/template-hydrogen/src/pages/collections/[handle].server.jsx DELETED Viewed

@@ -1,69 +0,0 @@
-import {MediaFileFragment, useShopQuery} from '@shopify/hydrogen';
-import {useParams} from 'react-router-dom';
-import gql from 'graphql-tag';
-import Layout from '../../components/Layout.client';
-import ProductCard from '../../components/ProductCard.client';
-export default function Collection() {
-  const {handle} = useParams();
-  const {data} = useShopQuery({query: QUERY, variables: {handle}});
-  const collection = data.collectionByHandle;
-  return (
-    <Layout>
-      <h1 className="text-2xl font-bold">{collection.title}</h1>
-      <ul className="grid lg:grid-cols-3 gap-6 mt-4">
-        {collection.products.edges.map((edge) => (
-          <li key={edge.node.id}>
-            <ProductCard product={edge.node} />
-          </li>
-        ))}
-      </ul>
-    </Layout>
-  );
-}
-const QUERY = gql`
-  fragment CollectionProductDetails on Product {
-    id
-    title
-    handle
-    priceRange {
-      maxVariantPrice {
-        amount
-        currencyCode
-      }
-      minVariantPrice {
-        amount
-        currencyCode
-      }
-    }
-    media(first: 1) {
-      edges {
-        node {
-          ...MediaFileFragment
-        }
-      }
-    }
-  }
-  query CollectionDetails($handle: String!) {
-    collectionByHandle(handle: $handle) {
-      id
-      title
-      products(first: 10) {
-        edges {
-          node {
-            ...CollectionProductDetails
-          }
-        }
-      }
-    }
-  }
-  ${MediaFileFragment}
-`;

package/template-hydrogen/src/pages/products/[handle].server.jsx DELETED Viewed

@@ -1,62 +0,0 @@
-import {useShopQuery, ProductProviderFragment} from '@shopify/hydrogen';
-import {useParams} from 'react-router-dom';
-import gql from 'graphql-tag';
-import ProductDetails from '../../components/ProductDetails.client';
-import NotFound from '../../components/NotFound.server';
-export default function Product() {
-  const {handle} = useParams();
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      handle,
-      numProductMetafields: 10,
-      numProductVariants: 250,
-      numProductMedia: 6,
-      numProductVariantMetafields: 10,
-      numProductVariantSellingPlanAllocations: 10,
-      numProductSellingPlanGroups: 10,
-      numProductSellingPlans: 10,
-    },
-  });
-  if (!data.product) {
-    return <NotFound />;
-  }
-  return <ProductDetails data={data} />;
-}
-const QUERY = gql`
-  query product(
-    $handle: String!
-    $numProductMetafields: Int!
-    $numProductVariants: Int!
-    $numProductMedia: Int!
-    $numProductVariantMetafields: Int!
-    $numProductVariantSellingPlanAllocations: Int!
-    $numProductSellingPlanGroups: Int!
-    $numProductSellingPlans: Int!
-  ) {
-    product: product(handle: $handle) {
-      id
-      vendor
-      seo {
-        title
-        description
-      }
-      images(first: 1) {
-        edges {
-          node {
-            originalSrc
-          }
-        }
-      }
-      ...ProductProviderFragment
-    }
-  }
-  ${ProductProviderFragment}
-`;

package/template-hydrogen/src/pages/search.server.jsx DELETED Viewed

@@ -1,107 +0,0 @@
-import {useEffect, useMemo, useState} from 'react';
-import {useHistory, useLocation} from 'react-router-dom';
-import {useShopQuery, MediaFileFragment} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-import Layout from '../components/Layout.client';
-import ProductCard from '../components/ProductCard.client';
-/**
- * TODO: Refactor to a true server component.
- */
-export default function Search() {
-  const {search} = useLocation();
-  const originalQuery = useMemo(
-    () => new URLSearchParams(search).get('query'),
-    [search],
-  );
-  const history = useHistory();
-  const [query, setQuery] = useState(originalQuery);
-  const [newQuery, setNewQuery] = useState(query);
-  useEffect(() => {
-    if (originalQuery) {
-      setQuery(originalQuery);
-    }
-  }, [originalQuery]);
-  return (
-    <Layout>
-      <h1 className="text-2xl font-bold">Search</h1>
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          setQuery(newQuery);
-          history.push(`/search?query=${newQuery}`);
-        }}
-        className="mt-4 space-x-2"
-      >
-        <label htmlFor="search">Search Products:</label>
-        <input
-          autocomplete="off"
-          name="search"
-          id="search"
-          type="search"
-          value={newQuery}
-          onChange={(event) => setNewQuery(event.target.value)}
-          className="p-1"
-        />
-        <button type="submit" className="bg-black text-white font-bold p-1">
-          Search
-        </button>
-      </form>
-      {query && <SearchResults query={query} />}
-    </Layout>
-  );
-}
-function SearchResults({query}) {
-  const {data, fetching} = useShopQuery({query: QUERY, variables: {query}});
-  if (fetching) return <p>Loading...</p>;
-  return (
-    <>
-      <h2 className="text-xl font-medium mt-8">Search results for: {query}</h2>
-      {data.products.edges.length ? (
-        <ul className="grid lg:grid-cols-3 gap-6 mt-4">
-          {data.products.edges.map((edge) => (
-            <li key={edge.node.id}>
-              <ProductCard product={edge.node} />
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>No results found.</p>
-      )}
-    </>
-  );
-}
-const QUERY = gql`
-  fragment SearchProductDetails on Product {
-    id
-    title
-    handle
-    media(first: 1) {
-      edges {
-        node {
-          ...MediaFileFragment
-        }
-      }
-    }
-  }
-  query ProductSearch($query: String!) {
-    products(query: $query, first: 10) {
-      edges {
-        node {
-          ...SearchProductDetails
-        }
-      }
-    }
-  }
-  ${MediaFileFragment}
-`;

package/template-hydrogen/tailwind.config.js DELETED Viewed

@@ -1,9 +0,0 @@
-module.exports = {
-  purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
-  variants: {
-    extend: {},
-  },
-  plugins: [require('@tailwindcss/typography')],
-};