@ikas/component-cli 0.103.0 → 0.104.0

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

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  customerStore,
+  getFavoriteProducts,
+  IkasProduct,
+  getProductOptionSet,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import ProductCard from "../../sub-components/ProductCard";
+import PageLoader from "../../sub-components/PageLoader";
+import { Props } from "./types";
+
+export function AccountFavorites(props: Props) {
+  const {
+    favoritesLabel = "Favorilerim",
+    emptyFavoritesText = "Henuz favori urun eklemediniz.",
+    addToCartText = "Sepete Ekle",
+    components,
+  } = props;
+  const [favorites, setFavorites] = useState<IkasProduct[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getFavoriteProducts(customerStore).then((products) => {
+      const items = products ?? [];
+      items.forEach((p) => getProductOptionSet(p));
+      setFavorites(items);
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <div className="kombos-account-favorites">
+      <h1 className="kombos-account-favorites__title text-md-medium">
+        {favoritesLabel}
+      </h1>
+
+      {loading ? (
+        <PageLoader />
+      ) : (
+        <>
+          {favorites.length === 0 && (
+            <p className="kombos-account-favorites__empty text-sm-regular">
+              {emptyFavoritesText}
+            </p>
+          )}
+
+          {favorites.length > 0 && (
+            <div className="kombos-account-favorites__grid">
+              {favorites.map((product) => (
+                <div
+                  key={product.id}
+                  className="kombos-account-favorites__card"
+                >
+                  <ProductCard
+                    product={product}
+                    addToCartText={addToCartText}
+                    sizes="(max-width: 767px) calc(50vw - 36px), (max-width: 1023px) calc(33.3vw - 32px), calc(33.3vw - 48px)"
+                    onFavoriteRemove={() =>
+                      setFavorites((prev) =>
+                        prev.filter((f) => f.id !== product.id),
+                      )
+                    }
+                  />
+                  <IkasComponentRenderer
+                    id={`account-favorites-product-${product.id}`}
+                    components={components}
+                    parentProps={props}
+                    map={{ product }}
+                    className="kombos-account-favorites__card-content"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default AccountFavorites;

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

@@ -0,0 +1,52 @@
+/* ── Account Favorites ── */
+.kombos-account-favorites {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-favorites__title {
+  display: block;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-favorites__empty {
+  color: var(--kombos-gray-500);
+  padding: 3rem 0;
+  text-align: center;
+}
+
+.kombos-account-favorites__grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  gap: 1rem;
+}
+
+.kombos-account-favorites__card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kombos-account-favorites__card-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Tablet (768px+) ── */
+@media (min-width: 768px) {
+  .kombos-account-favorites__grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ── Desktop (1024px+) ── */
+@media (min-width: 1024px) {
+  .kombos-account-favorites__grid {
+    gap: 1.5rem;
+  }
+}

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

@@ -0,0 +1,7 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  favoritesLabel?: string;
+  emptyFavoritesText?: string;
+  addToCartText?: string;
+  components?: any;
+}

package/templates/create-full/src/components/AccountInfo/components/AccountSidebar/index.tsx

@@ -0,0 +1,171 @@
+import { useState, useRef, useEffect } from "preact/hooks";
+import type { FunctionComponent } from "preact";
+import { cx } from "../../../../utils/cx";
+import {
+  User1SVG,
+  Package1SVG,
+  MapPin1SVG,
+  Star1SVG,
+  SignOut1SVG,
+  CaretDownSVG,
+  CheckSVG,
+} from "../../../../sub-components/icons";
+
+export type NavItem =
+  | "account"
+  | "orders"
+  | "addresses"
+  | "favorites"
+  | "logout";
+
+interface NavItemConfig {
+  id: NavItem;
+  labelKey: keyof Labels;
+  icon: FunctionComponent<{ className?: string }>;
+}
+
+type Labels = Pick<
+  Props,
+  | "accountInfoLabel"
+  | "ordersLabel"
+  | "addressesLabel"
+  | "favoritesLabel"
+  | "logoutLabel"
+>;
+
+const NAV_ITEMS: NavItemConfig[] = [
+  { id: "account", labelKey: "accountInfoLabel", icon: User1SVG },
+  { id: "orders", labelKey: "ordersLabel", icon: Package1SVG },
+  { id: "addresses", labelKey: "addressesLabel", icon: MapPin1SVG },
+  { id: "favorites", labelKey: "favoritesLabel", icon: Star1SVG },
+  { id: "logout", labelKey: "logoutLabel", icon: SignOut1SVG },
+];
+
+interface Props {
+  activeItem: NavItem;
+  onNavigate: (item: NavItem) => void;
+  accountInfoLabel: string;
+  ordersLabel: string;
+  addressesLabel: string;
+  favoritesLabel: string;
+  logoutLabel: string;
+}
+
+export default function AccountSidebar({
+  activeItem,
+  onNavigate,
+  ...labels
+}: Props) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const activeConfig = NAV_ITEMS.find((item) => item.id === activeItem);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleItemClick = (id: NavItem) => {
+    setDropdownOpen(false);
+    onNavigate(id);
+  };
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <nav className="kombos-account-sidebar">
+        <ul className="kombos-account-sidebar__list">
+          {NAV_ITEMS.map(({ id, labelKey, icon: Icon }) => {
+            const cls = cx(
+              "kombos-account-sidebar__item text-sm-medium",
+              id === activeItem && "kombos-account-sidebar__item--active",
+              id === "logout" && "kombos-account-sidebar__item--logout",
+            );
+
+            return (
+              <li key={id}>
+                <button
+                  className={cls}
+                  onClick={() => handleItemClick(id)}
+                >
+                  <Icon className="kombos-account-sidebar__icon" />
+                  {labels[labelKey]}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+
+      {/* Mobile dropdown */}
+      <div className="kombos-account-dropdown" ref={dropdownRef}>
+        <div
+          className={cx(
+            "kombos-account-dropdown__box",
+            dropdownOpen && "kombos-account-dropdown__box--open",
+          )}
+        >
+          <button
+            className={cx(
+              "kombos-account-dropdown__trigger text-md-medium",
+              dropdownOpen && "kombos-account-dropdown__trigger--open",
+            )}
+            onClick={() => setDropdownOpen((prev) => !prev)}
+            aria-expanded={dropdownOpen}
+          >
+            <span className="kombos-account-dropdown__trigger-left">
+              {activeConfig && (
+                <activeConfig.icon className="kombos-account-icon" />
+              )}
+              <span>{activeConfig && labels[activeConfig.labelKey]}</span>
+            </span>
+            <CaretDownSVG
+              className={cx(
+                "kombos-account-icon kombos-account-dropdown__caret",
+                dropdownOpen && "kombos-account-dropdown__caret--open",
+              )}
+            />
+          </button>
+
+          {dropdownOpen && (
+            <ul className="kombos-account-dropdown__menu">
+              {NAV_ITEMS.map(({ id, labelKey, icon: Icon }) => {
+                const isActive = id === activeItem;
+
+                return (
+                  <li key={id}>
+                    <button
+                      className={cx(
+                        "kombos-account-dropdown__menu-item",
+                        isActive
+                          ? "kombos-account-dropdown__menu-item--active text-sm-semibold"
+                          : "text-sm-medium",
+                        id === "logout" && "kombos-account-dropdown__menu-item--logout",
+                      )}
+                      onClick={() => handleItemClick(id)}
+                    >
+                      <span className="kombos-account-dropdown__menu-item-left">
+                        <Icon className="kombos-account-icon" />
+                        {labels[labelKey]}
+                      </span>
+                      {isActive && <CheckSVG className="kombos-account-icon" />}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/create-full/src/components/AccountInfo/components/AccountSidebar/styles.css

@@ -0,0 +1,144 @@
+/* ===== AccountSidebar ===== */
+
+/* --- Shared icon --- */
+.kombos-account-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+/* --- Desktop sidebar --- */
+.kombos-account-sidebar {
+  display: none;
+  flex-shrink: 0;
+}
+
+.kombos-account-sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-600);
+  transition: color 0.15s;
+}
+
+.kombos-account-sidebar__item svg {
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
+.kombos-account-sidebar__item:hover {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-account-sidebar__item--active {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-sidebar__item.kombos-account-sidebar__item--logout,
+.kombos-account-sidebar__item.kombos-account-sidebar__item--logout:hover {
+  color: var(--kombos-error);
+}
+
+/* --- Mobile dropdown --- */
+.kombos-account-dropdown {
+  display: block;
+}
+
+.kombos-account-dropdown__box {
+  border: 1px solid var(--kombos-gray-100);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-account-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: none;
+  background: var(--kombos-white);
+  cursor: pointer;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-dropdown__trigger--open {
+  border-bottom: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-account-dropdown__trigger-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-account-dropdown__caret {
+  transition: transform 0.2s;
+}
+
+.kombos-account-dropdown__caret--open {
+  transform: rotate(180deg);
+}
+
+.kombos-account-dropdown__menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: var(--kombos-white);
+}
+
+.kombos-account-dropdown__menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-900);
+  transition: background-color 0.15s;
+}
+
+.kombos-account-dropdown__menu-item:hover {
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-account-dropdown__menu-item--active {
+  background: var(--kombos-gray-50);
+}
+
+.kombos-account-dropdown__menu-item--logout {
+  color: var(--kombos-error);
+}
+
+.kombos-account-dropdown__menu-item-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* --- Responsive --- */
+@media (min-width: 1024px) {
+  .kombos-account-sidebar {
+    display: block;
+    width: fit-content;
+  }
+
+  .kombos-account-dropdown {
+    display: none;
+  }
+}

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

@@ -0,0 +1,91 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  logout,
+  customerStore,
+  waitForCustomerStoreInit,
+  Router,
+  IkasThemePageType,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import AccountSidebar from "./components/AccountSidebar";
+import PageLoader from "../../sub-components/PageLoader";
+import type { NavItem } from "./components/AccountSidebar";
+
+const PAGE_TYPE_MAP: Record<Exclude<NavItem, "logout">, IkasThemePageType> = {
+  account: "ACCOUNT",
+  orders: "ORDERS",
+  addresses: "ADDRESSES",
+  favorites: "FAVORITE_PRODUCTS",
+};
+
+function getActiveTabFromPath(): NavItem {
+  const path = Router.getCurrentPath();
+  if (path.includes("/orders")) return "orders";
+  if (path.includes("/addresses")) return "addresses";
+  if (path.includes("/favorite-products")) return "favorites";
+  return "account";
+}
+
+export function AccountInfo(props: Props) {
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    waitForCustomerStoreInit(customerStore).then(() => {
+      if (!customerStore.customer) {
+        Router.navigateToPage("LOGIN");
+      } else {
+        setIsChecking(false);
+      }
+    });
+  }, []);
+
+  const {
+    accountInfoLabel = "Hesap Bilgilerim",
+    ordersLabel = "Siparislerim",
+    addressesLabel = "Adreslerim",
+    favoritesLabel = "Favorilerim",
+    logoutLabel = "Cikis Yap",
+    components,
+  } = props;
+  const activeTab = getActiveTabFromPath();
+
+  const handleNavigate = async (item: NavItem) => {
+    if (item === "logout") {
+      await logout(customerStore);
+      Router.navigateToPage("INDEX");
+      return;
+    }
+    Router.navigateToPage(PAGE_TYPE_MAP[item]);
+  };
+
+  return (
+    <section className="kombos-account-info">
+      <div className="kombos-account-info__container kombos-container">
+        <AccountSidebar
+          activeItem={activeTab}
+          onNavigate={handleNavigate}
+          accountInfoLabel={accountInfoLabel}
+          ordersLabel={ordersLabel}
+          addressesLabel={addressesLabel}
+          favoritesLabel={favoritesLabel}
+          logoutLabel={logoutLabel}
+        />
+
+        <div className="kombos-account-info__content">
+          {isChecking ? (
+            <PageLoader />
+          ) : (
+            <IkasComponentRenderer
+              id="account-info"
+              components={components}
+              parentProps={props}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default AccountInfo;

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

@@ -0,0 +1,35 @@
+/* ── Account Info Section (Layout) ── */
+.kombos-account-info {
+  width: 100%;
+}
+
+.kombos-account-info__container {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.kombos-account-info__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Tablet (768px+) ── */
+@media (min-width: 768px) {
+  .kombos-account-info__container {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+/* ── Desktop (1024px+) ── */
+@media (min-width: 1024px) {
+  .kombos-account-info__container {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    flex-direction: row;
+    gap: 7.75rem;
+  }
+}

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

@@ -0,0 +1,9 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  accountInfoLabel?: string;
+  ordersLabel?: string;
+  addressesLabel?: string;
+  favoritesLabel?: string;
+  logoutLabel?: string;
+  components?: any;
+}