feat(core): default to local image component

.changeset/selfish-buses-clap.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Rename `BcImage` to `Image`

.changeset/thirty-rockets-smell.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Force usage of the `<Image/>` component. This component should fallback to using the default image loader if the url doesn't come from the BigCommerce CDN.

core/.eslintrc.cjs

@@ -27,6 +27,12 @@ const config = {
             name: 'next/link',
             message: "Please import 'Link' from '~/components/Link' instead.",
           },
+          {
+            name: 'next/image',
+            importNames: ['default'],
+            message:
+              "Please import 'Image' from '~/components/image' instead. This component handles CDN and static image optimization.",
+          },
           {
             name: '~/i18n/routing',
             importNames: ['Link'],

core/app/[locale]/(default)/blog/[blogId]/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getFormatter } from 'next-intl/server';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link } from '~/components/link';
 import { Tag } from '~/components/ui/tag';
 
@@ -62,7 +62,7 @@ export default async function Blog({ params }: Props) {
 
       {blogPost.thumbnailImage ? (
         <div className="mb-6 flex h-40 sm:h-80 lg:h-96">
-          <BcImage
+          <Image
             alt={blogPost.thumbnailImage.altText}
             className="h-full w-full object-cover object-center"
             height={900}

core/app/[locale]/(default)/cart/_components/cart-item.tsx

@@ -1,7 +1,7 @@
 import { useFormatter } from 'next-intl';
 
 import { FragmentOf, graphql } from '~/client/graphql';
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 
 import { ItemQuantity } from './item-quantity';
 import { RemoveItem } from './remove-item';
@@ -155,7 +155,7 @@ export const CartItem = ({ currencyCode, product }: Props) => {
       <div className="flex gap-4 border-t border-t-gray-200 py-4 md:flex-row">
         <div className="w-24 flex-none md:w-[144px]">
           {product.image?.url ? (
-            <BcImage alt={product.name} height={144} src={product.image.url} width={144} />
+            <Image alt={product.name} height={144} src={product.image.url} width={144} />
           ) : (
             <div className="h-full w-full bg-gray-200" />
           )}

core/app/[locale]/(default)/compare/page.tsx

@@ -7,7 +7,7 @@ import { client } from '~/client';
 import { PricingFragment } from '~/client/fragments/pricing';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link } from '~/components/link';
 import { SearchForm } from '~/components/search-form';
 import { Button } from '~/components/ui/button';
@@ -157,7 +157,7 @@ export default async function Compare(props: Props) {
                   return (
                     <td className="px-4" key={product.entityId}>
                       <Link aria-label={product.name} href={product.path}>
-                        <BcImage
+                        <Image
                           alt={product.defaultImage.altText}
                           height={300}
                           src={product.defaultImage.url}

core/components/image/index.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import NextImage, { ImageProps } from 'next/image';
+
+import bcCdnImageLoader from '~/lib/cdn-image-loader';
+
+const cdnHostname = process.env.BIGCOMMERCE_CDN_HOSTNAME ?? 'cdn11.bigcommerce.com';
+
+function shouldUseLoaderProp(props: ImageProps): boolean {
+  return typeof props.src === 'string' && props.src.startsWith(`https://${cdnHostname}`);
+}
+
+/**
+ * This component should be used in place of Next's `Image` component for images from the
+ * BigCommerce platform, which will reduce load on the Next.js application for image assets.
+ *
+ * It defaults to use the default loader in Next.js if it's an image not from the BigCommerce CDN.
+ *
+ * @returns {React.ReactElement} The `<Image>` component
+ */
+export const Image = ({ ...props }: ImageProps) => {
+  const loader = shouldUseLoaderProp(props) ? bcCdnImageLoader : undefined;
+
+  return <NextImage loader={loader} {...props} />;
+};

core/components/store-logo/index.tsx

@@ -1,6 +1,5 @@
 import { FragmentOf } from '~/client/graphql';
-
-import { BcImage } from '../bc-image';
+import { Image } from '~/components/image';
 
 import { StoreLogoFragment } from './fragment';
 
@@ -16,7 +15,7 @@ export const StoreLogo = ({ data }: Props) => {
   }
 
   return (
-    <BcImage
+    <Image
       alt={logo.image.altText ? logo.image.altText : storeName}
       className="max-h-16 object-contain"
       height={32}

core/components/ui/blog-post-card/blog-post-card.tsx

@@ -1,4 +1,4 @@
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link } from '~/components/link';
 import { cn } from '~/lib/utils';
 
@@ -32,7 +32,7 @@ const BlogPostCard = ({
       {image ? (
         <div className="mb-2 flex h-44 lg:h-56">
           <Link className="block w-full" href={href}>
-            <BcImage
+            <Image
               alt={image.altText}
               className="h-full w-full object-cover object-center"
               height={300}

core/components/ui/compare-drawer/compare-drawer.tsx

@@ -2,7 +2,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown, X } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link as CustomLink } from '~/components/link';
 import { usePathname } from '~/i18n/routing';
 
@@ -38,7 +38,7 @@ const Product = ({ product, onDismiss }: { product: Product; onDismiss: () => vo
       key={product.id}
     >
       {product.image ? (
-        <BcImage
+        <Image
           alt={product.image.altText}
           className="object-contain"
           height={48}

core/components/ui/footer/footer.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import { Fragment, ReactNode } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link as CustomLink } from '~/components/link';
 import { cn } from '~/lib/utils';
 
@@ -75,7 +75,7 @@ const Footer = ({
           {Boolean(logo) && (
             <h3>
               {typeof logo === 'object' ? (
-                <BcImage
+                <Image
                   alt={logo.altText}
                   className="max-h-16 object-contain"
                   height={32}

core/components/ui/form/pick-list/pick-list.tsx

@@ -1,7 +1,7 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ComponentPropsWithRef, ElementRef, forwardRef, useId } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { cn } from '~/lib/utils';
 
 import { Label } from '../label';
@@ -43,7 +43,7 @@ const PickList = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Props>(
               onMouseEnter={onMouseEnter}
             >
               {image && (
-                <BcImage
+                <Image
                   alt={image.altText}
                   className="me-6"
                   height={48}

core/components/ui/gallery/gallery.tsx

@@ -2,7 +2,7 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { cn } from '~/lib/utils';
 
 interface Image {
@@ -26,7 +26,7 @@ const Gallery = ({ className, images, defaultImageIndex = 0 }: Props) => {
     <div aria-live="polite" className={className}>
       <figure className="relative aspect-square h-full max-h-[548px] w-full">
         {selectedImage ? (
-          <BcImage
+          <Image
             alt={selectedImage.altText}
             className="h-full w-full object-contain"
             fill
@@ -91,7 +91,7 @@ const Gallery = ({ className, images, defaultImageIndex = 0 }: Props) => {
                 setSelectedImageIndex(index);
               }}
             >
-              <BcImage
+              <Image
                 alt={image.altText}
                 className={cn(
                   'flex h-full w-full cursor-pointer items-center justify-center border-2 object-contain hover:border-primary',

core/components/ui/header/header.tsx

@@ -2,7 +2,7 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { ChevronDown } from 'lucide-react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link as CustomLink } from '~/components/link';
 import { cn } from '~/lib/utils';
 
@@ -56,7 +56,7 @@ const Header = ({
     <header className="flex h-[92px] items-center justify-between gap-1 overflow-y-visible bg-white px-4 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0">
       <CustomLink className="overflow-hidden text-ellipsis py-3" href="/">
         {typeof logo === 'object' ? (
-          <BcImage
+          <Image
             alt={logo.altText}
             className="max-h-16 object-contain"
             height={32}

core/components/ui/header/mobile-nav.tsx

@@ -6,7 +6,7 @@ import { ChevronDown, Menu, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link as CustomLink } from '~/components/link';
 
 import { Button } from '../button';
@@ -51,7 +51,7 @@ export const MobileNav = ({ links, logo }: Props) => {
           <div className="flex h-[92px] items-center justify-between">
             <div className="overflow-hidden text-ellipsis py-3">
               {typeof logo === 'object' ? (
-                <BcImage
+                <Image
                   alt={logo.altText}
                   className="max-h-16 object-contain"
                   height={32}

core/components/ui/header/search.tsx

@@ -7,7 +7,7 @@ import { Search as SearchIcon, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link as CustomLink } from '~/components/link';
 import { cn } from '~/lib/utils';
 
@@ -124,7 +124,7 @@ const Search = ({ initialTerm = '', logo, onSearch }: Props) => {
               <div className="me-2 hidden lg:block lg:justify-self-start">
                 <CustomLink className="overflow-hidden text-ellipsis py-3" href="/">
                   {typeof logo === 'object' ? (
-                    <BcImage
+                    <Image
                       alt={logo.altText}
                       className="max-h-16 object-contain"
                       height={32}
@@ -204,7 +204,7 @@ const Search = ({ initialTerm = '', logo, onSearch }: Props) => {
                             href={href}
                           >
                             {image ? (
-                              <BcImage
+                              <Image
                                 alt={image.altText}
                                 className="self-start object-contain"
                                 height={80}

core/components/ui/product-card/product-card.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { Link } from '~/components/link';
 import { cn } from '~/lib/utils';
 
@@ -66,7 +66,7 @@ const ProductCard = ({
         })}
       >
         {image ? (
-          <BcImage
+          <Image
             alt={image.altText}
             className="object-contain"
             fill

core/components/ui/slideshow/slideshow.tsx

@@ -1,9 +1,10 @@
 import useEmblaCarousel from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight, Pause, Play } from 'lucide-react';
-import NextImage, { StaticImageData } from 'next/image';
+import { StaticImageData } from 'next/image';
 import { useTranslations } from 'next-intl';
 import { useEffect, useReducer, useState } from 'react';
 
+import { Image } from '~/components/image';
 import { cn } from '~/lib/utils';
 
 import { Button } from '../button';
@@ -116,7 +117,7 @@ const Slideshow = ({ className, interval = 15_000, slides }: Props) => {
             >
               <div className="relative">
                 {slide.image && (
-                  <NextImage
+                  <Image
                     alt={slide.image.altText}
                     blurDataURL={slide.image.blurDataUrl}
                     className="absolute -z-10 object-cover"

core/lib/cdn-image-loader.ts

@@ -1,21 +1,9 @@
 'use client';
 
-export default function bcCdnImageLoader({
-  src,
-  width,
-  height,
-}: {
-  src: string;
-  width: number;
-  height?: number;
-}): string {
-  let url;
+import { ImageLoaderProps } from 'next/image';
 
-  if (height) {
-    url = src.replace('{:size}', `${width}x${height}`);
-  }
-
-  url = src.replace('{:size}', `${width}w`);
+export default function bcCdnImageLoader({ src, width }: ImageLoaderProps): string {
+  const url = src.replace('{:size}', `${width}w`);
 
   return url;
 }