@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/header-section/sub-components/Input/styles.css

@@ -0,0 +1,162 @@
+/* ===== Input Sub-Component ===== */
+
+/* --- Base --- */
+.kombos-input {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  transition: border-color 0.15s ease;
+  width: 100%;
+}
+
+.kombos-input:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-input:focus-within {
+  border-color: var(--kombos-gray-900);
+}
+
+/* --- Sizes --- */
+.kombos-input--s {
+  padding: 0.5rem 0.8125rem;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+}
+
+.kombos-input--xs {
+  padding: 0.375rem 0.75rem;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+}
+
+/* --- Native input --- */
+.kombos-input__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kombos-gray-900);
+  padding: 0;
+}
+
+.kombos-input__native::placeholder {
+  color: var(--kombos-gray-400);
+}
+
+/* --- Left icon --- */
+.kombos-input__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-input--s .kombos-input__icon {
+  font-size: 1.25rem;
+}
+
+.kombos-input--xs .kombos-input__icon {
+  font-size: 1rem;
+}
+
+/* --- With-icon variant --- */
+.kombos-input--with-icon {
+  border-color: var(--kombos-gray-500);
+}
+
+.kombos-input--s.kombos-input--with-icon {
+  padding: 0.5rem 0.6875rem;
+  gap: 0.75rem;
+}
+
+.kombos-input--xs.kombos-input--with-icon {
+  padding: 0.375rem 0.6875rem;
+  gap: 0.5rem;
+}
+
+.kombos-input--with-icon:hover,
+.kombos-input--with-icon:focus-within {
+  border-color: var(--kombos-gray-700);
+}
+
+.kombos-input--with-icon:focus-within .kombos-input__icon {
+  color: var(--kombos-gray-700);
+}
+
+/* --- Password toggle --- */
+.kombos-input__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-400);
+}
+
+.kombos-input--s .kombos-input__toggle {
+  font-size: 1.5rem;
+}
+
+.kombos-input--xs .kombos-input__toggle {
+  font-size: 1.25rem;
+}
+
+/* --- Date input --- */
+.kombos-input__native[type="date"],
+.kombos-input__native[type="datetime-local"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.kombos-input__native[type="date"]::-webkit-calendar-picker-indicator,
+.kombos-input__native[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  display: block;
+  opacity: 1;
+  cursor: pointer;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+.kombos-input[data-state="error"],
+[data-state="error"] .kombos-input {
+  border-color: var(--kombos-error);
+}
+
+.kombos-input[data-state="error"]:hover,
+.kombos-input[data-state="error"]:focus-within,
+[data-state="error"] .kombos-input:hover,
+[data-state="error"] .kombos-input:focus-within {
+  border-color: var(--kombos-error);
+}
+
+.kombos-input[data-state="success"],
+[data-state="success"] .kombos-input {
+  border-color: var(--kombos-success);
+}
+
+.kombos-input[data-state="success"]:hover,
+.kombos-input[data-state="success"]:focus-within,
+[data-state="success"] .kombos-input:hover,
+[data-state="success"] .kombos-input:focus-within {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-input--disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  pointer-events: none;
+}
+
+.kombos-input--disabled .kombos-input__native,
+.kombos-input--disabled .kombos-input__native::placeholder {
+  color: var(--kombos-gray-300);
+}

package/data/section-templates/header-section/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/data/section-templates/header-section/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/data/section-templates/header-section/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>
+  );
+}

package/data/section-templates/header-section/sub-components/QuantitySelector/styles.css

@@ -0,0 +1,51 @@
+/* Qty — border ececed, rounded-6, px-12 py-10, gap-16 between items */
+.kombos-pd__qty {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.5625rem 0.6875rem;
+}
+
+.kombos-pd__qty-btn {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--kombos-gray-900);
+  padding: 0;
+  margin: -0.75rem;
+  padding: 0.75rem;
+}
+
+.kombos-pd__qty-btn:hover:not(:disabled) {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-pd__qty-btn:disabled {
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-pd__qty-value {
+  min-width: 1.5rem;
+  text-align: center;
+  color: var(--kombos-gray-900);
+}
+
+/* Small size variant */
+.kombos-pd__qty--sm {
+  gap: 0.75rem;
+  padding: 0.4375rem 0.6875rem;
+}
+
+.kombos-pd__qty--sm .kombos-pd__qty-btn {
+  margin: -0.5rem;
+  padding: 0.5rem;
+}

package/data/section-templates/header-section/sub-components/SpinnerIcon/index.tsx

@@ -0,0 +1,10 @@
+import { cx } from "../../utils/cx";
+import { SpinnerSVG } from "../icons";
+
+interface Props {
+  className?: string;
+}
+
+export default function SpinnerIcon({ className }: Props) {
+  return <SpinnerSVG className={cx("kombos-spinner", className)} />;
+}

package/data/section-templates/header-section/sub-components/SpinnerIcon/styles.css

@@ -0,0 +1,8 @@
+.kombos-spinner {
+  animation: kombos-spin 1s linear infinite;
+}
+
+@keyframes kombos-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

package/data/section-templates/header-section/sub-components/Tag/index.tsx

@@ -0,0 +1,21 @@
+import type { ComponentChildren } from "preact";
+
+interface Props {
+  type: "discounted" | "new" | "dark";
+  size?: "s" | "m";
+  children: ComponentChildren;
+}
+
+export default function Tag({ type, size = "s", children }: Props) {
+  const typoClass = size === "s" ? "text-xs-semibold" : "text-md-semibold";
+  const typeClass =
+    type === "discounted"
+      ? "kombos-tag--discounted"
+      : type === "dark"
+        ? "kombos-tag--dark"
+        : "kombos-tag--new";
+
+  return (
+    <span className={`kombos-tag ${typeClass} ${typoClass}`}>{children}</span>
+  );
+}

package/data/section-templates/header-section/sub-components/Tag/styles.css

@@ -0,0 +1,30 @@
+/* ===== Tag ===== */
+.kombos-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+/* Discounted */
+.kombos-tag--discounted {
+  background: var(--kombos-discount-bg);
+  color: var(--kombos-white);
+}
+
+/* New */
+.kombos-tag--new {
+  background: var(--kombos-white);
+  border: 1px solid var(--kombos-gray-200);
+  color: var(--kombos-gray-900);
+}
+
+/* Dark */
+.kombos-tag--dark {
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}