@ikas/component-cli 0.133.0 → 1.1.0

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

@@ -1,33 +0,0 @@
-/* ===== ProductDetailProductGroup ===== */
-
-.kombos-pd-product-group {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-product-group__group {
-  display: flex;
-  flex-direction: column;
-}
-
-.kombos-pd-product-group__label {
-  color: var(--kombos-gray-900);
-  margin-bottom: 0.375rem;
-}
-
-.kombos-pd-product-group__row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-product-group {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,10 +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;
-}

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

@@ -1,205 +0,0 @@
-import { useState, useEffect, useRef } from "preact/hooks";
-import type { IkasCustomerReviewList } from "@ikas/bp-storefront";
-import {
-  customerStore,
-  getProductCustomerReviews,
-  getCustomerReviewListPageCount,
-  hasCustomerReviewListPrevPage,
-  hasCustomerReviewListNextPage,
-  getCustomerReviewListPage,
-  isCustomerReviewEnabled,
-  isCustomerReviewLoginRequired,
-  hasCustomer,
-  Router,
-  getIkasProductCustomerReviewForm,
-  clearIkasProductCustomerReviewForm,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import Pagination from "../../sub-components/Pagination";
-import Button from "../../sub-components/Button";
-import Modal from "../../sub-components/Modal";
-import ImagePreviewModal from "../../sub-components/ImagePreviewModal";
-import ReviewSummary from "../../sub-components/ReviewSummary";
-import ReviewCard from "../../sub-components/ReviewCard";
-import ReviewForm from "../../sub-components/ReviewForm";
-import PageLoader from "../../sub-components/PageLoader";
-
-export function ProductDetailReviews({
-  product,
-  reviewsPerPage = 5,
-  sectionTitle = "Customer Reviews",
-  writeReviewButtonText = "Write a Review",
-  emptyStateText = "No reviews yet. Be the first to review this product!",
-  reviewCountText = "Based on {count} reviews",
-  submitButtonText = "Submit Review",
-  submittingButtonText = "Submitting...",
-  titlePlaceholder = "Review title",
-  commentPlaceholder = "Write your review...",
-  merchantReplyLabel = "Store Reply",
-  starRequiredError = "Please select a rating",
-  cancelButtonText = "Cancel",
-  errorMessage = "Something went wrong. Please try again.",
-}: Props) {
-  const listRef = useRef<HTMLDivElement>(null);
-  const [reviewList, setReviewList] = useState<IkasCustomerReviewList | null>(
-    null,
-  );
-  const [formVisible, setFormVisible] = useState(false);
-  const [previewImage, setPreviewImage] = useState<{
-    src: string;
-    alt: string;
-  } | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (!product) return;
-
-    setIsLoading(true);
-
-    getProductCustomerReviews(product, reviewsPerPage)
-      .then((result) => {
-        setReviewList(result);
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, [product, reviewsPerPage]);
-
-  if (!product) return null;
-
-  const reviewsEnabled = isCustomerReviewEnabled(product);
-  const hasReviews = reviewList && reviewList.data.length > 0;
-  const hasSummary =
-    product.averageRating !== null && product.reviewCount !== null;
-
-  const handleWriteReview = () => {
-    if (isCustomerReviewLoginRequired(product) && !hasCustomer(customerStore)) {
-      Router.navigateToPage("LOGIN");
-      return;
-    }
-
-    setFormVisible(true);
-  };
-
-  const handlePageChange = async (page: number) => {
-    if (!reviewList) return;
-
-    await getCustomerReviewListPage(reviewList, page);
-    listRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
-  };
-
-  const reviewForm = getIkasProductCustomerReviewForm(product);
-
-  const handleCloseForm = () => {
-    clearIkasProductCustomerReviewForm(product);
-    setFormVisible(false);
-  };
-
-  const handleReviewSuccess = () => {
-    getProductCustomerReviews(product, reviewsPerPage).then(setReviewList);
-    handleCloseForm();
-  };
-
-  return (
-    <section className="product-detail-reviews">
-      <div className="kombos-container product-detail-reviews__inner">
-        <div className="product-detail-reviews__header">
-          <h2 className="product-detail-reviews__title display-xs-semibold">
-            {sectionTitle}
-          </h2>
-          {reviewsEnabled && !hasSummary && (
-            <Button variant="secondary" size="s" onClick={handleWriteReview}>
-              {writeReviewButtonText}
-            </Button>
-          )}
-        </div>
-
-        {hasSummary && (
-          <ReviewSummary
-            averageStar={product.averageRating!}
-            totalReview={product.reviewCount!}
-            stars={product.stars ?? []}
-            reviewCountText={reviewCountText}
-            action={
-              reviewsEnabled ? (
-                <Button
-                  variant="secondary"
-                  size="s"
-                  onClick={handleWriteReview}
-                >
-                  {writeReviewButtonText}
-                </Button>
-              ) : undefined
-            }
-          />
-        )}
-
-        {isLoading && <PageLoader />}
-
-        {!hasReviews && !isLoading && reviewList && (
-          <p className="product-detail-reviews__empty text-md-regular">
-            {emptyStateText}
-          </p>
-        )}
-
-        {hasReviews && !isLoading && (
-          <>
-            <div ref={listRef} className="product-detail-reviews__list">
-              {reviewList?.data.map((review) => (
-                <ReviewCard
-                  key={review.id}
-                  review={review}
-                  merchantReplyLabel={merchantReplyLabel}
-                  onImageClick={(src, alt) => setPreviewImage({ src, alt })}
-                />
-              ))}
-            </div>
-
-            <Pagination
-              currentPage={reviewList.page}
-              totalPages={getCustomerReviewListPageCount(reviewList!)}
-              hasPrev={hasCustomerReviewListPrevPage(reviewList!)}
-              hasNext={hasCustomerReviewListNextPage(reviewList!)}
-              onPageChange={handlePageChange}
-            />
-          </>
-        )}
-      </div>
-
-      {formVisible && (
-        <Modal
-          title={writeReviewButtonText}
-          onClose={handleCloseForm}
-          okText={
-            reviewForm.isSubmitting ? submittingButtonText : submitButtonText
-          }
-          cancelText={cancelButtonText}
-          okButtonProps={{
-            type: "submit",
-            form: "review-form",
-            disabled: reviewForm.isSubmitting,
-          }}
-        >
-          <ReviewForm
-            product={product}
-            onSuccess={handleReviewSuccess}
-            titlePlaceholder={titlePlaceholder}
-            commentPlaceholder={commentPlaceholder}
-            starRequiredError={starRequiredError}
-            errorMessage={errorMessage}
-          />
-        </Modal>
-      )}
-
-      {previewImage && (
-        <ImagePreviewModal
-          src={previewImage.src}
-          alt={previewImage.alt}
-          onClose={() => setPreviewImage(null)}
-        />
-      )}
-    </section>
-  );
-}
-
-export default ProductDetailReviews;

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

@@ -1,43 +0,0 @@
-.product-detail-reviews {
-  width: 100%;
-}
-
-.product-detail-reviews__inner {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
-@media (min-width: 768px) {
-  .product-detail-reviews__inner {
-    padding-top: 3.5rem;
-    padding-bottom: 3.5rem;
-  }
-}
-
-.product-detail-reviews__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.product-detail-reviews__title {
-  margin: 0;
-  color: var(--kombos-gray-900);
-}
-
-.product-detail-reviews__empty {
-  color: var(--kombos-gray-500);
-  text-align: center;
-  padding: 3rem 1rem;
-  margin: 0;
-}
-
-.product-detail-reviews__list {
-  display: flex;
-  flex-direction: column;
-}

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

@@ -1,19 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct } from "@ikas/bp-storefront";
-
-export interface Props {
-  product?: IkasProduct | null;
-  reviewsPerPage?: number;
-  sectionTitle?: string;
-  writeReviewButtonText?: string;
-  emptyStateText?: string;
-  reviewCountText?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  titlePlaceholder?: string;
-  commentPlaceholder?: string;
-  merchantReplyLabel?: string;
-  starRequiredError?: string;
-  cancelButtonText?: string;
-  errorMessage?: string;
-}

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

@@ -1,38 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  getSelectedProductVariant,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function ProductDetailSku({
-  product,
-  productCodeLabel = "Product Code:",
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  if (!product) return null;
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const sku = selectedVariant?.sku;
-
-  if (!sku) return null;
-
-  return (
-    <p
-      className="kombos-pd-sku__text text-sm-medium"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      {productCodeLabel} {sku}
-    </p>
-  );
-}
-
-export default ProductDetailSku;

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

@@ -1,16 +0,0 @@
-/* ===== ProductDetailSKU ===== */
-
-.kombos-pd-sku__text {
-  margin: 0;
-  color: var(--kombos-gray-600);
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-sku__text {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,11 +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;
-  productCodeLabel?: string;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-}

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

@@ -1,38 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import VariantBadge from "../../sub-components/VariantBadge";
-
-export function ProductDetailVariant({
-  product,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-  useVariantImages,
-}: Props) {
-  if (!product) return null;
-
-  return (
-    <div
-      className="kombos-pd-variant"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <VariantBadge
-        product={product}
-        size="l"
-        showLabels
-        useVariantImages={useVariantImages}
-      />
-    </div>
-  );
-}
-
-export default ProductDetailVariant;

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

@@ -1,14 +0,0 @@
-/* ===== ProductDetailVariant ===== */
-
-.kombos-pd-variant {
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-variant {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,12 +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;
-  /** Use product images for color variant. */
-  useVariantImages?: boolean;
-}

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

@@ -1,151 +0,0 @@
-import {
-  useRef,
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-} from "preact/hooks";
-import {
-  getProductOptionSet,
-  IkasComponentRenderer,
-} from "@ikas/bp-storefront";
-import ProductCard from "../../sub-components/ProductCard";
-import SliderArrow from "../../sub-components/SliderArrow";
-import { Props } from "./types";
-
-const COLUMNS_MAP: Record<string, number> = {
-  One: 1,
-  Two: 2,
-  Three: 3,
-  Four: 4,
-  Five: 5,
-};
-
-export function ProductSlider(props: Props) {
-  const {
-    productList,
-    title,
-    addToCartText = "Add to Cart",
-    addedToCartText = "Added to Cart",
-    outOfStockText = "Sold Out",
-    goToProductText = "View Product",
-    desktopColumns,
-    aspectRatio,
-    objectFit,
-    hideAddToCartButton,
-    components,
-  } = props;
-
-  const cols = COLUMNS_MAP[desktopColumns ?? ""] ?? 4;
-  const trackRef = useRef<HTMLDivElement>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  const updateScrollState = useCallback(() => {
-    const track = trackRef.current;
-    if (!track) return;
-
-    setCanScrollLeft(track.scrollLeft > 1);
-    setCanScrollRight(
-      track.scrollLeft + track.clientWidth < track.scrollWidth - 1,
-    );
-  }, []);
-
-  useEffect(() => {
-    const track = trackRef.current;
-    if (!track) return;
-    track.addEventListener("scroll", updateScrollState, { passive: true });
-    window.addEventListener("resize", updateScrollState);
-    const ro = new ResizeObserver(updateScrollState);
-    ro.observe(track);
-    return () => {
-      track.removeEventListener("scroll", updateScrollState);
-      window.removeEventListener("resize", updateScrollState);
-      ro.disconnect();
-    };
-  }, [updateScrollState]);
-
-  const products = productList?.data ?? [];
-
-  useEffect(() => {
-    products.forEach((p) => {
-      if (!p.productOptionSet) getProductOptionSet(p);
-    });
-  }, [products.length]);
-
-  const productCardSizes = useMemo(() => {
-    const desktopGaps = (cols - 1) * 24;
-    return `(max-width: 767px) calc((100vw - 48px) / 2), (max-width: 1023px) calc((100vw - 80px) / 2), calc((100vw - ${144 + desktopGaps}px) / ${cols})`;
-  }, [cols]);
-
-  if (!productList) return null;
-
-  const scroll = (direction: "left" | "right") => {
-    const el = trackRef.current;
-    if (!el) return;
-    const amount = direction === "left" ? -el.clientWidth : el.clientWidth;
-    el.scrollBy({ left: amount, behavior: "smooth" });
-  };
-
-  return (
-    <section className="kombos-product-slider">
-      <div className="kombos-product-slider__wrapper kombos-container">
-        {title && (
-          <h2 className="kombos-product-slider__title display-xs-medium md:display-sm-medium">
-            {title}
-          </h2>
-        )}
-
-        <div className="kombos-product-slider__slider">
-          <SliderArrow
-            direction="left"
-            className="kombos-product-slider__arrow kombos-product-slider__arrow--left"
-            onClick={() => scroll("left")}
-            disabled={!canScrollLeft}
-          />
-
-          <div
-            className="kombos-product-slider__track"
-            ref={trackRef}
-            style={{ "--columns": cols }}
-          >
-            {products.map((product, index) => (
-              <div key={product.id} className="kombos-product-slider__card">
-                <ProductCard
-                  product={product}
-                  addToCartText={addToCartText}
-                  addedToCartText={addedToCartText}
-                  outOfStockText={outOfStockText}
-                  goToProductText={goToProductText}
-                  aspectRatio={aspectRatio}
-                  objectFit={objectFit}
-                  sizes={productCardSizes}
-                  hideAddToCartButton={hideAddToCartButton}
-                  priority={index < 4}
-                />
-                <IkasComponentRenderer
-                  id={`product-slider-product-${product.id}`}
-                  components={components}
-                  parentProps={props}
-                  map={{
-                    product,
-                  }}
-                  className="kombos-product-slider__card-content"
-                />
-              </div>
-            ))}
-          </div>
-
-          <SliderArrow
-            direction="right"
-            className="kombos-product-slider__arrow kombos-product-slider__arrow--right"
-            onClick={() => scroll("right")}
-            disabled={!canScrollRight}
-          />
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export default ProductSlider;