@ikas/component-cli 0.103.0 → 0.104.0

package/templates/create-full/src/components/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;

package/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/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;