@ikas/code-components-mcp 0.104.0 → 0.106.0

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

@@ -0,0 +1,17 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  addToCartButtonText?: string;
+  addingToCartText?: string;
+  outOfStockText?: string;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  hideQuantityInput?: boolean;
+  errorMessage?: string;
+  optionSetErrorMessage?: string;
+  updateCartButtonText?: string;
+  updatingCartText?: string;
+}

package/data/section-templates/add-to-cart/utils/bundle.ts

@@ -0,0 +1,70 @@
+import {
+  getSelectedProductVariant,
+  hasProductVariantStock,
+  setBundleProductQuantity,
+  IkasBundleProduct,
+  IkasBundleSettings,
+} from "@ikas/bp-storefront";
+
+export function adjustBundleProductQuantity(bp: IkasBundleProduct): void {
+  if (!bp.product) return;
+
+  const variant = getSelectedProductVariant(bp.product);
+
+  const stock = variant.stock ?? 0;
+  const inStock = hasProductVariantStock(variant);
+
+  if (bp.minQuantity === 0 && !inStock) {
+    setBundleProductQuantity(bp, 0);
+    return;
+  }
+
+  if (stock < 10 && bp.quantity > stock && !variant.sellIfOutOfStock) {
+    setBundleProductQuantity(bp, Math.max(stock, bp.minQuantity ?? 0));
+  }
+}
+
+export function isBundleOutOfStock(
+  bundleSettings: IkasBundleSettings,
+): boolean {
+  const { products, minBundleQuantity, maxBundleQuantity } = bundleSettings;
+
+  // Skip check while bundle product data is still loading
+  const loaded = products.some((bp) => !!bp.product);
+  if (!loaded) return false;
+
+  // A required bundle product (minQuantity !== 0) is out of stock
+  const hasRequiredOutOfStock = products.some((bp) => {
+    if (!bp.product) return false;
+
+    const variant = getSelectedProductVariant(bp.product);
+    const bpHasStock = variant ? hasProductVariantStock(variant) : false;
+
+    return !bpHasStock && bp.minQuantity !== 0;
+  });
+  if (hasRequiredOutOfStock) return true;
+
+  // All bundle products have zero quantity
+  const allZeroQuantity = products.every((p) => p.quantity === 0);
+  if (allZeroQuantity) return true;
+
+  // Total quantity violates bundle-level min/max constraints
+  const totalQuantity = products.reduce((sum, p) => sum + p.quantity, 0);
+  if (minBundleQuantity != null && totalQuantity < minBundleQuantity)
+    return true;
+  if (maxBundleQuantity != null && totalQuantity > maxBundleQuantity)
+    return true;
+
+  // Individual bundle product min/max quantity violations
+  const hasMinQuantityError = products.some(
+    (bp) => bp.minQuantity != null && bp.quantity < bp.minQuantity,
+  );
+  if (hasMinQuantityError) return true;
+
+  const hasMaxQuantityError = products.some(
+    (bp) => bp.maxQuantity != null && bp.quantity > bp.maxQuantity!,
+  );
+  if (hasMaxQuantityError) return true;
+
+  return false;
+}

package/data/section-templates/add-to-cart/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/add-to-cart/utils/optionSet.ts

@@ -0,0 +1,17 @@
+import {
+  IkasProductOptionSet,
+  hasValidProductOptionSetValues,
+} from "@ikas/bp-storefront";
+import { showToast } from "./toast";
+
+export function validateOptionSet(
+  optionSet: IkasProductOptionSet | undefined | null,
+  errorMessage: string
+): boolean {
+  if (optionSet && !hasValidProductOptionSetValues(optionSet)) {
+    window.dispatchEvent(new CustomEvent("ikas:show-option-errors"));
+    showToast(errorMessage, "error");
+    return false;
+  }
+  return true;
+}

package/data/section-templates/add-to-cart/utils/toast.ts

