@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/category-list-section/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/data/section-templates/category-list-section/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);
+  }
+}

package/data/section-templates/category-list-section/global-types.ts

@@ -0,0 +1,13 @@
+// Auto-generated global type definitions for ikas code components.
+// This file is regenerated automatically — do not edit manually.
+
+/** Enum type: s3OODUmZpJ */
+export type AspectRatio = "Square" | "Portrait" | "Landscape" | "Video";
+/** Enum type: __breakpointsEnum__ */
+export type Breakpoints = "desktop";
+/** Enum type: Tkt3wfuJ5F */
+export type NumberOfColumns = "One" | "Two" | "Three" | "Four" | "Five";
+/** Enum type: GrylMqHxui */
+export type ObjectFit = "Fill" | "Cover" | "Contain";
+/** Enum type: 08UWYbbs0P */
+export type VerticalAlignment = "Top" | "Middle" | "Bottom";

package/data/section-templates/category-list-section/hooks/useColumnPreference.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from "preact/hooks";
+
+const COLUMNS_STORAGE_KEY = "kombos-product-list-columns";
+
+export function useColumnPreference() {
+  const [columns, setColumns] = useState<3 | 4>(4);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(COLUMNS_STORAGE_KEY);
+      if (stored === "3") setColumns(3);
+    } catch {}
+  }, []);
+
+  const toggleColumns = useCallback(() => {
+    setColumns((prev) => {
+      const next = prev === 4 ? 3 : 4;
+      try {
+        localStorage.setItem(COLUMNS_STORAGE_KEY, String(next));
+      } catch {}
+      return next;
+    });
+  }, []);
+
+  return { columns, toggleColumns };
+}

package/data/section-templates/category-list-section/hooks/useInfiniteScroll.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from "preact/hooks";
+import {
+  hasProductListNextPage,
+  getProductListNextPage,
+  IkasProductList,
+} from "@ikas/bp-storefront";
+
+interface Options {
+  isEnabled: boolean;
+  productList: IkasProductList | null | undefined;
+}
+
+export function useInfiniteScroll({ isEnabled, productList }: Options) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const isLoadingMoreRef = useRef(false);
+
+  useEffect(() => {
+    if (!isEnabled || !sentinelRef.current || !productList) return;
+
+    const sentinel = sentinelRef.current;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (
+          entries[0].isIntersecting &&
+          hasProductListNextPage(productList) &&
+          !isLoadingMoreRef.current
+        ) {
+          isLoadingMoreRef.current = true;
+          getProductListNextPage(productList).finally(() => {
+            isLoadingMoreRef.current = false;
+            setTimeout(() => {
+              if (sentinelRef.current) {
+                observer.unobserve(sentinelRef.current);
+                observer.observe(sentinelRef.current);
+              }
+            }, 200);
+          });
+        }
+      },
+      { rootMargin: "200px" },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [isEnabled, productList]);
+
+  return { sentinelRef };
+}

package/data/section-templates/category-list-section/hooks/usePageTracking.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "preact/hooks";
+import {
+  setProductListVisiblePage,
+  IkasProductList,
+} from "@ikas/bp-storefront";
+
+interface Options {
+  isEnabled: boolean;
+  productList: IkasProductList | null | undefined;
+  productCount: number;
+}
+
+export function usePageTracking({
+  isEnabled,
+  productList,
+  productCount,
+}: Options) {
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isEnabled || !gridRef.current || !productList) return;
+
+    const markers =
+      gridRef.current.querySelectorAll<HTMLElement>("[data-page]");
+    if (markers.length === 0) return;
+
+    const visiblePages = new Set<number>();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const page = Number((entry.target as HTMLElement).dataset.page);
+          if (entry.isIntersecting) {
+            visiblePages.add(page);
+          } else {
+            visiblePages.delete(page);
+          }
+        }
+
+        if (visiblePages.size > 0) {
+          const currentPage = Math.min(...visiblePages);
+
+          if (currentPage !== productList.infiniteScrollPage) {
+            setProductListVisiblePage(productList, currentPage);
+          }
+        }
+      },
+      { rootMargin: "0px 0px -50% 0px" },
+    );
+
+    markers.forEach((m) => observer.observe(m));
+    return () => observer.disconnect();
+  }, [isEnabled, productList, productCount]);
+
+  return { gridRef };
+}

