@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/cart-section/types.ts

@@ -0,0 +1,15 @@
+export interface Props {
+  title?: string;
+  emptyCartText?: string;
+  subtotalLabel?: string;
+  totalLabel?: string;
+  checkoutButtonText?: string;
+  itemsText?: string;
+  couponPlaceholder?: string;
+  couponApplyText?: string;
+  couponRemoveText?: string;
+  couponApplyingText?: string;
+  orderSummaryTitle?: string;
+  couponToggleText?: string;
+  continueShoppingText?: string;
+}

package/data/section-templates/cart-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/cart-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/category-images-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Category Images Section",
+  "description": "Grid of category image cards with links. Uses IkasComponentRenderer to render CategoryImageItem children with configurable images, titles, and navigation links."
+}

package/data/section-templates/category-images-section/children/CategoryImageItem/components/Card/index.tsx

@@ -0,0 +1,64 @@
+import {
+  IkasImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  img: IkasImage;
+  cssClass: string;
+  objectFit: string;
+  aspectRatio?: string;
+  overlay: boolean;
+  label?: string;
+  href?: string;
+  openInNewTab?: boolean;
+}
+
+export default function Card({
+  img,
+  cssClass,
+  objectFit,
+  aspectRatio,
+  overlay,
+  label,
+  href,
+  openInNewTab,
+}: Props) {
+  const cardClass = cx("kombos-category-image-item__card", cssClass);
+  const Tag = href ? "a" : "div";
+  const linkProps = href
+    ? {
+        href,
+        target: openInNewTab ? "_blank" : undefined,
+        rel: openInNewTab ? "noopener noreferrer" : undefined,
+      }
+    : {};
+
+  return (
+    <Tag className={cardClass} {...linkProps}>
+      <div
+        className="kombos-category-image-item__img-wrap"
+        style={aspectRatio ? { aspectRatio, height: "auto" } : undefined}
+      >
+        <img
+          className="kombos-category-image-item__img"
+          src={getDefaultSrc(img)}
+          srcSet={createMediaSrcset(img)}
+          sizes="(max-width: 1023px) 100vw, 50vw"
+          alt={label ? "" : img.altText || "Category"}
+          style={{ objectFit }}
+          loading="lazy"
+          decoding="async"
+        />
+      </div>
+      {overlay && <div className="kombos-category-image-item__overlay" />}
+      {label && (
+        <span className="kombos-category-image-item__label display-xs-semibold md:display-sm-semibold">
+          {label}
+        </span>
+      )}
+    </Tag>
+  );
+}

package/data/section-templates/category-images-section/children/CategoryImageItem/components/Card/styles.css

@@ -0,0 +1,56 @@
+.kombos-category-image-item__card {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+}
+
+.kombos-category-image-item__card--desktop {
+  display: none;
+}
+
+.kombos-category-image-item__card--mobile {
+  display: block;
+}
+
+.kombos-category-image-item__img-wrap {
+  width: 100%;
+  height: 100%;
+}
+
+.kombos-category-image-item__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s ease;
+}
+
+.kombos-category-image-item__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+
+.kombos-category-image-item__label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-white);
+  text-align: center;
+  pointer-events: none;
+  padding: 1.5rem;
+}
+
+@media (min-width: 1024px) {
+  .kombos-category-image-item__card--desktop {
+    display: block;
+  }
+
+  .kombos-category-image-item__card--mobile {
+    display: none;
+  }
+}

package/data/section-templates/category-images-section/children/CategoryImageItem/ikas-config-snippet.json

@@ -0,0 +1,93 @@
+{
+  "id": "{{PROJECT_ID}}-category-image-item",
+  "name": "CategoryImageItem",
+  "type": "component",
+  "entry": "./src/components/CategoryImageItem/index.tsx",
+  "styles": "./src/components/CategoryImageItem/styles.css",
+  "props": [
+    {
+      "name": "image",
+      "displayName": "Görsel",
+      "type": "IMAGE",
+      "required": false,
+      "groupId": "desktop"
+    },
+    {
+      "name": "link",
+      "displayName": "Bağlantı",
+      "type": "LINK",
+      "required": false,
+      "groupId": "desktop"
+    },
+    {
+      "name": "overlay",
+      "displayName": "Koyu Kaplama",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "desktop"
+    },
+    {
+      "name": "aspectRatio",
+      "displayName": "En Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "desktop",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "objectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "desktop",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "mobileImage",
+      "displayName": "Görsel",
+      "type": "IMAGE",
+      "required": false,
+      "groupId": "mobile"
+    },
+    {
+      "name": "mobileLink",
+      "displayName": "Bağlantı",
+      "type": "LINK",
+      "required": false,
+      "groupId": "mobile"
+    },
+    {
+      "name": "mobileOverlay",
+      "displayName": "Koyu Kaplama",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "mobile"
+    },
+    {
+      "name": "mobileAspectRatio",
+      "displayName": "En Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "mobile",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "mobileObjectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "mobile",
+      "enumTypeId": "GrylMqHxui"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "desktop",
+      "name": "Masaüstü Ayarları"
+    },
+    {
+      "id": "mobile",
+      "name": "Mobil Ayarları"
+    }
+  ]
+}

