medusa-ui-home 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-home",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Homepage sections.",
   "type": "module",
   "license": "MIT",
@@ -46,10 +46,125 @@
       "import": "./src/theme/index.ts",
       "default": "./src/theme/index.ts"
     },
-    "./home/*": {
-      "types": "./src/home/*",
-      "import": "./src/home/*",
-      "default": "./src/home/*"
+    "./sections/promoAnnouncements": {
+      "types": "./src/home/sections/promo-announcements-section.tsx",
+      "import": "./src/home/sections/promo-announcements-section.tsx",
+      "default": "./src/home/sections/promo-announcements-section.tsx"
+    },
+    "./sections/hero": {
+      "types": "./src/home/sections/hero-section.tsx",
+      "import": "./src/home/sections/hero-section.tsx",
+      "default": "./src/home/sections/hero-section.tsx"
+    },
+    "./sections/categoryPills": {
+      "types": "./src/home/sections/category-pills-section.tsx",
+      "import": "./src/home/sections/category-pills-section.tsx",
+      "default": "./src/home/sections/category-pills-section.tsx"
+    },
+    "./sections/newArrivals": {
+      "types": "./src/home/sections/new-arrivals-section.tsx",
+      "import": "./src/home/sections/new-arrivals-section.tsx",
+      "default": "./src/home/sections/new-arrivals-section.tsx"
+    },
+    "./sections/newArrivalsClassic": {
+      "types": "./src/home/sections/new-arrivals-classic-section.tsx",
+      "import": "./src/home/sections/new-arrivals-classic-section.tsx",
+      "default": "./src/home/sections/new-arrivals-classic-section.tsx"
+    },
+    "./sections/promoCountdown": {
+      "types": "./src/home/sections/promo-countdown-section.tsx",
+      "import": "./src/home/sections/promo-countdown-section.tsx",
+      "default": "./src/home/sections/promo-countdown-section.tsx"
+    },
+    "./sections/celebrityTrust": {
+      "types": "./src/home/sections/celebrity-trust-section.tsx",
+      "import": "./src/home/sections/celebrity-trust-section.tsx",
+      "default": "./src/home/sections/celebrity-trust-section.tsx"
+    },
+    "./sections/luxeFavourites": {
+      "types": "./src/home/sections/luxe-favourites-section.tsx",
+      "import": "./src/home/sections/luxe-favourites-section.tsx",
+      "default": "./src/home/sections/luxe-favourites-section.tsx"
+    },
+    "./sections/shopByCategory": {
+      "types": "./src/home/sections/shop-by-category-section.tsx",
+      "import": "./src/home/sections/shop-by-category-section.tsx",
+      "default": "./src/home/sections/shop-by-category-section.tsx"
+    },
+    "./sections/baptism": {
+      "types": "./src/home/sections/baptism-section.tsx",
+      "import": "./src/home/sections/baptism-section.tsx",
+      "default": "./src/home/sections/baptism-section.tsx"
+    },
+    "./sections/baptismPicks": {
+      "types": "./src/home/sections/baptism-picks-section.tsx",
+      "import": "./src/home/sections/baptism-picks-section.tsx",
+      "default": "./src/home/sections/baptism-picks-section.tsx"
+    },
+    "./sections/themeDresses": {
+      "types": "./src/home/sections/theme-dresses-section.tsx",
+      "import": "./src/home/sections/theme-dresses-section.tsx",
+      "default": "./src/home/sections/theme-dresses-section.tsx"
+    },
+    "./sections/brandMarquee": {
+      "types": "./src/home/sections/brand-marquee-section.tsx",
+      "import": "./src/home/sections/brand-marquee-section.tsx",
+      "default": "./src/home/sections/brand-marquee-section.tsx"
+    },
+    "./sections/aboutBrand": {
+      "types": "./src/home/sections/about-brand-section.tsx",
+      "import": "./src/home/sections/about-brand-section.tsx",
+      "default": "./src/home/sections/about-brand-section.tsx"
+    },
+    "./sections/testimonials": {
+      "types": "./src/home/sections/testimonials-section.tsx",
+      "import": "./src/home/sections/testimonials-section.tsx",
+      "default": "./src/home/sections/testimonials-section.tsx"
+    },
+    "./sections/brandPillars": {
+      "types": "./src/home/sections/brand-pillars-section.tsx",
+      "import": "./src/home/sections/brand-pillars-section.tsx",
+      "default": "./src/home/sections/brand-pillars-section.tsx"
+    },
+    "./sections/instagramPosts": {
+      "types": "./src/home/sections/instagram-posts-section.tsx",
+      "import": "./src/home/sections/instagram-posts-section.tsx",
+      "default": "./src/home/sections/instagram-posts-section.tsx"
+    },
+    "./sections/features": {
+      "types": "./src/home/sections/features-section.tsx",
+      "import": "./src/home/sections/features-section.tsx",
+      "default": "./src/home/sections/features-section.tsx"
+    },
+    "./sections/shopByAge": {
+      "types": "./src/home/sections/shop-by-age-section.tsx",
+      "import": "./src/home/sections/shop-by-age-section.tsx",
+      "default": "./src/home/sections/shop-by-age-section.tsx"
+    },
+    "./sections/whyChooseUs": {
+      "types": "./src/home/sections/why-choose-us-section.tsx",
+      "import": "./src/home/sections/why-choose-us-section.tsx",
+      "default": "./src/home/sections/why-choose-us-section.tsx"
+    },
+    "./sections/lovedByMoms": {
+      "types": "./src/home/sections/loved-by-moms-section.tsx",
+      "import": "./src/home/sections/loved-by-moms-section.tsx",
+      "default": "./src/home/sections/loved-by-moms-section.tsx"
+    },
+    "./sections/videoStories": {
+      "types": "./src/home/sections/video-stories-section.tsx",
+      "import": "./src/home/sections/video-stories-section.tsx",
+      "default": "./src/home/sections/video-stories-section.tsx"
+    },
+    "./sections/blogPosts": {
+      "types": "./src/home/sections/blog-posts-section.tsx",
+      "import": "./src/home/sections/blog-posts-section.tsx",
+      "default": "./src/home/sections/blog-posts-section.tsx"
+    },
+    "./sections/adapt-home-section": {
+      "types": "./src/home/sections/adapt-home-section.tsx",
+      "import": "./src/home/sections/adapt-home-section.tsx",
+      "default": "./src/home/sections/adapt-home-section.tsx"
     },
     "./home/register-sections": {
       "types": "./src/home/register-sections.ts",
@@ -64,8 +179,17 @@
   },
   "typesVersions": {
     "*": {
-      "*": [
-        "src/*"
+      "sections/*": [
+        "src/home/sections/*-section.tsx"
+      ],
+      "theme": [
+        "src/theme/index.ts"
+      ],
+      "home/register-sections": [
+        "src/home/register-sections.ts"
+      ],
+      "home/home-content": [
+        "src/home/home-content.tsx"
       ]
     }
   },

package/src/home/components/baptism-picks/index.tsx

@@ -1,70 +1,2 @@
-"use client"
-
-import Image from "next/image"
-import { HttpTypes } from "@medusajs/types"
-import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
-import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
-import { useThemeSection } from "medusa-ui-common/providers"
-
-type BaptismPicksProps = {
-  title?: string
-  products: HttpTypes.StoreProduct[]
-  classNames?: Partial<HomeThemeClassNames>
-}
-
-export default function BaptismPicks({
-  title,
-  products,
-  classNames: classNamesProp,
-}: BaptismPicksProps) {
-  const cn = useThemeSection("home", classNamesProp)
-  const items = (products ?? []).slice(0, 5)
-  if (items.length === 0) return null
-
-  return (
-    <section className={`${cn.sectionPad} ${cn.section}`}>
-      <div className="px-4 sm:px-6 md:px-8">
-        <div className="mx-auto max-w-[1360px]">
-          {title ? <h2 className={`${cn.sectionTitle} mb-8`}>{title}</h2> : null}
-          <div className="flex gap-4 sm:gap-6 overflow-x-auto pb-2 justify-center">
-            {items.map((product, index) => {
-              const thumb = product.thumbnail || product.images?.[0]?.url
-              return (
-                <LocalizedClientLink
-                  key={product.id}
-                  href={`/products/${product.handle}`}
-                  className="shrink-0 flex flex-col items-center gap-3 group"
-                >
-                  <div className="relative">
-                    <span className="absolute -top-2 -right-2 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-[var(--sf-btn-primary)] text-xs font-bold text-[var(--sf-color-text-on-primary)]">
-                      {index + 1}
-                    </span>
-                    <div
-                      className={`w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden ring-2 ring-[var(--sf-color-border)] group-hover:ring-[var(--sf-color-primary)] ${cn.cardSurface}`}
-                    >
-                      {thumb ? (
-                        <Image
-                          src={thumb}
-                          alt={product.title ?? ""}
-                          width={112}
-                          height={112}
-                          className="w-full h-full object-cover"
-                          unoptimized
-                        />
-                      ) : (
-                        <div className={`w-full h-full ${cn.imagePlaceholder}`} />
-                      )}
-                    </div>
-                  </div>
-                  <span className={`text-[11px] sm:text-xs text-center max-w-[100px] line-clamp-2 ${cn.itemTitle}`}>
-                    {product.title}
-                  </span>
-                </LocalizedClientLink>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
+export { default } from "../shoppable-gallery"
+export type { ShoppableLook } from "../shoppable-gallery"

package/src/home/components/category-pills/index.tsx

@@ -1,72 +1,154 @@
 "use client"
 
+import { useCallback, useRef, useState, useEffect } from "react"
 import Image from "next/image"
 import { HttpTypes } from "@medusajs/types"
 import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
 import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
 import { useThemeSection } from "medusa-ui-common/providers"
+import {
+  formatCategoryLabel,
+  pickCategoryPillItems,
+  resolveCategoryImage,
+} from "./utils"
 
 type CategoryPillsProps = {
   categories: HttpTypes.StoreProductCategory[]
+  collections?: Array<Record<string, unknown>>
   classNames?: Partial<HomeThemeClassNames>
 }
 
+function ChevronIcon({ dir }: { dir: "left" | "right" }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      {dir === "left" ? (
+        <path d="M15 18l-6-6 6-6" />
+      ) : (
+        <path d="M9 18l6-6-6-6" />
+      )}
+    </svg>
+  )
+}
+
 export default function CategoryPills({
   categories,
+  collections,
   classNames: classNamesProp,
 }: CategoryPillsProps) {
   const cn = useThemeSection("home", classNamesProp)
+  const trackRef = useRef<HTMLDivElement>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(false)
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  const pills = pickCategoryPillItems(categories, collections)
 
-  const pills = (categories ?? [])
-    .filter((c) => c.name && c.handle)
-    .slice(0, 14)
+  const updateScrollState = useCallback(() => {
+    const el = trackRef.current
+    if (!el) return
+    const { scrollLeft, scrollWidth, clientWidth } = el
+    setCanScrollLeft(scrollLeft > 4)
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 4)
+    setHasOverflow(scrollWidth > clientWidth + 4)
+  }, [])
+
+  useEffect(() => {
+    updateScrollState()
+    const el = trackRef.current
+    if (!el) return
+    const ro = new ResizeObserver(updateScrollState)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [pills.length, updateScrollState])
+
+  const scrollBy = (direction: "left" | "right") => {
+    const el = trackRef.current
+    if (!el) return
+    const amount = Math.max(el.clientWidth * 0.55, 320)
+    el.scrollBy({
+      left: direction === "left" ? -amount : amount,
+      behavior: "smooth",
+    })
+  }
 
   if (pills.length === 0) return null
 
   return (
-    <section className={`w-full py-6 sm:py-8 ${cn.section}`}>
-      <div className="px-4 sm:px-6 md:px-8">
-        <div className="mx-auto max-w-[1360px]">
-          <div className="flex gap-3 sm:gap-4 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
-            {pills.map((category) => {
-              const thumb =
-                (category as { thumbnail?: string }).thumbnail ||
-                (category.metadata as { image?: string } | undefined)?.image
+    <section className={`w-full py-10 sm:py-12 md:py-14 ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="relative mx-auto max-w-[1360px]">
+          {hasOverflow ? (
+            <>
+              <button
+                type="button"
+                onClick={() => scrollBy("left")}
+                disabled={!canScrollLeft}
+                className={`absolute left-0 top-[72px] z-10 -translate-x-1/2 sm:top-[84px] md:top-[92px] disabled:opacity-35 ${cn.categoryPillNavButton}`}
+                aria-label="Scroll categories left"
+              >
+                <ChevronIcon dir="left" />
+              </button>
+              <button
+                type="button"
+                onClick={() => scrollBy("right")}
+                disabled={!canScrollRight}
+                className={`absolute right-0 top-[72px] z-10 translate-x-1/2 sm:top-[84px] md:top-[92px] disabled:opacity-35 ${cn.categoryPillNavButton}`}
+                aria-label="Scroll categories right"
+              >
+                <ChevronIcon dir="right" />
+              </button>
+            </>
+          ) : null}
 
-              return (
-                <LocalizedClientLink
-                  key={category.id}
-                  href={`/categories/${category.handle}`}
-                  className={`snap-start shrink-0 flex flex-col items-center gap-2 min-w-[88px] sm:min-w-[100px] group`}
-                >
-                  <div
-                    className={`w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden ring-2 ring-[var(--sf-color-border)] group-hover:ring-[var(--sf-color-primary)] transition-all ${cn.cardSurface}`}
-                  >
-                    {thumb ? (
-                      <Image
-                        src={thumb}
-                        alt={category.name ?? ""}
-                        width={80}
-                        height={80}
-                        className="w-full h-full object-cover"
-                        unoptimized
-                      />
-                    ) : (
-                      <div
-                        className={`w-full h-full flex items-center justify-center text-lg font-bold ${cn.imagePlaceholder} text-[var(--sf-color-primary)]`}
-                      >
-                        {category.name?.charAt(0)}
-                      </div>
-                    )}
-                  </div>
-                  <span
-                    className={`text-[11px] sm:text-xs text-center font-medium leading-tight max-w-[92px] ${cn.categoryTitle}`}
+          <div
+            ref={trackRef}
+            onScroll={updateScrollState}
+            className={cn.categoryPillScroll}
+          >
+            <div className={`flex w-max min-w-full ${cn.categoryPillTrack}`}>
+              {pills.map((category) => {
+                const thumb = resolveCategoryImage(category, collections)
+                const label = formatCategoryLabel(category.name ?? "")
+
+                return (
+                  <LocalizedClientLink
+                    key={category.id}
+                    href={`/categories/${category.handle}`}
+                    className={`group ${cn.categoryPillItem}`}
                   >
-                    {category.name}
-                  </span>
-                </LocalizedClientLink>
-              )
-            })}
+                    <div className={cn.categoryPillImageWrap}>
+                      {thumb ? (
+                        <Image
+                          src={thumb}
+                          alt={label}
+                          width={160}
+                          height={160}
+                          className={cn.categoryPillImage}
+                          unoptimized
+                        />
+                      ) : (
+                        <div
+                          className={`flex h-full w-full items-center justify-center text-2xl font-semibold sm:text-3xl ${cn.imagePlaceholder} text-[var(--sf-color-primary)]`}
+                        >
+                          {label.charAt(0)}
+                        </div>
+                      )}
+                    </div>
+                    <span className={cn.categoryPillLabel}>{label}</span>
+                  </LocalizedClientLink>
+                )
+              })}
+            </div>
           </div>
         </div>
       </div>

package/src/home/components/category-pills/utils.ts

@@ -0,0 +1,132 @@
+import { HttpTypes } from "@medusajs/types"
+
+type CategoryMetadata = {
+  category_image?: string
+  image?: string
+  thumbnail?: string
+}
+
+type CollectionMetadata = {
+  image?: string
+  thumbnail?: string
+  category_image?: string
+}
+
+function normalizeKey(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/&/g, "and")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+}
+
+export function formatCategoryLabel(name: string | undefined): string {
+  if (!name) return ""
+  const trimmed = name.trim()
+  if (!trimmed) return ""
+  if (trimmed === trimmed.toUpperCase() && /[A-Z]/.test(trimmed)) {
+    return trimmed
+      .toLowerCase()
+      .split(/\s+/)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  }
+  return trimmed
+}
+
+function collectionImageForCategory(
+  collections: Array<Record<string, unknown>> | undefined,
+  category: HttpTypes.StoreProductCategory
+): string | null {
+  if (!collections?.length) return null
+
+  const handleKey = category.handle ? normalizeKey(category.handle) : ""
+  const nameKey = category.name ? normalizeKey(category.name) : ""
+
+  for (const entry of collections) {
+    const meta = (entry.metadata as CollectionMetadata | undefined) ?? {}
+    const image = meta.category_image || meta.image || meta.thumbnail
+    if (!image) continue
+
+    const cHandle = (entry.handle as string | undefined) ?? ""
+    const cTitle = (entry.title as string | undefined) ?? ""
+    const handleMatch = handleKey && normalizeKey(cHandle) === handleKey
+    const titleMatch = nameKey && normalizeKey(cTitle) === nameKey
+
+    if (handleMatch || titleMatch) return image
+  }
+
+  return null
+}
+
+function imageFromCategoryRecord(
+  category: HttpTypes.StoreProductCategory
+): string | null {
+  const meta = (category.metadata as CategoryMetadata | undefined) ?? {}
+  return (
+    meta.category_image ||
+    meta.image ||
+    meta.thumbnail ||
+    (category as { thumbnail?: string }).thumbnail ||
+    null
+  )
+}
+
+export function resolveCategoryImage(
+  category: HttpTypes.StoreProductCategory,
+  collections?: Array<Record<string, unknown>>
+): string | null {
+  const fromCategory = imageFromCategoryRecord(category)
+  if (fromCategory) return fromCategory
+
+  const parent = (
+    category as HttpTypes.StoreProductCategory & {
+      parent_category?: HttpTypes.StoreProductCategory;
+    }
+  ).parent_category
+  if (parent) {
+    const fromParent = imageFromCategoryRecord(parent)
+    if (fromParent) return fromParent
+  }
+
+  return collectionImageForCategory(collections, category)
+}
+
+export function hasCategoryImage(
+  category: HttpTypes.StoreProductCategory,
+  collections?: Array<Record<string, unknown>>
+): boolean {
+  return Boolean(resolveCategoryImage(category, collections))
+}
+
+export function pickCategoryPillItems(
+  categories: HttpTypes.StoreProductCategory[],
+  collections?: Array<Record<string, unknown>>,
+  limit = 12
+): HttpTypes.StoreProductCategory[] {
+  const valid = (categories ?? []).filter((c) => c.name && c.handle)
+  const withImage = valid.filter((c) => hasCategoryImage(c, collections))
+  const topLevel = valid.filter((c) => !c.parent_category_id)
+  const topLevelWithImage = withImage.filter((c) => !c.parent_category_id)
+
+  let pool = valid
+  if (withImage.length >= 4) {
+    pool =
+      topLevelWithImage.length >= 4
+        ? topLevelWithImage
+        : withImage
+  } else if (topLevel.length >= 4) {
+    pool = topLevel
+  }
+
+  return [...pool]
+    .sort(
+      (a, b) =>
+        Number(hasCategoryImage(b, collections)) -
+          Number(hasCategoryImage(a, collections)) ||
+        Number(!b.parent_category_id) - Number(!a.parent_category_id) ||
+        (a.name ?? "").localeCompare(b.name ?? "")
+    )
+    .slice(0, limit)
+}