@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/bundle-products/hooks/useBundleProducts.ts

@@ -0,0 +1,75 @@
+import { useState, useEffect, useMemo } from "preact/hooks";
+import {
+  getSelectedProductVariant,
+  getBundleProductsOfVariant,
+  initBundleProducts,
+  hasBundleSettings,
+  IkasBundleProduct,
+  IkasProduct,
+  cartStore,
+  waitForCartStoreInit,
+} from "@ikas/bp-storefront";
+import { runInAction } from "mobx";
+import { adjustBundleProductQuantity } from "../utils/bundle";
+
+function adjustBundleQuantities(products: IkasBundleProduct[]) {
+  runInAction(() => {
+    for (const bp of products) {
+      adjustBundleProductQuantity(bp);
+    }
+  });
+}
+
+export function useBundleProducts(product: IkasProduct | null | undefined) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const editLineID =
+    typeof window !== "undefined"
+      ? new URLSearchParams(window.location.search).get("editLineID")
+      : null;
+
+  const selectedVariant = product ? getSelectedProductVariant(product) : null;
+
+  const hasBundle = selectedVariant
+    ? hasBundleSettings(selectedVariant)
+    : false;
+
+  const bundleSettings = hasBundle ? selectedVariant!.bundleSettings : null;
+
+  useEffect(() => {
+    if (!product || !selectedVariant || !bundleSettings) return;
+
+    let cancelled = false;
+
+    async function load() {
+      setIsLoading(true);
+
+      try {
+        if (editLineID) await waitForCartStoreInit(cartStore);
+
+        await getBundleProductsOfVariant(product!, selectedVariant!);
+        await initBundleProducts(product!);
+
+        if (!cancelled && bundleSettings) {
+          adjustBundleQuantities(bundleSettings.products);
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedVariant, editLineID]);
+
+  const sortedProducts = useMemo(() => {
+    if (!bundleSettings) return [];
+
+    return [...bundleSettings.products].sort((a, b) => a.order - b.order);
+  }, [bundleSettings?.products]);
+
+  return { isLoading, selectedVariant, bundleSettings, sortedProducts };
+}

package/data/section-templates/bundle-products/ikas-config-snippet.json

@@ -0,0 +1,130 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-bundle-product",
+  "name": "ProductDetailBundleProduct",
+  "type": "component",
+  "entry": "./src/components/ProductDetailBundleProduct/index.tsx",
+  "styles": "./src/components/ProductDetailBundleProduct/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "mobileMarginTop",
+      "displayName": "Üst Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "mobileMarginBottom",
+      "displayName": "Alt Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "desktopMarginTop",
+      "displayName": "Üst Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "desktopMarginBottom",
+      "displayName": "Alt Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "isBundleFurniture",
+      "displayName": "Mobilya Bundle Modu",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "settings"
+    },
+    {
+      "name": "bundleProductWithoutLink",
+      "displayName": "Ürün Linkini Kapat",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "settings"
+    },
+    {
+      "name": "quantityLabel",
+      "displayName": "Adet Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Adet",
+      "groupId": "texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Stokta Yok Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Stokta yok",
+      "groupId": "texts"
+    },
+    {
+      "name": "productContentTitle",
+      "displayName": "Takım İçeriği Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Takım içeriği",
+      "groupId": "texts"
+    },
+    {
+      "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"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "appearance",
+      "name": "Görünüm Ayarları",
+      "children": [
+        {
+          "id": "mobile",
+          "name": "Mobil Görünüm",
+          "description": "Mobil cihazlarda uygulanacak margin ayarları"
+        },
+        {
+          "id": "desktop",
+          "name": "Masaüstü Görünüm",
+          "description": "Masaüstü cihazlarda uygulanacak margin ayarları"
+        }
+      ],
+      "description": "Bileşenin mobil ve masaüstü görünüm ayarları"
+    },
+    {
+      "id": "settings",
+      "name": "Ayarlar",
+      "description": "Bundle davranışını kontrol eden ayarlar"
+    },
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Bileşende görüntülenen metin etiketleri"
+    }
+  ]
+}

