@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/header-section/children/Navbar/ikas-config-snippet.json

@@ -0,0 +1,315 @@
+{
+  "id": "{{PROJECT_ID}}-navbar",
+  "name": "Navbar",
+  "type": "component",
+  "entry": "./src/components/Navbar/index.tsx",
+  "styles": "./src/components/Navbar/styles.css",
+  "props": [
+    {
+      "name": "logo",
+      "displayName": "Logo",
+      "type": "IMAGE",
+      "required": false,
+      "groupId": "logo-settings"
+    },
+    {
+      "name": "logoSizeDesktop",
+      "displayName": "Logo Boyutu Masaüstü",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "logo-settings",
+      "typeId": "@ikas/bp-storefront-models-HeightStyleType"
+    },
+    {
+      "name": "logoSizeMobile",
+      "displayName": "Logo Boyutu Mobil",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "logo-settings",
+      "typeId": "@ikas/bp-storefront-models-HeightStyleType"
+    },
+    {
+      "name": "navigationLinks",
+      "displayName": "Navigasyon Bağlantıları",
+      "type": "LIST_OF_LINK",
+      "required": false,
+      "groupId": "navigation"
+    },
+    {
+      "name": "navigationLinkColor",
+      "displayName": "Bağlantı Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "navigation"
+    },
+    {
+      "name": "coloredLinks",
+      "displayName": "Bağlantılar",
+      "type": "LIST_OF_LINK",
+      "required": false,
+      "groupId": "colored-links"
+    },
+    {
+      "name": "coloredLinkColor",
+      "displayName": "Bağlantı Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "colored-links"
+    },
+    {
+      "name": "cartTitle",
+      "displayName": "Sepet Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Alışveriş Sepetim",
+      "groupId": "cart-sidebar"
+    },
+    {
+      "name": "emptyCartText",
+      "displayName": "Boş Sepet Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepetinizde Ürün Bulunmamaktadır",
+      "groupId": "cart-sidebar"
+    },
+    {
+      "name": "checkoutButtonText",
+      "displayName": "Ödeme Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ödemeye Geç",
+      "groupId": "cart-sidebar"
+    },
+    {
+      "name": "totalText",
+      "displayName": "Toplam Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Toplam",
+      "groupId": "cart-sidebar"
+    },
+    {
+      "name": "freeShippingText",
+      "displayName": "Ücretsiz Kargo Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "150 TL ve üzeri siparişlerde kargo bedava",
+      "groupId": "cart-sidebar"
+    },
+    {
+      "name": "emptyCartButtonText",
+      "displayName": "Boş Sepet Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Alışverişe Başla",
+      "groupId": "cart-sidebar"
+    },
+    {
+      "name": "registerButtonText",
+      "displayName": "Üye Ol Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Üye Ol",
+      "groupId": "mobile-menu"
+    },
+    {
+      "name": "loginButtonText",
+      "displayName": "Giriş Yap Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş Yap",
+      "groupId": "mobile-menu"
+    },
+    {
+      "name": "logoutButtonText",
+      "displayName": "Çıkış Yap Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Çıkış Yap",
+      "groupId": "mobile-menu"
+    },
+    {
+      "name": "searchProductList",
+      "displayName": "Arama Ürün Listesi",
+      "type": "PRODUCT_LIST",
+      "required": false,
+      "groupId": "search"
+    },
+    {
+      "name": "hideAddToCartButton",
+      "displayName": "Sepete Ekle Butonunu Gizle",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "search-card-settings"
+    },
+    {
+      "name": "searchPlaceholder",
+      "displayName": "Arama Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ne Aramıştınız?",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "searchingText",
+      "displayName": "Aranıyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Aranıyor...",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "noResultsText",
+      "displayName": "Sonuç Bulunamadı Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Aradığınız ürün bulunamadı",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "resultCountText",
+      "displayName": "Sonuç Sayısı Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sonuç",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "addToCartText",
+      "displayName": "Sepete Ekle Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Ekle",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "addedToCartText",
+      "displayName": "Sepete Eklendi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Eklendi",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Tükendi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tükendi",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "goToProductText",
+      "displayName": "Ürüne Git Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürüne Git",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "viewAllText",
+      "displayName": "Tümünü Gör Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tümünü Gör",
+      "groupId": "search-texts"
+    },
+    {
+      "name": "components",
+      "displayName": "Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "privateVarMap": {
+        "product": {
+          "id": "pvm_1772803767210_2",
+          "typeId": "@ikas/bp-storefront-models-IkasProduct"
+        }
+      },
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-card-product-price",
+        "{{PROJECT_ID}}-card-product-variants",
+        "{{PROJECT_ID}}-card-product-name"
+      ]
+    },
+    {
+      "name": "imageAspectRatio",
+      "displayName": "Görsel Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "search-image",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "imageObjectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "search-image",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "viewCartButtonText",
+      "displayName": "Sepeti Görüntüle Buton Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepeti Görüntüle",
+      "groupId": "texts"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "logo-settings",
+      "name": "Logo",
+      "description": "Görsel ve boyut ayarları"
+    },
+    {
+      "id": "navigation",
+      "name": "Navigasyon",
+      "description": "Bağlantılar ve renkler"
+    },
+    {
+      "id": "colored-links",
+      "name": "Renkli Bağlantılar",
+      "description": "Öne çıkan bağlantılar"
+    },
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Sepet ve mobil menü metinleri",
+      "children": [
+        {
+          "id": "cart-sidebar",
+          "name": "Sepet",
+          "description": "Sepet kenar çubuğu metinleri"
+        },
+        {
+          "id": "mobile-menu",
+          "name": "Mobil Menü",
+          "description": "Giriş, kayıt ve çıkış butonları"
+        }
+      ]
+    },
+    {
+      "id": "search",
+      "name": "Arama",
+      "description": "Arama modalı ayarları",
+      "children": [
+        {
+          "id": "search-card-settings",
+          "name": "Ürün Kartı Ayarları",
+          "description": "Arama sonuçlarındaki ürün kartı görünüm ayarları"
+        },
+        {
+          "id": "search-texts",
+          "name": "Metinler",
+          "description": "Arama modalı metin ayarları"
+        }
+      ]
+    },
+    {
+      "id": "search-image",
+      "name": "Ürün Görsel Ayarları",
+      "description": "Ürün görsellerinin oran ve sığdırma ayarları"
+    }
+  ]
+}

