@ikas/component-cli 0.101.0 → 0.103.0

package/templates/create-full/src/sub-components/Modal/styles.css

@@ -1,70 +0,0 @@
-/* ── Modal ── */
-.kombos-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--kombos-z-overlay);
-  background: rgba(0, 0, 0, 0.35);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s;
-  padding: 1rem;
-}
-
-.kombos-modal--open {
-  opacity: 1;
-}
-
-.kombos-modal__panel {
-  background: var(--kombos-white);
-  border-radius: 6px;
-  width: 100%;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  transform: translateY(1rem);
-  transition: transform 0.3s;
-}
-
-.kombos-modal--open .kombos-modal__panel {
-  transform: translateY(0);
-}
-
-.kombos-modal__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--kombos-white);
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--kombos-gray-200);
-  border-radius: 6px 6px 0 0;
-}
-
-.kombos-modal__title {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-modal__close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-700);
-  font-size: 1.25rem;
-}
-
-.kombos-modal__body {
-  padding: 1.5rem;
-  overflow-y: auto;
-}
-
-.kombos-modal__footer {
-  background: var(--kombos-white);
-  padding: 1.5rem;
-  border-top: 1px solid var(--kombos-gray-200);
-  border-radius: 0 0 6px 6px;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}

package/templates/create-full/src/sub-components/PageLoader/index.tsx

@@ -1,14 +0,0 @@
-import { cx } from "../../utils/cx";
-import SpinnerIcon from "../SpinnerIcon";
-
-interface Props {
-  className?: string;
-}
-
-export default function PageLoader({ className }: Props) {
-  return (
-    <div className={cx("page-loader", className)}>
-      <SpinnerIcon />
-    </div>
-  );
-}

package/templates/create-full/src/sub-components/PageLoader/styles.css

@@ -1,12 +0,0 @@
-.page-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 12.5rem;
-}
-
-.page-loader .kombos-spinner {
-  font-size: 2rem;
-  color: var(--kombos-gray-500);
-}

package/templates/create-full/src/sub-components/Pagination/index.tsx

@@ -1,107 +0,0 @@
-import { observer } from "@ikas/component-utils";
-import { cx } from "../../utils/cx";
-import { getPageNumbers } from "../../utils/pagination";
-import {
-  CaretDoubleLeftSVG,
-  CaretLeftSVG,
-  CaretRightSVG,
-  CaretDoubleRightSVG,
-  DotsThreeSVG,
-} from "../icons";
-
-interface Props {
-  currentPage: number;
-  totalPages: number;
-  hasPrev: boolean;
-  hasNext: boolean;
-  onPageChange: (page: number) => void;
-}
-
-const Pagination = observer(function Pagination({
-  currentPage,
-  totalPages,
-  hasPrev,
-  hasNext,
-  onPageChange,
-}: Props) {
-  if (totalPages <= 1) return null;
-
-  const pages = getPageNumbers(currentPage, totalPages);
-
-  const showFirstBtn = totalPages > 5 && currentPage >= 5;
-  const showLastBtn = totalPages > 5 && currentPage <= totalPages - 4;
-
-  return (
-    <nav className="kombos-pagination" aria-label="Pagination">
-      <div className="kombos-pagination__nav-group">
-        {showFirstBtn && (
-          <button
-            type="button"
-            className="kombos-pagination__nav-btn"
-            onClick={() => onPageChange(1)}
-            aria-label="First page"
-          >
-            <CaretDoubleLeftSVG />
-          </button>
-        )}
-        <button
-          type="button"
-          className="kombos-pagination__nav-btn"
-          onClick={() => onPageChange(currentPage - 1)}
-          disabled={!hasPrev}
-          aria-label="Previous page"
-        >
-          <CaretLeftSVG />
-        </button>
-      </div>
-
-      <div className="kombos-pagination__pages">
-        {pages.map((page, i) =>
-          page === "dots" ? (
-            <span key={`dots-${i}`} className="kombos-pagination__dots">
-              <DotsThreeSVG />
-            </span>
-          ) : (
-            <button
-              key={page}
-              type="button"
-              className={cx(
-                "kombos-pagination__page",
-                "text-md-semibold",
-                page === currentPage && "kombos-pagination__page--active"
-              )}
-              onClick={() => onPageChange(page)}
-              aria-current={page === currentPage ? "page" : undefined}
-            >
-              {page}
-            </button>
-          )
-        )}
-      </div>
-
-      <div className="kombos-pagination__nav-group">
-        <button
-          type="button"
-          className="kombos-pagination__nav-btn"
-          onClick={() => onPageChange(currentPage + 1)}
-          disabled={!hasNext}
-          aria-label="Next page"
-        >
-          <CaretRightSVG />
-        </button>
-        {showLastBtn && (
-          <button
-            type="button"
-            className="kombos-pagination__nav-btn"
-            onClick={() => onPageChange(totalPages)}
-            aria-label="Last page"
-          >
-            <CaretDoubleRightSVG />
-          </button>
-        )}
-      </div>
-    </nav>
-  );
-});
-
-export default Pagination;

