Merge branch 'Weaverse:main' into main

.env.example

@@ -22,6 +22,4 @@ WEAVERSE_PROJECT_ID=clptu3l4p001sxfsn1u9jzqnm
 
 # Custom metafields & metaobjects
 METAOBJECT_COLORS_TYPE="shopify--color-pattern"
-METAOBJECT_COLOR_NAME_KEY="label"
-METAOBJECT_COLOR_VALUE_KEY="color"
 CUSTOM_COLLECTION_BANNER_METAFIELD="custom.collection_banner"

app/components/cart/cart.tsx

@@ -15,7 +15,7 @@ import type {
 import clsx from "clsx";
 import { useRef } from "react";
 import useScroll from "react-use/esm/useScroll";
-import type { CartApiQueryFragment } from "storefrontapi.generated";
+import type { CartApiQueryFragment } from "storefront-api.generated";
 import { Button } from "~/components/button";
 import { Link } from "~/components/link";
 import { getImageAspectRatio } from "~/utils/image";
@@ -59,7 +59,7 @@ function CartDetails({
           "pb-12 w-full max-w-page mx-auto",
           "grid md:grid-cols-2 lg:grid-cols-3 md:items-start",
           "gap-8 md:gap-8 lg:gap-12",
-        ]
+        ],
       )}
     >
       <CartLines lines={cart?.lines?.nodes} layout={layout} />
