@ikas/component-cli 0.133.0 → 1.1.0

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 = "Quantity",
-  outOfStockText = "Out of Stock",
-  productContentTitle = "Set Contents",
-  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/templates/create-full/src/components/ProductDetailBundleProduct/styles.css

@@ -1,20 +0,0 @@
-/* ===== 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/templates/create-full/src/components/ProductDetailBundleProduct/types.ts

@@ -1,18 +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;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  isBundleFurniture?: boolean;
-  bundleProductWithoutLink?: boolean;
-  quantityLabel?: string;
-  outOfStockText?: string;
-  productContentTitle?: string;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}

package/templates/create-full/src/components/ProductDetailDescription/index.tsx

@@ -1,56 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  IkasComponentRenderer,
-} from "@ikas/bp-storefront";
-import CollapsibleGroup from "../../sub-components/CollapsibleGroup";
-import { Props } from "./types";
-
-export function ProductDetailDescription(props: Props) {
-  const {
-    product,
-    title = "Product Details",
-    defaultOpen = false,
-    mobileMarginTop,
-    mobileMarginBottom,
-    desktopMarginTop,
-    desktopMarginBottom,
-    components,
-  } = props;
-  if (!product) return null;
-
-  const hasDescription = !!product?.description;
-  const hasComponents = Array.isArray(components) && components.length > 0;
-
-  if (!hasDescription && !hasComponents) return null;
-
-  return (
-    <div
-      className="kombos-pd-desc"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      {hasDescription && (
-        <CollapsibleGroup title={title} defaultOpen={defaultOpen}>
-          <div
-            className="kombos-pd-desc__body text-sm-regular kombos-richtext"
-            dangerouslySetInnerHTML={{ __html: product.description }}
-          />
-        </CollapsibleGroup>
-      )}
-      {hasComponents && (
-        <IkasComponentRenderer
-          id="product-detail-description"
-          components={components}
-          parentProps={props}
-        />
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailDescription;

package/templates/create-full/src/components/ProductDetailDescription/styles.css

@@ -1,21 +0,0 @@
-/* ===== ProductDetailDescription ===== */
-
-.kombos-pd-desc {
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-  border-top: 1px solid var(--kombos-gray-200);
-}
-
-.kombos-pd-desc__body {
-  color: var(--kombos-gray-700);
-  max-height: 500px;
-  overflow: auto;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-desc {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

package/templates/create-full/src/components/ProductDetailDescription/types.ts

@@ -1,13 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  product?: IkasProduct | null;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  title?: string;
-  defaultOpen?: boolean;
-  components?: any;
-}

package/templates/create-full/src/components/ProductDetailFeatureItem/index.tsx

@@ -1,28 +0,0 @@
-import { getDefaultSrc } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function ProductDetailFeatureItem({ image, text }: Props) {
-  const imageSrc = image ? getDefaultSrc(image) : null;
-  if (!imageSrc && !text) return null;
-
-  return (
-    <div className="product-detail-feature-item">
-      {imageSrc && (
-        <img
-          className="product-detail-feature-item__icon"
-          src={imageSrc}
-          alt={image?.altText || ""}
-          width={32}
-          height={32}
-        />
-      )}
-      {text && (
-        <p className="product-detail-feature-item__text text-sm-medium">
-          {text}
-        </p>
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailFeatureItem;

package/templates/create-full/src/components/ProductDetailFeatureItem/styles.css

@@ -1,22 +0,0 @@
-/* ===== ProductDetailFeatureItem ===== */
-
-.product-detail-feature-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-}
-
-.product-detail-feature-item__icon {
-  width: 2rem;
-  height: auto;
-  object-fit: contain;
-}
-
-.product-detail-feature-item__text {
-  color: var(--kombos-gray-900);
-  text-align: center;
-  margin: 0;
-  text-wrap-style: pretty;
-}

package/templates/create-full/src/components/ProductDetailFeatureItem/types.ts

@@ -1,7 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasImage } from "@ikas/bp-storefront";
-
-export interface Props {
-  image?: IkasImage | null;
-  text?: string;
-}

package/templates/create-full/src/components/ProductDetailFeatures/index.tsx

@@ -1,40 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  IkasComponentRenderer,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function ProductDetailFeatures(props: Props) {
-  const {
-    mobileMarginTop,
-    mobileMarginBottom,
-    desktopMarginTop,
-    desktopMarginBottom,
-    components,
-  } = props;
-
-  const count = components?.length ?? 0;
-  if (count === 0) return null;
-
-  return (
-    <div
-      className="kombos-pd-features"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-        "--columns": count,
-      }}
-    >
-      <IkasComponentRenderer
-        id="product-detail-features"
-        components={components}
-        parentProps={props}
-      />
-    </div>
-  );
-}
-
-export default ProductDetailFeatures;

package/templates/create-full/src/components/ProductDetailFeatures/styles.css

@@ -1,17 +0,0 @@
-/* ===== ProductDetailFeatures ===== */
-
-.kombos-pd-features {
-  display: grid;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  gap: 1rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-features {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

package/templates/create-full/src/components/ProductDetailFeatures/types.ts

@@ -1,10 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  components?: any;
-}

package/templates/create-full/src/components/ProductDetailNameFavorite/index.tsx

@@ -1,66 +0,0 @@
-import {
-  addIkasProductToFavorites,
-  customerStore,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  hasCustomer,
-  isFavoriteIkasProduct,
-  removeIkasProductFromFavorites,
-  Router,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import { Heart2SVG, HeartFilledSVG } from "../../sub-components/icons";
-
-export function ProductDetailNameFavorite({
-  product,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-  hideFavoriteButton,
-}: Props) {
-  if (!product) return null;
-
-  const isFavorite = isFavoriteIkasProduct(product);
-
-  const handleToggleFavorite = async () => {
-    const isLoggedIn = hasCustomer(customerStore);
-
-    if (!isLoggedIn) {
-      Router.navigateToPage("LOGIN");
-      return;
-    }
-
-    if (isFavorite) {
-      await removeIkasProductFromFavorites(product);
-    } else {
-      await addIkasProductToFavorites(product);
-    }
-  };
-
-  return (
-    <div
-      className="kombos-pd-name__row"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <h1 className="kombos-pd-name__title text-xl-medium lg:display-xs-medium">{product.name}</h1>
-      {!hideFavoriteButton && (
-        <button
-          type="button"
-          className="kombos-pd-name__fav-btn"
-          onClick={handleToggleFavorite}
-          aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
-        >
-          {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}
-        </button>
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailNameFavorite;