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

package/dist/templates/demo-store/app/routes/products/$productHandle.tsx

@@ -1,551 +0,0 @@
-import {type ReactNode, useRef, Suspense, useMemo} from 'react';
-import {Disclosure, Listbox} from '@headlessui/react';
-import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {
-  useLoaderData,
-  Await,
-  useSearchParams,
-  useLocation,
-  useTransition,
-} from '@remix-run/react';
-import {Money, ShopPayButton} from '@shopify/hydrogen-react';
-import {
-  Heading,
-  IconCaret,
-  IconCheck,
-  IconClose,
-  ProductGallery,
-  ProductSwimlane,
-  Section,
-  Skeleton,
-  Text,
-  Link,
-  AddToCartButton,
-} from '~/components';
-import {getExcerpt} from '~/lib/utils';
-import invariant from 'tiny-invariant';
-import clsx from 'clsx';
-import type {
-  ProductVariant,
-  SelectedOptionInput,
-  Product as ProductType,
-  Shop,
-  ProductConnection,
-} from '@shopify/hydrogen-react/storefront-api-types';
-import {
-  MEDIA_FRAGMENT,
-  PRODUCT_CARD_FRAGMENT,
-  PRODUCT_VARIANT_FRAGMENT,
-} from '~/data';
-
-export async function loader({params, request, context}: LoaderArgs) {
-  const {productHandle} = params;
-  invariant(productHandle, 'Missing productHandle param, check route filename');
-
-  const searchParams = new URL(request.url).searchParams;
-
-  const selectedOptions: SelectedOptionInput[] = [];
-  searchParams.forEach((value, name) => {
-    selectedOptions.push({name, value});
-  });
-
-  const {shop, product} = await context.storefront.query<{
-    product: ProductType & {selectedVariant?: ProductVariant};
-    shop: Shop;
-  }>(PRODUCT_QUERY, {
-    variables: {
-      handle: productHandle,
-      selectedOptions,
-      country: context.storefront.i18n.country,
-      language: context.storefront.i18n.language,
-    },
-  });
-
-  if (!product?.id) {
-    throw new Response(null, {status: 404});
-  }
-
-  const recommended = getRecommendedProducts(context.storefront, product.id);
-
-  return defer({
-    product,
-    shop,
-    recommended,
-  });
-}
-
-export default function Product() {
-  const {product, shop, recommended} = useLoaderData<typeof loader>();
-  const {media, title, vendor, descriptionHtml} = product;
-  const {shippingPolicy, refundPolicy} = shop;
-
-  return (
-    <>
-      <Section padding="x" className="px-0">
-        <div className="grid items-start md:gap-6 lg:gap-20 md:grid-cols-2 lg:grid-cols-3">
-          <ProductGallery
-            media={media.nodes}
-            className="w-screen md:w-full lg:col-span-2"
-          />
-          <div className="sticky md:-mb-nav md:top-nav md:-translate-y-nav md:h-screen md:pt-nav hiddenScroll md:overflow-y-scroll">
-            <section className="flex flex-col w-full max-w-xl gap-8 p-6 md:mx-auto md:max-w-sm md:px-0">
-              <div className="grid gap-2">
-                <Heading as="h1" format className="whitespace-normal">
-                  {title}
-                </Heading>
-                {vendor && (
-                  <Text className={'opacity-50 font-medium'}>{vendor}</Text>
-                )}
-              </div>
-              <ProductForm />
-              <div className="grid gap-4 py-4">
-                {descriptionHtml && (
-                  <ProductDetail
-                    title="Product Details"
-                    content={descriptionHtml}
-                  />
-                )}
-                {shippingPolicy?.body && (
-                  <ProductDetail
-                    title="Shipping"
-                    content={getExcerpt(shippingPolicy.body)}
-                    learnMore={`/policies/${shippingPolicy.handle}`}
-                  />
-                )}
-                {refundPolicy?.body && (
-                  <ProductDetail
-                    title="Returns"
-                    content={getExcerpt(refundPolicy.body)}
-                    learnMore={`/policies/${refundPolicy.handle}`}
-                  />
-                )}
-              </div>
-            </section>
-          </div>
-        </div>
-      </Section>
-      <Suspense fallback={<Skeleton className="h-32" />}>
-        <Await
-          errorElement="There was a problem loading related products"
-          resolve={recommended}
-        >
-          {(products) => (
-            <ProductSwimlane title="Related Products" products={products} />
-          )}
-        </Await>
-      </Suspense>
-    </>
-  );
-}
-
-export function ProductForm() {
-  const {product} = useLoaderData<typeof loader>();
-
-  const [currentSearchParams] = useSearchParams();
-  const transition = useTransition();
-
-  /**
-   * We update `searchParams` with in-flight request data from `transition` (if available)
-   * to create an optimistic UI, e.g. check the product option before the
-   * request has completed.
-   */
-  const searchParams = useMemo(() => {
-    return transition.location
-      ? new URLSearchParams(transition.location.search)
-      : currentSearchParams;
-  }, [currentSearchParams, transition]);
-
-  const firstVariant = product.variants.nodes[0];
-
-  /**
-   * We're making an explicit choice here to display the product options
-   * UI with a default variant, rather than wait for the user to select
-   * options first. Developers are welcome to opt-out of this behavior.
-   * By default, the first variant's options are used.
-   */
-  const searchParamsWithDefaults = useMemo<URLSearchParams>(() => {
-    const clonedParams = new URLSearchParams(searchParams);
-
-    for (const {name, value} of firstVariant.selectedOptions) {
-      if (!searchParams.has(name)) {
-        clonedParams.set(name, value);
-      }
-    }
-
-    return clonedParams;
-  }, [searchParams, firstVariant.selectedOptions]);
-
-  /**
-   * Likewise, we're defaulting to the first variant for purposes
-   * of add to cart if there is none returned from the loader.
-   * A developer can opt out of this, too.
-   */
-  const selectedVariant = product.selectedVariant ?? firstVariant;
-  const isOutOfStock = !selectedVariant?.availableForSale;
-
-  const isOnSale =
-    selectedVariant?.price?.amount &&
-    selectedVariant?.compareAtPrice?.amount &&
-    selectedVariant?.price?.amount < selectedVariant?.compareAtPrice?.amount;
-
-  const lines = [
-    {
-      merchandiseId: selectedVariant.id,
-      quantity: 1,
-    },
-  ];
-
-  return (
-    <div className="grid gap-10">
-      <div className="grid gap-4">
-        <ProductOptions
-          options={product.options}
-          searchParamsWithDefaults={searchParamsWithDefaults}
-        />
-        {selectedVariant && (
-          <div className="grid items-stretch gap-4">
-            <AddToCartButton
-              lines={[
-                {
-                  merchandiseId: selectedVariant.id,
-                  quantity: 1,
-                },
-              ]}
-              variant={isOutOfStock ? 'secondary' : 'primary'}
-              data-test="add-to-cart"
-            >
-              {isOutOfStock ? (
-                <Text>Sold out</Text>
-              ) : (
-                <Text
-                  as="span"
-                  className="flex items-center justify-center gap-2"
-                >
-                  <span>Add to Bag</span> <span>·</span>{' '}
-                  <Money
-                    withoutTrailingZeros
-                    data={selectedVariant?.price!}
-                    as="span"
-                  />
-                  {isOnSale && (
-                    <Money
-                      withoutTrailingZeros
-                      data={selectedVariant?.compareAtPrice!}
-                      as="span"
-                      className="opacity-50 strike"
-                    />
-                  )}
-                </Text>
-              )}
-            </AddToCartButton>
-            {!isOutOfStock && (
-              <ShopPayButton variantIds={[selectedVariant?.id!]} />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ProductOptions({
-  options,
-  searchParamsWithDefaults,
-}: {
-  options: ProductType['options'];
-  searchParamsWithDefaults: URLSearchParams;
-}) {
-  const closeRef = useRef<HTMLButtonElement>(null);
-  return (
-    <>
-      {options
-        .filter((option) => option.values.length > 1)
-        .map((option) => (
-          <div
-            key={option.name}
-            className="flex flex-col flex-wrap mb-4 gap-y-2 last:mb-0"
-          >
-            <Heading as="legend" size="lead" className="min-w-[4rem]">
-              {option.name}
-            </Heading>
-            <div className="flex flex-wrap items-baseline gap-4">
-              {/**
-               * First, we render a bunch of <Link> elements for each option value.
-               * When the user clicks one of these buttons, it will hit the loader
-               * to get the new data.
-               *
-               * If there are more than 7 values, we render a dropdown.
-               * Otherwise, we just render plain links.
-               */}
-              {option.values.length > 7 ? (
-                <div className="relative w-full">
-                  <Listbox>
-                    {({open}) => (
-                      <>
-                        <Listbox.Button
-                          ref={closeRef}
-                          className={clsx(
-                            'flex items-center justify-between w-full py-3 px-4 border border-primary',
-                            open
-                              ? 'rounded-b md:rounded-t md:rounded-b-none'
-                              : 'rounded',
-                          )}
-                        >
-                          <span>
-                            {searchParamsWithDefaults.get(option.name)}
-                          </span>
-                          <IconCaret direction={open ? 'up' : 'down'} />
-                        </Listbox.Button>
-                        <Listbox.Options
-                          className={clsx(
-                            'border-primary bg-contrast absolute bottom-12 z-30 grid h-48 w-full overflow-y-scroll rounded-t border px-2 py-2 transition-[max-height] duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none md:border-t-0 md:border-b',
-                            open ? 'max-h-48' : 'max-h-0',
-                          )}
-                        >
-                          {option.values.map((value) => (
-                            <Listbox.Option
-                              key={`option-${option.name}-${value}`}
-                              value={value}
-                            >
-                              {({active}) => (
-                                <ProductOptionLink
-                                  optionName={option.name}
-                                  optionValue={value}
-                                  className={clsx(
-                                    'text-primary w-full p-2 transition rounded flex justify-start items-center text-left cursor-pointer',
-                                    active && 'bg-primary/10',
-                                  )}
-                                  searchParams={searchParamsWithDefaults}
-                                  onClick={() => {
-                                    if (!closeRef?.current) return;
-                                    closeRef.current.click();
-                                  }}
-                                >
-                                  {value}
-                                  {searchParamsWithDefaults.get(option.name) ===
-                                    value && (
-                                    <span className="ml-2">
-                                      <IconCheck />
-                                    </span>
-                                  )}
-                                </ProductOptionLink>
-                              )}
-                            </Listbox.Option>
-                          ))}
-                        </Listbox.Options>
-                      </>
-                    )}
-                  </Listbox>
-                </div>
-              ) : (
-                <>
-                  {option.values.map((value) => {
-                    const checked =
-                      searchParamsWithDefaults.get(option.name) === value;
-                    const id = `option-${option.name}-${value}`;
-
-                    return (
-                      <Text key={id}>
-                        <ProductOptionLink
-                          optionName={option.name}
-                          optionValue={value}
-                          searchParams={searchParamsWithDefaults}
-                          className={clsx(
-                            'leading-none py-1 border-b-[1.5px] cursor-pointer transition-all duration-200',
-                            checked ? 'border-primary/50' : 'border-primary/0',
-                          )}
-                        />
-                      </Text>
-                    );
-                  })}
-                </>
-              )}
-            </div>
-          </div>
-        ))}
-    </>
-  );
-}
-
-function ProductOptionLink({
-  optionName,
-  optionValue,
-  searchParams,
-  children,
-  ...props
-}: {
-  optionName: string;
-  optionValue: string;
-  searchParams: URLSearchParams;
-  children?: ReactNode;
-  [key: string]: any;
-}) {
-  const {pathname} = useLocation();
-  const isLangPathname = /\/[a-zA-Z]{2}-[a-zA-Z]{2}\//g.test(pathname);
-  // fixes internalized pathname
-  const path = isLangPathname
-    ? `/${pathname.split('/').slice(2).join('/')}`
-    : pathname;
-
-  const clonedSearchParams = new URLSearchParams(searchParams);
-  clonedSearchParams.set(optionName, optionValue);
-
-  return (
-    <Link
-      {...props}
-      prefetch="intent"
-      replace
-      to={`${path}?${clonedSearchParams.toString()}`}
-    >
-      {children ?? optionValue}
-    </Link>
-  );
-}
-
-function ProductDetail({
-  title,
-  content,
-  learnMore,
-}: {
-  title: string;
-  content: string;
-  learnMore?: string;
-}) {
-  return (
-    <Disclosure key={title} as="div" className="grid w-full gap-2">
-      {({open}) => (
-        <>
-          <Disclosure.Button className="text-left">
-            <div className="flex justify-between">
-              <Text size="lead" as="h4">
-                {title}
-              </Text>
-              <IconClose
-                className={clsx(
-                  'transition-transform transform-gpu duration-200',
-                  !open && 'rotate-[45deg]',
-                )}
-              />
-            </div>
-          </Disclosure.Button>
-
-          <Disclosure.Panel className={'pb-4 pt-2 grid gap-2'}>
-            <div
-              className="prose dark:prose-invert"
-              dangerouslySetInnerHTML={{__html: content}}
-            />
-            {learnMore && (
-              <div className="">
-                <Link
-                  className="pb-px border-b border-primary/30 text-primary/50"
-                  to={learnMore}
-                >
-                  Learn more
-                </Link>
-              </div>
-            )}
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
-  );
-}
-
-const PRODUCT_QUERY = `#graphql
-  ${MEDIA_FRAGMENT}
-  ${PRODUCT_VARIANT_FRAGMENT}
-  query Product(
-    $country: CountryCode
-    $language: LanguageCode
-    $handle: String!
-    $selectedOptions: [SelectedOptionInput!]!
-  ) @inContext(country: $country, language: $language) {
-    product(handle: $handle) {
-      id
-      title
-      vendor
-      handle
-      descriptionHtml
-      options {
-        name
-        values
-      }
-      selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
-        ...ProductVariantFragment
-      }
-      media(first: 7) {
-        nodes {
-          ...Media
-        }
-      }
-      variants(first: 1) {
-        nodes {
-          ...ProductVariantFragment
-        }
-      }
-      seo {
-        description
-        title
-      }
-    }
-    shop {
-      name
-      shippingPolicy {
-        body
-        handle
-      }
-      refundPolicy {
-        body
-        handle
-      }
-    }
-  }
-`;
-
-const RECOMMENDED_PRODUCTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
-  query productRecommendations(
-    $productId: ID!
-    $count: Int
-    $country: CountryCode
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language) {
-    recommended: productRecommendations(productId: $productId) {
-      ...ProductCard
-    }
-    additional: products(first: $count, sortKey: BEST_SELLING) {
-      nodes {
-        ...ProductCard
-      }
-    }
-  }
-`;
-
-async function getRecommendedProducts(
-  storefront: LoaderArgs['context']['storefront'],
-  productId: string,
-) {
-  const products = await storefront.query<{
-    recommended: ProductType[];
-    additional: ProductConnection;
-  }>(RECOMMENDED_PRODUCTS_QUERY, {
-    variables: {productId, count: 12},
-  });
-
-  invariant(products, 'No data returned from Shopify API');
-
-  const mergedProducts = products.recommended
-    .concat(products.additional.nodes)
-    .filter(
-      (value, index, array) =>
-        array.findIndex((value2) => value2.id === value.id) === index,
-    );
-
-  const originalProduct = mergedProducts
-    .map((item: ProductType) => item.id)
-    .indexOf(productId);
-
-  mergedProducts.splice(originalProduct, 1);
-
-  return mergedProducts;
-}

package/dist/templates/demo-store/app/routes/products/index.tsx

@@ -1,148 +0,0 @@
-import {type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
-import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';
-import invariant from 'tiny-invariant';
-import {
-  PageHeader,
-  Section,
-  ProductCard,
-  Grid,
-  Pagination,
-  getPaginationVariables,
-  Button,
-} from '~/components';
-import {PRODUCT_CARD_FRAGMENT} from '~/data';
-import {getImageLoadingPriority} from '~/lib/const';
-
-const PAGE_BY = 8;
-
-export async function loader({request, context: {storefront}}: LoaderArgs) {
-  const variables = getPaginationVariables(request, PAGE_BY);
-
-  const data = await storefront.query<{
-    products: ProductConnection;
-  }>(ALL_PRODUCTS_QUERY, {
-    variables: {
-      ...variables,
-      country: storefront.i18n.country,
-      language: storefront.i18n.language,
-    },
-  });
-
-  invariant(data, 'No data returned from Shopify API');
-
-  return data.products;
-}
-
-export const meta: MetaFunction = () => {
-  return {
-    title: 'All Products',
-    description: 'All Products',
-  };
-};
-
-export default function AllProducts() {
-  const products = useLoaderData<typeof loader>();
-
-  return (
-    <>
-      <PageHeader heading="All Products" variant="allCollections" />
-      <Section>
-        <Pagination connection={products}>
-          {({
-            endCursor,
-            hasNextPage,
-            hasPreviousPage,
-            nextPageUrl,
-            nodes,
-            prevPageUrl,
-            startCursor,
-            nextLinkRef,
-            isLoading,
-          }) => {
-            const itemsMarkup = nodes.map((product, i) => (
-              <ProductCard
-                key={product.id}
-                product={product}
-                loading={getImageLoadingPriority(i)}
-              />
-            ));
-
-            return (
-              <>
-                {hasPreviousPage && (
-                  <div className="flex items-center justify-center mt-6">
-                    <Button
-                      to={prevPageUrl}
-                      variant="secondary"
-                      prefetch="intent"
-                      width="full"
-                      disabled={!isLoading}
-                      state={{
-                        pageInfo: {
-                          endCursor,
-                          hasNextPage,
-                          startCursor,
-                        },
-                        nodes,
-                      }}
-                    >
-                      {isLoading ? 'Loading...' : 'Previous'}
-                    </Button>
-                  </div>
-                )}
-                <Grid data-test="product-grid">{itemsMarkup}</Grid>
-                {hasNextPage && (
-                  <div className="flex items-center justify-center mt-6">
-                    <Button
-                      ref={nextLinkRef}
-                      to={nextPageUrl}
-                      variant="secondary"
-                      prefetch="intent"
-                      width="full"
-                      disabled={!isLoading}
-                      state={{
-                        pageInfo: {
-                          endCursor,
-                          hasPreviousPage,
-                          startCursor,
-                        },
-                        nodes,
-                      }}
-                    >
-                      {isLoading ? 'Loading...' : 'Next'}
-                    </Button>
-                  </div>
-                )}
-              </>
-            );
-          }}
-        </Pagination>
-      </Section>
-    </>
-  );
-}
-
-const ALL_PRODUCTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
-  query AllProducts(
-    $country: CountryCode
-    $language: LanguageCode
-    $first: Int
-    $last: Int
-    $startCursor: String
-    $endCursor: String
-  ) @inContext(country: $country, language: $language) {
-    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
-      nodes {
-        ...ProductCard
-      }
-      pageInfo {
-        hasPreviousPage
-        hasNextPage
-        startCursor
-        endCursor
-      }
-    }
-  }
-`;