@ikas/component-cli 0.101.0 → 0.103.0

package/templates/create-full/src/components/ProductDetailBundleProduct/components/BundleProductItem/index.tsx

@@ -1,169 +0,0 @@
-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

@@ -1,141 +0,0 @@
-/* ===== 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

@@ -1,35 +0,0 @@
-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

@@ -1,85 +0,0 @@
-/* ===== 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

@@ -1,51 +0,0 @@
-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

@@ -1,30 +0,0 @@
-.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

@@ -1,54 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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

@@ -1,101 +0,0 @@
-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;