@@ -166,7 +166,7 @@ function CartLines({
         className={clsx(
           "grid",
           layout === "page" && "gap-9",
-          layout === "drawer" && "gap-5"
+          layout === "drawer" && "gap-5",
         )}
       >
         {currentLines.map((line) => (
@@ -216,7 +216,7 @@ function CartSummary({
       className={clsx(
         layout === "drawer" && "grid gap-4 border-t border-line-subtle pt-4",
         layout === "page" &&
-          "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full"
+          "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full",
       )}
     >
       <h2 id="summary-heading" className="sr-only">
@@ -308,7 +308,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
         <div
           className={clsx(
             "flex items-center gap-2",
-            layout === "drawer" && "justify-between"
+            layout === "drawer" && "justify-between",
           )}
         >
           <CartLineQuantityAdjust line={line} />
@@ -336,7 +336,7 @@ function ItemRemoveButton({
       <button
         className={clsx(
           "flex items-center justify-center w-8 h-8 border-none",
-          className
+          className,
         )}
         type="submit"
       >
@@ -480,7 +480,7 @@ function CartEmpty({
         layout === "page" && [
           hidden ? "" : "grid",
           "pb-12 w-full md:items-start gap-4 md:gap-8 lg:gap-12",
-        ]
+        ],
       )}
       hidden={hidden}
     >

app/components/account/account-details.tsx → app/components/customer/account-details.tsx

@@ -1,4 +1,4 @@
-import type { CustomerDetailsFragment } from "customer-accountapi.generated";
+import type { CustomerDetailsFragment } from "customer-account-api.generated";
 import { Link } from "~/components/link";
 
 export function AccountDetails({

app/components/account/address-book.tsx → app/components/customer/address-book.tsx

@@ -1,6 +1,6 @@
 import { Form } from "@remix-run/react";
 import type { CustomerAddress } from "@shopify/hydrogen/customer-account-api-types";
-import type { CustomerDetailsFragment } from "customer-accountapi.generated";
+import type { CustomerDetailsFragment } from "customer-account-api.generated";
 import { Link } from "~/components/link";
 import { Button } from "~/components/button";
 

app/components/account/orders.tsx → app/components/customer/orders.tsx

@@ -1,6 +1,6 @@
 import { Image, flattenConnection } from "@shopify/hydrogen";
 import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
-import type { OrderCardFragment } from "customer-accountapi.generated";
+import type { OrderCardFragment } from "customer-account-api.generated";
 import Link from "~/components/link";
 
 export const ORDER_STATUS: Record<FulfillmentStatus, string> = {

app/components/layout/footer.tsx

@@ -124,6 +124,7 @@ export function Footer() {
                   <Image
                     data={footerLogoData}
                     sizes="auto"
+                    width={500}
                     className="w-full h-full object-contain object-left"
                   />
                 </div>

app/components/layout/header.tsx

@@ -38,8 +38,7 @@ function useIsHomeCheck() {
   let { pathname } = useLocation();
   let rootData = useRouteLoaderData<RootLoader>("root");
   let selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
-  let strippedPathname = pathname.replace(selectedLocale.pathPrefix, "");
-  return strippedPathname === "/";
+  return pathname.replace(selectedLocale.pathPrefix, "") === "/";
 }
 
 export function Header() {

app/components/logo.tsx

@@ -26,8 +26,9 @@ export function Logo() {
               className={clsx(
                 "main-logo",
                 "max-w-full h-full object-contain mx-auto",
-                "transition-opacity duration-300 ease-in group-hover/header:opacity-100",
+                "transition-opacity duration-300 ease-in group-hover/header:opacity-100"
               )}
+              width={500}
               style={{ width: "auto" }}
             />
             {transparentLogoData && (
@@ -37,8 +38,9 @@ export function Logo() {
                 className={clsx(
                   "transparent-logo",
                   "absolute top-0 left-0 max-w-full h-full object-contain mx-auto",
-                  "transition-opacity duration-300 ease-in group-hover/header:opacity-0",
+                  "transition-opacity duration-300 ease-in group-hover/header:opacity-0"
                 )}
+                width={500}
                 style={{ width: "auto" }}
               />
             )}

app/components/product/product-card.tsx

@@ -4,7 +4,7 @@ import type {
   ProductVariant,
 } from "@shopify/hydrogen/storefront-api-types";
 import clsx from "clsx";
-import type { ProductCardFragment } from "storefrontapi.generated";
+import type { ProductCardFragment } from "storefront-api.generated";
 import { Link } from "~/components/link";
 import { NavLink } from "~/components/nav-link";
 import { ProductTag } from "~/components/product-tag";

app/components/product/product-media.tsx

@@ -2,7 +2,7 @@ import { Image } from "@shopify/hydrogen";
 import { cva, type VariantProps } from "class-variance-authority";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import type { MediaFragment } from "storefrontapi.generated";
+import type { MediaFragment } from "storefront-api.generated";
 import { FreeMode, Pagination, Thumbs } from "swiper/modules";
 import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react";
 import { getImageAspectRatio } from "~/utils/image";
@@ -23,7 +23,7 @@ let variants = cva(
         mix: "2xl:grid-cols-2",
       },
     },
-  }
+  },
 );
 
 export interface ProductMediaProps extends VariantProps<typeof variants> {
@@ -46,7 +46,7 @@ export function ProductMedia(props: ProductMediaProps) {
   let media = _media.filter((med) => med.__typename === "MediaImage");
   let [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);
   const [swiperInstance, setSwiperInstance] = useState<SwiperClass | null>(
-    null
+    null,
   );
   let [activeIndex, setActiveIndex] = useState(0);
 
@@ -79,7 +79,7 @@ export function ProductMedia(props: ProductMediaProps) {
               aspectRatio={getImageAspectRatio(image, imageAspectRatio)}
               className={clsx(
                 "object-cover opacity-0 animate-fade-in w-[80vw] max-w-none lg:w-full lg:h-full",
-                gridSize === "mix" && idx % 3 === 0 && "lg:col-span-2"
+                gridSize === "mix" && idx % 3 === 0 && "lg:col-span-2",
               )}
               sizes="auto"
             />
@@ -109,7 +109,7 @@ export function ProductMedia(props: ProductMediaProps) {
                 key={med.id}
                 className={clsx(
                   "!h-[100px] p-1 border transition-colors aspect-[3/4] cursor-pointer",
-                  activeIndex === i ? "border-black" : "border-transparent"
+                  activeIndex === i ? "border-black" : "border-transparent",
                 )}
               >
                 <Image

app/components/product/quick-shop.tsx

@@ -7,7 +7,7 @@ import type {
   ProductQuery,
   ProductVariantFragmentFragment,
   VariantsQuery,
-} from "storefrontapi.generated";
+} from "storefront-api.generated";
 import { Button } from "~/components/button";
 import { Modal, ModalContent, ModalTrigger } from "~/components/modal";
 import { AddToCartButton } from "~/components/product/add-to-cart-button";
@@ -29,7 +29,7 @@ export function QuickShop({ data }: { data: QuickViewData }) {
   let { product, variants: _variants, storeDomain } = data || {};
   let firstVariant = product?.variants?.nodes?.[0];
   let [selectedVariant, setSelectedVariant] = useState(
-    firstVariant as ProductVariantFragmentFragment
+    firstVariant as ProductVariantFragmentFragment,
   );
   let [quantity, setQuantity] = useState<number>(1);
   let {
@@ -58,8 +58,8 @@ export function QuickShop({ data }: { data: QuickViewData }) {
   let atcText = selectedVariant?.availableForSale
     ? addToCartText
     : selectedVariant?.quantityAvailable === -1
-    ? unavailableText
-    : soldOutText;
+      ? unavailableText
+      : soldOutText;
   return (
     <div className="bg-background">
       <div className="grid grid-cols-1 items-start gap-5 lg:grid-cols-2">

app/components/product/variant-option.tsx

@@ -2,15 +2,16 @@ import { useRouteLoaderData } from "@remix-run/react";
 import { Image, type VariantOptionValue } from "@shopify/hydrogen";
 import {
   type ColorSwatch,
+  type ImageSwatch,
   type SwatchesConfigs,
   useThemeSettings,
 } from "@weaverse/hydrogen";
 import { cva } from "class-variance-authority";
 import clsx from "clsx";
-import type { ProductVariantFragmentFragment } from "storefrontapi.generated";
+import type { ProductVariantFragmentFragment } from "storefront-api.generated";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";
-import { cn } from "~/utils/cn";
 import type { RootLoader } from "~/root";
+import { cn } from "~/utils/cn";
 
 export let variants = cva(
   "border border-line hover:border-body cursor-pointer",
@@ -45,7 +46,7 @@ export let variants = cva(
         false: "",
       },
     },
-  }
+  },
 );
 
 interface VariantOptionProps {
@@ -59,13 +60,16 @@ interface VariantOptionProps {
 
 export function VariantOption(props: VariantOptionProps) {
   let { name, values, selectedOptionValue, onSelectOptionValue } = props;
-  let { colorsConfigs } = useRouteLoaderData<RootLoader>("root");
+  let { swatchesConfigs } = useRouteLoaderData<RootLoader>("root");
   let themeSettings = useThemeSettings();
   let productSwatches: SwatchesConfigs = themeSettings.productSwatches;
   let { options, swatches } = productSwatches;
-  let colorsSwatches: ColorSwatch[] = colorsConfigs?.length
-    ? colorsConfigs
+  let colorsSwatches: ColorSwatch[] = swatchesConfigs?.colors?.length
+    ? swatchesConfigs.colors
     : swatches.colors;
+  let imagesSwatches: ImageSwatch[] = swatchesConfigs?.images?.length
+    ? swatchesConfigs.images
+    : swatches.images;
   let optionConf = options.find((opt) => {
     return opt.name.toLowerCase() === name.toLowerCase();
   });
@@ -97,7 +101,7 @@ export function VariantOption(props: VariantOptionProps) {
                   selected: selectedOptionValue === value,
                   disabled: !isAvailable,
                 }),
-                !isAvailable && "bg-neutral-100"
+                !isAvailable && "bg-neutral-100",
               )}
               onClick={() => onSelectOptionValue(value)}
             >
@@ -122,14 +126,14 @@ export function VariantOption(props: VariantOptionProps) {
                         shape,
                         selected: selectedOptionValue === value,
                         disabled: !isAvailable,
-                      })
+                      }),
                     )}
                     onClick={() => onSelectOptionValue(value)}
                   >
                     <span
                       className={cn(
                         "w-full h-full inline-block border-none hover:border-none",
-                        variants({ shape })
+                        variants({ shape }),
                       )}
                       style={{ backgroundColor: swatchColor?.value || value }}
                     />
@@ -144,8 +148,8 @@ export function VariantOption(props: VariantOptionProps) {
       {type === "custom-image" && (
         <div className="flex flex-wrap gap-3">
           {values.map(({ value, image, isAvailable }) => {
-            let swatchImage = swatches.images.find(
-              (i) => i.name.toLowerCase() === value.toLowerCase()
+            let swatchImage = imagesSwatches.find(
+              (i) => i.name.toLowerCase() === value.toLowerCase(),
             );
             let imageToRender = swatchImage?.value || image;
             let aspectRatio = "1/1";
@@ -161,7 +165,7 @@ export function VariantOption(props: VariantOptionProps) {
                     shape,
                     selected: selectedOptionValue === value,
                     disabled: !isAvailable,
-                  })
+                  }),
                 )}
                 onClick={() => onSelectOptionValue(value)}
                 style={{ aspectRatio }}
@@ -178,15 +182,15 @@ export function VariantOption(props: VariantOptionProps) {
                     }
                     className={cn(
                       "w-full h-full object-cover object-center border-none hover:border-none",
-                      variants({ shape })
+                      variants({ shape }),
                     )}
                     sizes="auto"
                   />
                 ) : (
                   <span
                     className={cn(
                       "w-full h-full inline-block",
-                      variants({ shape })
+                      variants({ shape }),
                     )}
                     style={{ backgroundColor: value }}
                   />
@@ -214,7 +218,7 @@ export function VariantOption(props: VariantOptionProps) {
                     selected: selectedOptionValue === value,
                     disabled: !isAvailable,
                   }),
-                  !isAvailable && "opacity-75"
+                  !isAvailable && "opacity-75",
                 )}
                 onClick={() => onSelectOptionValue(value)}
                 style={{ aspectRatio }}
@@ -225,7 +229,7 @@ export function VariantOption(props: VariantOptionProps) {
                     sizes="auto"
                     className={cn(
                       "w-full h-full object-cover object-center",
-                      variants({ shape })
+                      variants({ shape }),
                     )}
                   />
                 ) : (
@@ -260,7 +264,7 @@ export function VariantOption(props: VariantOptionProps) {
               className={cn(
                 "py-0.5 cursor-pointer border-b border-line hover:border-body",
                 selectedOptionValue === value.value && "border-body",
-                !value.isAvailable && "opacity-50"
+                !value.isAvailable && "opacity-50",
               )}
               onClick={() => onSelectOptionValue(value.value)}
             >

app/components/product/variants.tsx

@@ -2,7 +2,7 @@ import { VariantSelector } from "@shopify/hydrogen";
 import type {
   ProductQuery,
   ProductVariantFragmentFragment,
-} from "storefrontapi.generated";
+} from "storefront-api.generated";
 import { VariantOption } from "./variant-option";
 
 interface ProductVariantsProps {
@@ -98,7 +98,7 @@ export function ProductVariants(props: ProductVariantsProps) {
           let handleSelectOptionValue = (value: string) =>
             handleSelectOption(optionName, value);
           let selectedValue = selectedOptions?.find(
-            (opt) => opt.name === optionName
+            (opt) => opt.name === optionName,
           )?.value;
 
           return (