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

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

@@ -1,97 +0,0 @@
-import {Form} from '@remix-run/react';
-import type {
-  Customer,
-  MailingAddress,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import {Button, Link, Text} from '~/components';
-
-export function AccountAddressBook({
-  customer,
-  addresses,
-}: {
-  customer: Customer;
-  addresses: MailingAddress[];
-}) {
-  return (
-    <>
-      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
-        <h3 className="font-bold text-lead">Address Book</h3>
-        <div>
-          {!addresses?.length && (
-            <Text className="mb-1" width="narrow" as="p" size="copy">
-              You haven&apos;t saved any addresses yet.
-            </Text>
-          )}
-          <div className="w-48">
-            <Button
-              to="address/add"
-              className="mt-2 text-sm w-full mb-6"
-              variant="secondary"
-            >
-              Add an Address
-            </Button>
-          </div>
-          {Boolean(addresses?.length) && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-              {customer.defaultAddress && (
-                <Address address={customer.defaultAddress} defaultAddress />
-              )}
-              {addresses
-                .filter((address) => address.id !== customer.defaultAddress?.id)
-                .map((address) => (
-                  <Address key={address.id} address={address} />
-                ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}
-
-function Address({
-  address,
-  defaultAddress,
-}: {
-  address: MailingAddress;
-  defaultAddress?: boolean;
-}) {
-  return (
-    <div className="lg:p-8 p-6 border border-gray-200 rounded flex flex-col">
-      {defaultAddress && (
-        <div className="mb-3 flex flex-row">
-          <span className="px-3 py-1 text-xs font-medium rounded-full bg-primary/20 text-primary/50">
-            Default
-          </span>
-        </div>
-      )}
-      <ul className="flex-1 flex-row">
-        {(address.firstName || address.lastName) && (
-          <li>
-            {'' +
-              (address.firstName && address.firstName + ' ') +
-              address?.lastName}
-          </li>
-        )}
-        {address.formatted &&
-          address.formatted.map((line: string) => <li key={line}>{line}</li>)}
-      </ul>
-
-      <div className="flex flex-row font-medium mt-6">
-        <Link
-          to={`/account/address/${encodeURIComponent(address.id)}`}
-          className="text-left underline text-sm"
-          prefetch="intent"
-        >
-          Edit
-        </Link>
-        <Form action="address/delete" method="delete">
-          <input type="hidden" name="addressId" value={address.id} />
-          <button className="text-left text-primary/50 ml-6 text-sm">
-            Remove
-          </button>
-        </Form>
-      </div>
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-import type {Customer} from '@shopify/storefront-kit-react/storefront-api-types';
-import {Link} from '~/components';
-
-export function AccountDetails({customer}: {customer: Customer}) {
-  const {firstName, lastName, email, phone} = customer;
-
-  return (
-    <>
-      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
-        <h3 className="font-bold text-lead">Account Details</h3>
-        <div className="lg:p-8 p-6 border border-gray-200 rounded">
-          <div className="flex">
-            <h3 className="font-bold text-base flex-1">Profile & Security</h3>
-            <Link
-              prefetch="intent"
-              className="underline text-sm font-normal"
-              to="/account/edit"
-            >
-              Edit
-            </Link>
-          </div>
-          <div className="mt-4 text-sm text-primary/50">Name</div>
-          <p className="mt-1">
-            {firstName || lastName
-              ? (firstName ? firstName + ' ' : '') + lastName
-              : 'Add name'}{' '}
-          </p>
-
-          <div className="mt-4 text-sm text-primary/50">Contact</div>
-          <p className="mt-1">{phone ?? 'Add mobile'}</p>
-
-          <div className="mt-4 text-sm text-primary/50">Email address</div>
-          <p className="mt-1">{email}</p>
-
-          <div className="mt-4 text-sm text-primary/50">Password</div>
-          <p className="mt-1">**************</p>
-        </div>
-      </div>
-    </>
-  );
-}

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

@@ -1,42 +0,0 @@
-import type {CartLineInput} from '@shopify/storefront-kit-react/storefront-api-types';
-import {useFetcher, useMatches} from '@remix-run/react';
-import {Button} from '~/components';
-import {CartAction} from '~/lib/type';
-
-export function AddToCartButton({
-  children,
-  lines,
-  className = '',
-  variant = 'primary',
-  width = 'full',
-  ...props
-}: {
-  children: React.ReactNode;
-  lines: CartLineInput[];
-  className?: string;
-  variant?: 'primary' | 'secondary' | 'inline';
-  width?: 'auto' | 'full';
-  [key: string]: any;
-}) {
-  const [root] = useMatches();
-  const selectedLocale = root?.data?.selectedLocale;
-  const fetcher = useFetcher();
-
-  return (
-    <fetcher.Form action="/cart" method="post">
-      <input type="hidden" name="cartAction" value={CartAction.ADD_TO_CART} />
-      <input type="hidden" name="countryCode" value={selectedLocale.country} />
-      <input type="hidden" name="lines" value={JSON.stringify(lines)} />
-      <Button
-        as="button"
-        type="submit"
-        width={width}
-        variant={variant}
-        className={className}
-        {...props}
-      >
-        {children}
-      </Button>
-    </fetcher.Form>
-  );
-}

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

@@ -1,36 +0,0 @@
-import {Text} from './Text';
-import {Link} from './Link';
-
-interface Breadcrumb {
-  handle: string;
-  title: string;
-  id: string;
-}
-
-// Renders a breadcrumb trail from a references metafield list
-export function Breadcrumbs({
-  breadcrumbs,
-}: {
-  breadcrumbs?: Breadcrumb[] | null;
-}) {
-  if (!breadcrumbs || breadcrumbs.length === 0) {
-    return null;
-  }
-
-  const breadcrumbsMarkup = breadcrumbs.map((breadcrumb, index) => {
-    const isLastBreadcrumb = index === breadcrumbs.length - 1;
-
-    return isLastBreadcrumb ? (
-      <Text key={breadcrumb.id} as="span">
-        {breadcrumb.title}
-      </Text>
-    ) : (
-      <span key={breadcrumb.id}>
-        <Link to={`/collections/${breadcrumb.handle}`}>{breadcrumb.title}</Link>
-        <span className="px-2">/</span>
-      </span>
-    );
-  });
-
-  return <nav className="flex items-center">{breadcrumbsMarkup}</nav>;
-}

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

@@ -1,56 +0,0 @@
-import {forwardRef} from 'react';
-import {Link} from '@remix-run/react';
-import clsx from 'clsx';
-
-import {missingClass} from '~/lib/utils';
-
-export const Button = forwardRef(
-  (
-    {
-      as = 'button',
-      className = '',
-      variant = 'primary',
-      width = 'auto',
-      ...props
-    }: {
-      as?: React.ElementType;
-      className?: string;
-      variant?: 'primary' | 'secondary' | 'inline';
-      width?: 'auto' | 'full';
-      [key: string]: any;
-    },
-    ref,
-  ) => {
-    const Component = props?.to ? Link : as;
-
-    const baseButtonClasses =
-      'inline-block rounded font-medium text-center py-3 px-6';
-
-    const variants = {
-      primary: `${baseButtonClasses} bg-primary text-contrast`,
-      secondary: `${baseButtonClasses} border border-primary/10 bg-contrast text-primary`,
-      inline: 'border-b border-primary/10 leading-none pb-1',
-    };
-
-    const widths = {
-      auto: 'w-auto',
-      full: 'w-full',
-    };
-
-    const styles = clsx(
-      missingClass(className, 'bg-') && variants[variant],
-      missingClass(className, 'w-') && widths[width],
-      className,
-    );
-
-    return (
-      <Component
-        // @todo: not supported until react-router makes it into Remix.
-        // preventScrollReset={true}
-        className={styles}
-        {...props}
-        ref={ref}
-      />
-    );
-  },
-);

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

@@ -1,431 +0,0 @@
-import clsx from 'clsx';
-import {useRef} from 'react';
-import {useScroll} from 'react-use';
-import {flattenConnection, Image, Money} from '@shopify/storefront-kit-react';
-import {
-  Button,
-  Heading,
-  IconRemove,
-  Text,
-  Link,
-  FeaturedProducts,
-} from '~/components';
-import {getInputStyleClasses} from '~/lib/utils';
-import type {
-  Cart as CartType,
-  CartCost,
-  CartLine,
-  CartLineUpdateInput,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import {useFetcher} from '@remix-run/react';
-import {CartAction} from '~/lib/type';
-
-type Layouts = 'page' | 'drawer';
-
-export function Cart({
-  layout,
-  onClose,
-  cart,
-}: {
-  layout: Layouts;
-  onClose?: () => void;
-  cart: CartType | null;
-}) {
-  const linesCount = Boolean(cart?.lines?.edges?.length || 0);
-
-  return (
-    <>
-      <CartEmpty hidden={linesCount} onClose={onClose} layout={layout} />
-      <CartDetails cart={cart} layout={layout} />
-    </>
-  );
-}
-
-export function CartDetails({
-  layout,
-  cart,
-}: {
-  layout: Layouts;
-  cart: CartType | null;
-}) {
-  // @todo: get optimistic cart cost
-  const isZeroCost = !cart || cart?.cost?.subtotalAmount?.amount === '0.0';
-
-  const container = {
-    drawer: 'grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto]',
-    page: 'w-full pb-12 grid md:grid-cols-2 md:items-start gap-8 md:gap-8 lg:gap-12',
-  };
-
-  return (
-    <div className={container[layout]}>
-      <CartLines lines={cart?.lines} layout={layout} />
-      {!isZeroCost && (
-        <CartSummary cost={cart.cost} layout={layout}>
-          <CartDiscounts discountCodes={cart.discountCodes} />
-          <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
-        </CartSummary>
-      )}
-    </div>
-  );
-}
-
-/**
- * Temporary discount UI
- * @param discountCodes the current discount codes applied to the cart
- * @todo rework when a design is ready
- */
-function CartDiscounts({
-  discountCodes,
-}: {
-  discountCodes: CartType['discountCodes'];
-}) {
-  const codes = discountCodes?.map(({code}) => code).join(', ') || null;
-
-  return (
-    <>
-      {/* Have existing discount, display it with a remove option */}
-      <dl className={clsx(codes ? 'grid' : 'hidden')}>
-        <div className="flex items-center justify-between font-medium">
-          <Text as="dt">Discount(s)</Text>
-          <div className="flex items-center justify-between">
-            <UpdateDiscountForm>
-              <button>
-                <IconRemove
-                  aria-hidden="true"
-                  style={{height: 18, marginRight: 4}}
-                />
-              </button>
-            </UpdateDiscountForm>
-            <Text as="dd">{codes}</Text>
-          </div>
-        </div>
-      </dl>
-
-      {/* No discounts, show an input to apply a discount */}
-      <UpdateDiscountForm>
-        <div
-          className={clsx(
-            codes ? 'hidden' : 'flex',
-            'items-center justify-between',
-          )}
-        >
-          <input
-            className={getInputStyleClasses()}
-            type="text"
-            name="discountCode"
-          />
-          <button className="w-[150px] flex justify-end">
-            <Text size="fine">Apply Discount</Text>
-          </button>
-        </div>
-      </UpdateDiscountForm>
-    </>
-  );
-}
-
-function UpdateDiscountForm({children}: {children: React.ReactNode}) {
-  const fetcher = useFetcher();
-  return (
-    <fetcher.Form action="/cart" method="post">
-      <input
-        type="hidden"
-        name="cartAction"
-        value={CartAction.UPDATE_DISCOUNT}
-      />
-      {children}
-    </fetcher.Form>
-  );
-}
-
-function CartLines({
-  layout = 'drawer',
-  lines: cartLines,
-}: {
-  layout: Layouts;
-  lines: CartType['lines'] | undefined;
-}) {
-  const currentLines = cartLines ? flattenConnection(cartLines) : [];
-  const scrollRef = useRef(null);
-  const {y} = useScroll(scrollRef);
-
-  const className = clsx([
-    y > 0 ? 'border-t' : '',
-    layout === 'page'
-      ? 'flex-grow md:translate-y-4'
-      : 'px-6 pb-6 sm-max:pt-2 overflow-auto transition md:px-12',
-  ]);
-
-  return (
-    <section
-      ref={scrollRef}
-      aria-labelledby="cart-contents"
-      className={className}
-    >
-      <ul className="grid gap-6 md:gap-10">
-        {currentLines.map((line) => (
-          <CartLineItem key={line.id} line={line as CartLine} />
-        ))}
-      </ul>
-    </section>
-  );
-}
-
-function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
-  if (!checkoutUrl) return null;
-
-  return (
-    <div className="flex flex-col mt-2">
-      <a href={checkoutUrl} target="_self">
-        <Button as="span" width="full">
-          Continue to Checkout
-        </Button>
-      </a>
-      {/* @todo: <CartShopPayButton cart={cart} /> */}
-    </div>
-  );
-}
-
-function CartSummary({
-  cost,
-  layout,
-  children = null,
-}: {
-  children?: React.ReactNode;
-  cost: CartCost;
-  layout: Layouts;
-}) {
-  const summary = {
-    drawer: 'grid gap-4 p-6 border-t md:px-12',
-    page: 'sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full',
-  };
-
-  return (
-    <section aria-labelledby="summary-heading" className={summary[layout]}>
-      <h2 id="summary-heading" className="sr-only">
-        Order summary
-      </h2>
-      <dl className="grid">
-        <div className="flex items-center justify-between font-medium">
-          <Text as="dt">Subtotal</Text>
-          <Text as="dd" data-test="subtotal">
-            {cost?.subtotalAmount?.amount ? (
-              <Money data={cost?.subtotalAmount} />
-            ) : (
-              '-'
-            )}
-          </Text>
-        </div>
-      </dl>
-      {children}
-    </section>
-  );
-}
-
-function CartLineItem({line}: {line: CartLine}) {
-  if (!line?.id) return null;
-
-  const {id, quantity, merchandise} = line;
-
-  if (typeof quantity === 'undefined' || !merchandise?.product) return null;
-
-  return (
-    <li key={id} className="flex gap-4">
-      <div className="flex-shrink">
-        {merchandise.image && (
-          <Image
-            width={220}
-            height={220}
-            data={merchandise.image}
-            className="object-cover object-center w-24 h-24 border rounded md:w-28 md:h-28"
-            alt={merchandise.title}
-          />
-        )}
-      </div>
-
-      <div className="flex justify-between flex-grow">
-        <div className="grid gap-2">
-          <Heading as="h3" size="copy">
-            {merchandise?.product?.handle ? (
-              <Link to={`/products/${merchandise.product.handle}`}>
-                {merchandise?.product?.title || ''}
-              </Link>
-            ) : (
-              <Text>{merchandise?.product?.title || ''}</Text>
-            )}
-          </Heading>
-
-          <div className="grid pb-2">
-            {(merchandise?.selectedOptions || []).map((option) => (
-              <Text color="subtle" key={option.name}>
-                {option.name}: {option.value}
-              </Text>
-            ))}
-          </div>
-
-          <div className="flex items-center gap-2">
-            <div className="flex justify-start text-copy">
-              <CartLineQuantityAdjust line={line} />
-            </div>
-            <ItemRemoveButton lineIds={[id]} />
-          </div>
-        </div>
-        <Text>
-          <CartLinePrice line={line} as="span" />
-        </Text>
-      </div>
-    </li>
-  );
-}
-
-function ItemRemoveButton({lineIds}: {lineIds: CartLine['id'][]}) {
-  const fetcher = useFetcher();
-
-  return (
-    <fetcher.Form action="/cart" method="post">
-      <input
-        type="hidden"
-        name="cartAction"
-        value={CartAction.REMOVE_FROM_CART}
-      />
-      <input type="hidden" name="linesIds" value={JSON.stringify(lineIds)} />
-      <button
-        className="flex items-center justify-center w-10 h-10 border rounded"
-        type="submit"
-      >
-        <span className="sr-only">Remove</span>
-        <IconRemove aria-hidden="true" />
-      </button>
-    </fetcher.Form>
-  );
-}
-
-function CartLineQuantityAdjust({line}: {line: CartLine}) {
-  if (!line || typeof line?.quantity === 'undefined') return null;
-  const {id: lineId, quantity} = line;
-  const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
-  const nextQuantity = Number((quantity + 1).toFixed(0));
-
-  return (
-    <>
-      <label htmlFor={`quantity-${lineId}`} className="sr-only">
-        Quantity, {quantity}
-      </label>
-      <div className="flex items-center border rounded">
-        <UpdateCartButton lines={[{id: lineId, quantity: prevQuantity}]}>
-          <button
-            name="decrease-quantity"
-            aria-label="Decrease quantity"
-            className="w-10 h-10 transition text-primary/50 hover:text-primary disabled:text-primary/10"
-            value={prevQuantity}
-            disabled={quantity <= 1}
-          >
-            <span>&#8722;</span>
-          </button>
-        </UpdateCartButton>
-
-        <div className="px-2 text-center" data-test="item-quantity">
-          {quantity}
-        </div>
-
-        <UpdateCartButton lines={[{id: lineId, quantity: nextQuantity}]}>
-          <button
-            className="w-10 h-10 transition text-primary/50 hover:text-primary"
-            name="increase-quantity"
-            value={nextQuantity}
-            aria-label="Increase quantity"
-          >
-            <span>&#43;</span>
-          </button>
-        </UpdateCartButton>
-      </div>
-    </>
-  );
-}
-
-function UpdateCartButton({
-  children,
-  lines,
-}: {
-  children: React.ReactNode;
-  lines: CartLineUpdateInput[];
-}) {
-  const fetcher = useFetcher();
-
-  return (
-    <fetcher.Form action="/cart" method="post">
-      <input type="hidden" name="cartAction" value={CartAction.UPDATE_CART} />
-      <input type="hidden" name="lines" value={JSON.stringify(lines)} />
-      {children}
-    </fetcher.Form>
-  );
-}
-
-function CartLinePrice({
-  line,
-  priceType = 'regular',
-  ...passthroughProps
-}: {
-  line: CartLine;
-  priceType?: 'regular' | 'compareAt';
-  [key: string]: any;
-}) {
-  if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount) return null;
-
-  const moneyV2 =
-    priceType === 'regular'
-      ? line.cost.totalAmount
-      : line.cost.compareAtAmountPerQuantity;
-
-  if (moneyV2 == null) {
-    return null;
-  }
-
-  return <Money withoutTrailingZeros {...passthroughProps} data={moneyV2} />;
-}
-
-export function CartEmpty({
-  hidden = false,
-  layout = 'drawer',
-  onClose,
-}: {
-  hidden: boolean;
-  layout?: Layouts;
-  onClose?: () => void;
-}) {
-  const scrollRef = useRef(null);
-  const {y} = useScroll(scrollRef);
-
-  const container = {
-    drawer: clsx([
-      'content-start gap-4 px-6 pb-8 transition overflow-y-scroll md:gap-12 md:px-12 h-screen-no-nav md:pb-12',
-      y > 0 ? 'border-t' : '',
-    ]),
-    page: clsx([
-      hidden ? '' : 'grid',
-      `pb-12 w-full md:items-start gap-4 md:gap-8 lg:gap-12`,
-    ]),
-  };
-
-  return (
-    <div ref={scrollRef} className={container[layout]} hidden={hidden}>
-      <section className="grid gap-6">
-        <Text format>
-          Looks like you haven&rsquo;t added anything yet, let&rsquo;s get you
-          started!
-        </Text>
-        <div>
-          <Button onClick={onClose}>Continue shopping</Button>
-        </div>
-      </section>
-      <section className="grid gap-8 pt-4">
-        <FeaturedProducts
-          count={4}
-          heading="Shop Best Sellers"
-          layout={layout}
-          onClose={onClose}
-          sortKey="BEST_SELLING"
-        />
-      </section>
-    </div>
-  );
-}