@pradip1995/segment-powerhouse-shop 0.1.1 → 0.1.3

package/src/shop.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useMemo, useState, type FormEvent } from "react"
+import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from "react"
 import { useRouter } from "next/navigation"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import ShopProductCard from "./product-card"
@@ -87,6 +87,23 @@ function buildParams(props: PowerhouseShopProps, extras: Record<string, string |
   return params
 }
 
+function FilterIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M4 6h16M7 12h10M10 18h4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square" />
+    </svg>
+  )
+}
+
+function SortCaret() {
+  return (
+    <svg className="powerhouse-shop__sort-caret" width="10" height="6" viewBox="0 0 8 6" fill="none" aria-hidden>
+      <path d="M4 4.5L7 1.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" />
+      <path d="M4 4.5L1 1.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" />
+    </svg>
+  )
+}
+
 function GridIcon() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden>
@@ -157,6 +174,71 @@ function ActiveFilters({
   )
 }
 
+function colorSwatch(value?: string, label?: string) {
+  const raw = (value || label || "").trim()
+  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(raw)) return raw
+  if (/^(rgb|hsl)a?\(/i.test(raw)) return raw
+  const named = raw.toLowerCase().replace(/[\s_-]+/g, "")
+  const map: Record<string, string> = {
+    black: "#111111",
+    white: "#ffffff",
+    red: "#c62828",
+    blue: "#1565c0",
+    green: "#2e7d32",
+    yellow: "#f1c40f",
+    pink: "#e91e63",
+    purple: "#6a1b9a",
+    orange: "#ef6c00",
+    brown: "#6d4c41",
+    grey: "#9e9e9e",
+    gray: "#9e9e9e",
+    gold: "#c9a86c",
+    beige: "#d7ccc8",
+    navy: "#1a237e",
+    maroon: "#7b1e3a",
+  }
+  return map[named] || null
+}
+
+function CloseIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M5 5L19 19M19 5L5 19" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square" />
+    </svg>
+  )
+}
+
+function FilterSection({
+  id,
+  title,
+  children,
+}: {
+  id: string
+  title: string
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(true)
+  return (
+    <div className={`powerhouse-shop__filter${open ? " is-open" : ""}`}>
+      <button
+        type="button"
+        className="powerhouse-shop__filter-toggle"
+        aria-expanded={open}
+        aria-controls={`filter-${id}`}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span>{title}</span>
+        <span className="powerhouse-shop__filter-icon" aria-hidden>
+          {open ? "−" : "+"}
+        </span>
+      </button>
+      <div id={`filter-${id}`} className="powerhouse-shop__filter-body" hidden={!open}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
 const VIEW_STORAGE_KEY = "powerhouse-shop-view"
 
 function paginationItems(current: number, total: number) {
@@ -197,6 +279,19 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
     setView(next)
   }, [])
 
+  useEffect(() => {
+    document.documentElement.classList.toggle("powerhouse-filters-open", filtersOpen)
+    if (!filtersOpen) return undefined
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setFiltersOpen(false)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => {
+      window.removeEventListener("keydown", onKey)
+      document.documentElement.classList.remove("powerhouse-filters-open")
+    }
+  }, [filtersOpen])
+
   const categories = (props.categories ?? []).filter((item) => item.id && (item.name || item.handle))
   const collections = (props.collections ?? []).filter((item) => item.id && (item.title || item.handle))
   const types = props.typeOptions?.filter((item) => item.value && item.label) ?? []
@@ -307,120 +402,142 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
         <aside className="powerhouse-shop__sidebar" aria-label="Filters">
           <div className="powerhouse-shop__sidebar-head">
             <h2>Filters</h2>
-            <button type="button" className="powerhouse-shop__close" onClick={() => setFiltersOpen(false)}>
-              Close
+            <button
+              type="button"
+              className="powerhouse-shop__close"
+              aria-label="Close filters"
+              onClick={() => setFiltersOpen(false)}
+            >
+              <CloseIcon />
             </button>
           </div>
 
-          <ActiveFilters filters={applied} clearHref={clearHref} countryCode={countryCode} />
-
-          {categories.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Product type</h3>
-              <ul>
-                {categories.map((item) => {
-                  const value = item.id
-                  const selected = activeCategory === value || activeCategory === item.handle
-                  return (
-                    <li key={value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "category", value, selected ? value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.name || item.handle}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          {collections.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Collection</h3>
-              <ul>
-                {collections.map((item) => {
-                  const value = item.id
-                  const selected = activeCollection === value || activeCollection === item.handle
-                  return (
-                    <li key={value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "collection", value, selected ? value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.title || item.handle}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          {types.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Type</h3>
-              <ul>
-                {types.map((item) => {
-                  const selected = activeType === item.value
-                  return (
-                    <li key={item.value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "type", item.value, selected ? item.value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.label}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          {colors.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Colors</h3>
-              <ul>
-                {colors.map((item) => {
-                  const selected = activeColor === item.value
-                  return (
-                    <li key={item.value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "color", item.value, selected ? item.value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.label}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          <div className="powerhouse-shop__filter">
-            <h3>Price</h3>
-            <form className="powerhouse-shop__price-form" onSubmit={handlePrice}>
-              <label>
-                <span>From</span>
-                <input name="min_price" type="number" min={0} defaultValue={props.minPrice || ""} inputMode="decimal" />
-              </label>
-              <label>
-                <span>To</span>
-                <input name="max_price" type="number" min={0} defaultValue={props.maxPrice || ""} inputMode="decimal" />
-              </label>
-              <button type="submit">Apply</button>
-            </form>
+          <div className="powerhouse-shop__sidebar-body">
+            <ActiveFilters filters={applied} clearHref={clearHref} countryCode={countryCode} />
+
+            {categories.length ? (
+              <FilterSection id="product-type" title="Product type">
+                <ul>
+                  {categories.map((item) => {
+                    const value = item.id
+                    const selected = activeCategory === value || activeCategory === item.handle
+                    return (
+                      <li key={value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "category", value, selected ? value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                        >
+                          <span className="powerhouse-shop__check" aria-hidden />
+                          {item.name || item.handle}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            {collections.length ? (
+              <FilterSection id="collection" title="Collection">
+                <ul>
+                  {collections.map((item) => {
+                    const value = item.id
+                    const selected = activeCollection === value || activeCollection === item.handle
+                    return (
+                      <li key={value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "collection", value, selected ? value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                        >
+                          <span className="powerhouse-shop__check" aria-hidden />
+                          {item.title || item.handle}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            {types.length ? (
+              <FilterSection id="type" title="Type">
+                <ul>
+                  {types.map((item) => {
+                    const selected = activeType === item.value
+                    return (
+                      <li key={item.value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "type", item.value, selected ? item.value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                        >
+                          <span className="powerhouse-shop__check" aria-hidden />
+                          {item.label}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            {colors.length ? (
+              <FilterSection id="colors" title="Colors">
+                <ul className="powerhouse-shop__swatches">
+                  {colors.map((item) => {
+                    const selected = activeColor === item.value
+                    const swatch = colorSwatch(item.value, item.label)
+                    return (
+                      <li key={item.value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "color", item.value, selected ? item.value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                          aria-label={item.label}
+                        >
+                          {swatch ? (
+                            <span className="powerhouse-shop__swatch" style={{ background: swatch }} aria-hidden />
+                          ) : (
+                            <span className="powerhouse-shop__check" aria-hidden />
+                          )}
+                          {swatch ? <span className="sr-only">{item.label}</span> : item.label}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            <FilterSection id="price" title="Price">
+              <form className="powerhouse-shop__price-form" onSubmit={handlePrice}>
+                <label className="powerhouse-shop__price-field">
+                  <span>₹</span>
+                  <input
+                    name="min_price"
+                    type="number"
+                    min={0}
+                    defaultValue={props.minPrice || ""}
+                    inputMode="decimal"
+                    placeholder="From"
+                  />
+                </label>
+                <label className="powerhouse-shop__price-field">
+                  <span>₹</span>
+                  <input
+                    name="max_price"
+                    type="number"
+                    min={0}
+                    defaultValue={props.maxPrice || ""}
+                    inputMode="decimal"
+                    placeholder="To"
+                  />
+                </label>
+                <button type="submit">Apply</button>
+              </form>
+            </FilterSection>
           </div>
         </aside>
 
@@ -446,41 +563,48 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
           )}
 
           <div className="powerhouse-shop__utils">
-            <button type="button" className="powerhouse-shop__filters-btn" onClick={() => setFiltersOpen(true)}>
-              {applied.length ? `Filters (${applied.length})` : "Filters"}
-            </button>
-            <div className="powerhouse-shop__utils-right">
+            <div className="powerhouse-shop__utils-left">
+              <button type="button" className="powerhouse-shop__filters-btn" onClick={() => setFiltersOpen(true)}>
+                <FilterIcon />
+                {applied.length ? `Filters (${applied.length})` : "Filters"}
+              </button>
               <label className="powerhouse-shop__sort">
-                <span className="powerhouse-shop__utils-label">Sort</span>
-                <select value={sortBy} onChange={(event) => handleSort(event.target.value)} aria-label="Sort products">
-                  {SORT_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
+                <span className="powerhouse-shop__utils-label">Sort by</span>
+                <span className="powerhouse-shop__sort-control">
+                  <span className="powerhouse-shop__sort-value">
+                    {SORT_OPTIONS.find((option) => option.value === sortBy)?.label || "Featured"}
+                  </span>
+                  <SortCaret />
+                  <select value={sortBy} onChange={(event) => handleSort(event.target.value)} aria-label="Sort products">
+                    {SORT_OPTIONS.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </span>
               </label>
-              <div className="powerhouse-shop__view" role="group" aria-label="View as">
-                <span className="powerhouse-shop__utils-label">View as</span>
-                <button
-                  type="button"
-                  className={view === "grid" ? "is-active" : undefined}
-                  aria-label="Grid view"
-                  aria-pressed={view === "grid"}
-                  onClick={() => handleView("grid")}
-                >
-                  <GridIcon />
-                </button>
-                <button
-                  type="button"
-                  className={view === "list" ? "is-active" : undefined}
-                  aria-label="List view"
-                  aria-pressed={view === "list"}
-                  onClick={() => handleView("list")}
-                >
-                  <ListIcon />
-                </button>
-              </div>
+            </div>
+            <div className="powerhouse-shop__view" role="group" aria-label="View as">
+              <span className="powerhouse-shop__utils-label powerhouse-shop__view-label">View as</span>
+              <button
+                type="button"
+                className={view === "grid" ? "is-active" : undefined}
+                aria-label="Grid view"
+                aria-pressed={view === "grid"}
+                onClick={() => handleView("grid")}
+              >
+                <GridIcon />
+              </button>
+              <button
+                type="button"
+                className={view === "list" ? "is-active" : undefined}
+                aria-label="List view"
+                aria-pressed={view === "list"}
+                onClick={() => handleView("list")}
+              >
+                <ListIcon />
+              </button>
             </div>
           </div>
 
@@ -495,6 +619,7 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
                   key={product.id ?? product.handle ?? `product-${index}`}
                   product={product}
                   countryCode={countryCode}
+                  layout={view}
                 />
               ))}
             </div>