From d50f248ced05d4ef19acc0bab9cfc31d06157fb9 Mon Sep 17 00:00:00 2001
From: gimenes <tlgimenes@gmail.com>
Date: Sun, 14 Apr 2024 18:03:22 -0300
Subject: [PATCH 1/2] bump deps

---
 apps/decohub.ts          |  4 ++--
 deno.json                | 19 +++++--------------
 sections/Theme/Theme.tsx | 34 +++++++++++++++++++++++++++-------
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/apps/decohub.ts b/apps/decohub.ts
index e2e2c502..a2ef14fc 100644
--- a/apps/decohub.ts
+++ b/apps/decohub.ts
@@ -7,7 +7,7 @@ import Decohub from "apps/decohub/mod.ts";
  * @logo https://raw.githubusercontent.com/deco-cx/apps/main/decohub/logo.png
  */
 export default function App(...params: Parameters<typeof Decohub>) {
-  return Decohub(...params)
+  return Decohub(...params);
 }
 
-export {  Preview } from "apps/decohub/mod.ts";
\ No newline at end of file
+export { Preview } from "apps/decohub/mod.ts";
diff --git a/deno.json b/deno.json
index acfaeedd..b037cbc8 100644
--- a/deno.json
+++ b/deno.json
@@ -1,8 +1,8 @@
 {
   "imports": {
-    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.60.20/",
-    "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/apps@0.35.35/",
-    "$fresh/": "https://deno.land/x/fresh@1.6.5/",
+    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.60.25/",
+    "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/apps@0.36.0/",
+    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
     "preact": "https://esm.sh/preact@10.19.2",
     "preact/": "https://esm.sh/preact@10.19.2/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
@@ -28,9 +28,7 @@
     "preview": "deno run -A main.ts",
     "generate-icons": "deno run -A --unstable static/generate-icons.ts"
   },
-  "githooks": {
-    "pre-commit": "check"
-  },
+  "githooks": { "pre-commit": "check" },
   "exclude": [
     "node_modules",
     "static/",
@@ -39,14 +37,7 @@
     "**/_fresh/*",
     ".deco"
   ],
-  "lint": {
-    "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
-    }
-  },
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
   "nodeModulesDir": true,
   "compilerOptions": {
     "jsx": "react-jsx",
diff --git a/sections/Theme/Theme.tsx b/sections/Theme/Theme.tsx
index 766f4440..1bf615d0 100644
--- a/sections/Theme/Theme.tsx
+++ b/sections/Theme/Theme.tsx
@@ -525,28 +525,49 @@ const PreviewContainer = (
       display: none;
     }
     #${checkboxId}:checked ~ .hide-label {
-      background-color: ${mode === "dark" ? "var(--admin-hover-bg-color)" : "var(--admin-text-color-light)"};
-      color: ${mode === "dark" ? "var(--admin-text-color-light)" : "var(--admin-hover-bg-color)"};
+      background-color: ${
+    mode === "dark"
+      ? "var(--admin-hover-bg-color)"
+      : "var(--admin-text-color-light)"
+  };
+      color: ${
+    mode === "dark"
+      ? "var(--admin-text-color-light)"
+      : "var(--admin-hover-bg-color)"
+  };
     }
   `;
 
   return (
     <>
       <style>{dynamicStyle}</style>
-      <div className={`border p-4 flex flex-col gap-2 grow relative ${borderClass} rounded-lg`}>
+      <div
+        className={`border p-4 flex flex-col gap-2 grow relative ${borderClass} rounded-lg`}
+      >
         <div>
           <div className="my-1">{title}</div>
           <div>
             <input type="checkbox" id={checkboxId} className="sr-only" />
             {/* Label for "Show code" */}
-            <label htmlFor={checkboxId} className={`btn-sm absolute right-4 top-4 ${btnOutlineClass} show-label`}>
+            <label
+              htmlFor={checkboxId}
+              className={`btn-sm absolute right-4 top-4 ${btnOutlineClass} show-label`}
+            >
               Show code
             </label>
             {/* Label for "Hide code" */}
-            <label htmlFor={checkboxId} className={`btn-sm absolute right-4 top-4 ${btnOutlineClass} hide-label`}>
+            <label
+              htmlFor={checkboxId}
+              className={`btn-sm absolute right-4 top-4 ${btnOutlineClass} hide-label`}
+            >
               Hide code
             </label>
-            <div id={codeBlockId} className={`mt-4 mb-2 text-xs md:text-sm ${mode === "dark" ? "bg-slate-800" : "bg-slate-100"}`}>
+            <div
+              id={codeBlockId}
+              className={`mt-4 mb-2 text-xs md:text-sm ${
+                mode === "dark" ? "bg-slate-800" : "bg-slate-100"
+              }`}
+            >
               <pre className="p-4 overflow-x-auto">{codeString}</pre>
             </div>
           </div>
@@ -557,7 +578,6 @@ const PreviewContainer = (
   );
 };
 
-
 // TODO(@carol): find a way to make these snippets more dynamic
 const snippets = {
   textColors: `

