Merge branch 'Weaverse:main' into main

app/components/cart/cart.tsx

@@ -1,7 +1,6 @@
 import { Trash } from "@phosphor-icons/react";
 import {
   CartForm,
-  Image,
   Money,
   type OptimisticCart,
   OptimisticInput,
@@ -17,6 +16,7 @@ import { useRef } from "react";
 import useScroll from "react-use/esm/useScroll";
 import type { CartApiQueryFragment } from "storefront-api.generated";
 import { Button } from "~/components/button";
+import { Image } from "~/components/image";
 import { Link } from "~/components/link";
 import { getImageAspectRatio } from "~/utils/image";
 import { CartBestSellers } from "./cart-best-sellers";
@@ -268,7 +268,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
             width={250}
             height={250}
             data={merchandise.image}
-            className="object-cover object-center w-24 h-auto"
+            className="w-24 h-auto"
             alt={merchandise.title}
             aspectRatio={getImageAspectRatio(merchandise.image, "adapt")}
           />

app/components/customer/order-details.tsx

@@ -1,6 +1,7 @@
 import { ArrowLeft, Tag } from "@phosphor-icons/react";
 import { useLoaderData } from "@remix-run/react";
-import { Image, Money } from "@shopify/hydrogen";
+import { Money } from "@shopify/hydrogen";
+import { Image } from "~/components/image";
 import clsx from "clsx";
 import { Link } from "~/components/link";
 import { Section } from "~/components/section";
@@ -15,7 +16,7 @@ export function OrderDetails() {
   for (let lineItem of lineItems) {
     totalDiscount += lineItem.discountAllocations.reduce(
       (acc, curr) => acc + Number.parseFloat(curr.allocatedAmount.amount),
-      0
+      0,
     );
   }
 
@@ -167,7 +168,7 @@ export function OrderDetails() {
                 <div
                   className={clsx(
                     "mt-3 px-2.5 py-1 text-sm inline-block w-auto",
-                    "text-body-inverse bg-body-subtle"
+                    "text-body-inverse bg-body-subtle",
                   )}
                 >
                   {ORDER_STATUS[fulfillmentStatus] || fulfillmentStatus}

app/components/customer/orders.tsx

@@ -1,4 +1,5 @@
-import { Image, flattenConnection } from "@shopify/hydrogen";
+import { flattenConnection } from "@shopify/hydrogen";
+import { Image } from "~/components/image";
 import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
 import type { OrderCardFragment } from "customer-account-api.generated";
 import Link from "~/components/link";
@@ -56,7 +57,7 @@ function OrderCard({ order }: { order: OrderCardFragment }) {
           <Image
             width={500}
             height={500}
-            className="max-w-36 h-auto opacity-0 animate-fade-in cover"
+            className="max-w-36 h-auto"
             alt={lineItems[0].image?.altText ?? "Order image"}
             src={lineItems[0].image.url}
           />

app/components/layout/desktop-menu.tsx

@@ -108,7 +108,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
         resource?.image && children.length === 0 ? (
           <SlideIn
             key={id}
-            className="grow max-w-72 w-72 aspect-square relative group/item overflow-hidden"
+            className="grow max-w-72 w-72 bg-gray-100 aspect-square relative group/item overflow-hidden"
             style={{ "--idx": idx } as React.CSSProperties}
           >
             <Image
@@ -176,7 +176,7 @@ function SlideIn(props: {
       style={
         {
           "--slide-left-from": "40px",
-          "--slide-left-duration": "400ms",
+          "--slide-left-duration": "300ms",
           ...style,
         } as React.CSSProperties
       }

app/components/layout/predictive-search/predictive-search-result.tsx

@@ -1,13 +1,13 @@
-import { Image, Money } from "@shopify/hydrogen";
+import { Money } from "@shopify/hydrogen";
 import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
 import clsx from "clsx";
 import { CompareAtPrice } from "~/components/compare-at-price";
+import { Image } from "~/components/image";
 import { Link } from "~/components/link";
 import type {
   NormalizedPredictiveSearchResultItem,
   NormalizedPredictiveSearchResults,
 } from "~/types/predictive-search";
-import { getImageAspectRatio } from "~/utils/image";
 import { isDiscounted } from "~/utils/product";
 
 type SearchResultTypeProps = {
@@ -28,7 +28,7 @@ export function PredictiveSearchResult({ items, type }: SearchResultTypeProps) {
           className={clsx(
             type === "queries" && "space-y-1",
             type === "articles" && "space-y-3",
-            type === "products" && "space-y-4"
+            type === "products" && "space-y-4",
           )}
         >
           {items.map((item: NormalizedPredictiveSearchResultItem) => (
@@ -79,9 +79,7 @@ function SearchResultItem({
                 alt={image.altText ?? ""}
                 src={image.url}
                 width={200}
-                height={200}
-                aspectRatio={getImageAspectRatio(image, "adapt")}
-                className="h-full w-full object-cover object-center animate-fade-in"
+                aspectRatio="1/1"
               />
             )}
           </div>
@@ -98,7 +96,7 @@ function SearchResultItem({
           ) : (
             <div
               className={clsx(
-                __typename === "Product" ? "line-clamp-1" : "line-clamp-2"
+                __typename === "Product" ? "line-clamp-1" : "line-clamp-2",
               )}
             >
               <span className="reveal-underline">{title}</span>

app/components/product/media-zoom.tsx

@@ -57,14 +57,15 @@ export function ZoomModal({
       }
     }
     if (open) {
+      window.requestAnimationFrame(() => scrollToMedia(zoomMediaId));
       window.addEventListener("keydown", handleKeyDown);
     } else {
       window.removeEventListener("keydown", handleKeyDown);
     }
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [open, setZoomMediaId, nextMedia, prevMedia]);
+  }, [open, zoomMediaId, setZoomMediaId, nextMedia, prevMedia]);
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
@@ -104,7 +105,7 @@ export function ZoomModal({
                         key={id}
                         id={`zoom-media--${mediaId}`}
                         className={cn(
-                          "relative",
+                          "relative bg-gray-100",
                           "p-1 border rounded-md transition-colors cursor-pointer border-transparent !h-auto",
                           zoomMediaId === id && "border-line",
                         )}

app/components/product/product-media.tsx

@@ -181,7 +181,7 @@ export function ProductMedia(props: ProductMediaProps) {
             className="overflow-visible rounded md:overflow-hidden pb-10 md:pb-0 md:[&_.swiper-pagination]:hidden"
           >
             {media.map((media, idx) => (
-              <SwiperSlide key={media.id}>
+              <SwiperSlide key={media.id} className="bg-gray-100">
                 <Media
                   media={media}
                   imageAspectRatio={imageAspectRatio}

app/sections/blog-post.tsx

@@ -1,12 +1,9 @@
 import { FacebookLogo, PinterestLogo } from "@phosphor-icons/react";
 import { useLoaderData } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
 import type { Article } from "@shopify/hydrogen/storefront-api-types";
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from "@weaverse/hydrogen";
+import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
+import { Image } from "~/components/image";
 import { Section, type SectionProps, layoutInputs } from "~/components/section";
 
 interface BlogPostProps extends SectionProps {
@@ -26,11 +23,7 @@ let BlogPost = forwardRef<HTMLElement, BlogPostProps>((props, ref) => {
       <Section ref={ref} {...rest}>
         <div className="relative h-[520px]">
           {image && (
-            <Image
-              data={image}
-              className="w-full absolute inset-0 z-0 object-cover h-full"
-              sizes="90vw"
-            />
+            <Image data={image} className="absolute inset-0 z-0" sizes="90vw" />
           )}
         </div>
         <div className="space-y-5 w-full h-full flex items-center justify-end py-16 flex-col relative z-10 px-10 lg:px-20">

app/sections/blogs.tsx

@@ -1,8 +1,8 @@
 import { useLoaderData } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
 import type { ArticleFragment, BlogQuery } from "storefront-api.generated";
+import { Image } from "~/components/image";
 import { Link } from "~/components/link";
 import { Section, type SectionProps, layoutInputs } from "~/components/section";
 import { getImageLoadingPriority } from "~/utils/image";
@@ -84,7 +84,6 @@ function ArticleCard({
         <div className="card-image aspect-[3/2]">
           <Image
             alt={article.image.altText || article.title}
-            className="object-cover w-full"
             data={article.image}
             aspectRatio={imageAspectRatio}
             loading={loading}

app/sections/collection-filters/index.tsx

@@ -93,7 +93,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
             {showBanner && banner && (
               <div
                 className={clsx([
-                  "mt-6 overflow-hidden",
+                  "mt-6 overflow-hidden bg-gray-100",
                   "rounded-[--banner-border-radius]",
                   "h-[--banner-height-mobile] lg:h-[--banner-height-desktop]",
                 ])}

app/sections/collection-list/collection-card.tsx

@@ -1,7 +1,7 @@
-import { Image } from "@shopify/hydrogen";
 import type { Collection } from "@shopify/hydrogen/storefront-api-types";
 import { clsx } from "clsx";
 import type { CSSProperties } from "react";
+import { Image } from "~/components/image";
 import { Link } from "~/components/link";
 import { Overlay, type OverlayProps } from "~/components/overlay";
 import type { ImageAspectRatio } from "~/types/image";
@@ -47,7 +47,7 @@ export function CollectionCard({
             sizes="(max-width: 32em) 100vw, 45vw"
             loading={loading}
             className={clsx(
-              "object-cover object-center absolute z-0 inset-0",
+              "absolute z-0 inset-0",
               "transition-all duration-300",
               "will-change-transform scale-100 group-hover:scale-[1.03]",
             )}

app/sections/columns-with-images/column.tsx

@@ -13,7 +13,7 @@ import Link, { linkContentInputs, type LinkProps } from "~/components/link";
 import type { ImageAspectRatio } from "~/types/image";
 import { getImageAspectRatio } from "~/utils/image";
 
-let variants = cva("", {
+let variants = cva("bg-gray-100", {
   variants: {
     size: {
       large: "col-span-6",

app/sections/featured-collections/collection-items.tsx

@@ -1,4 +1,3 @@
-import { Image } from "@shopify/hydrogen";
 import {
   type HydrogenComponentSchema,
   IMAGES_PLACEHOLDERS,
@@ -16,6 +15,7 @@ import { useAnimation } from "~/hooks/use-animation";
 import type { ImageAspectRatio } from "~/types/image";
 import { getImageAspectRatio } from "~/utils/image";
 import type { FeaturedCollectionsLoaderData } from ".";
+import { Image } from "~/components/image";
 
 let variants = cva("", {
   variants: {
@@ -128,7 +128,6 @@ let CollectionItems = forwardRef<HTMLDivElement, CollectionItemsProps>(
                   height={collection.image.height || 400}
                   sizes="(max-width: 32em) 100vw, 45vw"
                   className={clsx([
-                    "w-full h-full object-cover",
                     "transition-all duration-300",
                     "will-change-transform scale-100 group-hover:scale-[1.05]",
                   ])}

app/sections/hotspots/index.tsx

@@ -1,14 +1,14 @@
-import { Image } from "@shopify/hydrogen";
-import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen";
 import type {
   HydrogenComponentSchema,
   WeaverseImage,
 } from "@weaverse/hydrogen";
+import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
 import Heading, {
   headingInputs,
   type HeadingProps,
 } from "~/components/heading";
+import { Image } from "~/components/image";
 import Paragraph from "~/components/paragraph";
 import type { SectionProps } from "~/components/section";
 import { Section } from "~/components/section";
@@ -75,7 +75,7 @@ let Hotspots = forwardRef<HTMLElement, HotspotsProps>((props, ref) => {
         <Image
           data={imageData}
           sizes="auto"
-          className="object-cover z-0 w-full h-full"
+          className="z-0"
           data-motion="zoom-in"
         />
         {children}

app/sections/hotspots/product-popup.tsx

@@ -1,9 +1,10 @@
-import { Image, Money } from "@shopify/hydrogen";
+import { Money } from "@shopify/hydrogen";
 import type { MediaImage } from "@shopify/hydrogen/storefront-api-types";
 import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import type { CSSProperties } from "react";
 import type { ProductQuery } from "storefront-api.generated";
+import { Image } from "~/components/image";
 import { Link } from "~/components/link";
 import type { HotspotsItemData } from "./item";