@shopify/create-hydrogen 0.1.2 → 0.3.0

package/README.md

@@ -0,0 +1,3 @@
+# Deprecated
+
+Please use `create-hydrogen-app` via `npm init hydrogen-app@latest` instead.

package/index.js

@@ -18,6 +18,10 @@ const renameFiles = {
   _gitignore: '.gitignore',
 };
 
+console.warn(
+  'DEPRECATED: Please use `npm init hydrogen-app@latest` or `yarn create hydrogen-app` instead.'
+);
+
 async function init() {
   let targetDir = argv._[0];
   if (!targetDir) {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "0.1.2",
+  "version": "0.3.0",
   "main": "index.js",
   "license": "MIT",
   "bin": {
@@ -24,5 +24,5 @@
     "kolorist": "^1.4.0",
     "minimist": "^1.2.5"
   },
-  "gitHead": "96feeab1f16917dbddff679e8e1022b23bfd9762"
+  "gitHead": "79eec7e076abe074755bbe42bc62f7f96dcd2ff8"
 }

package/template-hydrogen/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dev",
   "description": "This is a dev environment for Hydrogen",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -31,9 +31,10 @@
     "vite": "^2.6.0"
   },
   "dependencies": {
-    "@shopify/hydrogen": "^0.1.2",
+    "@shopify/hydrogen": "^0.3.0",
     "compression": "^1.7.4",
     "express": "^4.17.1",
+    "focus-trap-react": "^8.8.1",
     "graphql-tag": "^2.12.4",
     "react": "18.0.0-alpha-e6be2d531",
     "react-dom": "18.0.0-alpha-e6be2d531",

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

@@ -1,7 +1,7 @@
+import FocusTrap from 'focus-trap-react';
 import {
   useCart,
   useCartLinesTotalQuantity,
-  CartToggle,
   CartCheckoutButton,
   Link,
   CartLines,
@@ -10,94 +10,75 @@ import {
   CartEstimatedCost,
 } from '@shopify/hydrogen/client';
 
+import {useCartUI} from './CartUIProvider.client';
+
 export default function Cart() {
+  const {isCartOpen} = useCartUI();
   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>
+    <FocusTrap active={isCartOpen} focusTrapOptions={{allowOutsideClick: true}}>
+      <aside
+        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'
+        }`}
+        id="cart"
+        tabIndex={-1}
+        aria-hidden={!isCartOpen}
+        aria-label="Cart"
+      >
+        <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>
+            <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}
+            {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>
+            <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>
+      </aside>
+    </FocusTrap>
   );
 }
 
-export function CartIcon() {
+function CartHeader() {
+  const {isCartOpen, toggleCart} = useCartUI();
   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>
+      <button
+        type="button"
+        aria-expanded={isCartOpen}
+        aria-controls="cart"
+        onClick={toggleCart}
+      >
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -113,9 +94,36 @@ function CartHeader() {
           </svg>
         </div>
         <span className="sr-only">Close cart</span>
-      </CartToggle>
+      </button>
       <div className="h-12 w-12 p-2 md:h-7 md:w-7 md:p-0">
-        <CartIcon />
+        <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>
       </div>
     </>
   );

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

@@ -1,5 +1,8 @@
+import {useCallback} from 'react';
 import {CartProvider as ShopifyCartProvider} from '@shopify/hydrogen/client';
 
+import CartUIProvider, {useCartUI} from './CartUIProvider.client';
+
 /**
  * TODO: Remove this re-export once we find a long-term solution for
  * mixed Hydrogen Client Components.
@@ -8,8 +11,31 @@ import {CartProvider as ShopifyCartProvider} from '@shopify/hydrogen/client';
 
 export default function CartProvider({children, cart, numCartLines}) {
   return (
-    <ShopifyCartProvider cart={cart} numCartLines={numCartLines}>
-      {children}
-    </ShopifyCartProvider>
+    <CartUIProvider>
+      <Provider cart={cart} numCartLines={numCartLines}>
+        {children}
+      </Provider>
+    </CartUIProvider>
+  );
+}
+
+function Provider({children, cart, numCartLines}) {
+  const {openCart} = useCartUI();
+
+  const open = useCallback(() => {
+    openCart();
+  }, [openCart]);
+
+  return (
+    <>
+      <ShopifyCartProvider
+        cart={cart}
+        numCartLines={numCartLines}
+        onLineAdd={open}
+        onCreate={open}
+      >
+        {children}
+      </ShopifyCartProvider>
+    </>
   );
 }

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

@@ -0,0 +1,42 @@
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  useContext,
+  createContext,
+} from 'react';
+
+export const CartContext = createContext(null);
+
+export default function CartUIProvider({children}) {
+  const [open, setOpen] = useState(false);
+
+  const openCart = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+
+  const closeCart = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const toggleCart = useCallback(() => {
+    setOpen(!open);
+  }, [setOpen, open]);
+
+  const contextValue = useMemo(() => {
+    return {
+      isCartOpen: open,
+      openCart,
+      closeCart,
+      toggleCart,
+    };
+  }, [open, openCart, closeCart, toggleCart]);
+
+  return (
+    <CartContext.Provider value={contextValue}>{children}</CartContext.Provider>
+  );
+}
+
+export function useCartUI() {
+  return useContext(CartContext);
+}

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

@@ -19,7 +19,7 @@ function GalleryPreview() {
     <ul className="grid lg:grid-cols-2 gap-10">
       {media.map((med) => {
         return (
-          <li key={med.id} className="relative">
+          <li key={med.id || med.image.id} className="relative">
             <MediaFile
               className="w-full bg-white rounded-md object-cover"
               media={med}

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

@@ -1,6 +1,6 @@
-import {Link, CartToggle} from '@shopify/hydrogen/client';
+import {Link, useCartLinesTotalQuantity} from '@shopify/hydrogen/client';
 
-import {CartIcon} from './Cart.client';
+import {useCartUI} from './CartUIProvider.client';
 
 export default function Header() {
   return (
@@ -38,9 +38,66 @@ export default function Header() {
       >
         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>
+      <CartToggle />
     </header>
   );
 }
+
+function CartToggle() {
+  const cartUI = useCartUI();
+  const itemCount = useCartLinesTotalQuantity();
+
+  if (cartUI == null) {
+    throw new Error('CartToggle must be a descendent of a CartUIProvider');
+  }
+
+  const {isCartOpen, toggleCart} = cartUI;
+
+  return (
+    <button
+      className="h-12 w-12 p-2 mr-2 md:mr-0 md:h-7 md:w-7 md:p-0"
+      type="button"
+      aria-expanded={isCartOpen}
+      aria-controls="cart"
+      onClick={toggleCart}
+    >
+      <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>
+    </button>
+  );
+}

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

@@ -1,22 +1,9 @@
-import {
-  CartUIProvider,
-  CartContainer,
-  useCartUI,
-} from '@shopify/hydrogen/client';
-
 import Header from './Header.client';
 import Footer from './Footer';
+import {useCartUI} from './CartUIProvider.client';
 import Cart from './Cart.client';
 
 export default function Layout({children}) {
-  return (
-    <CartUIProvider>
-      <InnerLayout>{children}</InnerLayout>
-    </CartUIProvider>
-  );
-}
-
-function InnerLayout({children}) {
   const {isCartOpen, closeCart} = useCartUI();
 
   return (
@@ -39,14 +26,7 @@ function InnerLayout({children}) {
             }`}
             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>
+          <Cart />
         </div>
         <main
           id="mainContent"

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

@@ -1,4 +1,4 @@
-import {useShopQuery, MediaFile} from '@shopify/hydrogen';
+import {useShopQuery, MediaFileFragment} from '@shopify/hydrogen';
 import {Link} from '@shopify/hydrogen/client';
 import gql from 'graphql-tag';
 
@@ -100,5 +100,5 @@ const QUERY = gql`
     }
   }
 
-  ${MediaFile.Fragment}
+  ${MediaFileFragment}
 `;

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

@@ -7,14 +7,14 @@ import {
 } from '@shopify/hydrogen/client';
 
 export default function ProductCard({product}) {
-  const firstVariant = product?.variants?.edges[0]?.node;
-
   if (!product) return null;
 
+  const firstVariant = product.variants?.edges[0]?.node;
+
   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" />
+        <SelectedVariantImage className="rounded-md bg-gray-100 h-80 w-96 mb-2 object-cover" />
         <ProductTitle className="text-gray-900 font-medium" />
       </Link>
       <div className="flex items-center">

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

@@ -1,18 +1,15 @@
-import {Product} from '@shopify/hydrogen/client';
+import {Product, flattenConnection} 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}) {
+export default function ProductDetails({product}) {
+  const initialVariant = flattenConnection(product.variants)[0];
   return (
-    <Layout>
-      <Seo product={data.product} />
-      <Product
-        product={data.product}
-        initialVariantId={data.product.variants.edges[0].node.id}
-      >
+    <>
+      <Seo product={product} />
+      <Product product={product} initialVariantId={initialVariant.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" />
@@ -179,6 +176,6 @@ export default function ProductDetails({data}) {
           </section>
         </div>
       </Product>
-    </Layout>
+    </>
   );
 }

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

@@ -5,7 +5,7 @@ import {
 } from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
-import HighlightedProduct from '../components/HightlightedProduct.client';
+import HighlightedProduct from '../components/HighlightedProduct.client';
 import Layout from '../components/Layout.client';
 import ProductCard from '../components/ProductCard.client';
 import MediaPlaceholder from '../components/MediaPlaceholder';
@@ -21,6 +21,7 @@ export default function Index() {
       numProductVariantMetafields: 10,
       numProductVariantSellingPlanAllocations: 10,
       numProductSellingPlanGroups: 10,
+      numProductSellingPlans: 10,
     },
   });
 
@@ -183,6 +184,7 @@ const QUERY = gql`
     $numProductVariantMetafields: Int!
     $numProductVariantSellingPlanAllocations: Int!
     $numProductSellingPlanGroups: Int!
+    $numProductSellingPlans: Int!
   ) {
     products(first: $numProducts) {
       edges {

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

@@ -1,4 +1,4 @@
-import {MediaFile, useShopQuery} from '@shopify/hydrogen';
+import {MediaFileFragment, useShopQuery} from '@shopify/hydrogen';
 import {useParams} from 'react-router-dom';
 import gql from 'graphql-tag';
 
@@ -65,5 +65,5 @@ const QUERY = gql`
     }
   }
 
