@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/blog-post-section/types.ts

@@ -0,0 +1,11 @@
+import type { IkasBlog } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  blogPost: IkasBlog | null;
+  homeText?: string;
+  blogText?: string;
+  tagsTitle?: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}

package/data/section-templates/blog-post-section/utils/cx.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cx(...classes: any[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/data/section-templates/blog-post-section/utils/fullName.ts

@@ -0,0 +1,6 @@
+export function getFullName(
+  firstName?: string | null,
+  lastName?: string | null
+): string {
+  return [firstName, lastName].filter(Boolean).join(" ");
+}

package/data/section-templates/blog-post-section/utils/media.ts

@@ -0,0 +1,36 @@
+import type { AspectRatio, ObjectFit, VerticalAlignment } from "../global-types";
+
+const DEFAULT_ASPECT_RATIO: AspectRatio = "Square";
+const DEFAULT_OBJECT_FIT: ObjectFit = "Cover";
+const DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = "Middle";
+
+const ASPECT_RATIO_MAP: Record<AspectRatio, string> = {
+  Square: "1 / 1",
+  Portrait: "3 / 4",
+  Landscape: "4 / 3",
+  Video: "16 / 9",
+};
+
+const OBJECT_FIT_MAP: Record<ObjectFit, string> = {
+  Fill: "fill",
+  Cover: "cover",
+  Contain: "contain",
+};
+
+const ALIGNMENT_MAP: Record<VerticalAlignment, string> = {
+  Top: "flex-start",
+  Middle: "center",
+  Bottom: "flex-end",
+};
+
+export function resolveAspectRatio(value?: AspectRatio): string {
+  return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];
+}
+
+export function resolveObjectFit(value?: ObjectFit): string {
+  return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];
+}
+
+export function resolveVerticalAlignment(value?: VerticalAlignment): string {
+  return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];
+}

package/data/section-templates/bundle-products/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Bundle Products Pattern",
+  "description": "Bundle product display and selection. Shows hasBundleSettings, initBundleProducts, bundle variant selection, bundle pricing, and the useBundleProducts hook for managing bundle state."
+}

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

