@shopify/cli-hydrogen 8.1.0 → 8.2.0

package/dist/assets/hydrogen/starter/app/components/Cart.tsx

@@ -1,364 +0,0 @@
-import {
-  CartForm,
-  Image,
-  Money,
-  useOptimisticCart,
-  type OptimisticCart,
-} from '@shopify/hydrogen';
-import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
-import {Link} from '@remix-run/react';
-import type {CartApiQueryFragment} from 'storefrontapi.generated';
-import {useVariantUrl} from '~/lib/variants';
-
-type CartLine = OptimisticCart<CartApiQueryFragment>['lines']['nodes'][0];
-
-type CartMainProps = {
-  cart: CartApiQueryFragment | null;
-  layout: 'page' | 'aside';
-};
-
-export function CartMain({layout, cart: originalCart}: CartMainProps) {
-  const cart = useOptimisticCart(originalCart);
-
-  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
-  const withDiscount =
-    cart &&
-    Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
-  const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
-
-  return (
-    <div className={className}>
-      <CartEmpty hidden={linesCount} layout={layout} />
-      <CartDetails cart={cart} layout={layout} />
-    </div>
-  );
-}
-
-function CartDetails({
-  layout,
-  cart,
-}: {
-  cart: OptimisticCart<CartApiQueryFragment>;
-  layout: 'page' | 'aside';
-}) {
-  const cartHasItems = !!cart && cart.totalQuantity > 0;
-
-  return (
-    <div className="cart-details">
-      <CartLines lines={cart?.lines?.nodes} layout={layout} />
-      {cartHasItems && (
-        <CartSummary cost={cart.cost} layout={layout}>
-          <CartDiscounts discountCodes={cart.discountCodes} />
-          <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
-        </CartSummary>
-      )}
-    </div>
-  );
-}
-
-function CartLines({
-  lines,
-  layout,
-}: {
-  layout: CartMainProps['layout'];
-  lines: CartLine[];
-}) {
-  if (!lines) return null;
-
-  return (
-    <div aria-labelledby="cart-lines">
-      <ul>
-        {lines.map((line) => (
-          <CartLineItem key={line.id} line={line} layout={layout} />
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-function CartLineItem({
-  layout,
-  line,
-}: {
-  layout: CartMainProps['layout'];
-  line: CartLine;
-}) {
-  const {id, merchandise} = line;
-  const {product, title, image, selectedOptions} = merchandise;
-  const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
-
-  return (
-    <li key={id} className="cart-line">
-      {image && (
-        <Image
-          alt={title}
-          aspectRatio="1/1"
-          data={image}
-          height={100}
-          loading="lazy"
-          width={100}
-        />
-      )}
-
-      <div>
-        <Link
-          prefetch="intent"
-          to={lineItemUrl}
-          onClick={() => {
-            if (layout === 'aside') {
-              // close the drawer
-              window.location.href = lineItemUrl;
-            }
-          }}
-        >
-          <p>
-            <strong>{product.title}</strong>
-          </p>
-        </Link>
-        <CartLinePrice line={line} as="span" />
-        <ul>
-          {selectedOptions.map((option) => (
-            <li key={option.name}>
-              <small>
-                {option.name}: {option.value}
-              </small>
-            </li>
-          ))}
-        </ul>
-        <CartLineQuantity line={line} />
-      </div>
-    </li>
-  );
-}
-
-function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
-  if (!checkoutUrl) return null;
-
-  return (
-    <div>
-      <a href={checkoutUrl} target="_self">
-        <p>Continue to Checkout &rarr;</p>
-      </a>
-      <br />
-    </div>
-  );
-}
-
-export function CartSummary({
-  cost,
-  layout,
-  children = null,
-}: {
-  children?: React.ReactNode;
-  cost: CartApiQueryFragment['cost'];
-  layout: CartMainProps['layout'];
-}) {
-  const className =
-    layout === 'page' ? 'cart-summary-page' : 'cart-summary-aside';
-
-  return (
-    <div aria-labelledby="cart-summary" className={className}>
-      <h4>Totals</h4>
-      <dl className="cart-subtotal">
-        <dt>Subtotal</dt>
-        <dd>
-          {cost?.subtotalAmount?.amount ? (
-            <Money data={cost?.subtotalAmount} />
-          ) : (
-            '-'
-          )}
-        </dd>
-      </dl>
-      {children}
-    </div>
-  );
-}
-
-function CartLineRemoveButton({
-  lineIds,
-  disabled,
-}: {
-  lineIds: string[];
-  disabled: boolean;
-}) {
-  return (
-    <CartForm
-      route="/cart"
-      action={CartForm.ACTIONS.LinesRemove}
-      inputs={{lineIds}}
-    >
-      <button disabled={disabled} type="submit">
-        Remove
-      </button>
-    </CartForm>
-  );
-}
-
-function CartLineQuantity({line}: {line: CartLine}) {
-  if (!line || typeof line?.quantity === 'undefined') return null;
-  const {id: lineId, quantity, isOptimistic} = line;
-  const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
-  const nextQuantity = Number((quantity + 1).toFixed(0));
-
-  return (
-    <div className="cart-line-quantity">
-      <small>Quantity: {quantity} &nbsp;&nbsp;</small>
-      <CartLineUpdateButton lines={[{id: lineId, quantity: prevQuantity}]}>
-        <button
-          aria-label="Decrease quantity"
-          disabled={quantity <= 1 || !!isOptimistic}
-          name="decrease-quantity"
-          value={prevQuantity}
-        >
-          <span>&#8722; </span>
-        </button>
-      </CartLineUpdateButton>
-      &nbsp;
-      <CartLineUpdateButton lines={[{id: lineId, quantity: nextQuantity}]}>
-        <button
-          aria-label="Increase quantity"
-          name="increase-quantity"
-          value={nextQuantity}
-          disabled={!!isOptimistic}
-        >
-          <span>&#43;</span>
-        </button>
-      </CartLineUpdateButton>
-      &nbsp;
-      <CartLineRemoveButton lineIds={[lineId]} disabled={!!isOptimistic} />
-    </div>
-  );
-}
-
-function CartLinePrice({
-  line,
-  priceType = 'regular',
-  ...passthroughProps
-}: {
-  line: CartLine;
-  priceType?: 'regular' | 'compareAt';
-  [key: string]: any;
-}) {
-  if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount)
-    return <div style={{visibility: 'hidden'}}>&nbsp;</div>;
-
-  const moneyV2 =
-    priceType === 'regular'
-      ? line.cost.totalAmount
-      : line.cost.compareAtAmountPerQuantity;
-
-  if (moneyV2 == null) {
-    return <div style={{visibility: 'hidden'}}>&nbsp;</div>;
-  }
-
-  return (
-    <div>
-      <Money withoutTrailingZeros {...passthroughProps} data={moneyV2} />
-    </div>
-  );
-}
-
-export function CartEmpty({
-  hidden = false,
-  layout = 'aside',
-}: {
-  hidden: boolean;
-  layout?: CartMainProps['layout'];
-}) {
-  return (
-    <div hidden={hidden}>
-      <br />
-      <p>
-        Looks like you haven&rsquo;t added anything yet, let&rsquo;s get you
-        started!
-      </p>
-      <br />
-      <Link
-        to="/collections"
-        onClick={() => {
-          if (layout === 'aside') {
-            window.location.href = '/collections';
-          }
-        }}
-      >
-        Continue shopping →
-      </Link>
-    </div>
-  );
-}
-
-function CartDiscounts({
-  discountCodes,
-}: {
-  discountCodes: CartApiQueryFragment['discountCodes'];
-}) {
-  const codes: string[] =
-    discountCodes
-      ?.filter((discount) => discount.applicable)
-      ?.map(({code}) => code) || [];
-
-  return (
-    <div>
-      {/* Have existing discount, display it with a remove option */}
-      <dl hidden={!codes.length}>
-        <div>
-          <dt>Discount(s)</dt>
-          <UpdateDiscountForm>
-            <div className="cart-discount">
-              <code>{codes?.join(', ')}</code>
-              &nbsp;
-              <button>Remove</button>
-            </div>
-          </UpdateDiscountForm>
-        </div>
-      </dl>
-
-      {/* Show an input to apply a discount */}
-      <UpdateDiscountForm discountCodes={codes}>
-        <div>
-          <input type="text" name="discountCode" placeholder="Discount code" />
-          &nbsp;
-          <button type="submit">Apply</button>
-        </div>
-      </UpdateDiscountForm>
-    </div>
-  );
-}
-
-function UpdateDiscountForm({
-  discountCodes,
-  children,
-}: {
-  discountCodes?: string[];
-  children: React.ReactNode;
-}) {
-  return (
-    <CartForm
-      route="/cart"
-      action={CartForm.ACTIONS.DiscountCodesUpdate}
-      inputs={{
-        discountCodes: discountCodes || [],
-      }}
-    >
-      {children}
-    </CartForm>
-  );
-}
-
-function CartLineUpdateButton({
-  children,
-  lines,
-}: {
-  children: React.ReactNode;
-  lines: CartLineUpdateInput[];
-}) {
-  return (
-    <CartForm
-      route="/cart"
-      action={CartForm.ACTIONS.LinesUpdate}
-      inputs={{lines}}
-    >
-      {children}
-    </CartForm>
-  );
-}

package/dist/assets/hydrogen/tailwind/postcss.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    'postcss-preset-env': {
-      features: {'nesting-rules': false},
-    },
-  },
-};

package/dist/assets/hydrogen/tailwind/tailwind.config.js

@@ -1,8 +0,0 @@
-import formsPlugin from '@tailwindcss/forms';
-import typographyPlugin from '@tailwindcss/typography';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./{src-dir}/**/*.{js,ts,jsx,tsx}'],
-  plugins: [formsPlugin, typographyPlugin],
-};

