implement NextImage component

- now we don't use srcset solution for which was our Image component prepared - it was replaced with the solution provided by Next.js which is NextImage component - this component allows us many more possibilities.
shopsys · Dec 7, 2023 · 0311a43 · 0311a43
1 parent 1c53d06
commit 0311a43
Show file tree

Hide file tree

Showing 37 changed files with 229 additions and 178 deletions.
diff --git a/storefront/components/Basic/Icon/IconImage.tsx b/storefront/components/Basic/Icon/IconImage.tsx
@@ -1,18 +1,19 @@
+import { Image } from 'components/Basic/Image/Image';
 import { HTMLAttributes } from 'react';
 import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault';
 
 type NativeProps = ExtractNativePropsFromDefault<HTMLAttributes<HTMLElement>, never, 'onClick' | 'title'>;
 
 type IconImageProps = NativeProps & {
     icon: string;
-    alt: string | undefined;
+    alt: string;
     width?: number;
     height?: number;
 };
 
 export const IconImage: FC<IconImageProps> = ({ icon, height, width, ...props }) => {
     return (
-        <img
+        <Image
             height={height !== undefined ? height : '24'}
             src={`/icons/${icon}.png`}
             width={width !== undefined ? width : '24'}

diff --git a/storefront/components/Basic/Image/Image.tsx b/storefront/components/Basic/Image/Image.tsx
@@ -1,58 +1,21 @@
-import { ImageFragmentApi } from 'graphql/generated';
 import { twMergeCustom } from 'helpers/twMerge';
-import { ImgHTMLAttributes } from 'react';
+import NextImage, { ImageProps as NextImageProps } from 'next/image';
+import { useState } from 'react';
 
 type ImageProps = {
-    image: ImageFragmentApi | null | undefined;
-    alt: string | null | undefined;
-    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
-    width?: string | number;
-    height?: string | number;
-    wrapperClassName?: string;
-};
-
-const getDataTestId = (dataTestId?: string) => dataTestId ?? 'basic-image';
-
-export const Image: FC<ImageProps> = ({
-    image,
-    alt,
-    loading,
-    dataTestId,
-    width,
-    height,
-    className,
-    wrapperClassName,
-}) => {
-    const imageTwClass = twMergeCustom(
-        'object-contain [image-rendering:-webkit-optimize-contrast] max-w-full max-h-full mx-auto',
-        className,
-    );
+    src: NextImageProps['src'] | undefined | null;
+} & Omit<NextImageProps, 'src'>;
 
-    if (!image) {
-        return (
-            <div className={wrapperClassName}>
-                <img
-                    alt={alt || ''}
-                    className={twMergeCustom('h-auto w-full', imageTwClass)}
-                    data-testid={getDataTestId(dataTestId) + '-empty'}
-                    height={height || 160}
-                    src="/images/optimized-noimage.webp"
-                    width={width || 160}
-                />
-            </div>
-        );
-    }
+export const Image: FC<ImageProps> = ({ src, className, ...props }) => {
+    const [imageUrl, setImageUrl] = useState(src ?? '/images/optimized-noimage.webp');
 
     return (
-        <picture className={wrapperClassName}>
-            <img
-                alt={image.name || alt || ''}
-                className={imageTwClass}
-                height={height}
-                loading={loading}
-                src={image.url}
-                width={width}
-            />
-        </picture>
+        <NextImage
+            className={twMergeCustom('[image-rendering:-webkit-optimize-contrast]', className)}
+            loader={({ src, width }) => `${src}?width=${width || '0'}`}
+            src={imageUrl}
+            onError={() => setImageUrl('/images/optimized-noimage.webp')}
+            {...props}
+        />
     );
 };
diff --git a/storefront/components/Blocks/Adverts/Adverts.tsx b/storefront/components/Blocks/Adverts/Adverts.tsx
@@ -1,4 +1,5 @@
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
+import { Image } from 'components/Basic/Image/Image';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { AdvertsFragmentApi, CategoryDetailFragmentApi, useAdvertsQueryApi } from 'graphql/generated';
 import { Fragment } from 'react';
@@ -50,15 +51,22 @@ export const Adverts: FC<AdvertsProps> = ({
                     const mainImageMobile = advert.mainImageMobile;
 
                     const ImageComponent = (
-                        <picture>
-                            {/* use min-width equal to Tailwind "lg" breakpoint */}
-                            <source media="(min-width: 48.0625em)" srcSet={mainImage?.url} />
-                            <img
-                                alt={advert.mainImage?.name || advert.mainImageMobile?.name || advert.name}
-                                className="w-full"
+                        <>
+                            <Image
+                                alt={mainImage?.name || advert.name}
+                                className="hidden lg:block"
+                                height={400}
+                                src={mainImage?.url}
+                                width={1280}
+                            />
+                            <Image
+                                alt={mainImageMobile?.name || advert.name}
+                                className="lg:hidden"
+                                height={300}
                                 src={mainImageMobile?.url}
+                                width={770}
                             />
-                        </picture>
+                        </>
                     );
 
                     return (

diff --git a/storefront/components/Blocks/Banners/BannersSliderItem.tsx b/storefront/components/Blocks/Banners/BannersSliderItem.tsx
@@ -1,3 +1,4 @@
+import { Image } from 'components/Basic/Image/Image';
 import { SliderItemFragmentApi } from 'graphql/generated';
 
 type BannersSliderItemProps = {
@@ -16,14 +17,19 @@ export const BannersSliderItem: FC<BannersSliderItemProps> = ({
             {!image ? (
                 <BannerImage alt="no image" src="images/optimized-noimage.webp" />
             ) : (
-                <picture>
-                    <BannerImage alt={image.name || name} src={image.url} />
-                </picture>
+                <BannerImage alt={image.name || name} src={image.url} />
             )}
         </a>
     );
 };
 
 const BannerImage: FC<{ src: string; alt: string }> = ({ src, alt }) => (
-    <img alt={alt} className="block h-full w-full object-cover" src={src} />
+    <Image
+        alt={alt}
+        className="block h-full w-full object-cover"
+        height={300}
+        sizes="(max-width: 1024px) 100vw, 80vw"
+        src={src}
+        width={1025}
+    />
 );
diff --git a/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx b/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
@@ -21,8 +21,11 @@ export const BlogPreviewMain: FC<MainProps> = ({ articles }) => (
                 >
                     <Image
                         alt={article.mainImage?.name || article.name}
-                        className="rounded"
-                        image={article.mainImage}
+                        className="mx-auto rounded"
+                        height={220}
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 35vw"
+                        src={article.mainImage?.url}
+                        width={700}
                     />
                 </ArticleLink>
 

diff --git a/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx b/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
@@ -16,7 +16,10 @@ export const BlogPreviewSide: FC<SideProps> = ({ articles }) => (
                     <Image
                         alt={article.mainImage?.name || article.name}
                         className="rounded"
-                        image={article.mainImage}
+                        height={250}
+                        sizes="(max-width: 600px) 90vw, (max-width: 1024px) 40vw, 10vw"
+                        src={article.mainImage?.url}
+                        width={768}
                     />
                 </ArticleLink>
 

diff --git a/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx b/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx
@@ -1,3 +1,5 @@
+import sentCartImage from '/public/images/sent-cart.svg';
+import { Image } from 'components/Basic/Image/Image';
 import { SkeletonPageConfirmation } from 'components/Blocks/Skeleton/SkeletonPageConfirmation';
 import { ReactElement } from 'react';
 
@@ -21,7 +23,7 @@ export const ConfirmationPageContent: FC<ConfirmationPageContentProps> = ({
     return (
         <div className="mt-16 mb-10 flex flex-col items-center justify-center lg:mt-16 lg:mb-24 lg:flex-row">
             <div className="mb-0 w-40 lg:mr-32">
-                <img alt={heading} src="/public/frontend/images/sent-cart.svg" />
+                <Image alt={heading} src={sentCartImage} />
             </div>
             <div>
                 <div className="h1 mb-3">{heading}</div>

diff --git a/storefront/components/Blocks/OrderSummary/SingleProduct.tsx b/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
@@ -14,11 +14,15 @@ export const SingleProduct: FC<SingleProductProps> = ({ item }) => {
 
     return (
         <li className="flex items-center border-b border-creamWhite py-3">
-            <Image
-                alt={item.product.mainImage?.name || item.product.fullName}
-                className="mr-4 h-14 w-14"
-                image={item.product.mainImage}
-            />
+            <div className="mr-4 flex w-14 items-center justify-center">
+                <Image
+                    alt={item.product.mainImage?.name || item.product.fullName}
+                    className="max-h-14 w-auto"
+                    height={56}
+                    src={item.product.mainImage?.url}
+                    width={56}
+                />
+            </div>
 
             <div className="flex flex-1 items-center">
                 <span className="flex-1 pr-3 text-sm">

diff --git a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
@@ -32,9 +32,9 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                     <OrderSummaryRow>
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-transport-name'}>
                             {transport.name}
-                            <span className="inline-block align-bottom">
-                                <Image alt={transport.name} className="h-8 w-8" image={transport.mainImage} />
-                            </span>
+                            <div className="flex h-8 w-8 items-center">
+                                <Image alt={transport.name} height={32} src={transport.mainImage?.url} width={32} />
+                            </div>
                         </OrderSummaryTextAndImage>
                         <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-transport-price'}>
                             <strong>{formatPrice(transport.price.priceWithVat)}</strong>
@@ -45,9 +45,9 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                     <OrderSummaryRow>
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-payment-name'}>
                             {payment.name}
-                            <span className="inline-block align-bottom">
-                                <Image alt={payment.name} className="h-8 w-8" image={payment.mainImage} />
-                            </span>
+                            <div className="flex h-8 w-8 items-center">
+                                <Image alt={payment.name} height={32} src={payment.mainImage?.url} width={32} />
+                            </div>
                         </OrderSummaryTextAndImage>
                         <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-payment-price'}>
                             <strong>{formatPrice(payment.price.priceWithVat)}</strong>

diff --git a/storefront/components/Blocks/Product/AddToCartPopup.tsx b/storefront/components/Blocks/Product/AddToCartPopup.tsx
@@ -39,7 +39,13 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
             >
                 {!!product.mainImage && (
                     <div className="mb-4 flex w-24 items-center justify-center md:mb-0">
-                        <Image alt={product.mainImage.name || product.fullName} image={product.mainImage} />
+                        <Image
+                            alt={product.mainImage.name || product.fullName}
+                            className="max-h-20 w-auto"
+                            height={48}
+                            src={product.mainImage.url}
+                            width={72}
+                        />
                     </div>
                 )}
                 <div className="w-full md:pl-4 lg:flex lg:items-center lg:justify-between">

diff --git a/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx b/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
@@ -77,8 +77,10 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
                     <div className="relative">
                         <Image
                             alt={product.mainImage?.name || product.fullName}
-                            className="h-40 justify-center lg:hover:mix-blend-multiply"
-                            image={product.mainImage}
+                            className="mx-auto h-40 w-auto"
+                            height={160}
+                            src={product.mainImage?.url}
+                            width={320}
                         />
                         {!!product.flags.length && (
                             <div className="absolute top-3 left-4 flex flex-col">

diff --git a/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx b/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
@@ -32,16 +32,19 @@ export const SimpleNavigationListItem: FC<SimpleNavigationListItemProps> = ({
                 )}
             >
                 {itemImage && (
-                    <Image
-                        alt={itemImage.name || listedItem.name}
-                        className="h-12 min-w-[64px] mix-blend-multiply"
-                        image={itemImage}
-                        width={64}
-                    />
+                    <div className="h-12 w-16 shrink-0">
+                        <Image
+                            alt={itemImage.name || listedItem.name}
+                            className="mx-auto max-h-full w-auto mix-blend-multiply"
+                            height={48}
+                            src={itemImage.url}
+                            width={64}
+                        />
+                    </div>
                 )}
 
-                <div className={twJoin('max-w-full text-center ', itemImage && 'lg:text-left')}>
-                    <span className="block max-w-full text-sm text-dark">{listedItem.name}</span>
+                <div className={twJoin('text-center ', itemImage && 'lg:text-left')}>
+                    <div className="text-sm text-dark">{listedItem.name}</div>
                     {'totalCount' in listedItem && listedItem.totalCount !== undefined && (
                         <span className="ml-2 whitespace-nowrap text-sm text-greyLight">({listedItem.totalCount})</span>
                     )}

diff --git a/storefront/components/Forms/TextInput/PasswordInputControlled.tsx b/storefront/components/Forms/TextInput/PasswordInputControlled.tsx
@@ -1,4 +1,6 @@
 import { TextInput } from './TextInput';
+import eyeIcon from '/public/svg/eye.svg';
+import { Image } from 'components/Basic/Image/Image';
 import { FormLineError } from 'components/Forms/Lib/FormLineError';
 import { InputHTMLAttributes, ReactElement, useCallback, useState } from 'react';
 import { Control, useController } from 'react-hook-form';
@@ -56,9 +58,9 @@ export const PasswordInputControlled: FC<PasswordInputControlledProps> = ({
                 onBlur={field.onBlur}
                 onChange={field.onChange}
             >
-                <img
+                <Image
                     alt="eye icon"
-                    src="/svg/eye.svg"
+                    src={eyeIcon}
                     className={twJoin(
                         'absolute top-1/2 right-4 w-6 -translate-y-1/2 cursor-pointer',
                         inputType === 'text' && 'opacity-50',

diff --git a/storefront/components/Layout/Footer/FooterBoxInfo.tsx b/storefront/components/Layout/Footer/FooterBoxInfo.tsx
@@ -1,5 +1,7 @@
+import needAdviceImage from '/public/images/need_advice.webp';
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { PhoneIcon } from 'components/Basic/Icon/IconsSvg';
+import { Image } from 'components/Basic/Image/Image';
 import { Button } from 'components/Forms/Button/Button';
 import { getInternationalizedStaticUrls } from 'helpers/getInternationalizedStaticUrls';
 import { useDomainConfig } from 'hooks/useDomainConfig';
@@ -20,14 +22,11 @@ export const FooterBoxInfo: FC = () => {
 
     return (
         <div className="relative mb-11 flex items-center lg:mb-24" data-testid={TEST_IDENTIFIER}>
-            <picture>
-                <source srcSet="/images/need_advice2x.webp 2x, /images/need_advice2x.webp 1x" />
-                <img
-                    alt={t('Need advice?')}
-                    className="absolute left-0 bottom-0 block h-12 w-12 translate-y-1/2 lg:h-16 lg:w-16"
-                    src="/images/need_advice.webp"
-                />
-            </picture>
+            <Image
+                alt={t('Need advice?')}
+                className="absolute left-0 bottom-0 block h-12 w-12 translate-y-1/2 lg:h-16 lg:w-16"
+                src={needAdviceImage}
+            />
             <div className="relative ml-16 flex flex-1 flex-col items-start rounded bg-primary p-4 before:absolute before:-left-1 before:-bottom-1 before:h-6 before:w-4 before:rounded-bl before:bg-primary before:content-[''] before:[transform:rotate(0deg)skewX(-41deg)scale(1.414,0.707)] lg:ml-24 lg:flex-row lg:items-center lg:justify-between lg:py-5 lg:pr-5 lg:pl-8">
                 <div className="mb-3 text-lg font-bold text-white lg:mr-3 lg:mb-0 lg:flex-1 lg:text-2xl vl:flex-none">
                     {t('Need advice?')}

diff --git a/storefront/components/Layout/Footer/FooterCopyright.tsx b/storefront/components/Layout/Footer/FooterCopyright.tsx
@@ -1,5 +1,6 @@
+import imageLogo from '/public/images/logo.svg';
+import { Image } from 'components/Basic/Image/Image';
 import useTranslation from 'next-translate/useTranslation';
-import Image from 'next/image';
 
 const TEST_IDENTIFIER = 'layout-footer-footercopyright';
 
@@ -14,7 +15,7 @@ export const FooterCopyright: FC = () => {
             <div className="flex items-center text-sm text-greyLight">
                 {t('Customized E-shop by')}
                 <a className="ml-2 flex w-20" href="https://www.shopsys.com" rel="noreferrer" target="_blank">
-                    <Image alt="footer logo" height={18} src="/images/logo.svg" width={77} />
+                    <Image alt="footer logo" src={imageLogo} />
                 </a>
             </div>
         </div>

diff --git a/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx b/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
@@ -32,8 +32,6 @@ type AutocompleteProps = {
 
 const TEST_IDENTIFIER = 'layout-header-search-autocomplete-popup';
 
-const imageTwClass = 'lg:w-full';
-
 export const AutocompleteSearchPopup: FC<AutocompleteProps> = ({
     autocompleteSearchQueryValue,
     autocompleteSearchResults: { articlesSearch, brandSearch, categoriesSearch, productsSearch },
@@ -120,9 +118,10 @@ export const AutocompleteSearchPopup: FC<AutocompleteProps> = ({
                                         >
                                             <Image
                                                 alt={product.mainImage?.name || product.fullName}
-                                                className="flex h-16 w-20 items-center justify-center"
-                                                image={product.mainImage}
-                                                wrapperClassName={imageTwClass}
+                                                className="mx-auto flex items-center justify-center"
+                                                height={64}
+                                                src={product.mainImage?.url}
+                                                width={80}
                                             />
 
                                             <span className="flex-1">{product.fullName}</span>