@@ -0,0 +1,169 @@
+import {
+  IkasBundleProduct,
+  getSelectedProductVariant,
+  getProductHref,
+  shouldDisplayBundleProductPrice,
+  getBundleProductFinalPrice,
+  getBundleProductSellPrice,
+  getBundleProductFormattedFinalPrice,
+  getBundleProductFormattedSellPrice,
+  getBundleProductFormattedFinalPriceWithQuantity,
+  getBundleProductFormattedSellPriceWithQuantity,
+  getBundleProductFinalPriceWithQuantity,
+  getBundleProductSellPriceWithQuantity,
+  hasProductVariantStock,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import VariantBadge from "../../../../sub-components/VariantBadge";
+import BundleQuantityBox from "../../../../sub-components/BundleQuantityBox";
+import BundleMedia from "../../../../sub-components/BundleMedia";
+import { adjustBundleProductQuantity } from "../../../../utils/bundle";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+  quantityLabel: string;
+  outOfStockText: string;
+  bundleProductWithoutLink?: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+const BundleProductItem = observer(function BundleProductItem({
+  bundleProduct,
+  quantityLabel,
+  outOfStockText,
+  bundleProductWithoutLink,
+  aspectRatio = "Square",
+  objectFit = "Cover",
+}: Props) {
+  const product = bundleProduct.product;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const hasStock = selectedVariant
+    ? hasProductVariantStock(selectedVariant)
+    : false;
+
+  const productHref = getProductHref(product);
+
+  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
+  const unitFinalPrice = getBundleProductFinalPrice(bundleProduct);
+  const unitSellPrice = getBundleProductSellPrice(bundleProduct);
+  const hasDiscount = showPrice && unitFinalPrice !== unitSellPrice;
+
+  const hasQuantity = bundleProduct.quantity > 1;
+
+  const totalFinalPrice = getBundleProductFinalPriceWithQuantity(bundleProduct);
+  const totalSellPrice = getBundleProductSellPriceWithQuantity(bundleProduct);
+  const hasTotalDiscount =
+    showPrice &&
+    totalFinalPrice !== totalSellPrice &&
+    bundleProduct.quantity > 0;
+
+  const ImageWrapper = bundleProductWithoutLink ? "div" : "a";
+  const imageWrapperProps = bundleProductWithoutLink
+    ? {}
+    : { href: productHref, "aria-label": product.name };
+
+  const NameWrapper = bundleProductWithoutLink ? "span" : "a";
+  const nameWrapperProps = bundleProductWithoutLink
+    ? {}
+    : { href: productHref };
+
+  return (
+    <div className="kombos-bundle-item">
+      {/* Image */}
+      <ImageWrapper
+        className="kombos-bundle-item__image-wrap"
+        {...imageWrapperProps}
+      >
+        <BundleMedia
+          variant={selectedVariant}
+          alt={product.name}
+          aspectRatio={aspectRatio}
+          objectFit={objectFit}
+          wrapperClassName="kombos-bundle-item__media-inner"
+          mediaClassName="kombos-bundle-item__image"
+          placeholderClassName="kombos-bundle-item__image-placeholder"
+        />
+      </ImageWrapper>
+      {/* Info */}
+      <div className="kombos-bundle-item__info">
+        {/* Header: name + total price (quantity × unit) */}
+        <div className="kombos-bundle-item__header">
+          <NameWrapper
+            className="kombos-bundle-item__name text-sm-semibold"
+            {...nameWrapperProps}
+          >
+            {product.name}
+          </NameWrapper>
+          {showPrice && hasQuantity && (
+            <div className="kombos-bundle-item__total-price">
+              {hasTotalDiscount && (
+                <span className="kombos-bundle-item__total-sell text-sm-regular-strike">
+                  {getBundleProductFormattedSellPriceWithQuantity(
+                    bundleProduct,
+                  )}
+                </span>
+              )}
+              <span className="kombos-bundle-item__total-final text-sm-semibold">
+                {getBundleProductFormattedFinalPriceWithQuantity(bundleProduct)}
+              </span>
+            </div>
+          )}
+          {showPrice && !hasQuantity && (
+            <div className="kombos-bundle-item__unit-price">
+              {hasDiscount && (
+                <span className="kombos-bundle-item__sell-price text-sm-regular-strike">
+                  {getBundleProductFormattedSellPrice(bundleProduct)}
+                </span>
+              )}
+              <span className="kombos-bundle-item__final-price text-sm-semibold">
+                {getBundleProductFormattedFinalPrice(bundleProduct)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Variants */}
+        <VariantBadge
+          product={product}
+          disableRoute
+          size="xs"
+          onSelect={() => adjustBundleProductQuantity(bundleProduct)}
+        />
+
+        {/* Bottom: quantity + unit price + out of stock */}
+        <div className="kombos-bundle-item__bottom">
+          <div className="kombos-bundle-item__qty-row">
+            <span className="kombos-bundle-item__qty-label text-xs-regular">
+              {quantityLabel}
+            </span>
+            <BundleQuantityBox bundleProduct={bundleProduct} />
+            {showPrice && bundleProduct.quantity > 1 && (
+              <div className="kombos-bundle-item__unit-price">
+                {hasDiscount && (
+                  <span className="kombos-bundle-item__sell-price text-sm-regular-strike">
+                    {getBundleProductFormattedSellPrice(bundleProduct)}
+                  </span>
+                )}
+                <span className="kombos-bundle-item__final-price text-sm-semibold">
+                  {getBundleProductFormattedFinalPrice(bundleProduct)}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {!hasStock && (
+            <span className="kombos-bundle-item__out-of-stock text-xs-medium">
+              {outOfStockText}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default BundleProductItem;

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

@@ -0,0 +1,141 @@
+/* ===== BundleProductItem ===== */
+.kombos-bundle-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-item__image-wrap {
+  display: block;
+  width: 6.25rem;
+  min-width: 6.25rem;
+  height: fit-content;
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--kombos-gray-50);
+  text-decoration: none;
+}
+
+.kombos-bundle-item__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kombos-bundle-item__image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 2rem;
+  color: var(--kombos-gray-300);
+}
+
+.kombos-bundle-item__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-bundle-item__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.kombos-bundle-item__name {
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  width: fit-content;
+}
+
+a.kombos-bundle-item__name:hover {
+  text-decoration: underline;
+}
+
+.kombos-bundle-item__unit-price {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+
+.kombos-bundle-item__final-price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-item__sell-price {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-item__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
+.kombos-bundle-item__qty-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-bundle-item__qty-label {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-item__total-price {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.kombos-bundle-item__total-final {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-item__total-sell {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bundle-item__out-of-stock {
+  color: var(--kombos-error);
+}
+
+/* ===== Mobile adjustments (< 768px) ===== */
+@media (max-width: 767px) {
+  .kombos-bundle-item__image-wrap {
+    width: 4.5rem;
+    min-width: 4.5rem;
+  }
+
+  .kombos-bundle-item__header {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .kombos-bundle-item__unit-price {
+    margin-left: 0;
+  }
+
+  .kombos-bundle-item__qty-row {
+    flex-wrap: wrap;
+  }
+}
+

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

@@ -0,0 +1,35 @@
+interface Props {
+  count?: number;
+  variant?: "card" | "table";
+}
+
+export default function BundleSkeletonLoading({ count = 3, variant = "card" }: Props) {
+  if (variant === "table") {
+    return (
+      <div className="kombos-bundle-skeleton-table">
+        <div className="kombos-bundle-skeleton-table__header kombos-bundle-skeleton__shimmer" />
+        {Array.from({ length: count }).map((_, i) => (
+          <div key={i} className="kombos-bundle-skeleton-table__row">
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--wide kombos-bundle-skeleton__shimmer" />
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--price kombos-bundle-skeleton__shimmer" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="kombos-bundle-skeleton">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="kombos-bundle-skeleton__item">
+          <div className="kombos-bundle-skeleton__image kombos-bundle-skeleton__shimmer" />
+          <div className="kombos-bundle-skeleton__info">
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--wide kombos-bundle-skeleton__shimmer" />
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--medium kombos-bundle-skeleton__shimmer" />
+            <div className="kombos-bundle-skeleton__bar kombos-bundle-skeleton__bar--narrow kombos-bundle-skeleton__shimmer" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+/* ===== BundleSkeletonLoading ===== */
+.kombos-bundle-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-bundle-skeleton__item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton__image {
+  width: 6.25rem;
+  min-width: 6.25rem;
+  height: 4.75rem;
+  border-radius: 6px;
+  background-color: var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.kombos-bundle-skeleton__bar {
+  height: 0.875rem;
+  border-radius: 4px;
+  background-color: var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton__bar--wide {
+  width: 70%;
+}
+
+.kombos-bundle-skeleton__bar--medium {
+  width: 50%;
+}
+
+.kombos-bundle-skeleton__bar--narrow {
+  width: 35%;
+}
+
+.kombos-bundle-skeleton__bar--price {
+  width: 4.5rem;
+  margin-left: auto;
+}
+
+/* ===== Table variant ===== */
+.kombos-bundle-skeleton-table {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-bundle-skeleton-table__header {
+  height: 2.75rem;
+  background-color: var(--kombos-gray-200);
+}
+
+.kombos-bundle-skeleton-table__row {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-bundle-skeleton-table__row:last-child {
+  border-bottom: none;
+}
+
+.kombos-bundle-skeleton__shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--kombos-gray-100) 25%,
+    var(--kombos-gray-50) 50%,
+    var(--kombos-gray-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: kombos-shimmer 1.5s ease-in-out infinite;
+}

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

@@ -0,0 +1,51 @@
+import {
+  shouldDisplayBundleProductPrice,
+  getBundleProductFormattedFinalPrice,
+  getProductHref,
+  IkasBundleProduct,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+  withoutLink?: boolean;
+  quantityLabel: string;
+}
+
+const FurnitureRow = observer(function FurnitureRow({
+  bundleProduct,
+  withoutLink,
+  quantityLabel,
+}: Props) {
+  const product = bundleProduct.product;
+  if (!product || bundleProduct.quantity === 0) return null;
+
+  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
+  const formattedPrice = showPrice
+    ? getBundleProductFormattedFinalPrice(bundleProduct)
+    : "";
+  const productHref = getProductHref(product);
+
+  const NameTag = withoutLink ? "span" : "a";
+  const nameProps = withoutLink ? {} : { href: productHref };
+
+  return (
+    <tr className="kombos-bundle-table__row">
+      <td className="kombos-bundle-table__cell kombos-bundle-table__cell--name">
+        <NameTag
+          className="kombos-bundle-table__link text-sm-regular"
+          {...nameProps}
+        >
+          {product.name}
+        </NameTag>
+      </td>
+      <td className="kombos-bundle-table__cell kombos-bundle-table__cell--price text-sm-medium">
+        {showPrice && formattedPrice
+          ? `${bundleProduct.quantity} x ${formattedPrice}`
+          : `${quantityLabel} ${bundleProduct.quantity}`}
+      </td>
+    </tr>
+  );
+});
+
+export default FurnitureRow;

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

@@ -0,0 +1,30 @@
+.kombos-bundle-table__row {
+  border-bottom: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-bundle-table__row:last-child {
+  border-bottom: none;
+}
+
+.kombos-bundle-table__cell {
+  padding: 0.75rem 1rem;
+}
+
+.kombos-bundle-table__cell--name {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-table__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.kombos-bundle-table__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-bundle-table__cell--price {
+  color: var(--kombos-gray-900);
+  text-align: right;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,54 @@
+import { IkasBundleProduct } from "@ikas/bp-storefront";
+import BundleSkeletonLoading from "../BundleSkeletonLoading";
+import FurnitureRow from "../FurnitureRow";
+
+interface Props {
+  marginStyles: Record<string, string>;
+  isLoading: boolean;
+  skeletonCount: number;
+  sortedProducts: IkasBundleProduct[];
+  productContentTitle: string;
+  bundleProductWithoutLink?: boolean;
+  quantityLabel: string;
+}
+
+export default function FurnitureView({
+  marginStyles,
+  isLoading,
+  skeletonCount,
+  sortedProducts,
+  productContentTitle,
+  bundleProductWithoutLink,
+  quantityLabel,
+}: Props) {
+  return (
+    <div
+      className="kombos-bundle"
+      style={{ ...marginStyles, "--kombos-bundle-table-border": "var(--kombos-gray-900)" }}
+    >
+      {isLoading ? (
+        <BundleSkeletonLoading count={skeletonCount} variant="table" />
+      ) : (
+        <div className="kombos-bundle-table">
+          <div className="kombos-bundle-table__header">
+            <span className="kombos-bundle-table__title text-md-semibold">
+              {productContentTitle}
+            </span>
+          </div>
+          <table className="kombos-bundle-table__table">
+            <tbody>
+              {sortedProducts.map((bp) => (
+                <FurnitureRow
+                  key={bp.id}
+                  bundleProduct={bp}
+                  withoutLink={bundleProductWithoutLink}
+                  quantityLabel={quantityLabel}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+.kombos-bundle-table {
+  border: 1px solid var(--kombos-bundle-table-border, var(--kombos-gray-900));
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-bundle-table__header {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background-color: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-bundle-table__title {
+  color: inherit;
+}
+
+.kombos-bundle-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}

package/data/section-templates/bundle-products/global-types.ts

@@ -0,0 +1,13 @@
+// Auto-generated global type definitions for ikas code components.
+// This file is regenerated automatically — do not edit manually.
+
+/** Enum type: s3OODUmZpJ */
+export type AspectRatio = "Square" | "Portrait" | "Landscape" | "Video";
+/** Enum type: __breakpointsEnum__ */
+export type Breakpoints = "desktop";
+/** Enum type: Tkt3wfuJ5F */
+export type NumberOfColumns = "One" | "Two" | "Three" | "Four" | "Five";
+/** Enum type: GrylMqHxui */
+export type ObjectFit = "Fill" | "Cover" | "Contain";
+/** Enum type: 08UWYbbs0P */
+export type VerticalAlignment = "Top" | "Middle" | "Bottom";