@ikas/component-cli 0.133.0 → 1.1.0

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

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

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

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

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

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

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

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

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

@@ -1,129 +0,0 @@
-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} columns`}
-        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

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

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

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

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

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