package/dist/lib/check-version.js

@@ -1,75 +0,0 @@
-import path from 'node:path';
-import { createRequire } from 'node:module';
-import { checkForNewVersion } from '@shopify/cli-kit/node/node-package-manager';
-import { renderInfo } from '@shopify/cli-kit/node/ui';
-import { CLI_KIT_VERSION } from '@shopify/cli-kit/common/version';
-
-const PACKAGE_NAMES = {
-  main: "@shopify/hydrogen",
-  cliHydrogen: "@shopify/cli-hydrogen",
-  cli: "@shopify/cli"
-};
-async function checkHydrogenVersion(resolveFrom, pkgKey = "main") {
-  if (process.env.LOCAL_DEV)
-    return;
-  const pkgName = PACKAGE_NAMES[pkgKey];
-  let currentVersion;
-  if (pkgName === PACKAGE_NAMES.cli) {
-    currentVersion = CLI_KIT_VERSION;
-  } else {
-    currentVersion = getCurrentVersionFromPackageJson(pkgName, resolveFrom);
-  }
-  if (!currentVersion || currentVersion.includes("next"))
-    return;
-  const newVersionAvailable = await checkForNewVersion(pkgName, currentVersion);
-  if (!newVersionAvailable)
-    return;
-  const references = [
-    {
-      link: {
-        label: "Hydrogen releases",
-        url: "https://github.com/Shopify/hydrogen/releases"
-      }
-    }
-  ];
-  if (pkgName === PACKAGE_NAMES.cli) {
-    references.push({
-      link: {
-        label: "Global CLI reference",
-        url: "https://shopify.dev/docs/api/shopify-cli/"
-      }
-    });
-  }
-  return (extraMessage = "") => {
-    renderInfo({
-      headline: "Upgrade available",
-      body: `Version ${newVersionAvailable} of ${pkgName} is now available.
-You are currently running v${currentVersion}.` + (extraMessage ? "\n\n" : "") + extraMessage,
-      reference: references
-    });
-    return { currentVersion, newVersion: newVersionAvailable };
-  };
-}
-function getCurrentVersionFromPackageJson(pkgName, resolveFrom) {
-  const require2 = createRequire(import.meta.url);
-  const pkgJsonPath = resolveFrom.endsWith("package.json") ? locateDependency(require2, resolveFrom) : locateDependency(
-    require2,
-    path.join(pkgName, "package.json"),
-    resolveFrom
-  );
-  if (!pkgJsonPath)
-    return;
-  const currentVersion = require2(pkgJsonPath).version;
-  return currentVersion;
-}
-function locateDependency(require2, nameToResolve, resolveFrom) {
-  try {
-    return require2.resolve(nameToResolve, {
-      paths: [resolveFrom ?? process.cwd()]
-    });
-  } catch {
-    return;
-  }
-}
-
-export { checkHydrogenVersion };

