@ikas/component-cli 0.93.0 → 0.95.0

package/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/types.ts

@@ -0,0 +1,30 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProductList } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  productList: IkasProductList;
+  pageTitle?: string;
+  productCountText?: string;
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+  clearFiltersText?: string;
+  addToCartText?: string;
+  addedToCartText?: string;
+  outOfStockText?: string;
+  showProductsText?: string;
+  filtersText?: string;
+  homepageText?: string;
+  badgeText?: string;
+  showFilters?: boolean;
+  showSearch?: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  isInfinity?: boolean;
+  columnText?: string;
+  loadPrevPageText?: string;
+  hideAddToCartButton?: boolean;
+  components?: any;
+  hideBreadcrumb?: boolean;
+  isBrandPage?: boolean;
+}

package/templates/create-full/src/components/CollapsibleContent/index.tsx

@@ -0,0 +1,23 @@
+import CollapsibleGroup from "../../sub-components/CollapsibleGroup";
+import { Props } from "./types";
+
+export function CollapsibleContent({
+  title,
+  description,
+  defaultOpen = false,
+}: Props) {
+  return (
+    <div className="kombos-collapsible-content">
+      <CollapsibleGroup title={title} defaultOpen={defaultOpen}>
+        {description && (
+          <div
+            className="kombos-collapsible-content__body text-sm-regular kombos-richtext"
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        )}
+      </CollapsibleGroup>
+    </div>
+  );
+}
+
+export default CollapsibleContent;

package/templates/create-full/src/components/CollapsibleContent/styles.css

@@ -0,0 +1,11 @@
+/* ===== CollapsibleContent ===== */
+
+.kombos-collapsible-content {
+  border-top: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-collapsible-content__body {
+  color: var(--kombos-gray-700);
+  max-height: 500px;
+  overflow: auto;
+}

package/templates/create-full/src/components/CollapsibleContent/types.ts

@@ -0,0 +1,6 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  description?: string;
+  defaultOpen?: boolean;
+}

package/templates/create-full/src/components/CookieBar/index.tsx

@@ -0,0 +1,78 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  customerStore,
+  getCustomerConsentGranted,
+  handleCustomerConsentGrant,
+  waitForCustomerStoreInit,
+} from "@ikas/bp-storefront";
+import { XSVG } from "../../sub-components/icons";
+import { cx } from "../../utils/cx";
+import { Props } from "./types";
+
+export function CookieBar({
+  cookieContent,
+  buttonText,
+  position = false,
+  showCloseIcon = false,
+  backgroundColor,
+  textColor,
+  buttonTextColor,
+}: Props) {
+  const [dismissed, setDismissed] = useState(false);
+  const [storeReady, setStoreReady] = useState(false);
+
+  useEffect(() => {
+    waitForCustomerStoreInit(customerStore).then(() => setStoreReady(true));
+  }, []);
+
+  if (!storeReady) return null;
+
+  const hasConsent = getCustomerConsentGranted(customerStore);
+  if (hasConsent || dismissed) return null;
+
+  const positionClass = position
+    ? "kombos-cookie-bar--left"
+    : "kombos-cookie-bar--right";
+
+  const cssVars = {
+    ...(backgroundColor && { "--cookie-bg-color": backgroundColor }),
+    ...(textColor && { "--cookie-text-color": textColor }),
+    ...(buttonTextColor && { "--cookie-button-text-color": buttonTextColor }),
+  } as Record<string, string>;
+
+  return (
+    <div className={cx("kombos-cookie-bar", positionClass)} style={cssVars}>
+      <div className="kombos-cookie-bar__wrapper">
+        <div
+          className={cx(
+            "kombos-cookie-bar__top",
+            !showCloseIcon && "kombos-cookie-bar__top--has-close",
+          )}
+        >
+          <div
+            className="kombos-cookie-bar__content text-sm-regular"
+            dangerouslySetInnerHTML={{ __html: cookieContent || "" }}
+          />
+
+          {!showCloseIcon && (
+            <button
+              className="kombos-cookie-bar__close"
+              onClick={() => setDismissed(true)}
+              aria-label="Close"
+            >
+              <XSVG />
+            </button>
+          )}
+        </div>
+        <button
+          className="kombos-cookie-bar__accept text-sm-semibold"
+          onClick={() => handleCustomerConsentGrant(customerStore)}
+        >
+          {buttonText}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default CookieBar;

package/templates/create-full/src/components/CookieBar/styles.css

@@ -0,0 +1,111 @@
+/* ===== CookieBar Component ===== */
+
+.kombos-cookie-bar {
+  position: fixed;
+  bottom: 1.5rem;
+  z-index: var(--kombos-z-overlay);
+  width: calc(100% - 2rem);
+  max-width: 22rem;
+  color: var(--cookie-text-color, var(--kombos-white));
+}
+
+/* Position variants */
+.kombos-cookie-bar--right {
+  right: 1rem;
+}
+
+.kombos-cookie-bar--left {
+  left: 1rem;
+}
+
+/* Wrapper */
+.kombos-cookie-bar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: var(--cookie-bg-color, rgba(0, 0, 0, 0.7));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  word-break: break-word;
+}
+
+/* Top section (content + close) */
+.kombos-cookie-bar__top {
+  position: relative;
+}
+
+.kombos-cookie-bar__top--has-close {
+  padding-right: 1.5rem;
+}
+
+/* Rich text content */
+.kombos-cookie-bar__content {
+  line-height: 1.5;
+}
+
+.kombos-cookie-bar__content a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Close button */
+.kombos-cookie-bar__close {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  font-size: 1rem;
+  color: var(--cookie-button-text-color, var(--cookie-text-color, var(--kombos-white)));
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-cookie-bar__close:hover {
+  opacity: 1;
+}
+
+/* Accept button */
+.kombos-cookie-bar__accept {
+  align-self: flex-end;
+  padding: 0;
+  color: var(--cookie-button-text-color, var(--cookie-text-color, var(--kombos-white)));
+  background: none;
+  border: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-cookie-bar__accept:hover {
+  opacity: 1;
+}
+
+/* ===== Responsive ===== */
+
+@media (min-width: 768px) {
+  .kombos-cookie-bar {
+    bottom: 2rem;
+    max-width: 24rem;
+  }
+
+  .kombos-cookie-bar--right {
+    right: 2rem;
+  }
+
+  .kombos-cookie-bar--left {
+    left: 2rem;
+  }
+
+  .kombos-cookie-bar__wrapper {
+    padding: 1.5rem;
+  }
+}