@ikas/component-cli 0.133.0 → 1.1.0

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

@@ -1,82 +0,0 @@
-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 = "My Favorites",
-    emptyFavoritesText = "You haven't added any favorites yet.",
-    addToCartText = "Add to Cart",
-    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

@@ -1,52 +0,0 @@
-/* ── 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

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

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

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

@@ -1,91 +0,0 @@
-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 = "My Account",
-    ordersLabel = "My Orders",
-    addressesLabel = "My Addresses",
-    favoritesLabel = "My Favorites",
-    logoutLabel = "Sign Out",
-    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

@@ -1,35 +0,0 @@
-/* ── 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

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