package/data/section-templates/bundle-products/index.tsx

@@ -0,0 +1,101 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import { useBundleProducts } from "../../hooks/useBundleProducts";
+import BundleProductItem from "./components/BundleProductItem";
+import BundleSkeletonLoading from "./components/BundleSkeletonLoading";
+import FurnitureView from "./components/FurnitureView";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function buildMarginStyles(
+  props: Pick<
+    Props,
+    | "mobileMarginTop"
+    | "mobileMarginBottom"
+    | "desktopMarginTop"
+    | "desktopMarginBottom"
+  >,
+) {
+  return {
+    "--mobile-mt": getFormattedMarginTopSize(props.mobileMarginTop),
+    "--mobile-mb": getFormattedMarginBottomSize(props.mobileMarginBottom),
+    "--desktop-mt": getFormattedMarginTopSize(props.desktopMarginTop),
+    "--desktop-mb": getFormattedMarginBottomSize(props.desktopMarginBottom),
+  } as Record<string, string>;
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function ProductDetailBundleProduct({
+  product,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+  isBundleFurniture,
+  bundleProductWithoutLink,
+  quantityLabel = "Adet",
+  outOfStockText = "Stokta yok",
+  productContentTitle = "Takım içeriği",
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const { isLoading, selectedVariant, bundleSettings, sortedProducts } =
+    useBundleProducts(product);
+
+  if (!product || !selectedVariant || !bundleSettings) return null;
+
+  const marginStyles = buildMarginStyles({
+    mobileMarginTop,
+    mobileMarginBottom,
+    desktopMarginTop,
+    desktopMarginBottom,
+  });
+
+  const skeletonCount = sortedProducts.length || 3;
+
+  if (isBundleFurniture) {
+    return (
+      <FurnitureView
+        marginStyles={marginStyles}
+        isLoading={isLoading}
+        skeletonCount={skeletonCount}
+        sortedProducts={sortedProducts}
+        productContentTitle={productContentTitle}
+        bundleProductWithoutLink={bundleProductWithoutLink}
+        quantityLabel={quantityLabel}
+      />
+    );
+  }
+
+  return (
+    <div className="kombos-bundle" style={marginStyles}>
+      <div className="kombos-bundle__list">
+        {isLoading ? (
+          <BundleSkeletonLoading count={skeletonCount} />
+        ) : (
+          sortedProducts.map((bp) => (
+            <BundleProductItem
+              key={bp.id}
+              bundleProduct={bp}
+              quantityLabel={quantityLabel}
+              outOfStockText={outOfStockText}
+              bundleProductWithoutLink={bundleProductWithoutLink}
+              aspectRatio={aspectRatio}
+              objectFit={objectFit}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ProductDetailBundleProduct;

package/data/section-templates/bundle-products/styles.css

@@ -0,0 +1,20 @@
+/* ===== ProductDetailBundleProduct ===== */
+.kombos-bundle {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+.kombos-bundle__list {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+  .kombos-bundle {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

package/data/section-templates/bundle-products/sub-components/Badge/index.tsx

@@ -0,0 +1,208 @@
+import { ComponentChildren } from "preact";
+import {
+  IkasImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+
+const TYPO_MAP = {
+  xs: "text-xs-medium",
+  s: "text-sm-medium",
+  m: "text-md-medium",
+  l: "text-md-medium",
+} as const;
+
+type Size = "xs" | "s" | "m" | "l";
+
+interface BaseProps {
+  size?: Size;
+  selected?: boolean;
+  outOfStock?: boolean;
+  href?: string;
+  onClick?: () => void;
+  title?: string;
+  "aria-label"?: string;
+}
+
+function StrikeLine() {
+  return <span className="kombos-badge__strike" />;
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeImage                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeImageProps extends BaseProps {
+  image: IkasImage;
+  alt: string;
+  sizes?: string;
+  variantImg?: boolean;
+}
+
+export function BadgeImage({
+  image,
+  alt,
+  sizes = "64px",
+  variantImg,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeImageProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--image",
+    variantImg && "kombos-badge--variant-img",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      <img
+        src={getDefaultSrc(image)}
+        srcSet={createMediaSrcset(image)}
+        sizes={sizes}
+        alt={alt}
+        className="kombos-badge__img"
+      />
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeColor                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeColorProps extends BaseProps {
+  colorCode: string;
+}
+
+export function BadgeColor({
+  colorCode,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeColorProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--color",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = outOfStock ? <StrikeLine /> : null;
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={className}
+        style={{ backgroundColor: colorCode }}
+        title={title}
+        aria-label={ariaLabel}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      style={{ backgroundColor: colorCode }}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeText                                                          */
+/* ------------------------------------------------------------------ */
+
+interface BadgeTextProps extends BaseProps {
+  children: ComponentChildren;
+}
+
+export function BadgeText({
+  children,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeTextProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--text",
+    `kombos-badge--${size}`,
+    TYPO_MAP[size],
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      {children}
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}

package/data/section-templates/bundle-products/sub-components/Badge/styles.css

@@ -0,0 +1,129 @@
+/* ===== Badge Primitives ===== */
+
+/* ---- Base badge ---- */
+.kombos-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  min-width: 2.25rem;
+  cursor: pointer;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Reset for <button> */
+  padding: 0;
+  font: inherit;
+  /* Reset for <a> */
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease;
+}
+
+/* ---- Size: xs ---- */
+.kombos-badge--xs {
+  height: 1.75rem;
+  min-width: 1.75rem;
+}
+
+.kombos-badge--xs.kombos-badge--color,
+.kombos-badge--xs.kombos-badge--image {
+  width: 1.75rem;
+}
+
+.kombos-badge--image.kombos-badge--variant-img.kombos-badge--xs {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* ---- Type: text ---- */
+.kombos-badge--text {
+  color: var(--kombos-gray-700);
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.kombos-badge--xs.kombos-badge--text {
+  padding: 0 0.375rem;
+}
+
+.kombos-badge--s.kombos-badge--text {
+  padding: 0 0.5rem;
+}
+
+.kombos-badge--m.kombos-badge--text,
+.kombos-badge--l.kombos-badge--text {
+  padding: 0 0.75rem;
+}
+
+/* ---- Type: color ---- */
+.kombos-badge--color {
+  width: 2.25rem;
+  padding: 0;
+}
+
+/* ---- Type: image ---- */
+.kombos-badge--image {
+  width: 2.25rem;
+  padding: 0;
+}
+
+.kombos-badge__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 5px;
+}
+
+/* Variant product image (larger) */
+.kombos-badge--image.kombos-badge--variant-img {
+  width: 4rem;
+  height: 4rem;
+}
+
+/* ---- States ---- */
+
+/* Hover (skip disabled buttons and out-of-stock) */
+.kombos-badge:hover:not(:disabled):not(.kombos-badge--nonstock) {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-badge--text:hover:not(:disabled):not(.kombos-badge--nonstock) {
+  color: var(--kombos-gray-900);
+}
+
+/* Selected */
+.kombos-badge--selected {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-badge--selected.kombos-badge--text {
+  background: var(--kombos-gray-50);
+  color: var(--kombos-gray-900);
+}
+
+/* Out of stock */
+.kombos-badge--nonstock {
+  cursor: not-allowed;
+}
+
+.kombos-badge--nonstock.kombos-badge--text {
+  color: var(--kombos-gray-400);
+}
+
+/* Diagonal strike line */
+.kombos-badge__strike {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to top left,
+    transparent calc(50% - 0.5px),
+    var(--kombos-gray-500) calc(50% - 0.5px),
+    var(--kombos-gray-500) calc(50% + 0.5px),
+    transparent calc(50% + 0.5px)
+  );
+}