@ikas/component-cli 0.103.0 → 0.104.0

package/templates/create-full/src/components/Navbar/components/SearchModal/index.tsx

@@ -0,0 +1,267 @@
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { observer } from "@ikas/component-utils";
+import { useScrollLock } from "../../../../hooks/useScrollLock";
+import {
+  IkasProductList,
+  IkasImage,
+  searchProductList,
+  getDefaultSrc,
+  isEmpty,
+  Router,
+  createMediaSrcset,
+  getProductOptionSet,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { cx } from "../../../../utils/cx";
+import { MagnifyingGlass1SVG, XSVG } from "../../../../sub-components/icons";
+import SpinnerIcon from "../../../../sub-components/SpinnerIcon";
+import ProductCard from "../../../../sub-components/ProductCard";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+
+interface Props {
+  productList: IkasProductList;
+  logo?: IkasImage;
+
+  logoSizeDesktop: string;
+  logoSizeMobile: string;
+  searchPlaceholder: string;
+  searchingText: string;
+  noResultsText: string;
+  resultCountText: string;
+  addToCartText: string;
+  addedToCartText: string;
+  outOfStockText: string;
+  goToProductText: string;
+  viewAllText: string;
+  hideAddToCartButton?: boolean;
+  components?: any;
+  parentProps?: Record<string, any>;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  onClose: () => void;
+}
+
+const SearchModal = observer(function SearchModal({
+  productList,
+  logo,
+  logoSizeDesktop,
+  logoSizeMobile,
+  searchPlaceholder,
+  searchingText,
+  noResultsText,
+  resultCountText,
+  addToCartText,
+  addedToCartText,
+  outOfStockText,
+  goToProductText,
+  viewAllText,
+  hideAddToCartButton,
+  aspectRatio,
+  objectFit,
+  onClose,
+  components,
+  parentProps,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [pendingSearch, setPendingSearch] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const products = productList.data ?? [];
+
+  useEffect(() => {
+    products.forEach((p) => {
+      if (!p.productOptionSet) getProductOptionSet(p);
+    });
+  }, [products.length]);
+
+  const isLoading = productList.isLoading;
+  const totalCount = productList.count ?? 0;
+
+  useEffect(() => {
+    if (!isLoading) setPendingSearch(false);
+  }, [isLoading]);
+
+  useScrollLock();
+
+  useEffect(() => {
+    requestAnimationFrame(() => setOpen(true));
+    setTimeout(() => inputRef.current?.focus(), 100);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleClose]);
+
+  const handleInput = useCallback(
+    (e: Event) => {
+      const value = (e.target as HTMLInputElement).value;
+      setQuery(value);
+      setPendingSearch(true);
+      searchProductList(productList, value);
+    },
+    [productList],
+  );
+
+  const showResults = !isLoading && !isEmpty(products);
+  const showNoResults =
+    !isLoading && isEmpty(products) && query.trim().length > 0;
+
+  return (
+    <div
+      className={cx(
+        "kombos-search-overlay",
+        open && "kombos-search-overlay--open",
+      )}
+      onClick={handleClose}
+    >
+      {/* Panel */}
+      <div
+        className="kombos-search__panel"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="kombos-search__header">
+          {/* Logo */}
+          <div className="kombos-search__logo-area">
+            {logo && (
+              <a
+                href="/"
+                className="kombos-search__logo"
+                style={{
+                  "--search-logo-h-desktop": logoSizeDesktop,
+                  "--search-logo-h-mobile": logoSizeMobile,
+                }}
+              >
+                <img
+                  src={getDefaultSrc(logo)}
+                  srcSet={createMediaSrcset(logo)}
+                  sizes="120px"
+                  alt={logo?.altText || "Logo"}
+                  className="kombos-search__logo-img"
+                />
+              </a>
+            )}
+          </div>
+
+          {/* Search Input */}
+          <Input
+            className="kombos-search__input-wrap"
+            leftIcon={<MagnifyingGlass1SVG />}
+            inputRef={inputRef}
+            placeholder={searchPlaceholder}
+            value={query}
+            onInput={handleInput}
+          />
+
+          {/* Close */}
+          <div className="kombos-search__close-area">
+            <button
+              className="kombos-search__close"
+              onClick={handleClose}
+              aria-label="Close"
+            >
+              <XSVG />
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="kombos-search__body">
+          {/* Searching */}
+          {isLoading && (
+            <div className="kombos-search__status">
+              <SpinnerIcon className="kombos-search__spinner" />
+              <span className="text-xl-medium md:display-xs-medium">
+                {searchingText}
+              </span>
+            </div>
+          )}
+
+          {/* No Results */}
+          {showNoResults && (
+            <div className="kombos-search__status">
+              <span className="text-xl-medium md:display-xs-medium">
+                {noResultsText}
+              </span>
+            </div>
+          )}
+
+          {/* Result Count */}
+          {!isLoading &&
+            !pendingSearch &&
+            query.trim().length > 0 &&
+            !isEmpty(products) && (
+              <div className="kombos-search__result-count">
+                <span className="text-xl-medium md:display-xs-medium">
+                  {totalCount} {resultCountText}
+                </span>
+              </div>
+            )}
+
+          {/* Results */}
+          {showResults && (
+            <>
+              <div className="kombos-search__grid">
+                {products.map((product) => (
+                  <div key={product.id} className="kombos-search__card">
+                    <ProductCard
+                      product={product}
+                      addToCartText={addToCartText}
+                      addedToCartText={addedToCartText}
+                      outOfStockText={outOfStockText}
+                      goToProductText={goToProductText}
+                      hideAddToCartButton={hideAddToCartButton}
+                      openCartOnAdd={false}
+                      aspectRatio={aspectRatio}
+                      objectFit={objectFit}
+                      sizes="(max-width: 767px) calc((100vw - 44px) / 2), (max-width: 1023px) calc((100vw - 48px) / 2), calc((100vw - 240px) / 5)"
+                    />
+                    <IkasComponentRenderer
+                      id={`search-modal-product-${product.id}`}
+                      components={components}
+                      parentProps={parentProps}
+                      map={{
+                        product,
+                      }}
+                      className="kombos-search__card-content"
+                    />
+                  </div>
+                ))}
+              </div>
+              {query.trim().length > 0 && (
+                <div className="kombos-search__view-all">
+                  <Button
+                    variant="primary"
+                    className="kombos-search__view-all-btn"
+                    onClick={() => {
+                      Router.navigateToPage("SEARCH", undefined, {
+                        q: query.trim(),
+                      });
+                      handleClose();
+                    }}
+                  >
+                    {viewAllText}
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default SearchModal;

package/templates/create-full/src/components/Navbar/components/SearchModal/styles.css

@@ -0,0 +1,182 @@
+
+/* ===== Search Modal ===== */
+.kombos-search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kombos-z-overlay);
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.kombos-search-overlay--open {
+  opacity: 1;
+}
+
+.kombos-search__panel {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  background: var(--kombos-white);
+}
+
+/* Header */
+.kombos-search__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--kombos-gray-200);
+  flex-shrink: 0;
+}
+
+.kombos-search__logo-area {
+  flex-shrink: 0;
+  width: 7.5rem;
+  display: none;
+}
+
+.kombos-search__logo {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: var(--search-logo-h-mobile, 3rem);
+  overflow: hidden;
+}
+
+.kombos-search__logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.kombos-search__input-wrap {
+  flex: 1;
+  max-width: 59.5rem;
+}
+
+.kombos-search__close-area {
+  flex-shrink: 0;
+  width: auto;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.kombos-search__close {
+  background: var(--kombos-gray-50);
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0.6875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-900);
+  font-size: 1.25rem;
+  transition: background-color 0.15s ease;
+}
+
+.kombos-search__close:hover {
+  background: var(--kombos-gray-100);
+}
+
+/* Body */
+.kombos-search__body {
+  overflow-y: auto;
+  padding: 1.5rem 1rem 0;
+}
+
+/* Status (searching / no results) */
+.kombos-search__status {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0 0 3rem;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-search__spinner {
+  font-size: 2rem;
+}
+
+/* Result Count */
+.kombos-search__result-count {
+  text-align: center;
+  padding: 0 0 1.5rem;
+  color: var(--kombos-gray-900);
+}
+
+/* Product Grid */
+.kombos-search__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+  padding-bottom: 3rem;
+}
+
+/* View All */
+.kombos-search__view-all {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 3rem;
+}
+
+.kombos-search__view-all-btn {
+  min-width: 12.5rem;
+}
+
+.kombos-search__card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.kombos-search__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* ===== Responsive — Tablet ===== */
+@media (min-width: 768px) {
+  .kombos-search__grid {
+    gap: 1rem;
+  }
+}
+
+/* ===== Responsive — Desktop ===== */
+@media (min-width: 1024px) {
+  .kombos-search__header {
+    padding: 1.25rem 3.5rem;
+    gap: 1.5rem;
+  }
+
+  .kombos-search__logo-area {
+    display: block;
+  }
+
+  .kombos-search__close-area {
+    width: 7.5rem;
+  }
+
+  .kombos-search__body {
+    padding: 3rem 4.5rem 0;
+  }
+
+  .kombos-search__result-count {
+    padding-bottom: 3rem;
+  }
+
+  .kombos-search__grid {
+    grid-template-columns: repeat(5, 1fr);
+    gap: 1.5rem;
+  }
+
+  .kombos-search__logo {
+    height: var(--search-logo-h-desktop, 3.75rem);
+  }
+}

package/templates/create-full/src/components/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;