@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,175 +0,0 @@
-/* ===== 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/templates/create-full/src/components/Navbar/components/MobileMenu/index.tsx

@@ -1,198 +0,0 @@
-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} subcategories`}
-                        >
-                          <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;

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

@@ -1,122 +0,0 @@
-/* ===== Mobile Menu ===== */
-.kombos-mobile-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--kombos-z-overlay);
-}
-
-.kombos-mobile-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0);
-  transition: background 0.3s ease;
-}
-
-.kombos-mobile-overlay--open .kombos-mobile-backdrop {
-  background: rgba(0, 0, 0, 0.35);
-}
-
-.kombos-mobile-menu {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  max-width: 26rem;
-  background: var(--kombos-white);
-  display: flex;
-  flex-direction: column;
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
-}
-
-.kombos-mobile-overlay--open .kombos-mobile-menu {
-  transform: translateX(0);
-}
-
-/* Header */
-.kombos-mobile-menu__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 0.75rem;
-  height: 3.5rem;
-  border-bottom: 1px solid var(--kombos-gray-100);
-  flex-shrink: 0;
-}
-
-.kombos-mobile-menu__icon-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--kombos-gray-900);
-}
-
-/* Body */
-.kombos-mobile-menu__body {
-  flex: 1;
-  overflow-y: auto;
-}
-
-/* Back button */
-.kombos-mobile-menu__back {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 1rem 0.75rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--kombos-gray-900);
-  width: 100%;
-}
-
-/* Nav */
-.kombos-mobile-menu__nav {
-  padding: 0 0.75rem;
-}
-
-.kombos-mobile-menu__link-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-mobile-menu__link {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  color: var(--kombos-gray-900);
-  text-decoration: none;
-  padding: 1rem 0;
-}
-
-.kombos-mobile-menu__drill-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 1rem 0 1rem 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--kombos-gray-900);
-}
-
-/* Footer */
-.kombos-mobile-menu__footer {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-mobile-menu__footer-btn {
-  flex: 1;
-}

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

@@ -1,65 +0,0 @@
-import { IkasNavigationLink } from "@ikas/bp-storefront";
-import { CaretDownSVG, CaretRightSVG } from "../../../../sub-components/icons";
-
-interface Props {
-  link: IkasNavigationLink;
-  linkColor?: string;
-}
-
-export default function NavItem({ link, linkColor }: Props) {
-  const hasSubLinks = link.subLinks && link.subLinks.length > 0;
-
-  return (
-    <div className="kombos-header__nav-item">
-      <a
-        href={link.href}
-        className="kombos-header__nav-link text-md-medium"
-        style={{ color: linkColor ?? "var(--kombos-gray-700)" }}
-        target={link.openInNewTab ? "_blank" : undefined}
-      >
-        {link.label}
-        {hasSubLinks && <CaretDownSVG className="kombos-header__chevron" />}
-      </a>
-      {hasSubLinks && (
-        <div className="kombos-header__dropdown">
-          {link.subLinks!.map((sub: IkasNavigationLink, j: number) => {
-            const hasNestedLinks = sub.subLinks && sub.subLinks.length > 0;
-            return (
-              <div key={j} className="kombos-header__dropdown-item">
-                <a
-                  href={sub.href}
-                  className="kombos-header__dropdown-link text-md-medium"
-                  target={sub.openInNewTab ? "_blank" : undefined}
-                >
-                  <span>{sub.label}</span>
-                  {hasNestedLinks && (
-                    <CaretRightSVG className="kombos-header__caret-right" />
-                  )}
-                </a>
-                {hasNestedLinks && (
-                  <div className="kombos-header__dropdown kombos-header__dropdown--nested">
-                    {sub.subLinks!.map(
-                      (child: IkasNavigationLink, k: number) => (
-                        <div key={k} className="kombos-header__dropdown-item">
-                          <a
-                            href={child.href}
-                            className="kombos-header__dropdown-link text-md-medium"
-                            target={
-                              child.openInNewTab ? "_blank" : undefined
-                            }
-                          >
-                            <span>{child.label}</span>
-                          </a>
-                        </div>
-                      ),
-                    )}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}