@ikas/component-cli 0.92.0 → 0.94.0

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

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

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

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

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

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

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

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

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

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

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