@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/hero-slider-section/types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  backgroundColor?: string;
+  autoplay?: boolean;
+  autoplayDelay?: number;
+  fullWidth?: boolean;
+  showArrows?: boolean;
+  components?: any;
+}

package/data/section-templates/hero-slider-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/hero-slider-section/utils/media.ts

@@ -0,0 +1,36 @@
+import type { AspectRatio, ObjectFit, VerticalAlignment } from "../global-types";
+
+const DEFAULT_ASPECT_RATIO: AspectRatio = "Square";
+const DEFAULT_OBJECT_FIT: ObjectFit = "Cover";
+const DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = "Middle";
+
+const ASPECT_RATIO_MAP: Record<AspectRatio, string> = {
+  Square: "1 / 1",
+  Portrait: "3 / 4",
+  Landscape: "4 / 3",
+  Video: "16 / 9",
+};
+
+const OBJECT_FIT_MAP: Record<ObjectFit, string> = {
+  Fill: "fill",
+  Cover: "cover",
+  Contain: "contain",
+};
+
+const ALIGNMENT_MAP: Record<VerticalAlignment, string> = {
+  Top: "flex-start",
+  Middle: "center",
+  Bottom: "flex-end",
+};
+
+export function resolveAspectRatio(value?: AspectRatio): string {
+  return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];
+}
+
+export function resolveObjectFit(value?: ObjectFit): string {
+  return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];
+}
+
+export function resolveVerticalAlignment(value?: VerticalAlignment): string {
+  return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];
+}

package/data/section-templates/image-handling/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Image Handling Pattern",
+  "description": "Product image gallery with responsive srcsets, aspect ratio control, zoom, and image preview modal. Shows getDefaultSrc, createMediaSrcset, getProductVariantMainImage, IkasImage handling, and image optimization patterns."
+}

package/data/section-templates/image-handling/components/ProductGallery/index.tsx

