@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/generator-templates/starter/.eslintignore

@@ -0,0 +1,5 @@
+build
+node_modules
+bin
+*.d.ts
+dist

package/dist/generator-templates/starter/.eslintrc.js

@@ -0,0 +1,18 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: [
+    '@remix-run/eslint-config',
+    'plugin:hydrogen/recommended',
+    'plugin:hydrogen/typescript',
+  ],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    'no-case-declarations': 'off',
+  },
+};

package/dist/generator-templates/starter/.graphqlrc.yml

@@ -0,0 +1 @@
+schema: node_modules/@shopify/hydrogen-react/storefront.schema.json

package/dist/generator-templates/starter/README.md

@@ -0,0 +1,40 @@
+# Hydrogen template: Skeleton
+
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen.
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)
+
+## What's included
+
+- Remix
+- Hydrogen
+- Oxygen
+- Shopify CLI
+- ESLint
+- Prettier
+- GraphQL generator
+- TypeScript and JavaScript flavors
+- Minimal setup of components and routes
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.14.0 or higher
+
+```bash
+npm create @shopify/hydrogen@latest
+```
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Local development
+
+```bash
+npm run dev
+```

package/dist/generator-templates/starter/app/components/Aside.tsx

@@ -0,0 +1,47 @@
+/**
+ * A side bar component with Overlay that works without JavaScript.
+ * @example
+ * ```ts
+ * <Aside id="search-aside" heading="SEARCH">`
+ *  <input type="search" />
+ *  ...
+ * </Aside>
+ * ```
+ */
+export function Aside({
+  children,
+  heading,
+  id = 'aside',
+}: {
+  children?: React.ReactNode;
+  heading: React.ReactNode;
+  id?: string;
+}) {
+  return (
+    <div aria-modal className="overlay" id={id} role="dialog">
+      <button
+        className="close-outside"
+        onClick={() => {
+          history.go(-1);
+          window.location.hash = '';
+        }}
+      />
+      <aside>
+        <header>
+          <h3>{heading}</h3>
+          <CloseAside />
+        </header>
+        <main>{children}</main>
+      </aside>
+    </div>
+  );
+}
+
+function CloseAside() {
+  return (
+    /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+    <a className="close" href="#" onChange={() => history.go(-1)}>
+      &times;
+    </a>
+  );
+}

package/dist/generator-templates/starter/app/components/Cart.tsx

