@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/src/sub-components/ProductCard/index.tsx

@@ -1,276 +0,0 @@
-import { useState, useRef, useEffect } from "preact/hooks";
-import {
-  getSelectedProductVariant,
-  getProductVariantMainImage,
-  getProductVariantDiscountPercentage,
-  hasProductVariantDiscount,
-  hasProductVariantStock,
-  addSelectedtedVariantToCart,
-  getProductHref,
-  getDefaultSrc,
-  IkasProduct,
-  isAddToCartEnabled,
-  isFavoriteIkasProduct,
-  addIkasProductToFavorites,
-  removeIkasProductFromFavorites,
-  customerStore,
-  hasCustomer,
-  Router,
-  createMediaSrcset,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { NoProductSVG, Heart2SVG, HeartFilledSVG } from "../icons";
-import Button from "../Button";
-import SpinnerIcon from "../SpinnerIcon";
-import Tag from "../Tag";
-import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
-import { showToast } from "../../utils/toast";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-
-interface Props {
-  product: IkasProduct;
-  addToCartText: string;
-  addedToCartText?: string;
-  outOfStockText?: string;
-  goToProductText?: string;
-  showFavorite?: boolean;
-  hideAddToCartButton?: boolean;
-  badgeText?: string;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-  dataPage?: number;
-  sizes?: string;
-  openCartOnAdd?: boolean;
-  errorMessage?: string;
-  onFavoriteRemove?: () => void;
-  priority?: boolean;
-}
-
-const ProductCard = observer(function ProductCard({
-  product,
-  addToCartText,
-  addedToCartText = "Added to Cart",
-  outOfStockText = "Sold Out",
-  goToProductText = "View Product",
-  showFavorite = true,
-  hideAddToCartButton = false,
-  badgeText,
-  aspectRatio,
-  objectFit,
-  dataPage,
-  sizes = "(max-width: 767px) calc(50vw - 24px), (max-width: 1023px) calc(50vw - 44px), 300px",
-  openCartOnAdd = true,
-  errorMessage = "Failed to add product to cart",
-  onFavoriteRemove,
-  priority = false,
-}: Props) {
-  const [cartState, setCartState] = useState<"idle" | "loading" | "added">(
-    "idle",
-  );
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, []);
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const productImage = selectedVariant
-    ? getProductVariantMainImage(selectedVariant)
-    : null;
-  const image = productImage?.image;
-
-  const sortedImages = selectedVariant?.images
-    ? [...selectedVariant.images].sort((a, b) => a.order - b.order)
-    : [];
-  const secondImage = sortedImages.length > 1 ? sortedImages[1]?.image : null;
-  const hasDiscount = selectedVariant
-    ? hasProductVariantDiscount(selectedVariant)
-    : false;
-  const inStock = selectedVariant
-    ? hasProductVariantStock(selectedVariant)
-    : false;
-  const discountPercentage =
-    hasDiscount && selectedVariant
-      ? getProductVariantDiscountPercentage(selectedVariant)
-      : null;
-
-  const productHref = getProductHref(product);
-  const isBundleProduct = !!selectedVariant?.bundleSettings;
-  const hasOptionSet = !!product.productOptionSet;
-  const isFavorite = isFavoriteIkasProduct(product);
-
-  const mediaStyle: Record<string, string> = {};
-  const resolvedAR = resolveAspectRatio(aspectRatio);
-  const resolvedOF = resolveObjectFit(objectFit);
-  if (resolvedAR) mediaStyle.aspectRatio = resolvedAR;
-  if (resolvedOF) mediaStyle.objectFit = resolvedOF;
-
-  const handleAddToCart = async () => {
-    if (cartState === "loading") return;
-
-    if (!isAddToCartEnabled(product) || isBundleProduct || hasOptionSet) {
-      Router.navigate(productHref);
-      return;
-    }
-
-    if (timerRef.current) clearTimeout(timerRef.current);
-    setCartState("loading");
-    try {
-      const result = await addSelectedtedVariantToCart(product, 1);
-
-      if (result.success) {
-        if (openCartOnAdd) {
-          window.dispatchEvent(new CustomEvent("ikas:open-cart-sidebar"));
-        }
-        setCartState("added");
-      } else {
-        showToast(errorMessage, "error");
-      }
-
-      timerRef.current = setTimeout(() => setCartState("idle"), 2000);
-    } catch {
-      setCartState("idle");
-      showToast(errorMessage, "error");
-    }
-  };
-
-  const handleFavoriteToggle = async () => {
-    const isLoggedIn = hasCustomer(customerStore);
-    if (!isLoggedIn) {
-      Router.navigateToPage("LOGIN");
-      return;
-    }
-
-    if (isFavorite) {
-      await removeIkasProductFromFavorites(product);
-      onFavoriteRemove?.();
-    } else {
-      await addIkasProductToFavorites(product);
-    }
-  };
-
-  return (
-    <div className="kombos-product-card" data-page={dataPage}>
-      {/* Image container */}
-      <div className="kombos-product-card__image-wrapper">
-        <a href={productHref} className="kombos-product-card__media-link" aria-label={product.name || "Product"}>
-          {image?.isVideo ? (
-            <video
-              src={getDefaultSrc(image)}
-              className="kombos-product-card__media"
-              style={mediaStyle}
-              muted
-              loop
-              autoPlay
-              playsInline
-              aria-label={product.name}
-            >
-              <track kind="captions" />
-            </video>
-          ) : image ? (
-            <>
-              <img
-                src={getDefaultSrc(image)}
-                srcSet={createMediaSrcset(image)}
-                sizes={sizes}
-                alt={product.name}
-                className="kombos-product-card__media kombos-product-card__media--primary"
-                style={mediaStyle}
-                loading={priority ? "eager" : "lazy"}
-                decoding={priority ? "sync" : "async"}
-                fetchpriority={priority ? "high" : undefined}
-              />
-              {secondImage && !secondImage.isVideo && (
-                <img
-                  src={getDefaultSrc(secondImage)}
-                  srcSet={createMediaSrcset(secondImage)}
-                  sizes={sizes}
-                  alt=""
-                  className="kombos-product-card__media kombos-product-card__media--hover"
-                  style={mediaStyle}
-                  loading="lazy"
-                  decoding="async"
-                />
-              )}
-            </>
-          ) : (
-            <div
-              className="kombos-product-card__media kombos-product-card__media--placeholder"
-              style={mediaStyle}
-            >
-              <NoProductSVG />
-            </div>
-          )}
-        </a>
-
-        {/* Out of stock overlay — must render before badges/heart so they appear on top */}
-        {!inStock && <div className="kombos-product-card__overlay" />}
-
-        {/* Badges */}
-        {(hasDiscount || badgeText) && (
-          <div className="kombos-product-card__badges">
-            {hasDiscount && discountPercentage && (
-              <Tag type="discounted" size="s">
-                %{discountPercentage}
-              </Tag>
-            )}
-            {badgeText && (
-              <Tag type="new" size="s">
-                {badgeText}
-              </Tag>
-            )}
-          </div>
-        )}
-
-        {/* Favorite button */}
-        {showFavorite && (
-          <button
-            type="button"
-            className="kombos-product-card__favorite"
-            onClick={handleFavoriteToggle}
-            aria-label="Favorite"
-          >
-            {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}
-          </button>
-        )}
-      </div>
-
-      {/* Add to Cart / Go to Product */}
-      {!hideAddToCartButton && (
-        <>
-          {isBundleProduct || (hasOptionSet && inStock) ? (
-            <Button
-              variant="primary"
-              size="xs"
-              className="kombos-product-card__add-btn"
-              onClick={() => Router.navigate(productHref)}
-            >
-              {goToProductText}
-            </Button>
-          ) : (
-            <Button
-              variant={cartState === "added" ? "secondary" : "primary"}
-              size="xs"
-              className="kombos-product-card__add-btn"
-              onClick={inStock ? handleAddToCart : undefined}
-              disabled={!inStock || cartState === "loading"}
-              icon={
-                inStock && cartState === "loading" ? <SpinnerIcon /> : undefined
-              }
-            >
-              {!inStock && outOfStockText}
-              {inStock && cartState === "added" && addedToCartText}
-              {inStock &&
-                (cartState === "idle" || cartState === "loading") &&
-                addToCartText}
-            </Button>
-          )}
-        </>
-      )}
-    </div>
-  );
-});
-
-export default ProductCard;

