@ikas/component-cli 0.102.0 → 0.103.0

package/templates/create-full/src/hooks/useInfiniteScroll.ts

@@ -1,49 +0,0 @@
-import { useEffect, useRef } from "preact/hooks";
-import {
-  hasProductListNextPage,
-  getProductListNextPage,
-  IkasProductList,
-} from "@ikas/bp-storefront";
-
-interface Options {
-  isEnabled: boolean;
-  productList: IkasProductList | null | undefined;
-}
-
-export function useInfiniteScroll({ isEnabled, productList }: Options) {
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const isLoadingMoreRef = useRef(false);
-
-  useEffect(() => {
-    if (!isEnabled || !sentinelRef.current || !productList) return;
-
-    const sentinel = sentinelRef.current;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (
-          entries[0].isIntersecting &&
-          hasProductListNextPage(productList) &&
-          !isLoadingMoreRef.current
-        ) {
-          isLoadingMoreRef.current = true;
-          getProductListNextPage(productList).finally(() => {
-            isLoadingMoreRef.current = false;
-            setTimeout(() => {
-              if (sentinelRef.current) {
-                observer.unobserve(sentinelRef.current);
-                observer.observe(sentinelRef.current);
-              }
-            }, 200);
-          });
-        }
-      },
-      { rootMargin: "200px" },
-    );
-
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [isEnabled, productList]);
-
-  return { sentinelRef };
-}

package/templates/create-full/src/hooks/usePageTracking.ts

@@ -1,56 +0,0 @@
-import { useEffect, useRef } from "preact/hooks";
-import {
-  setProductListVisiblePage,
-  IkasProductList,
-} from "@ikas/bp-storefront";
-
-interface Options {
-  isEnabled: boolean;
-  productList: IkasProductList | null | undefined;
-  productCount: number;
-}
-
-export function usePageTracking({
-  isEnabled,
-  productList,
-  productCount,
-}: Options) {
-  const gridRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!isEnabled || !gridRef.current || !productList) return;
-
-    const markers =
-      gridRef.current.querySelectorAll<HTMLElement>("[data-page]");
-    if (markers.length === 0) return;
-
-    const visiblePages = new Set<number>();
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          const page = Number((entry.target as HTMLElement).dataset.page);
-          if (entry.isIntersecting) {
-            visiblePages.add(page);
-          } else {
-            visiblePages.delete(page);
-          }
-        }
-
-        if (visiblePages.size > 0) {
-          const currentPage = Math.min(...visiblePages);
-
-          if (currentPage !== productList.infiniteScrollPage) {
-            setProductListVisiblePage(productList, currentPage);
-          }
-        }
-      },
-      { rootMargin: "0px 0px -50% 0px" },
-    );
-
-    markers.forEach((m) => observer.observe(m));
-    return () => observer.disconnect();
-  }, [isEnabled, productList, productCount]);
-
-  return { gridRef };
-}

package/templates/create-full/src/hooks/usePayWithIkas.ts

