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

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

@@ -0,0 +1,277 @@
+import {useEffect, useMemo, useState} from 'react';
+import type {
+  Maybe,
+  PageInfo,
+  ProductConnection,
+} from '@shopify/hydrogen-react/storefront-api-types';
+
+import {useInView, type IntersectionOptions} from 'react-intersection-observer';
+import {useTransition, useLocation, useNavigate} from '@remix-run/react';
+
+type Connection = {
+  nodes: ProductConnection['nodes'] | any[];
+  pageInfo: PageInfo;
+};
+
+type PaginationState = {
+  nodes: ProductConnection['nodes'] | any[];
+  pageInfo: PageInfo | null;
+};
+
+type Props<Resource extends Connection> = {
+  connection: Resource;
+  autoLoadOnScroll?: boolean | IntersectionOptions;
+};
+
+interface PaginationInfo {
+  endCursor: Maybe<string> | undefined;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isLoading: boolean;
+  nextLinkRef: any;
+  nextPageUrl: string;
+  nodes: ProductConnection['nodes'] | any[];
+  prevPageUrl: string;
+  startCursor: Maybe<string> | undefined;
+}
+
+export function Pagination<Resource extends Connection>({
+  connection,
+  children = () => null,
+  autoLoadOnScroll = true,
+}: Props<Resource> & {
+  children: ({
+    endCursor,
+    hasNextPage,
+    hasPreviousPage,
+    isLoading,
+    nextPageUrl,
+    nodes,
+    prevPageUrl,
+    startCursor,
+  }: PaginationInfo) => JSX.Element | null;
+}) {
+  const transition = useTransition();
+  const isLoading = transition.state === 'loading';
+  const autoScrollEnabled = Boolean(autoLoadOnScroll);
+  const autoScrollConfig = (
+    autoScrollEnabled
+      ? autoLoadOnScroll
+      : {
+          threshold: 0,
+          rootMargin: '1000px 0px 0px 0px',
+        }
+  ) as IntersectionOptions;
+  const {ref: nextLinkRef, inView} = useInView(autoScrollConfig);
+  const {
+    endCursor,
+    hasNextPage,
+    hasPreviousPage,
+    nextPageUrl,
+    nodes,
+    prevPageUrl,
+    startCursor,
+  } = usePagination(connection);
+
+  // auto load next page if in view
+  useLoadMoreWhenInView({
+    disabled: !autoScrollEnabled,
+    connection: {
+      pageInfo: {startCursor, endCursor, hasPreviousPage, hasNextPage},
+      nodes,
+    },
+    inView,
+    isLoading,
+  });
+
+  return children({
+    endCursor,
+    hasNextPage,
+    hasPreviousPage,
+    isLoading,
+    nextLinkRef,
+    nextPageUrl,
+    nodes,
+    prevPageUrl,
+    startCursor,
+  });
+}
+
+/**
+ * Get cumulative pagination logic for a given connection
+ */
+export function usePagination(
+  connection: Connection,
+): Omit<PaginationInfo, 'isLoading' | 'nextLinkRef'> {
+  const [nodes, setNodes] = useState(connection.nodes);
+  const {state, search} = useLocation() as {
+    state: PaginationState;
+    search: string;
+  };
+  const params = new URLSearchParams(search);
+  const direction = params.get('direction');
+  const isPrevious = direction === 'previous';
+
+  const {hasNextPage, hasPreviousPage, startCursor, endCursor} =
+    connection.pageInfo;
+
+  const currentPageInfo = useMemo(() => {
+    let pageStartCursor =
+      state?.pageInfo?.startCursor === undefined
+        ? startCursor
+        : state.pageInfo.startCursor;
+
+    let pageEndCursor =
+      state?.pageInfo?.endCursor === undefined
+        ? endCursor
+        : state.pageInfo.endCursor;
+
+    if (state?.nodes) {
+      if (isPrevious) {
+        pageStartCursor = startCursor;
+      } else {
+        pageEndCursor = endCursor;
+      }
+    }
+
+    const previousPageExists =
+      state?.pageInfo?.hasPreviousPage === undefined
+        ? hasPreviousPage
+        : state.pageInfo.hasPreviousPage;
+
+    const nextPageExists =
+      state?.pageInfo?.hasNextPage === undefined
+        ? hasNextPage
+        : state.pageInfo.hasNextPage;
+
+    return {
+      startCursor: pageStartCursor,
+      endCursor: pageEndCursor,
+      hasPreviousPage: previousPageExists,
+      hasNextPage: nextPageExists,
+    };
+  }, [isPrevious, state, hasNextPage, hasPreviousPage, startCursor, endCursor]);
+
+  const prevPageUrl = useMemo(() => {
+    const params = new URLSearchParams(search);
+    params.set('direction', 'previous');
+    currentPageInfo.startCursor &&
+      params.set('cursor', currentPageInfo.startCursor);
+    return `?${params.toString()}`;
+  }, [search, currentPageInfo.startCursor]);
+
+  const nextPageUrl = useMemo(() => {
+    const params = new URLSearchParams(search);
+    params.set('direction', 'next');
+    currentPageInfo.endCursor &&
+      params.set('cursor', currentPageInfo.endCursor);
+    return `?${params.toString()}`;
+  }, [search, currentPageInfo.endCursor]);
+
+  // the only way to prevent hydration mismatches
+  useEffect(() => {
+    if (!state || !state?.nodes) {
+      setNodes(connection.nodes);
+      return;
+    }
+
+    if (isPrevious) {
+      setNodes([...connection.nodes, ...state.nodes]);
+    } else {
+      setNodes([...state.nodes, ...connection.nodes]);
+    }
+  }, [state, isPrevious, connection.nodes]);
+
+  return {...currentPageInfo, prevPageUrl, nextPageUrl, nodes};
+}
+
+/**
+ * Auto load the next pagination page when in view and autoLoadOnScroll is true
+ * @param disabled disable auto loading
+ * @param inView trigger element is in viewport
+ * @param isIdle page transition is idle
+ * @param connection Storefront API connection
+ */
+function useLoadMoreWhenInView<Resource extends Connection>({
+  disabled,
+  inView,
+  isLoading,
+  connection,
+}: Pick<Props<Resource>, 'autoLoadOnScroll' | 'connection'> & {
+  disabled: boolean;
+  inView: boolean;
+  isLoading: boolean;
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const {
+    pageInfo: {startCursor, endCursor, hasPreviousPage, hasNextPage},
+    nodes,
+  } = connection;
+
+  // load next when in view and autoLoadOnScroll
+  useEffect(() => {
+    if (!inView) return;
+    if (!hasNextPage) return;
+    if (!endCursor) return;
+    if (disabled) return;
+    if (isLoading) return;
+
+    const nextPageUrl =
+      location.pathname + `?index&cursor=${endCursor}&direction=next`;
+
+    navigate(nextPageUrl, {
+      state: {
+        pageInfo: {
+          endCursor,
+          hasPreviousPage,
+          startCursor,
+        },
+        nodes,
+      },
+    });
+  }, [
+    disabled,
+    endCursor,
+    hasNextPage,
+    hasPreviousPage,
+    inView,
+    isLoading,
+    nodes,
+    location.pathname,
+    navigate,
+    startCursor,
+  ]);
+}
+
+/**
+ * Get variables for route loader to support pagination
+ * @param autoLoadOnScroll enable auto loading
+ * @param inView trigger element is in viewport
+ * @param isIdle page transition is idle
+ * @param connection Storefront API connection
+ * @returns cumulativePageInfo {startCursor, endCursor, hasPreviousPage, hasNextPage}
+ */
+export function getPaginationVariables(request: Request, pageBy: number) {
+  const searchParams = new URLSearchParams(new URL(request.url).search);
+
+  const cursor = searchParams.get('cursor') ?? undefined;
+  const direction =
+    searchParams.get('direction') === 'previous' ? 'previous' : 'next';
+  const isPrevious = direction === 'previous';
+
+  const prevPage = {
+    last: pageBy,
+    startCursor: cursor ?? null,
+  };
+
+  const nextPage = {
+    first: pageBy,
+    endCursor: cursor ?? null,
+  };
+
+  const variables = isPrevious ? prevPage : nextPage;
+
+  return variables;
+}

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

@@ -0,0 +1,146 @@
+import clsx from 'clsx';
+import {
+  flattenConnection,
+  Image,
+  Money,
+  useMoney,
+} from '@shopify/hydrogen-react';
+import type {SerializeFrom} from '@shopify/remix-oxygen';
+import {Text, Link, Button, AddToCartButton} from '~/components';
+import {isDiscounted, isNewArrival} from '~/lib/utils';
+import {getProductPlaceholder} from '~/lib/placeholders';
+import type {
+  CartLineInput,
+  MoneyV2,
+  Product,
+  ProductVariant,
+  ProductVariantConnection,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {useFetcher, useMatches} from '@remix-run/react';
+
+export function ProductCard({
+  product,
+  label,
+  className,
+  loading,
+  onClick,
+}: {
+  product: SerializeFrom<Product>;
+  label?: string;
+  className?: string;
+  loading?: HTMLImageElement['loading'];
+  onClick?: () => void;
+}) {
+  let cardLabel;
+
+  const cartProduct = product?.variants ? product : getProductPlaceholder();
+  if (!cartProduct?.variants?.nodes?.length) return null;
+
+  const firstVariant = flattenConnection<ProductVariant>(
+    cartProduct?.variants as ProductVariantConnection,
+  )[0];
+
+  if (!firstVariant) return null;
+  const {image, price, compareAtPrice} = firstVariant;
+
+  if (label) {
+    cardLabel = label;
+  } else if (isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2)) {
+    cardLabel = 'Sale';
+  } else if (isNewArrival(product.publishedAt)) {
+    cardLabel = 'New';
+  }
+
+  return (
+    <div className="flex flex-col">
+      <Link
+        onClick={onClick}
+        to={`/products/${product.handle}`}
+        prefetch="intent"
+      >
+        <div className={clsx('grid gap-6', className)}>
+          <div className="card-image aspect-[4/5] bg-primary/5">
+            {image && (
+              <Image
+                className="aspect-[4/5] w-full object-cover fadeIn"
+                widths={[320]}
+                sizes="320px"
+                loaderOptions={{
+                  crop: 'center',
+                  scale: 2,
+                  width: 320,
+                  height: 400,
+                }}
+                data={image}
+                alt={image.altText || `Picture of ${product.title}`}
+                loading={loading}
+              />
+            )}
+            <Text
+              as="label"
+              size="fine"
+              className="absolute top-0 right-0 m-4 text-right text-notice"
+            >
+              {cardLabel}
+            </Text>
+          </div>
+          <div className="grid gap-1">
+            <Text
+              className="w-full overflow-hidden whitespace-nowrap text-ellipsis "
+              as="h3"
+            >
+              {product.title}
+            </Text>
+            <div className="flex gap-4">
+              <Text className="flex gap-4">
+                <Money withoutTrailingZeros data={price!} />
+                {isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
+                  <CompareAtPrice
+                    className={'opacity-50'}
+                    data={compareAtPrice as MoneyV2}
+                  />
+                )}
+              </Text>
+            </div>
+          </div>
+        </div>
+      </Link>
+      {firstVariant?.id && (
+        <AddToCartButton
+          lines={[
+            {
+              quantity: 1,
+              merchandiseId: firstVariant.id,
+            },
+          ]}
+          variant="secondary"
+          className="mt-2"
+        >
+          <Text as="span" className="flex items-center justify-center gap-2">
+            Add to Bag
+          </Text>
+        </AddToCartButton>
+      )}
+    </div>
+  );
+}
+
+function CompareAtPrice({
+  data,
+  className,
+}: {
+  data: MoneyV2;
+  className?: string;
+}) {
+  const {currencyNarrowSymbol, withoutTrailingZerosAndCurrency} =
+    useMoney(data);
+
+  const styles = clsx('strike', className);
+
+  return (
+    <span className={styles}>
+      {currencyNarrowSymbol}
+      {withoutTrailingZerosAndCurrency}
+    </span>
+  );
+}

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

