@ikas/component-cli 0.133.0 → 1.2.0

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

@@ -1,333 +0,0 @@
-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 = "No products found.",
-    searchPlaceholder = "Search",
-    clearFiltersText = "Clear Filters",
-    addToCartText = "Add to Cart",
-    addedToCartText = "Added",
-    outOfStockText = "Sold Out",
-    showProductsText = "VIEW PRODUCT",
-    filtersText = "Filters",
-    columnText = "Column",
-    badgeText,
-    homepageText = "Home",
-    showFilters = false,
-    showSearch = false,
-    aspectRatio,
-    objectFit,
-    isInfinity = false,
-    loadPrevPageText = "Load previous page",
-    pageTitle: pageTitleProp,
-    productCountText = "product",
-    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}
-                      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

@@ -1,110 +0,0 @@
-/* ===== 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

@@ -1,30 +0,0 @@
-// 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

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

@@ -1,11 +0,0 @@
-/* ===== 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

@@ -1,6 +0,0 @@
-// 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

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

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