package/data/section-templates/category-images-section/children/CategoryImageItem/index.tsx

@@ -0,0 +1,64 @@
+import { Props } from "./types";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import Card from "./components/Card";
+
+export function CategoryImageItem({
+  image,
+  link,
+  overlay = false,
+  aspectRatio,
+  objectFit,
+  mobileImage,
+  mobileLink,
+  mobileOverlay,
+  mobileAspectRatio,
+  mobileObjectFit,
+}: Props) {
+  const desktopImg = image || mobileImage;
+  const mobileImg = mobileImage || image;
+
+  if (!desktopImg && !mobileImg) return null;
+
+  const desktopFit = resolveObjectFit(objectFit);
+  const mobileFit = mobileObjectFit
+    ? resolveObjectFit(mobileObjectFit)
+    : desktopFit;
+
+  const desktopAR = aspectRatio ? resolveAspectRatio(aspectRatio) : undefined;
+  const mobileAR = mobileAspectRatio
+    ? resolveAspectRatio(mobileAspectRatio)
+    : desktopAR;
+
+  const mobOverlay = mobileOverlay ?? overlay;
+
+  return (
+    <div className="kombos-category-image-item">
+      {desktopImg && (
+        <Card
+          img={desktopImg}
+          cssClass="kombos-category-image-item__card--desktop"
+          objectFit={desktopFit}
+          aspectRatio={desktopAR}
+          overlay={overlay}
+          label={link?.label}
+          href={link?.href || undefined}
+          openInNewTab={link?.openInNewTab}
+        />
+      )}
+      {mobileImg && (
+        <Card
+          img={mobileImg}
+          cssClass="kombos-category-image-item__card--mobile"
+          objectFit={mobileFit}
+          aspectRatio={mobileAR}
+          overlay={mobOverlay}
+          label={mobileLink?.label}
+          href={mobileLink?.href || undefined}
+          openInNewTab={mobileLink?.openInNewTab}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CategoryImageItem;

package/data/section-templates/category-images-section/children/CategoryImageItem/styles.css

@@ -0,0 +1,10 @@
+.kombos-category-image-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  height: 100%;
+}
+
+.kombos-category-image-item:hover .kombos-category-image-item__img {
+  transform: scale(1.15);
+}

package/data/section-templates/category-images-section/children/CategoryImageItem/types.ts

@@ -0,0 +1,15 @@
+import type { IkasImage, IkasNavigationLink } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  image?: IkasImage | null;
+  link?: IkasNavigationLink | null;
+  overlay?: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  mobileImage?: IkasImage | null;
+  mobileLink?: IkasNavigationLink | null;
+  mobileOverlay?: boolean;
+  mobileAspectRatio?: AspectRatio;
+  mobileObjectFit?: ObjectFit;
+}

package/data/section-templates/category-images-section/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";

package/data/section-templates/category-images-section/ikas-config-snippet.json

@@ -0,0 +1,69 @@
+{
+  "id": "{{PROJECT_ID}}-category-images",
+  "name": "CategoryImages",
+  "type": "section",
+  "entry": "./src/components/CategoryImages/index.tsx",
+  "styles": "./src/components/CategoryImages/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Bölüm Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kategoriler",
+      "groupId": "content"
+    },
+    {
+      "name": "titleColor",
+      "displayName": "Başlık Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "content"
+    },
+    {
+      "name": "backgroundColor",
+      "displayName": "Arkaplan Rengi",
+      "type": "COLOR",
+      "required": false,
+      "defaultValue": "#ffffff",
+      "groupId": "appearance"
+    },
+    {
+      "name": "desktopColumns",
+      "displayName": "Masaüstü Sütun Sayısı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "appearance",
+      "enumTypeId": "Tkt3wfuJ5F"
+    },
+    {
+      "name": "mobileColumns",
+      "displayName": "Mobil Sütun Sayısı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "appearance",
+      "enumTypeId": "Tkt3wfuJ5F"
+    },
+    {
+      "name": "components",
+      "displayName": "Kategoriler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-category-image-item"
+      ]
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Bölüm başlığı ve renk ayarları"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Arkaplan, sütun sayısı ve görsel ayarları"
+    }
+  ]
+}

