@pradip1995/segment-animation-shop-grid 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-animation-shop-grid",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -15,10 +15,6 @@
     ".": "./src/index.ts",
     "./manifest": "./src/manifest.ts"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/medusa-connector": "^0.2.0",
@@ -38,5 +34,9 @@
     "@types/react": "^19",
     "react": "19.0.3",
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
   }
 }

package/src/animation-shop-grid.css

@@ -1,6 +1,6 @@
 .animation-shop-grid {
   width: 100%;
-  padding: 2.5rem 1.5rem 4rem 1.5rem;
+  padding: 0 1.5rem 4rem 1.5rem;
   background-color: var(--page-bg, #ffffff);
   color: var(--text-color, #111111);
   font-family: inherit;
@@ -9,7 +9,7 @@
 
 @media (min-width: 1024px) {
   .animation-shop-grid {
-    padding: 3.5rem 3rem 6rem 3rem;
+    padding: 0 3rem 6rem 3rem;
   }
 }
 

package/src/animation-shop-grid.tsx

@@ -119,6 +119,20 @@ function matchLabel(
   return hit?.name || hit?.title || undefined
 }
 
+function formatSlugToTitle(slug?: string): string | undefined {
+  if (!slug) return undefined
+  if (slug.includes(",")) {
+    return slug
+      .split(",")
+      .map((s) => formatSlugToTitle(s))
+      .filter(Boolean)
+      .join(" & ")
+  }
+  return slug
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
@@ -135,7 +149,7 @@ const cardVariants = {
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
+    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const },
   },
 }
 
@@ -297,12 +311,23 @@ export default function AnimationShopGrid(props: {
 
   const activeCategory = paramValue(props.category)
   const activeCollection = paramValue(props.collection)
+  const activeGender = paramValue(props.gender)
+  const activeMaterial = paramValue(props.material)
+  const activeColor = paramValue(props.color)
+  const activeType = paramValue(props.type)
+
   const categoryLabel =
     matchLabel(activeCategory, props.categories || []) ||
-    (activeCategory ? "Category" : undefined)
+    formatSlugToTitle(activeCategory)
+
   const collectionLabel =
     matchLabel(activeCollection, props.collections || []) ||
-    (activeCollection ? "Collection" : undefined)
+    formatSlugToTitle(activeCollection)
+
+  const genderLabel = formatSlugToTitle(activeGender)
+  const materialLabel = formatSlugToTitle(activeMaterial)
+  const colorLabel = formatSlugToTitle(activeColor)
+  const typeLabel = formatSlugToTitle(activeType)
 
   const appliedFilters: { key: string; label: string; href: string }[] = []
   if (props.q) {
@@ -327,90 +352,120 @@ export default function AnimationShopGrid(props: {
     })
   }
 
+  const displayTitle = useMemo(() => {
+    if (categoryLabel) return categoryLabel
+    if (collectionLabel) return collectionLabel
+    if (props.q) return `Search: ${props.q}`
+    if (genderLabel) return `${genderLabel}'s Collection`
+    if (materialLabel) return materialLabel
+    if (colorLabel) return colorLabel
+    if (typeLabel) return typeLabel
+    if (sortBy === "bestsellers") return "Bestsellers"
+    if (!props.title || props.title.toLowerCase() === "all beauty" || props.title.toLowerCase() === "all products") {
+      return "ALL PRODUCTS"
+    }
+    return props.title
+  }, [categoryLabel, collectionLabel, props.q, genderLabel, materialLabel, colorLabel, typeLabel, sortBy, props.title])
+
+  const displaySubtitle = useMemo(() => {
+    if (categoryLabel) return `Explore our curated selection of ${categoryLabel.toLowerCase()}.`
+    if (collectionLabel) return `Discover the latest items in our ${collectionLabel.toLowerCase()} collection.`
+    if (props.q) return `Product results matching "${props.q}".`
+    if (sortBy === "bestsellers") return "Our most popular and highly-rated pieces."
+    if (genderLabel || materialLabel || colorLabel) return "Handpicked items filtered to your taste."
+    return "The latest additions to the lineup."
+  }, [categoryLabel, collectionLabel, props.q, sortBy, genderLabel, materialLabel, colorLabel])
+
+  const [showFilters, setShowFilters] = useState(true)
+
+  useEffect(() => {
+    const sidebar = document.querySelector(".store-page__sidebar") as HTMLElement | null
+    const mainCol = document.querySelector(".store-page__main") as HTMLElement | null
+    if (sidebar) {
+      sidebar.style.display = showFilters ? "" : "none"
+    }
+    if (mainCol) {
+      if (!showFilters) {
+        mainCol.classList.add("w-full", "col-span-full")
+      } else {
+        mainCol.classList.remove("w-full", "col-span-full")
+      }
+    }
+  }, [showFilters])
+
   return (
-    <section className="animation-shop-grid flex-1 min-w-0" aria-label="Product results">
+    <section className="animation-shop-grid flex-1 min-w-0 pt-0" aria-label="Product results">
+      {/* Simplified, Clean Hero Header */}
       <motion.header
-        className="animation-shop-grid__header"
-        initial={{ opacity: 0, y: -10 }}
+        className="w-full bg-[#FAF9F6] py-6 px-4 mb-4 flex flex-col justify-center items-center text-center border-b border-gray-100 rounded-sm"
+        initial={{ opacity: 0, y: -6 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
       >
-        <div className="animation-shop-grid__intro">
-          <p className="animation-shop-grid__eyebrow">{eyebrow}</p>
-          <h2 className="animation-shop-grid__title">{title}</h2>
-          {props.q ? (
-            <p className="animation-shop-grid__search">
-              Results for &ldquo;{props.q}&rdquo;
-            </p>
-          ) : null}
-          {totalCount > 0 ? (
-            <p className="animation-shop-grid__count">
-              Showing {showingCount} of {totalCount} {totalCount === 1 ? "product" : "products"}
-            </p>
-          ) : null}
-        </div>
+        <nav aria-label="Breadcrumb" className="text-[11px] text-gray-400 font-sans tracking-wide mb-1.5 uppercase">
+          <LocalizedLink href="/" className="hover:text-black transition-colors" countryCode={countryCode}>
+            Home
+          </LocalizedLink>
+          <span className="mx-2 text-gray-300">/</span>
+          <span className="text-gray-900 font-semibold tracking-wider">{displayTitle}</span>
+        </nav>
 
-        <div className="animation-shop-grid__sort" role="group" aria-label="Sort products">
-          {SORT_OPTIONS.map((opt) => {
-            const active = sortBy === opt.value
-            return (
-              <LocalizedLink
-                key={opt.value}
-                href={buildSortHref(storeSearchParams, opt.value)}
-                className={`animation-shop-grid__sort-pill${active ? " animation-shop-grid__sort-pill--active" : ""}`}
-                countryCode={countryCode}
-              >
-                {opt.label}
-              </LocalizedLink>
-            )
-          })}
-        </div>
+        <h1 className="text-xl sm:text-2xl font-normal tracking-widest text-[#111111] uppercase my-1">
+          {displayTitle}
+        </h1>
+
+        <p className="text-xs text-gray-500 font-normal tracking-wide max-w-sm m-0">
+          {displaySubtitle}
+        </p>
       </motion.header>
 
-      <AnimatePresence>
-        {appliedFilters.length > 0 ? (
-          <motion.div
-            className="animation-shop-grid__applied"
-            role="group"
-            aria-label="Applied filters"
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
+      {/* Filter Toolbar with Hide Filters Option */}
+      <div className="w-full flex flex-wrap items-center justify-between gap-3 mb-5 py-2.5 px-4 bg-white border border-gray-200/80 rounded-md shadow-2xs">
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setShowFilters(!showFilters)}
+            className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-800 hover:text-black transition-colors py-1 px-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded cursor-pointer"
           >
-            <span className="animation-shop-grid__applied-label">Filters</span>
-            <ul className="animation-shop-grid__applied-list">
+            <svg className="w-3.5 h-3.5 fill-none stroke-current stroke-[1.8]" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9m-9 12h9m-15-6h15M3 6h3m-3 12h3m3-6h3" />
+            </svg>
+            <span>{showFilters ? "Hide Filters" : "Show Filters"}</span>
+          </button>
+
+          {appliedFilters.length > 0 ? (
+            <div className="hidden sm:flex items-center gap-2">
+              <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Active:</span>
               {appliedFilters.map((filter) => (
-                <li key={filter.key}>
-                  <LocalizedLink
-                    href={filter.href}
-                    className="animation-shop-grid__applied-chip"
-                    countryCode={countryCode}
-                    aria-label={`Remove ${filter.label} filter`}
-                  >
-                    <span>{filter.label}</span>
-                    <span className="animation-shop-grid__applied-x" aria-hidden>
-                      ×
-                    </span>
-                  </LocalizedLink>
-                </li>
+                <LocalizedLink
+                  key={filter.key}
+                  href={filter.href}
+                  className="inline-flex items-center gap-1 text-xs font-medium bg-gray-100 hover:bg-gray-200 text-gray-900 px-2 py-0.5 rounded transition-colors"
+                  countryCode={countryCode}
+                >
+                  <span>{filter.label}</span>
+                  <span className="text-gray-500 hover:text-black">×</span>
+                </LocalizedLink>
               ))}
-            </ul>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex items-center gap-3 ml-auto">
+          <span className="text-xs text-gray-500 font-medium tracking-wide">
+            {showingCount} of {totalCount} {totalCount === 1 ? "Product" : "Products"}
+          </span>
+          {appliedFilters.length > 0 ? (
             <LocalizedLink
               href={buildClearAllFiltersHref(storeSearchParams)}
-              className="animation-shop-grid__applied-clear"
+              className="text-xs font-bold text-red-600 hover:text-red-700 uppercase tracking-wider underline ml-2"
               countryCode={countryCode}
             >
-              Clear all
+              Clear All
             </LocalizedLink>
-          </motion.div>
-        ) : null}
-      </AnimatePresence>
-
-      {totalCount > 0 && sortBy !== "bestsellers" ? (
-        <div className="animation-shop-grid__progress" aria-hidden>
-          <span className="animation-shop-grid__progress-fill" style={{ width: `${progressPct}%` }} />
+          ) : null}
         </div>
-      ) : null}
+      </div>
 
       {items.length === 0 ? (
         <motion.div
@@ -437,7 +492,7 @@ export default function AnimationShopGrid(props: {
                 <ProductCard
                   product={product}
                   countryCode={countryCode}
-                  variant={props.productCardVariant ?? "motion"}
+                  variant={props.productCardVariant ?? "shop"}
                 />
               </motion.div>
             ))}
@@ -451,6 +506,46 @@ export default function AnimationShopGrid(props: {
               </div>
             ) : null}
 
+            {/* Managed Pagination: Only show page buttons if totalPages > 1 */}
+            {Math.ceil(totalCount / PAGE_SIZE) > 1 ? (
+              <div className="animation-shop-grid__pagination flex items-center justify-center gap-2 mt-8 mb-2">
+                {Array.from({ length: Math.ceil(totalCount / PAGE_SIZE) }, (_, i) => i + 1).map((pageNum) => (
+                  <button
+                    key={pageNum}
+                    type="button"
+                    onClick={() => {
+                      if (pageNum > currentPage && hasMore) {
+                        loadNextPage()
+                      }
+                    }}
+                    className={`w-8 h-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all ${
+                      currentPage === pageNum
+                        ? "bg-black text-white shadow-sm font-bold scale-105"
+                        : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-black"
+                    }`}
+                  >
+                    {pageNum}
+                  </button>
+                ))}
+                {hasMore && (
+                  <button
+                    type="button"
+                    onClick={loadNextPage}
+                    className="w-8 h-8 rounded-full bg-black hover:bg-gray-800 text-white flex items-center justify-center transition-all hover:scale-105 shadow-sm ml-1"
+                    aria-label="Next page"
+                  >
+                    <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
+                      <path
+                        fillRule="evenodd"
+                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            ) : null}
+
             {loadError ? (
               <div className="animation-shop-grid__error">
                 <p>{loadError}</p>
@@ -461,7 +556,7 @@ export default function AnimationShopGrid(props: {
             ) : null}
 
             {!hasMore && items.length > 0 ? (
-              <p className="animation-shop-grid__end">
+              <p className="animation-shop-grid__end text-xs tracking-wider text-gray-500 uppercase font-medium mt-4">
                 You&apos;ve viewed all {totalCount} {totalCount === 1 ? "product" : "products"}
               </p>
             ) : null}

package/src/manifest.ts

@@ -3,7 +3,7 @@ import type { SegmentManifest } from "@pradip1995/plugin-sdk"
 const manifest: SegmentManifest = {
   id: "animation-shop-grid",
   type: "segment",
-  version: "0.1.0",
+  version: "0.1.1",
   compatibleFramework: ["^1.0.0"],
   dataKey: "store",
 }