@shopify/cli-hydrogen 3.28.0 → 4.0.0-alpha.2

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

@@ -0,0 +1,180 @@
+import {useFetcher, useLocation, useMatches} from '@remix-run/react';
+import {Heading, Button, IconCheck} from '~/components';
+import {useCallback, useEffect, useRef} from 'react';
+import {useInView} from 'react-intersection-observer';
+import {Localizations, Locale, CartAction} from '~/lib/type';
+import {DEFAULT_LOCALE} from '~/lib/utils';
+import clsx from 'clsx';
+import {CartBuyerIdentityInput} from '@shopify/hydrogen-react/storefront-api-types';
+
+export function CountrySelector() {
+  const [root] = useMatches();
+  const fetcher = useFetcher();
+  const closeRef = useRef<HTMLDetailsElement>(null);
+  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const {pathname, search} = useLocation();
+  const pathWithoutLocale = `${pathname.replace(
+    selectedLocale.pathPrefix,
+    '',
+  )}${search}`;
+
+  const countries = (fetcher.data ?? {}) as Localizations;
+  const defaultLocale = countries?.['default'];
+  const defaultLocalePrefix = defaultLocale
+    ? `${defaultLocale?.language}-${defaultLocale?.country}`
+    : '';
+
+  const {ref, inView} = useInView({
+    threshold: 0,
+    triggerOnce: true,
+  });
+
+  const observerRef = useRef(null);
+  useEffect(() => {
+    ref(observerRef.current);
+  }, [ref, observerRef]);
+
+  // Get available countries list when in view
+  useEffect(() => {
+    if (!inView || fetcher.data || fetcher.state === 'loading') return;
+    fetcher.load('/api/countries');
+  }, [inView, fetcher]);
+
+  const closeDropdown = useCallback(() => {
+    closeRef.current?.removeAttribute('open');
+  }, []);
+
+  return (
+    <section
+      ref={observerRef}
+      className="grid gap-4 w-full md:max-w-[335px] md:ml-auto"
+      onMouseLeave={closeDropdown}
+    >
+      <Heading size="lead" className="cursor-default" as="h3">
+        Country
+      </Heading>
+      <div className="relative">
+        <details
+          className="border rounded border-contrast/30 dark:border-white open:round-b-none"
+          ref={closeRef}
+        >
+          <summary className="flex items-center justify-between w-full py-3 px-4 cursor-pointer">
+            {selectedLocale.label}
+          </summary>
+          <div className="overflow-auto border-t py-2 bg-contrast w-full max-h-36">
+            {countries &&
+              Object.keys(countries).map((countryPath) => {
+                const countryLocale = countries[countryPath];
+                const isSelected =
+                  countryLocale.language === selectedLocale.language &&
+                  countryLocale.country === selectedLocale.country;
+
+                const countryUrlPath = getCountryUrlPath({
+                  countryLocale,
+                  defaultLocalePrefix,
+                  pathWithoutLocale,
+                });
+
+                return (
+                  <Country
+                    key={countryPath}
+                    closeDropdown={closeDropdown}
+                    countryUrlPath={countryUrlPath}
+                    isSelected={isSelected}
+                    countryLocale={countryLocale}
+                  />
+                );
+              })}
+          </div>
+        </details>
+      </div>
+    </section>
+  );
+}
+
+function Country({
+  closeDropdown,
+  countryLocale,
+  countryUrlPath,
+  isSelected,
+}: {
+  closeDropdown: () => void;
+  countryLocale: Locale;
+  countryUrlPath: string;
+  isSelected: boolean;
+}) {
+  return (
+    <ChangeLocaleForm
+      key={countryLocale.country}
+      redirectTo={countryUrlPath}
+      buyerIdentity={{
+        countryCode: countryLocale.country,
+      }}
+    >
+      <Button
+        className={clsx([
+          'text-contrast dark:text-primary',
+          'bg-primary dark:bg-contrast w-full p-2 transition rounded flex justify-start',
+          'items-center text-left cursor-pointer py-2 px-4',
+        ])}
+        type="submit"
+        variant="primary"
+        onClick={closeDropdown}
+      >
+        {countryLocale.label}
+        {isSelected ? (
+          <span className="ml-2">
+            <IconCheck />
+          </span>
+        ) : null}
+      </Button>
+    </ChangeLocaleForm>
+  );
+}
+
+function ChangeLocaleForm({
+  children,
+  buyerIdentity,
+  redirectTo,
+}: {
+  children: React.ReactNode;
+  buyerIdentity: CartBuyerIdentityInput;
+  redirectTo: string;
+}) {
+  const fetcher = useFetcher();
+
+  return (
+    <fetcher.Form action="/cart" method="post">
+      <input
+        type="hidden"
+        name="cartAction"
+        value={CartAction.UPDATE_BUYER_IDENTITY}
+      />
+      <input
+        type="hidden"
+        name="buyerIdentity"
+        value={JSON.stringify(buyerIdentity)}
+      />
+      <input type="hidden" name="redirectTo" value={redirectTo} />
+      {children}
+    </fetcher.Form>
+  );
+}
+
+function getCountryUrlPath({
+  countryLocale,
+  defaultLocalePrefix,
+  pathWithoutLocale,
+}: {
+  countryLocale: Locale;
+  pathWithoutLocale: string;
+  defaultLocalePrefix: string;
+}) {
+  let countryPrefixPath = '';
+  const countryLocalePrefix = `${countryLocale.language}-${countryLocale.country}`;
+
+  if (countryLocalePrefix !== defaultLocalePrefix) {
+    countryPrefixPath = `/${countryLocalePrefix.toLowerCase()}`;
+  }
+  return `${countryPrefixPath}${pathWithoutLocale}`;
+}

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

