Updates Image component for latest Hydrogen versions, fixes add to ca…

…rt button text shift, adds tel url support for markdown (#48) - Removes the customization within `Image` component. After recent version updates to `Image` from `@shopify/hydrogen-react`, the custom `srcSetOptions` passed in and the `isStatic` logic is no longer needed. This will address any lower res images becoming visibly blurry after upgrading to latest versions - Fixes the "Added To Cart" misalignment in the `AddToCart` button - Adds a url transform for `tel:` links for support in `Markdown`
packdigital · Sep 27, 2024 · c4c1abe · c4c1abe
1 parent 9a48af7
commit c4c1abe
Show file tree

Hide file tree

Showing 16 changed files with 20 additions and 58 deletions.
diff --git a/app/components/Account/Order/OrderItem.tsx b/app/components/Account/Order/OrderItem.tsx
@@ -42,7 +42,6 @@ export function OrderItem({item}: {item: OrderLineItem}) {
               : PRODUCT_IMAGE_ASPECT_RATIO
           }
           width="48"
-          isStatic
         />
 
         <div className="flex flex-1 flex-col items-start gap-2">

diff --git a/app/components/AddToCart/AddToCart.tsx b/app/components/AddToCart/AddToCart.tsx
@@ -68,7 +68,7 @@ export function AddToCart({
           {buttonText}
         </span>
 
-        {isAdding && !isAdded && (
+        {isAdding && (
           <LoadingDots
             status="Adding to cart"
             withAbsolutePosition
@@ -77,7 +77,7 @@ export function AddToCart({
         )}
 
         {isAdded && (
-          <span aria-live="assertive" role="status">
+          <span aria-live="assertive" className="absolute-center" role="status">
             Added To Cart
           </span>
         )}

diff --git a/app/components/Cart/CartLine/CartLine.tsx b/app/components/Cart/CartLine/CartLine.tsx
@@ -44,7 +44,6 @@ export function CartLine({closeCart, line}: CartLineProps) {
               : PRODUCT_IMAGE_ASPECT_RATIO
           }
           width="88"
-          isStatic
           className="bg-offWhite"
         />
       </Link>

diff --git a/app/components/Cart/CartUpsell/CartUpsellItem.tsx b/app/components/Cart/CartUpsell/CartUpsellItem.tsx
@@ -52,7 +52,6 @@ export function CartUpsellItem({
               : PRODUCT_IMAGE_ASPECT_RATIO
           }
           width="40"
-          isStatic
         />
       </Link>
 

diff --git a/...mponents/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterOption.tsx b/...mponents/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterOption.tsx
@@ -115,7 +115,6 @@ export function CollectionFilterOption({
             }}
             aspectRatio="1/1"
             width="24"
-            isStatic
             className="media-fill"
           />
         )}

diff --git a/app/components/Header/Menu/DesktopMenu.tsx b/app/components/Header/Menu/DesktopMenu.tsx
@@ -89,7 +89,6 @@ export function DesktopMenu({
                       }}
                       aspectRatio="16/9"
                       width="400"
-                      isStatic
                     />
 
                     <p className="mt-3 text-sm">{caption}</p>

diff --git a/app/components/Image/Image.tsx b/app/components/Image/Image.tsx
@@ -5,72 +5,35 @@ import type {AspectRatio} from '~/lib/types';
 
 type ImageProps = React.ComponentProps<typeof HydrogenImage> & {
   aspectRatio?: AspectRatio | undefined;
-  isStatic?: boolean;
   withLoadingAnimation?: boolean;
 };
 
-const getPxWidthNum = (width: string | number | undefined) => {
-  if (!width) return undefined;
-  if (typeof width === 'number') return width;
-  if (width.endsWith('rem')) return Number(width.replace('rem', '')) * 16;
-  if (width.endsWith('em')) return Number(width.replace('em', '')) * 16;
-  return Number(width.replace('px', ''));
-};
-
 export const Image = forwardRef(
   (
     {
       aspectRatio,
       className,
       data,
-      width: passedWidth,
-      isStatic, // sets only 1 srcSet option that is 3x scale
+      width,
       withLoadingAnimation = true, // adds a loading shimmer animation if data.url is undefined
       ...props
     }: ImageProps,
     ref: React.Ref<HTMLImageElement>,
   ) => {
-    let width = passedWidth;
-    const isRelativeWidth =
-      typeof width === 'string' &&
-      (width.endsWith('%') || width.endsWith('vw'));
-    if (!isRelativeWidth) {
-      width = getPxWidthNum(passedWidth);
-    }
-    const isPxWidth = typeof width === 'number';
-
     return data?.url ? (
       <HydrogenImage
         ref={ref}
         data={data}
         aspectRatio={aspectRatio}
         width={width}
         className={`bg-offWhite object-cover ${className}`}
-        srcSetOptions={
-          isStatic && isPxWidth
-            ? {
-                intervals: 1,
-                startingWidth: Number(width) * 3,
-                incrementSize: Number(width) * 3,
-                placeholderWidth: Number(width) * 3,
-              }
-            : {
-                intervals: 12,
-                startingWidth: 200,
-                incrementSize: 250,
-                placeholderWidth: 100,
-              }
-        }
         {...props}
       />
     ) : (
       <div
         ref={ref}
         className={`relative overflow-hidden bg-offWhite ${className}`}
-        style={{
-          aspectRatio,
-          width: isPxWidth ? `${width}px` : width || '100%',
-        }}
+        style={{aspectRatio, width}}
       >
         {withLoadingAnimation && <div className="loading-shimmer opacity-60" />}
       </div>

diff --git a/app/components/Markdown/Markdown.tsx b/app/components/Markdown/Markdown.tsx
@@ -1,8 +1,8 @@
 import {forwardRef} from 'react';
-import ReactMarkdown from 'react-markdown';
-import type {Components} from 'react-markdown';
+import ReactMarkdown, {defaultUrlTransform} from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
+import type {Components} from 'react-markdown';
 
 interface MarkdownProps {
   centerAllText?: boolean;
@@ -19,13 +19,22 @@ export const Markdown = forwardRef(
     const hTextAlign = centerAllText
       ? '[&>h2]:text-center [&>h3]:text-center [&>h4]:text-center [&>h5]:text-center [&>h6]:text-center'
       : '';
+
+    const urlTransform = (url: string) => {
+      if (url.startsWith('tel:')) {
+        return url;
+      }
+      return defaultUrlTransform(url);
+    };
+
     return (
       <div
         ref={ref}
         className={`[&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_a]:underline [&_h1]:mb-6 [&_h1]:text-center [&_h2]:mb-5 [&_h2]:mt-8 [&_h3]:mb-4 [&_h3]:mt-6 [&_h4]:my-4 [&_h5]:mb-4 [&_h5]:mt-2 [&_h6]:mb-4 [&_li>p]:mb-0 [&_li]:mb-2 [&_ol>li]:list-decimal [&_ol]:mb-4 [&_ol]:pl-8 [&_p]:mb-4 [&_table]:relative [&_table]:mb-4 [&_table]:w-full [&_table]:table-fixed [&_table]:border-collapse [&_table]:overflow-x-auto [&_table]:border [&_table]:border-border [&_td]:border [&_td]:border-border [&_td]:p-3 [&_td]:text-center [&_td]:align-top [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1.5 [&_thead]:bg-offWhite [&_ul>li]:list-disc [&_ul]:mb-4 [&_ul]:pl-8 ${pTextAlign} ${hTextAlign}`}
       >
         <ReactMarkdown
           remarkPlugins={[remarkGfm, remarkBreaks]}
+          urlTransform={urlTransform}
           components={components}
         >
           {children}

diff --git a/app/components/Product/ProductMedia/ProductMediaThumbnail.tsx b/app/components/Product/ProductMedia/ProductMediaThumbnail.tsx
@@ -37,7 +37,6 @@ export function ProductMediaThumbnail({
         aspectRatio="1/1"
         width="80"
         loading={index < 6 ? 'eager' : 'lazy'}
-        isStatic
       />
 
       {mediaContentType === 'VIDEO' && (

diff --git a/app/components/Product/ProductOptions/ProductOptionValue/InnerColorOptionValue.tsx b/app/components/Product/ProductOptions/ProductOptionValue/InnerColorOptionValue.tsx
@@ -51,7 +51,6 @@ export function InnerColorOptionValue({
           aspectRatio="1/1"
           width="32"
           className="media-fill"
-          isStatic
         />
       )}
 

diff --git a/app/components/ProductItem/ColorVariantSelector/ColorVariantOption.tsx b/app/components/ProductItem/ColorVariantSelector/ColorVariantOption.tsx
@@ -52,7 +52,6 @@ export function ColorVariantOption({
             width="24"
             aspectRatio="1/1"
             className="media-fill"
-            isStatic
           />
         )}
 

diff --git a/app/sections/BuildYourOwnBundle/BYOBAddToCart.tsx b/app/sections/BuildYourOwnBundle/BYOBAddToCart.tsx
@@ -88,7 +88,7 @@ export function BYOBAddToCart({
         {`Add To Cart${total ? ` - ${total}` : ''}`}
       </span>
 
-      {isAdding && !isAdded && (
+      {isAdding && (
         <LoadingDots
           status="Adding to cart"
           withAbsolutePosition
@@ -97,7 +97,7 @@ export function BYOBAddToCart({
       )}
 
       {isAdded && (
-        <span aria-live="assertive" role="status">
+        <span aria-live="assertive" className="absolute-center" role="status">
           Added To Cart
         </span>
       )}

diff --git a/app/sections/IconRow/IconRow.tsx b/app/sections/IconRow/IconRow.tsx
@@ -47,7 +47,6 @@ export function IconRow({cms}: {cms: IconRowCms}) {
                         className="bg-transparent"
                         aspectRatio="1/1"
                         width="48"
-                        isStatic
                       />
                     )}
 

diff --git a/app/sections/PressSlider/PressSliderThumb.tsx b/app/sections/PressSlider/PressSliderThumb.tsx
@@ -29,7 +29,6 @@ export function PressSliderThumb({
             className={`bg-transparent transition ${
               isActive ? 'opacity-100' : 'opacity-30'
             }`}
-            isStatic
           />
         )}
       </button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "hydrogen-starter",
   "private": true,
   "sideEffects": false,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "scripts": {
     "dev": "shopify hydrogen dev --port 8080",
     "build": "shopify hydrogen build",