@shopify/cli-hydrogen 4.0.0-alpha.8 → 4.0.0

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

@@ -1,492 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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>
-  );
-}