@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,254 +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 { cx } from "../../utils/cx";
-import {
-  List1SVG,
-  MagnifyingGlass1SVG,
-  User1SVG,
-  ShoppingBag1SVG,
-} from "../../sub-components/icons";
-export function Navbar(props: Props) {
-  const {
-    logo,
-    navigationLinks,
-    logoSizeDesktop: rawLogoSizeDesktop,
-    logoSizeMobile: rawLogoSizeMobile,
-    cartTitle = "My Cart",
-    emptyCartText = "Your cart is empty",
-    checkoutButtonText = "Proceed to Checkout",
-    totalText = "Total",
-    navigationLinkColor,
-    coloredLinks,
-    coloredLinkColor,
-    registerButtonText = "Sign Up",
-    loginButtonText = "Sign In",
-    logoutButtonText = "Sign Out",
-    freeShippingText = "Free shipping on orders over $150",
-    emptyCartButtonText = "Start Shopping",
-    searchPlaceholder = "What are you looking for?",
-    searchingText = "Searching...",
-    noResultsText = "No products found",
-    resultCountText = "Result",
-    addToCartText = "Add to Cart",
-    addedToCartText = "Added to Cart",
-    outOfStockText = "Sold Out",
-    goToProductText = "View Product",
-    viewAllText = "View All",
-    viewCartButtonText = "View Cart",
-    searchEmptyStateText = "Search for products...",
-    searchProductList,
-    hideAddToCartButton,
-    imageAspectRatio,
-    imageObjectFit,
-    components,
-    stickyEnabled,
-    backgroundColor = "#ffffff",
-    borderColor = "#ececed",
-  } = 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={cx("kombos-navbar", stickyEnabled && "kombos-navbar--sticky")}
-      style={{
-        "--logo-h-desktop": logoSizeDesktop,
-        "--logo-h-mobile": logoSizeMobile,
-        backgroundColor,
-        borderColor,
-      }}
-    >
-      <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();
-              setSearchOpen(true);
-            }}
-            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 && (
-        <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}
-          emptyStateText={searchEmptyStateText}
-          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;

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

@@ -1,254 +0,0 @@
-/* ===== Navbar Component ===== */
-.kombos-navbar {
-  width: 100%;
-  border-bottom: 1px solid var(--kombos-gray-200);
-}
-
-.kombos-navbar--sticky {
-  position: sticky;
-  top: 0;
-  z-index: var(--kombos-z-header);
-}
-
-.kombos-navbar__inner {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding-block: 0.75rem;
-  position: relative;
-  justify-content: space-between;
-  min-height: calc(var(--logo-h-mobile, 3rem) + 1.5rem);
-}
-
-/* Logo */
-.kombos-navbar__logo {
-  flex-shrink: 0;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  height: var(--logo-h-mobile, 3rem);
-  overflow: hidden;
-}
-
-.kombos-navbar__logo-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  padding: 0.5rem 0;
-}
-
-/* Navigation */
-.kombos-navbar__nav {
-  flex: 1;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-}
-
-/* NavItem sub-component uses kombos-header__* classes — keep those styles here */
-.kombos-header__nav-item {
-  position: relative;
-}
-
-.kombos-header__nav-link {
-  color: var(--kombos-gray-700);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  white-space: nowrap;
-  transition: opacity 0.2s ease;
-}
-
-.kombos-header__nav-link:hover {
-  opacity: 0.7;
-}
-
-.kombos-header__chevron {
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-
-.kombos-header__nav-item:hover .kombos-header__chevron {
-  transform: rotate(180deg);
-}
-
-/* Dropdown */
-.kombos-header__dropdown {
-  display: none;
-  position: absolute;
-  top: calc(100% + 1.125rem);
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--kombos-white);
-  border: 1px solid var(--kombos-gray-100);
-  border-radius: 6px;
-  padding: 0.375rem 0;
-  width: 13rem;
-  box-shadow: 0 2px 12px 0.4px rgba(0, 0, 0, 0.06);
-  z-index: var(--kombos-z-dropdown);
-  flex-direction: column;
-}
-
-/* Invisible bridge: covers the 18px gap between nav link and dropdown */
-.kombos-header__dropdown::before {
-  content: "";
-  position: absolute;
-  bottom: 100%;
-  left: -0.75rem;
-  right: -0.75rem;
-  height: 1.125rem;
-}
-
-.kombos-header__nav-item:hover > .kombos-header__dropdown {
-  display: flex;
-}
-
-/* Nested dropdown (2nd level) */
-.kombos-header__dropdown--nested {
-  top: -0.375rem;
-  left: calc(100% + 0.75rem);
-  transform: none;
-}
-
-/* Bridge: covers the 12px gap between 1st and 2nd level dropdowns */
-.kombos-header__dropdown--nested::before {
-  content: "";
-  position: absolute;
-  top: -0.75rem;
-  bottom: -0.75rem;
-  right: 100%;
-  left: auto;
-  width: 0.75rem;
-  height: auto;
-}
-
-.kombos-header__dropdown-item {
-  position: relative;
-}
-
-.kombos-header__dropdown-item:hover > .kombos-header__dropdown--nested {
-  display: flex;
-}
-
-.kombos-header__dropdown-link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--kombos-gray-900);
-  text-decoration: none;
-  padding: 0.75rem 1rem;
-  transition: background-color 0.15s ease;
-}
-
-.kombos-header__dropdown-link:hover {
-  background-color: var(--kombos-gray-50);
-}
-
-.kombos-header__caret-right {
-  flex-shrink: 0;
-  color: var(--kombos-gray-900);
-}
-
-/* Action Icons */
-.kombos-navbar__actions {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.kombos-navbar__icon-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  position: relative;
-  transition: opacity 0.2s ease;
-  font-size: 1.25rem;
-}
-
-.kombos-navbar__icon-btn:hover {
-  opacity: 0.6;
-}
-
-.kombos-navbar__badge {
-  position: absolute;
-  top: -0.375rem;
-  right: -0.5rem;
-  background: var(--kombos-badge-bg);
-  color: var(--kombos-white);
-  font-size: 0.625rem;
-  font-weight: 600;
-  min-width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.25rem;
-}
-
-/* Hamburger (mobile only — visible by default) */
-.kombos-navbar__hamburger {
-  display: flex;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  color: var(--kombos-gray-900);
-  transition: opacity 0.2s ease;
-  font-size: 1.375rem;
-}
-
-.kombos-navbar__hamburger:hover {
-  opacity: 0.6;
-}
-
-/* ===== Responsive — Desktop ===== */
-@media (min-width: 1024px) {
-  .kombos-navbar__inner {
-    gap: 2rem;
-    position: static;
-    justify-content: initial;
-    min-height: calc(var(--logo-h-desktop, 3.75rem) + 1.5rem);
-  }
-
-  .kombos-navbar__hamburger {
-    display: none;
-  }
-
-  .kombos-navbar__nav {
-    display: flex;
-  }
-
-  .kombos-navbar__nav--no-logo {
-    justify-content: flex-start;
-  }
-
-  .kombos-navbar__logo {
-    position: static;
-    left: auto;
-    top: auto;
-    transform: none;
-    height: var(--logo-h-desktop, 3.75rem);
-  }
-
-  .kombos-navbar__actions {
-    gap: 1.25rem;
-  }
-}

