@ikas/component-cli 0.102.0 → 0.103.0

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

@@ -1,267 +0,0 @@
-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

@@ -1,182 +0,0 @@
-
-/* ===== 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

@@ -1,250 +0,0 @@
-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;