@ikas/component-cli 0.133.0 → 1.2.0

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

@@ -1,63 +0,0 @@
-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

@@ -1,48 +0,0 @@
-/* ===== 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

@@ -1,146 +0,0 @@
-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

@@ -1,133 +0,0 @@
-/* ===== 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);
-  }
-}