@ikas/code-components-mcp 0.104.0 → 0.106.0

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

@@ -0,0 +1,17 @@
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  forgotPasswordText?: string;
+  createAccountText?: string;
+  showGoogleLogin?: boolean;
+  googleButtonText?: string;
+  showFacebookLogin?: boolean;
+  facebookButtonText?: string;
+  dividerText?: string;
+}

package/data/section-templates/login-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/navigation/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Navigation Pattern",
+  "description": "Store navigation with Router API, customer state checks, cart state, page navigation, and responsive mobile menu. Shows Router.navigate, Router.navigateToPage, customerStore, cartStore, hasCustomer, and navigation link rendering."
+}

package/data/section-templates/navigation/components/CartSidebar/index.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState, useCallback } from "preact/hooks";
+import { observer } from "@ikas/component-utils";
+import { useScrollLock } from "../../../../hooks/useScrollLock";
+import { cx } from "../../../../utils/cx";
+import {
+  XSVG,
+  Package1SVG,
+  Handbag1SVG,
+} from "../../../../sub-components/icons";
+import Button from "../../../../sub-components/Button";
+import {
+  cartStore,
+  hasCart,
+  getIkasOrderTotalItemCount,
+  getIkasOrderFormattedTotalFinalPrice,
+  getOrderAdjustmentDisplayName,
+  getOrderAdjustmentFormattedAmount,
+  removeItem,
+  getCheckoutUrlFromCartStore,
+  IkasOrderLineItem,
+  Router,
+} from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+import CartItem from "../../../../sub-components/CartItem";
+
+interface Props {
+  cartTitle: string;
+  emptyCartText: string;
+  checkoutButtonText: string;
+  viewCartButtonText: string;
+  totalText: string;
+  freeShippingText: string;
+  emptyCartButtonText: string;
+  imageAspectRatio?: AspectRatio;
+  imageObjectFit?: ObjectFit;
+  onClose: () => void;
+}
+
+const CartSidebar = observer(function CartSidebar({
+  cartTitle,
+  emptyCartText,
+  checkoutButtonText,
+  viewCartButtonText,
+  totalText,
+  freeShippingText,
+  emptyCartButtonText,
+  imageAspectRatio,
+  imageObjectFit,
+  onClose,
+}: Props) {
+  const [open, setOpen] = useState(false);
+
+  useScrollLock();
+
+  useEffect(() => {
+    requestAnimationFrame(() => setOpen(true));
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  const cart = cartStore.cart;
+  const isCartLoading = cartStore.isCartLoading;
+  const cartHasItems = hasCart(cartStore);
+  const itemCount = cart ? getIkasOrderTotalItemCount(cart) : 0;
+  const lineItems = cart?.orderLineItems ?? [];
+  const adjustments = cart?.orderAdjustments ?? [];
+
+  const handleRemove = async (item: IkasOrderLineItem) => {
+    await removeItem(item);
+  };
+
+  return (
+    <div
+      className={cx("kombos-cart-overlay", open && "kombos-cart-overlay--open")}
+    >
+      <div className="kombos-cart-backdrop" onClick={handleClose} />
+      <aside className="kombos-cart-sidebar">
+        {/* Header */}
+        <div className="kombos-cart-sidebar__head">
+          <h3 className="kombos-cart-sidebar__title text-md-medium">
+            {cartTitle} ({itemCount})
+          </h3>
+          <button
+            className="kombos-cart-sidebar__close"
+            onClick={handleClose}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        {/* Free Shipping Banner */}
+        {freeShippingText && (
+          <div className="kombos-cart-sidebar__banner">
+            <Package1SVG />
+            <span className="text-xs-semibold">{freeShippingText}</span>
+          </div>
+        )}
+
+        {/* Loading */}
+        {isCartLoading && (
+          <div className="kombos-cart-sidebar__loading text-sm-regular" />
+        )}
+
+        {/* Empty State */}
+        {!cartHasItems && !isCartLoading && (
+          <div className="kombos-cart-sidebar__empty">
+            <Handbag1SVG />
+            <p className="kombos-cart-sidebar__empty-text text-md-medium">
+              {emptyCartText}
+            </p>
+            <Button
+              variant="primary"
+              size="s"
+              className="kombos-cart-sidebar__empty-btn"
+              onClick={handleClose}
+            >
+              {emptyCartButtonText}
+            </Button>
+          </div>
+        )}
+
+        {/* Cart Items */}
+        {cartHasItems && (
+          <div className="kombos-cart-sidebar__items">
+            {lineItems.map((item) => (
+              <CartItem
+                key={item.id}
+                item={item}
+                onRemove={handleRemove}
+                aspectRatio={imageAspectRatio}
+                objectFit={imageObjectFit}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Adjustments */}
+        {adjustments.length > 0 && (
+          <div className="kombos-cart-sidebar__adjustments">
+            {adjustments.map((adj: any, i: number) => (
+              <div
+                key={i}
+                className="kombos-cart-sidebar__adj-row text-sm-regular"
+              >
+                <span>{getOrderAdjustmentDisplayName(adj)}</span>
+                <span className="kombos-cart-sidebar__adj-amount text-sm-medium">
+                  {getOrderAdjustmentFormattedAmount(adj)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Footer */}
+        {cartHasItems && cart && (
+          <div className="kombos-cart-sidebar__footer">
+            <div className="kombos-cart-sidebar__total text-md-semibold">
+              <span>{totalText}</span>
+              <span>{getIkasOrderFormattedTotalFinalPrice(cart)}</span>
+            </div>
+            <div className="kombos-cart-sidebar__footer-buttons">
+              <a
+                href="/cart"
+                className="kombos-cart-sidebar__view-cart-link"
+                onClick={(e: Event) => {
+                  e.preventDefault();
+                  handleClose();
+                  Router.navigateToPage("CART");
+                }}
+              >
+                <Button
+                  variant="secondary"
+                  size="s"
+                  className="kombos-cart-sidebar__view-cart-btn"
+                >
+                  {viewCartButtonText}
+                </Button>
+              </a>
+              <a
+                href={getCheckoutUrlFromCartStore(cartStore)}
+                className="kombos-cart-sidebar__checkout"
+              >
+                <Button
+                  variant="primary"
+                  size="s"
+                  className="kombos-cart-sidebar__checkout-btn"
+                >
+                  {checkoutButtonText}
+                </Button>
+              </a>
+            </div>
+          </div>
+        )}
+      </aside>
+    </div>
+  );
+});
+
+export default CartSidebar;

package/data/section-templates/navigation/components/CartSidebar/styles.css

@@ -0,0 +1,175 @@
+/* ===== Cart Sidebar ===== */
+.kombos-cart-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kombos-z-overlay);
+}
+
+.kombos-cart-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0);
+  transition: background 0.3s ease;
+}
+
+.kombos-cart-overlay--open .kombos-cart-backdrop {
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.kombos-cart-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 30.5rem;
+  background: var(--kombos-white);
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+}
+
+.kombos-cart-overlay--open .kombos-cart-sidebar {
+  transform: translateX(0);
+}
+
+/* Header */
+.kombos-cart-sidebar__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--kombos-gray-200);
+  flex-shrink: 0;
+}
+
+.kombos-cart-sidebar__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.kombos-cart-sidebar__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--kombos-gray-700);
+  padding: 0;
+  display: flex;
+  font-size: 1.25rem;
+}
+
+/* Free Shipping Banner */
+.kombos-cart-sidebar__banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 1.5rem 1.5rem 0;
+  padding: 0.5rem 1.5rem;
+  background: var(--kombos-success-bg);
+  border-radius: 6px;
+  color: var(--kombos-gray-900);
+  flex-shrink: 0;
+}
+
+/* Loading */
+.kombos-cart-sidebar__loading {
+  padding: 2rem 1.5rem;
+  text-align: center;
+  color: var(--kombos-gray-500);
+}
+
+/* Empty State */
+.kombos-cart-sidebar__empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 3rem 1.5rem;
+  color: var(--kombos-gray-500);
+  font-size: 3rem;
+}
+
+.kombos-cart-sidebar__empty-text {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-cart-sidebar__empty-btn {
+  min-width: 10rem;
+}
+
+/* Cart Items */
+.kombos-cart-sidebar__items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+/* Adjustments */
+.kombos-cart-sidebar__adjustments {
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid var(--kombos-gray-200);
+  flex-shrink: 0;
+}
+
+.kombos-cart-sidebar__adj-row {
+  display: flex;
+  justify-content: space-between;
+  color: var(--kombos-gray-900);
+  padding: 0.25rem 0;
+}
+
+.kombos-cart-sidebar__adj-amount {
+  color: var(--kombos-error);
+}
+
+/* Footer */
+.kombos-cart-sidebar__footer {
+  padding: 1.25rem 1.5rem;
+  border-top: 1px solid var(--kombos-gray-200);
+  flex-shrink: 0;
+}
+
+.kombos-cart-sidebar__total {
+  display: flex;
+  justify-content: space-between;
+  color: var(--kombos-gray-900);
+  margin-bottom: 1rem;
+}
+
+.kombos-cart-sidebar__footer-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-cart-sidebar__view-cart-link {
+  display: block;
+  text-decoration: none;
+  flex: 1;
+}
+
+.kombos-cart-sidebar__view-cart-btn {
+  width: 100%;
+}
+
+.kombos-cart-sidebar__checkout {
+  display: block;
+  text-decoration: none;
+  flex: 1;
+}
+
+.kombos-cart-sidebar__checkout-btn {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .kombos-cart-sidebar__footer-buttons {
+    flex-direction: row;
+  }
+}

package/data/section-templates/navigation/components/MobileMenu/index.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useState, useCallback, useRef } from "preact/hooks";
+import { useScrollLock } from "../../../../hooks/useScrollLock";
+import {
+  IkasNavigationLink,
+  customerStore,
+  hasCustomer,
+  Router,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../utils/cx";
+import { XSVG, ShoppingBag1SVG, CaretRightSVG, CaretLeftSVG } from "../../../../sub-components/icons";
+import Button from "../../../../sub-components/Button";
+
+interface LinkGroup {
+  links: IkasNavigationLink[];
+  color?: string;
+}
+
+interface Props {
+  linkGroups: LinkGroup[];
+  registerButtonText: string;
+  loginButtonText: string;
+  logoutButtonText: string;
+  onClose: () => void;
+  onCartOpen: () => void;
+}
+
+interface DrillDown {
+  parentLabel: string;
+  subLinks: IkasNavigationLink[];
+}
+
+const MobileMenu = observer(function MobileMenu({
+  linkGroups,
+  registerButtonText,
+  loginButtonText,
+  logoutButtonText,
+  onClose,
+  onCartOpen,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const [drillDown, setDrillDown] = useState<DrillDown | null>(null);
+  const isLoggedIn = hasCustomer(customerStore);
+  const skipCleanupRef = useRef(false);
+
+  useScrollLock(true, skipCleanupRef);
+
+  useEffect(() => {
+    requestAnimationFrame(() => setOpen(true));
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  const handleLinkClick = useCallback(
+    (link: IkasNavigationLink) => {
+      if (link.href) {
+        handleClose();
+      }
+    },
+    [handleClose],
+  );
+
+  const handleCartClick = useCallback(() => {
+    skipCleanupRef.current = true;
+    handleClose();
+    onCartOpen();
+  }, [handleClose, onCartOpen]);
+
+  return (
+    <div
+      className={cx("kombos-mobile-overlay", open && "kombos-mobile-overlay--open")}
+    >
+      <div className="kombos-mobile-backdrop" onClick={handleClose} />
+      <div className="kombos-mobile-menu">
+        {/* Header */}
+        <div className="kombos-mobile-menu__head">
+          <button
+            className="kombos-mobile-menu__icon-btn"
+            onClick={handleClose}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+          <button
+            className="kombos-mobile-menu__icon-btn"
+            onClick={handleCartClick}
+            aria-label="Cart"
+          >
+            <ShoppingBag1SVG />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="kombos-mobile-menu__body">
+          {drillDown ? (
+            <>
+              {/* Back button */}
+              <button
+                className="kombos-mobile-menu__back"
+                onClick={() => setDrillDown(null)}
+              >
+                <CaretLeftSVG />
+                <span className="text-xs-medium">{drillDown.parentLabel}</span>
+              </button>
+              {/* Sub-links */}
+              <nav className="kombos-mobile-menu__nav">
+                {drillDown.subLinks.map(
+                  (sub: IkasNavigationLink, j: number) => (
+                    <a
+                      key={j}
+                      href={sub.href}
+                      className="kombos-mobile-menu__link text-sm-medium"
+                      onClick={() => handleLinkClick(sub)}
+                    >
+                      {sub.label}
+                    </a>
+                  ),
+                )}
+              </nav>
+            </>
+          ) : (
+            <nav className="kombos-mobile-menu__nav">
+              {linkGroups.map((group, gi) =>
+                group.links.map((link: IkasNavigationLink, i: number) => {
+                  const hasSubLinks = link.subLinks && link.subLinks.length > 0;
+                  return (
+                    <div
+                      key={`${gi}-${i}`}
+                      className="kombos-mobile-menu__link-row"
+                    >
+                      <a
+                        href={link.href}
+                        className="kombos-mobile-menu__link text-sm-medium"
+                        style={group.color ? { color: group.color } : undefined}
+                        onClick={() => handleLinkClick(link)}
+                      >
+                        {link.label}
+                      </a>
+                      {hasSubLinks && (
+                        <button
+                          className="kombos-mobile-menu__drill-btn"
+                          onClick={() =>
+                            setDrillDown({
+                              parentLabel: link.label,
+                              subLinks: link.subLinks!,
+                            })
+                          }
+                          aria-label={`${link.label} alt kategorileri`}
+                        >
+                          <CaretRightSVG />
+                        </button>
+                      )}
+                    </div>
+                  );
+                }),
+              )}
+            </nav>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="kombos-mobile-menu__footer">
+          {isLoggedIn ? (
+            <Button
+              variant="secondary"
+              className="kombos-mobile-menu__footer-btn"
+              onClick={() => Router.navigateToPage("ACCOUNT")}
+            >
+              {logoutButtonText}
+            </Button>
+          ) : (
+            <>
+              <Button
+                variant="secondary"
+                className="kombos-mobile-menu__footer-btn"
+                onClick={() => Router.navigateToPage("REGISTER")}
+              >
+                {registerButtonText}
+              </Button>
+              <Button
+                variant="primary"
+                className="kombos-mobile-menu__footer-btn"
+                onClick={() => Router.navigateToPage("LOGIN")}
+              >
+                {loginButtonText}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default MobileMenu;