Merge branch 'Weaverse:main' into main

app/components/Button.tsx

@@ -119,6 +119,10 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     } as React.CSSProperties;
   }
 
+  if (!text && !children) {
+    return null;
+  }
+
   if (link) {
     return (
       <Link
@@ -154,6 +158,7 @@ export let buttonContentInputs: InspectorGroup["inputs"] = [
     type: "text",
     name: "text",
     label: "Text content",
+    defaultValue: "Shop now",
     placeholder: "Shop now",
   },
   {

app/components/Overlay.tsx

@@ -22,7 +22,7 @@ export function Overlay(props: OverlayProps) {
     return (
       <div
         className={cn(
-          "absolute inset-0 z-[-1] transition-colors",
+          "absolute inset-0 z-[-1] transition-colors duration-300",
           "bg-[var(--overlay-color)]",
           "group-hover/overlay:bg-[var(--overlay-color-hover,var(--overlay-color))]",
           className,

app/components/Section.tsx

@@ -178,7 +178,7 @@ export let layoutInputs: InspectorGroup["inputs"] = [
   {
     type: "range",
     name: "borderRadius",
-    label: "Corner radius",
+    label: "Border radius",
     configs: {
       min: 0,
       max: 40,

app/lib/judgeme.ts

@@ -1,3 +1,5 @@
+import type { WeaverseClient } from "@weaverse/hydrogen";
+
 type JudgemeProductData = {
   product: {
     id: string;
@@ -15,38 +17,42 @@ async function getInternalIdByHandle(
   api_token: string,
   shop_domain: string,
   handle: string,
+  weaverseClient: WeaverseClient,
 ) {
-  let api =
-    `https://judge.me/api/v1/products/-1?` +
-    new URLSearchParams({
-      api_token,
-      shop_domain,
-      handle,
-    });
-  let data = (await fetch(api).then((res) => res.json())) as JudgemeProductData;
+  let api = `https://judge.me/api/v1/products/-1?${new URLSearchParams({
+    api_token,
+    shop_domain,
+    handle,
+  })}`;
+  let data = (await weaverseClient.fetchWithCache(api)) as JudgemeProductData;
   return data?.product?.id;
 }
 
 export let getJudgemeReviews = async (
   api_token: string,
   shop_domain: string,
   handle: string,
+  weaverse: WeaverseClient,
 ) => {
   if (!api_token) {
     return {
       error: "Missing JUDGEME_PRIVATE_API_TOKEN",
     };
   }
-  let internalId = await getInternalIdByHandle(api_token, shop_domain, handle);
+  let internalId = await getInternalIdByHandle(
+    api_token,
+    shop_domain,
+    handle,
+    weaverse,
+  );
   if (internalId) {
-    let data = (await fetch(
-      `https://judge.me/api/v1/reviews?` +
-        new URLSearchParams({
-          api_token,
-          shop_domain,
-          product_id: internalId,
-        }),
-    ).then((res) => res.json())) as JudgemeReviewsData;
+    let data = (await weaverse.fetchWithCache(
+      `https://judge.me/api/v1/reviews?${new URLSearchParams({
+        api_token,
+        shop_domain,
+        product_id: internalId,
+      })}`,
+    )) as JudgemeReviewsData;
     let reviews = data.reviews;
     let rating =
       reviews.reduce((acc, review) => acc + review.rating, 0) /

app/routes/($locale).api.review.$productHandle.tsx

@@ -1,4 +1,4 @@
-import { type RouteLoaderArgs } from "@weaverse/hydrogen";
+import type { RouteLoaderArgs } from "@weaverse/hydrogen";
 import invariant from "tiny-invariant";
 
 import { getJudgemeReviews } from "~/lib/judgeme";
@@ -10,6 +10,10 @@ export async function loader(args: RouteLoaderArgs) {
   let api_token = env.JUDGEME_PRIVATE_API_TOKEN;
   let shop_domain = env.PUBLIC_STORE_DOMAIN;
   invariant(handle, "Missing product handle");
-  let reviews = await getJudgemeReviews(api_token, shop_domain, handle);
-  return reviews;
+  return await getJudgemeReviews(
+    api_token,
+    shop_domain,
+    handle,
+    context.weaverse,
+  );
 }

app/routes/($locale).products.$productHandle.tsx

@@ -79,6 +79,7 @@ export async function loader({ params, request, context }: LoaderFunctionArgs) {
       judgeme_API_TOKEN,
       shop_domain,
       productHandle,
+      context.weaverse,
     );
   }
 

app/sections/countdown/index.tsx

@@ -100,7 +100,7 @@ export let schema: HydrogenComponentSchema = {
         {
           type: "range",
           name: "borderRadius",
-          label: "Corner radius",
+          label: "Border radius",
           configs: {
             min: 0,
             max: 40,

app/sections/product-information/index.tsx

@@ -1,5 +1,5 @@
 import { useLoaderData, useSearchParams } from "@remix-run/react";
-import { Money, ShopPayButton } from "@shopify/hydrogen";
+import { Money, ShopPayButton, useOptimisticVariant } from "@shopify/hydrogen";
 import {
   type HydrogenComponentProps,
   type HydrogenComponentSchema,
@@ -41,14 +41,15 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
       storeDomain,
     } = useLoaderData<typeof productLoader>();
     let variants = _variants?.product?.variants;
-    let [selectedVariant, setSelectedVariant] = useState<any>(
+
+    let selectedVariantOptimistic = useOptimisticVariant(
       product?.selectedVariant || variants?.nodes?.[0],
+      variants,
     );
-    // let selectedVariantOptimistic = useOptimisticVariant(
-    //   product.selectedVariant,
-    //   variants,
-    // );
-    // console.log("selectedVariantOptimistic", selectedVariantOptimistic);
+    let [selectedVariant, setSelectedVariant] = useState<any>(
+      selectedVariantOptimistic,
+    );
+
     let {
       addToCartText,
       soldOutText,
@@ -76,12 +77,15 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
         : soldOutText;
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(() => {
-      if (!selectedVariant) {
+      if (!selectedVariant && variants?.nodes?.[0]) {
         setSelectedVariant(variants?.nodes?.[0]);
-      } else if (selectedVariant?.id !== product?.selectedVariant?.id) {
-        setSelectedVariant(product?.selectedVariant);
+      } else if (
+        selectedVariantOptimistic?.id &&
+        selectedVariantOptimistic.id !== selectedVariant?.id
+      ) {
+        setSelectedVariant(selectedVariantOptimistic);
       }
-    }, [product?.selectedVariant?.id]);
+    }, [selectedVariantOptimistic?.id]);
     let { swatches } = useThemeSettings();
 
     let handleSelectedVariantChange = (variant: any) => {

app/sections/promotion-grid/index.tsx

@@ -108,10 +108,9 @@ export let schema: HydrogenComponentSchema = {
         type: "promotion-grid-item",
         contentPosition: "top left",
         backgroundImage: IMAGES_PLACEHOLDERS.collection_1,
-        borderRadius: 16,
         enableOverlay: true,
         overlayColor: "#0c0c0c",
-        overlayOpacity: 10,
+        overlayOpacity: 20,
         children: [
           {
             type: "heading",
@@ -137,10 +136,9 @@ export let schema: HydrogenComponentSchema = {
         type: "promotion-grid-item",
         contentPosition: "bottom right",
         backgroundImage: IMAGES_PLACEHOLDERS.collection_2,
-        borderRadius: 16,
         enableOverlay: true,
         overlayColor: "#0c0c0c",
-        overlayOpacity: 10,
+        overlayOpacity: 20,
         children: [
           {
             type: "heading",

app/sections/promotion-grid/item.tsx

@@ -14,6 +14,7 @@ import { Overlay, overlayInputs } from "~/components/Overlay";
 let variants = cva(
   [
     "promotion-grid-item",
+    "group/overlay",
     "relative aspect-square overflow-hidden flex flex-col gap-4 p-4",
     "[&_.paragraph]:mx-[unset]",
   ],
@@ -123,7 +124,7 @@ export let schema: HydrogenComponentSchema = {
         {
           type: "range",
           name: "borderRadius",
-          label: "Corner radius",
+          label: "Border radius",
           configs: {
             min: 0,
             max: 40,
@@ -154,7 +155,6 @@ export let schema: HydrogenComponentSchema = {
   presets: {
     contentPosition: "bottom right",
     backgroundImage: IMAGES_PLACEHOLDERS.collection_3,
-    borderRadius: 16,
     enableOverlay: true,
     overlayColor: "#0c0c0c",
     overlayOpacity: 20,

app/sections/slideshow/dots.tsx

@@ -9,15 +9,15 @@ export interface SlideshowDotsProps extends VariantProps<typeof variants> {
 let variants = cva(
   [
     "slideshow-dots",
-    "absolute z-1 flex justify-center items-center px-2.5 gap-4",
+    "absolute z-1 !w-auto flex justify-center items-center px-2.5 gap-4 w-",
   ],
   {
     variants: {
       dotsPosition: {
-        top: "left-0 right-0 top-10",
-        bottom: "left-0 right-0 bottom-10",
-        left: "top-0 bottom-0 flex-col left-5",
-        right: "top-0 bottom-0 flex-col right-5",
+        top: "!left-0 !right-0 !top-10 !bottom-auto",
+        bottom: "!left-0 !right-0 !bottom-10 !top-auto",
+        left: "!top-0 !bottom-0 flex-col !left-5 !right-auto",
+        right: "!top-0 !bottom-0 flex-col !right-5 !left-auto",
       },
       dotsColor: {
         light: "[&_.dot]:bg-white [&_.active]:!outline-white",

app/sections/slideshow/index.tsx

@@ -33,6 +33,7 @@ export interface SlideshowProps
     SlideshowArrowsProps,
     SlideshowDotsProps,
     HydrogenComponentProps {
+  effect?: "fade" | "slide";
   showArrows: boolean;
   showDots: boolean;
   dotsPosition: "top" | "bottom" | "left" | "right";
@@ -45,6 +46,7 @@ export interface SlideshowProps
 let Slideshow = forwardRef<HTMLDivElement, SlideshowProps>((props, ref) => {
   let {
     height,
+    effect,
     showArrows,
     arrowsIcon,
     iconSize,
@@ -61,13 +63,17 @@ let Slideshow = forwardRef<HTMLDivElement, SlideshowProps>((props, ref) => {
     ...rest
   } = props;
 
-  let id = rest["data-wv-id"];
-  let key = `slideshow-${id}-${loop}-${autoRotate}-${changeSlidesEvery}`;
-
   return (
-    <section key={key} ref={ref} {...rest} className={variants({ height })}>
+    <section
+      key={Object.values(props)
+        .filter((v) => typeof v !== "object")
+        .join("-")}
+      ref={ref}
+      {...rest}
+      className={variants({ height })}
+    >
       <Swiper
-        effect="fade"
+        effect={effect}
         loop={loop}
         autoplay={autoRotate ? { delay: changeSlidesEvery * 1000 } : false}
         navigation={
@@ -132,6 +138,18 @@ export let schema: HydrogenComponentSchema = {
           },
           defaultValue: "large",
         },
+        {
+          type: "toggle-group",
+          label: "Slide effect",
+          name: "effect",
+          configs: {
+            options: [
+              { value: "fade", label: "Fade" },
+              { value: "slide", label: "Slide" },
+            ],
+          },
+          defaultValue: "fade",
+        },
         {
           type: "switch",
           label: "Auto-rotate slides",
@@ -306,7 +324,7 @@ export let schema: HydrogenComponentSchema = {
           },
           {
             type: "button",
-            content: "Shop collection",
+            text: "Shop collection",
             variant: "primary",
             buttonStyle: "custom",
             backgroundColor: "#00000000",
@@ -348,7 +366,7 @@ export let schema: HydrogenComponentSchema = {
           },
           {
             type: "button",
-            content: "Shop collection",
+            text: "Shop collection",
             buttonStyle: "custom",
             backgroundColor: "#00000000",
             textColor: "#fff",

app/sections/testimonials/item.tsx

@@ -36,7 +36,7 @@ let TestimonialItem = forwardRef<HTMLDivElement, TestimonialItemProps>(
       >
         <figure className="p-6 bg-gray-50 rounded">
           <blockquote>
-            <h4 className="font-semibold">{heading}</h4>
+            <div className="text-xl md:text-2xl">{heading}</div>
             <p
               className="my-4 text-gray-500"
               suppressHydrationWarning

app/sections/video-embed/video.tsx

@@ -39,7 +39,7 @@ let variants = cva("mx-auto w-full aspect-video", {
   },
   defaultVariants: {
     size: "medium",
-    borderRadius: 8,
+    borderRadius: 0,
   },
 });
 
@@ -109,7 +109,7 @@ export let schema: HydrogenComponentSchema = {
             step: 2,
             unit: "px",
           },
-          defaultValue: 8,
+          defaultValue: 0,
         },
       ],
     },