@ikas/component-cli 0.93.0 → 0.94.0

package/templates/create-full/src/components/CategoryImageItem/components/Card/index.tsx

@@ -0,0 +1,64 @@
+import {
+  IkasImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  img: IkasImage;
+  cssClass: string;
+  objectFit: string;
+  aspectRatio?: string;
+  overlay: boolean;
+  label?: string;
+  href?: string;
+  openInNewTab?: boolean;
+}
+
+export default function Card({
+  img,
+  cssClass,
+  objectFit,
+  aspectRatio,
+  overlay,
+  label,
+  href,
+  openInNewTab,
+}: Props) {
+  const cardClass = cx("kombos-category-image-item__card", cssClass);
+  const Tag = href ? "a" : "div";
+  const linkProps = href
+    ? {
+        href,
+        target: openInNewTab ? "_blank" : undefined,
+        rel: openInNewTab ? "noopener noreferrer" : undefined,
+      }
+    : {};
+
+  return (
+    <Tag className={cardClass} {...linkProps}>
+      <div
+        className="kombos-category-image-item__img-wrap"
+        style={aspectRatio ? { aspectRatio, height: "auto" } : undefined}
+      >
+        <img
+          className="kombos-category-image-item__img"
+          src={getDefaultSrc(img)}
+          srcSet={createMediaSrcset(img)}
+          sizes="(max-width: 1023px) 100vw, 50vw"
+          alt={label ? "" : img.altText || "Category"}
+          style={{ objectFit }}
+          loading="lazy"
+          decoding="async"
+        />
+      </div>
+      {overlay && <div className="kombos-category-image-item__overlay" />}
+      {label && (
+        <span className="kombos-category-image-item__label display-xs-semibold md:display-sm-semibold">
+          {label}
+        </span>
+      )}
+    </Tag>
+  );
+}

package/templates/create-full/src/components/CategoryImageItem/components/Card/styles.css

@@ -0,0 +1,56 @@
+.kombos-category-image-item__card {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+}
+
+.kombos-category-image-item__card--desktop {
+  display: none;
+}
+
+.kombos-category-image-item__card--mobile {
+  display: block;
+}
+
+.kombos-category-image-item__img-wrap {
+  width: 100%;
+  height: 100%;
+}
+
+.kombos-category-image-item__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s ease;
+}
+
+.kombos-category-image-item__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+
+.kombos-category-image-item__label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-white);
+  text-align: center;
+  pointer-events: none;
+  padding: 1.5rem;
+}
+
+@media (min-width: 1024px) {
+  .kombos-category-image-item__card--desktop {
+    display: block;
+  }
+
+  .kombos-category-image-item__card--mobile {
+    display: none;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { Props } from "./types";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import Card from "./components/Card";
+
+export function CategoryImageItem({
+  image,
+  link,
+  overlay = false,
+  aspectRatio,
+  objectFit,
+  mobileImage,
+  mobileLink,
+  mobileOverlay,
+  mobileAspectRatio,
+  mobileObjectFit,
+}: Props) {
+  const desktopImg = image || mobileImage;
+  const mobileImg = mobileImage || image;
+
+  if (!desktopImg && !mobileImg) return null;
+
+  const desktopFit = resolveObjectFit(objectFit);
+  const mobileFit = mobileObjectFit
+    ? resolveObjectFit(mobileObjectFit)
+    : desktopFit;
+
+  const desktopAR = aspectRatio ? resolveAspectRatio(aspectRatio) : undefined;
+  const mobileAR = mobileAspectRatio
+    ? resolveAspectRatio(mobileAspectRatio)
+    : desktopAR;
+
+  const mobOverlay = mobileOverlay ?? overlay;
+
+  return (
+    <div className="kombos-category-image-item">
+      {desktopImg && (
+        <Card
+          img={desktopImg}
+          cssClass="kombos-category-image-item__card--desktop"
+          objectFit={desktopFit}
+          aspectRatio={desktopAR}
+          overlay={overlay}
+          label={link?.label}
+          href={link?.href || undefined}
+          openInNewTab={link?.openInNewTab}
+        />
+      )}
+      {mobileImg && (
+        <Card
+          img={mobileImg}
+          cssClass="kombos-category-image-item__card--mobile"
+          objectFit={mobileFit}
+          aspectRatio={mobileAR}
+          overlay={mobOverlay}
+          label={mobileLink?.label}
+          href={mobileLink?.href || undefined}
+          openInNewTab={mobileLink?.openInNewTab}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CategoryImageItem;

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

@@ -0,0 +1,10 @@
+.kombos-category-image-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  height: 100%;
+}
+
+.kombos-category-image-item:hover .kombos-category-image-item__img {
+  transform: scale(1.15);
+}

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

@@ -0,0 +1,16 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasImage, IkasNavigationLink } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  image?: IkasImage | null;
+  link?: IkasNavigationLink | null;
+  overlay?: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  mobileImage?: IkasImage | null;
+  mobileLink?: IkasNavigationLink | null;
+  mobileOverlay?: boolean;
+  mobileAspectRatio?: AspectRatio;
+  mobileObjectFit?: ObjectFit;
+}

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

@@ -0,0 +1,62 @@
+// import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+const COLUMNS_MAP: Record<Props["desktopColumns"] & string, number> = {
+  One: 1,
+  Two: 2,
+  Three: 3,
+  Four: 4,
+  Five: 5,
+};
+
+export function CategoryImages(props: Props) {
+  const {
+    title,
+    titleColor,
+    backgroundColor,
+    desktopColumns,
+    mobileColumns,
+    components,
+  } = props;
+
+  const count = components?.length ?? 0;
+  if (count === 0) return null;
+
+  const desktopCols = desktopColumns ? COLUMNS_MAP[desktopColumns] : count;
+  const mobileCols = mobileColumns ? COLUMNS_MAP[mobileColumns] : 1;
+
+  return (
+    <section
+      className="kombos-category-images"
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <div className="kombos-category-images__container kombos-container">
+        {title && (
+          <h2
+            className="kombos-category-images__title text-xl-medium md:display-xs-medium"
+            style={titleColor ? { color: titleColor } : undefined}
+          >
+            {title}
+          </h2>
+        )}
+
+        <div
+          className="kombos-category-images__grid"
+          style={{
+            "--desktop-cols": String(desktopCols),
+            "--mobile-cols": String(mobileCols),
+          }}
+        >
+          <IkasComponentRenderer
+            id="category-images"
+            components={components}
+            parentProps={props}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CategoryImages;

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

@@ -0,0 +1,38 @@
+.kombos-category-images {
+  width: 100%;
+}
+
+/* Mobile-first: base = mobile (375px) */
+.kombos-category-images__container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.kombos-category-images__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-category-images__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--mobile-cols, 1), 1fr);
+  grid-auto-rows: 1fr;
+  gap: 1rem;
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .kombos-category-images__container {
+    gap: 2rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .kombos-category-images__grid {
+    grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
+    gap: 1.5rem;
+  }
+}

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

@@ -0,0 +1,11 @@
+// This file is auto-generated — do not edit manually.
+import type { NumberOfColumns } from "../../global-types";
+
+export interface Props {
+  title?: string;
+  titleColor?: string;
+  backgroundColor?: string;
+  desktopColumns?: NumberOfColumns;
+  mobileColumns?: NumberOfColumns;
+  components?: any;
+}

package/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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/templates/create-full/src/components/CategoryList/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;
+}