@@ -0,0 +1,316 @@
+import {
+  createMediaSrcset,
+  getDefaultSrc,
+  getThumbnailSrc,
+  IkasImage,
+} from "@ikas/bp-storefront";
+import { useRef, useState, useCallback, useEffect, useMemo } from "preact/hooks";
+import { cx } from "../../../../utils/cx";
+import { NoProductSVG, PlaySVG } from "../../../../sub-components/icons";
+import SliderArrow from "../../../../sub-components/SliderArrow";
+import { resolveAspectRatio, resolveObjectFit } from "../../../../utils/media";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+
+const SETTLE_DELAY = 100;
+const DRAG_THRESHOLD_RATIO = 0.15;
+const SNAP_DURATION = 300;
+
+function easeInOutCubic(t: number): number {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+
+interface Props {
+  images: IkasImage[];
+  productName: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+export default function ProductGallery({
+  images,
+  productName,
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const mainWrapRef = useRef<HTMLDivElement>(null);
+  const thumbsRef = useRef<HTMLDivElement>(null);
+  const isProgrammaticRef = useRef(false);
+  const settleTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const isDraggingRef = useRef(false);
+  const dragStartXRef = useRef(0);
+  const dragScrollLeftRef = useRef(0);
+  const animFrameRef = useRef(0);
+
+  const hasMultiple = images.length > 1;
+  const resolvedAR = resolveAspectRatio(aspectRatio);
+  const resolvedOF = resolveObjectFit(objectFit);
+
+  const imageStyle = useMemo(() => ({ objectFit: resolvedOF as CSSStyleDeclaration["objectFit"] }), [resolvedOF]);
+  const thumbStyle = useMemo(() => ({ aspectRatio: resolvedAR }), [resolvedAR]);
+
+  // Sync thumbnail column height with main image
+  useEffect(() => {
+    if (!hasMultiple) return;
+    const syncHeight = () => {
+      const wrap = mainWrapRef.current;
+      const thumbs = thumbsRef.current;
+      if (wrap && thumbs) {
+        thumbs.style.maxHeight = `${wrap.offsetHeight}px`;
+      }
+    };
+    syncHeight();
+    window.addEventListener("resize", syncHeight);
+    return () => window.removeEventListener("resize", syncHeight);
+  }, [hasMultiple, aspectRatio]);
+
+  // Auto-play/pause videos based on selected slide
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const slides = track.children;
+    for (let i = 0; i < slides.length; i++) {
+      const video = slides[i].querySelector("video");
+      if (!video) continue;
+      if (i === selectedIndex) {
+        video.play().catch(() => {});
+      } else {
+        video.pause();
+        video.currentTime = 0;
+      }
+    }
+  }, [selectedIndex]);
+
+  const scrollThumbIntoView = useCallback((index: number) => {
+    const thumb = thumbsRef.current?.children[index] as HTMLElement | undefined;
+    thumb?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, []);
+
+  const smoothScrollTo = useCallback((track: HTMLElement, target: number) => {
+    cancelAnimationFrame(animFrameRef.current);
+    const start = track.scrollLeft;
+    const distance = target - start;
+    if (Math.abs(distance) < 1) {
+      track.scrollLeft = target;
+      track.style.scrollSnapType = "x mandatory";
+      isProgrammaticRef.current = false;
+      return;
+    }
+    const startTime = performance.now();
+    const step = (now: number) => {
+      const elapsed = Math.min((now - startTime) / SNAP_DURATION, 1);
+      track.scrollLeft = start + distance * easeInOutCubic(elapsed);
+      if (elapsed < 1) {
+        animFrameRef.current = requestAnimationFrame(step);
+      } else {
+        track.style.scrollSnapType = "x mandatory";
+        isProgrammaticRef.current = false;
+      }
+    };
+    animFrameRef.current = requestAnimationFrame(step);
+  }, []);
+
+  const goToSlide = useCallback((index: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+    isProgrammaticRef.current = true;
+    clearTimeout(settleTimerRef.current);
+    const slide = track.children[index] as HTMLElement | undefined;
+    if (slide) {
+      track.scrollTo({ left: slide.offsetLeft, behavior: "smooth" });
+    }
+    setSelectedIndex(index);
+    scrollThumbIntoView(index);
+  }, [scrollThumbIntoView]);
+
+  const handlePrev = useCallback(() => {
+    goToSlide(selectedIndex === 0 ? images.length - 1 : selectedIndex - 1);
+  }, [goToSlide, selectedIndex, images.length]);
+
+  const handleNext = useCallback(() => {
+    goToSlide(selectedIndex === images.length - 1 ? 0 : selectedIndex + 1);
+  }, [goToSlide, selectedIndex, images.length]);
+
+  const handleScroll = useCallback(() => {
+    clearTimeout(settleTimerRef.current);
+    if (isProgrammaticRef.current) {
+      settleTimerRef.current = setTimeout(() => {
+        isProgrammaticRef.current = false;
+      }, SETTLE_DELAY);
+      return;
+    }
+    const track = trackRef.current;
+    if (!track) return;
+    const newIndex = Math.round(track.scrollLeft / track.clientWidth);
+    if (newIndex >= 0 && newIndex < images.length) {
+      setSelectedIndex(newIndex);
+    }
+  }, [images.length]);
+
+  const handleMouseDown = useCallback((e: MouseEvent) => {
+    const track = trackRef.current;
+    if (!track) return;
+    cancelAnimationFrame(animFrameRef.current);
+    isDraggingRef.current = true;
+    dragStartXRef.current = e.pageX;
+    dragScrollLeftRef.current = track.scrollLeft;
+    track.style.scrollSnapType = "none";
+    track.style.cursor = "grabbing";
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDraggingRef.current) return;
+    e.preventDefault();
+    const track = trackRef.current;
+    if (!track) return;
+    track.scrollLeft = dragScrollLeftRef.current - (e.pageX - dragStartXRef.current);
+  }, []);
+
+  const handleMouseEnd = useCallback((e: MouseEvent) => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    const track = trackRef.current;
+    if (!track) return;
+    track.style.cursor = "";
+
+    const dragDelta = dragStartXRef.current - e.pageX;
+    const threshold = track.clientWidth * DRAG_THRESHOLD_RATIO;
+    let targetIndex = Math.round(dragScrollLeftRef.current / track.clientWidth);
+    if (dragDelta > threshold) targetIndex++;
+    else if (dragDelta < -threshold) targetIndex--;
+    const clamped = Math.max(0, Math.min(targetIndex, images.length - 1));
+
+    isProgrammaticRef.current = true;
+    setSelectedIndex(clamped);
+    smoothScrollTo(track, track.clientWidth * clamped);
+    scrollThumbIntoView(clamped);
+  }, [images.length, smoothScrollTo, scrollThumbIntoView]);
+
+  return (
+    <div className="kombos-pd__gallery">
+      {hasMultiple && (
+        <div className="kombos-pd__thumbs" ref={thumbsRef}>
+          {images.map((img, i) => (
+            <button
+              key={img.id || i}
+              type="button"
+              className={cx("kombos-pd__thumb", i === selectedIndex && "kombos-pd__thumb--active")}
+              onClick={() => goToSlide(i)}
+              style={thumbStyle}
+            >
+              {img.isVideo ? (
+                <div className="kombos-pd__thumb-video">
+                  <video
+                    src={getDefaultSrc(img)}
+                    className="kombos-pd__thumb-img"
+                    style={imageStyle}
+                    muted
+                    preload="metadata"
+                  >
+                    <track kind="captions" />
+                  </video>
+                  <span className="kombos-pd__thumb-play">
+                    <PlaySVG />
+                  </span>
+                </div>
+              ) : (
+                <img
+                  src={getThumbnailSrc(img)}
+                  srcSet={createMediaSrcset(img)}
+                  sizes="112px"
+                  alt={`${productName} ${i + 1}`}
+                  className="kombos-pd__thumb-img"
+                  style={imageStyle}
+                />
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="kombos-pd__main-col">
+        <div
+          className="kombos-pd__main-image-wrap"
+          ref={mainWrapRef}
+          style={{ aspectRatio: resolvedAR }}
+        >
+          <div
+            className="kombos-pd__track"
+            ref={trackRef}
+            onScroll={handleScroll}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseEnd}
+            onMouseLeave={handleMouseEnd}
+          >
+            {images.length > 0 ? (
+              images.map((img, i) => (
+                <div key={img.id || i} className="kombos-pd__slide">
+                  {img.isVideo ? (
+                    <video
+                      className="kombos-pd__main-image kombos-pd__main-video"
+                      src={getDefaultSrc(img)}
+                      loop
+                      muted
+                      playsInline
+                      style={imageStyle}
+                    >
+                      <track kind="captions" />
+                    </video>
+                  ) : (
+                    <img
+                      className="kombos-pd__main-image"
+                      src={getDefaultSrc(img)}
+                      srcSet={createMediaSrcset(img)}
+                      sizes="(max-width: 1023px) 100vw, min(calc((100vw - 440px) / 2), 530px)"
+                      alt={img?.altText || `${productName} ${i + 1}`}
+                      style={imageStyle}
+                      loading={i === 0 ? "eager" : "lazy"}
+                      fetchpriority={i === 0 ? "high" : undefined}
+                    />
+                  )}
+                </div>
+              ))
+            ) : (
+              <div className="kombos-pd__slide">
+                <div className="kombos-pd__main-image kombos-pd__main-image--placeholder">
+                  <NoProductSVG />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {hasMultiple && (
+            <>
+              <SliderArrow
+                direction="left"
+                className="kombos-pd__arrow kombos-pd__arrow--prev"
+                onClick={handlePrev}
+              />
+              <SliderArrow
+                direction="right"
+                className="kombos-pd__arrow kombos-pd__arrow--next"
+                onClick={handleNext}
+              />
+            </>
+          )}
+
+          {hasMultiple && (
+            <div className="kombos-pd__dots">
+              {images.map((_, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  className={cx("kombos-pd__dot", i === selectedIndex && "kombos-pd__dot--active")}
+                  onClick={() => goToSlide(i)}
+                  aria-label={`${images[i]?.isVideo ? "Video" : "Image"} ${i + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/data/section-templates/image-handling/components/ProductGallery/styles.css

@@ -0,0 +1,213 @@
+/* ---- Gallery ---- */
+.kombos-pd__gallery {
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-pd__thumbs {
+  display: none;
+}
+
+.kombos-pd__main-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-pd__main-image-wrap {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.kombos-pd__track {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  cursor: grab;
+  user-select: none;
+}
+
+.kombos-pd__track::-webkit-scrollbar {
+  display: none;
+}
+
+.kombos-pd__slide {
+  flex: 0 0 100%;
+  width: 100%;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.kombos-pd__main-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -webkit-user-drag: none;
+  user-drag: none;
+  pointer-events: none;
+}
+
+.kombos-pd__main-video {
+  pointer-events: auto;
+  cursor: default;
+}
+
+.kombos-pd__thumb-video {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.kombos-pd__thumb-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: var(--kombos-white);
+  font-size: 0.75rem;
+}
+
+.kombos-pd__main-image--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: 5rem;
+}
+
+/* Arrow buttons */
+.kombos-pd__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.kombos-pd__arrow--prev {
+  left: 1.25rem;
+}
+
+.kombos-pd__arrow--next {
+  right: 1.25rem;
+}
+
+/* Dots */
+.kombos-pd__dots {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+}
+
+.kombos-pd__dot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kombos-pd__dot::after {
+  content: "";
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 10px;
+  border: 1px solid var(--kombos-gray-100);
+  background: var(--kombos-white);
+  transition: all 0.15s;
+}
+
+.kombos-pd__dot--active::after {
+  width: 2rem;
+  background: var(--kombos-gray-900);
+  border-color: var(--kombos-gray-200);
+}
+
+/* ===== Tablet (>=768px) ===== */
+@media (min-width: 768px) {
+  .kombos-pd__gallery {
+    flex-direction: row;
+    gap: 1.25rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .kombos-pd__thumbs {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    flex-shrink: 0;
+    width: 7rem;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  .kombos-pd__thumbs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .kombos-pd__thumb {
+    width: 7rem;
+    flex-shrink: 0;
+    border-radius: 12px;
+    border: 1px solid var(--kombos-gray-200);
+    overflow: hidden;
+    cursor: pointer;
+    padding: 0.375rem;
+    background: var(--kombos-white);
+    transition: border-color 0.15s;
+  }
+
+  .kombos-pd__thumb:hover {
+    border-color: var(--kombos-gray-500);
+  }
+
+  .kombos-pd__thumb--active {
+    border-color: var(--kombos-gray-900);
+  }
+
+  .kombos-pd__thumb-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 8px;
+  }
+
+  .kombos-pd__main-col {
+    align-self: flex-start;
+  }
+
+  .kombos-pd__main-image-wrap {
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .kombos-pd__main-image {
+    max-height: 45.75rem;
+    border-radius: 6px;
+  }
+
+}

package/data/section-templates/image-handling/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/image-handling/ikas-config-snippet.json

@@ -0,0 +1,80 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail",
+  "name": "ProductDetail",
+  "type": "section",
+  "entry": "./src/components/ProductDetail/index.tsx",
+  "styles": "./src/components/ProductDetail/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "aspectRatio",
+      "displayName": "En Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "gorsel-ayarlari",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "objectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "gorsel-ayarlari",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "components",
+      "displayName": "Bilgi Bileşenleri",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-product-detail-name-favorite",
+        "{{PROJECT_ID}}-product-detail-sku",
+        "{{PROJECT_ID}}-product-detail-prices",
+        "{{PROJECT_ID}}-product-detail-product-group",
+        "{{PROJECT_ID}}-product-detail-variant",
+        "{{PROJECT_ID}}-product-detail-add-to-cart",
+        "{{PROJECT_ID}}-product-detail-features",
+        "{{PROJECT_ID}}-product-detail-description",
+        "{{PROJECT_ID}}-product-detail-bundle-product",
+        "{{PROJECT_ID}}-product-detail-option-set",
+        "{{PROJECT_ID}}-product-detail-offer"
+      ]
+    },
+    {
+      "name": "bottomComponents",
+      "displayName": "Alt Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-product-detail-bundle-furniture",
+        "{{PROJECT_ID}}-product-detail-offer"
+      ]
+    },
+    {
+      "name": "homepageText",
+      "displayName": "Anasayfa Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Anasayfa",
+      "groupId": "metinler"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "gorsel-ayarlari",
+      "name": "Görsel Ayarları",
+      "description": "Ürün görselinin en boy oranı ve sığdırma modu"
+    },
+    {
+      "id": "metinler",
+      "name": "Metinler",
+      "description": "Breadcrumb ve sayfa metinleri"
+    }
+  ]
+}