@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/product-detail-section/children/ProductDetailBundleProduct/components/BundleProductItem/styles.css

@@ -0,0 +1,141 @@
+/* ===== BundleProductItem ===== */
+.kombos-bundle-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-item__image-wrap {
+  display: block;
+  width: 6.25rem;
+  min-width: 6.25rem;
+  height: fit-content;
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--kombos-gray-50);
+  text-decoration: none;
+}
+
+.kombos-bundle-item__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kombos-bundle-item__image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 2rem;
+  color: var(--kombos-gray-300);
+}
+
+.kombos-bundle-item__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-bundle-item__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.kombos-bundle-item__name {
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  width: fit-content;
+}
+
+a.kombos-bundle-item__name:hover {
+  text-decoration: underline;
+}
+
+.kombos-bundle-item__unit-price {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+
+.kombos-bundle-item__final-price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-item__sell-price {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-item__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
+.kombos-bundle-item__qty-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-bundle-item__qty-label {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-item__total-price {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.kombos-bundle-item__total-final {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-item__total-sell {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-item__out-of-stock {
+  color: var(--kombos-error);
+}
+
+/* ===== Mobile adjustments (< 768px) ===== */
+@media (max-width: 767px) {
+  .kombos-bundle-item__image-wrap {
+    width: 4.5rem;
+    min-width: 4.5rem;
+  }
+
+  .kombos-bundle-item__header {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .kombos-bundle-item__unit-price {
+    margin-left: 0;
+  }
+
+  .kombos-bundle-item__qty-row {
+    flex-wrap: wrap;
+  }
+}
+

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

@@ -0,0 +1,35 @@
+interface Props {
+  count?: number;
+  variant?: "card" | "table";
+}
+
+export default function BundleSkeletonLoading({ count = 3, variant = "card" }: Props) {
+  if (variant === "table") {
+    return (
+      <div className="kombos-bundle-skeleton-table">
+        <div className="kombos-bundle-skeleton-table__header kombos-bundle-skeleton__shimmer" />
+        {Array.from({ length: count }).map((_, i) => (
+          <div key={i} className="kombos-bundle-skeleton-table__row">
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--wide kombos-bundle-skeleton__shimmer" />
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--price kombos-bundle-skeleton__shimmer" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="kombos-bundle-skeleton">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="kombos-bundle-skeleton__item">
+          <div className="kombos-bundle-skeleton__image kombos-bundle-skeleton__shimmer" />
+          <div className="kombos-bundle-skeleton__info">
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--wide kombos-bundle-skeleton__shimmer" />
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--medium kombos-bundle-skeleton__shimmer" />
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--narrow kombos-bundle-skeleton__shimmer" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleProduct/components/BundleSkeletonLoading/styles.css

@@ -0,0 +1,85 @@
+/* ===== BundleSkeletonLoading ===== */
+.kombos-bundle-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-bundle-skeleton__item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton__image {
+  width: 6.25rem;
+  min-width: 6.25rem;
+  height: 4.75rem;
+  border-radius: 6px;
+  background-color: var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.kombos-bundle-skeleton__bar {
+  height: 0.875rem;
+  border-radius: 4px;
+  background-color: var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton__bar--wide {
+  width: 70%;
+}
+
+.kombos-bundle-skeleton__bar--medium {
+  width: 50%;
+}
+
+.kombos-bundle-skeleton__bar--narrow {
+  width: 35%;
+}
+
+.kombos-bundle-skeleton__bar--price {
+  width: 4.5rem;
+  margin-left: auto;
+}
+
+/* ===== Table variant ===== */
+.kombos-bundle-skeleton-table {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-bundle-skeleton-table__header {
+  height: 2.75rem;
+  background-color: var(--kombos-gray-200);
+}
+
+.kombos-bundle-skeleton-table__row {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton-table__row:last-child {
+  border-bottom: none;
+}
+
+.kombos-bundle-skeleton__shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--kombos-gray-100) 25%,
+    var(--kombos-gray-50) 50%,
+    var(--kombos-gray-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: kombos-shimmer 1.5s ease-in-out infinite;
+}

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

@@ -0,0 +1,51 @@
+import {
+  shouldDisplayBundleProductPrice,
+  getBundleProductFormattedFinalPrice,
+  getProductHref,
+  IkasBundleProduct,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+  withoutLink?: boolean;
+  quantityLabel: string;
+}
+
+const FurnitureRow = observer(function FurnitureRow({
+  bundleProduct,
+  withoutLink,
+  quantityLabel,
+}: Props) {
+  const product = bundleProduct.product;
+  if (!product || bundleProduct.quantity === 0) return null;
+
+  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
+  const formattedPrice = showPrice
+    ? getBundleProductFormattedFinalPrice(bundleProduct)
+    : "";
+  const productHref = getProductHref(product);
+
+  const NameTag = withoutLink ? "span" : "a";
+  const nameProps = withoutLink ? {} : { href: productHref };
+
+  return (
+    <tr className="kombos-bundle-table__row">
+      <td className="kombos-bundle-table__cell kombos-bundle-table__cell--name">
+        <NameTag
+          className="kombos-bundle-table__link text-sm-regular"
+          {...nameProps}
+        >
+          {product.name}
+        </NameTag>
+      </td>
+      <td className="kombos-bundle-table__cell kombos-bundle-table__cell--price text-sm-medium">
+        {showPrice && formattedPrice
+          ? `${bundleProduct.quantity} x ${formattedPrice}`
+          : `${quantityLabel} ${bundleProduct.quantity}`}
+      </td>
+    </tr>
+  );
+});
+
+export default FurnitureRow;

package/data/section-templates/product-detail-section/children/ProductDetailBundleProduct/components/FurnitureRow/styles.css

@@ -0,0 +1,30 @@
+.kombos-bundle-table__row {
+  border-bottom: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-bundle-table__row:last-child {
+  border-bottom: none;
+}
+
+.kombos-bundle-table__cell {
+  padding: 0.75rem 1rem;
+}
+
+.kombos-bundle-table__cell--name {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-table__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.kombos-bundle-table__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-bundle-table__cell--price {
+  color: var(--kombos-gray-900);
+  text-align: right;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,54 @@
+import { IkasBundleProduct } from "@ikas/bp-storefront";
+import BundleSkeletonLoading from "../BundleSkeletonLoading";
+import FurnitureRow from "../FurnitureRow";
+
+interface Props {
+  marginStyles: Record<string, string>;
+  isLoading: boolean;
+  skeletonCount: number;
+  sortedProducts: IkasBundleProduct[];
+  productContentTitle: string;
+  bundleProductWithoutLink?: boolean;
+  quantityLabel: string;
+}
+
+export default function FurnitureView({
+  marginStyles,
+  isLoading,
+  skeletonCount,
+  sortedProducts,
+  productContentTitle,
+  bundleProductWithoutLink,
+  quantityLabel,
+}: Props) {
+  return (
+    <div
+      className="kombos-bundle"
+      style={{ ...marginStyles, "--kombos-bundle-table-border": "var(--kombos-gray-900)" }}
+    >
+      {isLoading ? (
+        <BundleSkeletonLoading count={skeletonCount} variant="table" />
+      ) : (
+        <div className="kombos-bundle-table">
+          <div className="kombos-bundle-table__header">
+            <span className="kombos-bundle-table__title text-md-semibold">
+              {productContentTitle}
+            </span>
+          </div>
+          <table className="kombos-bundle-table__table">
+            <tbody>
+              {sortedProducts.map((bp) => (
+                <FurnitureRow
+                  key={bp.id}
+                  bundleProduct={bp}
+                  withoutLink={bundleProductWithoutLink}
+                  quantityLabel={quantityLabel}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleProduct/components/FurnitureView/styles.css

@@ -0,0 +1,22 @@
+.kombos-bundle-table {
+  border: 1px solid var(--kombos-bundle-table-border, var(--kombos-gray-900));
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-bundle-table__header {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background-color: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-bundle-table__title {
+  color: inherit;
+}
+
+.kombos-bundle-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleProduct/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/product-detail-section/children/ProductDetailBundleProduct/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/product-detail-section/children/ProductDetailBundleProduct/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/product-detail-section/children/ProductDetailBundleProduct/types.ts

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