@@ -0,0 +1,115 @@
+import {Fragment, useState} from 'react';
+import {Dialog, Transition} from '@headlessui/react';
+
+import {Heading, IconClose} from '~/components';
+
+/**
+ * Drawer component that opens on user click.
+ * @param heading - string. Shown at the top of the drawer.
+ * @param open - boolean state. if true opens the drawer.
+ * @param onClose - function should set the open state.
+ * @param openFrom - right, left
+ * @param children - react children node.
+ */
+export function Drawer({
+  heading,
+  open,
+  onClose,
+  openFrom = 'right',
+  children,
+}: {
+  heading?: string;
+  open: boolean;
+  onClose: () => void;
+  openFrom: 'right' | 'left';
+  children: React.ReactNode;
+}) {
+  const offScreen = {
+    right: 'translate-x-full',
+    left: '-translate-x-full',
+  };
+
+  return (
+    <Transition appear show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 left-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0">
+          <div className="absolute inset-0 overflow-hidden">
+            <div
+              className={`fixed inset-y-0 flex max-w-full ${
+                openFrom === 'right' ? 'right-0' : ''
+              }`}
+            >
+              <Transition.Child
+                as={Fragment}
+                enter="transform transition ease-in-out duration-300"
+                enterFrom={offScreen[openFrom]}
+                enterTo="translate-x-0"
+                leave="transform transition ease-in-out duration-300"
+                leaveFrom="translate-x-0"
+                leaveTo={offScreen[openFrom]}
+              >
+                <Dialog.Panel className="w-screen max-w-lg text-left align-middle transition-all transform shadow-xl h-screen-dynamic bg-contrast">
+                  <header
+                    className={`sticky top-0 flex items-center px-6 h-nav sm:px-8 md:px-12 ${
+                      heading ? 'justify-between' : 'justify-end'
+                    }`}
+                  >
+                    {heading !== null && (
+                      <Dialog.Title>
+                        <Heading as="span" size="lead" id="cart-contents">
+                          {heading}
+                        </Heading>
+                      </Dialog.Title>
+                    )}
+                    <button
+                      type="button"
+                      className="p-4 -m-4 transition text-primary hover:text-primary/50"
+                      onClick={onClose}
+                      data-test="close-cart"
+                    >
+                      <IconClose aria-label="Close panel" />
+                    </button>
+                  </header>
+                  {children}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}
+
+/* Use for associating arialabelledby with the title*/
+Drawer.Title = Dialog.Title;
+
+export function useDrawer(openDefault = false) {
+  const [isOpen, setIsOpen] = useState(openDefault);
+
+  function openDrawer() {
+    setIsOpen(true);
+  }
+
+  function closeDrawer() {
+    setIsOpen(false);
+  }
+
+  return {
+    isOpen,
+    openDrawer,
+    closeDrawer,
+  };
+}

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

@@ -0,0 +1,54 @@
+import {Image} from '@shopify/hydrogen-react';
+import type {SerializeFrom} from '@shopify/remix-oxygen';
+import type {Collection} from '@shopify/hydrogen-react/storefront-api-types';
+import {Heading, Section, Grid, Link} from '~/components';
+
+export function FeaturedCollections({
+  collections,
+  title = 'Collections',
+  ...props
+}: {
+  collections: SerializeFrom<Collection[]>;
+  title?: string;
+  [key: string]: any;
+}) {
+  const items = collections.filter((item) => item.image).length;
+  const haveCollections = collections.length > 0;
+
+  if (!haveCollections) return null;
+
+  return (
+    <Section {...props} heading={title}>
+      <Grid items={items}>
+        {collections.map((collection) => {
+          if (!collection?.image) {
+            return null;
+          }
+          return (
+            <Link key={collection.id} to={`/collections/${collection.handle}`}>
+              <div className="grid gap-4">
+                <div className="card-image bg-primary/5 aspect-[3/2]">
+                  {collection?.image && (
+                    <Image
+                      alt={`Image of ${collection.title}`}
+                      data={collection.image}
+                      height={400}
+                      sizes="(max-width: 32em) 100vw, 33vw"
+                      width={600}
+                      widths={[400, 500, 600, 700, 800, 900]}
+                      loaderOptions={{
+                        scale: 2,
+                        crop: 'center',
+                      }}
+                    />
+                  )}
+                </div>
+                <Heading size="copy">{collection.title}</Heading>
+              </div>
+            </Link>
+          );
+        })}
+      </Grid>
+    </Section>
+  );
+}

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

@@ -0,0 +1,116 @@
+import clsx from 'clsx';
+import {useEffect, useId, useMemo} from 'react';
+import {useFetcher} from '@remix-run/react';
+import {Heading, ProductCard, Skeleton, Text} from '~/components';
+import type {
+  Product,
+  ProductSortKeys,
+} from '@shopify/hydrogen-react/storefront-api-types';
+
+interface FeaturedProductsProps {
+  count: number;
+  heading: string;
+  layout?: 'drawer' | 'page';
+  onClose?: () => void;
+  query?: string;
+  reverse?: boolean;
+  sortKey: ProductSortKeys;
+}
+
+/**
+ * Display a grid of products and a heading based on some options.
+ * This components uses the storefront API products query
+ * @param count number of products to display
+ * @param query a filtering query
+ * @param reverse wether to reverse the product results
+ * @param sortKey Sort the underlying list by the given key.
+ * @see query https://shopify.dev/api/storefront/2023-01/queries/products
+ * @see filters https://shopify.dev/api/storefront/2023-01/queries/products#argument-products-query
+ */
+export function FeaturedProducts({
+  count = 4,
+  heading = 'Shop Best Sellers',
+  layout = 'drawer',
+  onClose,
+  query,
+  reverse,
+  sortKey = 'BEST_SELLING',
+}: FeaturedProductsProps) {
+  const {load, data} = useFetcher();
+  const queryString = useMemo(
+    () =>
+      Object.entries({count, sortKey, query, reverse})
+        .map(([key, val]) => (val ? `${key}=${val}` : null))
+        .filter(Boolean)
+        .join('&'),
+    [count, sortKey, query, reverse],
+  );
+
+  useEffect(() => {
+    load(`/api/products?${queryString}`);
+  }, [load, queryString]);
+
+  return (
+    <>
+      <Heading format size="copy" className="t-4">
+        {heading}
+      </Heading>
+      <div
+        className={clsx([
+          `grid grid-cols-2 gap-x-6 gap-y-8`,
+          layout === 'page' ? 'md:grid-cols-4 sm:grid-col-4' : '',
+        ])}
+      >
+        <FeatureProductsContent
+          count={count}
+          onClick={onClose}
+          products={data?.products as Product[]}
+        />
+      </div>
+    </>
+  );
+}
+
+/**
+ * Render the FeaturedProducts content based on the fetcher's state. "loading", "empty" or "products"
+ */
+function FeatureProductsContent({
+  count = 4,
+  onClick,
+  products,
+}: {
+  count: FeaturedProductsProps['count'];
+  products: Product[] | undefined;
+  onClick?: () => void;
+}) {
+  const id = useId();
+
+  if (!products) {
+    return (
+      <>
+        {[...new Array(count)].map((_, i) => (
+          <div key={`${id + i}`} className="grid gap-2">
+            <Skeleton className="aspect-[3/4]" />
+            <Skeleton className="w-32 h-4" />
+          </div>
+        ))}
+      </>
+    );
+  }
+
+  if (products?.length === 0) {
+    return <Text format>No products found.</Text>;
+  }
+
+  return (
+    <>
+      {products.map((product) => (
+        <ProductCard
+          product={product as Product}
+          key={product.id}
+          onClick={onClick}
+        />
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import {useEffect} from 'react';
+import {useFetcher} from '@remix-run/react';
+import type {
+  Collection,
+  Product,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {FeaturedCollections} from './FeaturedCollections';
+import {ProductSwimlane} from './ProductSwimlane';
+import {usePrefixPathWithLocale} from '~/lib/utils';
+
+export interface FeaturedData {
+  featuredCollections: Collection[];
+  featuredProducts: Product[];
+}
+
+export function FeaturedSection() {
+  const {load, data} = useFetcher();
+  const path = usePrefixPathWithLocale('/featured-products');
+
+  useEffect(() => {
+    load(path);
+  }, [load, path]);
+
+  if (!data) return null;
+
+  const {featuredCollections, featuredProducts} = data as FeaturedData;
+
+  return (
+    <>
+      {featuredCollections.length < 2 && (
+        <FeaturedCollections
+          title="Popular Collections"
+          collections={featuredCollections}
+        />
+      )}
+      <ProductSwimlane products={featuredProducts} />
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+import {Button} from './Button';
+import {FeaturedSection} from './FeaturedSection';
+import {PageHeader, Text} from './Text';
+
+export function GenericError({
+  error,
+}: {
+  error?: {message: string; stack?: string};
+}) {
+  const heading = `Something’s wrong here.`;
+  let description = `We found an error while loading this page.`;
+
+  // TODO hide error in prod?
+  if (error) {
+    description += `\n${error.message}`;
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+
+  return (
+    <>
+      <PageHeader heading={heading}>
+        <Text width="narrow" as="p">
+          {description}
+        </Text>
+        {error?.stack && (
+          <pre
+            style={{
+              padding: '2rem',
+              background: 'hsla(10, 50%, 50%, 0.1)',
+              color: 'red',
+              overflow: 'auto',
+              maxWidth: '100%',
+            }}
+            dangerouslySetInnerHTML={{
+              __html: addLinksToStackTrace(error.stack),
+            }}
+          />
+        )}
+        <Button width="auto" variant="secondary" to={'/'}>
+          Take me to the home page
+        </Button>
+      </PageHeader>
+      <FeaturedSection />
+    </>
+  );
+}
+
+function addLinksToStackTrace(stackTrace: string) {
+  return stackTrace?.replace(
+    /^\s*at\s?.*?[(\s]((\/|\w\:)[^)\n]+)/gim,
+    (all, m1) =>
+      all.replace(
+        m1,
+        `<a href="vscode://file${m1}" class="hover:underline">${m1}</a>`,
+      ),
+  );
+}

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

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+
+export function Grid({
+  as: Component = 'div',
+  className,
+  flow = 'row',
+  gap = 'default',
+  items = 4,
+  layout = 'default',
+  ...props
+}: {
+  as?: React.ElementType;
+  className?: string;
+  flow?: 'row' | 'col';
+  gap?: 'default' | 'blog';
+  items?: number;
+  layout?: 'default' | 'products' | 'auto' | 'blog';
+  [key: string]: any;
+}) {
+  const layouts = {
+    default: `grid-cols-1 ${items === 2 && 'md:grid-cols-2'}  ${
+      items === 3 && 'sm:grid-cols-3'
+    } ${items > 3 && 'md:grid-cols-3'} ${items >= 4 && 'lg:grid-cols-4'}`,
+    products: `grid-cols-2 ${items >= 3 && 'md:grid-cols-3'} ${
+      items >= 4 && 'lg:grid-cols-4'
+    }`,
+    auto: 'auto-cols-auto',
+    blog: 'grid-cols-1 md:grid-cols-2',
+  };
+
+  const gaps = {
+    default: 'grid gap-2 gap-y-6 md:gap-4 lg:gap-6',
+    blog: 'grid gap-6',
+  };
+
+  const flows = {
+    row: 'grid-flow-row',
+    col: 'grid-flow-col',
+  };
+
+  const styles = clsx(flows[flow], gaps[gap], layouts[layout], className);
+
+  return <Component {...props} className={styles} />;
+}