-  ${MediaFile.Fragment}
+  ${MediaFileFragment}
 `;

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

@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
 
 import ProductDetails from '../../components/ProductDetails.client';
 import NotFound from '../../components/NotFound.server';
+import Layout from '../../components/Layout.client';
 
 export default function Product() {
   const {handle} = useParams();
@@ -18,6 +19,7 @@ export default function Product() {
       numProductVariantMetafields: 10,
       numProductVariantSellingPlanAllocations: 10,
       numProductSellingPlanGroups: 10,
+      numProductSellingPlans: 10,
     },
   });
 
@@ -25,7 +27,11 @@ export default function Product() {
     return <NotFound />;
   }
 
-  return <ProductDetails data={data} />;
+  return (
+    <Layout>
+      <ProductDetails product={data.product} />
+    </Layout>
+  );
 }
 
 const QUERY = gql`
@@ -37,6 +43,7 @@ const QUERY = gql`
     $numProductVariantMetafields: Int!
     $numProductVariantSellingPlanAllocations: Int!
     $numProductSellingPlanGroups: Int!
+    $numProductSellingPlans: Int!
   ) {
     product: product(handle: $handle) {
       id

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

@@ -1,6 +1,6 @@
 import {useEffect, useMemo, useState} from 'react';
 import {useHistory, useLocation} from 'react-router-dom';
-import {useShopQuery, MediaFile} from '@shopify/hydrogen';
+import {useShopQuery, MediaFileFragment} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
 import Layout from '../components/Layout.client';
@@ -103,5 +103,5 @@ const QUERY = gql`
     }
   }
 
-  ${MediaFile.Fragment}
+  ${MediaFileFragment}
 `;