@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/category-list-section/components/FilterListValues/styles.css

@@ -0,0 +1,22 @@
+/* ===== Filter List Values ===== */
+
+.kombos-filter-list-values {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.kombos-filter-list-values__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.kombos-filter-list-values__label {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-filter-list-values__count {
+  color: var(--kombos-gray-400);
+}

package/data/section-templates/category-list-section/components/FilterRangeListValues/index.tsx

@@ -0,0 +1,50 @@
+import {
+  IkasProductList,
+  IkasProductFilter,
+  handleNumberRangeOptionClick,
+  getProductListCurrencySymbol,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  productList: IkasProductList;
+  filter: IkasProductFilter;
+  onFilterChange?: () => void;
+}
+
+const FilterRangeListValues = observer(function FilterRangeListValues({
+  productList,
+  filter,
+  onFilterChange,
+}: Props) {
+  const options = filter.numberRangeListOptions;
+  if (!options?.length) return null;
+
+  const suffix =
+    filter.type === "PRICE"
+      ? getProductListCurrencySymbol(productList)
+      : undefined;
+
+  return (
+    <div className="kombos-filter-range-list-values">
+      {options.map((option) => (
+        <button
+          key={`${option.from}-${option.to}`}
+          type="button"
+          className={cx("kombos-filter-range-list-values__item", "text-sm-regular", option.isSelected && "kombos-filter-range-list-values__item--active")}
+          onClick={() => {
+            handleNumberRangeOptionClick(productList, filter, option);
+            onFilterChange?.();
+          }}
+        >
+          {option.to
+            ? `${option.from} - ${option.to}${suffix ? ` ${suffix}` : ""}`
+            : `+ ${option.from}${suffix ? ` ${suffix}` : ""}`}
+        </button>
+      ))}
+    </div>
+  );
+});
+
+export default FilterRangeListValues;

package/data/section-templates/category-list-section/components/FilterRangeListValues/styles.css

@@ -0,0 +1,25 @@
+/* ===== Filter Range List Values ===== */
+
+.kombos-filter-range-list-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-filter-range-list-values__item {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  cursor: pointer;
+  color: var(--kombos-gray-700);
+}
+
+.kombos-filter-range-list-values__item:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-filter-range-list-values__item--active {
+  border-color: var(--kombos-gray-900);
+  color: var(--kombos-gray-900);
+}

package/data/section-templates/category-list-section/components/FilterRangeValues/index.tsx

@@ -0,0 +1,189 @@
+import { useState, useRef, useEffect, useCallback } from "preact/hooks";
+import { observer } from "@ikas/component-utils";
+import {
+  IkasProductList,
+  IkasProductFilter,
+  onNumberRangeFilterChange,
+  getProductListInitialData,
+  getProductListCurrencySymbol,
+} from "@ikas/bp-storefront";
+
+interface Props {
+  productList: IkasProductList;
+  filter: IkasProductFilter;
+  onFilterChange?: () => void;
+}
+
+const FilterRangeValues = observer(function FilterRangeValues({
+  productList,
+  filter,
+  onFilterChange,
+}: Props) {
+  const limit = filter.numberRangeLimit;
+  const range = filter.numberRange;
+
+  const minBound = limit?.from ?? 0;
+  const maxBound = limit?.to ?? 100;
+
+  const [localFrom, setLocalFrom] = useState(range?.from ?? minBound);
+  const [localTo, setLocalTo] = useState(range?.to ?? maxBound);
+  const [dragging, setDragging] = useState<"from" | "to" | null>(null);
+
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  // Sync local state when filter changes externally (e.g. clear all filters)
+  useEffect(() => {
+    if (!dragging) {
+      setLocalFrom(range?.from ?? minBound);
+      setLocalTo(range?.to ?? maxBound);
+    }
+  }, [range?.from, range?.to, minBound, maxBound]);
+
+  if (minBound === maxBound) return null;
+
+  const suffix =
+    filter.type === "DISCOUNT_RATIO"
+      ? "%"
+      : getProductListCurrencySymbol(productList);
+
+  const valueToPercent = (val: number) =>
+    ((val - minBound) / (maxBound - minBound)) * 100;
+
+  const percentToValue = (pct: number) =>
+    Math.round(minBound + (pct / 100) * (maxBound - minBound));
+
+  const clientXToPercent = (clientX: number) => {
+    const track = trackRef.current;
+    if (!track) return 0;
+    const rect = track.getBoundingClientRect();
+    const raw = ((clientX - rect.left) / rect.width) * 100;
+    return Math.max(0, Math.min(100, raw));
+  };
+
+  const applyFilter = useCallback(
+    (from: number, to: number) => {
+      onNumberRangeFilterChange(filter, { from, to });
+      getProductListInitialData(productList);
+      onFilterChange?.();
+    },
+    [filter, productList, onFilterChange],
+  );
+
+  const handlePointerDown = (handle: "from" | "to", e: PointerEvent) => {
+    e.preventDefault();
+    setDragging(handle);
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (handle: "from" | "to", e: PointerEvent) => {
+    if (dragging !== handle) return;
+    const pct = clientXToPercent(e.clientX);
+    const val = percentToValue(pct);
+
+    if (handle === "from") {
+      setLocalFrom(Math.min(val, localTo));
+    } else {
+      setLocalTo(Math.max(val, localFrom));
+    }
+  };
+
+  const handlePointerUp = (handle: "from" | "to") => {
+    if (dragging !== handle) return;
+    setDragging(null);
+    applyFilter(localFrom, localTo);
+  };
+
+  const handleTrackClick = (e: MouseEvent) => {
+    // Ignore clicks on handles
+    if ((e.target as HTMLElement).closest(".kombos-range-slider__handle"))
+      return;
+
+    const pct = clientXToPercent(e.clientX);
+    const val = percentToValue(pct);
+    const distFrom = Math.abs(val - localFrom);
+    const distTo = Math.abs(val - localTo);
+
+    let newFrom = localFrom;
+    let newTo = localTo;
+
+    if (distFrom <= distTo) {
+      newFrom = Math.min(val, localTo);
+      setLocalFrom(newFrom);
+    } else {
+      newTo = Math.max(val, localFrom);
+      setLocalTo(newTo);
+    }
+
+    applyFilter(newFrom, newTo);
+  };
+
+  const fromPct = valueToPercent(localFrom);
+  const toPct = valueToPercent(localTo);
+
+  return (
+    <div className="kombos-range-slider">
+      <div className="kombos-range-slider__values">
+        <span
+          className="kombos-range-slider__value-label text-xs-semibold"
+          style={{ left: `${fromPct}%` }}
+        >
+          {localFrom}
+        </span>
+        <span
+          className="kombos-range-slider__value-label text-xs-semibold"
+          style={{ left: `${toPct}%` }}
+        >
+          {localTo}
+        </span>
+      </div>
+
+      <div
+        ref={trackRef}
+        className="kombos-range-slider__track"
+        onClick={handleTrackClick}
+      >
+        <div
+          className="kombos-range-slider__fill"
+          style={{ left: `${fromPct}%`, right: `${100 - toPct}%` }}
+        />
+        <div
+          className="kombos-range-slider__handle"
+          role="slider"
+          aria-label="Minimum"
+          aria-valuemin={minBound}
+          aria-valuemax={maxBound}
+          aria-valuenow={localFrom}
+          tabIndex={0}
+          style={{ left: `${fromPct}%` }}
+          onPointerDown={(e) => handlePointerDown("from", e)}
+          onPointerMove={(e) => handlePointerMove("from", e)}
+          onPointerUp={() => handlePointerUp("from")}
+        />
+        <div
+          className="kombos-range-slider__handle"
+          role="slider"
+          aria-label="Maximum"
+          aria-valuemin={minBound}
+          aria-valuemax={maxBound}
+          aria-valuenow={localTo}
+          tabIndex={0}
+          style={{ left: `${toPct}%` }}
+          onPointerDown={(e) => handlePointerDown("to", e)}
+          onPointerMove={(e) => handlePointerMove("to", e)}
+          onPointerUp={() => handlePointerUp("to")}
+        />
+      </div>
+
+      <div className="kombos-range-slider__bounds">
+        <span className="kombos-range-slider__bound text-xs-regular">
+          {`${minBound} ${suffix}`}
+        </span>
+        <span className="kombos-range-slider__bound text-xs-regular">
+          {`${maxBound} ${suffix}`}
+        </span>
+      </div>
+    </div>
+  );
+});
+
+export default FilterRangeValues;

package/data/section-templates/category-list-section/components/FilterRangeValues/styles.css

@@ -0,0 +1,89 @@
+/* ===== Range Slider ===== */
+
+.kombos-range-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+}
+
+/* Value labels row */
+.kombos-range-slider__values {
+  position: relative;
+  height: 1rem;
+}
+
+.kombos-range-slider__value-label {
+  position: absolute;
+  transform: translateX(-50%);
+  color: var(--kombos-gray-900);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Track */
+.kombos-range-slider__track {
+  position: relative;
+  height: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.kombos-range-slider__track::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.25rem;
+  border-radius: 2px;
+  background: var(--kombos-gray-200);
+}
+
+/* Filled area between handles */
+.kombos-range-slider__fill {
+  position: absolute;
+  height: 0.25rem;
+  border-radius: 2px;
+  background: var(--kombos-gray-900);
+  pointer-events: none;
+}
+
+/* Drag handles */
+.kombos-range-slider__handle {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: var(--kombos-gray-900);
+  border: 2px solid var(--kombos-white);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transform: translateX(-50%);
+  cursor: grab;
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+}
+
+.kombos-range-slider__handle:active {
+  cursor: grabbing;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.kombos-range-slider__handle:focus-visible {
+  box-shadow: 0 0 0 3px rgba(20, 20, 26, 0.15);
+}
+
+/* Min/Max bound labels */
+.kombos-range-slider__bounds {
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% + 1rem);
+  margin-left: -0.5rem;
+}
+
+.kombos-range-slider__bound {
+  color: var(--kombos-gray-500);
+  user-select: none;
+}

package/data/section-templates/category-list-section/components/FilterSidebar/index.tsx

@@ -0,0 +1,92 @@
+import {
+  IkasProductList,
+  getProductListFilterCategories,
+  searchProductList,
+  clearProductListFilters,
+  hasProductListAppliedFilters,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Input from "../../../../sub-components/Input";
+import { MagnifyingGlass1SVG } from "../../../../sub-components/icons";
+import CollapsibleGroup from "../../../../sub-components/CollapsibleGroup";
+import FilterCategoryList from "../FilterCategoryList";
+import FilterGroupValues from "../FilterGroupValues";
+
+interface Props {
+  productList: IkasProductList;
+  searchPlaceholder: string;
+  clearFiltersText: string;
+  showSearch?: boolean;
+  onFilterChange?: () => void;
+  isBrandPage?: boolean;
+}
+
+const FilterSidebar = observer(function FilterSidebar({
+  productList,
+  searchPlaceholder,
+  clearFiltersText,
+  showSearch = true,
+  onFilterChange,
+  isBrandPage = false,
+}: Props) {
+  const filters = productList.filters ?? [];
+  const filterCategories = getProductListFilterCategories(productList);
+  const hasApplied = hasProductListAppliedFilters(productList);
+
+  const handleSearch = (keyword: string) => {
+    searchProductList(productList, keyword);
+  };
+
+  const handleClear = () => {
+    clearProductListFilters(productList);
+    onFilterChange?.();
+  };
+
+  return (
+    <aside className="kombos-filter-sidebar">
+      {showSearch && (
+        <div className="kombos-filter-sidebar__search">
+          <Input
+            leftIcon={<MagnifyingGlass1SVG />}
+            placeholder={searchPlaceholder}
+            value={productList.searchKeyword ?? ""}
+            onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}
+            size="xs"
+          />
+        </div>
+      )}
+
+      {filterCategories.length > 0 && (
+        <CollapsibleGroup title={productList.category?.name ?? ""} defaultOpen>
+          <FilterCategoryList
+            productList={productList}
+            categories={filterCategories}
+            isBrandPage={isBrandPage}
+          />
+        </CollapsibleGroup>
+      )}
+
+      {filters.map((filter) => (
+        <FilterGroupValues
+          key={filter.id}
+          productList={productList}
+          filter={filter}
+          showResultCount
+          onFilterChange={onFilterChange}
+        />
+      ))}
+
+      {hasApplied && (
+        <button
+          type="button"
+          className="kombos-filter-sidebar__clear text-sm-medium"
+          onClick={handleClear}
+        >
+          {clearFiltersText}
+        </button>
+      )}
+    </aside>
+  );
+});
+
+export default FilterSidebar;

package/data/section-templates/category-list-section/components/FilterSidebar/styles.css

@@ -0,0 +1,27 @@
+/* ===== Filter Sidebar ===== */
+.kombos-filter-sidebar {
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-filter-sidebar__search {
+  padding-bottom: 0.25rem;
+}
+
+/* Clear */
+.kombos-filter-sidebar__clear {
+  margin-top: 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-500);
+  text-decoration: underline;
+  text-align: left;
+}
+
+.kombos-filter-sidebar__clear:hover {
+  color: var(--kombos-gray-700);
+}

package/data/section-templates/category-list-section/components/FilterSwatchValues/index.tsx

@@ -0,0 +1,63 @@
+import {
+  IkasProductList,
+  IkasProductFilter,
+  IkasApplicableProductFilterValue,
+  handleFilterValueClick,
+  getIkasFilterThumbnailImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  productList: IkasProductList;
+  filter: IkasProductFilter;
+  values: IkasApplicableProductFilterValue[];
+  onFilterChange?: () => void;
+}
+
+const FilterSwatchValues = observer(function FilterSwatchValues({
+  productList,
+  filter,
+  values,
+  onFilterChange,
+}: Props) {
+  return (
+    <div className="kombos-filter-swatch-values">
+      {values.map((fv) => {
+        const thumbnail = getIkasFilterThumbnailImage(fv);
+        return (
+          <button
+            key={fv.name}
+            type="button"
+            className={cx("kombos-filter-swatch-values__item", "text-md-medium", fv.isSelected === true && "kombos-filter-swatch-values__item--active")}
+            onClick={() => {
+              handleFilterValueClick(productList, filter, fv);
+              onFilterChange?.();
+            }}
+            title={fv.name}
+          >
+            {thumbnail ? (
+              <img
+                src={getDefaultSrc(thumbnail)}
+                srcSet={createMediaSrcset(thumbnail)}
+                sizes="(max-width: 1024px) 100vw, 100px"
+                alt=""
+                className="kombos-filter-swatch-values__img"
+              />
+            ) : fv.colorCode ? (
+              <span
+                className="kombos-filter-swatch-values__color"
+                style={{ backgroundColor: fv.colorCode }}
+              />
+            ) : null}
+            <span>{fv.name}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+});
+
+export default FilterSwatchValues;

package/data/section-templates/category-list-section/components/FilterSwatchValues/styles.css

@@ -0,0 +1,48 @@
+/* ===== Filter Swatch Values ===== */
+
+.kombos-filter-swatch-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-filter-swatch-values__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.3125rem 0.6875rem;
+  border-radius: 6px;
+  border: 1px solid var(--kombos-gray-200);
+  background: var(--kombos-white);
+  cursor: pointer;
+  color: var(--kombos-gray-700);
+  transition: all 0.15s ease;
+}
+
+.kombos-filter-swatch-values__item:hover:not(.kombos-filter-swatch-values__item--active) {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-filter-swatch-values__item--active {
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-filter-swatch-values__img {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.kombos-filter-swatch-values__color {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-filter-swatch-values__item--active .kombos-filter-swatch-values__color {
+  border-color: var(--kombos-white);
+}