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

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

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

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

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

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

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

@@ -1,44 +0,0 @@
-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} />;
-}

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

@@ -1,130 +0,0 @@
-import clsx from 'clsx';
-import type {SerializeFrom} from '@shopify/remix-oxygen';
-import {MediaFile} from '@shopify/hydrogen-react';
-import type {
-  MediaImage,
-  Media,
-  Video as MediaVideo,
-} from '@shopify/hydrogen-react/storefront-api-types';
-import {Heading, Text, Link} from '~/components';
-import type {CollectionHero} from '~/routes/index';
-
-/**
- * Hero component that renders metafields attached to collection resources
- **/
-export function Hero({
-  byline,
-  cta,
-  handle,
-  heading,
-  height,
-  loading,
-  spread,
-  spreadSecondary,
-  top,
-}: SerializeFrom<CollectionHero>) {
-  return (
-    <Link to={`/collections/${handle}`}>
-      <section
-        className={clsx(
-          'relative justify-end flex flex-col w-full',
-          top && '-mt-nav',
-          height === 'full'
-            ? 'h-screen'
-            : 'aspect-[4/5] sm:aspect-square md:aspect-[5/4] lg:aspect-[3/2] xl:aspect-[2/1]',
-        )}
-      >
-        <div className="absolute inset-0 grid flex-grow grid-flow-col pointer-events-none auto-cols-fr -z-10 content-stretch overflow-clip">
-          {spread?.reference && (
-            <div>
-              <SpreadMedia
-                scale={2}
-                sizes={
-                  spreadSecondary?.reference
-                    ? '(min-width: 80em) 700px, (min-width: 48em) 450px, 500px'
-                    : '(min-width: 80em) 1400px, (min-width: 48em) 900px, 500px'
-                }
-                widths={
-                  spreadSecondary?.reference
-                    ? [500, 450, 700]
-                    : [500, 900, 1400]
-                }
-                width={spreadSecondary?.reference ? 375 : 750}
-                data={spread.reference as Media}
-                loading={loading}
-              />
-            </div>
-          )}
-          {spreadSecondary?.reference && (
-            <div className="hidden md:block">
-              <SpreadMedia
-                sizes="(min-width: 80em) 700, (min-width: 48em) 450, 500"
-                widths={[450, 700]}
-                width={375}
-                data={spreadSecondary.reference as Media}
-              />
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-baseline justify-between gap-4 px-6 py-8 sm:px-8 md:px-12 bg-gradient-to-t dark:from-contrast/60 dark:text-primary from-primary/60 text-contrast">
-          {heading?.value && (
-            <Heading format as="h2" size="display" className="max-w-md">
-              {heading.value}
-            </Heading>
-          )}
-          {byline?.value && (
-            <Text format width="narrow" as="p" size="lead">
-              {byline.value}
-            </Text>
-          )}
-          {cta?.value && <Text size="lead">{cta.value}</Text>}
-        </div>
-      </section>
-    </Link>
-  );
-}
-
-interface SpreadMediaProps {
-  data: Media | MediaImage | MediaVideo;
-  loading?: HTMLImageElement['loading'];
-  scale?: 2 | 3;
-  sizes: string;
-  width: number;
-  widths: number[];
-}
-
-function SpreadMedia({
-  data,
-  loading,
-  scale,
-  sizes,
-  width,
-  widths,
-}: SpreadMediaProps) {
-  return (
-    <MediaFile
-      data={data}
-      alt={data.alt}
-      className="block object-cover w-full h-full"
-      // @ts-expect-error Need to update the types in H-UI to allow optional properties on this object
-      mediaOptions={{
-        video: {
-          controls: false,
-          muted: true,
-          loop: true,
-          playsInline: true,
-          autoPlay: true,
-          width: (scale ?? 1) * width,
-          previewImageOptions: {scale, src: data.previewImage?.url ?? ''},
-        },
-        image: {
-          loading,
-          loaderOptions: {scale, crop: 'center'},
-          widths,
-          sizes,
-          width,
-        },
-      }}
-    />
-  );
-}