@ikas/component-cli 0.93.0 → 0.94.0

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

@@ -0,0 +1,70 @@
+/* ── 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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+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>
+  );
+}