@ikas/code-components-mcp 1.4.0-beta.23 → 1.4.0-beta.230

package/data/section-templates/product-detail-section/hooks/useBundleProducts.ts

@@ -9,15 +9,16 @@ import {
   cartStore,
   waitForCartStoreInit,
 } from "@ikas/bp-storefront";
-import { runInAction } from "mobx";
 import { adjustBundleProductQuantity } from "../utils/bundle";
 
+// No mobx action wrapper needed: adjustments go through the public
+// setBundleProductQuantity API (plain mutation, same as the SDK's own usage
+// examples), and keeping the theme free of direct mobx imports lets the
+// scaffold install cleanly under pnpm's strict node_modules layout.
 function adjustBundleQuantities(products: IkasBundleProduct[]) {
-  runInAction(() => {
-    for (const bp of products) {
-      adjustBundleProductQuantity(bp);
-    }
-  });
+  for (const bp of products) {
+    adjustBundleProductQuantity(bp);
+  }
 }
 
 export function useBundleProducts(product: IkasProduct | null | undefined) {

package/data/section-templates/product-detail-section/ikas-config-snippet.json

@@ -16,6 +16,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -24,6 +25,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -32,6 +34,46 @@
       "displayName": "Info Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-name-favorite"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-sku"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-prices"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-product-group"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-bundle-product"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-variant"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-option-set"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-add-to-cart"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-back-in-stock"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-offer"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-features"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-description"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailNameFavorite>",
         "<id-of-ProductDetailSku>",
@@ -39,6 +81,7 @@
         "<id-of-ProductDetailProductGroup>",
         "<id-of-ProductDetailVariant>",
         "<id-of-ProductDetailAddToCart>",
+        "<id-of-ProductDetailBackInStock>",
         "<id-of-ProductDetailFeatures>",
         "<id-of-ProductDetailDescription>",
         "<id-of-ProductDetailBundleProduct>",
@@ -51,6 +94,16 @@
       "displayName": "Sub Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-bundle-furniture"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-offer"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailBundleFurniture>",
         "<id-of-ProductDetailOffer>"

package/data/section-templates/product-detail-section/index.tsx

@@ -6,6 +6,7 @@ import {
   IkasImage,
   isNotEmpty,
   IkasComponentRenderer,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import { Props } from "./types";
 import Breadcrumb from "../../sub-components/Breadcrumb";
@@ -42,7 +43,10 @@ export function ProductDetail(props: Props) {
       <div className="kombos-container kombos-pd__container">
         <Breadcrumb
           items={[
-            { label: homepageText, href: "/" } as BreadcrumbItem,
+            {
+              label: homepageText,
+              href: withRoutePrefix("/"),
+            } as BreadcrumbItem,
             ...(isNotEmpty(categoryPath)
               ? categoryPath.map(
                   (pathItem: any) =>

package/data/section-templates/product-detail-section/sub-components/Modal/index.tsx

@@ -0,0 +1,120 @@
+import { useState, useEffect, useRef, useId } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import type { ComponentChildren } from "preact";
+import { useScrollLock } from "../../hooks/useScrollLock";
+import { cx } from "../../utils/cx";
+import { XSVG } from "../icons";
+import Button, { type ButtonProps } from "../Button";
+
+interface Props {
+  onClose: () => void;
+  title: string;
+  maxWidth?: string;
+  children: ComponentChildren;
+  className?: string;
+  okText?: string;
+  cancelText?: string;
+  onOk?: (e: Event) => void;
+  okButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  footer?: ComponentChildren | null;
+}
+
+export default function Modal({
+  onClose,
+  title,
+  maxWidth = "37.5rem",
+  children,
+  className,
+  okText,
+  cancelText,
+  onOk,
+  okButtonProps,
+  cancelButtonProps,
+  footer,
+}: Props) {
+  const titleId = useId();
+  const [visible, setVisible] = useState(false);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const handleCloseRef = useRef(() => {});
+  handleCloseRef.current = () => {
+    setVisible(false);
+    setTimeout(() => onCloseRef.current(), 300);
+  };
+
+  useScrollLock();
+
+  useEffect(() => {
+    const rafId = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleCloseRef.current();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return createPortal(
+    <div
+      className={cx("kombos-modal", visible && "kombos-modal--open", className)}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className="kombos-modal__panel" style={{ maxWidth }}>
+        <div className="kombos-modal__header">
+          <h2 id={titleId} className="kombos-modal__title text-md-medium">
+            {title}
+          </h2>
+          <button
+            type="button"
+            className="kombos-modal__close"
+            onClick={() => handleCloseRef.current()}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        <div className="kombos-modal__body">{children}</div>
+
+        {footer !== null &&
+          (footer !== undefined ? (
+            <div className="kombos-modal__footer">{footer}</div>
+          ) : (
+            (cancelText || okText) && (
+              <div className="kombos-modal__footer">
+                {cancelText && (
+                  <Button
+                    variant="secondary"
+                    size="s"
+                    type="button"
+                    onClick={() => handleCloseRef.current()}
+                    {...cancelButtonProps}
+                  >
+                    {cancelText}
+                  </Button>
+                )}
+                {okText && (
+                  <Button
+                    variant="primary"
+                    size="s"
+                    onClick={onOk}
+                    {...okButtonProps}
+                  >
+                    {okText}
+                  </Button>
+                )}
+              </div>
+            )
+          ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/data/section-templates/product-detail-section/sub-components/Modal/styles.css

@@ -0,0 +1,70 @@
+/* ── Modal ── */
+.kombos-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kombos-z-overlay);
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s;
+  padding: 1rem;
+}
+
+.kombos-modal--open {
+  opacity: 1;
+}
+
+.kombos-modal__panel {
+  background: var(--kombos-white);
+  border-radius: 6px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(1rem);
+  transition: transform 0.3s;
+}
+
+.kombos-modal--open .kombos-modal__panel {
+  transform: translateY(0);
+}
+
+.kombos-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--kombos-white);
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--kombos-gray-200);
+  border-radius: 6px 6px 0 0;
+}
+
+.kombos-modal__title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-modal__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-700);
+  font-size: 1.25rem;
+}
+
+.kombos-modal__body {
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.kombos-modal__footer {
+  background: var(--kombos-white);
+  padding: 1.5rem;
+  border-top: 1px solid var(--kombos-gray-200);
+  border-radius: 0 0 6px 6px;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}

package/data/section-templates/product-detail-section/sub-components/QuantitySelector/index.tsx

@@ -5,20 +5,27 @@ interface Props {
   value: number;
   onChange: (value: number) => void;
   size?: "default" | "sm";
+  min?: number;
+  max?: number;
 }
 
 export default function QuantitySelector({
   value,
   onChange,
   size = "default",
+  min = 1,
+  max,
 }: Props) {
+  const canDecrease = value > min;
+  const canIncrease = max == null || value < max;
+
   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}
+        onClick={() => onChange(Math.max(min, value - 1))}
+        disabled={!canDecrease}
         aria-label="Decrease quantity"
       >
         <MinusSVG />
@@ -31,7 +38,8 @@ export default function QuantitySelector({
       <button
         type="button"
         className="kombos-pd__qty-btn"
-        onClick={() => onChange(value + 1)}
+        onClick={() => onChange(max == null ? value + 1 : Math.min(max, value + 1))}
+        disabled={!canIncrease}
         aria-label="Increase quantity"
       >
         <PlusSVG />

package/data/section-templates/product-detail-section/utils/cartLimits.ts

@@ -0,0 +1,24 @@
+import { IkasProduct, IkasStorefrontConfig } from "@ikas/bp-storefront";
+
+export interface CartQuantityLimits {
+  min: number;
+  max?: number;
+}
+
+/**
+ * Resolve the per-cart quantity limits for a product from its active sales
+ * channel. Falls back to a minimum of 1 and no maximum when the channel or its
+ * limits are not set. `addItemToCart` clamps to the same limits internally only
+ * when it creates a NEW cart line — incrementing an existing line goes through
+ * `changeItemQuantity`, which never clamps — so enforcing these in the stepper
+ * is the only guard that covers both paths.
+ */
+export function getProductCartLimits(product: IkasProduct): CartQuantityLimits {
+  const channel = product.salesChannels?.find(
+    (sc) => sc.id === IkasStorefrontConfig.salesChannelId,
+  );
+  return {
+    min: channel?.minQuantityPerCart ?? 1,
+    max: channel?.maxQuantityPerCart ?? undefined,
+  };
+}

package/data/section-templates/product-pricing/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     }

package/data/section-templates/product-slider-section/children/CardProductName/ikas-config-snippet.json

@@ -15,7 +15,8 @@
       "name": "singleLineName",
       "displayName": "Single Row First Name",
       "type": "BOOLEAN",
-      "required": false
+      "required": false,
+      "defaultValue": false
     }
   ]
 }

package/data/section-templates/product-slider-section/ikas-config-snippet.json

@@ -57,6 +57,7 @@
       "displayName": "Column Count",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Four",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:NumberOfColumns}}"
     },
@@ -65,6 +66,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -73,6 +75,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -81,6 +84,7 @@
       "displayName": "Hide Add to Cart Button",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "appearance"
     },
     {
@@ -88,6 +92,19 @@
       "displayName": "Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-card-product-name"
+          },
+          {
+            "codeComponentId": "nb34u3yu-card-product-variants"
+          },
+          {
+            "codeComponentId": "nb34u3yu-card-product-price"
+          }
+        ]
+      },
       "privateVarMap": {
         "product": {
           "id": "pvm_1772803530689_1",

package/data/section-templates/register-section/ikas-config-snippet.json

@@ -142,6 +142,7 @@
       "displayName": "Google Login",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "google"
     },
     {
@@ -157,6 +158,7 @@
       "displayName": "Facebook Login",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "facebook"
     },
     {

package/data/section-templates/variant-selection/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -48,6 +64,7 @@
       "displayName": "Image Variant",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "description": "Use product images for color variant."
     }
   ],