package/data/section-templates/category-list-section/hooks/useScrollLock.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "preact/hooks";
+import { RefObject } from "preact";
+
+export function useScrollLock(
+  enabled: boolean = true,
+  skipCleanupRef?: RefObject<boolean>,
+) {
+  useEffect(() => {
+    if (!enabled) return;
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    return () => {
+      if (skipCleanupRef?.current) return;
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [enabled]);
+}

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

@@ -0,0 +1,240 @@
+{
+  "id": "{{PROJECT_ID}}-product-list",
+  "name": "CategoryList",
+  "type": "section",
+  "entry": "./src/components/CategoryList/index.tsx",
+  "styles": "./src/components/CategoryList/styles.css",
+  "props": [
+    {
+      "name": "productList",
+      "displayName": "Ürün Listesi",
+      "type": "PRODUCT_LIST",
+      "required": true,
+      "groupId": "data"
+    },
+    {
+      "name": "pageTitle",
+      "displayName": "Sayfa Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "groupId": "texts"
+    },
+    {
+      "name": "productCountText",
+      "displayName": "Ürün Sayısı Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ürün",
+      "groupId": "texts"
+    },
+    {
+      "name": "emptyMessage",
+      "displayName": "Boş Durum Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürün bulunamadı.",
+      "groupId": "texts"
+    },
+    {
+      "name": "searchPlaceholder",
+      "displayName": "Arama Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ara",
+      "groupId": "texts"
+    },
+    {
+      "name": "clearFiltersText",
+      "displayName": "Filtreleri Temizle Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Filtreleri Temizle",
+      "groupId": "texts"
+    },
+    {
+      "name": "addToCartText",
+      "displayName": "Sepete Ekle Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Ekle",
+      "groupId": "texts"
+    },
+    {
+      "name": "addedToCartText",
+      "displayName": "Sepete Eklendi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Eklendi",
+      "groupId": "texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Tükendi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tükendi",
+      "groupId": "texts"
+    },
+    {
+      "name": "showProductsText",
+      "displayName": "Ürünleri Göster Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ÜRÜNÜ GÖR",
+      "groupId": "texts"
+    },
+    {
+      "name": "filtersText",
+      "displayName": "Filtreler Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Filtreler",
+      "groupId": "texts"
+    },
+    {
+      "name": "homepageText",
+      "displayName": "Anasayfa Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Anasayfa",
+      "groupId": "texts"
+    },
+    {
+      "name": "badgeText",
+      "displayName": "Etiket Metni",
+      "type": "TEXT",
+      "required": false,
+      "groupId": "texts"
+    },
+    {
+      "name": "showFilters",
+      "displayName": "Filtreleri Göster",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "filters"
+    },
+    {
+      "name": "showSearch",
+      "displayName": "Aramayı Göster",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "filters"
+    },
+    {
+      "name": "aspectRatio",
+      "displayName": "Görsel En Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "image-settings",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "objectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "image-settings",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "isInfinity",
+      "displayName": "Sonsuz Kaydırma",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "pagination"
+    },
+    {
+      "name": "columnText",
+      "displayName": "Sütun Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sütun",
+      "groupId": "texts"
+    },
+    {
+      "name": "loadPrevPageText",
+      "displayName": "Önceki Sayfayı Yükle Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Önceki sayfayı yükle",
+      "groupId": "texts"
+    },
+    {
+      "name": "hideAddToCartButton",
+      "displayName": "Sepete Ekle Butonunu Gizle",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "card-settings"
+    },
+    {
+      "name": "components",
+      "displayName": "Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "privateVarMap": {
+        "product": {
+          "id": "pvm_1772808304776_3",
+          "typeId": "@ikas/bp-storefront-models-IkasProduct"
+        }
+      },
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-card-product-price",
+        "{{PROJECT_ID}}-card-product-variants",
+        "{{PROJECT_ID}}-card-product-name"
+      ]
+    },
+    {
+      "name": "hideBreadcrumb",
+      "displayName": "Breadcrumb'u Gizle",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "appearance"
+    },
+    {
+      "name": "isBrandPage",
+      "displayName": "Burası Marka Sayfası Mı?",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "data"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "data",
+      "name": "Veri",
+      "description": "Ürün listesi veri kaynağı"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Arka plan rengi, ürün kartı görsel oranı ve kaplama ayarları",
+      "children": [
+        {
+          "id": "image-settings",
+          "name": "Görsel Ayarları",
+          "description": "Ürün kartı görsel oranı ve sığdırma ayarları"
+        },
+        {
+          "id": "card-settings",
+          "name": "Ürün Kartı Ayarları",
+          "description": "Ürün kartı görünüm ayarları"
+        }
+      ]
+    },
+    {
+      "id": "filters",
+      "name": "Filtreler",
+      "description": "Ürün filtreleme ve arama özelliklerini açıp kapatma"
+    },
+    {
+      "id": "pagination",
+      "name": "Sayfalama",
+      "description": "Klasik sayfalama veya sonsuz kaydırma davranışı"
+    },
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Buton etiketleri, boş durum mesajları ve arayüz metinleri"
+    }
+  ]
+}