package/templates/create-full/src/sub-components/Pagination/styles.css

@@ -1,88 +0,0 @@
-/* ===== Pagination ===== */
-.kombos-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.75rem 1.5rem;
-  max-width: 100%;
-}
-
-/* Left/right button groups (first+prev, next+last) */
-.kombos-pagination__nav-group {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-/* Navigation buttons (first, prev, next, last) */
-.kombos-pagination__nav-btn {
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--kombos-gray-50);
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1rem;
-  color: var(--kombos-gray-900);
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-}
-
-.kombos-pagination__nav-btn:hover:not(:disabled) {
-  border-color: var(--kombos-gray-300);
-  background: var(--kombos-gray-100);
-}
-
-.kombos-pagination__nav-btn:disabled {
-  cursor: default;
-  color: var(--kombos-gray-300);
-  background: var(--kombos-gray-50);
-}
-
-/* Page numbers container */
-.kombos-pagination__pages {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-/* Page number buttons — 32×32 */
-.kombos-pagination__page {
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-500);
-  transition: color 0.15s ease, background-color 0.15s ease;
-}
-
-.kombos-pagination__page:hover {
-  color: var(--kombos-gray-900);
-  background: var(--kombos-gray-50);
-}
-
-.kombos-pagination__page--active {
-  color: var(--kombos-white);
-  background: var(--kombos-gray-900);
-  pointer-events: none;
-}
-
-/* Dots separator */
-.kombos-pagination__dots {
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  color: var(--kombos-gray-400);
-}

package/templates/create-full/src/sub-components/ProductCard/index.tsx

