@ikas/component-cli 0.93.0 → 0.94.0

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

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

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

@@ -0,0 +1,65 @@
+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>
+  );
+}