@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/category-list-section/children/CardProductName/styles.css

@@ -0,0 +1,22 @@
+.kombos-card-product-name {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.kombos-card-product-name__link {
+  display: block;
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  max-width: 100%;
+}
+
+.kombos-card-product-name__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-card-product-name__link--single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/data/section-templates/category-list-section/children/CardProductName/types.ts

@@ -0,0 +1,6 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  singleLineName?: boolean;
+}

package/data/section-templates/category-list-section/children/CardProductPrice/ikas-config-snippet.json

@@ -0,0 +1,15 @@
+{
+  "id": "{{PROJECT_ID}}-card-product-price",
+  "name": "CardProductPrice",
+  "type": "component",
+  "entry": "./src/components/CardProductPrice/index.tsx",
+  "styles": "./src/components/CardProductPrice/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/category-list-section/children/CardProductPrice/index.tsx

@@ -0,0 +1,30 @@
+import {
+  getSelectedProductVariant,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantFormattedSellPrice,
+  hasProductVariantDiscount,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function CardProductPrice({ product }: Props) {
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const hasDiscount = hasProductVariantDiscount(selectedVariant);
+
+  return (
+    <div className="kombos-card-product-price">
+      <span className="kombos-card-product-price__current text-sm-medium sm:text-md-medium md:text-xl-medium">
+        {getProductVariantFormattedFinalPrice(selectedVariant)}
+      </span>
+      {hasDiscount && (
+        <span className="kombos-card-product-price__old text-xs-regular-strike sm:text-sm-regular-strike md:text-md-regular-strike">
+          {getProductVariantFormattedSellPrice(selectedVariant)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default CardProductPrice;

package/data/section-templates/category-list-section/children/CardProductPrice/styles.css

@@ -0,0 +1,13 @@
+.kombos-card-product-price {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.kombos-card-product-price__current {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-card-product-price__old {
+  color: var(--kombos-gray-500);
+}

package/data/section-templates/category-list-section/children/CardProductPrice/types.ts

@@ -0,0 +1,5 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+}

package/data/section-templates/category-list-section/children/CardProductVariants/ikas-config-snippet.json

@@ -0,0 +1,15 @@
+{
+  "id": "{{PROJECT_ID}}-card-product-variants",
+  "name": "CardProductVariants",
+  "type": "component",
+  "entry": "./src/components/CardProductVariants/index.tsx",
+  "styles": "./src/components/CardProductVariants/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/category-list-section/children/CardProductVariants/index.tsx

@@ -0,0 +1,10 @@
+import { Props } from "./types";
+import VariantBadge from "../../sub-components/VariantBadge";
+
+export function CardProductVariants({ product }: Props) {
+  if (!product) return null;
+
+  return <VariantBadge product={product} size="s" scrollable disableRoute />;
+}
+
+export default CardProductVariants;

package/data/section-templates/category-list-section/children/CardProductVariants/styles.css

@@ -0,0 +1 @@
+/* CardProductVariants — styles handled by VariantBadge sub-component */

package/data/section-templates/category-list-section/children/CardProductVariants/types.ts

@@ -0,0 +1,5 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+}

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

@@ -0,0 +1,129 @@
+import { observer } from "@ikas/component-utils";
+import Select from "../../../../sub-components/Select";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+import {
+  SlidersHorizontalSVG,
+  Column3SVG,
+  Column4SVG,
+  MagnifyingGlass1SVG,
+} from "../../../../sub-components/icons";
+
+interface Props {
+  pageTitle: string;
+  productCount: number;
+  productCountText: string;
+  sortOptions: { label: string; value: string }[];
+  selectedSortValue: string;
+  onSort: (e: Event) => void;
+  columns: 3 | 4;
+  onToggleColumns: () => void;
+  columnText: string;
+  hasVisibleFilters: boolean;
+  selectedFiltersCount: number;
+  filtersText: string;
+  onOpenFilterModal: () => void;
+  showSearch: boolean;
+  searchPlaceholder: string;
+  searchKeyword: string;
+  onSearch: (e: Event) => void;
+}
+
+const CategoryListControls = observer(function CategoryListControls({
+  pageTitle,
+  productCount,
+  productCountText,
+  sortOptions,
+  selectedSortValue,
+  onSort,
+  columns,
+  onToggleColumns,
+  columnText,
+  hasVisibleFilters,
+  selectedFiltersCount,
+  filtersText,
+  onOpenFilterModal,
+  showSearch,
+  searchPlaceholder,
+  searchKeyword,
+  onSearch,
+}: Props) {
+  return (
+    <div className="kombos-category-list-controls">
+      {pageTitle && (
+        <h1 className="kombos-category-list-controls__title display-xs-medium md:display-sm-medium">
+          {pageTitle}
+          {productCount > 0 && (
+            <span className="kombos-category-list-controls__count text-md-regular">
+              ({productCount} {productCountText})
+            </span>
+          )}
+        </h1>
+      )}
+
+      {sortOptions.length > 0 && (
+        <div className="kombos-category-list-controls__sort-wrap">
+          <Select
+            size="xs"
+            options={sortOptions}
+            value={selectedSortValue}
+            onChange={onSort}
+            aria-label="Sort by"
+          />
+        </div>
+      )}
+
+      <Button
+        variant="secondary"
+        size="xs"
+        className="kombos-category-list-controls__col-btn"
+        onClick={onToggleColumns}
+        aria-label={`${columns === 4 ? 3 : 4} sütun`}
+        icon={columns === 3 ? <Column3SVG /> : <Column4SVG />}
+      >
+        {columnText}
+      </Button>
+
+      <div className="kombos-category-list-controls__mobile-controls">
+        {sortOptions.length > 0 && (
+          <div className="kombos-category-list-controls__mobile-sort-wrap">
+            <Select
+              size="xs"
+              className="kombos-category-list-controls__mobile-sort-select"
+              options={sortOptions}
+              value={selectedSortValue}
+              onChange={onSort}
+              aria-label="Sort by"
+            />
+          </div>
+        )}
+        {hasVisibleFilters && (
+          <Button
+            variant="secondary"
+            size="xs"
+            className="kombos-category-list-controls__filter-btn"
+            onClick={onOpenFilterModal}
+            icon={<SlidersHorizontalSVG />}
+          >
+            {filtersText}
+            {selectedFiltersCount > 0 && ` (${selectedFiltersCount})`}
+          </Button>
+        )}
+      </div>
+
+      {showSearch && (
+        <div className="kombos-category-list-controls__mobile-search">
+          <Input
+            leftIcon={<MagnifyingGlass1SVG />}
+            placeholder={searchPlaceholder}
+            value={searchKeyword}
+            onInput={onSearch}
+            size="xs"
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default CategoryListControls;

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

@@ -0,0 +1,99 @@
+/* ===== CategoryListControls ===== */
+
+.kombos-category-list-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  padding-top: 1rem;
+}
+
+.kombos-category-list-controls__title {
+  color: var(--kombos-gray-900);
+  margin: 0 0 0.75rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.kombos-category-list-controls__count {
+  color: var(--kombos-gray-500);
+  margin-left: 0.5rem;
+  margin-top: 0.375rem;
+}
+
+/* Desktop sort — hidden on mobile */
+.kombos-category-list-controls__sort-wrap {
+  display: none;
+}
+
+/* Column toggle — hidden on mobile */
+.kombos-category-list-controls__col-btn {
+  display: none;
+}
+
+/* Mobile controls */
+.kombos-category-list-controls__mobile-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.kombos-category-list-controls__mobile-sort-wrap {
+}
+
+.kombos-category-list-controls__mobile-sort-select {
+  width: 100%;
+}
+
+.kombos-category-list-controls__filter-btn {
+  flex: 1;
+}
+
+.kombos-category-list-controls__filter-btn .kombos-icon {
+  font-size: 1rem;
+}
+
+/* Mobile search — visible on mobile, hidden on desktop */
+.kombos-category-list-controls__mobile-search {
+  width: 100%;
+  margin-top: 0.75rem;
+}
+
+/* ===== Desktop (>= 1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-category-list-controls {
+    padding-top: 1.5rem;
+  }
+
+  /* Title inline on the left */
+  .kombos-category-list-controls__title {
+    width: auto;
+    margin: 0;
+    margin-right: auto;
+  }
+
+  /* Show desktop sort, hide mobile controls */
+  .kombos-category-list-controls__sort-wrap {
+    display: block;
+  }
+
+  .kombos-category-list-controls__mobile-controls {
+    display: none;
+  }
+
+  .kombos-category-list-controls__mobile-search {
+    display: none;
+  }
+
+  /* Column toggle button */
+  .kombos-category-list-controls__col-btn {
+    display: flex;
+    margin-left: 0.5rem;
+  }
+
+  .kombos-category-list-controls__col-btn .kombos-icon {
+    font-size: 1.25rem;
+  }
+}

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

@@ -0,0 +1,42 @@
+import {
+  IkasProductList,
+  IkasProductFilter,
+  IkasApplicableProductFilterValue,
+  handleFilterValueClick,
+} 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 FilterBoxValues = observer(function FilterBoxValues({
+  productList,
+  filter,
+  values,
+  onFilterChange,
+}: Props) {
+  return (
+    <div className="kombos-filter-box-values">
+      {values.map((fv) => (
+        <button
+          key={fv.name}
+          type="button"
+          className={cx("kombos-filter-box-values__item", "text-md-medium", fv.isSelected === true && "kombos-filter-box-values__item--active")}
+          onClick={() => {
+            handleFilterValueClick(productList, filter, fv);
+            onFilterChange?.();
+          }}
+        >
+          {fv.name}
+        </button>
+      ))}
+    </div>
+  );
+});
+
+export default FilterBoxValues;

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

@@ -0,0 +1,27 @@
+/* ===== Filter Box Values ===== */
+
+.kombos-filter-box-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-filter-box-values__item {
+  padding: 0.3125rem 0.6875rem;
+  border-radius: 6px;
+  border: 1px solid var(--kombos-gray-200);
+  background: var(--kombos-white);
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.kombos-filter-box-values__item:hover:not(.kombos-filter-box-values__item--active) {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-filter-box-values__item--active {
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-color: var(--kombos-gray-900);
+}

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

@@ -0,0 +1,43 @@
+import {
+  IkasProductList,
+  IkasFilterCategory,
+  onFilterCategoryClick,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  productList: IkasProductList;
+  categories: IkasFilterCategory[];
+  className?: string;
+  onFilterChange?: () => void;
+  isBrandPage?: boolean;
+}
+
+const FilterCategoryList = observer(function FilterCategoryList({
+  productList,
+  categories,
+  className,
+  onFilterChange,
+  isBrandPage = false,
+}: Props) {
+  return (
+    <div className={cx("kombos-filter-category-list", className)}>
+      {categories.map((cat) => (
+        <button
+          key={cat.name}
+          type="button"
+          className="kombos-filter-category-list__link text-sm-medium"
+          onClick={() => {
+            onFilterCategoryClick(productList, cat, isBrandPage);
+            onFilterChange?.();
+          }}
+        >
+          {cat.name}
+        </button>
+      ))}
+    </div>
+  );
+});
+
+export default FilterCategoryList;

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

@@ -0,0 +1,20 @@
+/* ===== Filter Category List ===== */
+.kombos-filter-category-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-filter-category-list__link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+  color: var(--kombos-gray-700);
+  width: fit-content;
+}
+
+.kombos-filter-category-list__link:hover {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,114 @@
+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/data/section-templates/category-list-section/components/FilterGroupValues/styles.css

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

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

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