@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/forgot-password-section/types.ts

@@ -0,0 +1,12 @@
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  backToLoginText?: string;
+  successTitle?: string;
+  successMessage?: string;
+  successButtonText?: string;
+}

package/data/section-templates/forgot-password-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/header-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Header Section",
+  "description": "Complete header with announcement bar, responsive navigation (mega-menu), logo, customer icon with auth state, mini-cart sidebar with item management, search modal, cookie consent bar, and toast notifications. Uses IkasComponentRenderer for child component slots."
+}

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

@@ -0,0 +1,62 @@
+{
+  "id": "{{PROJECT_ID}}-announcements",
+  "name": "Announcements",
+  "type": "component",
+  "entry": "./src/components/Announcements/index.tsx",
+  "styles": "./src/components/Announcements/styles.css",
+  "props": [
+    {
+      "name": "bgColor",
+      "displayName": "Arka Plan Rengi",
+      "type": "COLOR",
+      "required": false,
+      "defaultValue": "#14141a",
+      "groupId": "appearance"
+    },
+    {
+      "name": "textColor",
+      "displayName": "Yazı Rengi",
+      "type": "COLOR",
+      "required": false,
+      "defaultValue": "#ffffff",
+      "groupId": "appearance"
+    },
+    {
+      "name": "items",
+      "displayName": "Duyurular",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-announcement"
+      ]
+    },
+    {
+      "name": "autoPlay",
+      "displayName": "Otomatik Oynatma",
+      "type": "BOOLEAN",
+      "required": false,
+      "defaultValue": true,
+      "groupId": "slider"
+    },
+    {
+      "name": "autoPlayInterval",
+      "displayName": "Oynatma Aralığı (ms)",
+      "type": "NUMBER",
+      "required": false,
+      "defaultValue": 5000,
+      "groupId": "slider"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Arka plan ve metin rengi ayarları"
+    },
+    {
+      "id": "slider",
+      "name": "Slider Ayarları",
+      "description": "Otomatik oynatma ve zamanlama ayarları"
+    }
+  ]
+}

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

