@ikas/code-components-mcp 0.105.0 → 0.106.0

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

@@ -0,0 +1,333 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
+import {
+  IkasProductListSortType,
+  getProductListSortOptions,
+  hasProductListNextPage,
+  setSortType,
+  getCategoryPath,
+  getIkasCategoryHref,
+  getFilterDisplayedValues,
+  isStockFilter,
+  hasProductListPrevPage,
+  getProductListPrevPage,
+  getProductListPage,
+  setProductListVisiblePage,
+  searchProductList,
+  getProductOptionSet,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import ProductCard from "../../sub-components/ProductCard";
+import Breadcrumb from "../../sub-components/Breadcrumb";
+import type { BreadcrumbItem } from "../../sub-components/Breadcrumb";
+import Button from "../../sub-components/Button";
+import SpinnerIcon from "../../sub-components/SpinnerIcon";
+import CategoryListControls from "./components/CategoryListControls";
+import FilterSidebar from "./components/FilterSidebar";
+import MobileFilterModal from "./components/MobileFilterModal";
+import Pagination from "../../sub-components/Pagination";
+import { useColumnPreference } from "../../hooks/useColumnPreference";
+import { useInfiniteScroll } from "../../hooks/useInfiniteScroll";
+import { usePageTracking } from "../../hooks/usePageTracking";
+
+export function CategoryList(props: Props) {
+  const {
+    productList,
+    emptyMessage = "Ürün bulunamadı.",
+    searchPlaceholder = "Ara",
+    clearFiltersText = "Filtreleri Temizle",
+    addToCartText = "Sepete Ekle",
+    addedToCartText = "Eklendi",
+    outOfStockText = "Tükendi",
+    showProductsText = "ÜRÜNÜ GÖR",
+    filtersText = "Filtreler",
+    columnText = "Sütun",
+    badgeText,
+    homepageText = "Anasayfa",
+    showFilters = false,
+    showSearch = false,
+    aspectRatio,
+    objectFit,
+    isInfinity = false,
+    loadPrevPageText = "Önceki sayfayı yükle",
+    pageTitle: pageTitleProp,
+    productCountText = "ürün",
+    hideAddToCartButton,
+    hideBreadcrumb = false,
+    isBrandPage = false,
+    components,
+  } = props;
+
+  const [filterModalOpen, setFilterModalOpen] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  const { columns, toggleColumns } = useColumnPreference();
+  const products = productList?.data ?? [];
+
+  const { sentinelRef } = useInfiniteScroll({
+    isEnabled: isInfinity,
+    productList,
+  });
+
+  const { gridRef } = usePageTracking({
+    isEnabled: isInfinity,
+    productList,
+    productCount: products.length,
+  });
+
+  useEffect(() => {
+    if (!productList) return;
+    const items = productList.data ?? [];
+    items.forEach((p) => {
+      if (!p.productOptionSet) getProductOptionSet(p);
+    });
+  }, [productList?.data?.length]);
+
+  const scrollToTop = useCallback(() => {
+    sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
+
+  const handleLoadPrevPage = useCallback(() => {
+    getProductListPrevPage(productList);
+    setProductListVisiblePage(productList, (productList.minPage ?? 1) - 1);
+    scrollToTop();
+  }, [productList, scrollToTop]);
+
+  const openFilterModal = useCallback(() => setFilterModalOpen(true), []);
+  const closeFilterModal = useCallback(() => setFilterModalOpen(false), []);
+
+  const handleSearch = useCallback(
+    (e: Event) => {
+      searchProductList(productList, (e.target as HTMLInputElement).value);
+    },
+    [productList],
+  );
+
+  const handleSort = useCallback(
+    (e: Event) => {
+      const value = (e.target as HTMLSelectElement).value;
+      setSortType(productList, value as IkasProductListSortType);
+    },
+    [productList],
+  );
+
+  const sortSelectOptions = useMemo(
+    () =>
+      getProductListSortOptions(productList).map((o) => ({
+        label: o.label,
+        value: o.value,
+      })),
+    [productList],
+  );
+
+  const hasVisibleFilters = useMemo(() => {
+    if (!showFilters) return false;
+    const hasFilterValues = productList?.filters?.some((filter) => {
+      const values = getFilterDisplayedValues(filter);
+      return values.length > 0 && !isStockFilter(filter);
+    });
+    const hasCategoryFilters =
+      productList?.filterCategories && productList.filterCategories.length > 0;
+    return hasFilterValues || hasCategoryFilters;
+  }, [showFilters, productList?.filters, productList?.filterCategories]);
+
+  const selectedFiltersCount = useMemo(() => {
+    const selectedCategories =
+      productList?.filterCategories?.filter((c) => c.isSelected).length ?? 0;
+    return (
+      ((productList?.filters &&
+        productList.filters
+          .map((filter) => {
+            if (filter.numberRangeListOptions) {
+              return filter.numberRangeListOptions.filter((v) => v.isSelected)
+                .length;
+            }
+            const displayedValues = getFilterDisplayedValues(filter);
+            return displayedValues.filter((v) => v.isSelected).length;
+          })
+          .reduce((a, b) => a + b, 0)) ||
+        0) + selectedCategories
+    );
+  }, [productList?.filters, productList?.filterCategories]);
+
+  if (!productList) return null;
+
+  const category = productList.category;
+  const brand = productList.brand;
+  const selectedSort = getProductListSortOptions(productList).find(
+    (o) => o.isSelected,
+  );
+  const pageTitle = pageTitleProp || category?.name || brand?.name || "";
+
+  const breadcrumbItems = useMemo(() => {
+    if (!category) return [];
+    const path = getCategoryPath(category);
+    if (path.length === 0) return [];
+    return [
+      { label: homepageText, href: "/" } as BreadcrumbItem,
+      ...path.map(
+        (cat: any) =>
+          ({
+            label: cat.name,
+            href: getIkasCategoryHref(cat),
+          }) as BreadcrumbItem,
+      ),
+    ];
+  }, [category, homepageText]);
+
+  const startPage = productList.minPage ?? productList.page ?? 1;
+  const limit = productList.limit || products.length;
+
+  return (
+    <section ref={sectionRef} className="kombos-category-list">
+      <div className="kombos-container">
+        {!hideBreadcrumb && breadcrumbItems.length > 0 && (
+          <div className="kombos-category-list__top">
+            <Breadcrumb
+              items={breadcrumbItems}
+              className="kombos-category-list__breadcrumb"
+            />
+          </div>
+        )}
+
+        <CategoryListControls
+          pageTitle={pageTitle}
+          productCount={productList.count}
+          productCountText={productCountText}
+          sortOptions={sortSelectOptions}
+          selectedSortValue={selectedSort?.value ?? ""}
+          onSort={handleSort}
+          columns={columns}
+          onToggleColumns={toggleColumns}
+          columnText={columnText}
+          hasVisibleFilters={!!hasVisibleFilters}
+          selectedFiltersCount={selectedFiltersCount}
+          filtersText={filtersText}
+          onOpenFilterModal={openFilterModal}
+          showSearch={showSearch}
+          searchPlaceholder={searchPlaceholder}
+          searchKeyword={productList.searchKeyword ?? ""}
+          onSearch={handleSearch}
+        />
+
+        <div className="kombos-category-list__main">
+          {hasVisibleFilters && (
+            <div className="kombos-category-list__sidebar">
+              <FilterSidebar
+                productList={productList}
+                searchPlaceholder={searchPlaceholder}
+                clearFiltersText={clearFiltersText}
+                showSearch={showSearch}
+                onFilterChange={isInfinity ? undefined : scrollToTop}
+                isBrandPage={isBrandPage}
+              />
+            </div>
+          )}
+
+          <div className="kombos-category-list__grid-area">
+            {hasProductListPrevPage(productList) && isInfinity && (
+              <div className="kombos-category-list__prev-wrap">
+                <Button
+                  size="xs"
+                  disabled={productList.isLoading}
+                  onClick={handleLoadPrevPage}
+                  icon={productList.isLoading ? <SpinnerIcon /> : undefined}
+                >
+                  {loadPrevPageText}
+                </Button>
+              </div>
+            )}
+
+            {products.length === 0 ? (
+              <p className="kombos-category-list__empty text-md-semibold">
+                {emptyMessage}
+              </p>
+            ) : (
+              <div
+                ref={gridRef}
+                className={`kombos-category-list__grid kombos-category-list__grid--cols-${columns}`}
+              >
+                {products.map((product, index) => {
+                  const isPageStart = isInfinity && index % limit === 0;
+                  const pageNum = startPage + Math.floor(index / limit);
+
+                  return (
+                    <div
+                      key={`${product.id}-${index}`}
+                      className="kombos-category-list__card"
+                    >
+                      <ProductCard
+                        product={product}
+                        addToCartText={addToCartText}
+                        addedToCartText={addedToCartText}
+                        outOfStockText={outOfStockText}
+                        badgeText={badgeText}
+                        aspectRatio={aspectRatio}
+                        objectFit={objectFit}
+                        dataPage={isPageStart ? pageNum : undefined}
+                        sizes={`(max-width: 767px) calc((100vw - 48px) / 2), (max-width: 1023px) calc((100vw - 88px) / 2), calc((100vw - ${columns === 3 ? 464 : 488}px) / ${columns})`}
+                        hideAddToCartButton={hideAddToCartButton}
+                        priority={index < 4}
+                      />
+                      <IkasComponentRenderer
+                        id={`category-list-product-${product.id}`}
+                        components={components}
+                        parentProps={props}
+                        map={{ product }}
+                        className="kombos-category-list__card-content"
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {isInfinity && hasProductListNextPage(productList) && (
+              <div
+                ref={sentinelRef}
+                className="kombos-category-list__sentinel"
+              />
+            )}
+
+            {!isInfinity && (
+              <div className="kombos-category-list__pagination">
+                <Pagination
+                  currentPage={productList.page ?? 1}
+                  totalPages={Math.ceil(
+                    (productList.count ?? 0) / (productList.limit || 20),
+                  )}
+                  hasPrev={hasProductListPrevPage(productList)}
+                  hasNext={hasProductListNextPage(productList)}
+                  onPageChange={(page) => {
+                    getProductListPage(productList, page);
+                    scrollToTop();
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {hasVisibleFilters && (
+        <MobileFilterModal
+          productList={productList}
+          isOpen={filterModalOpen}
+          onClose={closeFilterModal}
+          clearFiltersText={clearFiltersText}
+          showProductsText={showProductsText}
+          filtersText={filtersText}
+          isBrandPage={isBrandPage}
+        />
+      )}
+    </section>
+  );
+}
+
+export default CategoryList;

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

@@ -0,0 +1,110 @@
+/* ===== Category List Section ===== */
+.kombos-category-list {
+  width: 100%;
+}
+
+.kombos-category-list__prev-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+/* Top: Breadcrumb + Title */
+.kombos-category-list__top {
+  padding-top: 1rem;
+}
+
+.kombos-category-list__breadcrumb {
+  margin-bottom: 0;
+}
+
+/* Main layout */
+.kombos-category-list__main {
+  display: flex;
+  gap: 2rem;
+  padding-top: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+/* Sidebar — hidden on mobile */
+.kombos-category-list__sidebar {
+  display: none;
+}
+
+/* Grid area */
+.kombos-category-list__grid-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-category-list__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.kombos-category-list__empty {
+  color: var(--kombos-gray-900);
+  text-align: center;
+  padding: 3rem 0;
+}
+
+.kombos-category-list__pagination {
+  margin-top: 2rem;
+}
+
+.kombos-category-list__card {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-category-list__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Sentinel for IntersectionObserver (infinite scroll) */
+.kombos-category-list__sentinel {
+  height: 1px;
+}
+
+/* ===== Tablet (>= 768px) ===== */
+@media (min-width: 768px) {
+  .kombos-category-list__grid {
+    gap: 1.5rem;
+  }
+}
+
+/* ===== Desktop (>= 1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-category-list__top {
+    padding-top: 1.5rem;
+  }
+
+  .kombos-category-list__main {
+    padding-top: 1.5rem;
+    padding-bottom: 4rem;
+  }
+
+  /* Show sidebar — sticky so it stays visible while scrolling */
+  .kombos-category-list__sidebar {
+    width: 15rem;
+    display: block;
+    position: sticky;
+    top: 0.75rem;
+    max-height: calc(100vh - 2.5rem);
+    overflow-y: auto;
+  }
+
+  /* Grid columns — default 4 on desktop */
+  .kombos-category-list__grid--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .kombos-category-list__grid--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

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

@@ -0,0 +1,208 @@
+import { ComponentChildren } from "preact";
+import {
+  IkasImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+
+const TYPO_MAP = {
+  xs: "text-xs-medium",
+  s: "text-sm-medium",
+  m: "text-md-medium",
+  l: "text-md-medium",
+} as const;
+
+type Size = "xs" | "s" | "m" | "l";
+
+interface BaseProps {
+  size?: Size;
+  selected?: boolean;
+  outOfStock?: boolean;
+  href?: string;
+  onClick?: () => void;
+  title?: string;
+  "aria-label"?: string;
+}
+
+function StrikeLine() {
+  return <span className="kombos-badge__strike" />;
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeImage                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeImageProps extends BaseProps {
+  image: IkasImage;
+  alt: string;
+  sizes?: string;
+  variantImg?: boolean;
+}
+
+export function BadgeImage({
+  image,
+  alt,
+  sizes = "64px",
+  variantImg,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeImageProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--image",
+    variantImg && "kombos-badge--variant-img",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      <img
+        src={getDefaultSrc(image)}
+        srcSet={createMediaSrcset(image)}
+        sizes={sizes}
+        alt={alt}
+        className="kombos-badge__img"
+      />
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeColor                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeColorProps extends BaseProps {
+  colorCode: string;
+}
+
+export function BadgeColor({
+  colorCode,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeColorProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--color",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = outOfStock ? <StrikeLine /> : null;
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={className}
+        style={{ backgroundColor: colorCode }}
+        title={title}
+        aria-label={ariaLabel}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      style={{ backgroundColor: colorCode }}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeText                                                          */
+/* ------------------------------------------------------------------ */
+
+interface BadgeTextProps extends BaseProps {
+  children: ComponentChildren;
+}
+
+export function BadgeText({
+  children,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeTextProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--text",
+    `kombos-badge--${size}`,
+    TYPO_MAP[size],
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      {children}
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}