@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/account-info-section/children/AccountOrders/ikas-config-snippet.json

@@ -0,0 +1,85 @@
+{
+  "id": "{{PROJECT_ID}}-account-orders",
+  "name": "AccountOrders",
+  "type": "component",
+  "entry": "./src/components/AccountOrders/index.tsx",
+  "styles": "./src/components/AccountOrders/styles.css",
+  "props": [
+    {
+      "name": "ordersLabel",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Siparişlerim",
+      "groupId": "texts"
+    },
+    {
+      "name": "emptyText",
+      "displayName": "Boş Durum Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Henüz siparişiniz bulunmuyor.",
+      "groupId": "texts"
+    },
+    {
+      "name": "detailButtonText",
+      "displayName": "Detay Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Detaya Git",
+      "groupId": "cardTexts"
+    },
+    {
+      "name": "orderNoText",
+      "displayName": "Sipariş No Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sipariş No:",
+      "groupId": "cardTexts"
+    },
+    {
+      "name": "itemsText",
+      "displayName": "Ürün Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürün",
+      "groupId": "cardTexts"
+    },
+    {
+      "name": "shopButtonText",
+      "displayName": "Alışveriş Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Alışverişe Başla",
+      "groupId": "texts"
+    },
+    {
+      "name": "errorText",
+      "displayName": "Hata Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Siparişler yüklenirken bir hata oluştu.",
+      "groupId": "texts"
+    },
+    {
+      "name": "retryButtonText",
+      "displayName": "Tekrar Dene Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tekrar Dene",
+      "groupId": "texts"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "texts",
+      "name": "Genel Metinler",
+      "description": "Sayfa başlığı, yükleme ve boş durum mesajları"
+    },
+    {
+      "id": "cardTexts",
+      "name": "Sipariş Kartı Metinleri",
+      "description": "Her sipariş kartında görünen etiket ve buton metinleri"
+    }
+  ]
+}