package/data/section-templates/category-images-section/index.tsx

@@ -0,0 +1,62 @@
+// import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+const COLUMNS_MAP: Record<Props["desktopColumns"] & string, number> = {
+  One: 1,
+  Two: 2,
+  Three: 3,
+  Four: 4,
+  Five: 5,
+};
+
+export function CategoryImages(props: Props) {
+  const {
+    title,
+    titleColor,
+    backgroundColor,
+    desktopColumns,
+    mobileColumns,
+    components,
+  } = props;
+
+  const count = components?.length ?? 0;
+  if (count === 0) return null;
+
+  const desktopCols = desktopColumns ? COLUMNS_MAP[desktopColumns] : count;
+  const mobileCols = mobileColumns ? COLUMNS_MAP[mobileColumns] : 1;
+
+  return (
+    <section
+      className="kombos-category-images"
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <div className="kombos-category-images__container kombos-container">
+        {title && (
+          <h2
+            className="kombos-category-images__title text-xl-medium md:display-xs-medium"
+            style={titleColor ? { color: titleColor } : undefined}
+          >
+            {title}
+          </h2>
+        )}
+
+        <div
+          className="kombos-category-images__grid"
+          style={{
+            "--desktop-cols": String(desktopCols),
+            "--mobile-cols": String(mobileCols),
+          }}
+        >
+          <IkasComponentRenderer
+            id="category-images"
+            components={components}
+            parentProps={props}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CategoryImages;

package/data/section-templates/category-images-section/styles.css

@@ -0,0 +1,38 @@
+.kombos-category-images {
+  width: 100%;
+}
+
+/* Mobile-first: base = mobile (375px) */
+.kombos-category-images__container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.kombos-category-images__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-category-images__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--mobile-cols, 1), 1fr);
+  grid-auto-rows: 1fr;
+  gap: 1rem;
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .kombos-category-images__container {
+    gap: 2rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .kombos-category-images__grid {
+    grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
+    gap: 1.5rem;
+  }
+}

package/data/section-templates/category-images-section/types.ts

@@ -0,0 +1,10 @@
+import type { NumberOfColumns } from "../../global-types";
+
+export interface Props {
+  title?: string;
+  titleColor?: string;
+  backgroundColor?: string;
+  desktopColumns?: NumberOfColumns;
+  mobileColumns?: NumberOfColumns;
+  components?: any;
+}

package/data/section-templates/category-images-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/category-images-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/category-list-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Category / Product List Section",
+  "description": "Full product listing page with category sidebar, filters, sorting, pagination, and responsive grid. Uses ProductCard with IkasComponentRenderer for customizable card content. Supports infinite scroll and column preference."
+}

package/data/section-templates/category-list-section/children/CardProductName/ikas-config-snippet.json

@@ -0,0 +1,21 @@
+{
+  "id": "{{PROJECT_ID}}-card-product-name",
+  "name": "CardProductName",
+  "type": "component",
+  "entry": "./src/components/CardProductName/index.tsx",
+  "styles": "./src/components/CardProductName/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "singleLineName",
+      "displayName": "Tek Satır İsim",
+      "type": "BOOLEAN",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/category-list-section/children/CardProductName/index.tsx

@@ -0,0 +1,25 @@
+import { getProductHref } from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+import { Props } from "./types";
+
+export function CardProductName({ product, singleLineName }: Props) {
+  if (!product) return null;
+
+  const productHref = getProductHref(product);
+
+  return (
+    <span className="kombos-card-product-name">
+      <a
+        href={productHref}
+        className={cx(
+          "kombos-card-product-name__link text-sm-medium md:text-md-medium",
+          singleLineName && "kombos-card-product-name__link--single-line",
+        )}
+      >
+        {product.name}
+      </a>
+    </span>
+  );
+}
+
+export default CardProductName;