package/templates/create-full/src/sub-components/ProductCard/styles.css

@@ -1,99 +0,0 @@
-/* ===== Product Card ===== */
-.kombos-product-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-/* Image wrapper */
-.kombos-product-card__image-wrapper {
-  position: relative;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.kombos-product-card__media-link {
-  display: block;
-}
-
-.kombos-product-card__media {
-  width: 100%;
-  height: auto;
-  display: block;
-  background: var(--kombos-gray-100);
-}
-
-.kombos-product-card__media--primary {
-  transition: opacity 0.3s ease;
-}
-
-.kombos-product-card__media--hover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.kombos-product-card__image-wrapper:hover .kombos-product-card__media--primary {
-  opacity: 0;
-}
-
-.kombos-product-card__image-wrapper:hover .kombos-product-card__media--hover {
-  opacity: 1;
-}
-
-.kombos-product-card__media--placeholder {
-  border: 1px solid var(--kombos-gray-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  color: var(--kombos-gray-300);
-  font-size: 4rem;
-}
-
-/* Badges */
-.kombos-product-card__badges {
-  position: absolute;
-  top: 0.75rem;
-  left: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Favorite */
-.kombos-product-card__favorite {
-  position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  font-size: 1.5rem;
-  color: var(--kombos-gray-900);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Out of stock overlay */
-.kombos-product-card__overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.32);
-  pointer-events: none;
-}
-
-
-/* Add to Cart Button */
-.kombos-product-card__add-btn {
-  width: 100%;
-}

package/templates/create-full/src/sub-components/QuantitySelector/index.tsx

@@ -1,41 +0,0 @@
-import { MinusSVG, PlusSVG } from "../icons";
-import { cx } from "../../utils/cx";
-
-interface Props {
-  value: number;
-  onChange: (value: number) => void;
-  size?: "default" | "sm";
-}
-
-export default function QuantitySelector({
-  value,
-  onChange,
-  size = "default",
-}: Props) {
-  return (
-    <div className={cx("kombos-pd__qty", size === "sm" && "kombos-pd__qty--sm")}>
-      <button
-        type="button"
-        className="kombos-pd__qty-btn"
-        onClick={() => onChange(Math.max(1, value - 1))}
-        disabled={value <= 1}
-        aria-label="Decrease quantity"
-      >
-        <MinusSVG />
-      </button>
-      <span
-        className={cx("kombos-pd__qty-value", size === "sm" ? "text-sm-medium" : "text-md-medium")}
-      >
-        {value}
-      </span>
-      <button
-        type="button"
-        className="kombos-pd__qty-btn"
-        onClick={() => onChange(value + 1)}
-        aria-label="Increase quantity"
-      >
-        <PlusSVG />
-      </button>
-    </div>
-  );
-}

package/templates/create-full/src/sub-components/QuantitySelector/styles.css

@@ -1,51 +0,0 @@
-/* Qty — border ececed, rounded-6, px-12 py-10, gap-16 between items */
-.kombos-pd__qty {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  padding: 0.5625rem 0.6875rem;
-}
-
-.kombos-pd__qty-btn {
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 1rem;
-  color: var(--kombos-gray-900);
-  padding: 0;
-  margin: -0.75rem;
-  padding: 0.75rem;
-}
-
-.kombos-pd__qty-btn:hover:not(:disabled) {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-pd__qty-btn:disabled {
-  color: var(--kombos-gray-300);
-  cursor: not-allowed;
-}
-
-.kombos-pd__qty-value {
-  min-width: 1.5rem;
-  text-align: center;
-  color: var(--kombos-gray-900);
-}
-
-/* Small size variant */
-.kombos-pd__qty--sm {
-  gap: 0.75rem;
-  padding: 0.4375rem 0.6875rem;
-}
-
-.kombos-pd__qty--sm .kombos-pd__qty-btn {
-  margin: -0.5rem;
-  padding: 0.5rem;
-}

package/templates/create-full/src/sub-components/ReviewCard/index.tsx

@@ -1,103 +0,0 @@
-import type { IkasCustomerReview } from "@ikas/bp-storefront";
-import {
-  getIkasCustomerReviewFormattedDate,
-  getThumbnailSrc,
-  getDefaultSrc,
-} from "@ikas/bp-storefront";
-import { cx } from "../../utils/cx";
-import { getFullName } from "../../utils/fullName";
-import StarRating from "../StarRating";
-import { ArrowBendUpLeftSVG } from "../icons";
-
-interface Props {
-  review: IkasCustomerReview;
-  merchantReplyLabel: string;
-  onImageClick?: (src: string, alt: string) => void;
-  className?: string;
-}
-
-export default function ReviewCard({
-  review,
-  merchantReplyLabel,
-  onImageClick,
-  className,
-}: Props) {
-  const name = getFullName(review.firstName, review.lastName);
-  const date = getIkasCustomerReviewFormattedDate(review);
-  const hasImages = review.images && review.images.length > 0;
-
-  return (
-    <article className={cx("kombos-review-card", className)}>
-      <div className="kombos-review-card__header">
-        <div className="kombos-review-card__meta">
-          {name && (
-            <span className="kombos-review-card__author text-sm-semibold">
-              {name}
-            </span>
-          )}
-          {date && (
-            <span className="kombos-review-card__date text-xs-regular">
-              {date}
-            </span>
-          )}
-        </div>
-        <StarRating value={review.star} size="sm" />
-      </div>
-
-      {review.title && (
-        <h4 className="kombos-review-card__title text-md-semibold">
-          {review.title}
-        </h4>
-      )}
-
-      {review.comment && (
-        <p className="kombos-review-card__comment text-sm-regular">
-          {review.comment}
-        </p>
-      )}
-
-      {hasImages && (
-        <div className="kombos-review-card__images">
-          {review.images?.map((image, i) => {
-            const thumbSrc = getThumbnailSrc(image);
-            const fullSrc = getDefaultSrc(image);
-
-            if (!thumbSrc) return null;
-
-            return (
-              <button
-                key={i}
-                type="button"
-                className="kombos-review-card__image-btn"
-                onClick={() =>
-                  onImageClick?.(fullSrc, review.title || "Review image")
-                }
-              >
-                <img
-                  src={thumbSrc}
-                  alt={image.altText || review.title || "Review image"}
-                  className="kombos-review-card__image"
-                  loading="lazy"
-                />
-              </button>
-            );
-          })}
-        </div>
-      )}
-
-      {review.reply && (
-        <div className="kombos-review-card__reply">
-          <div className="kombos-review-card__reply-header">
-            <ArrowBendUpLeftSVG />
-            <span className="kombos-review-card__reply-label text-xs-semibold">
-              {merchantReplyLabel}
-            </span>
-          </div>
-          <p className="kombos-review-card__reply-text text-sm-regular">
-            {review.reply}
-          </p>
-        </div>
-      )}
-    </article>
-  );
-}

package/templates/create-full/src/sub-components/ReviewCard/styles.css

@@ -1,95 +0,0 @@
-.kombos-review-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1.25rem 0;
-  border-bottom: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-review-card:last-child {
-  border-bottom: none;
-}
-
-.kombos-review-card__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.kombos-review-card__meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.kombos-review-card__author {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-review-card__date {
-  color: var(--kombos-gray-400);
-}
-
-.kombos-review-card__title {
-  color: var(--kombos-gray-900);
-  margin: 0;
-}
-
-.kombos-review-card__comment {
-  color: var(--kombos-gray-700);
-  margin: 0;
-}
-
-.kombos-review-card__images {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-}
-
-.kombos-review-card__image-btn {
-  all: unset;
-  cursor: pointer;
-  border-radius: 6px;
-  overflow: hidden;
-  line-height: 0;
-}
-
-.kombos-review-card__image {
-  width: 4rem;
-  height: 4rem;
-  object-fit: cover;
-  border-radius: 6px;
-  transition: opacity 0.15s ease;
-}
-
-.kombos-review-card__image-btn:hover .kombos-review-card__image {
-  opacity: 0.8;
-}
-
-.kombos-review-card__reply {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 8px;
-}
-
-.kombos-review-card__reply-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.875rem;
-  color: var(--kombos-gray-500);
-}
-
-.kombos-review-card__reply-label {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-review-card__reply-text {
-  color: var(--kombos-gray-700);
-  margin: 0;
-}