package/data/section-templates/account-info-section/children/AccountOrders/index.tsx

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import {
+  customerStore,
+  getOrders,
+  IkasOrder,
+  Router,
+} from "@ikas/bp-storefront";
+import Button from "../../sub-components/Button";
+import PageLoader from "../../sub-components/PageLoader";
+import OrderCard from "./components/OrderCard";
+import { Props } from "./types";
+
+export function AccountOrders({
+  ordersLabel = "Siparişlerim",
+  emptyText = "Henüz siparişiniz bulunmuyor.",
+  detailButtonText = "Detaya Git",
+  orderNoText = "Sipariş No:",
+  itemsText = "Ürün",
+  shopButtonText = "Alışverişe Başla",
+  errorText = "Siparişler yüklenirken bir hata oluştu.",
+  retryButtonText = "Tekrar Dene",
+}: Props) {
+  const [orders, setOrders] = useState<IkasOrder[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const fetchOrders = useCallback(() => {
+    controllerRef.current?.abort();
+    const controller = new AbortController();
+    controllerRef.current = controller;
+    const { signal } = controller;
+
+    setLoading(true);
+    setError(false);
+
+    (async () => {
+      try {
+        const result = await getOrders(customerStore);
+        if (signal.aborted) return;
+        setOrders(result);
+      } catch {
+        if (signal.aborted) return;
+        setError(true);
+      } finally {
+        if (!signal.aborted) setLoading(false);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    fetchOrders();
+    return () => controllerRef.current?.abort();
+  }, [fetchOrders]);
+
+  const hasOrders = orders.length > 0;
+
+  return (
+    <div className="kombos-account-orders">
+      <h1 className="kombos-account-orders__title text-md-medium">
+        {`${ordersLabel}${hasOrders ? ` (${orders.length})` : ""}`}
+      </h1>
+
+      {loading ? (
+        <PageLoader />
+      ) : error ? (
+        <div className="kombos-account-orders__error">
+          <p className="kombos-account-orders__error-text text-sm-regular">
+            {errorText}
+          </p>
+          <Button variant="primary" size="s" onClick={fetchOrders}>
+            {retryButtonText}
+          </Button>
+        </div>
+      ) : !hasOrders ? (
+        <div className="kombos-account-orders__empty">
+          <p className="kombos-account-orders__empty-text text-sm-regular">
+            {emptyText}
+          </p>
+          <Button
+            variant="primary"
+            size="s"
+            onClick={() => Router.navigate("/")}
+          >
+            {shopButtonText}
+          </Button>
+        </div>
+      ) : (
+        <div className="kombos-account-orders__list">
+          {orders.map((order) => (
+            <OrderCard
+              key={order.id}
+              order={order}
+              detailButtonText={detailButtonText}
+              orderNoText={orderNoText}
+              itemsText={itemsText}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AccountOrders;

package/data/section-templates/account-info-section/children/AccountOrders/styles.css

@@ -0,0 +1,36 @@
+/* ── Account Orders ── */
+
+.kombos-account-orders {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-orders__title {
+  color: var(--kombos-gray-900);
+}
+
+/* ── Empty / Error State ── */
+
+.kombos-account-orders__empty,
+.kombos-account-orders__error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 3rem 0;
+}
+
+.kombos-account-orders__empty-text,
+.kombos-account-orders__error-text {
+  color: var(--kombos-gray-500);
+  text-align: center;
+}
+
+/* ── Order List ── */
+
+.kombos-account-orders__list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

package/data/section-templates/account-info-section/children/AccountOrders/types.ts

@@ -0,0 +1,10 @@
+export interface Props {
+  ordersLabel?: string;
+  emptyText?: string;
+  detailButtonText?: string;
+  orderNoText?: string;
+  itemsText?: string;
+  shopButtonText?: string;
+  errorText?: string;
+  retryButtonText?: string;
+}

package/data/section-templates/account-info-section/components/AccountSidebar/index.tsx

@@ -0,0 +1,171 @@
+import { useState, useRef, useEffect } from "preact/hooks";
+import type { FunctionComponent } from "preact";
+import { cx } from "../../../../utils/cx";
+import {
+  User1SVG,
+  Package1SVG,
+  MapPin1SVG,
+  Star1SVG,
+  SignOut1SVG,
+  CaretDownSVG,
+  CheckSVG,
+} from "../../../../sub-components/icons";
+
+export type NavItem =
+  | "account"
+  | "orders"
+  | "addresses"
+  | "favorites"
+  | "logout";
+
+interface NavItemConfig {
+  id: NavItem;
+  labelKey: keyof Labels;
+  icon: FunctionComponent<{ className?: string }>;
+}
+
+type Labels = Pick<
+  Props,
+  | "accountInfoLabel"
+  | "ordersLabel"
+  | "addressesLabel"
+  | "favoritesLabel"
+  | "logoutLabel"
+>;
+
+const NAV_ITEMS: NavItemConfig[] = [
+  { id: "account", labelKey: "accountInfoLabel", icon: User1SVG },
+  { id: "orders", labelKey: "ordersLabel", icon: Package1SVG },
+  { id: "addresses", labelKey: "addressesLabel", icon: MapPin1SVG },
+  { id: "favorites", labelKey: "favoritesLabel", icon: Star1SVG },
+  { id: "logout", labelKey: "logoutLabel", icon: SignOut1SVG },
+];
+
+interface Props {
+  activeItem: NavItem;
+  onNavigate: (item: NavItem) => void;
+  accountInfoLabel: string;
+  ordersLabel: string;
+  addressesLabel: string;
+  favoritesLabel: string;
+  logoutLabel: string;
+}
+
+export default function AccountSidebar({
+  activeItem,
+  onNavigate,
+  ...labels
+}: Props) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const activeConfig = NAV_ITEMS.find((item) => item.id === activeItem);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleItemClick = (id: NavItem) => {
+    setDropdownOpen(false);
+    onNavigate(id);
+  };
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <nav className="kombos-account-sidebar">
+        <ul className="kombos-account-sidebar__list">
+          {NAV_ITEMS.map(({ id, labelKey, icon: Icon }) => {
+            const cls = cx(
+              "kombos-account-sidebar__item text-sm-medium",
+              id === activeItem && "kombos-account-sidebar__item--active",
+              id === "logout" && "kombos-account-sidebar__item--logout",
+            );
+
+            return (
+              <li key={id}>
+                <button
+                  className={cls}
+                  onClick={() => handleItemClick(id)}
+                >
+                  <Icon className="kombos-account-sidebar__icon" />
+                  {labels[labelKey]}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+
+      {/* Mobile dropdown */}
+      <div className="kombos-account-dropdown" ref={dropdownRef}>
+        <div
+          className={cx(
+            "kombos-account-dropdown__box",
+            dropdownOpen && "kombos-account-dropdown__box--open",
+          )}
+        >
+          <button
+            className={cx(
+              "kombos-account-dropdown__trigger text-md-medium",
+              dropdownOpen && "kombos-account-dropdown__trigger--open",
+            )}
+            onClick={() => setDropdownOpen((prev) => !prev)}
+            aria-expanded={dropdownOpen}
+          >
+            <span className="kombos-account-dropdown__trigger-left">
+              {activeConfig && (
+                <activeConfig.icon className="kombos-account-icon" />
+              )}
+              <span>{activeConfig && labels[activeConfig.labelKey]}</span>
+            </span>
+            <CaretDownSVG
+              className={cx(
+                "kombos-account-icon kombos-account-dropdown__caret",
+                dropdownOpen && "kombos-account-dropdown__caret--open",
+              )}
+            />
+          </button>
+
+          {dropdownOpen && (
+            <ul className="kombos-account-dropdown__menu">
+              {NAV_ITEMS.map(({ id, labelKey, icon: Icon }) => {
+                const isActive = id === activeItem;
+
+                return (
+                  <li key={id}>
+                    <button
+                      className={cx(
+                        "kombos-account-dropdown__menu-item",
+                        isActive
+                          ? "kombos-account-dropdown__menu-item--active text-sm-semibold"
+                          : "text-sm-medium",
+                        id === "logout" && "kombos-account-dropdown__menu-item--logout",
+                      )}
+                      onClick={() => handleItemClick(id)}
+                    >
+                      <span className="kombos-account-dropdown__menu-item-left">
+                        <Icon className="kombos-account-icon" />
+                        {labels[labelKey]}
+                      </span>
+                      {isActive && <CheckSVG className="kombos-account-icon" />}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/data/section-templates/account-info-section/components/AccountSidebar/styles.css

@@ -0,0 +1,144 @@
+/* ===== AccountSidebar ===== */
+
+/* --- Shared icon --- */
+.kombos-account-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+/* --- Desktop sidebar --- */
+.kombos-account-sidebar {
+  display: none;
+  flex-shrink: 0;
+}
+
+.kombos-account-sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-600);
+  transition: color 0.15s;
+}
+
+.kombos-account-sidebar__item svg {
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
+.kombos-account-sidebar__item:hover {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-account-sidebar__item--active {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-sidebar__item.kombos-account-sidebar__item--logout,
+.kombos-account-sidebar__item.kombos-account-sidebar__item--logout:hover {
+  color: var(--kombos-error);
+}
+
+/* --- Mobile dropdown --- */
+.kombos-account-dropdown {
+  display: block;
+}
+
+.kombos-account-dropdown__box {
+  border: 1px solid var(--kombos-gray-100);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-account-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: none;
+  background: var(--kombos-white);
+  cursor: pointer;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-dropdown__trigger--open {
+  border-bottom: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-account-dropdown__trigger-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-account-dropdown__caret {
+  transition: transform 0.2s;
+}
+
+.kombos-account-dropdown__caret--open {
+  transform: rotate(180deg);
+}
+
+.kombos-account-dropdown__menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: var(--kombos-white);
+}
+
+.kombos-account-dropdown__menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-900);
+  transition: background-color 0.15s;
+}
+
+.kombos-account-dropdown__menu-item:hover {
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-account-dropdown__menu-item--active {
+  background: var(--kombos-gray-50);
+}
+
+.kombos-account-dropdown__menu-item--logout {
+  color: var(--kombos-error);
+}
+
+.kombos-account-dropdown__menu-item-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* --- Responsive --- */
+@media (min-width: 1024px) {
+  .kombos-account-sidebar {
+    display: block;
+    width: fit-content;
+  }
+
+  .kombos-account-dropdown {
+    display: none;
+  }
+}

package/data/section-templates/account-info-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/account-info-section/hooks/useScrollLock.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "preact/hooks";
+import { RefObject } from "preact";
+
+export function useScrollLock(
+  enabled: boolean = true,
+  skipCleanupRef?: RefObject<boolean>,
+) {
+  useEffect(() => {
+    if (!enabled) return;
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    return () => {
+      if (skipCleanupRef?.current) return;
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [enabled]);
+}

package/data/section-templates/account-info-section/ikas-config-snippet.json

@@ -0,0 +1,69 @@
+{
+  "id": "{{PROJECT_ID}}-account-info",
+  "name": "AccountInfo",
+  "type": "section",
+  "entry": "./src/components/AccountInfo/index.tsx",
+  "styles": "./src/components/AccountInfo/styles.css",
+  "props": [
+    {
+      "name": "accountInfoLabel",
+      "displayName": "Hesap Bilgileri",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesap Bilgilerim",
+      "groupId": "sidebar"
+    },
+    {
+      "name": "ordersLabel",
+      "displayName": "Siparişler",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Siparislerim",
+      "groupId": "sidebar"
+    },
+    {
+      "name": "addressesLabel",
+      "displayName": "Adresler",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Adreslerim",
+      "groupId": "sidebar"
+    },
+    {
+      "name": "favoritesLabel",
+      "displayName": "Favoriler",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Favorilerim",
+      "groupId": "sidebar"
+    },
+    {
+      "name": "logoutLabel",
+      "displayName": "Çıkış Yap",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Cikis Yap",
+      "groupId": "sidebar"
+    },
+    {
+      "name": "components",
+      "displayName": "Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-account-info-content",
+        "{{PROJECT_ID}}-account-orders",
+        "{{PROJECT_ID}}-account-addresses",
+        "{{PROJECT_ID}}-account-favorites",
+        "{{PROJECT_ID}}-account-order-detail"
+      ]
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "sidebar",
+      "name": "Kenar Menüsü",
+      "description": "Kenar menüsündeki sekme etiketleri"
+    }
+  ]
+}