@shopify/cli-hydrogen 3.26.0 → 4.0.0-alpha.1

package/dist/templates/demo-store/app/components/Layout.tsx

@@ -0,0 +1,492 @@
+import {
+  type EnhancedMenu,
+  type EnhancedMenuItem,
+  useIsHomePath,
+} from '~/lib/utils';
+import {
+  Drawer,
+  useDrawer,
+  Text,
+  Input,
+  IconAccount,
+  IconBag,
+  IconSearch,
+  Heading,
+  IconMenu,
+  IconCaret,
+  Section,
+  CountrySelector,
+  Cart,
+  CartLoading,
+  Link,
+} from '~/components';
+import {useParams, Form, Await, useMatches} from '@remix-run/react';
+import {useWindowScroll} from 'react-use';
+import {Disclosure} from '@headlessui/react';
+import type {LayoutData} from '~/data';
+import {Suspense, useEffect, useMemo} from 'react';
+import {useIsHydrated} from '~/hooks/useIsHydrated';
+import {useCartFetchers} from '~/hooks/useCartFetchers';
+
+export function Layout({
+  children,
+  layout,
+}: {
+  children: React.ReactNode;
+  layout: LayoutData;
+}) {
+  return (
+    <>
+      <div className="flex flex-col min-h-screen">
+        <div className="">
+          <a href="#mainContent" className="sr-only">
+            Skip to content
+          </a>
+        </div>
+        <Header
+          title={layout?.shop.name ?? 'Hydrogen'}
+          menu={layout?.headerMenu}
+        />
+        <main role="main" id="mainContent" className="flex-grow">
+          {children}
+        </main>
+      </div>
+      <Footer menu={layout?.footerMenu} />
+    </>
+  );
+}
+
+function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
+  const isHome = useIsHomePath();
+
+  const {
+    isOpen: isCartOpen,
+    openDrawer: openCart,
+    closeDrawer: closeCart,
+  } = useDrawer();
+
+  const {
+    isOpen: isMenuOpen,
+    openDrawer: openMenu,
+    closeDrawer: closeMenu,
+  } = useDrawer();
+
+  const addToCartFetchers = useCartFetchers('ADD_TO_CART');
+
+  // toggle cart drawer when adding to cart
+  useEffect(() => {
+    if (isCartOpen || !addToCartFetchers.length) return;
+    openCart();
+  }, [addToCartFetchers, isCartOpen, openCart]);
+
+  return (
+    <>
+      <CartDrawer isOpen={isCartOpen} onClose={closeCart} />
+      {menu && (
+        <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
+      )}
+      <DesktopHeader
+        isHome={isHome}
+        title={title}
+        menu={menu}
+        openCart={openCart}
+      />
+      <MobileHeader
+        isHome={isHome}
+        title={title}
+        openCart={openCart}
+        openMenu={openMenu}
+      />
+    </>
+  );
+}
+
+function CartDrawer({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
+  const [root] = useMatches();
+
+  return (
+    <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
+      <div className="grid">
+        <Suspense fallback={<CartLoading />}>
+          <Await resolve={root.data?.cart}>
+            {(cart) => <Cart layout="drawer" onClose={onClose} cart={cart} />}
+          </Await>
+        </Suspense>
+      </div>
+    </Drawer>
+  );
+}
+
+export function MenuDrawer({
+  isOpen,
+  onClose,
+  menu,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  menu: EnhancedMenu;
+}) {
+  return (
+    <Drawer open={isOpen} onClose={onClose} openFrom="left" heading="Menu">
+      <div className="grid">
+        <MenuMobileNav menu={menu} onClose={onClose} />
+      </div>
+    </Drawer>
+  );
+}
+
+function MenuMobileNav({
+  menu,
+  onClose,
+}: {
+  menu: EnhancedMenu;
+  onClose: () => void;
+}) {
+  const styles = {
+    link: 'pb-1',
+    linkActive: 'pb-1 border-b -mb-px',
+  };
+
+  return (
+    <nav className="grid gap-4 p-6 sm:gap-6 sm:px-12 sm:py-8">
+      {/* Top level menu items */}
+      {(menu?.items || []).map((item) => (
+        <span key={item.id} className="block">
+          <Link
+            to={item.to}
+            target={item.target}
+            onClick={onClose}
+            className={({isActive}) =>
+              isActive ? styles.linkActive : styles.link
+            }
+          >
+            <Text as="span" size="copy">
+              {item.title}
+            </Text>
+          </Link>
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+function MobileHeader({
+  title,
+  isHome,
+  openCart,
+  openMenu,
+}: {
+  title: string;
+  isHome: boolean;
+  openCart: () => void;
+  openMenu: () => void;
+}) {
+  const {y} = useWindowScroll();
+
+  const styles = {
+    button: 'relative flex items-center justify-center w-8 h-8',
+    container: `${
+      isHome
+        ? 'bg-primary/80 dark:bg-contrast/60 text-contrast dark:text-primary shadow-darkHeader'
+        : 'bg-contrast/80 text-primary'
+    } ${
+      y > 50 && !isHome ? 'shadow-lightHeader ' : ''
+    }flex lg:hidden items-center h-nav sticky backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-4 px-4 md:px-8`,
+  };
+  const params = useParams();
+
+  return (
+    <header role="banner" className={styles.container}>
+      <div className="flex items-center justify-start w-full gap-4">
+        <button onClick={openMenu} className={styles.button}>
+          <IconMenu />
+        </button>
+        <Form
+          method="get"
+          action={params.lang ? `/${params.lang}/search` : '/search'}
+          className="items-center gap-2 sm:flex"
+        >
+          <button type="submit" className={styles.button}>
+            <IconSearch />
+          </button>
+          <Input
+            className={
+              isHome
+                ? 'focus:border-contrast/20 dark:focus:border-primary/20'
+                : 'focus:border-primary/20'
+            }
+            type="search"
+            variant="minisearch"
+            placeholder="Search"
+            name="q"
+          />
+        </Form>
+      </div>
+
+      <Link
+        className="flex items-center self-stretch leading-[3rem] md:leading-[4rem] justify-center flex-grow w-full h-full"
+        to="/"
+      >
+        <Heading className="font-bold text-center" as={isHome ? 'h1' : 'h2'}>
+          {title}
+        </Heading>
+      </Link>
+
+      <div className="flex items-center justify-end w-full gap-4">
+        <Link to="/account" className={styles.button}>
+          <IconAccount />
+        </Link>
+        <CartCount isHome={isHome} openCart={openCart} />
+      </div>
+    </header>
+  );
+}
+
+function DesktopHeader({
+  isHome,
+  menu,
+  openCart,
+  title,
+}: {
+  isHome: boolean;
+  openCart: () => void;
+  menu?: EnhancedMenu;
+  title: string;
+}) {
+  const {y} = useWindowScroll();
+  const params = useParams();
+
+  const styles = {
+    link: 'pb-1',
+    linkActive: 'pb-1 border-b -mb-px',
+    button:
+      'relative flex items-center justify-center w-8 h-8 focus:ring-primary/5',
+    container: `${
+      isHome
+        ? 'bg-primary/80 dark:bg-contrast/60 text-contrast dark:text-primary shadow-darkHeader'
+        : 'bg-contrast/80 text-primary'
+    } ${
+      y > 50 && !isHome ? 'shadow-lightHeader ' : ''
+    }hidden h-nav lg:flex items-center sticky transition duration-300 backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-8 px-12 py-8`,
+  };
+
+  return (
+    <header role="banner" className={styles.container}>
+      <div className="flex gap-12">
+        <Link className="font-bold" to="/" prefetch="intent">
+          {title}
+        </Link>
+        <nav className="flex gap-8">
+          {/* Top level menu items */}
+          {(menu?.items || []).map((item) => (
+            <Link
+              key={item.id}
+              to={item.to}
+              target={item.target}
+              prefetch="intent"
+              className={({isActive}) =>
+                isActive ? styles.linkActive : styles.link
+              }
+            >
+              {item.title}
+            </Link>
+          ))}
+        </nav>
+      </div>
+      <div className="flex items-center gap-1">
+        <Form
+          method="get"
+          action={params.lang ? `/${params.lang}/search` : '/search'}
+          className="flex items-center gap-2"
+        >
+          <Input
+            className={
+              isHome
+                ? 'focus:border-contrast/20 dark:focus:border-primary/20'
+                : 'focus:border-primary/20'
+            }
+            type="search"
+            variant="minisearch"
+            placeholder="Search"
+            name="q"
+          />
+          <button type="submit" className={styles.button}>
+            <IconSearch />
+          </button>
+        </Form>
+        <Link to="/account" className={styles.button}>
+          <IconAccount />
+        </Link>
+        <CartCount isHome={isHome} openCart={openCart} />
+      </div>
+    </header>
+  );
+}
+
+function CartCount({
+  isHome,
+  openCart,
+}: {
+  isHome: boolean;
+  openCart: () => void;
+}) {
+  const [root] = useMatches();
+
+  return (
+    <Suspense fallback={<Badge count={0} dark={isHome} openCart={openCart} />}>
+      <Await resolve={root.data?.cart}>
+        {(cart) => (
+          <Badge
+            dark={isHome}
+            openCart={openCart}
+            count={cart?.totalQuantity || 0}
+          />
+        )}
+      </Await>
+    </Suspense>
+  );
+}
+
+function Badge({
+  openCart,
+  dark,
+  count,
+}: {
+  count: number;
+  dark: boolean;
+  openCart: () => void;
+}) {
+  const isHydrated = useIsHydrated();
+
+  const BadgeCounter = useMemo(
+    () => (
+      <>
+        <IconBag />
+        <div
+          className={`${
+            dark
+              ? 'text-primary bg-contrast dark:text-contrast dark:bg-primary'
+              : 'text-contrast bg-primary'
+          } absolute bottom-1 right-1 text-[0.625rem] font-medium subpixel-antialiased h-3 min-w-[0.75rem] flex items-center justify-center leading-none text-center rounded-full w-auto px-[0.125rem] pb-px`}
+        >
+          <span>{count || 0}</span>
+        </div>
+      </>
+    ),
+    [count, dark],
+  );
+
+  return isHydrated ? (
+    <button
+      onClick={openCart}
+      className={
+        'relative flex items-center justify-center w-8 h-8 focus:ring-primary/5'
+      }
+    >
+      {BadgeCounter}
+    </button>
+  ) : (
+    <Link
+      to="/cart"
+      className={
+        'relative flex items-center justify-center w-8 h-8 focus:ring-primary/5'
+      }
+    >
+      {BadgeCounter}
+    </Link>
+  );
+}
+
+function Footer({menu}: {menu?: EnhancedMenu}) {
+  const isHome = useIsHomePath();
+  const itemsCount = menu
+    ? menu?.items?.length + 1 > 4
+      ? 4
+      : menu?.items?.length + 1
+    : [];
+
+  return (
+    <Section
+      divider={isHome ? 'none' : 'top'}
+      as="footer"
+      role="contentinfo"
+      className={`grid min-h-[25rem] items-start grid-flow-row w-full gap-6 py-8 px-6 md:px-8 lg:px-12
+        border-b md:gap-8 lg:gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-${itemsCount}
+        bg-primary dark:bg-contrast dark:text-primary text-contrast overflow-hidden`}
+    >
+      <FooterMenu menu={menu} />
+      <CountrySelector />
+      <div
+        className={`self-end pt-8 opacity-50 md:col-span-2 lg:col-span-${itemsCount}`}
+      >
+        &copy; {new Date().getFullYear()} / Shopify, Inc. Hydrogen is an MIT
+        Licensed Open Source project. This website is carbon&nbsp;neutral.
+      </div>
+    </Section>
+  );
+}
+
+const FooterLink = ({item}: {item: EnhancedMenuItem}) => {
+  if (item.to.startsWith('http')) {
+    return (
+      <a href={item.to} target={item.target} rel="noopener noreferrer">
+        {item.title}
+      </a>
+    );
+  }
+
+  return (
+    <Link to={item.to} target={item.target} prefetch="intent">
+      {item.title}
+    </Link>
+  );
+};
+
+function FooterMenu({menu}: {menu?: EnhancedMenu}) {
+  const styles = {
+    section: 'grid gap-4',
+    nav: 'grid gap-2 pb-6',
+  };
+
+  return (
+    <>
+      {(menu?.items || []).map((item: EnhancedMenuItem) => (
+        <section key={item.id} className={styles.section}>
+          <Disclosure>
+            {({open}) => (
+              <>
+                <Disclosure.Button className="text-left md:cursor-default">
+                  <Heading className="flex justify-between" size="lead" as="h3">
+                    {item.title}
+                    {item?.items?.length > 0 && (
+                      <span className="md:hidden">
+                        <IconCaret direction={open ? 'up' : 'down'} />
+                      </span>
+                    )}
+                  </Heading>
+                </Disclosure.Button>
+                {item?.items?.length > 0 ? (
+                  <div
+                    className={`${
+                      open ? `max-h-48 h-fit` : `max-h-0 md:max-h-fit`
+                    } overflow-hidden transition-all duration-300`}
+                  >
+                    <Suspense data-comment="This suspense fixes a hydration bug in Disclosure.Panel with static prop">
+                      <Disclosure.Panel static>
+                        <nav className={styles.nav}>
+                          {item.items.map((subItem) => (
+                            <FooterLink key={subItem.id} item={subItem} />
+                          ))}
+                        </nav>
+                      </Disclosure.Panel>
+                    </Suspense>
+                  </div>
+                ) : null}
+              </>
+            )}
+          </Disclosure>
+        </section>
+      ))}{' '}
+    </>
+  );
+}

package/dist/templates/demo-store/app/components/Link.tsx

@@ -0,0 +1,46 @@
+import {
+  Link as RemixLink,
+  NavLink as RemixNavLink,
+  type NavLinkProps as RemixNavLinkProps,
+  type LinkProps as RemixLinkProps,
+  useMatches,
+} from '@remix-run/react';
+
+type LinkProps = Omit<RemixLinkProps, 'className'> & {
+  className?: RemixNavLinkProps['className'] | RemixLinkProps['className'];
+};
+
+/**
+ * In our app, we've chosen to wrap Remix's `Link` component to add
+ * helper functionality. If the `to` value is a string (not object syntax),
+ * we prefix the locale to the path if there is one.
+ *
+ * You could implement the same behavior throughout your app using the
+ * Remix-native nested routes. However, your route and component structure
+ * changes the level of nesting required to get the locale into the route,
+ * which may not be ideal for shared components or layouts.
+ *
+ * Likewise, your internationalization strategy may not require a locale
+ * in the pathname and instead rely on a domain, cookie, or header.
+ *
+ * Ultimately, it is up to you to decide how to implement this behavior.
+ */
+export function Link(props: LinkProps) {
+  const {to, className, ...resOfProps} = props;
+  const [root] = useMatches();
+  const selectedLocale = root.data?.selectedLocale;
+
+  let toWithLocale = to;
+
+  if (typeof to === 'string') {
+    toWithLocale = selectedLocale ? `${selectedLocale.pathPrefix}${to}` : to;
+  }
+
+  if (typeof className === 'function') {
+    return (
+      <RemixNavLink to={toWithLocale} className={className} {...resOfProps} />
+    );
+  }
+
+  return <RemixLink to={toWithLocale} className={className} {...resOfProps} />;
+}

package/dist/templates/demo-store/app/components/Modal.tsx

@@ -0,0 +1,46 @@
+import {IconClose, Link} from '~/components';
+
+export function Modal({
+  children,
+  cancelLink,
+}: {
+  children: React.ReactNode;
+  cancelLink: string;
+}) {
+  return (
+    <div
+      className="relative z-50"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+      id="modal-bg"
+    >
+      <div className="fixed inset-0 transition-opacity bg-opacity-75 bg-primary/40"></div>
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
+          <div
+            className="relative flex-1 px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform rounded shadow-xl bg-contrast sm:my-12 sm:flex-none sm:w-full sm:max-w-sm sm:p-6"
+            role="button"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onKeyPress={(e) => {
+              e.stopPropagation();
+            }}
+            tabIndex={0}
+          >
+            <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+              <Link
+                to={cancelLink}
+                className="p-4 -m-4 transition text-primary hover:text-primary/50"
+              >
+                <IconClose aria-label="Close panel" />
+              </Link>
+            </div>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/demo-store/app/components/NotFound.tsx

@@ -0,0 +1,22 @@
+import {Button} from './Button';
+import {FeaturedSection} from './FeaturedSection';
+import {PageHeader, Text} from './Text';
+
+export function NotFound({type = 'page'}: {type?: string}) {
+  const heading = `We’ve lost this ${type}`;
+  const description = `We couldn’t find the ${type} you’re looking for. Try checking the URL or heading back to the home page.`;
+
+  return (
+    <>
+      <PageHeader heading={heading}>
+        <Text width="narrow" as="p">
+          {description}
+        </Text>
+        <Button width="auto" variant="secondary" to={'/'}>
+          Take me to the home page
+        </Button>
+      </PageHeader>
+      <FeaturedSection />
+    </>
+  );
+}

package/dist/templates/demo-store/app/components/OrderCard.tsx

@@ -0,0 +1,85 @@
+import {flattenConnection} from '@shopify/hydrogen-react';
+import type {
+  Order,
+  OrderLineItem,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {Heading, Text, Link} from '~/components';
+import {statusMessage} from '~/lib/utils';
+
+export function OrderCard({order}: {order: Order}) {
+  if (!order?.id) return null;
+  const [legacyOrderId, key] = order!.id!.split('/').pop()!.split('?');
+  const lineItems = flattenConnection<OrderLineItem>(order?.lineItems);
+
+  return (
+    <li className="grid text-center border rounded">
+      <Link
+        className="grid items-center gap-4 p-4 md:gap-6 md:p-6 md:grid-cols-2"
+        to={`/account/orders/${legacyOrderId}?${key}`}
+        prefetch="intent"
+      >
+        {lineItems[0].variant?.image && (
+          <div className="card-image aspect-square bg-primary/5">
+            <img
+              width={168}
+              height={168}
+              className="w-full fadeIn cover"
+              alt={lineItems[0].variant?.image?.altText ?? 'Order image'}
+              src={lineItems[0].variant?.image.url}
+            />
+          </div>
+        )}
+        <div
+          className={`flex-col justify-center text-left ${
+            !lineItems[0].variant?.image && 'md:col-span-2'
+          }`}
+        >
+          <Heading as="h3" format size="copy">
+            {lineItems.length > 1
+              ? `${lineItems[0].title} +${lineItems.length - 1} more`
+              : lineItems[0].title}
+          </Heading>
+          <dl className="grid grid-gap-1">
+            <dt className="sr-only">Order ID</dt>
+            <dd>
+              <Text size="fine" color="subtle">
+                Order No. {order.orderNumber}
+              </Text>
+            </dd>
+            <dt className="sr-only">Order Date</dt>
+            <dd>
+              <Text size="fine" color="subtle">
+                {new Date(order.processedAt).toDateString()}
+              </Text>
+            </dd>
+            <dt className="sr-only">Fulfillment Status</dt>
+            <dd className="mt-2">
+              <span
+                className={`px-3 py-1 text-xs font-medium rounded-full ${
+                  order.fulfillmentStatus === 'FULFILLED'
+                    ? 'bg-green-100 text-green-800'
+                    : 'bg-primary/5 text-primary/50'
+                }`}
+              >
+                <Text size="fine">
+                  {statusMessage(order.fulfillmentStatus)}
+                </Text>
+              </span>
+            </dd>
+          </dl>
+        </div>
+      </Link>
+      <div className="self-end border-t">
+        <Link
+          className="block w-full p-2 text-center"
+          to={`/account/orders/${legacyOrderId}?${key}`}
+          prefetch="intent"
+        >
+          <Text color="subtle" className="ml-3">
+            View Details
+          </Text>
+        </Link>
+      </div>
+    </li>
+  );
+}