@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/bundle-products/sub-components/BundleMedia/index.tsx

@@ -0,0 +1,72 @@
+import {
+  getProductVariantMainImage,
+  getDefaultSrc,
+  IkasProductVariant,
+} from "@ikas/bp-storefront";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+import { NoProductSVG } from "../icons";
+
+interface Props {
+  variant: IkasProductVariant | null;
+  alt: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  wrapperClassName: string;
+  mediaClassName: string;
+  placeholderClassName: string;
+}
+
+export default function BundleMedia({
+  variant,
+  alt,
+  aspectRatio,
+  objectFit,
+  wrapperClassName,
+  mediaClassName,
+  placeholderClassName,
+}: Props) {
+  const variantImage = variant ? getProductVariantMainImage(variant) : null;
+  const imageSrc = variantImage?.image
+    ? getDefaultSrc(variantImage.image)
+    : null;
+
+  const fitStyle = {
+    objectFit: resolveObjectFit(objectFit) as CSSStyleDeclaration["objectFit"],
+  };
+
+  return (
+    <div
+      className={wrapperClassName}
+      style={{ aspectRatio: resolveAspectRatio(aspectRatio) }}
+    >
+      {imageSrc ? (
+        variantImage?.isVideo ? (
+          <video
+            src={imageSrc}
+            className={mediaClassName}
+            autoPlay
+            loop
+            muted
+            playsInline
+            style={fitStyle}
+          >
+            <track kind="captions" />
+          </video>
+        ) : (
+          <img
+            src={imageSrc}
+            alt={alt}
+            className={mediaClassName}
+            loading="lazy"
+            style={fitStyle}
+          />
+        )
+      ) : (
+        <div className={placeholderClassName}>
+          <NoProductSVG />
+        </div>
+      )}
+    </div>
+  );
+}

package/data/section-templates/bundle-products/sub-components/BundleQuantityBox/index.tsx

@@ -0,0 +1,73 @@
+import {
+  IkasBundleProduct,
+  isBundleProductQuantityEditable,
+  setBundleProductQuantity,
+  getSelectedProductVariant,
+  hasProductVariantStock,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { MinusSVG, PlusSVG } from "../icons";
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+}
+
+const BundleQuantityBox = observer(function BundleQuantityBox({
+  bundleProduct,
+}: Props) {
+  if (!isBundleProductQuantityEditable(bundleProduct)) {
+    return (
+      <span className="kombos-bundle-qty__static text-sm-medium">
+        {bundleProduct.quantity}
+      </span>
+    );
+  }
+
+  const selectedVariant = bundleProduct.product
+    ? getSelectedProductVariant(bundleProduct.product)
+    : null;
+
+  const stock = selectedVariant?.stock ?? 0;
+  const sellIfOutOfStock = selectedVariant?.sellIfOutOfStock ?? false;
+  const hasNoStock = selectedVariant
+    ? !hasProductVariantStock(selectedVariant)
+    : false;
+
+  const canDecrement =
+    bundleProduct.quantity > (bundleProduct.minQuantity ?? 0);
+  const canIncrement =
+    sellIfOutOfStock ||
+    (!hasNoStock && (stock >= 10 || bundleProduct.quantity < stock));
+
+  return (
+    <div className="kombos-bundle-qty">
+      <button
+        type="button"
+        className="kombos-bundle-qty__btn"
+        onClick={() =>
+          setBundleProductQuantity(bundleProduct, bundleProduct.quantity - 1)
+        }
+        disabled={!canDecrement}
+        aria-label="Decrease quantity"
+      >
+        <MinusSVG />
+      </button>
+      <span className="kombos-bundle-qty__value text-sm-medium">
+        {bundleProduct.quantity}
+      </span>
+      <button
+        type="button"
+        className="kombos-bundle-qty__btn"
+        onClick={() =>
+          setBundleProductQuantity(bundleProduct, bundleProduct.quantity + 1)
+        }
+        disabled={!canIncrement}
+        aria-label="Increase quantity"
+      >
+        <PlusSVG />
+      </button>
+    </div>
+  );
+});
+
+export default BundleQuantityBox;

package/data/section-templates/bundle-products/sub-components/BundleQuantityBox/styles.css