@@ -1,276 +0,0 @@
-import { useState, useRef, useEffect } from "preact/hooks";
-import {
-  getSelectedProductVariant,
-  getProductVariantMainImage,
-  getProductVariantDiscountPercentage,
-  hasProductVariantDiscount,
-  hasProductVariantStock,
-  addSelectedtedVariantToCart,
-  getProductHref,
-  getDefaultSrc,
-  IkasProduct,
-  isAddToCartEnabled,
-  isFavoriteIkasProduct,
-  addIkasProductToFavorites,
-  removeIkasProductFromFavorites,
-  customerStore,
-  hasCustomer,
-  Router,
-  createMediaSrcset,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { NoProductSVG, Heart2SVG, HeartFilledSVG } from "../icons";
-import Button from "../Button";
-import SpinnerIcon from "../SpinnerIcon";
-import Tag from "../Tag";
-import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
-import { showToast } from "../../utils/toast";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-
-interface Props {
-  product: IkasProduct;
-  addToCartText: string;
-  addedToCartText?: string;
-  outOfStockText?: string;
-  goToProductText?: string;
-  showFavorite?: boolean;
-  hideAddToCartButton?: boolean;
-  badgeText?: string;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-  dataPage?: number;
-  sizes?: string;
-  openCartOnAdd?: boolean;
-  errorMessage?: string;
-  onFavoriteRemove?: () => void;
-  priority?: boolean;
-}
-
-const ProductCard = observer(function ProductCard({
-  product,
-  addToCartText,
-  addedToCartText = "Sepete Eklendi",
-  outOfStockText = "Tükendi",
-  goToProductText = "Ürüne Git",
-  showFavorite = true,
-  hideAddToCartButton = false,
-  badgeText,
-  aspectRatio,
-  objectFit,
-  dataPage,
-  sizes = "(max-width: 767px) calc(50vw - 24px), (max-width: 1023px) calc(50vw - 44px), 300px",
-  openCartOnAdd = true,
-  errorMessage = "Ürün sepete eklenemedi",
-  onFavoriteRemove,
-  priority = false,
-}: Props) {
-  const [cartState, setCartState] = useState<"idle" | "loading" | "added">(
-    "idle",
-  );
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, []);
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const productImage = selectedVariant
-    ? getProductVariantMainImage(selectedVariant)
-    : null;
-  const image = productImage?.image;
-
-  const sortedImages = selectedVariant?.images
-    ? [...selectedVariant.images].sort((a, b) => a.order - b.order)
-    : [];
-  const secondImage = sortedImages.length > 1 ? sortedImages[1]?.image : null;
-  const hasDiscount = selectedVariant
-    ? hasProductVariantDiscount(selectedVariant)
-    : false;
-  const inStock = selectedVariant
-    ? hasProductVariantStock(selectedVariant)
-    : false;
-  const discountPercentage =
-    hasDiscount && selectedVariant
-      ? getProductVariantDiscountPercentage(selectedVariant)
-      : null;
-
-  const productHref = getProductHref(product);
-  const isBundleProduct = !!selectedVariant?.bundleSettings;
-  const hasOptionSet = !!product.productOptionSet;
-  const isFavorite = isFavoriteIkasProduct(product);
-
-  const mediaStyle: Record<string, string> = {};
-  const resolvedAR = resolveAspectRatio(aspectRatio);
-  const resolvedOF = resolveObjectFit(objectFit);
-  if (resolvedAR) mediaStyle.aspectRatio = resolvedAR;
-  if (resolvedOF) mediaStyle.objectFit = resolvedOF;
-
-  const handleAddToCart = async () => {
-    if (cartState === "loading") return;
-
-    if (!isAddToCartEnabled(product) || isBundleProduct || hasOptionSet) {
-      Router.navigate(productHref);
-      return;
-    }
-
-    if (timerRef.current) clearTimeout(timerRef.current);
-    setCartState("loading");
-    try {
-      const result = await addSelectedtedVariantToCart(product, 1);
-
-      if (result.success) {
-        if (openCartOnAdd) {
-          window.dispatchEvent(new CustomEvent("ikas:open-cart-sidebar"));
-        }
-        setCartState("added");
-      } else {
-        showToast(errorMessage, "error");
-      }
-
-      timerRef.current = setTimeout(() => setCartState("idle"), 2000);
-    } catch {
-      setCartState("idle");
-      showToast(errorMessage, "error");
-    }
-  };
-
-  const handleFavoriteToggle = async () => {
-    const isLoggedIn = hasCustomer(customerStore);
-    if (!isLoggedIn) {
-      Router.navigateToPage("LOGIN");
-      return;
-    }
-
-    if (isFavorite) {
-      await removeIkasProductFromFavorites(product);
-      onFavoriteRemove?.();
-    } else {
-      await addIkasProductToFavorites(product);
-    }
-  };
-
-  return (
-    <div className="kombos-product-card" data-page={dataPage}>
-      {/* Image container */}
-      <div className="kombos-product-card__image-wrapper">
-        <a href={productHref} className="kombos-product-card__media-link" aria-label={product.name || "Product"}>
-          {image?.isVideo ? (
-            <video
-              src={getDefaultSrc(image)}
-              className="kombos-product-card__media"
-              style={mediaStyle}
-              muted
-              loop
-              autoPlay
-              playsInline
-              aria-label={product.name}
-            >
-              <track kind="captions" />
-            </video>
-          ) : image ? (
-            <>
-              <img
-                src={getDefaultSrc(image)}
-                srcSet={createMediaSrcset(image)}
-                sizes={sizes}
-                alt={product.name}
-                className="kombos-product-card__media kombos-product-card__media--primary"
-                style={mediaStyle}
-                loading={priority ? "eager" : "lazy"}
-                decoding={priority ? "sync" : "async"}
-                fetchpriority={priority ? "high" : undefined}
-              />
-              {secondImage && !secondImage.isVideo && (
-                <img
-                  src={getDefaultSrc(secondImage)}
-                  srcSet={createMediaSrcset(secondImage)}
-                  sizes={sizes}
-                  alt=""
-                  className="kombos-product-card__media kombos-product-card__media--hover"
-                  style={mediaStyle}
-                  loading="lazy"
-                  decoding="async"
-                />
-              )}
-            </>
-          ) : (
-            <div
-              className="kombos-product-card__media kombos-product-card__media--placeholder"
-              style={mediaStyle}
-            >
-              <NoProductSVG />
-            </div>
-          )}
-        </a>
-
-        {/* Out of stock overlay — must render before badges/heart so they appear on top */}
-        {!inStock && <div className="kombos-product-card__overlay" />}
-
-        {/* Badges */}
-        {(hasDiscount || badgeText) && (
-          <div className="kombos-product-card__badges">
-            {hasDiscount && discountPercentage && (
-              <Tag type="discounted" size="s">
-                %{discountPercentage}
-              </Tag>
-            )}
-            {badgeText && (
-              <Tag type="new" size="s">
-                {badgeText}
-              </Tag>
-            )}
-          </div>
-        )}
-
-        {/* Favorite button */}
-        {showFavorite && (
-          <button
-            type="button"
-            className="kombos-product-card__favorite"
-            onClick={handleFavoriteToggle}
-            aria-label="Favorite"
-          >
-            {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}
-          </button>
-        )}
-      </div>
-
-      {/* Add to Cart / Go to Product */}
-      {!hideAddToCartButton && (
-        <>
-          {isBundleProduct || (hasOptionSet && inStock) ? (
-            <Button
-              variant="primary"
-              size="xs"
-              className="kombos-product-card__add-btn"
-              onClick={() => Router.navigate(productHref)}
-            >
-              {goToProductText}
-            </Button>
-          ) : (
-            <Button
-              variant={cartState === "added" ? "secondary" : "primary"}
-              size="xs"
-              className="kombos-product-card__add-btn"
-              onClick={inStock ? handleAddToCart : undefined}
-              disabled={!inStock || cartState === "loading"}
-              icon={
-                inStock && cartState === "loading" ? <SpinnerIcon /> : undefined
-              }
-            >
-              {!inStock && outOfStockText}
-              {inStock && cartState === "added" && addedToCartText}
-              {inStock &&
-                (cartState === "idle" || cartState === "loading") &&
-                addToCartText}
-            </Button>
-          )}
-        </>
-      )}
-    </div>
-  );
-});
-
-export default ProductCard;