package/templates/create-full/src/components/Navbar/types.ts

@@ -1,42 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasImage, HeightStyleType, IkasNavigationLinkList, IkasProductList } from "@ikas/bp-storefront";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-
-export interface Props {
-  logo?: IkasImage | null;
-  logoSizeDesktop?: HeightStyleType;
-  logoSizeMobile?: HeightStyleType;
-  navigationLinks?: IkasNavigationLinkList;
-  navigationLinkColor?: string;
-  coloredLinks?: IkasNavigationLinkList;
-  coloredLinkColor?: string;
-  cartTitle?: string;
-  emptyCartText?: string;
-  checkoutButtonText?: string;
-  totalText?: string;
-  freeShippingText?: string;
-  emptyCartButtonText?: string;
-  registerButtonText?: string;
-  loginButtonText?: string;
-  logoutButtonText?: string;
-  searchProductList?: IkasProductList;
-  hideAddToCartButton?: boolean;
-  searchPlaceholder?: string;
-  searchingText?: string;
-  noResultsText?: string;
-  resultCountText?: string;
-  addToCartText?: string;
-  addedToCartText?: string;
-  outOfStockText?: string;
-  goToProductText?: string;
-  viewAllText?: string;
-  components?: any;
-  imageAspectRatio?: AspectRatio;
-  imageObjectFit?: ObjectFit;
-  viewCartButtonText?: string;
-  /** When enabled, the navbar stays fixed at the top of the page and remains visible while scrolling */
-  stickyEnabled?: boolean;
-  backgroundColor?: string;
-  borderColor?: string;
-  searchEmptyStateText?: string;
-}

package/templates/create-full/src/components/NotFound/index.tsx

@@ -1,39 +0,0 @@
-import { Router } from "@ikas/bp-storefront";
-
-import { Props } from "./types";
-import Button from "../../sub-components/Button";
-
-export function NotFound({ title, description, button }: Props) {
-  return (
-    <section className="not-found">
-      <div className="not-found__wrapper kombos-container">
-        <div className="not-found__content">
-          <h1 className="not-found__title display-sm-semibold">{title}</h1>
-          <p className="not-found__description text-md-regular">
-            {description}
-          </p>
-          {button?.href && button?.label && (
-            <Button
-              variant="primary"
-              size="s"
-              onClick={() =>
-                Router.navigate(
-                  button.href,
-                  false,
-                  button.openInNewTab ?? false,
-                )
-              }
-              style={{
-                minWidth: 200,
-              }}
-            >
-              {button.label}
-            </Button>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export default NotFound;

package/templates/create-full/src/components/NotFound/styles.css

@@ -1,46 +0,0 @@
-.not-found {
-  width: 100%;
-}
-
-.not-found__wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 50vh;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.not-found__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 1rem;
-  max-width: 29rem;
-  text-wrap-style: pretty;
-}
-
-.not-found__title {
-  color: var(--kombos-gray-900);
-  margin: 0;
-}
-
-.not-found__description {
-  color: var(--kombos-gray-500);
-  margin: 0;
-}
-
-@media (min-width: 768px) {
-  .not-found__wrapper {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .not-found__wrapper {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-  }
-}

package/templates/create-full/src/components/NotFound/types.ts

@@ -1,8 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasNavigationLink } from "@ikas/bp-storefront";
-
-export interface Props {
-  title?: string;
-  description?: string;
-  button?: IkasNavigationLink | null;
-}