From 9dec2bd47675e993480cd6da849cb65dc6a76c9e Mon Sep 17 00:00:00 2001
From: gimenes <tlgimenes@gmail.com>
Date: Mon, 15 Apr 2024 14:15:51 -0300
Subject: [PATCH 2/2] refactor product card

---
 components/product/ProductCard.tsx        | 405 +++++++---------------
 components/product/ProductGallery.tsx     |   6 +-
 components/product/ProductShelf.tsx       |   7 +-
 components/product/ProductShelfTabbed.tsx |  13 +-
 components/search/SearchResult.tsx        |   9 +-
 loaders/Layouts/ProductCard.tsx           | 167 +++++----
 sections/Theme/Theme.tsx                  |  58 ++--
 7 files changed, 256 insertions(+), 409 deletions(-)

diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
index e02dd17a..5c0bce97 100644
--- a/components/product/ProductCard.tsx
+++ b/components/product/ProductCard.tsx
@@ -1,45 +1,18 @@
+import type { Product } from "apps/commerce/types.ts";
+import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
+import Image from "apps/website/components/Image.tsx";
 import type { Platform } from "../../apps/site.ts";
 import { SendEventOnClick } from "../../components/Analytics.tsx";
 import Avatar from "../../components/ui/Avatar.tsx";
-import WishlistButtonVtex from "../../islands/WishlistButton/vtex.tsx";
-import WishlistButtonWake from "../../islands/WishlistButton/vtex.tsx";
+import {
+  default as WishlistButtonVtex,
+  default as WishlistButtonWake,
+} from "../../islands/WishlistButton/vtex.tsx";
+import { clx } from "../../sdk/clx.ts";
 import { formatPrice } from "../../sdk/format.ts";
+import { relative } from "../../sdk/url.ts";
 import { useOffer } from "../../sdk/useOffer.ts";
 import { useVariantPossibilities } from "../../sdk/useVariantPossiblities.ts";