@@ -1,114 +0,0 @@
-import {
-  cartStore,
-  createPayWithIkasSession,
-  IkasProduct,
-} from "@ikas/bp-storefront";
-import { useEffect, useMemo, useRef } from "preact/hooks";
-
-interface UsePayWithIkasParams {
-  product: IkasProduct;
-  quantity: number;
-  isEnabled: boolean;
-  payWithIkasUrl: string;
-}
-
-export function usePayWithIkas({
-  product,
-  quantity,
-  isEnabled,
-  payWithIkasUrl,
-}: UsePayWithIkasParams) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const quantityRef = useRef(quantity);
-  quantityRef.current = quantity;
-
-  const iframeReady = useRef(false);
-  const isEnabledRef = useRef(isEnabled);
-  isEnabledRef.current = isEnabled;
-
-  const { iframeSrc, iframeHeight, targetOrigin } = useMemo(() => {
-    const url = new URL(payWithIkasUrl);
-    const height =
-      url.searchParams.get("subtextOption") === "true" ? "90px" : "56px";
-    url.searchParams.set("isAddToCartEnabled", isEnabled.toString());
-    return {
-      iframeSrc: url.toString(),
-      iframeHeight: height,
-      targetOrigin: url.origin,
-    };
-  }, [payWithIkasUrl, isEnabled]);
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    let isProcessing = false;
-
-    const handleMessage = async (event: MessageEvent) => {
-      if (event.data.type === "ikas-widget-ready") {
-        if (iframe.contentWindow !== event.source) return;
-
-        iframeReady.current = true;
-        iframe.contentWindow!.postMessage(
-          {
-            type: "ikas-buy-enabled-state-change",
-            isAddToCartEnabled: isEnabledRef.current,
-          },
-          targetOrigin,
-        );
-        return;
-      }
-
-      if (event.data.type === "ikas-buy-click") {
-        if (iframe.contentWindow !== event.source) return;
-        if (isProcessing) return;
-
-        isProcessing = true;
-        try {
-          const result = await createPayWithIkasSession(
-            cartStore,
-            product,
-            quantityRef.current,
-          );
-
-          iframe.contentWindow?.postMessage(
-            { type: "ikas-buy-loading-stop" },
-            targetOrigin,
-          );
-
-          if (!result.success || !result.payUrl) {
-            console.error("Pay with ikas error:", result.error);
-            return;
-          }
-
-          window.location.href = result.payUrl;
-        } catch (error) {
-          console.error("Pay with ikas error:", error);
-        } finally {
-          isProcessing = false;
-        }
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    return () => {
-      iframeReady.current = false;
-      window.removeEventListener("message", handleMessage);
-    };
-  }, [product, targetOrigin]);
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframeReady.current || !iframe?.contentWindow) return;
-    iframe.contentWindow.postMessage(
-      {
-        type: "ikas-buy-enabled-state-change",
-        isAddToCartEnabled: isEnabled,
-      },
-      targetOrigin,
-    );
-  }, [isEnabled, targetOrigin]);
-
-  return { iframeRef, iframeSrc, iframeHeight };
-}

package/templates/create-full/src/hooks/useRedirectIfLoggedIn.ts

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-import {
-  customerStore,
-  waitForCustomerStoreInit,
-  Router,
-} from "@ikas/bp-storefront";
-
-/**
- * Redirects logged-in users to the account page.
- * Returns `true` while the check is in progress (use to hide content and prevent flash).
- * Calls `onGuest` only if the user is not logged in.
- */
-export function useRedirectIfLoggedIn(onGuest: () => void): boolean {
-  const [isChecking, setIsChecking] = useState(true);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    waitForCustomerStoreInit(customerStore).then(() => {
-      if (!isMounted) return;
-      if (customerStore.customer) {
-        Router.navigateToPage("ACCOUNT");
-        return;
-      }
-      onGuest();
-      setIsChecking(false);
-    });
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  return isChecking;
-}

package/templates/create-full/src/hooks/useScrollLock.ts

@@ -1,20 +0,0 @@
-import { useEffect } from "preact/hooks";
-import { RefObject } from "preact";
-
-export function useScrollLock(
-  enabled: boolean = true,
-  skipCleanupRef?: RefObject<boolean>,
-) {
-  useEffect(() => {
-    if (!enabled) return;
-    const scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.overflow = "hidden";
-    document.body.style.paddingRight = `${scrollbarWidth}px`;
-    return () => {
-      if (skipCleanupRef?.current) return;
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    };
-  }, [enabled]);
-}

package/templates/create-full/src/hooks/useToast.ts