package/templates/create-full/src/sub-components/ProductCard/styles.css

@@ -1,99 +0,0 @@
-/* ===== Product Card ===== */
-.kombos-product-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-/* Image wrapper */
-.kombos-product-card__image-wrapper {
-  position: relative;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.kombos-product-card__media-link {
-  display: block;
-}
-
-.kombos-product-card__media {
-  width: 100%;
-  height: auto;
-  display: block;
-  background: var(--kombos-gray-100);
-}
-
-.kombos-product-card__media--primary {
-  transition: opacity 0.3s ease;
-}
-
-.kombos-product-card__media--hover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.kombos-product-card__image-wrapper:hover .kombos-product-card__media--primary {
-  opacity: 0;
-}
-
-.kombos-product-card__image-wrapper:hover .kombos-product-card__media--hover {
-  opacity: 1;
-}
-
-.kombos-product-card__media--placeholder {
-  border: 1px solid var(--kombos-gray-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  color: var(--kombos-gray-300);
-  font-size: 4rem;
-}
-
-/* Badges */
-.kombos-product-card__badges {
-  position: absolute;
-  top: 0.75rem;
-  left: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Favorite */
-.kombos-product-card__favorite {
-  position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  font-size: 1.5rem;
-  color: var(--kombos-gray-900);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Out of stock overlay */
-.kombos-product-card__overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.32);
-  pointer-events: none;
-}
-
-
-/* Add to Cart Button */
-.kombos-product-card__add-btn {
-  width: 100%;
-}

package/templates/create-full/src/sub-components/QuantitySelector/index.tsx

@@ -1,41 +0,0 @@
-import { MinusSVG, PlusSVG } from "../icons";
-import { cx } from "../../utils/cx";
-
-interface Props {
-  value: number;
-  onChange: (value: number) => void;
-  size?: "default" | "sm";
-}
-
-export default function QuantitySelector({
-  value,
-  onChange,
-  size = "default",
-}: Props) {
-  return (
-    <div className={cx("kombos-pd__qty", size === "sm" && "kombos-pd__qty--sm")}>
-      <button
-        type="button"
-        className="kombos-pd__qty-btn"
-        onClick={() => onChange(Math.max(1, value - 1))}
-        disabled={value <= 1}
-        aria-label="Decrease quantity"
-      >
-        <MinusSVG />
-      </button>
-      <span
-        className={cx("kombos-pd__qty-value", size === "sm" ? "text-sm-medium" : "text-md-medium")}
-      >
-        {value}
-      </span>
-      <button
-        type="button"
-        className="kombos-pd__qty-btn"
-        onClick={() => onChange(value + 1)}
-        aria-label="Increase quantity"
-      >
-        <PlusSVG />
-      </button>
-    </div>
-  );
-}