-import type { Product } from "apps/commerce/types.ts";
-import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
-import Image from "apps/website/components/Image.tsx";
-import { relative } from "../../sdk/url.ts";
-
-export interface Layout {
-  basics?: {
-    contentAlignment?: "Left" | "Center";
-    oldPriceSize?: "Small" | "Normal";
-    ctaText?: string;
-  };
-  elementsPositions?: {
-    skuSelector?: "Top" | "Bottom";
-    favoriteIcon?: "Top right" | "Top left";
-  };
-  hide?: {
-    productName?: boolean;
-    productDescription?: boolean;
-    allPrices?: boolean;
-    discount?: boolean;
-    installments?: boolean;
-    skuSelector?: boolean;
-    cta?: boolean;
-    favoriteIcon?: boolean;
-  };
-  onMouseOver?: {
-    image?: "Change image" | "Zoom image";
-    card?: "None" | "Move up";
-    showFavoriteIcon?: boolean;
-    showSkuSelector?: boolean;
-    showCardShadow?: boolean;
-    showCta?: boolean;
-  };
-}
 
 interface Props {
   product: Product;
@@ -52,7 +25,6 @@ interface Props {
   /** @description index of the product card in the list */
   index?: number;
 
-  layout?: Layout;
   platform?: Platform;
 }
 
@@ -63,7 +35,6 @@ function ProductCard({
   product,
   preload,
   itemListName,
-  layout,
   platform,
   index,
 }: Props) {
@@ -76,53 +47,16 @@ function ProductCard({
   const { listPrice, price, installments } = useOffer(offers);
   const possibilities = useVariantPossibilities(hasVariant, product);
   const variants = Object.entries(Object.values(possibilities)[0] ?? {});
-
-  const l = layout;
-  const align =
-    !l?.basics?.contentAlignment || l?.basics?.contentAlignment == "Left"
-      ? "left"
-      : "center";
   const relativeUrl = relative(url);
-  const skuSelector = variants.map(([value, link]) => {
-    const relativeLink = relative(link);
-    return (
-      <li>
-        <a href={relativeLink}>
-          <Avatar
-            variant={relativeLink === relativeUrl
-              ? "active"
-              : relativeLink
-              ? "default"
-              : "disabled"}
-            content={value}
-          />
-        </a>
-      </li>
-    );
-  });
-  const cta = (
-    <a
-      href={url && relative(url)}
-      aria-label="view product"
-      class="btn btn-block"
-    >
-      {l?.basics?.ctaText || "Ver produto"}
-    </a>
-  );
+  const aspectRatio = `${WIDTH} / ${HEIGHT}`;
 
   return (
     <div
       id={id}
-      class={`card card-compact group w-full ${
-        align === "center" ? "text-center" : "text-start"
-      } ${l?.onMouseOver?.showCardShadow ? "lg:hover:card-bordered" : ""}
-        ${
-        l?.onMouseOver?.card === "Move up" &&
-        "duration-500 transition-translate ease-in-out lg:hover:-translate-y-2"
-      }
-      `}
       data-deco="view-product"
+      class="card card-compact group w-full lg:border lg:border-transparent lg:hover:border-inherit lg:p-4"
     >
+      {/* Add click event to dataLayer */}
       <SendEventOnClick
         id={id}
         event={{
@@ -140,226 +74,147 @@ function ProductCard({
           },
         }}
       />
-      <figure
-        class="relative overflow-hidden"
-        style={{ aspectRatio: `${WIDTH} / ${HEIGHT}` }}
-      >
-        {/* Wishlist button */}
 
-        <div
-          class={`absolute top-2 z-10 flex items-center
-            ${
-            l?.elementsPositions?.favoriteIcon === "Top left"
-              ? "left-2"
-              : "right-2"
-          }
-            
-          `}
+      <div class="flex flex-col gap-2 lg:group-hover:-translate-y-2">
+        <figure
+          class="relative overflow-hidden"
+          style={{ aspectRatio }}
         >
+          {/* Wishlist button */}
           <div
-            class={`${l?.hide?.favoriteIcon ? "hidden" : "block"} ${
-              l?.onMouseOver?.showFavoriteIcon ? "lg:group-hover:block" : ""
-            }`}
-          >
-            {platform === "vtex" && (
-              <WishlistButtonVtex
-                productGroupID={productGroupID}
-                productID={productID}
-              />
+            class={clx(
+              "absolute top-0 left-0",
+              "z-10 w-full",
+              "flex items-center justify-end",
             )}
-            {platform === "wake" && (
-              <WishlistButtonWake
-                productGroupID={productGroupID}
-                productID={productID}
-              />
-            )}
-          </div>
-          {/* Discount % */}
-          {!l?.hide?.discount && (
-            <div class="text-sm bg-base-100 p-[10px]">
-              <span class="text-base-content font-bold">
+          >
+            {/* Discount % */}
+            <div class="text-sm px-3">
+              <span class="font-bold">
                 {listPrice && price
                   ? `${Math.round(((listPrice - price) / listPrice) * 100)}% `
                   : ""}
               </span>
               OFF
             </div>
-          )}
-        </div>
+            <div class="lg:group-hover:block">
+              {platform === "vtex" && (
+                <WishlistButtonVtex
+                  productGroupID={productGroupID}
+                  productID={productID}
+                />
+              )}
+              {platform === "wake" && (
+                <WishlistButtonWake
+                  productGroupID={productGroupID}
+                  productID={productID}
+                />
+              )}
+            </div>
+          </div>
 
-        {/* Product Images */}
-        <a
-          href={url && relative(url)}
-          aria-label="view product"
-          class="grid grid-cols-1 grid-rows-1 w-full"
-        >
-          <Image
-            src={front.url!}
-            alt={front.alternateName}
-            width={WIDTH}
-            height={HEIGHT}
-            class={`bg-base-100 col-span-full row-span-full rounded w-full ${
-              l?.onMouseOver?.image == "Zoom image"
-                ? "duration-100 transition-scale scale-100 lg:group-hover:scale-125"
-                : ""
-            }`}
-            sizes="(max-width: 640px) 50vw, 20vw"
-            preload={preload}
-            loading={preload ? "eager" : "lazy"}
-            decoding="async"
-          />
-          {(!l?.onMouseOver?.image ||
-            l?.onMouseOver?.image == "Change image") && (
+          {/* Product Images */}
+          <a
+            href={relativeUrl}
+            aria-label="view product"
+            class={clx(
+              "absolute top-0 left-0",
+              "grid grid-cols-1 grid-rows-1",
+              "w-full",
+            )}
+          >
+            <Image
+              src={front.url!}
+              alt={front.alternateName}
+              width={WIDTH}
+              height={HEIGHT}
+              style={{ aspectRatio }}
+              class={clx(
+                "bg-base-100",
+                "object-cover",
+                "rounded w-full",
+                "col-span-full row-span-full",
+              )}
+              sizes="(max-width: 640px) 50vw, 20vw"
+              preload={preload}
+              loading={preload ? "eager" : "lazy"}
+              decoding="async"
+            />
             <Image
               src={back?.url ?? front.url!}
               alt={back?.alternateName ?? front.alternateName}
               width={WIDTH}
               height={HEIGHT}
-              class="bg-base-100 col-span-full row-span-full transition-opacity rounded w-full opacity-0 lg:group-hover:opacity-100"
+              style={{ aspectRatio }}
+              class={clx(
+                "bg-base-100",
+                "object-cover",
+                "rounded w-full",
+                "col-span-full row-span-full",
+                "transition-opacity opacity-0 lg:group-hover:opacity-100",
+              )}
               sizes="(max-width: 640px) 50vw, 20vw"
               loading="lazy"
               decoding="async"
             />
-          )}
-        </a>
-        <figcaption
-          class={`
-          absolute bottom-1 left-0 w-full flex flex-col gap-3 p-2 ${
-            l?.onMouseOver?.showSkuSelector || l?.onMouseOver?.showCta
-              ? "transition-opacity opacity-0 lg:group-hover:opacity-100"
-              : "lg:hidden"
-          }`}
-        >
-          {/* SKU Selector */}
-          {l?.onMouseOver?.showSkuSelector && (
-            <ul class="flex justify-center items-center gap-2 w-full">
-              {skuSelector}
-            </ul>
-          )}
-          {l?.onMouseOver?.showCta && cta}
-        </figcaption>
-      </figure>
-      {/* Prices & Name */}
-      <div class="flex-auto flex flex-col p-2 gap-3 lg:gap-2">
-        {/* SKU Selector */}
-        {(!l?.elementsPositions?.skuSelector ||
-          l?.elementsPositions?.skuSelector === "Top") && (
-          <>
-            {l?.hide?.skuSelector
-              ? (
-                ""
-              )
-              : (
-                <ul
-                  class={`flex items-center gap-2 w-full overflow-auto p-3 ${
-                    align === "center" ? "justify-center" : "justify-start"
-                  } ${l?.onMouseOver?.showSkuSelector ? "lg:hidden" : ""}`}
-                >
-                  {skuSelector}
-                </ul>
-              )}
-          </>
-        )}
+          </a>
+        </figure>
 
-        {l?.hide?.productName && l?.hide?.productDescription
-          ? (
-            ""
-          )
-          : (
-            <div class="flex flex-col gap-0">
-              {l?.hide?.productName
-                ? (
-                  ""
-                )
-                : (
-                  <h2
-                    class="truncate text-base lg:text-lg text-base-content uppercase font-normal"
-                    dangerouslySetInnerHTML={{ __html: name ?? "" }}
-                  />
-                )}
-              {l?.hide?.productDescription
-                ? (
-                  ""
-                )
-                : (
-                  <div
-                    class="truncate text-sm lg:text-sm text-neutral"
-                    dangerouslySetInnerHTML={{ __html: description ?? "" }}
+        {/* SKU Selector */}
+        <ul class="flex items-center justify-center gap-2">
+          {variants
+            .map(([value, link]) => [value, relative(link)] as const)
+            .map(([value, link]) => (
+              <li>
+                <a href={link}>
+                  <Avatar
+                    content={value}
+                    variant={link === relativeUrl
+                      ? "active"
+                      : link
+                      ? "default"
+                      : "disabled"}
                   />
-                )}
-            </div>
-          )}
-        {l?.hide?.allPrices
-          ? (
-            ""
-          )
-          : (
-            <div class="flex flex-col gap-2">
-              <div
-                class={`flex flex-col gap-0 ${
-                  l?.basics?.oldPriceSize === "Normal"
-                    ? "lg:flex-row-reverse lg:gap-2"
-                    : ""
-                } ${align === "center" ? "justify-center" : "justify-end"}`}
-              >
-                <div
-                  class={`line-through text-base-300 text-xs font-light ${
-                    l?.basics?.oldPriceSize === "Normal" ? "lg:text-sm" : ""
-                  }`}
-                >
-                  {formatPrice(listPrice, offers?.priceCurrency)}
-                </div>
-                <div class="text-base-content lg:text-sm font-light">
-                  {formatPrice(price, offers?.priceCurrency)}
-                </div>
-              </div>
-            </div>
-          )}
+                </a>
+              </li>
+            ))}
+        </ul>
 
-        {/* SKU Selector */}
-        {l?.elementsPositions?.skuSelector === "Bottom" && (
-          <>
-            <ul
-              class={`flex items-center gap-2 w-full ${
-                align === "center" ? "justify-center" : "justify-between"
-              } ${l?.onMouseOver?.showSkuSelector ? "lg:hidden" : ""}`}
-            >
-              {l?.hide?.installments
-                ? (
-                  ""
-                )
-                : (
-                  <li>
-                    <span class="text-base-300 font-light text-sm truncate">
-                      ou {installments}
-                    </span>
-                  </li>
-                )}
-              {l?.hide?.skuSelector
-                ? (
-                  ""
-                )
-                : (
-                  <li>
-                    <ul class="flex items-center gap-2">{skuSelector}</ul>
-                  </li>
-                )}
-            </ul>
-          </>
-        )}
-        {!l?.hide?.cta
-          ? (
-            <div
-              class={`flex-auto flex items-end ${
-                l?.onMouseOver?.showCta ? "lg:hidden" : ""
-              }`}
-            >
-              {cta}
-            </div>
-          )
-          : (
-            ""
-          )}
+        {/* Name/Description */}
+        <div class="flex flex-col">
+          <h2
+            class="truncate text-base lg:text-lg uppercase"
+            dangerouslySetInnerHTML={{ __html: name ?? "" }}
+          />
+
+          <div
+            class="truncate text-xs"
+            dangerouslySetInnerHTML={{ __html: description ?? "" }}
+          />
+        </div>
+
+        {/* Price from/to */}
+        <div class="flex gap-2 items-center justify-end font-light">
+          <span class="line-through text-sm">
+            {formatPrice(listPrice, offers?.priceCurrency)}
+          </span>
+          <span>
+            {formatPrice(price, offers?.priceCurrency)}
+          </span>
+        </div>
+
+        {/* Installments */}
+        <span class="flex justify-end gap-2 font-light text-sm truncate">
+          ou {installments}
+        </span>
+
+        <a
+          href={relativeUrl}
+          aria-label="view product"
+          class="btn btn-block"
+        >
+          Ver produto
+        </a>
       </div>
     </div>
   );
diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx
index 9360261a..d1bebfab 100644
--- a/components/product/ProductGallery.tsx
+++ b/components/product/ProductGallery.tsx
@@ -1,9 +1,7 @@
 import { Head } from "$fresh/runtime.ts";
 import { PageInfo, Product } from "apps/commerce/types.ts";
 import { usePartialSection } from "deco/hooks/usePartialSection.ts";
-import ProductCard, {
-  Layout as CardLayout,
-} from "../../components/product/ProductCard.tsx";
+import ProductCard from "../../components/product/ProductCard.tsx";
 import { Format } from "../../components/search/SearchResult.tsx";
 import Spinner from "../../components/ui/Spinner.tsx";
 import ShowMore from "../../islands/ShowMore.tsx";
@@ -19,7 +17,6 @@ export interface Props {
   pageInfo: PageInfo;
   offset: number;
   layout?: {
-    card?: CardLayout;
     columns?: Columns;
     format?: Format;
   };
@@ -72,7 +69,6 @@ function ProductGallery(
           product={product}
           preload={index === 0}
           index={offset + index}
-          layout={layout?.card}
           platform={platform}
         />
       ))}
diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
index dc9ae675..d67eac99 100644
--- a/components/product/ProductShelf.tsx
+++ b/components/product/ProductShelf.tsx
@@ -1,7 +1,5 @@
 import { SendEventOnView } from "../../components/Analytics.tsx";
-import ProductCard, {
-  Layout as cardLayout,
-} from "../../components/product/ProductCard.tsx";
+import ProductCard from "../../components/product/ProductCard.tsx";
 import Icon from "../../components/ui/Icon.tsx";
 import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
@@ -26,7 +24,6 @@ export interface Props {
     headerfontSize?: "Normal" | "Large" | "Small";
     showArrows?: boolean;
   };
-  cardLayout?: cardLayout;
 }
 
 function ProductShelf({
@@ -34,7 +31,6 @@ function ProductShelf({
   title,
   description,
   layout,
-  cardLayout,
 }: Props) {
   const id = useId();
   const platform = usePlatform();
@@ -87,7 +83,6 @@ function ProductShelf({
               <ProductCard
                 product={product}
                 itemListName={title}
-                layout={cardLayout}
                 platform={platform}
                 index={index}
               />
diff --git a/components/product/ProductShelfTabbed.tsx b/components/product/ProductShelfTabbed.tsx
index e3883d51..43362eb8 100644
--- a/components/product/ProductShelfTabbed.tsx
+++ b/components/product/ProductShelfTabbed.tsx
@@ -1,7 +1,8 @@
+import type { Product } from "apps/commerce/types.ts";
+import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
+import { usePartialSection } from "deco/hooks/usePartialSection.ts";
 import { SendEventOnView } from "../../components/Analytics.tsx";
-import ProductCard, {
-  Layout as cardLayout,
-} from "../../components/product/ProductCard.tsx";
+import ProductCard from "../../components/product/ProductCard.tsx";
 import Icon from "../../components/ui/Icon.tsx";
 import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
@@ -9,9 +10,6 @@ import SliderJS from "../../islands/SliderJS.tsx";
 import { useId } from "../../sdk/useId.ts";
 import { useOffer } from "../../sdk/useOffer.ts";
 import { usePlatform } from "../../sdk/usePlatform.tsx";
-import type { Product } from "apps/commerce/types.ts";
-import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
-import { usePartialSection } from "deco/hooks/usePartialSection.ts";
 
 /** @titleBy title */
 interface Tab {
@@ -27,7 +25,6 @@ export interface Props {
     headerAlignment?: "center" | "left";
     headerfontSize?: "Normal" | "Large";
   };
-  cardLayout?: cardLayout;
   tabIndex?: number;
 }
 
@@ -36,7 +33,6 @@ function TabbedProductShelf({
   title,
   description,
   layout,
-  cardLayout,
   tabIndex,
 }: Props) {
   const id = useId();
@@ -85,7 +81,6 @@ function TabbedProductShelf({
               <ProductCard
                 product={product}
                 itemListName={title}
-                layout={cardLayout}
                 platform={platform}
                 index={index}
               />
diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx
index a2c6fff8..ea1885eb 100644
--- a/components/search/SearchResult.tsx
+++ b/components/search/SearchResult.tsx
@@ -1,12 +1,11 @@
+import type { ProductListingPage } from "apps/commerce/types.ts";
+import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
 import { SendEventOnView } from "../../components/Analytics.tsx";
-import { Layout as CardLayout } from "../../components/product/ProductCard.tsx";
 import Filters from "../../components/search/Filters.tsx";
 import Icon from "../../components/ui/Icon.tsx";
 import SearchControls from "../../islands/SearchControls.tsx";
 import { useId } from "../../sdk/useId.ts";
 import { useOffer } from "../../sdk/useOffer.ts";
-import type { ProductListingPage } from "apps/commerce/types.ts";
-import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
 import ProductGallery, { Columns } from "../product/ProductGallery.tsx";
 
 export type Format = "Show More" | "Pagination";
@@ -30,7 +29,6 @@ export interface Props {
   /** @title Integration */
   page: ProductListingPage | null;
   layout?: Layout;
-  cardLayout?: CardLayout;
 
   /** @description 0 for ?page=0 as your first page */
   startingPage?: 0 | 1;
@@ -47,7 +45,6 @@ function NotFound() {
 function Result({
   page,
   layout,
-  cardLayout,
   startingPage = 0,
   url: _url,
 }: Omit<Props, "page"> & {
@@ -91,7 +88,7 @@ function Result({
             <ProductGallery
               products={products}
               offset={offset}
-              layout={{ card: cardLayout, columns: layout?.columns, format }}
+              layout={{ columns: layout?.columns, format }}
               pageInfo={pageInfo}
               url={url}
             />
diff --git a/loaders/Layouts/ProductCard.tsx b/loaders/Layouts/ProductCard.tsx
index 6587842b..9871d5aa 100644
--- a/loaders/Layouts/ProductCard.tsx
+++ b/loaders/Layouts/ProductCard.tsx
@@ -1,102 +1,97 @@
-import ProductCard, { Layout } from "../../components/product/ProductCard.tsx";
+import ProductCard from "../../components/product/ProductCard.tsx";
 import { usePlatform } from "../../sdk/usePlatform.tsx";
 
 interface Props {
   /** @title Product Card layout props */
-  layout: Layout;
+  layout: unknown;
 }
 
 /** @title Product Card Layout */
-const loader = ({ layout }: Props): Layout => layout;
+const loader = ({ layout }: Props): unknown => layout;
 
-export const Preview = (props: Props) => {
-  const { layout } = props;
-
-  return (
-    <div class="h-full w-full grid place-items-center">
-      <div class="max-w-xs">
-        <ProductCard
-          layout={layout}
-          platform={usePlatform()}
-          product={{
-            "@type": "Product",
-            "category": "Masculino>Camisetas Gola Lisa",
-            "productID": "165",
-            "url": "",
-            "name": "Product Test",
-            "description": "Product Description",
-            "brand": {
-              "@type": "Brand",
-              "@id": "2000000",
-              "name": "deco.cx",
+export const Preview = (_: Props) => (
+  <div class="h-full w-full grid place-items-center">
+    <div class="max-w-xs">
+      <ProductCard
+        platform={usePlatform()}
+        product={{
+          "@type": "Product",
+          "category": "Masculino>Camisetas Gola Lisa",
+          "productID": "165",
+          "url": "",
+          "name": "Product Test",
+          "description": "Product Description",
+          "brand": {
+            "@type": "Brand",
+            "@id": "2000000",
+            "name": "deco.cx",
+          },
+          "inProductGroupWithID": "33",
+          "sku": "165",
+          "gtin": "789456123003305",
+          "additionalProperty": [
+            {
+              "@type": "PropertyValue",
+              "name": "TAMANHO",
+              "value": "GG",
+              "valueReference": "SPECIFICATION",
             },
-            "inProductGroupWithID": "33",
-            "sku": "165",
-            "gtin": "789456123003305",
-            "additionalProperty": [
-              {
-                "@type": "PropertyValue",
-                "name": "TAMANHO",
-                "value": "GG",
-                "valueReference": "SPECIFICATION",
-              },
-            ],
-            "isVariantOf": {
-              "@type": "ProductGroup",
-              "productGroupID": "33",
-              "hasVariant": [],
-              "name": "Camiseta Masculina Gola Lisa Olive",
-              "additionalProperty": [],
+          ],
+          "isVariantOf": {
+            "@type": "ProductGroup",
+            "productGroupID": "33",
+            "hasVariant": [],
+            "name": "Camiseta Masculina Gola Lisa Olive",
+            "additionalProperty": [],
+          },
+          "image": [
+            {
+              "@type": "ImageObject",
+              "alternateName": "test",
+              "url":
+                "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
             },
-            "image": [
-              {
-                "@type": "ImageObject",
-                "alternateName": "test",
-                "url":
-                  "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
-              },
+            {
+              "@type": "ImageObject",
+              "alternateName": "test",
+              "url":
+                "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
+            },
+          ],
+          "offers": {
+            "@type": "AggregateOffer",
+            "priceCurrency": "BRL",
+            "highPrice": 69.3,
+            "lowPrice": 69.3,
+            "offerCount": 1,
+            "offers": [
               {
-                "@type": "ImageObject",
-                "alternateName": "test",
-                "url":
-                  "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
+                "@type": "Offer",
+                "price": 69.3,
+                "seller": "1",
+                "priceValidUntil": "2024-09-04T13:03:31Z",
+                "inventoryLevel": { "value": 10000 },
+                "teasers": [],
+                "priceSpecification": [
+                  {
+                    "@type": "UnitPriceSpecification",
+                    "priceType": "https://schema.org/ListPrice",
+                    "price": 179,
+                  },
+                  {
+                    "@type": "UnitPriceSpecification",
+                    "priceType": "https://schema.org/SalePrice",
+                    "price": 69.3,
+                  },
+                ],
+                "availability": "https://schema.org/InStock",
               },
             ],
-            "offers": {
-              "@type": "AggregateOffer",
-              "priceCurrency": "BRL",
-              "highPrice": 69.3,
-              "lowPrice": 69.3,
-              "offerCount": 1,
-              "offers": [
-                {
-                  "@type": "Offer",
-                  "price": 69.3,
-                  "seller": "1",
-                  "priceValidUntil": "2024-09-04T13:03:31Z",
-                  "inventoryLevel": { "value": 10000 },
-                  "teasers": [],
-                  "priceSpecification": [
-                    {
-                      "@type": "UnitPriceSpecification",
-                      "priceType": "https://schema.org/ListPrice",
-                      "price": 179,
-                    },
-                    {
-                      "@type": "UnitPriceSpecification",
-                      "priceType": "https://schema.org/SalePrice",
-                      "price": 69.3,
-                    },
-                  ],
-                  "availability": "https://schema.org/InStock",
-                },
-              ],
-            },
-          }}
-        />
-      </div>
+          },
+        }}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 export default loader;
diff --git a/sections/Theme/Theme.tsx b/sections/Theme/Theme.tsx
index 1bf615d0..5863a619 100644
--- a/sections/Theme/Theme.tsx
+++ b/sections/Theme/Theme.tsx
@@ -7,6 +7,7 @@
 import SiteTheme, { Font } from "apps/website/components/Theme.tsx";
 import Color from "npm:colorjs.io";
 import type { ComponentChildren } from "preact";
+import { clx } from "../../sdk/clx.ts";
 
 export interface ThemeColors {
   /**
@@ -361,9 +362,9 @@ export function Preview(props: Props) {
         `}
       </style>
       <Section {...props} />
-      <div className={`flex flex-col gap-4 text-base w-full ${adminColorMode}`}>
+      <div class={`flex flex-col gap-4 text-base w-full ${adminColorMode}`}>
         <div>Components and styles</div>
-        <div className="flex flex-col w-full gap-2">
+        <div class="flex flex-col w-full gap-2">
           <PreviewContainer
             title="Text colors"
             mode={adminColorMode}
@@ -395,7 +396,7 @@ export function Preview(props: Props) {
         </div>
       </div>
       {props.font?.family && (
-        <div className="text-center py-2">
+        <div class="text-center py-2">
           Font: {props.font.family}
         </div>
       )}
@@ -414,10 +415,10 @@ const ButtonSizesPreview = () => {
   const buttonStyles = ["", "primary", "secondary", "accent"];
 
   const renderButtonRow = (style: string) => (
-    <div className="flex flex-row gap-2 items-center">
+    <div class="flex flex-row gap-2 items-center">
       {Object.entries(buttonSizes).map(([sizeCode, sizeText]) => (
         <button
-          className={`btn capitalize btn-${sizeCode} ${
+          class={`btn capitalize btn-${sizeCode} ${
             style ? `btn-${style}` : ""
           }`}
         >
@@ -428,7 +429,7 @@ const ButtonSizesPreview = () => {
   );
 
   return (
-    <div className="bg-base-100 overflow-x-auto rounded-lg flex flex-col p-2 gap-2">
+    <div class="bg-base-100 overflow-x-auto rounded-lg flex flex-col p-2 gap-2">
       {buttonStyles.map((style) => renderButtonRow(style))}
     </div>
   );
@@ -444,9 +445,9 @@ const ButtonColorsPreview = () => {
   ];
 
   const renderButtonRow = (type: string) => (
-    <div className="flex flex-row gap-2">
+    <div class="flex flex-row gap-2">
       {buttonColorsClasses.map((color) => (
-        <button className={`btn btn-xs md:btn-sm capitalize ${color} ${type}`}>
+        <button class={`btn btn-xs md:btn-sm capitalize ${color} ${type}`}>
           {color ? color.split("-")[1] : "Button"}
         </button>
       ))}
@@ -454,7 +455,7 @@ const ButtonColorsPreview = () => {
   );
 
   return (
-    <div className="bg-base-100 overflow-x-auto rounded-lg flex flex-col p-2 gap-2">
+    <div class="bg-base-100 overflow-x-auto rounded-lg flex flex-col p-2 gap-2">
       {buttonTypesClasses.map((type) => renderButtonRow(type))}
     </div>
   );
@@ -464,9 +465,9 @@ const ButtonStylesPreview = () => {
   const buttonStylesClasses = ["", "btn-outline", "btn-ghost", "btn-link"];
 
   return (
-    <div className="bg-base-100 overflow-x-auto rounded-lg flex flex-row p-2 gap-2">
+    <div class="bg-base-100 overflow-x-auto rounded-lg flex flex-row p-2 gap-2">
       {buttonStylesClasses.map((style) => (
-        <button className={`btn btn-xs md:btn-sm capitalize ${style}`}>
+        <button class={`btn btn-xs md:btn-sm capitalize ${style}`}>
           {style ? style.split("-")[1] : "Button"}
         </button>
       ))}
@@ -483,9 +484,9 @@ const TextColorsPreview = () => {
   ];
 
   return (
-    <div className="bg-base-100 overflow-x-auto rounded-lg flex flex-row p-2 gap-2 text-sm md:text-base">
+    <div class="bg-base-100 overflow-x-auto rounded-lg flex flex-row p-2 gap-2 text-sm md:text-base">
       {textColorsClasses.map((color) => (
-        <div className={`${color} capitalize`}>
+        <div class={`${color} capitalize`}>
           {color ? color.split("-")[1] : "Content"}
         </div>
       ))}
@@ -542,33 +543,46 @@ const PreviewContainer = (
     <>
       <style>{dynamicStyle}</style>
       <div
-        className={`border p-4 flex flex-col gap-2 grow relative ${borderClass} rounded-lg`}
+        class={clx(
+          `border p-4 flex flex-col gap-2 grow relative`,
+          borderClass,
+          `rounded-lg`,
+        )}
       >
         <div>
-          <div className="my-1">{title}</div>
+          <div class="my-1">{title}</div>
           <div>
-            <input type="checkbox" id={checkboxId} className="sr-only" />
+            <input type="checkbox" id={checkboxId} class="sr-only" />
             {/* Label for "Show code" */}
             <label
               htmlFor={checkboxId}
-              className={`btn-sm absolute right-4 top-4 ${btnOutlineClass} show-label`}
+              class={clx(
+                `btn-sm absolute right-4 top-4`,
+                btnOutlineClass,
+                `show-label`,
+              )}
             >
               Show code
             </label>
             {/* Label for "Hide code" */}
             <label
               htmlFor={checkboxId}
-              className={`btn-sm absolute right-4 top-4 ${btnOutlineClass} hide-label`}
+              class={clx(
+                `btn-sm absolute right-4 top-4`,
+                btnOutlineClass,
+                `hide-label`,
+              )}
             >
               Hide code
             </label>
             <div
               id={codeBlockId}
-              className={`mt-4 mb-2 text-xs md:text-sm ${
-                mode === "dark" ? "bg-slate-800" : "bg-slate-100"
-              }`}
+              class={clx(
+                "mt-4 mb-2 text-xs md:text-sm",
+                mode === "dark" ? "bg-slate-800" : "bg-slate-100",
+              )}
             >
-              <pre className="p-4 overflow-x-auto">{codeString}</pre>
+              <pre class="p-4 overflow-x-auto">{codeString}</pre>
             </div>
           </div>
         </div>