@@ -0,0 +1,340 @@
+import {CartForm, Image, Money} from '@shopify/hydrogen';
+import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
+import {Link} from '@remix-run/react';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/utils';
+
+type CartLine = CartApiQueryFragment['lines']['nodes'][0];
+
+type CartMainProps = {
+  cart: CartApiQueryFragment | null;
+  layout: 'page' | 'aside';
+};
+
+export function CartMain({layout, cart}: CartMainProps) {
+  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
+  const withDiscount =
+    cart &&
+    Boolean(cart.discountCodes.filter((code) => code.applicable).length);
+  const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
+
+  return (
+    <div className={className}>
+      <CartEmpty hidden={linesCount} layout={layout} />
+      <CartDetails cart={cart} layout={layout} />
+    </div>
+  );
+}
+
+function CartDetails({layout, cart}: CartMainProps) {
+  const cartHasItems = !!cart && cart.totalQuantity > 0;
+
+  return (
+    <div className="cart-details">
+      <CartLines lines={cart?.lines} layout={layout} />
+      {cartHasItems && (
+        <CartSummary cost={cart.cost} layout={layout}>
+          <CartDiscounts discountCodes={cart.discountCodes} />
+          <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
+        </CartSummary>
+      )}
+    </div>
+  );
+}
+
+function CartLines({
+  lines,
+  layout,
+}: {
+  layout: CartMainProps['layout'];
+  lines: CartApiQueryFragment['lines'] | undefined;
+}) {
+  if (!lines) return null;
+
+  return (
+    <div aria-labelledby="cart-lines">
+      <ul>
+        {lines.nodes.map((line) => (
+          <CartLineItem key={line.id} line={line} layout={layout} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function CartLineItem({
+  layout,
+  line,
+}: {
+  layout: CartMainProps['layout'];
+  line: CartLine;
+}) {
+  const {id, merchandise} = line;
+  const {product, title, image, selectedOptions} = merchandise;
+  const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
+
+  return (
+    <li key={id} className="cart-line">
+      {image && (
+        <Image
+          alt={title}
+          aspectRatio="1/1"
+          data={image}
+          height={100}
+          loading="lazy"
+          width={100}
+        />
+      )}
+
+      <div>
+        <Link
+          prefetch="intent"
+          to={lineItemUrl}
+          onClick={() => {
+            if (layout === 'aside') {
+              // close the drawer
+              window.location.href = lineItemUrl;
+            }
+          }}
+        >
+          <p>
+            <strong>{product.title}</strong>
+          </p>
+        </Link>
+        <CartLinePrice line={line} as="span" />
+        <ul>
+          {selectedOptions.map((option) => (
+            <li key={option.name}>
+              <small>
+                {option.name}: {option.value}
+              </small>
+            </li>
+          ))}
+        </ul>
+        <CartLineQuantity line={line} />
+      </div>
+    </li>
+  );
+}
+
+function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
+  if (!checkoutUrl) return null;
+
+  return (
+    <div>
+      <a href={checkoutUrl} target="_self">
+        <p>Continue to Checkout &rarr;</p>
+      </a>
+      <br />
+    </div>
+  );
+}
+
+export function CartSummary({
+  cost,
+  layout,
+  children = null,
+}: {
+  children?: React.ReactNode;
+  cost: CartApiQueryFragment['cost'];
+  layout: CartMainProps['layout'];
+}) {
+  const className =
+    layout === 'page' ? 'cart-summary-page' : 'cart-summary-aside';
+
+  return (
+    <div aria-labelledby="cart-summary" className={className}>
+      <h4>Totals</h4>
+      <dl className="cart-subtotal">
+        <dt>Subtotal</dt>
+        <dd>
+          {cost?.subtotalAmount?.amount ? (
+            <Money data={cost?.subtotalAmount} />
+          ) : (
+            '-'
+          )}
+        </dd>
+      </dl>
+      {children}
+    </div>
+  );
+}
+
+function CartLineRemoveButton({lineIds}: {lineIds: string[]}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.LinesRemove}
+      inputs={{lineIds}}
+    >
+      <button type="submit">Remove</button>
+    </CartForm>
+  );
+}
+
+function CartLineQuantity({line}: {line: CartLine}) {
+  if (!line || typeof line?.quantity === 'undefined') return null;
+  const {id: lineId, quantity} = line;
+  const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
+  const nextQuantity = Number((quantity + 1).toFixed(0));
+
+  return (
+    <div className="cart-line-quantiy">
+      <small>Quantity: {quantity} &nbsp;&nbsp;</small>
+      <CartLineUpdateButton lines={[{id: lineId, quantity: prevQuantity}]}>
+        <button
+          aria-label="Decrease quantity"
+          disabled={quantity <= 1}
+          name="decrease-quantity"
+          value={prevQuantity}
+        >
+          <span>&#8722; </span>
+        </button>
+      </CartLineUpdateButton>
+      &nbsp;
+      <CartLineUpdateButton lines={[{id: lineId, quantity: nextQuantity}]}>
+        <button
+          aria-label="Increase quantity"
+          name="increase-quantity"
+          value={nextQuantity}
+        >
+          <span>&#43;</span>
+        </button>
+      </CartLineUpdateButton>
+      &nbsp;
+      <CartLineRemoveButton lineIds={[lineId]} />
+    </div>
+  );
+}
+
+function CartLinePrice({
+  line,
+  priceType = 'regular',
+  ...passthroughProps
+}: {
+  line: CartLine;
+  priceType?: 'regular' | 'compareAt';
+  [key: string]: any;
+}) {
+  if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount) return null;
+
+  const moneyV2 =
+    priceType === 'regular'
+      ? line.cost.totalAmount
+      : line.cost.compareAtAmountPerQuantity;
+
+  if (moneyV2 == null) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Money withoutTrailingZeros {...passthroughProps} data={moneyV2} />
+    </div>
+  );
+}
+
+export function CartEmpty({
+  hidden = false,
+  layout = 'aside',
+}: {
+  hidden: boolean;
+  layout?: CartMainProps['layout'];
+}) {
+  return (
+    <div hidden={hidden}>
+      <br />
+      <p>
+        Looks like you haven&rsquo;t added anything yet, let&rsquo;s get you
+        started!
+      </p>
+      <br />
+      <Link
+        to="/collections"
+        onClick={() => {
+          if (layout === 'aside') {
+            window.location.href = '/collections';
+          }
+        }}
+      >
+        Continue shopping →
+      </Link>
+    </div>
+  );
+}
+
+function CartDiscounts({
+  discountCodes,
+}: {
+  discountCodes: CartApiQueryFragment['discountCodes'];
+}) {
+  const codes: string[] =
+    discountCodes
+      ?.filter((discount) => discount.applicable)
+      ?.map(({code}) => code) || [];
+
+  return (
+    <div>
+      {/* Have existing discount, display it with a remove option */}
+      <dl hidden={!codes.length}>
+        <div>
+          <dt>Discount(s)</dt>
+          <UpdateDiscountForm>
+            <div className="cart-discount">
+              <code>{codes?.join(', ')}</code>
+              &nbsp;
+              <button>Remove</button>
+            </div>
+          </UpdateDiscountForm>
+        </div>
+      </dl>
+
+      {/* Show an input to apply a discount */}
+      <UpdateDiscountForm discountCodes={codes}>
+        <div>
+          <input type="text" name="discountCode" placeholder="Discount code" />
+          &nbsp;
+          <button type="submit">Apply</button>
+        </div>
+      </UpdateDiscountForm>
+    </div>
+  );
+}
+
+function UpdateDiscountForm({
+  discountCodes,
+  children,
+}: {
+  discountCodes?: string[];
+  children: React.ReactNode;
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.DiscountCodesUpdate}
+      inputs={{
+        discountCodes: discountCodes || [],
+      }}
+    >
+      {children}
+    </CartForm>
+  );
+}
+
+function CartLineUpdateButton({
+  children,
+  lines,
+}: {
+  children: React.ReactNode;
+  lines: CartLineUpdateInput[];
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.LinesUpdate}
+      inputs={{lines}}
+    >
+      {children}
+    </CartForm>
+  );
+}

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -0,0 +1,99 @@
+import {useMatches, NavLink} from '@remix-run/react';
+import type {FooterQuery} from 'storefrontapi.generated';
+
+export function Footer({menu}: FooterQuery) {
+  return (
+    <footer className="footer">
+      <FooterMenu menu={menu} />
+    </footer>
+  );
+}
+
+function FooterMenu({menu}: Pick<FooterQuery, 'menu'>) {
+  const [root] = useMatches();
+  const publicStoreDomain = root?.data?.publicStoreDomain;
+  return (
+    <nav className="footer-menu" role="navigation">
+      {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
+        if (!item.url) return null;
+        // if the url is internal, we strip the domain
+        const url =
+          item.url.includes('myshopify.com') ||
+          item.url.includes(publicStoreDomain)
+            ? new URL(item.url).pathname
+            : item.url;
+        const isExternal = !url.startsWith('/');
+        return isExternal ? (
+          <a href={url} key={item.id} rel="noopener noreferrer" target="_blank">
+            {item.title}
+          </a>
+        ) : (
+          <NavLink
+            end
+            key={item.id}
+            prefetch="intent"
+            style={activeLinkStyle}
+            to={url}
+          >
+            {item.title}
+          </NavLink>
+        );
+      })}
+    </nav>
+  );
+}
+
+const FALLBACK_FOOTER_MENU = {
+  id: 'gid://shopify/Menu/199655620664',
+  items: [
+    {
+      id: 'gid://shopify/MenuItem/461633060920',
+      resourceId: 'gid://shopify/ShopPolicy/23358046264',
+      tags: [],
+      title: 'Privacy Policy',
+      type: 'SHOP_POLICY',
+      url: '/policies/privacy-policy',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461633093688',
+      resourceId: 'gid://shopify/ShopPolicy/23358013496',
+      tags: [],
+      title: 'Refund Policy',
+      type: 'SHOP_POLICY',
+      url: '/policies/refund-policy',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461633126456',
+      resourceId: 'gid://shopify/ShopPolicy/23358111800',
+      tags: [],
+      title: 'Shipping Policy',
+      type: 'SHOP_POLICY',
+      url: '/policies/shipping-policy',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461633159224',
+      resourceId: 'gid://shopify/ShopPolicy/23358079032',
+      tags: [],
+      title: 'Terms of Service',
+      type: 'SHOP_POLICY',
+      url: '/policies/terms-of-service',
+      items: [],
+    },
+  ],
+};
+
+function activeLinkStyle({
+  isActive,
+  isPending,
+}: {
+  isActive: boolean;
+  isPending: boolean;
+}) {
+  return {
+    fontWeight: isActive ? 'bold' : '',
+    color: isPending ? 'grey' : 'white',
+  };
+}