@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/product-reviews-section/types.ts

@@ -0,0 +1,18 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  reviewsPerPage?: number;
+  sectionTitle?: string;
+  writeReviewButtonText?: string;
+  emptyStateText?: string;
+  reviewCountText?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  titlePlaceholder?: string;
+  commentPlaceholder?: string;
+  merchantReplyLabel?: string;
+  starRequiredError?: string;
+  cancelButtonText?: string;
+  errorMessage?: string;
+}

package/data/section-templates/product-reviews-section/utils/cx.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cx(...classes: any[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/data/section-templates/product-reviews-section/utils/fullName.ts

@@ -0,0 +1,6 @@
+export function getFullName(
+  firstName?: string | null,
+  lastName?: string | null
+): string {
+  return [firstName, lastName].filter(Boolean).join(" ");
+}

package/data/section-templates/product-reviews-section/utils/pagination.ts

@@ -0,0 +1,29 @@
+export function getPageNumbers(
+  current: number,
+  total: number
+): (number | "dots")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "dots")[] = [1];
+
+  if (current > 3) {
+    pages.push("dots");
+  }
+
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  if (current < total - 2) {
+    pages.push("dots");
+  }
+
+  pages.push(total);
+
+  return pages;
+}

package/data/section-templates/product-reviews-section/utils/toast.ts

@@ -0,0 +1,5 @@
+export function showToast(message: string, variant: "success" | "error") {
+  window.dispatchEvent(
+    new CustomEvent("ikas:show-toast", { detail: { message, variant } })
+  );
+}

package/data/section-templates/product-slider-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Product Slider Section",
+  "description": "Horizontal product card carousel with configurable product list. Uses ProductCard sub-component with IkasComponentRenderer for customizable card content (name, price, variants). Supports privateVarMap to pass product data to children."
+}

package/data/section-templates/product-slider-section/children/CardProductName/ikas-config-snippet.json

