@ikas/component-cli 0.133.0 → 1.2.0

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

@@ -1,114 +0,0 @@
-import { useMemo } from "preact/hooks";
-import {
-  IkasProductList,
-  IkasProductFilter,
-  getFilterDisplayedValues,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import CollapsibleGroup from "../../../../sub-components/CollapsibleGroup";
-import FilterBoxValues from "../FilterBoxValues";
-import FilterSwatchValues from "../FilterSwatchValues";
-import FilterListValues from "../FilterListValues";
-import FilterRangeListValues from "../FilterRangeListValues";
-import FilterRangeValues from "../FilterRangeValues";
-
-interface Props {
-  productList: IkasProductList;
-  filter: IkasProductFilter;
-  showResultCount?: boolean;
-  className?: string;
-  onFilterChange?: () => void;
-}
-
-const FilterGroupValues = observer(function FilterGroupValues({
-  productList,
-  filter,
-  showResultCount = false,
-  className,
-  onFilterChange,
-}: Props) {
-  const defaultOpen = useMemo(() => {
-    const settings = filter.settings;
-    if (!settings) return true;
-    const isDesktop =
-      typeof window !== "undefined" && window.innerWidth >= 1024;
-    return isDesktop
-      ? !settings.showCollapsedOnDesktop
-      : !settings.showCollapsedOnMobile;
-  }, [filter.id]);
-
-  const values = getFilterDisplayedValues(filter);
-  const hasRangeOptions = !!filter.numberRangeListOptions?.length;
-  const { displayType } = filter;
-
-  if (
-    values.length === 0 &&
-    !hasRangeOptions &&
-    displayType !== "NUMBER_RANGE"
-  ) {
-    return null;
-  }
-
-  const renderFilterContent = () => {
-    switch (displayType) {
-      case "BOX":
-        return (
-          <FilterBoxValues
-            productList={productList}
-            filter={filter}
-            values={values}
-            onFilterChange={onFilterChange}
-          />
-        );
-      case "SWATCH":
-        return (
-          <FilterSwatchValues
-            productList={productList}
-            filter={filter}
-            values={values}
-            onFilterChange={onFilterChange}
-          />
-        );
-      case "NUMBER_RANGE_LIST":
-        return (
-          <FilterRangeListValues
-            productList={productList}
-            filter={filter}
-            onFilterChange={onFilterChange}
-          />
-        );
-      case "NUMBER_RANGE":
-        return (
-          <FilterRangeValues
-            productList={productList}
-            filter={filter}
-            onFilterChange={onFilterChange}
-          />
-        );
-      case "LIST":
-        return (
-          <FilterListValues
-            productList={productList}
-            filter={filter}
-            values={values}
-            showResultCount={showResultCount}
-            onFilterChange={onFilterChange}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <CollapsibleGroup
-      title={filter.name}
-      defaultOpen={defaultOpen}
-      className={className}
-    >
-      {renderFilterContent()}
-    </CollapsibleGroup>
-  );
-});
-
-export default FilterGroupValues;

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

@@ -1 +0,0 @@
-/* ===== Filter Group Values ===== */

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

@@ -1,54 +0,0 @@
-import {
-  IkasProductList,
-  IkasProductFilter,
-  IkasApplicableProductFilterValue,
-  handleFilterValueClick,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Checkbox from "../../../../sub-components/Checkbox";
-
-interface Props {
-  productList: IkasProductList;
-  filter: IkasProductFilter;
-  values: IkasApplicableProductFilterValue[];
-  showResultCount?: boolean;
-  onFilterChange?: () => void;
-}
-
-const FilterListValues = observer(function FilterListValues({
-  productList,
-  filter,
-  values,
-  showResultCount = false,
-  onFilterChange,
-}: Props) {
-  return (
-    <div className="kombos-filter-list-values">
-      {values.map((fv) => (
-        <div
-          key={fv.name}
-          className="kombos-filter-list-values__item"
-          onClick={() => {
-            handleFilterValueClick(productList, filter, fv);
-            onFilterChange?.();
-          }}
-        >
-          <Checkbox
-            checked={fv.isSelected === true}
-            aria-label={fv.name}
-          />
-          <span className="kombos-filter-list-values__label text-sm-regular">
-            {fv.name}
-          </span>
-          {showResultCount && fv.resultCount != null && (
-            <span className="kombos-filter-list-values__count text-xs-regular">
-              ({fv.resultCount})
-            </span>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-});
-
-export default FilterListValues;

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

@@ -1,22 +0,0 @@
-/* ===== 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/templates/create-full/src/components/CategoryList/components/FilterRangeListValues/index.tsx

@@ -1,50 +0,0 @@
-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/templates/create-full/src/components/CategoryList/components/FilterRangeListValues/styles.css

@@ -1,25 +0,0 @@
-/* ===== 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/templates/create-full/src/components/CategoryList/components/FilterRangeValues/index.tsx

@@ -1,189 +0,0 @@
-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/templates/create-full/src/components/CategoryList/components/FilterRangeValues/styles.css

@@ -1,89 +0,0 @@
-/* ===== 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/templates/create-full/src/components/CategoryList/components/FilterSidebar/index.tsx

@@ -1,92 +0,0 @@
-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/templates/create-full/src/components/CategoryList/components/FilterSidebar/styles.css

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