@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/components/BundleFurnitureSection/styles.css

@@ -0,0 +1,188 @@
+/* ===== BundleFurnitureSection ===== */
+.kombos-bundle-furniture {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* Toggle header */
+.kombos-bundle-furniture__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  background-color: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  cursor: pointer;
+  text-align: left;
+}
+
+.kombos-bundle-furniture__toggle-text {
+  color: var(--kombos-white);
+}
+
+.kombos-bundle-furniture__toggle-icon {
+  position: relative;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.kombos-bundle-furniture__toggle-icon::before,
+.kombos-bundle-furniture__toggle-icon::after {
+  content: "";
+  position: absolute;
+  background-color: var(--kombos-white);
+  transition: transform 0.25s ease;
+}
+
+.kombos-bundle-furniture__toggle-icon::before {
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 0.125rem;
+  transform: translateY(-50%);
+}
+
+.kombos-bundle-furniture__toggle-icon::after {
+  top: 0;
+  left: 50%;
+  width: 0.125rem;
+  height: 100%;
+  transform: translateX(-50%);
+}
+
+.kombos-bundle-furniture__toggle-icon--open::after {
+  transform: translateX(-50%) rotate(90deg);
+}
+
+/* Body */
+.kombos-bundle-furniture__body {
+}
+
+.kombos-bundle-furniture__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.kombos-bundle-furniture__spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--kombos-gray-200);
+  border-top-color: var(--kombos-gray-700);
+  border-radius: 50%;
+  animation: kombos-furniture-spin 0.6s linear infinite;
+}
+
+@keyframes kombos-furniture-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Table */
+.kombos-bundle-furniture__table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.kombos-bundle-furniture__table {
+  width: 100%;
+  min-width: 56.25rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.kombos-bundle-furniture__th {
+  text-align: left;
+  padding: 0.75rem;
+  color: var(--kombos-gray-500);
+  border-bottom: 1px solid var(--kombos-gray-200);
+  white-space: nowrap;
+}
+
+.kombos-bundle-furniture__row {
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-furniture__row:last-child {
+  border-bottom: none;
+}
+
+.kombos-bundle-furniture__cell {
+  padding: 0.75rem;
+  vertical-align: middle;
+}
+
+.kombos-bundle-furniture__cell--parts {
+}
+
+.kombos-bundle-furniture__cell--price,
+.kombos-bundle-furniture__cell--total {
+  white-space: nowrap;
+}
+
+.kombos-bundle-furniture__cell--total {
+  text-align: right;
+}
+
+.kombos-bundle-furniture__cell--qty {
+}
+
+.kombos-bundle-furniture__cell--features {
+}
+
+/* Part info (image + name) */
+.kombos-bundle-furniture__part-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-bundle-furniture__thumb {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-bundle-furniture__thumb-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.kombos-bundle-furniture__thumb-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 1rem;
+  color: var(--kombos-gray-300);
+}
+
+.kombos-bundle-furniture__part-name {
+  color: var(--kombos-gray-900);
+}
+
+/* Price columns */
+.kombos-bundle-furniture__price-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.kombos-bundle-furniture__old-price {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-furniture__no-stock {
+  display: block;
+  margin-top: 0.25rem;
+  color: var(--kombos-error);
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/ikas-config-snippet.json

@@ -0,0 +1,156 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-bundle-furniture",
+  "name": "ProductDetailBundleFurniture",
+  "type": "component",
+  "entry": "./src/components/ProductDetailBundleFurniture/index.tsx",
+  "styles": "./src/components/ProductDetailBundleFurniture/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "productContentTitle",
+      "displayName": "Ürün İçeriği Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürün İçeriği",
+      "groupId": "texts"
+    },
+    {
+      "name": "partsLabel",
+      "displayName": "Parçalar Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parçalar",
+      "groupId": "texts"
+    },
+    {
+      "name": "unitPriceLabel",
+      "displayName": "Birim Fiyat Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Birim Fiyat",
+      "groupId": "texts"
+    },
+    {
+      "name": "quantityLabel",
+      "displayName": "Adet Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Adet",
+      "groupId": "texts"
+    },
+    {
+      "name": "featuresLabel",
+      "displayName": "Özellikler Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Özellikler",
+      "groupId": "texts"
+    },
+    {
+      "name": "totalPriceLabel",
+      "displayName": "Toplam Fiyat Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Toplam Fiyat",
+      "groupId": "texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Stokta Yok Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Stokta yok",
+      "groupId": "texts"
+    },
+    {
+      "name": "addProductItemText",
+      "displayName": "Ürün Ekle Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürün Ekle",
+      "groupId": "texts"
+    },
+    {
+      "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": "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": "texts",
+      "name": "Metinler",
+      "description": "Bileşende görüntülenen metin etiketleri"
+    },
+    {
+      "id": "margins",
+      "name": "Kenar Boşlukları",
+      "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ü margin ayarları"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Görsel oran ve sığdırma ayarları"
+    }
+  ]
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/index.tsx

@@ -0,0 +1,61 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import { useBundleProducts } from "../../hooks/useBundleProducts";
+import BundleFurnitureSection from "./components/BundleFurnitureSection";
+
+export function ProductDetailBundleFurniture({
+  product,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+  productContentTitle = "Ürün İçeriği",
+  partsLabel = "Parçalar",
+  unitPriceLabel = "Birim Fiyat",
+  quantityLabel = "Adet",
+  featuresLabel = "Özellikler",
+  totalPriceLabel = "Toplam Fiyat",
+  outOfStockText = "Stokta yok",
+  addProductItemText = "Ürün Ekle",
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const { isLoading, selectedVariant, bundleSettings } =
+    useBundleProducts(product);
+
+  if (!product || !selectedVariant || !bundleSettings) return null;
+
+  return (
+    <div
+      className="kombos-bundle-furniture-wrapper"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      <BundleFurnitureSection
+        bundleSettings={bundleSettings}
+        isLoading={isLoading}
+        aspectRatio={aspectRatio}
+        objectFit={objectFit}
+        texts={{
+          productContentTitle,
+          partsLabel,
+          unitPriceLabel,
+          quantityLabel,
+          featuresLabel,
+          totalPriceLabel,
+          outOfStockText,
+          addProductItemText,
+        }}
+      />
+    </div>
+  );
+}
+
+export default ProductDetailBundleFurniture;

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/styles.css

@@ -0,0 +1,12 @@
+/* ===== ProductDetailBundleFurniture ===== */
+.kombos-bundle-furniture-wrapper {
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+@media (min-width: 1024px) {
+  .kombos-bundle-furniture-wrapper {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/types.ts

@@ -0,0 +1,20 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  productContentTitle?: string;
+  partsLabel?: string;
+  unitPriceLabel?: string;
+  quantityLabel?: string;
+  featuresLabel?: string;
+  totalPriceLabel?: string;
+  outOfStockText?: string;
+  addProductItemText?: string;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleProduct/components/BundleProductItem/index.tsx

@@ -0,0 +1,169 @@
+import {
+  IkasBundleProduct,
+  getSelectedProductVariant,
+  getProductHref,
+  shouldDisplayBundleProductPrice,
+  getBundleProductFinalPrice,
+  getBundleProductSellPrice,
+  getBundleProductFormattedFinalPrice,
+  getBundleProductFormattedSellPrice,
+  getBundleProductFormattedFinalPriceWithQuantity,
+  getBundleProductFormattedSellPriceWithQuantity,
+  getBundleProductFinalPriceWithQuantity,
+  getBundleProductSellPriceWithQuantity,
+  hasProductVariantStock,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import VariantBadge from "../../../../sub-components/VariantBadge";
+import BundleQuantityBox from "../../../../sub-components/BundleQuantityBox";
+import BundleMedia from "../../../../sub-components/BundleMedia";
+import { adjustBundleProductQuantity } from "../../../../utils/bundle";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+  quantityLabel: string;
+  outOfStockText: string;
+  bundleProductWithoutLink?: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+const BundleProductItem = observer(function BundleProductItem({
+  bundleProduct,
+  quantityLabel,
+  outOfStockText,
+  bundleProductWithoutLink,
+  aspectRatio = "Square",
+  objectFit = "Cover",
+}: Props) {
+  const product = bundleProduct.product;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const hasStock = selectedVariant
+    ? hasProductVariantStock(selectedVariant)
+    : false;
+
+  const productHref = getProductHref(product);
+
+  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
+  const unitFinalPrice = getBundleProductFinalPrice(bundleProduct);
+  const unitSellPrice = getBundleProductSellPrice(bundleProduct);
+  const hasDiscount = showPrice && unitFinalPrice !== unitSellPrice;
+
+  const hasQuantity = bundleProduct.quantity > 1;
+
+  const totalFinalPrice = getBundleProductFinalPriceWithQuantity(bundleProduct);
+  const totalSellPrice = getBundleProductSellPriceWithQuantity(bundleProduct);
+  const hasTotalDiscount =
+    showPrice &&
+    totalFinalPrice !== totalSellPrice &&
+    bundleProduct.quantity > 0;
+
+  const ImageWrapper = bundleProductWithoutLink ? "div" : "a";
+  const imageWrapperProps = bundleProductWithoutLink
+    ? {}
+    : { href: productHref, "aria-label": product.name };
+
+  const NameWrapper = bundleProductWithoutLink ? "span" : "a";
+  const nameWrapperProps = bundleProductWithoutLink
+    ? {}
+    : { href: productHref };
+
+  return (
+    <div className="kombos-bundle-item">
+      {/* Image */}
+      <ImageWrapper
+        className="kombos-bundle-item__image-wrap"
+        {...imageWrapperProps}
+      >
+        <BundleMedia
+          variant={selectedVariant}
+          alt={product.name}
+          aspectRatio={aspectRatio}
+          objectFit={objectFit}
+          wrapperClassName="kombos-bundle-item__media-inner"
+          mediaClassName="kombos-bundle-item__image"
+          placeholderClassName="kombos-bundle-item__image-placeholder"
+        />
+      </ImageWrapper>
+      {/* Info */}
+      <div className="kombos-bundle-item__info">
+        {/* Header: name + total price (quantity × unit) */}
+        <div className="kombos-bundle-item__header">
+          <NameWrapper
+            className="kombos-bundle-item__name text-sm-semibold"
+            {...nameWrapperProps}
+          >
+            {product.name}
+          </NameWrapper>
+          {showPrice && hasQuantity && (
+            <div className="kombos-bundle-item__total-price">
+              {hasTotalDiscount && (
+                <span className="kombos-bundle-item__total-sell text-sm-regular-strike">
+                  {getBundleProductFormattedSellPriceWithQuantity(
+                    bundleProduct,
+                  )}
+                </span>
+              )}
+              <span className="kombos-bundle-item__total-final text-sm-semibold">
+                {getBundleProductFormattedFinalPriceWithQuantity(bundleProduct)}
+              </span>
+            </div>
+          )}
+          {showPrice && !hasQuantity && (
+            <div className="kombos-bundle-item__unit-price">
+              {hasDiscount && (
+                <span className="kombos-bundle-item__sell-price text-sm-regular-strike">
+                  {getBundleProductFormattedSellPrice(bundleProduct)}
+                </span>
+              )}
+              <span className="kombos-bundle-item__final-price text-sm-semibold">
+                {getBundleProductFormattedFinalPrice(bundleProduct)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Variants */}
+        <VariantBadge
+          product={product}
+          disableRoute
+          size="xs"
+          onSelect={() => adjustBundleProductQuantity(bundleProduct)}
+        />
+
+        {/* Bottom: quantity + unit price + out of stock */}
+        <div className="kombos-bundle-item__bottom">
+          <div className="kombos-bundle-item__qty-row">
+            <span className="kombos-bundle-item__qty-label text-xs-regular">
+              {quantityLabel}
+            </span>
+            <BundleQuantityBox bundleProduct={bundleProduct} />
+            {showPrice && bundleProduct.quantity > 1 && (
+              <div className="kombos-bundle-item__unit-price">
+                {hasDiscount && (
+                  <span className="kombos-bundle-item__sell-price text-sm-regular-strike">
+                    {getBundleProductFormattedSellPrice(bundleProduct)}
+                  </span>
+                )}
+                <span className="kombos-bundle-item__final-price text-sm-semibold">
+                  {getBundleProductFormattedFinalPrice(bundleProduct)}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {!hasStock && (
+            <span className="kombos-bundle-item__out-of-stock text-xs-medium">
+              {outOfStockText}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default BundleProductItem;