@@ -0,0 +1,114 @@
+import type {MediaEdge} from '@shopify/hydrogen-react/storefront-api-types';
+import {ATTR_LOADING_EAGER} from '~/lib/const';
+import type {MediaImage} from '@shopify/hydrogen-react/storefront-api-types';
+
+/**
+ * A client component that defines a media gallery for hosting images, 3D models, and videos of products
+ */
+export function ProductGallery({
+  media,
+  className,
+}: {
+  media: MediaEdge['node'][];
+  className?: string;
+}) {
+  if (!media.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`swimlane md:grid-flow-row hiddenScroll md:p-0 md:overflow-x-auto md:grid-cols-2 ${className}`}
+    >
+      {media.map((med, i) => {
+        let mediaProps: Record<string, any> = {};
+        const isFirst = i === 0;
+        const isFourth = i === 3;
+        const isFullWidth = i % 3 === 0;
+
+        const data = {
+          ...med,
+          image: {
+            // @ts-ignore
+            ...med.image,
+            altText: med.alt || 'Product image',
+          },
+        } as MediaImage;
+
+        switch (med.mediaContentType) {
+          case 'IMAGE':
+            mediaProps = {
+              width: 800,
+              widths: [400, 800, 1200, 1600, 2000, 2400],
+            };
+            break;
+          case 'VIDEO':
+            mediaProps = {
+              width: '100%',
+              autoPlay: true,
+              controls: false,
+              muted: true,
+              loop: true,
+              preload: 'auto',
+            };
+            break;
+          case 'EXTERNAL_VIDEO':
+            mediaProps = {width: '100%'};
+            break;
+          case 'MODEL_3D':
+            mediaProps = {
+              width: '100%',
+              interactionPromptThreshold: '0',
+              ar: true,
+              loading: ATTR_LOADING_EAGER,
+              disableZoom: true,
+            };
+            break;
+        }
+
+        if (i === 0 && med.mediaContentType === 'IMAGE') {
+          mediaProps.loading = ATTR_LOADING_EAGER;
+        }
+
+        const style = [
+          isFullWidth ? 'md:col-span-2' : 'md:col-span-1',
+          isFirst || isFourth ? '' : 'md:aspect-[4/5]',
+          'aspect-square snap-center card-image bg-white dark:bg-contrast/10 w-mobileGallery md:w-full',
+        ].join(' ');
+
+        return (
+          <div
+            className={style}
+            // @ts-ignore
+            key={med.id || med.image.id}
+          >
+            {/* TODO: Replace with MediaFile when it's available */}
+            {(med as MediaImage).image && (
+              <img
+                src={data.image!.url}
+                alt={data.image!.altText!}
+                className="w-full h-full aspect-square fadeIn object-cover"
+              />
+            )}
+            {/* <MediaFile
+              tabIndex="0"
+              className={`w-full h-full aspect-square fadeIn object-cover`}
+              data={data}
+              sizes={
+                isFullWidth
+                  ? '(min-width: 64em) 60vw, (min-width: 48em) 50vw, 90vw'
+                  : '(min-width: 64em) 30vw, (min-width: 48em) 25vw, 90vw'
+              }
+              // @ts-ignore
+              options={{
+                crop: 'center',
+                scale: 2,
+              }}
+              {...mediaProps}
+            /> */}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import {Button, Grid, ProductCard, Link} from '~/components';
+import {getImageLoadingPriority} from '~/lib/const';
+import type {
+  Collection,
+  Product,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {useFetcher} from '@remix-run/react';
+import {useEffect, useState} from 'react';
+
+export function ProductGrid({
+  url,
+  collection,
+  ...props
+}: {
+  url: string;
+  collection: Collection;
+}) {
+  const [initialProducts, setInitialProducts] = useState(
+    collection?.products?.nodes || [],
+  );
+
+  const [nextPage, setNextPage] = useState(
+    collection?.products?.pageInfo?.hasNextPage,
+  );
+  const [endCursor, setEndCursor] = useState(
+    collection?.products?.pageInfo?.endCursor,
+  );
+  const [products, setProducts] = useState(initialProducts);
+
+  // props have changes, reset component state
+  const productProps = collection?.products?.nodes || [];
+  if (initialProducts !== productProps) {
+    setInitialProducts(productProps);
+    setProducts(productProps);
+  }
+
+  const fetcher = useFetcher();
+
+  function fetchMoreProducts() {
+    fetcher.load(`${url}?index&cursor=${endCursor}`);
+  }
+
+  useEffect(() => {
+    if (!fetcher.data) return;
+
+    const {collection} = fetcher.data;
+
+    setProducts((prev: Product[]) => [...prev, ...collection.products.nodes]);
+    setNextPage(collection.products.pageInfo.hasNextPage);
+    setEndCursor(collection.products.pageInfo.endCursor);
+  }, [fetcher.data]);
+
+  const haveProducts = initialProducts.length > 0;
+
+  if (!haveProducts) {
+    return (
+      <>
+        <p>No products found on this collection</p>
+        <Link to="/products">
+          <p className="underline">Browse catalog</p>
+        </Link>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Grid layout="products" {...props}>
+        {products.map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            loading={getImageLoadingPriority(i)}
+          />
+        ))}
+      </Grid>
+
+      {nextPage && (
+        <div className="flex items-center justify-center mt-6">
+          <Button
+            disabled={fetcher.state !== 'idle'}
+            variant="secondary"
+            onClick={fetchMoreProducts}
+            width="full"
+            prefetch="intent"
+          >
+            {fetcher.state !== 'idle' ? 'Loading...' : 'Load more products'}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,30 @@
+import type {SerializeFrom} from '@shopify/remix-oxygen';
+import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
+import {ProductCard, Section} from '~/components';
+
+const mockProducts = new Array(12).fill('');
+
+export function ProductSwimlane({
+  title = 'Featured Products',
+  products = mockProducts,
+  count = 12,
+  ...props
+}: {
+  title?: string;
+  products?: SerializeFrom<Product[]>;
+  count?: number;
+}) {
+  return (
+    <Section heading={title} padding="y" {...props}>
+      <div className="swimlane hiddenScroll md:pb-8 md:scroll-px-8 lg:scroll-px-12 md:px-8 lg:px-12">
+        {products.map((product) => (
+          <ProductCard
+            product={product}
+            key={product.id}
+            className="snap-start w-80"
+          />
+        ))}
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+/**
+ * A shared component and Suspense call that's used in `App.server.jsx` to let your app wait for code to load while declaring a loading state
+ */
+export function Skeleton({
+  as: Component = 'div',
+  width,
+  height,
+  className,
+  ...props
+}: {
+  as?: React.ElementType;
+  width?: string;
+  height?: string;
+  className?: string;
+  [key: string]: any;
+}) {
+  const styles = clsx('rounded bg-primary/10', className);
+
+  return (
+    <Component {...props} width={width} height={height} className={styles} />
+  );
+}