@ikas/component-cli 0.93.0 → 0.94.0

package/templates/create-full/src/components/ProductDetailBundleFurniture/components/BundleFurnitureRow/index.tsx

@@ -0,0 +1,164 @@
+import {
+  IkasBundleProduct,
+  getSelectedProductVariant,
+  shouldDisplayBundleProductPrice,
+  getBundleProductFormattedFinalPrice,
+  getBundleProductFormattedFinalPriceWithQuantity,
+  getBundleProductFormattedSellPrice,
+  getBundleProductFormattedSellPriceWithQuantity,
+  getBundleProductFinalPrice,
+  getBundleProductSellPrice,
+  getBundleProductFinalPriceWithQuantity,
+  getBundleProductSellPriceWithQuantity,
+  hasProductVariantStock,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+import VariantBadge from "../../../../sub-components/VariantBadge";
+import BundleQuantityBox from "../../../../sub-components/BundleQuantityBox";
+import BundleMedia from "../../../../sub-components/BundleMedia";
+import { adjustBundleProductQuantity } from "../../../../utils/bundle";
+
+export interface BundleFurnitureRowTexts {
+  outOfStockText: string;
+}
+
+interface PriceCellProps {
+  formattedFinalPrice: string;
+  formattedSellPrice: string;
+  hasDiscount: boolean;
+  finalTypography: string;
+}
+
+function PriceCell({
+  formattedFinalPrice,
+  formattedSellPrice,
+  hasDiscount,
+  finalTypography,
+}: PriceCellProps) {
+  return (
+    <div className="kombos-bundle-furniture__price-col">
+      <span className={finalTypography}>{formattedFinalPrice}</span>
+      {hasDiscount && (
+        <span className="kombos-bundle-furniture__old-price text-sm-regular-strike">
+          {formattedSellPrice}
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+  texts: BundleFurnitureRowTexts;
+  showFeatures: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+const BundleFurnitureRow = observer(function BundleFurnitureRow({
+  bundleProduct,
+  texts,
+  showFeatures,
+  aspectRatio = "Square",
+  objectFit = "Cover",
+}: Props) {
+  const product = bundleProduct.product;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const hasStock = selectedVariant
+    ? hasProductVariantStock(selectedVariant)
+    : false;
+  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
+
+  const unitFinalPrice = getBundleProductFinalPrice(bundleProduct);
+  const unitSellPrice = getBundleProductSellPrice(bundleProduct);
+  const hasUnitDiscount = showPrice && unitFinalPrice !== unitSellPrice;
+
+  const totalFinalPrice = getBundleProductFinalPriceWithQuantity(bundleProduct);
+  const totalSellPrice = getBundleProductSellPriceWithQuantity(bundleProduct);
+  const hasTotalDiscount =
+    showPrice &&
+    totalFinalPrice !== totalSellPrice &&
+    bundleProduct.quantity > 0;
+
+  const showTotalPrice = showPrice && bundleProduct.quantity > 0;
+
+  return (
+    <tr className="kombos-bundle-furniture__row">
+      {/* Parts: image + name */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--parts">
+        <div className="kombos-bundle-furniture__part-info">
+          <BundleMedia
+            variant={selectedVariant}
+            alt=""
+            aspectRatio={aspectRatio}
+            objectFit={objectFit}
+            wrapperClassName="kombos-bundle-furniture__thumb"
+            mediaClassName="kombos-bundle-furniture__thumb-img"
+            placeholderClassName="kombos-bundle-furniture__thumb-placeholder"
+          />
+          <span className="kombos-bundle-furniture__part-name text-sm-medium">
+            {product.name}
+          </span>
+        </div>
+      </td>
+
+      {/* Unit Price */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--price">
+        {showPrice ? (
+          <PriceCell
+            formattedFinalPrice={getBundleProductFormattedFinalPrice(
+              bundleProduct,
+            )}
+            formattedSellPrice={getBundleProductFormattedSellPrice(
+              bundleProduct,
+            )}
+            hasDiscount={hasUnitDiscount}
+            finalTypography="text-sm-medium"
+          />
+        ) : (
+          <span className="text-sm-regular">-</span>
+        )}
+      </td>
+
+      {/* Quantity */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--qty">
+        <BundleQuantityBox bundleProduct={bundleProduct} />
+        {!hasStock && (
+          <span className="kombos-bundle-furniture__no-stock text-xs-medium">
+            {texts.outOfStockText}
+          </span>
+        )}
+      </td>
+
+      {/* Features (variants) */}
+      {showFeatures && (
+        <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--features">
+          <VariantBadge product={product} disableRoute size="xs" onSelect={() => adjustBundleProductQuantity(bundleProduct)} />
+        </td>
+      )}
+
+      {/* Total Price */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--total">
+        {showTotalPrice ? (
+          <PriceCell
+            formattedFinalPrice={getBundleProductFormattedFinalPriceWithQuantity(
+              bundleProduct,
+            )}
+            formattedSellPrice={getBundleProductFormattedSellPriceWithQuantity(
+              bundleProduct,
+            )}
+            hasDiscount={hasTotalDiscount}
+            finalTypography="text-sm-semibold"
+          />
+        ) : (
+          <span className="text-sm-regular">-</span>
+        )}
+      </td>
+    </tr>
+  );
+});
+
+export default BundleFurnitureRow;

package/templates/create-full/src/components/ProductDetailBundleFurniture/components/BundleFurnitureSection/index.tsx

@@ -0,0 +1,134 @@
+import { useState } from "preact/hooks";
+import {
+  IkasBundleProduct,
+  IkasBundleSettings,
+  getDisplayedProductVariantTypes,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+import { cx } from "../../../../utils/cx";
+import BundleFurnitureRow from "../BundleFurnitureRow";
+
+interface Texts {
+  productContentTitle: string;
+  partsLabel: string;
+  unitPriceLabel: string;
+  quantityLabel: string;
+  featuresLabel: string;
+  totalPriceLabel: string;
+  outOfStockText: string;
+  addProductItemText: string;
+}
+
+interface Props {
+  bundleSettings: IkasBundleSettings;
+  isLoading: boolean;
+  texts: Texts;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+function hasAnyVariants(products: IkasBundleProduct[]): boolean {
+  return products.some((bp) => {
+    if (!bp.product) return false;
+    return getDisplayedProductVariantTypes(bp.product).length > 0;
+  });
+}
+
+const COLUMN_HEADER_CLASS = "kombos-bundle-furniture__th text-sm-semibold";
+
+const BundleFurnitureSection = observer(function BundleFurnitureSection({
+  bundleSettings,
+  isLoading,
+  texts,
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const sortedProducts = [...bundleSettings.products].sort(
+    (a, b) => a.order - b.order,
+  );
+  const showFeatures = hasAnyVariants(sortedProducts);
+
+  return (
+    <div className="kombos-bundle-furniture" id="bundle-furniture-section">
+      {/* Collapsible header */}
+      <button
+        type="button"
+        className="kombos-bundle-furniture__toggle"
+        onClick={() => setIsExpanded((prev) => !prev)}
+        aria-expanded={isExpanded}
+      >
+        <span className="kombos-bundle-furniture__toggle-text text-sm-semibold">
+          {texts.productContentTitle}
+        </span>
+        <span
+          className={cx(
+            "kombos-bundle-furniture__toggle-icon",
+            isExpanded && "kombos-bundle-furniture__toggle-icon--open",
+          )}
+        />
+      </button>
+
+      {/* Table content */}
+      {isExpanded && (
+        <div className="kombos-bundle-furniture__body">
+          {isLoading ? (
+            <div className="kombos-bundle-furniture__loading">
+              <div className="kombos-bundle-furniture__spinner" />
+            </div>
+          ) : (
+            <div className="kombos-bundle-furniture__table-wrap">
+              <table className="kombos-bundle-furniture__table">
+                <colgroup>
+                  <col style={{ width: showFeatures ? "33.33%" : "40%" }} />
+                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
+                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
+                  {showFeatures && <col style={{ width: "16.67%" }} />}
+                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
+                </colgroup>
+                <thead>
+                  <tr className="kombos-bundle-furniture__head-row">
+                    <th className={COLUMN_HEADER_CLASS}>{texts.partsLabel}</th>
+                    <th className={COLUMN_HEADER_CLASS}>
+                      {texts.unitPriceLabel}
+                    </th>
+                    <th className={COLUMN_HEADER_CLASS}>
+                      {texts.quantityLabel}
+                    </th>
+                    {showFeatures && (
+                      <th className={COLUMN_HEADER_CLASS}>
+                        {texts.featuresLabel}
+                      </th>
+                    )}
+                    <th
+                      className={COLUMN_HEADER_CLASS}
+                      style={{ textAlign: "right" }}
+                    >
+                      {texts.totalPriceLabel}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {sortedProducts.map((bp) => (
+                    <BundleFurnitureRow
+                      key={bp.id}
+                      bundleProduct={bp}
+                      texts={texts}
+                      showFeatures={showFeatures}
+                      aspectRatio={aspectRatio}
+                      objectFit={objectFit}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default BundleFurnitureSection;

package/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/ProductDetailBundleFurniture/types.ts

@@ -0,0 +1,21 @@
+// This file is auto-generated — do not edit manually.
+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;
+}