@@ -0,0 +1,21 @@
+{
+  "id": "{{PROJECT_ID}}-card-product-name",
+  "name": "CardProductName",
+  "type": "component",
+  "entry": "./src/components/CardProductName/index.tsx",
+  "styles": "./src/components/CardProductName/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "singleLineName",
+      "displayName": "Tek Satır İsim",
+      "type": "BOOLEAN",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/product-slider-section/children/CardProductName/index.tsx

@@ -0,0 +1,25 @@
+import { getProductHref } from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+import { Props } from "./types";
+
+export function CardProductName({ product, singleLineName }: Props) {
+  if (!product) return null;
+
+  const productHref = getProductHref(product);
+
+  return (
+    <span className="kombos-card-product-name">
+      <a
+        href={productHref}
+        className={cx(
+          "kombos-card-product-name__link text-sm-medium md:text-md-medium",
+          singleLineName && "kombos-card-product-name__link--single-line",
+        )}
+      >
+        {product.name}
+      </a>
+    </span>
+  );
+}
+
+export default CardProductName;

package/data/section-templates/product-slider-section/children/CardProductName/styles.css

@@ -0,0 +1,22 @@
+.kombos-card-product-name {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.kombos-card-product-name__link {
+  display: block;
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  max-width: 100%;
+}
+
+.kombos-card-product-name__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-card-product-name__link--single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/data/section-templates/product-slider-section/children/CardProductName/types.ts

@@ -0,0 +1,6 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  singleLineName?: boolean;
+}

package/data/section-templates/product-slider-section/children/CardProductPrice/ikas-config-snippet.json

@@ -0,0 +1,15 @@
+{
+  "id": "{{PROJECT_ID}}-card-product-price",
+  "name": "CardProductPrice",
+  "type": "component",
+  "entry": "./src/components/CardProductPrice/index.tsx",
+  "styles": "./src/components/CardProductPrice/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/product-slider-section/children/CardProductPrice/index.tsx

@@ -0,0 +1,30 @@
+import {
+  getSelectedProductVariant,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantFormattedSellPrice,
+  hasProductVariantDiscount,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function CardProductPrice({ product }: Props) {
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const hasDiscount = hasProductVariantDiscount(selectedVariant);
+
+  return (
+    <div className="kombos-card-product-price">
+      <span className="kombos-card-product-price__current text-sm-medium sm:text-md-medium md:text-xl-medium">
+        {getProductVariantFormattedFinalPrice(selectedVariant)}
+      </span>
+      {hasDiscount && (
+        <span className="kombos-card-product-price__old text-xs-regular-strike sm:text-sm-regular-strike md:text-md-regular-strike">
+          {getProductVariantFormattedSellPrice(selectedVariant)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default CardProductPrice;

package/data/section-templates/product-slider-section/children/CardProductPrice/styles.css

@@ -0,0 +1,13 @@
+.kombos-card-product-price {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.kombos-card-product-price__current {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-card-product-price__old {
+  color: var(--kombos-gray-500);
+}

package/data/section-templates/product-slider-section/children/CardProductPrice/types.ts

@@ -0,0 +1,5 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+}

package/data/section-templates/product-slider-section/children/CardProductVariants/ikas-config-snippet.json

@@ -0,0 +1,15 @@
+{
+  "id": "{{PROJECT_ID}}-card-product-variants",
+  "name": "CardProductVariants",
+  "type": "component",
+  "entry": "./src/components/CardProductVariants/index.tsx",
+  "styles": "./src/components/CardProductVariants/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/product-slider-section/children/CardProductVariants/index.tsx

@@ -0,0 +1,10 @@
+import { Props } from "./types";
+import VariantBadge from "../../sub-components/VariantBadge";
+
+export function CardProductVariants({ product }: Props) {
+  if (!product) return null;
+
+  return <VariantBadge product={product} size="s" scrollable disableRoute />;
+}
+
+export default CardProductVariants;

package/data/section-templates/product-slider-section/children/CardProductVariants/styles.css

@@ -0,0 +1 @@
+/* CardProductVariants — styles handled by VariantBadge sub-component */

package/data/section-templates/product-slider-section/children/CardProductVariants/types.ts

@@ -0,0 +1,5 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+}

package/data/section-templates/product-slider-section/global-types.ts

@@ -0,0 +1,13 @@
+// Auto-generated global type definitions for ikas code components.
+// This file is regenerated automatically — do not edit manually.
+
+/** Enum type: s3OODUmZpJ */
+export type AspectRatio = "Square" | "Portrait" | "Landscape" | "Video";
+/** Enum type: __breakpointsEnum__ */
+export type Breakpoints = "desktop";
+/** Enum type: Tkt3wfuJ5F */
+export type NumberOfColumns = "One" | "Two" | "Three" | "Four" | "Five";
+/** Enum type: GrylMqHxui */
+export type ObjectFit = "Fill" | "Cover" | "Contain";
+/** Enum type: 08UWYbbs0P */
+export type VerticalAlignment = "Top" | "Middle" | "Bottom";

package/data/section-templates/product-slider-section/ikas-config-snippet.json

@@ -0,0 +1,121 @@
+{
+  "id": "{{PROJECT_ID}}-product-slider",
+  "name": "ProductSlider",
+  "type": "section",
+  "entry": "./src/components/ProductSlider/index.tsx",
+  "styles": "./src/components/ProductSlider/styles.css",
+  "props": [
+    {
+      "name": "productList",
+      "displayName": "Ürünler",
+      "type": "PRODUCT_LIST",
+      "required": true,
+      "groupId": "content"
+    },
+    {
+      "name": "title",
+      "displayName": "Bölüm Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Yeni Gelenler",
+      "groupId": "content"
+    },
+    {
+      "name": "addToCartText",
+      "displayName": "Sepete Ekle Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Ekle",
+      "groupId": "texts"
+    },
+    {
+      "name": "addedToCartText",
+      "displayName": "Eklendi Bildirimi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Eklendi",
+      "groupId": "texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Stokta Yok Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tükendi",
+      "groupId": "texts"
+    },
+    {
+      "name": "goToProductText",
+      "displayName": "Ürüne Git Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürüne Git",
+      "groupId": "texts"
+    },
+    {
+      "name": "desktopColumns",
+      "displayName": "Sütun Sayısı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "appearance",
+      "enumTypeId": "Tkt3wfuJ5F"
+    },
+    {
+      "name": "aspectRatio",
+      "displayName": "En Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "appearance",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "objectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "appearance",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "hideAddToCartButton",
+      "displayName": "Sepete Ekle Butonunu Gizle",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "appearance"
+    },
+    {
+      "name": "components",
+      "displayName": "Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "privateVarMap": {
+        "product": {
+          "id": "pvm_1772803530689_1",
+          "typeId": "@ikas/bp-storefront-models-IkasProduct"
+        }
+      },
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-card-product-price",
+        "{{PROJECT_ID}}-card-product-variants",
+        "{{PROJECT_ID}}-card-product-name"
+      ]
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Slider'da gösterilecek ürün listesi ve bölüm başlığı"
+    },
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Ürün kartlarında görünen buton ve durum metinleri"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Sütun sayısı, görsel ayarları ve kart görünüm tercihleri"
+    }
+  ]
+}

package/data/section-templates/product-slider-section/index.tsx

@@ -0,0 +1,151 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "preact/hooks";
+import {
+  getProductOptionSet,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import ProductCard from "../../sub-components/ProductCard";
+import SliderArrow from "../../sub-components/SliderArrow";
+import { Props } from "./types";
+
+const COLUMNS_MAP: Record<string, number> = {
+  One: 1,
+  Two: 2,
+  Three: 3,
+  Four: 4,
+  Five: 5,
+};
+
+export function ProductSlider(props: Props) {
+  const {
+    productList,
+    title,
+    addToCartText = "Sepete Ekle",
+    addedToCartText = "Sepete Eklendi",
+    outOfStockText = "Tükendi",
+    goToProductText = "Ürüne Git",
+    desktopColumns,
+    aspectRatio,
+    objectFit,
+    hideAddToCartButton,
+    components,
+  } = props;
+
+  const cols = COLUMNS_MAP[desktopColumns ?? ""] ?? 4;
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    setCanScrollLeft(track.scrollLeft > 1);
+    setCanScrollRight(
+      track.scrollLeft + track.clientWidth < track.scrollWidth - 1,
+    );
+  }, []);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    track.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState);
+    const ro = new ResizeObserver(updateScrollState);
+    ro.observe(track);
+    return () => {
+      track.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+      ro.disconnect();
+    };
+  }, [updateScrollState]);
+
+  const products = productList?.data ?? [];
+
+  useEffect(() => {
+    products.forEach((p) => {
+      if (!p.productOptionSet) getProductOptionSet(p);
+    });
+  }, [products.length]);
+
+  const productCardSizes = useMemo(() => {
+    const desktopGaps = (cols - 1) * 24;
+    return `(max-width: 767px) calc((100vw - 48px) / 2), (max-width: 1023px) calc((100vw - 80px) / 2), calc((100vw - ${144 + desktopGaps}px) / ${cols})`;
+  }, [cols]);
+
+  if (!productList) return null;
+
+  const scroll = (direction: "left" | "right") => {
+    const el = trackRef.current;
+    if (!el) return;
+    const amount = direction === "left" ? -el.clientWidth : el.clientWidth;
+    el.scrollBy({ left: amount, behavior: "smooth" });
+  };
+
+  return (
+    <section className="kombos-product-slider">
+      <div className="kombos-product-slider__wrapper kombos-container">
+        {title && (
+          <h2 className="kombos-product-slider__title display-xs-medium md:display-sm-medium">
+            {title}
+          </h2>
+        )}
+
+        <div className="kombos-product-slider__slider">
+          <SliderArrow
+            direction="left"
+            className="kombos-product-slider__arrow kombos-product-slider__arrow--left"
+            onClick={() => scroll("left")}
+            disabled={!canScrollLeft}
+          />
+
+          <div
+            className="kombos-product-slider__track"
+            ref={trackRef}
+            style={{ "--columns": cols }}
+          >
+            {products.map((product, index) => (
+              <div key={product.id} className="kombos-product-slider__card">
+                <ProductCard
+                  product={product}
+                  addToCartText={addToCartText}
+                  addedToCartText={addedToCartText}
+                  outOfStockText={outOfStockText}
+                  goToProductText={goToProductText}
+                  aspectRatio={aspectRatio}
+                  objectFit={objectFit}
+                  sizes={productCardSizes}
+                  hideAddToCartButton={hideAddToCartButton}
+                  priority={index < 4}
+                />
+                <IkasComponentRenderer
+                  id={`product-slider-product-${product.id}`}
+                  components={components}
+                  parentProps={props}
+                  map={{
+                    product,
+                  }}
+                  className="kombos-product-slider__card-content"
+                />
+              </div>
+            ))}
+          </div>
+
+          <SliderArrow
+            direction="right"
+            className="kombos-product-slider__arrow kombos-product-slider__arrow--right"
+            onClick={() => scroll("right")}
+            disabled={!canScrollRight}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ProductSlider;

package/data/section-templates/product-slider-section/styles.css

@@ -0,0 +1,105 @@
+/* ===== Product Slider Section ===== */
+.kombos-product-slider {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kombos-product-slider__wrapper {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-product-slider__title {
+  color: var(--kombos-gray-900);
+}
+
+/* Slider wrapper */
+.kombos-product-slider__slider {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Scrollable track */
+.kombos-product-slider__track {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.kombos-product-slider__track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Card sizing — mobile: 2 columns, desktop: driven by --columns */
+.kombos-product-slider__card {
+  flex: 0 0 calc((100% - 1rem) / 2);
+  min-width: 0;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-product-slider__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Navigation arrows */
+.kombos-product-slider__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: var(--kombos-z-dropdown);
+}
+
+.kombos-product-slider__arrow--left {
+  left: 0.5rem;
+}
+
+.kombos-product-slider__arrow--right {
+  right: 0.5rem;
+}
+
+/* ===== Tablet (>=768px) ===== */
+@media (min-width: 768px) {
+  .kombos-product-slider__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-product-slider__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    gap: 2rem;
+  }
+
+  .kombos-product-slider__track {
+    gap: 1.5rem;
+  }
+
+  .kombos-product-slider__card {
+    flex: 0 0 calc((100% - (var(--columns) - 1) * 1.5rem) / var(--columns));
+  }
+
+  .kombos-product-slider__arrow--left {
+    left: 1rem;
+  }
+
+  .kombos-product-slider__arrow--right {
+    right: 1rem;
+  }
+}