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

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

@@ -1,277 +0,0 @@
-import {useEffect, useMemo, useState} from 'react';
-import type {
-  Maybe,
-  PageInfo,
-  ProductConnection,
-} from '@shopify/storefront-kit-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

@@ -1,140 +0,0 @@
-import clsx from 'clsx';
-import {
-  flattenConnection,
-  Image,
-  Money,
-  useMoney,
-} from '@shopify/storefront-kit-react';
-import type {SerializeFrom} from '@shopify/remix-oxygen';
-import {Text, Link, AddToCartButton} from '~/components';
-import {isDiscounted, isNewArrival} from '~/lib/utils';
-import {getProductPlaceholder} from '~/lib/placeholders';
-import type {
-  MoneyV2,
-  Product,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-
-export function ProductCard({
-  product,
-  label,
-  className,
-  loading,
-  onClick,
-}: {
-  product: SerializeFrom<Product>;
-  label?: string;
-  className?: string;
-  loading?: HTMLImageElement['loading'];
-  onClick?: () => void;
-}) {
-  let cardLabel;
-
-  const cardProduct = product?.variants ? product : getProductPlaceholder();
-  if (!cardProduct?.variants?.nodes?.length) return null;
-
-  const firstVariant = flattenConnection(cardProduct.variants)[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

@@ -1,114 +0,0 @@
-import type {MediaEdge} from '@shopify/storefront-kit-react/storefront-api-types';
-import {ATTR_LOADING_EAGER} from '~/lib/const';
-import type {MediaImage} from '@shopify/storefront-kit-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

@@ -1,93 +0,0 @@
-import {Button, Grid, ProductCard, Link} from '~/components';
-import {getImageLoadingPriority} from '~/lib/const';
-import type {
-  Collection,
-  Product,
-} from '@shopify/storefront-kit-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

@@ -1,30 +0,0 @@
-import type {SerializeFrom} from '@shopify/remix-oxygen';
-import type {Product} from '@shopify/storefront-kit-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

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