@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,199 +0,0 @@
-import {
-  getDefaultSrc,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  getProductVariantFormattedFinalPrice,
-  getProductVariantMainImage,
-  getSelectedProductVariant,
-  acceptProductOffer,
-  rejectProductOffer,
-} from "@ikas/bp-storefront";
-import { useEffect } from "preact/hooks";
-import { cx } from "../../utils/cx";
-import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
-import { Props } from "./types";
-import OfferCard from "./components/OfferCard";
-import OfferSummary from "./components/OfferSummary";
-import { NoProductSVG } from "../../sub-components/icons";
-
-export function ProductDetailOffer({
-  product,
-  compactView = false,
-  preselectOffers = false,
-  addToCartTogetherText = "Add Together to Cart",
-  addingToCartText = "Adding...",
-  offerInfoText = "Add selected products together to your cart and enjoy the discount.",
-  totalText = "Total",
-  advantageousTotalText = "Discounted Total",
-  outOfStockText = "Sold Out",
-  imageAspectRatio,
-  imageObjectFit,
-  addedToCartBannerText = "Added to cart",
-  errorMessage = "Failed to add product to cart",
-  optionSetErrorMessage = "Please fill in the required options",
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  useEffect(() => {
-    product?.offers?.forEach((offer) => {
-      if (preselectOffers) {
-        acceptProductOffer(offer);
-      } else {
-        rejectProductOffer(offer);
-      }
-    });
-  }, [preselectOffers]);
-
-  if (!product?.offers?.length) return null;
-
-  const selectedVariant = getSelectedProductVariant(product);
-
-  const appliedCampaign = product.appliedCampaignOffer;
-
-  const mainImage = getProductVariantMainImage(selectedVariant);
-  const mainMedia = mainImage?.image;
-  const mainImageSrc = mainMedia ? getDefaultSrc(mainMedia) : undefined;
-  const mainPrice = getProductVariantFormattedFinalPrice(selectedVariant);
-
-  // Resolve image styles
-  const resolvedAspectRatio = resolveAspectRatio(imageAspectRatio);
-  const resolvedObjectFit = resolveObjectFit(imageObjectFit);
-
-  const isInline = compactView;
-
-  const mainImageStyle = {
-    aspectRatio: resolvedAspectRatio,
-    objectFit: resolvedObjectFit,
-  };
-
-  const summaryPanel = (
-    <OfferSummary
-      product={product}
-      offerInfoText={offerInfoText}
-      totalText={totalText}
-      advantageousTotalText={advantageousTotalText}
-      isInline={isInline}
-      addingToCartText={addingToCartText}
-      addToCartTogetherText={addToCartTogetherText}
-      errorMessage={errorMessage}
-      optionSetErrorMessage={optionSetErrorMessage}
-    />
-  );
-
-  return (
-    <div
-      className={cx("kombos-pd-offer", isInline && "kombos-pd-offer--inline")}
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      {/* Campaign header */}
-      {appliedCampaign &&
-        (appliedCampaign.title || appliedCampaign.description) && (
-          <div className="kombos-pd-offer__header">
-            {appliedCampaign.title && (
-              <span className="kombos-pd-offer__title text-md-semibold md:text-lg-semibold">
-                {appliedCampaign.title}
-              </span>
-            )}
-            {appliedCampaign.description && (
-              <span className="kombos-pd-offer__desc text-sm-regular">
-                {appliedCampaign.description}
-              </span>
-            )}
-          </div>
-        )}
-
-      {/* Grid wrapper for standalone mode */}
-      {!isInline ? (
-        <div className="kombos-pd-offer__grid">
-          {/* Cards area: main product + offers in 2-col grid */}
-          <div className="kombos-pd-offer__cards">
-            {/* Main product card */}
-            <div className="kombos-pd-offer__main-product">
-              <div className="kombos-pd-offer__main-content">
-                {mainMedia?.isVideo ? (
-                  <video
-                    src={mainImageSrc}
-                    className="kombos-pd-offer__main-image"
-                    style={mainImageStyle}
-                    muted
-                    loop
-                    autoPlay
-                    playsInline
-                  >
-                    <track kind="captions" />
-                  </video>
-                ) : mainImageSrc ? (
-                  <img
-                    className="kombos-pd-offer__main-image"
-                    src={mainImageSrc}
-                    alt={product.name}
-                    loading="lazy"
-                    style={mainImageStyle}
-                  />
-                ) : (
-                  <div
-                    className="kombos-pd-offer__main-image kombos-pd-offer__main-image--placeholder"
-                    style={mainImageStyle}
-                  >
-                    <NoProductSVG />
-                  </div>
-                )}
-                <div className="kombos-pd-offer__main-body">
-                  <span className="kombos-pd-offer__main-name text-sm-medium">
-                    {product.name}
-                  </span>
-                  <span className="kombos-pd-offer__main-price text-sm-semibold">
-                    {mainPrice}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Offer cards */}
-            {product.offers.map((offer) => (
-              <OfferCard
-                key={offer.campaignOfferProductId}
-                offer={offer}
-                outOfStockText={outOfStockText}
-                addedToCartBannerText={addedToCartBannerText}
-                imageAspectRatio={resolvedAspectRatio}
-                imageObjectFit={resolvedObjectFit}
-              />
-            ))}
-          </div>
-
-          {/* Summary panel */}
-          {summaryPanel}
-        </div>
-      ) : (
-        <>
-          {/* Inline mode: vertical stack, no main product, no button */}
-          <div className="kombos-pd-offer__list">
-            {product.offers.map((offer) => (
-              <OfferCard
-                key={offer.campaignOfferProductId}
-                offer={offer}
-                outOfStockText={outOfStockText}
-                addedToCartBannerText={addedToCartBannerText}
-                imageAspectRatio={resolvedAspectRatio}
-                imageObjectFit={resolvedObjectFit}
-              />
-            ))}
-          </div>
-
-          {/* Summary (no button in inline mode) */}
-          {summaryPanel}
-        </>
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailOffer;

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

@@ -1,211 +0,0 @@
-/* ===== Product Detail Offer ===== */
-
-.kombos-pd-offer {
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-/* Inline mode (compactView) */
-.kombos-pd-offer--inline {
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  padding: 1rem;
-  gap: 1rem;
-}
-
-/* Header */
-.kombos-pd-offer__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-block: 0.75rem;
-  border-radius: 6px;
-}
-
-.kombos-pd-offer__title {
-  color: inherit;
-}
-
-.kombos-pd-offer__desc {
-  color: inherit;
-  opacity: 0.8;
-}
-
-/* Grid layout (standalone mode): cards + summary side by side */
-.kombos-pd-offer__grid {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Cards area: 2-col grid with main product + offer cards */
-.kombos-pd-offer__cards {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0.75rem;
-}
-
-.kombos-pd-offer--inline .kombos-pd-offer__header {
-  padding: 0;
-}
-
-.kombos-pd-offer--inline .kombos-pd-offer__summary {
-  width: 100%;
-  max-width: none;
-}
-
-/* Offer list (inline mode) */
-.kombos-pd-offer__list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Main product card (standalone mode) — same style as OfferCard */
-.kombos-pd-offer__main-product {
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.kombos-pd-offer__main-content {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.75rem;
-}
-
-.kombos-pd-offer__main-image {
-  width: 4rem;
-  flex-shrink: 0;
-  border-radius: 4px;
-  object-fit: cover;
-  aspect-ratio: 1 / 1;
-  background: var(--kombos-gray-100);
-}
-
-.kombos-pd-offer__main-image--placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--kombos-gray-300);
-  font-size: 1.5rem;
-}
-
-.kombos-pd-offer__main-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.kombos-pd-offer__main-name {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-pd-offer__main-price {
-  color: var(--kombos-gray-900);
-}
-
-/* Summary panel */
-.kombos-pd-offer__summary {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  background: var(--kombos-gray-50);
-}
-
-.kombos-pd-offer__summary-info {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  color: var(--kombos-gray-600);
-}
-
-.kombos-pd-offer__summary-info-icon {
-  flex-shrink: 0;
-  font-size: 1rem;
-  margin-top: 0.0625rem;
-}
-
-.kombos-pd-offer__total-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.kombos-pd-offer__total-label {
-  color: var(--kombos-gray-500);
-}
-
-.kombos-pd-offer__total-price {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-pd-offer__total-price--strike {
-  color: var(--kombos-gray-500);
-  text-decoration: line-through;
-}
-
-.kombos-pd-offer__discount-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.kombos-pd-offer__discount-values {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.kombos-pd-offer__btn {
-  width: 100%;
-  margin-top: auto;
-}
-
-@media (min-width: 768px) {
-  .kombos-pd-offer__header {
-    padding-block: 1rem;
-  }
-
-  .kombos-pd-offer__cards {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .kombos-pd-offer__main-content {
-    gap: 1rem;
-    padding: 1rem;
-  }
-
-  .kombos-pd-offer__main-image {
-    width: 5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .kombos-pd-offer {
-    margin-top: var(--desktop-mt);
-    margin-bottom: var(--desktop-mb);
-  }
-
-  .kombos-pd-offer__grid {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
-    align-items: start;
-  }
-
-  .kombos-pd-offer__summary {
-    min-width: 16rem;
-    max-width: 20rem;
-    justify-content: space-between;
-    align-self: stretch;
-  }
-}

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

@@ -1,24 +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;
-  preselectOffers?: boolean;
-  addToCartTogetherText?: string;
-  addingToCartText?: string;
-  offerInfoText?: string;
-  totalText?: string;
-  advantageousTotalText?: string;
-  outOfStockText?: string;
-  imageAspectRatio?: AspectRatio;
-  imageObjectFit?: ObjectFit;
-  addedToCartBannerText?: string;
-  compactView?: boolean;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  errorMessage?: string;
-  optionSetErrorMessage?: string;
-}

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionCheckbox/index.tsx

@@ -1,52 +0,0 @@
-import {
-  IkasProductOption,
-  isChecked as isOptionChecked,
-  setCheckboxValue,
-  hasError as hasOptionError,
-  getProductOptionFormattedLabel,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Checkbox from "../../../../sub-components/Checkbox";
-import FormItem from "../../../../sub-components/FormItem";
-
-interface Props {
-  option: IkasProductOption;
-  showError: boolean;
-  requiredErrorText: string;
-}
-
-const OptionCheckbox = observer(function OptionCheckbox({
-  option,
-  showError,
-  requiredErrorText,
-}: Props) {
-  const checked = isOptionChecked(option);
-  const errored = showError && hasOptionError(option);
-  const label = getProductOptionFormattedLabel(option);
-
-  return (
-    <FormItem
-      status={errored ? "error" : "default"}
-      helper={errored ? requiredErrorText : undefined}
-    >
-      <div className="kombos-option-checkbox__row">
-        <Checkbox
-          checked={checked}
-          onChange={(val) => setCheckboxValue(option, val)}
-        />
-        <div className="kombos-option-checkbox__text">
-          <span className="kombos-option-checkbox__label text-sm-medium">
-            {label}
-          </span>
-          {option.optionalText && (
-            <span className="kombos-option-checkbox__desc text-xs-regular">
-              {option.optionalText}
-            </span>
-          )}
-        </div>
-      </div>
-    </FormItem>
-  );
-});
-
-export default OptionCheckbox;

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionCheckbox/styles.css

@@ -1,19 +0,0 @@
-.kombos-option-checkbox__row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.kombos-option-checkbox__text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.kombos-option-checkbox__label {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-option-checkbox__desc {
-  color: var(--kombos-gray-500);
-}

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/index.tsx

@@ -1,60 +0,0 @@
-import {
-  IkasProductOption,
-  selectValue,
-  isProductOptionSelectValueSelected,
-  getProductOptionFormattedLabel,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { cx } from "../../../../../../utils/cx";
-import FormItem from "../../../../../../sub-components/FormItem";
-import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
-
-interface Props {
-  option: IkasProductOption;
-  errored: boolean;
-  requiredErrorText: string;
-  constraintText?: string;
-}
-
-const ChoiceBox = observer(function ChoiceBox({
-  option,
-  errored,
-  requiredErrorText,
-  constraintText,
-}: Props) {
-  const settings = option.selectSettings!;
-
-  return (
-    <FormItem
-      label={getProductOptionFormattedLabel(option)}
-      status={errored ? "error" : "default"}
-      description={option.optionalText}
-      helper={errored ? requiredErrorText : constraintText}
-    >
-      <div className="kombos-option-choice__grid">
-        {settings.values.map((val) => {
-          const isSelected = isProductOptionSelectValueSelected(option, val);
-          const price = getSelectValuePrice(option, val);
-
-          return (
-            <button
-              key={val.id}
-              type="button"
-              className={cx("kombos-option-choice__box", "text-sm-medium", isSelected && "kombos-option-choice__box--selected")}
-              onClick={() => selectValue(option, val)}
-            >
-              <span>{val.value}</span>
-              {price && (
-                <span className="kombos-option-choice__box-price text-xs-regular">
-                  {price}
-                </span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </FormItem>
-  );
-});
-
-export default ChoiceBox;

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/styles.css

@@ -1,38 +0,0 @@
-/* Box grid */
-.kombos-option-choice__grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.kombos-option-choice__box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.125rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  background: var(--kombos-white);
-  color: var(--kombos-gray-700);
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-
-.kombos-option-choice__box:hover {
-  border-color: var(--kombos-gray-400);
-}
-
-.kombos-option-choice__box--selected {
-  border-color: var(--kombos-gray-900);
-  background: var(--kombos-gray-900);
-  color: var(--kombos-white);
-}
-
-.kombos-option-choice__box-price {
-  color: var(--kombos-gray-500);
-}
-
-.kombos-option-choice__box--selected .kombos-option-choice__box-price {
-  color: var(--kombos-white);
-}

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/index.tsx

@@ -1,102 +0,0 @@
-import {
-  IkasProductOption,
-  selectValue,
-  clearValues,
-  isProductOptionSelectValueSelected,
-  getProductOptionFormattedLabel,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { cx } from "../../../../../../utils/cx";
-import Select from "../../../../../../sub-components/Select";
-import FormItem from "../../../../../../sub-components/FormItem";
-import Checkbox from "../../../../../../sub-components/Checkbox";
-import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
-
-interface Props {
-  option: IkasProductOption;
-  errored: boolean;
-  requiredErrorText: string;
-  placeholderText: string;
-  constraintText?: string;
-}
-
-const ChoiceSelect = observer(function ChoiceSelect({
-  option,
-  errored,
-  requiredErrorText,
-  placeholderText,
-  constraintText,
-}: Props) {
-  const settings = option.selectSettings!;
-  const selectedId = option.values?.[0] ?? "";
-  const selectOptions = settings.values.map((v) => ({
-    label: `${v.value} (${getSelectValuePrice(option, v)})`,
-    value: v.id,
-  }));
-
-  const isMulti = (settings.maxSelect ?? 0) > 1;
-  const selectId = !isMulti ? `option-choice-${option.id}` : undefined;
-
-  return (
-    <FormItem
-      label={getProductOptionFormattedLabel(option)}
-      htmlFor={selectId}
-      status={errored ? "error" : "default"}
-      description={option.optionalText}
-      helper={errored ? requiredErrorText : constraintText}
-    >
-      {isMulti ? (
-        <div
-          className={cx(
-            "kombos-option-choice__checklist",
-            errored && "kombos-option-choice__checklist--error",
-          )}
-        >
-          {settings.values.map((val) => {
-            const isSelected = isProductOptionSelectValueSelected(option, val);
-            const price = getSelectValuePrice(option, val);
-
-            return (
-              <div
-                key={val.id}
-                className="kombos-option-choice__checklist-row"
-                onClick={() => selectValue(option, val)}
-              >
-                <Checkbox
-                  checked={isSelected}
-                  onChange={() => selectValue(option, val)}
-                />
-                <span className="text-sm-medium">{val.value}</span>
-                {price && (
-                  <span className="kombos-option-choice__checklist-price text-xs-regular">
-                    {price}
-                  </span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <Select
-          id={selectId}
-          allowClear
-          options={[{ label: placeholderText, value: "" }, ...selectOptions]}
-          value={selectedId}
-          onChange={(e: Event) => {
-            const id = (e.target as HTMLSelectElement).value;
-            if (!id) {
-              clearValues(option, true);
-              return;
-            }
-            const val = settings.values.find((v) => v.id === id);
-            if (val) selectValue(option, val);
-          }}
-          onClear={() => clearValues(option, true)}
-          size="xs"
-        />
-      )}
-    </FormItem>
-  );
-});
-
-export default ChoiceSelect;