@ikas/component-cli 0.103.0 → 0.104.0

package/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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);
+}

package/templates/create-full/src/components/CategoryList/components/MobileFilterModal/index.tsx

@@ -0,0 +1,146 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+import { useScrollLock } from "../../../../hooks/useScrollLock";
+import {
+  IkasProductList,
+  getProductListFilterCategories,
+  clearProductListFilters,
+  hasProductListAppliedFilters,
+  getSelectedFilterValues,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../utils/cx";
+import { XSVG } from "../../../../sub-components/icons";
+import CollapsibleGroup from "../../../../sub-components/CollapsibleGroup";
+import FilterCategoryList from "../FilterCategoryList";
+import FilterGroupValues from "../FilterGroupValues";
+
+interface Props {
+  productList: IkasProductList;
+  isOpen: boolean;
+  onClose: () => void;
+  clearFiltersText: string;
+  showProductsText: string;
+  filtersText: string;
+  isBrandPage?: boolean;
+}
+
+const MobileFilterModal = observer(function MobileFilterModal({
+  productList,
+  isOpen,
+  onClose,
+  clearFiltersText,
+  showProductsText,
+  filtersText,
+  isBrandPage = false,
+}: Props) {
+  const [open, setOpen] = useState(false);
+
+  useScrollLock(isOpen);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    requestAnimationFrame(() => setOpen(true));
+    return () => setOpen(false);
+  }, [isOpen]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  const filters = productList.filters ?? [];
+  const filterCategories = getProductListFilterCategories(productList);
+  const hasApplied = hasProductListAppliedFilters(productList);
+  const selectedValues = getSelectedFilterValues(productList);
+  const activeFilterCount = selectedValues?.length ?? 0;
+  const totalProducts = productList.count ?? 0;
+
+  const handleClear = () => {
+    clearProductListFilters(productList);
+  };
+
+  const isLoading = productList.isLoading;
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cx(
+        "kombos-mobile-filter",
+        open && "kombos-mobile-filter--open",
+      )}
+    >
+      <div className="kombos-mobile-filter__backdrop" onClick={handleClose} />
+      <div className="kombos-mobile-filter__panel">
+        {/* Header */}
+        <div className="kombos-mobile-filter__header">
+          <span className="kombos-mobile-filter__title text-md-medium">
+            {filtersText}
+            {activeFilterCount > 0 && ` (${activeFilterCount})`}
+          </span>
+          <button
+            type="button"
+            className="kombos-mobile-filter__close"
+            onClick={handleClose}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        {/* Scrollable content */}
+        <div className="kombos-mobile-filter__content">
+          {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}
+            />
+          ))}
+        </div>
+
+        {/* Sticky footer */}
+        <div className="kombos-mobile-filter__footer">
+          {hasApplied && (
+            <div className="kombos-mobile-filter__clear-row">
+              <button
+                type="button"
+                className="kombos-mobile-filter__clear-btn text-xs-semibold"
+                onClick={handleClear}
+              >
+                {clearFiltersText}
+              </button>
+            </div>
+          )}
+          <button
+            type="button"
+            className="kombos-mobile-filter__show-btn text-sm-semibold"
+            onClick={handleClose}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <span className="kombos-mobile-filter__spinner" />
+            ) : (
+              `${totalProducts} ${showProductsText}`
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default MobileFilterModal;

package/templates/create-full/src/components/CategoryList/components/MobileFilterModal/styles.css

@@ -0,0 +1,133 @@
+/* ===== Mobile Filter Modal ===== */
+.kombos-mobile-filter {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--kombos-z-overlay);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.kombos-mobile-filter__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.kombos-mobile-filter--open .kombos-mobile-filter__backdrop {
+  opacity: 1;
+}
+
+.kombos-mobile-filter__panel {
+  position: relative;
+  width: 100%;
+  max-width: 25rem;
+  height: 100%;
+  background: var(--kombos-white);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+}
+
+.kombos-mobile-filter--open .kombos-mobile-filter__panel {
+  transform: translateX(0);
+}
+
+/* Header */
+.kombos-mobile-filter__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-mobile-filter__title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-mobile-filter__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: 1.5rem;
+  color: var(--kombos-gray-700);
+  display: flex;
+  align-items: center;
+}
+
+/* Content */
+.kombos-mobile-filter__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.25rem;
+}
+
+/* Footer */
+.kombos-mobile-filter__footer {
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-mobile-filter__clear-row {
+  display: flex;
+  align-items: center;
+  padding: 1rem 0.625rem;
+  background: var(--kombos-white);
+  border-top: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-mobile-filter__clear-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-400);
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+.kombos-mobile-filter__show-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 3.125rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border: none;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+
+.kombos-mobile-filter__show-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Spinner */
+.kombos-mobile-filter__spinner {
+  display: inline-block;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: var(--kombos-white);
+  border-radius: 50%;
+  animation: kombos-mobile-filter-spin 0.6s linear infinite;
+}
+
+@keyframes kombos-mobile-filter-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}