@@ -1,27 +0,0 @@
-import { useState, useCallback, useRef } from "preact/hooks";
-
-export const TOAST_LIMIT = 3;
-
-type ToastVariant = "success" | "error";
-
-export type ToastItem = {
-  id: number;
-  message: string;
-  variant: ToastVariant;
-};
-
-export function useToast() {
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-  const idRef = useRef(0);
-
-  const show = useCallback((message: string, variant: ToastVariant) => {
-    const id = ++idRef.current;
-    setToasts((prev) => [...prev, { id, message, variant }]);
-  }, []);
-
-  const dismiss = useCallback((id: number) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  return { toasts, show, dismiss };
-}

package/templates/create-full/src/ikas-component-utils.d.ts

@@ -1,3 +0,0 @@
-declare module "@ikas/component-utils" {
-  export function observer<T extends (props: any) => any>(component: T): T;
-}

package/templates/create-full/src/sub-components/Badge/index.tsx

@@ -1,208 +0,0 @@
-import { ComponentChildren } from "preact";
-import {
-  IkasImage,
-  getDefaultSrc,
-  createMediaSrcset,
-} from "@ikas/bp-storefront";
-import { cx } from "../../utils/cx";
-
-const TYPO_MAP = {
-  xs: "text-xs-medium",
-  s: "text-sm-medium",
-  m: "text-md-medium",
-  l: "text-md-medium",
-} as const;
-
-type Size = "xs" | "s" | "m" | "l";
-
-interface BaseProps {
-  size?: Size;
-  selected?: boolean;
-  outOfStock?: boolean;
-  href?: string;
-  onClick?: () => void;
-  title?: string;
-  "aria-label"?: string;
-}
-
-function StrikeLine() {
-  return <span className="kombos-badge__strike" />;
-}
-
-/* ------------------------------------------------------------------ */
-/*  BadgeImage                                                         */
-/* ------------------------------------------------------------------ */
-
-interface BadgeImageProps extends BaseProps {
-  image: IkasImage;
-  alt: string;
-  sizes?: string;
-  variantImg?: boolean;
-}
-
-export function BadgeImage({
-  image,
-  alt,
-  sizes = "64px",
-  variantImg,
-  size = "s",
-  selected,
-  outOfStock,
-  href,
-  onClick,
-  title,
-  "aria-label": ariaLabel,
-}: BadgeImageProps) {
-  const className = cx(
-    "kombos-badge",
-    "kombos-badge--image",
-    variantImg && "kombos-badge--variant-img",
-    `kombos-badge--${size}`,
-    selected && "kombos-badge--selected",
-    outOfStock && "kombos-badge--nonstock",
-  );
-
-  const content = (
-    <>
-      <img
-        src={getDefaultSrc(image)}
-        srcSet={createMediaSrcset(image)}
-        sizes={sizes}
-        alt={alt}
-        className="kombos-badge__img"
-      />
-      {outOfStock && <StrikeLine />}
-    </>
-  );
-
-  if (href) {
-    return (
-      <a href={href} className={className} title={title} aria-label={ariaLabel}>
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      className={className}
-      onClick={onClick}
-      title={title}
-      aria-label={ariaLabel}
-    >
-      {content}
-    </button>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  BadgeColor                                                         */
-/* ------------------------------------------------------------------ */
-
-interface BadgeColorProps extends BaseProps {
-  colorCode: string;
-}
-
-export function BadgeColor({
-  colorCode,
-  size = "s",
-  selected,
-  outOfStock,
-  href,
-  onClick,
-  title,
-  "aria-label": ariaLabel,
-}: BadgeColorProps) {
-  const className = cx(
-    "kombos-badge",
-    "kombos-badge--color",
-    `kombos-badge--${size}`,
-    selected && "kombos-badge--selected",
-    outOfStock && "kombos-badge--nonstock",
-  );
-
-  const content = outOfStock ? <StrikeLine /> : null;
-
-  if (href) {
-    return (
-      <a
-        href={href}
-        className={className}
-        style={{ backgroundColor: colorCode }}
-        title={title}
-        aria-label={ariaLabel}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      className={className}
-      style={{ backgroundColor: colorCode }}
-      onClick={onClick}
-      title={title}
-      aria-label={ariaLabel}
-    >
-      {content}
-    </button>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  BadgeText                                                          */
-/* ------------------------------------------------------------------ */
-
-interface BadgeTextProps extends BaseProps {
-  children: ComponentChildren;
-}
-
-export function BadgeText({
-  children,
-  size = "s",
-  selected,
-  outOfStock,
-  href,
-  onClick,
-  title,
-  "aria-label": ariaLabel,
-}: BadgeTextProps) {
-  const className = cx(
-    "kombos-badge",
-    "kombos-badge--text",
-    `kombos-badge--${size}`,
-    TYPO_MAP[size],
-    selected && "kombos-badge--selected",
-    outOfStock && "kombos-badge--nonstock",
-  );
-
-  const content = (
-    <>
-      {children}
-      {outOfStock && <StrikeLine />}
-    </>
-  );
-
-  if (href) {
-    return (
-      <a href={href} className={className} title={title} aria-label={ariaLabel}>
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      className={className}
-      onClick={onClick}
-      title={title}
-      aria-label={ariaLabel}
-    >
-      {content}
-    </button>
-  );
-}

package/templates/create-full/src/sub-components/Badge/styles.css

@@ -1,129 +0,0 @@
-/* ===== Badge Primitives ===== */
-
-/* ---- Base badge ---- */
-.kombos-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.25rem;
-  min-width: 2.25rem;
-  cursor: pointer;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  background: var(--kombos-white);
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  /* Reset for <button> */
-  padding: 0;
-  font: inherit;
-  /* Reset for <a> */
-  text-decoration: none;
-  color: inherit;
-  transition: border-color 0.15s ease;
-}
-
-/* ---- Size: xs ---- */
-.kombos-badge--xs {
-  height: 1.75rem;
-  min-width: 1.75rem;
-}
-
-.kombos-badge--xs.kombos-badge--color,
-.kombos-badge--xs.kombos-badge--image {
-  width: 1.75rem;
-}
-
-.kombos-badge--image.kombos-badge--variant-img.kombos-badge--xs {
-  width: 3rem;
-  height: 3rem;
-}
-
-/* ---- Type: text ---- */
-.kombos-badge--text {
-  color: var(--kombos-gray-700);
-  transition: border-color 0.15s ease, color 0.15s ease;
-}
-
-.kombos-badge--xs.kombos-badge--text {
-  padding: 0 0.375rem;
-}
-
-.kombos-badge--s.kombos-badge--text {
-  padding: 0 0.5rem;
-}
-
-.kombos-badge--m.kombos-badge--text,
-.kombos-badge--l.kombos-badge--text {
-  padding: 0 0.75rem;
-}
-
-/* ---- Type: color ---- */
-.kombos-badge--color {
-  width: 2.25rem;
-  padding: 0;
-}
-
-/* ---- Type: image ---- */
-.kombos-badge--image {
-  width: 2.25rem;
-  padding: 0;
-}
-
-.kombos-badge__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  border-radius: 5px;
-}
-
-/* Variant product image (larger) */
-.kombos-badge--image.kombos-badge--variant-img {
-  width: 4rem;
-  height: 4rem;
-}
-
-/* ---- States ---- */
-
-/* Hover (skip disabled buttons and out-of-stock) */
-.kombos-badge:hover:not(:disabled):not(.kombos-badge--nonstock) {
-  border-color: var(--kombos-gray-900);
-}
-
-.kombos-badge--text:hover:not(:disabled):not(.kombos-badge--nonstock) {
-  color: var(--kombos-gray-900);
-}
-
-/* Selected */
-.kombos-badge--selected {
-  border-color: var(--kombos-gray-900);
-}
-
-.kombos-badge--selected.kombos-badge--text {
-  background: var(--kombos-gray-50);
-  color: var(--kombos-gray-900);
-}
-
-/* Out of stock */
-.kombos-badge--nonstock {
-  cursor: not-allowed;
-}
-
-.kombos-badge--nonstock.kombos-badge--text {
-  color: var(--kombos-gray-400);
-}
-
-/* Diagonal strike line */
-.kombos-badge__strike {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(
-    to top left,
-    transparent calc(50% - 0.5px),
-    var(--kombos-gray-500) calc(50% - 0.5px),
-    var(--kombos-gray-500) calc(50% + 0.5px),
-    transparent calc(50% + 0.5px)
-  );
-}

package/templates/create-full/src/sub-components/Breadcrumb/index.tsx

@@ -1,57 +0,0 @@
-import { cx } from "../../utils/cx";
-import { CaretRightSVG } from "../icons";
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-}
-
-interface Props {
-  items: BreadcrumbItem[];
-  size?: "sm" | "xs";
-  className?: string;
-}
-
-export default function Breadcrumb({ items, size = "sm", className }: Props) {
-  if (items.length === 0) return null;
-
-  const typographyClass = size === "xs" ? "text-xs-medium" : "text-sm-medium";
-
-  return (
-    <nav className={cx("kombos-breadcrumb", className)}>
-      {items.map((item, i) => {
-        const isLast = i === items.length - 1;
-        return (
-          <span key={item.href ?? item.label} className="kombos-breadcrumb__item">
-            {item.href ? (
-              <a
-                href={item.href}
-                className={cx("kombos-breadcrumb__link", typographyClass, isLast && "kombos-breadcrumb__link--active")}
-              >
-                {item.label}
-              </a>
-            ) : item.onClick ? (
-              <button
-                type="button"
-                onClick={item.onClick}
-                className={cx("kombos-breadcrumb__link", "kombos-breadcrumb__link-btn", typographyClass)}
-              >
-                {item.label}
-              </button>
-            ) : (
-              <span className={cx("kombos-breadcrumb__current", typographyClass)}>
-                {item.label}
-              </span>
-            )}
-            {!isLast && (
-              <span className={cx("kombos-breadcrumb__sep", size === "xs" && "kombos-breadcrumb__sep--xs")}>
-                <CaretRightSVG />
-              </span>
-            )}
-          </span>
-        );
-      })}
-    </nav>
-  );
-}