From c4c1abedd5ad74ff3839858067b8a889d62faca1 Mon Sep 17 00:00:00 2001 From: Jeremy Gabriel <63984091+jeremyagabriel@users.noreply.github.com> Date: Fri, 27 Sep 2024 11:30:22 -0700 Subject: [PATCH] Updates Image component for latest Hydrogen versions, fixes add to cart 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` --- app/components/Account/Order/OrderItem.tsx | 1 - app/components/AddToCart/AddToCart.tsx | 4 +- app/components/Cart/CartLine/CartLine.tsx | 1 - .../Cart/CartUpsell/CartUpsellItem.tsx | 1 - .../CollectionFilterOption.tsx | 1 - app/components/Header/Menu/DesktopMenu.tsx | 1 - app/components/Image/Image.tsx | 41 +------------------ app/components/Markdown/Markdown.tsx | 13 +++++- .../ProductMedia/ProductMediaThumbnail.tsx | 1 - .../InnerColorOptionValue.tsx | 1 - .../ColorVariantOption.tsx | 1 - .../BuildYourOwnBundle/BYOBAddToCart.tsx | 4 +- app/sections/IconRow/IconRow.tsx | 1 - app/sections/PressSlider/PressSliderThumb.tsx | 1 - package-lock.json | 4 +- package.json | 2 +- 16 files changed, 20 insertions(+), 58 deletions(-) diff --git a/app/components/Account/Order/OrderItem.tsx b/app/components/Account/Order/OrderItem.tsx index 91beae8..45be41a 100644 --- 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 />
diff --git a/app/components/AddToCart/AddToCart.tsx b/app/components/AddToCart/AddToCart.tsx index d51c41a..e39e885 100644 --- a/app/components/AddToCart/AddToCart.tsx +++ b/app/components/AddToCart/AddToCart.tsx @@ -68,7 +68,7 @@ export function AddToCart({ {buttonText} - {isAdding && !isAdded && ( + {isAdding && ( + Added To Cart )} diff --git a/app/components/Cart/CartLine/CartLine.tsx b/app/components/Cart/CartLine/CartLine.tsx index 9cd4c45..eeaac8e 100644 --- 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" /> diff --git a/app/components/Cart/CartUpsell/CartUpsellItem.tsx b/app/components/Cart/CartUpsell/CartUpsellItem.tsx index a1ab6dc..20e230b 100644 --- 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 /> diff --git a/app/components/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterOption.tsx b/app/components/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterOption.tsx index 7a3ea45..99eecbd 100644 --- a/app/components/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterOption.tsx +++ b/app/components/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 index 743aade..4b6b2ba 100644 --- 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 />

{caption}

diff --git a/app/components/Image/Image.tsx b/app/components/Image/Image.tsx index 3024d52..ffcc641 100644 --- a/app/components/Image/Image.tsx +++ b/app/components/Image/Image.tsx @@ -5,40 +5,21 @@ import type {AspectRatio} from '~/lib/types'; type ImageProps = React.ComponentProps & { 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, ) => { - 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 ? ( ) : (
{withLoadingAnimation &&
}
diff --git a/app/components/Markdown/Markdown.tsx b/app/components/Markdown/Markdown.tsx index 275a80b..e3f89cd 100644 --- 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,6 +19,14 @@ 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 (
{children} diff --git a/app/components/Product/ProductMedia/ProductMediaThumbnail.tsx b/app/components/Product/ProductMedia/ProductMediaThumbnail.tsx index a00249c..7a523a3 100644 --- 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 index b212a4e..7bf2851 100644 --- 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 index 9d283ee..758c7ee 100644 --- 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 index 0f977c3..04d72d0 100644 --- a/app/sections/BuildYourOwnBundle/BYOBAddToCart.tsx +++ b/app/sections/BuildYourOwnBundle/BYOBAddToCart.tsx @@ -88,7 +88,7 @@ export function BYOBAddToCart({ {`Add To Cart${total ? ` - ${total}` : ''}`} - {isAdding && !isAdded && ( + {isAdding && ( + Added To Cart )} diff --git a/app/sections/IconRow/IconRow.tsx b/app/sections/IconRow/IconRow.tsx index fe99c3e..2e56825 100644 --- 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 index 931bc8c..d8f3790 100644 --- 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 /> )} diff --git a/package-lock.json b/package-lock.json index 374b057..42d0c27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "hydrogen-starter", - "version": "1.9.0", + "version": "1.9.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "hydrogen-starter", - "version": "1.9.0", + "version": "1.9.1", "dependencies": { "@headlessui/react": "2.1.2", "@headlessui/tailwindcss": "^0.2.1", diff --git a/package.json b/package.json index 726bd15..83eb825 100644 --- 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",