@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/image-handling/index.tsx

@@ -0,0 +1,92 @@
+import {
+  getIkasCategoryPathItemHref,
+  getProductCategoryPath,
+  getProductVariantMainImage,
+  getSelectedProductVariant,
+  IkasImage,
+  isNotEmpty,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import Breadcrumb from "../../sub-components/Breadcrumb";
+import type { BreadcrumbItem } from "../../sub-components/Breadcrumb";
+import ProductGallery from "./components/ProductGallery";
+
+export function ProductDetail(props: Props) {
+  const {
+    product,
+    components,
+    aspectRatio,
+    objectFit,
+    bottomComponents,
+    homepageText = "Anasayfa",
+  } = props;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const mainProductImage = getProductVariantMainImage(selectedVariant);
+  const mainImage = mainProductImage?.image;
+  const variantImages = selectedVariant?.images;
+  const images: IkasImage[] = variantImages?.length
+    ? variantImages
+        .map((pi: any) => pi.image)
+        .filter((img: any): img is IkasImage => img != null)
+    : mainImage
+      ? [mainImage]
+      : [];
+
+  const categoryPath = getProductCategoryPath(product);
+
+  return (
+    <section className="kombos-pd">
+      <div className="kombos-container kombos-pd__container">
+        <Breadcrumb
+          items={[
+            { label: homepageText, href: "/" } as BreadcrumbItem,
+            ...(isNotEmpty(categoryPath)
+              ? categoryPath.map(
+                  (pathItem: any) =>
+                    ({
+                      label: pathItem.name,
+                      href: getIkasCategoryPathItemHref(pathItem),
+                    }) as BreadcrumbItem,
+                )
+              : []),
+            { label: product.name } as BreadcrumbItem,
+          ]}
+          size="xs"
+          className="kombos-pd__breadcrumb"
+        />
+
+        <div className="kombos-pd__layout">
+          <ProductGallery
+            images={images}
+            productName={product.name}
+            aspectRatio={aspectRatio}
+            objectFit={objectFit}
+          />
+
+          <div className="kombos-pd__info">
+            <IkasComponentRenderer
+              id="product-detail-info"
+              components={components}
+              parentProps={props}
+            />
+          </div>
+        </div>
+
+        {bottomComponents && (
+          <div className="kombos-pd__bottom">
+            <IkasComponentRenderer
+              id="product-detail-bottom"
+              components={bottomComponents}
+              parentProps={props}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default ProductDetail;

package/data/section-templates/image-handling/styles.css

@@ -0,0 +1,58 @@
+/* ===== Product Detail Section ===== */
+
+.kombos-pd {
+  width: 100%;
+}
+
+/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */
+.kombos-pd__breadcrumb {
+  padding-top: 1rem;
+}
+
+/* ---- Layout ---- */
+.kombos-pd__layout {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+}
+
+/* ---- Product Info ---- */
+.kombos-pd__info {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd__container {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .kombos-pd__breadcrumb {
+    padding-top: 0;
+    padding-bottom: 1.5rem;
+  }
+
+  .kombos-pd__layout {
+    display: grid;
+    grid-template-columns: 7fr 5fr;
+    gap: 2rem;
+    padding-top: 0;
+  }
+
+  /* Gallery — sticky on desktop */
+  .kombos-pd__gallery {
+    position: sticky;
+    top: 0.75rem;
+    align-self: start;
+  }
+
+  /* Info — right side */
+  .kombos-pd__info {
+    min-width: 0;
+    padding: 0;
+  }
+}

package/data/section-templates/image-handling/sub-components/Breadcrumb/index.tsx

@@ -0,0 +1,57 @@
+import { cx } from "../../utils/cx";
+import { CaretRightSVG } from "../icons";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+  size?: "sm" | "xs";
+  className?: string;
+}
+
+export default function Breadcrumb({ items, size = "sm", className }: Props) {
+  if (items.length === 0) return null;
+
+  const typographyClass = size === "xs" ? "text-xs-medium" : "text-sm-medium";
+
+  return (
+    <nav className={cx("kombos-breadcrumb", className)}>
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        return (
+          <span key={item.href ?? item.label} className="kombos-breadcrumb__item">
+            {item.href ? (
+              <a
+                href={item.href}
+                className={cx("kombos-breadcrumb__link", typographyClass, isLast && "kombos-breadcrumb__link--active")}
+              >
+                {item.label}
+              </a>
+            ) : item.onClick ? (
+              <button
+                type="button"
+                onClick={item.onClick}
+                className={cx("kombos-breadcrumb__link", "kombos-breadcrumb__link-btn", typographyClass)}
+              >
+                {item.label}
+              </button>
+            ) : (
+              <span className={cx("kombos-breadcrumb__current", typographyClass)}>
+                {item.label}
+              </span>
+            )}
+            {!isLast && (
+              <span className={cx("kombos-breadcrumb__sep", size === "xs" && "kombos-breadcrumb__sep--xs")}>
+                <CaretRightSVG />
+              </span>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

package/data/section-templates/image-handling/sub-components/Breadcrumb/styles.css

@@ -0,0 +1,49 @@
+/* ===== Breadcrumb Sub-Component ===== */
+.kombos-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.kombos-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kombos-breadcrumb__link {
+  color: var(--kombos-gray-500);
+  text-decoration: none;
+}
+
+.kombos-breadcrumb__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-breadcrumb__link-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.kombos-breadcrumb__link--active {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-breadcrumb__current {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-breadcrumb__sep {
+  font-size: 0.75rem;
+  color: var(--kombos-gray-400);
+  display: inline-flex;
+  align-items: center;
+}
+
+.kombos-breadcrumb__sep--xs {
+  font-size: 0.625rem;
+  color: var(--kombos-gray-300);
+}

package/data/section-templates/image-handling/sub-components/SliderArrow/index.tsx

@@ -0,0 +1,26 @@
+import type { JSX } from "preact";
+import { CaretLeftSVG, CaretRightSVG } from "../icons";
+import { cx } from "../../utils/cx";
+
+interface Props extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "direction"> {
+  direction: "left" | "right";
+  disabled?: boolean;
+}
+
+export default function SliderArrow({
+  direction,
+  className,
+  ...rest
+}: Props) {
+  const Icon = direction === "left" ? CaretLeftSVG : CaretRightSVG;
+
+  return (
+    <button
+      className={cx("kombos-slider-arrow", className)}
+      aria-label={direction === "left" ? "Previous" : "Next"}
+      {...rest}
+    >
+      <Icon />
+    </button>
+  );
+}

package/data/section-templates/image-handling/sub-components/SliderArrow/styles.css

@@ -0,0 +1,24 @@
+/* ===== Slider Arrow ===== */
+.kombos-slider-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  border-radius: 50%;
+  border: 1px solid var(--kombos-gray-200);
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--kombos-gray-900);
+  transition: background 0.2s;
+}
+
+.kombos-slider-arrow:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.kombos-slider-arrow:disabled {
+  cursor: default;
+  color: var(--kombos-gray-400);
+}