chore: Removes next/image dependency from ui/component SKUMatrixSideb…

…ar (#2639) ## What's the purpose of this pull request? We should not use next/image dependency in our components package. note: We agreed that this component does not fit within our components library, we should move it to core. ## How it works? Adds `ImageComponent` that can use to render the image. Then we can use the next/image in core. ## How to test it? 1. run the application locally or use this [preview](https://starter-371nj2xzn-vtex.vercel.app/headphone-default-99988229/p) 2. go to Headphone Default plp -> check if the SkuMatrixSidebar image is rendered as expected using next/image <img width="500" alt="image" src="https://github.com/user-attachments/assets/af6cc6e2-3879-4d64-bef6-f9ae2556ee15" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/c84d5d3d-7fff-4b00-954b-5eb5fcc5d28a" /> ### Starters Deploy Preview [WIP] ## References [SFS-2025](https://vtex-dev.atlassian.net/browse/SFS-2025?atlOrigin=eyJpIjoiYmMxNzE0YzAzZDFmNDNkMDg5ZjY1ZmU5MDZjOTE3MzEiLCJwIjoiaiJ9) [SFS-2025]: https://vtex-dev.atlassian.net/browse/SFS-2025?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
vtex · Jan 29, 2025 · 9d5231c · 9d5231c
1 parent 6fea4f1
commit 9d5231c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 38 deletions.
diff --git a/packages/components/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx b/packages/components/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx
@@ -1,8 +1,9 @@
-import Image from 'next/image'
+/* eslint-disable @next/next/no-img-element */
+import type { FunctionComponent } from 'react'
 import React, { useMemo } from 'react'
 import { Badge, Button, QuantitySelector, Skeleton } from '../..'
-import Price, { PriceFormatter } from '../../atoms/Price'
 import Icon from '../../atoms/Icon'
+import Price, { PriceFormatter } from '../../atoms/Price'
 import { useFadeEffect, useSKUMatrix, useUI } from '../../hooks'
 import {
   Table,
@@ -12,7 +13,6 @@ import {
   TableRow,
 } from '../../molecules/Table'
 import SlideOver, { SlideOverHeader, SlideOverProps } from '../SlideOver'
-
 interface VariationProductColumn {
   name: string
   additionalColumns: Array<{ label: string; value: string }>
@@ -24,8 +24,15 @@ interface VariationProductColumn {
   quantitySelector: number
 }
 
+const ImageComponentFallback: SKUMatrixSidebarProps['ImageComponent'] = ({
+  src,
+  alt,
+  ...otherProps
+}) => <img src={src} alt={alt} {...otherProps} />
+
+// TODO: Moves this component to the `@faststore/core` package. We decided that it doesn't make sense to have this component in the library since it's vey specific to the SKU Matrix feature.
 export interface SKUMatrixSidebarProps
-  extends Omit<SlideOverProps, 'isOpen' | 'setIsOpen' | "fade"> {
+  extends Omit<SlideOverProps, 'isOpen' | 'setIsOpen' | 'fade'> {
   /**
    * Title for the SKUMatrixSidebar component.
    */
@@ -51,18 +58,28 @@ export interface SKUMatrixSidebarProps
    * Check if some result is still loading before render the result.
    */
   loading?: boolean
+  /**
+   * Function that returns a React component that will be used to render images.
+   */
+  ImageComponent: FunctionComponent<{
+    src: string
+    alt: string
+    width?: number
+    height?: number
+  }>
 }
 
 function SKUMatrixSidebar({
-  direction = 'rightSide',
   title,
-  overlayProps,
+  direction = 'rightSide',
   size = 'partial',
   children,
   columns,
-  buyProps: { onClick: buyButtonOnClick, ...buyProps },
   loading,
   formatter,
+  ImageComponent = ImageComponentFallback,
+  buyProps: { onClick: buyButtonOnClick, ...buyProps },
+  overlayProps,
   ...otherProps
 }: SKUMatrixSidebarProps) {
   const {
@@ -177,11 +194,9 @@ function SKUMatrixSidebar({
               {allVariantProducts.map((variantProduct) => (
                 <TableRow key={`${variantProduct.name}-${variantProduct.id}`}>
                   <TableCell data-fs-sku-matrix-sidebar-cell-image align="left">
-                    <Image
+                    <ImageComponent
                       src={variantProduct.image.url}
                       alt={variantProduct.image.alternateName}
-                      width={48}
-                      height={48}
                     />
                     {variantProduct.name}
                   </TableCell>

diff --git a/packages/core/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx b/packages/core/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx
@@ -7,9 +7,16 @@ import { gql } from '@generated/gql'
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { usePDP } from 'src/sdk/overrides/PageProvider'
 import { useAllVariantProducts } from 'src/sdk/product/useAllVariantProducts'
+import { Image } from '../Image'
 
 interface SKUMatrixProps extends UISKUMatrixSidebarProps {}
 
+const ImageComponent: UISKUMatrixSidebarProps['ImageComponent'] = ({
+  src,
+  alt,
+  ...otherProps
+}) => <Image src={src} alt={alt} width={48} height={48} {...otherProps} />
+
 function SKUMatrixSidebar(props: SKUMatrixProps) {
   const {
     data: { product },
@@ -76,6 +83,7 @@ function SKUMatrixSidebar(props: SKUMatrixProps) {
       buyProps={buyProps}
       title={product.isVariantOf.name ?? ''}
       loading={isValidating}
+      ImageComponent={ImageComponent}
       {...props}
     />
   )

diff --git a/packages/ui/src/components/organisms/SKUMatrix/styles.scss b/packages/ui/src/components/organisms/SKUMatrix/styles.scss
@@ -4,22 +4,23 @@
   // --------------------------------------------------------
 
   // Default properties
-
-  // Background
-  --fs-sku-matrix-sidebar-bkg-color				          : var(--fs-color-body-bkg);
+  --fs-sku-matrix-sidebar-bkg-color                       : var(--fs-color-body-bkg);
 
   // Title
-  --fs-sku-matrix-sidebar-title-size				        : var(--fs-text-size-6);
-  --fs-sku-matrix-sidebar-title-text-weight			    : var(--fs-text-weight-semibold);
-
+  --fs-sku-matrix-sidebar-title-size                      : var(--fs-text-size-6);
+  --fs-sku-matrix-sidebar-title-text-weight               : var(--fs-text-weight-semibold);
+         
   // Cell
-  --fs-sku-matrix-sidebar-table-cell-font-size			: var(--fs-text-size-tiny);
-  --fs-sku-matrix-sidebar-table-cell-text-weight		: var(--fs-text-weight-medium);
+  --fs-sku-matrix-sidebar-table-cell-font-size            : var(--fs-text-size-tiny);
+  --fs-sku-matrix-sidebar-table-cell-text-weight          : var(--fs-text-weight-medium);
 
+  // Image
+  --fs-sku-matrix-sidebar-table-cell-image-width          : var(--fs-spacing-7); // 48px
+  --fs-sku-matrix-sidebar-table-cell-image-border-radius  : var(--fs-border-radius);
 
   // Partial
-  --fs-sku-matrix-slide-over-partial-gap			      : calc(2 * var(--fs-grid-padding));
-  --fs-sku-matrix-slide-over-partial-width-mobile		: calc(100vw - var(--fs-sku-matrix-slide-over-partial-gap));
+  --fs-sku-matrix-slide-over-partial-gap                  : calc(2 * var(--fs-grid-padding));
+  --fs-sku-matrix-slide-over-partial-width-mobile         : calc(100vw - var(--fs-sku-matrix-slide-over-partial-gap));
 
   // --------------------------------------------------------
   // Structural Styles
@@ -34,8 +35,8 @@
     flex-shrink: 0;
     padding: var(--fs-spacing-3) var(--fs-spacing-8);
     padding-bottom: 0;
-    
-    @include media("<tablet") {
+
+    @include media('<tablet') {
       padding: var(--fs-spacing-3);
       padding-bottom: 0;
     }
@@ -48,16 +49,16 @@
       padding: var(--fs-spacing-8);
       padding-bottom: 0;
 
-      @include media("<tablet") {
+      @include media('<tablet') {
         padding: var(--fs-spacing-3);
         padding-bottom: 0;
       }
     }
 
-    &[data-fs-slide-over-size="partial"] {
+    &[data-fs-slide-over-size='partial'] {
       width: var(--fs-sku-matrix-slide-over-partial-width-mobile);
 
-      @include media(">=notebook") {
+      @include media('>=notebook') {
         max-width: var(--fs-sku-matrix-slide-over-partial-width-mobile);
       }
     }
@@ -91,7 +92,7 @@
   }
 
   [data-fs-table-cell],
-  [data-fs-price-variant="spot"] {
+  [data-fs-price-variant='spot'] {
     font-weight: var(--fs-text-weight-medium);
   }
 
@@ -115,11 +116,12 @@
     align-items: center;
     gap: var(--fs-spacing-2);
 
-    > div {
-      img {
-        object-fit: cover;
-        object-position: center;
-      }
+    img {
+      object-fit: cover;
+      object-position: center;
+      width: var(--fs-sku-matrix-sidebar-table-cell-image-width);
+      height: var(--fs-sku-matrix-sidebar-table-cell-image-width);
+      border-radius: var(--fs-sku-matrix-sidebar-table-cell-image-border-radius);
     }
   }
 
@@ -131,19 +133,16 @@
 
   [data-fs-sku-matrix-sidebar-footer] {
     display: flex;
+    width: 100%;
+    padding: var(--fs-spacing-4) var(--fs-spacing-8);
     justify-content: space-between;
-
     position: sticky;
     bottom: 0;
     left: 0;
     right: 0;
     margin-top: auto;
-
-    background-color: var(--fs-sku-matrix-sidebar-bkg-color);
-
-    padding: var(--fs-spacing-4) var(--fs-spacing-8);
     border-top: var(--fs-border-width) solid var(--fs-border-color-light);
-    width: 100%;
+    background-color: var(--fs-sku-matrix-sidebar-bkg-color);
 
     > div {
       display: flex;
@@ -156,7 +155,7 @@
       }
     }
 
-    @include media("<tablet") {
+    @include media('<tablet') {
       padding: var(--fs-spacing-3);
     }
   }