@shopify/create-hydrogen 0.1.3 → 0.15.0

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

@@ -1,197 +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,
-    },
-  });
-
-  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!
-  ) {
-    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
-            }
-          }
-        }
-      }
-    }
-  }
-`;

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

@@ -1,69 +0,0 @@
-import {MediaFile, 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
-          }
-        }
-      }
-    }
-  }
-
-  ${MediaFile.Fragment}
-`;

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

@@ -1,60 +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,
-    },
-  });
-
-  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!
-  ) {
-    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

@@ -1,107 +0,0 @@
-import {useEffect, useMemo, useState} from 'react';
-import {useHistory, useLocation} from 'react-router-dom';
-import {useShopQuery, MediaFile} 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
-        }
-      }
-    }
-  }
-
-  ${MediaFile.Fragment}
-`;

package/template-hydrogen/tailwind.config.js

@@ -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')],
-};