package/dist/lib/setups/css/css-modules.js

@@ -1,23 +0,0 @@
-import { mergePackageJson } from '../../file.js';
-import { getCodeFormatOptions } from '../../format-code.js';
-import { injectCssBundlingLink } from './replacers.js';
-import { getAssetsDir } from '../../build.js';
-
-async function setupCssModules({
-  rootDirectory,
-  appDirectory
-}) {
-  const workPromise = Promise.all([
-    mergePackageJson(await getAssetsDir("css-modules"), rootDirectory),
-    getCodeFormatOptions(rootDirectory).then(
-      (formatConfig) => injectCssBundlingLink(appDirectory, formatConfig)
-    )
-  ]);
-  return {
-    workPromise,
-    generatedAssets: [],
-    helpUrl: "https://github.com/css-modules/css-modules"
-  };
-}
-
-export { setupCssModules };

package/dist/lib/setups/css/postcss.js

@@ -1,31 +0,0 @@
-import { outputInfo } from '@shopify/cli-kit/node/output';
-import { mergePackageJson } from '../../file.js';
-import { canWriteFiles, copyAssets } from './assets.js';
-import { getAssetsDir } from '../../build.js';
-
-async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
-  const assetMap = {
-    "postcss.config.js": "postcss.config.js"
-  };
-  if (futureOptions.postcss) {
-    outputInfo(`PostCSS is already setup in ${rootDirectory}.`);
-    return;
-  }
-  if (!await canWriteFiles(assetMap, appDirectory, force)) {
-    outputInfo(
-      `Skipping CSS setup as some files already exist. You may use \`--force\` or \`-f\` to override it.`
-    );
-    return;
-  }
-  const workPromise = Promise.all([
-    mergePackageJson(await getAssetsDir("postcss"), rootDirectory),
-    copyAssets("postcss", assetMap, rootDirectory)
-  ]);
-  return {
-    workPromise,
-    generatedAssets: Object.values(assetMap),
-    helpUrl: "https://postcss.org/"
-  };
-}
-
-export { setupPostCss };