@@ -0,0 +1,43 @@
+/* ===== BundleQuantityBox ===== */
+.kombos-bundle-qty {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.125rem;
+}
+
+.kombos-bundle-qty__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-700);
+  font-size: 0.875rem;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+.kombos-bundle-qty__btn:hover:not(:disabled) {
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-bundle-qty__btn:disabled {
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-bundle-qty__value {
+  min-width: 1.5rem;
+  text-align: center;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-qty__static {
+  color: var(--kombos-gray-700);
+}

package/data/section-templates/bundle-products/sub-components/VariantBadge/index.tsx

@@ -0,0 +1,153 @@
+import {
+  IkasProduct,
+  IkasVariantValue,
+  getIkasVariantValueThumbnailImage,
+  isIkasVariantTypeColorSelection,
+  selectVariantValue,
+  getDisplayedProductVariantTypes,
+  getProductVariantMainImage,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { BadgeImage, BadgeColor, BadgeText } from "../Badge";
+import { cx } from "../../utils/cx";
+
+interface Props {
+  product: IkasProduct;
+  size?: "xs" | "s" | "m" | "l";
+  disableRoute?: boolean;
+  scrollable?: boolean;
+  showLabels?: boolean;
+  useVariantImages?: boolean;
+  onSelect?: () => void;
+}
+
+const VariantBadge = observer(function VariantBadge({
+  product,
+  size = "s",
+  disableRoute,
+  scrollable,
+  showLabels,
+  useVariantImages,
+  onSelect,
+}: Props) {
+  const displayedVariantTypes = getDisplayedProductVariantTypes(product);
+  if (displayedVariantTypes.length === 0) return null;
+
+  function handleSelect(variantValue: IkasVariantValue) {
+    selectVariantValue(product, variantValue, disableRoute);
+    onSelect?.();
+  }
+
+  return (
+    <div
+      className={cx(
+        "kombos-variant-badge__groups",
+        size === "l" && "kombos-variant-badge__groups--l",
+      )}
+    >
+      {displayedVariantTypes.map((dvt) => {
+        const isColor = isIkasVariantTypeColorSelection(dvt.variantType);
+
+        return (
+          <div key={dvt.variantType.id} className="kombos-variant-badge__group">
+            {showLabels && (
+              <span className={cx("kombos-variant-badge__label", size === "xs" ? "text-xs-medium" : "text-sm-medium")}>
+                {dvt.variantType.name}
+              </span>
+            )}
+            <div
+              className={cx(
+                "kombos-variant-badge__row",
+                scrollable && "kombos-variant-badge__row--scrollable",
+                size === "l" && "kombos-variant-badge__row--l",
+              )}
+            >
+              {dvt.displayedVariantValues.map((dvv) => {
+                const isSelected = dvv.isSelected;
+                const outOfStock = dvv.hasStock === false;
+                const variantValue = dvv.variantValue;
+
+                if (isColor) {
+                  // Variant product image
+                  if (useVariantImages) {
+                    const variantImage = getProductVariantMainImage(
+                      dvv.variant,
+                    )?.image;
+
+                    if (variantImage) {
+                      return (
+                        <BadgeImage
+                          key={variantValue.id}
+                          image={variantImage}
+                          alt={variantValue.name}
+                          sizes="64px"
+                          variantImg
+                          size={size}
+                          selected={isSelected}
+                          outOfStock={outOfStock}
+                          onClick={() => handleSelect(variantValue)}
+                          aria-label={variantValue.name}
+                        />
+                      );
+                    }
+                  }
+
+                  // Thumbnail image
+                  const thumbImage =
+                    getIkasVariantValueThumbnailImage(variantValue);
+
+                  if (thumbImage) {
+                    return (
+                      <BadgeImage
+                        key={variantValue.id}
+                        image={thumbImage}
+                        alt={variantValue.name}
+                        sizes="(max-width: 1024px) 100vw, 100px"
+                        size={size}
+                        selected={isSelected}
+                        outOfStock={outOfStock}
+                        onClick={() => handleSelect(variantValue)}
+                        aria-label={variantValue.name}
+                      />
+                    );
+                  }
+
+                  // Color swatch
+                  const colorCode = variantValue.colorCode;
+                  if (colorCode) {
+                    return (
+                      <BadgeColor
+                        key={variantValue.id}
+                        colorCode={colorCode}
+                        size={size}
+                        selected={isSelected}
+                        outOfStock={outOfStock}
+                        onClick={() => handleSelect(variantValue)}
+                        aria-label={variantValue.name}
+                      />
+                    );
+                  }
+                }
+
+                // Text badge (fallback)
+                return (
+                  <BadgeText
+                    key={variantValue.id}
+                    size={size}
+                    selected={isSelected}
+                    outOfStock={outOfStock}
+                    onClick={() => handleSelect(variantValue)}
+                  >
+                    {variantValue.name}
+                  </BadgeText>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+export default VariantBadge;

package/data/section-templates/bundle-products/sub-components/VariantBadge/styles.css

@@ -0,0 +1,47 @@
+/* ===== Variant Badge Layout ===== */
+
+/* ---- Layout ---- */
+.kombos-variant-badge__groups {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.kombos-variant-badge__groups--l {
+  gap: 1.5rem;
+}
+
+.kombos-variant-badge__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-variant-badge__label {
+  color: var(--kombos-gray-900);
+  margin-bottom: 0.375rem;
+}
+
+.kombos-variant-badge__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.kombos-variant-badge__row--l {
+  gap: 0.5rem;
+}
+
+.kombos-variant-badge__row--scrollable {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.kombos-variant-badge__row--scrollable::-webkit-scrollbar {
+  display: none;
+}
+
+.kombos-variant-badge__row--scrollable .kombos-badge {
+  flex-shrink: 0;
+}