feat(core): rename BcImage to Image

.changeset/selfish-buses-clap.md

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

.changeset/thirty-rockets-smell.md

@@ -2,4 +2,4 @@
 "@bigcommerce/catalyst-core": minor
 ---
 
-Force usage of the `<BcImage/>` component. This component should fallback to using the default image loader if the url doesn't come from the BigCommerce CDN.
+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

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

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/bc-image/index.tsx → core/components/image/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import Image, { ImageProps } from 'next/image';
+import NextImage, { ImageProps } from 'next/image';
 
 import bcCdnImageLoader from '~/lib/cdn-image-loader';
 
@@ -17,10 +17,10 @@ function shouldUseLoaderProp(props: ImageProps): boolean {
  *
  * It defaults to use the default loader in Next.js if it's an image not from the BigCommerce CDN.
  *
- * @returns {React.ReactElement} The `<BcImage>` component
+ * @returns {React.ReactElement} The `<Image>` component
  */
-export const BcImage = ({ ...props }: ImageProps) => {
+export const Image = ({ ...props }: ImageProps) => {
   const loader = shouldUseLoaderProp(props) ? bcCdnImageLoader : undefined;
 
-  return <Image loader={loader} {...props} />;
+  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

@@ -4,7 +4,7 @@ import { StaticImageData } from 'next/image';
 import { useTranslations } from 'next-intl';
 import { useEffect, useReducer, useState } from 'react';
 
-import { BcImage } from '~/components/bc-image';
+import { Image } from '~/components/image';
 import { cn } from '~/lib/utils';
 
 import { Button } from '../button';
@@ -117,7 +117,7 @@ const Slideshow = ({ className, interval = 15_000, slides }: Props) => {
             >
               <div className="relative">
                 {slide.image && (
-                  <BcImage
+                  <Image
                     alt={slide.image.altText}
                     blurDataURL={slide.image.blurDataUrl}
                     className="absolute -z-10 object-cover"

core/lib/store-assets.ts

@@ -33,10 +33,10 @@ export const contentAssetUrl = (path: string): string => {
  *
  * @param {string} path - The path of the image relative to the /content folder.
  * @param {string} sizeParam - The optional size parameter. Can be of the form `{:size}` (to make it a urlTemplate) or `original` or `123w` or `123x123`. If omitted, will return the templated string containing `{:size}`.
- * @returns {string} The resizeable URL template for the image, which can be used with `<BcImage>`.
+ * @returns {string} The resizeable URL template for the image, which can be used with `<Image>`.
  */
 export const contentImageUrl = (path: string, sizeParam?: string): string => {
-  // return a urlTemplate that can be used with the <BcImage> component
+  // return a urlTemplate that can be used with the <Image> component
   return cdnImageUrlBuilder(sizeParam || '{:size}', 'content', path);
 };
 
@@ -45,9 +45,9 @@ export const contentImageUrl = (path: string, sizeParam?: string): string => {
  *
  * @param {string} filename - The filename of the image managed by the image manager.
  * @param {string} sizeParam - The optional size parameter. Can be of the form `{:size}` (to make it a urlTemplate) or `original` or `123w` or `123x123`. If omitted, will return the templated string containing `{:size}`.
- * @returns {string} The resizeable URL template for the image, which can be used with `<BcImage>`.
+ * @returns {string} The resizeable URL template for the image, which can be used with `<Image>`.
  */
 export const imageManagerImageUrl = (filename: string, sizeParam?: string): string => {
-  // return a urlTemplate that can be used with the <BcImage> component
+  // return a urlTemplate that can be used with the <Image> component
   return cdnImageUrlBuilder(sizeParam || '{:size}', 'image-manager', filename);
 };