@ikas/component-cli 0.132.0 → 1.1.0

package/templates/create-full/src/components/ProductDetailBundleFurniture/components/BundleFurnitureSection/styles.css

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

@@ -1,61 +0,0 @@
-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 = "Product Contents",
-  partsLabel = "Parts",
-  unitPriceLabel = "Unit Price",
-  quantityLabel = "Quantity",
-  featuresLabel = "Specifications",
-  totalPriceLabel = "Total Price",
-  outOfStockText = "Out of Stock",
-  addProductItemText = "Add Product",
-  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

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

@@ -1,21 +0,0 @@
-// 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;
-}

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>
-  );
-}