@@ -0,0 +1,5 @@
+export function showToast(message: string, variant: "success" | "error") {
+  window.dispatchEvent(
+    new CustomEvent("ikas:show-toast", { detail: { message, variant } })
+  );
+}

package/data/section-templates/blog-home-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Blog Home Section",
+  "description": "Blog listing page with post cards, category filtering, pagination, and responsive grid layout. Supports blog category navigation."
+}

package/data/section-templates/blog-home-section/components/BlogCard/index.tsx

@@ -0,0 +1,89 @@
+import {
+  IkasBlog,
+  getIkasBlogHref,
+  getIkasBlogFormattedDate,
+  getIkasBlogCategoryHref,
+  getDefaultSrc,
+} from "@ikas/bp-storefront";
+import { resolveAspectRatio, resolveObjectFit } from "../../../../utils/media";
+import { getFullName } from "../../../../utils/fullName";
+import { CaretRightSVG } from "../../../../sub-components/icons";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+
+interface Props {
+  blog: IkasBlog;
+  readMoreText: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+export default function BlogCard({
+  blog,
+  readMoreText,
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const href = getIkasBlogHref(blog);
+  const imageSrc = blog.image ? getDefaultSrc(blog.image) : "";
+  const writerName = blog.writer
+    ? getFullName(blog.writer.firstName, blog.writer.lastName)
+    : "";
+
+  return (
+    <div className="kombos-blog-card">
+      <a href={href} className="kombos-blog-card__image-link">
+        <div
+          className="kombos-blog-card__image-wrap"
+          style={{ aspectRatio: resolveAspectRatio(aspectRatio) }}
+        >
+          {imageSrc && (
+            <img
+              src={imageSrc}
+              alt={blog.title}
+              className="kombos-blog-card__image"
+              loading="lazy"
+              style={{ objectFit: resolveObjectFit(objectFit) }}
+            />
+          )}
+        </div>
+      </a>
+      <div className="kombos-blog-card__content">
+        {blog.category?.name && (
+          <a
+            href={getIkasBlogCategoryHref(blog.category)}
+            className="kombos-blog-card__category text-xs-semibold"
+          >
+            {blog.category.name}
+          </a>
+        )}
+        <h2 className="kombos-blog-card__title text-md-semibold md:text-lg-semibold">
+          {blog.title}
+        </h2>
+        {blog.shortDescription && (
+          <p className="kombos-blog-card__desc text-sm-regular">
+            {blog.shortDescription}
+          </p>
+        )}
+        <div className="kombos-blog-card__footer">
+          <div className="kombos-blog-card__meta text-xs-regular">
+            <time>{getIkasBlogFormattedDate(blog)}</time>
+            {writerName && (
+              <>
+                <span className="kombos-blog-card__dot">&middot;</span>
+                <span>{writerName}</span>
+              </>
+            )}
+          </div>
+          <a
+            href={href}
+            className="kombos-blog-card__read-more text-sm-semibold"
+            aria-label={`${readMoreText} - ${blog.title}`}
+          >
+            {readMoreText}
+            <CaretRightSVG />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/data/section-templates/blog-home-section/components/BlogCard/styles.css

@@ -0,0 +1,121 @@
+/* ===== BlogCard ===== */
+.kombos-blog-card {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--kombos-gray-200);
+}
+
+/* Image link */
+.kombos-blog-card__image-link {
+  display: block;
+  text-decoration: none;
+}
+
+/* Image wrapper */
+.kombos-blog-card__image-wrap {
+  position: relative;
+  overflow: hidden;
+  background: var(--kombos-gray-100);
+}
+
+.kombos-blog-card__image {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content area */
+.kombos-blog-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  flex: 1;
+}
+
+/* Category badge link */
+.kombos-blog-card__category {
+  display: inline-block;
+  align-self: flex-start;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 100px;
+  padding: 0.25rem 0.75rem;
+  text-decoration: none;
+  color: var(--kombos-gray-700);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  transition: background-color 0.15s ease, color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.kombos-blog-card__category:hover {
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-color: var(--kombos-gray-900);
+}
+
+/* Title — 2 line clamp */
+.kombos-blog-card__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Description — 3 line clamp */
+.kombos-blog-card__desc {
+  margin: 0;
+  color: var(--kombos-gray-500);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Footer */
+.kombos-blog-card__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: auto;
+  padding-top: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .kombos-blog-card__footer {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+/* Meta (date + author) */
+.kombos-blog-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-blog-card__dot {
+  color: var(--kombos-gray-400);
+}
+
+/* Read more link */
+.kombos-blog-card__read-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--kombos-gray-700);
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.kombos-blog-card__read-more:hover {
+  text-decoration: underline;
+}

package/data/section-templates/blog-home-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/blog-home-section/ikas-config-snippet.json

@@ -0,0 +1,95 @@
+{
+  "id": "{{PROJECT_ID}}-blog-home",
+  "name": "BlogHome",
+  "type": "section",
+  "entry": "./src/components/BlogHome/index.tsx",
+  "styles": "./src/components/BlogHome/styles.css",
+  "props": [
+    {
+      "name": "blogList",
+      "displayName": "Blog Yazıları",
+      "type": "BLOG_LIST",
+      "required": true,
+      "groupId": "content"
+    },
+    {
+      "name": "blogCategoryList",
+      "displayName": "Blog Kategorileri",
+      "type": "BLOG_CATEGORY_LIST",
+      "required": false,
+      "groupId": "content"
+    },
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Blog",
+      "groupId": "content"
+    },
+    {
+      "name": "allCategoriesText",
+      "displayName": "Tümü Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tumunu Gor",
+      "groupId": "texts"
+    },
+    {
+      "name": "readMoreText",
+      "displayName": "Devamını Oku Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Devamini Oku",
+      "groupId": "texts"
+    },
+    {
+      "name": "emptyMessage",
+      "displayName": "Boş Durum Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Henuz blog yazisi bulunmuyor.",
+      "groupId": "texts"
+    },
+    {
+      "name": "aspectRatio",
+      "displayName": "En Boy Orani",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "image-settings",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "objectFit",
+      "displayName": "Gorsel Sigdirma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "image-settings",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "description",
+      "displayName": "Açıklama",
+      "type": "TEXT",
+      "required": false,
+      "groupId": "content"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Blog yazıları, kategoriler ve sayfa başlığı"
+    },
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Buton, etiket ve boş durum metinleri"
+    },
+    {
+      "id": "image-settings",
+      "name": "Görsel Ayarları",
+      "description": "Blog kart görselleri için en boy oranı ve sığdırma"
+    }
+  ]
+}

package/data/section-templates/blog-home-section/index.tsx

@@ -0,0 +1,124 @@
+import {
+  IkasBlogList,
+  IkasBlog,
+  getBlogListPage,
+  getBlogListPageCount,
+  hasBlogListPrevPage,
+  hasBlogListNextPage,
+  getIkasBlogCategoryHref,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../utils/cx";
+import Pagination from "../../sub-components/Pagination";
+import BlogCard from "./components/BlogCard";
+import { Props } from "./types";
+
+export function BlogHome({
+  blogList,
+  blogCategoryList,
+  title = "Blog",
+  description,
+  allCategoriesText = "Tümünü Gör",
+  readMoreText = "Devamını Oku",
+  emptyMessage = "Henüz blog yazısı bulunmuyor.",
+  aspectRatio,
+  objectFit,
+}: Props) {
+  if (!blogList) return null;
+
+  const activeCategoryId = blogList.filterCategoryId;
+  const categories = blogCategoryList?.data ?? [];
+  const blogs = blogList.data ?? [];
+
+  return (
+    <section className="kombos-blog-home">
+      <div className="kombos-container">
+        <div className="kombos-blog-home__header">
+          <h1 className="kombos-blog-home__title text-xl-semibold md:display-xs-semibold">
+            {title}
+          </h1>
+          {description && (
+            <p className="kombos-blog-home__description text-md-regular">
+              {description}
+            </p>
+          )}
+        </div>
+
+        {categories.length > 0 && (
+          <div className="kombos-blog-home__categories">
+            <a
+              href="/blog"
+              className={cx(
+                "kombos-blog-home__cat-btn",
+                "text-sm-medium",
+                !activeCategoryId && "kombos-blog-home__cat-btn--active",
+              )}
+            >
+              {allCategoriesText}
+            </a>
+            {categories.map((cat) => (
+              <a
+                key={cat.id}
+                href={getIkasBlogCategoryHref(cat)}
+                className={cx(
+                  "kombos-blog-home__cat-btn",
+                  "text-sm-medium",
+                  activeCategoryId === cat.id &&
+                    "kombos-blog-home__cat-btn--active",
+                )}
+              >
+                {cat.name}
+              </a>
+            ))}
+          </div>
+        )}
+
+        {blogs.length === 0 ? (
+          <p className="kombos-blog-home__empty text-md-semibold">
+            {emptyMessage}
+          </p>
+        ) : (
+          <div className="kombos-blog-home__grid">
+            {blogs.map((blog: IkasBlog) => (
+              <BlogCard
+                key={blog.id}
+                blog={blog}
+                readMoreText={readMoreText}
+                aspectRatio={aspectRatio}
+                objectFit={objectFit}
+              />
+            ))}
+          </div>
+        )}
+
+        <BlogPagination blogList={blogList} />
+      </div>
+    </section>
+  );
+}
+
+const BlogPagination = observer(function BlogPagination({
+  blogList,
+}: {
+  blogList: IkasBlogList;
+}) {
+  const currentPage = blogList.page ?? 1;
+  const totalPages = getBlogListPageCount(blogList);
+
+  const goToPage = (page: number) => {
+    getBlogListPage(blogList, page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      hasPrev={hasBlogListPrevPage(blogList)}
+      hasNext={hasBlogListNextPage(blogList)}
+      onPageChange={goToPage}
+    />
+  );
+});
+
+export default BlogHome;

package/data/section-templates/blog-home-section/styles.css

@@ -0,0 +1,118 @@
+/* ===== BlogHome Section ===== */
+.kombos-blog-home {
+  width: 100%;
+  padding: 2rem 0;
+}
+
+.kombos-blog-home .kombos-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Header (title + description) */
+.kombos-blog-home__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.kombos-blog-home__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-blog-home__description {
+  margin: 0;
+  color: var(--kombos-gray-500);
+}
+
+/* Category navigation */
+.kombos-blog-home__categories {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 0.25rem;
+}
+
+.kombos-blog-home__categories::-webkit-scrollbar {
+  display: none;
+}
+
+.kombos-blog-home__cat-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 100px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, color 0.15s ease,
+    border-color 0.15s ease;
+  background: transparent;
+  color: var(--kombos-gray-700);
+  text-decoration: none;
+}
+
+.kombos-blog-home__cat-btn:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-blog-home__cat-btn--active {
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-blog-home__cat-btn--active:hover {
+  background: var(--kombos-gray-800);
+  border-color: var(--kombos-gray-800);
+}
+
+/* Empty state */
+.kombos-blog-home__empty {
+  text-align: center;
+  color: var(--kombos-gray-900);
+  padding: 3rem 0;
+  margin: 0;
+}
+
+/* Blog grid */
+.kombos-blog-home__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
+
+/* Pagination spacing */
+.kombos-blog-home .kombos-pagination {
+  padding-top: 1rem;
+}
+
+@media (min-width: 768px) {
+  .kombos-blog-home {
+    padding: 2.5rem 0;
+  }
+
+  .kombos-blog-home__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-blog-home {
+    padding: 3rem 0;
+  }
+
+  .kombos-blog-home .kombos-container {
+    gap: 2.5rem;
+  }
+
+  .kombos-blog-home__grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}