@@ -0,0 +1,91 @@
+import { useEffect, useCallback, useRef, useState } from "preact/hooks";
+import { Props } from "./types";
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+
+const SWIPE_THRESHOLD = 50;
+
+export function Announcements(props: Props) {
+  const {
+    bgColor,
+    textColor,
+    items,
+    autoPlay = false,
+    autoPlayInterval = 5000,
+  } = props;
+  const [current, setCurrent] = useState(0);
+  const dragStartX = useRef(0);
+  const isDragging = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const count = items?.length ?? 0;
+
+  const resetAutoPlay = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    if (!autoPlay || count <= 1) return;
+    const interval = autoPlayInterval > 0 ? autoPlayInterval : 7000;
+    timerRef.current = setInterval(() => {
+      setCurrent((prev) => (prev + 1) % count);
+    }, interval);
+  }, [autoPlay, autoPlayInterval, count]);
+
+  useEffect(() => {
+    resetAutoPlay();
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [resetAutoPlay]);
+
+  const handlePointerDown = useCallback((e: PointerEvent) => {
+    isDragging.current = true;
+    dragStartX.current = e.clientX;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }, []);
+
+  const handlePointerUp = useCallback(
+    (e: PointerEvent) => {
+      if (!isDragging.current) return;
+      isDragging.current = false;
+      const diff = dragStartX.current - e.clientX;
+      if (count <= 1) return;
+
+      if (diff > SWIPE_THRESHOLD) {
+        setCurrent((prev) => (prev + 1) % count);
+        resetAutoPlay();
+      } else if (diff < -SWIPE_THRESHOLD) {
+        setCurrent((prev) => (prev - 1 + count) % count);
+        resetAutoPlay();
+      }
+    },
+    [count, resetAutoPlay],
+  );
+
+  return (
+    <div
+      className="kombos-announcements"
+      style={{
+        backgroundColor: bgColor ?? "var(--kombos-gray-900)",
+        color: textColor ?? "var(--kombos-white)",
+      }}
+    >
+      <div
+        className="kombos-announcements__slider"
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+      >
+        <div
+          className="kombos-announcements__track"
+          style={{ transform: `translateX(-${current * 100}%)` }}
+        >
+          <IkasComponentRenderer
+            id="announcements"
+            components={items}
+            parentProps={props}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Announcements;

package/data/section-templates/header-section/children/Announcements/styles.css

@@ -0,0 +1,45 @@
+.kombos-announcements {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  overflow: hidden;
+}
+
+.kombos-announcements__slider {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+  touch-action: pan-y;
+}
+
+.kombos-announcements__slider:active {
+  cursor: grabbing;
+}
+
+.kombos-announcements__track {
+  display: flex;
+  transition: transform 0.4s ease-in-out;
+}
+
+.kombos-announcements__track > * > * > * {
+  flex: 0 0 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .kombos-announcements {
+    padding: 0.75rem 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-announcements {
+    padding: 0.75rem 4.5rem;
+  }
+}

package/data/section-templates/header-section/children/Announcements/types.ts

@@ -0,0 +1,7 @@
+export interface Props {
+  bgColor?: string;
+  textColor?: string;
+  items?: any;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+}

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

@@ -0,0 +1,79 @@
+{
+  "id": "{{PROJECT_ID}}-cookie-bar",
+  "name": "CookieBar",
+  "type": "component",
+  "entry": "./src/components/CookieBar/index.tsx",
+  "styles": "./src/components/CookieBar/styles.css",
+  "props": [
+    {
+      "name": "cookieContent",
+      "displayName": "Çerez İçeriği",
+      "type": "RICH_TEXT",
+      "required": true,
+      "defaultValue": "<p>Bu siteyi kullanırken çerezler kullanıyoruz. Daha fazla bilgi için <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"editor-link\" tabindex=\"-1\" href=\"https://www.ikas.com\">gizlilik politikamızı</a> okuyabilirsiniz.</p>",
+      "groupId": "content"
+    },
+    {
+      "name": "buttonText",
+      "displayName": "Buton Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kabul Et",
+      "groupId": "content"
+    },
+    {
+      "name": "position",
+      "displayName": "Solda Konumla",
+      "type": "BOOLEAN",
+      "required": false,
+      "defaultValue": false,
+      "groupId": "layout"
+    },
+    {
+      "name": "showCloseIcon",
+      "displayName": "Kapatma İkonunu Gizle",
+      "type": "BOOLEAN",
+      "required": false,
+      "defaultValue": false,
+      "groupId": "layout"
+    },
+    {
+      "name": "backgroundColor",
+      "displayName": "Arkaplan Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "appearance"
+    },
+    {
+      "name": "textColor",
+      "displayName": "Metin Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "appearance"
+    },
+    {
+      "name": "buttonTextColor",
+      "displayName": "Buton Metin Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "appearance"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Çerez barı metin ve buton içerikleri"
+    },
+    {
+      "id": "layout",
+      "name": "Yerleşim",
+      "description": "Çerez barının konumu ve kapatma düğmesi ayarları"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Çerez barı renk özelleştirmeleri"
+    }
+  ]
+}

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

@@ -0,0 +1,78 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  customerStore,
+  getCustomerConsentGranted,
+  handleCustomerConsentGrant,
+  waitForCustomerStoreInit,
+} from "@ikas/bp-storefront";
+import { XSVG } from "../../sub-components/icons";
+import { cx } from "../../utils/cx";
+import { Props } from "./types";
+
+export function CookieBar({
+  cookieContent,
+  buttonText,
+  position = false,
+  showCloseIcon = false,
+  backgroundColor,
+  textColor,
+  buttonTextColor,
+}: Props) {
+  const [dismissed, setDismissed] = useState(false);
+  const [storeReady, setStoreReady] = useState(false);
+
+  useEffect(() => {
+    waitForCustomerStoreInit(customerStore).then(() => setStoreReady(true));
+  }, []);
+
+  if (!storeReady) return null;
+
+  const hasConsent = getCustomerConsentGranted(customerStore);
+  if (hasConsent || dismissed) return null;
+
+  const positionClass = position
+    ? "kombos-cookie-bar--left"
+    : "kombos-cookie-bar--right";
+
+  const cssVars = {
+    ...(backgroundColor && { "--cookie-bg-color": backgroundColor }),
+    ...(textColor && { "--cookie-text-color": textColor }),
+    ...(buttonTextColor && { "--cookie-button-text-color": buttonTextColor }),
+  } as Record<string, string>;
+
+  return (
+    <div className={cx("kombos-cookie-bar", positionClass)} style={cssVars}>
+      <div className="kombos-cookie-bar__wrapper">
+        <div
+          className={cx(
+            "kombos-cookie-bar__top",
+            !showCloseIcon && "kombos-cookie-bar__top--has-close",
+          )}
+        >
+          <div
+            className="kombos-cookie-bar__content text-sm-regular"
+            dangerouslySetInnerHTML={{ __html: cookieContent || "" }}
+          />
+
+          {!showCloseIcon && (
+            <button
+              className="kombos-cookie-bar__close"
+              onClick={() => setDismissed(true)}
+              aria-label="Close"
+            >
+              <XSVG />
+            </button>
+          )}
+        </div>
+        <button
+          className="kombos-cookie-bar__accept text-sm-semibold"
+          onClick={() => handleCustomerConsentGrant(customerStore)}
+        >
+          {buttonText}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default CookieBar;

package/data/section-templates/header-section/children/CookieBar/styles.css

@@ -0,0 +1,111 @@
+/* ===== CookieBar Component ===== */
+
+.kombos-cookie-bar {
+  position: fixed;
+  bottom: 1.5rem;
+  z-index: var(--kombos-z-overlay);
+  width: calc(100% - 2rem);
+  max-width: 22rem;
+  color: var(--cookie-text-color, var(--kombos-white));
+}
+
+/* Position variants */
+.kombos-cookie-bar--right {
+  right: 1rem;
+}
+
+.kombos-cookie-bar--left {
+  left: 1rem;
+}
+
+/* Wrapper */
+.kombos-cookie-bar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: var(--cookie-bg-color, rgba(0, 0, 0, 0.7));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  word-break: break-word;
+}
+
+/* Top section (content + close) */
+.kombos-cookie-bar__top {
+  position: relative;
+}
+
+.kombos-cookie-bar__top--has-close {
+  padding-right: 1.5rem;
+}
+
+/* Rich text content */
+.kombos-cookie-bar__content {
+  line-height: 1.5;
+}
+
+.kombos-cookie-bar__content a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Close button */
+.kombos-cookie-bar__close {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  font-size: 1rem;
+  color: var(--cookie-button-text-color, var(--cookie-text-color, var(--kombos-white)));
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-cookie-bar__close:hover {
+  opacity: 1;
+}
+
+/* Accept button */
+.kombos-cookie-bar__accept {
+  align-self: flex-end;
+  padding: 0;
+  color: var(--cookie-button-text-color, var(--cookie-text-color, var(--kombos-white)));
+  background: none;
+  border: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-cookie-bar__accept:hover {
+  opacity: 1;
+}
+
+/* ===== Responsive ===== */
+
+@media (min-width: 768px) {
+  .kombos-cookie-bar {
+    bottom: 2rem;
+    max-width: 24rem;
+  }
+
+  .kombos-cookie-bar--right {
+    right: 2rem;
+  }
+
+  .kombos-cookie-bar--left {
+    left: 2rem;
+  }
+
+  .kombos-cookie-bar__wrapper {
+    padding: 1.5rem;
+  }
+}

package/data/section-templates/header-section/children/CookieBar/types.ts

@@ -0,0 +1,9 @@
+export interface Props {
+  cookieContent: string;
+  buttonText?: string;
+  position?: boolean;
+  showCloseIcon?: boolean;
+  backgroundColor?: string;
+  textColor?: string;
+  buttonTextColor?: string;
+}