package/data/section-templates/header-section/children/Navbar/index.tsx

@@ -0,0 +1,250 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  cartStore,
+  customerStore,
+  hasCustomer,
+  getIkasOrderTotalItemCount,
+  getDefaultSrc,
+  getFormattedHeightSize,
+  Router,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import CartSidebar from "./components/CartSidebar";
+import MobileMenu from "./components/MobileMenu";
+import SearchModal from "./components/SearchModal";
+import NavItem from "./components/NavItem";
+import {
+  List1SVG,
+  MagnifyingGlass1SVG,
+  User1SVG,
+  ShoppingBag1SVG,
+} from "../../sub-components/icons";
+export function Navbar(props: Props) {
+  const {
+    logo,
+    navigationLinks,
+    logoSizeDesktop: rawLogoSizeDesktop,
+    logoSizeMobile: rawLogoSizeMobile,
+    cartTitle = "Alışveriş Sepetim",
+    emptyCartText = "Sepetinizde Ürün Bulunmamaktadır",
+    checkoutButtonText = "Ödemeye Geç",
+    totalText = "Toplam",
+    navigationLinkColor,
+    coloredLinks,
+    coloredLinkColor,
+    registerButtonText = "Üye Ol",
+    loginButtonText = "Giriş Yap",
+    logoutButtonText = "Çıkış Yap",
+    freeShippingText = "150 TL ve üzeri siparişlerde kargo bedava",
+    emptyCartButtonText = "Alışverişe Başla",
+    searchPlaceholder = "Ne Aramıştınız?",
+    searchingText = "Aranıyor...",
+    noResultsText = "Aradığınız ürün bulunamadı",
+    resultCountText = "Sonuç",
+    addToCartText = "Sepete Ekle",
+    addedToCartText = "Sepete Eklendi",
+    outOfStockText = "Tükendi",
+    goToProductText = "Ürüne Git",
+    viewAllText = "Tümünü Gör",
+    viewCartButtonText = "Sepeti Görüntüle",
+    searchProductList,
+    hideAddToCartButton,
+    imageAspectRatio,
+    imageObjectFit,
+    components,
+  } = props;
+
+  const logoSizeDesktop = getFormattedHeightSize(rawLogoSizeDesktop) || "60px";
+  const logoSizeMobile = getFormattedHeightSize(rawLogoSizeMobile) || "48px";
+
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [cartOpen, setCartOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  useEffect(() => {
+    const openCart = () => setCartOpen(true);
+    window.addEventListener("ikas:open-cart-sidebar", openCart);
+    return () => window.removeEventListener("ikas:open-cart-sidebar", openCart);
+  }, []);
+
+  const cart = cartStore.cart;
+  const itemCount = cart ? getIkasOrderTotalItemCount(cart) : 0;
+  const isLoggedIn = hasCustomer(customerStore);
+
+  const links = navigationLinks?.links ?? [];
+  const coloredLinksList = coloredLinks?.links ?? [];
+
+  return (
+    <div
+      className="kombos-navbar"
+      style={{
+        "--logo-h-desktop": logoSizeDesktop,
+        "--logo-h-mobile": logoSizeMobile,
+      }}
+    >
+      <div className="kombos-navbar__inner kombos-container">
+        {/* Hamburger - mobile only */}
+        <button
+          className="kombos-navbar__hamburger"
+          onClick={() => setMobileMenuOpen(true)}
+          aria-label="Menu"
+        >
+          <List1SVG />
+        </button>
+
+        {/* Logo */}
+        {logo && (
+          <a
+            className="kombos-navbar__logo"
+            href="/"
+            onClick={(e) => {
+              e.preventDefault();
+              Router.navigate("/");
+            }}
+            style={{
+              "--logo-h-desktop": logoSizeDesktop,
+              "--logo-h-mobile": logoSizeMobile,
+            }}
+          >
+            <img
+              src={getDefaultSrc(logo)}
+              srcSet={createMediaSrcset(logo)}
+              sizes="200px"
+              alt={logo?.altText || "Logo"}
+              className="kombos-navbar__logo-img"
+              width={200}
+              height={60}
+              fetchpriority="high"
+              loading="eager"
+            />
+          </a>
+        )}
+
+        {/* Desktop Navigation */}
+        <nav
+          className={`kombos-navbar__nav${!logo ? " kombos-navbar__nav--no-logo" : ""}`}
+        >
+          {links.map((link, i) => (
+            <NavItem key={i} link={link} linkColor={navigationLinkColor} />
+          ))}
+          {coloredLinksList.map((link, i) => (
+            <NavItem key={`cl-${i}`} link={link} linkColor={coloredLinkColor} />
+          ))}
+        </nav>
+
+        {/* Action Icons */}
+        <div className="kombos-navbar__actions">
+          {/* Search */}
+          <a
+            className="kombos-navbar__icon-btn"
+            href="/search"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (searchProductList) {
+                setSearchOpen(true);
+              } else {
+                Router.navigateToPage("SEARCH");
+              }
+            }}
+            aria-label="Search"
+          >
+            <MagnifyingGlass1SVG />
+          </a>
+
+          {/* Account */}
+          <a
+            className="kombos-navbar__icon-btn"
+            href={isLoggedIn ? "/account" : "/login"}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              Router.navigateToPage(isLoggedIn ? "ACCOUNT" : "LOGIN");
+            }}
+            aria-label="Account"
+          >
+            <User1SVG />
+          </a>
+
+          {/* Cart */}
+          <a
+            className="kombos-navbar__icon-btn kombos-navbar__cart-trigger"
+            href="/cart"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setCartOpen(true);
+            }}
+            aria-label="Cart"
+          >
+            <ShoppingBag1SVG />
+            {itemCount > 0 && (
+              <span className="kombos-navbar__badge">{itemCount}</span>
+            )}
+          </a>
+        </div>
+      </div>
+
+      {/* Cart Sidebar */}
+      {cartOpen && (
+        <CartSidebar
+          cartTitle={cartTitle}
+          emptyCartText={emptyCartText}
+          checkoutButtonText={checkoutButtonText}
+          viewCartButtonText={viewCartButtonText}
+          totalText={totalText}
+          freeShippingText={freeShippingText}
+          emptyCartButtonText={emptyCartButtonText}
+          imageAspectRatio={imageAspectRatio}
+          imageObjectFit={imageObjectFit}
+          onClose={() => setCartOpen(false)}
+        />
+      )}
+
+      {/* Search Modal */}
+      {searchOpen && searchProductList && (
+        <SearchModal
+          productList={searchProductList}
+          logo={logo ?? undefined}
+          logoSizeDesktop={logoSizeDesktop}
+          logoSizeMobile={logoSizeMobile}
+          searchPlaceholder={searchPlaceholder}
+          searchingText={searchingText}
+          noResultsText={noResultsText}
+          resultCountText={resultCountText}
+          addToCartText={addToCartText}
+          addedToCartText={addedToCartText}
+          outOfStockText={outOfStockText}
+          goToProductText={goToProductText}
+          viewAllText={viewAllText}
+          hideAddToCartButton={hideAddToCartButton}
+          aspectRatio={imageAspectRatio}
+          objectFit={imageObjectFit}
+          onClose={() => setSearchOpen(false)}
+          components={components}
+          parentProps={props}
+        />
+      )}
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <MobileMenu
+          linkGroups={[
+            { links, color: navigationLinkColor },
+            ...(coloredLinksList.length > 0
+              ? [{ links: coloredLinksList, color: coloredLinkColor }]
+              : []),
+          ]}
+          registerButtonText={registerButtonText}
+          loginButtonText={loginButtonText}
+          logoutButtonText={logoutButtonText}
+          onClose={() => setMobileMenuOpen(false)}
+          onCartOpen={() => setCartOpen(true)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default Navbar;