@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,75 +0,0 @@
-import { useState, useEffect, useMemo } from "preact/hooks";
-import {
-  getSelectedProductVariant,
-  getBundleProductsOfVariant,
-  initBundleProducts,
-  hasBundleSettings,
-  IkasBundleProduct,
-  IkasProduct,
-  cartStore,
-  waitForCartStoreInit,
-} from "@ikas/bp-storefront";
-import { runInAction } from "mobx";
-import { adjustBundleProductQuantity } from "../utils/bundle";
-
-function adjustBundleQuantities(products: IkasBundleProduct[]) {
-  runInAction(() => {
-    for (const bp of products) {
-      adjustBundleProductQuantity(bp);
-    }
-  });
-}
-
-export function useBundleProducts(product: IkasProduct | null | undefined) {
-  const [isLoading, setIsLoading] = useState(true);
-
-  const editLineID =
-    typeof window !== "undefined"
-      ? new URLSearchParams(window.location.search).get("editLineID")
-      : null;
-
-  const selectedVariant = product ? getSelectedProductVariant(product) : null;
-
-  const hasBundle = selectedVariant
-    ? hasBundleSettings(selectedVariant)
-    : false;
-
-  const bundleSettings = hasBundle ? selectedVariant!.bundleSettings : null;
-
-  useEffect(() => {
-    if (!product || !selectedVariant || !bundleSettings) return;
-
-    let cancelled = false;
-
-    async function load() {
-      setIsLoading(true);
-
-      try {
-        if (editLineID) await waitForCartStoreInit(cartStore);
-
-        await getBundleProductsOfVariant(product!, selectedVariant!);
-        await initBundleProducts(product!);
-
-        if (!cancelled && bundleSettings) {
-          adjustBundleQuantities(bundleSettings.products);
-        }
-      } finally {
-        if (!cancelled) setIsLoading(false);
-      }
-    }
-
-    load();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedVariant, editLineID]);
-
-  const sortedProducts = useMemo(() => {
-    if (!bundleSettings) return [];
-
-    return [...bundleSettings.products].sort((a, b) => a.order - b.order);
-  }, [bundleSettings?.products]);
-
-  return { isLoading, selectedVariant, bundleSettings, sortedProducts };
-}

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

@@ -1,26 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-
-const COLUMNS_STORAGE_KEY = "kombos-product-list-columns";
-
-export function useColumnPreference() {
-  const [columns, setColumns] = useState<3 | 4>(4);
-
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem(COLUMNS_STORAGE_KEY);
-      if (stored === "3") setColumns(3);
-    } catch {}
-  }, []);
-
-  const toggleColumns = useCallback(() => {
-    setColumns((prev) => {
-      const next = prev === 4 ? 3 : 4;
-      try {
-        localStorage.setItem(COLUMNS_STORAGE_KEY, String(next));
-      } catch {}
-      return next;
-    });
-  }, []);
-
-  return { columns, toggleColumns };
-}

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,19 +0,0 @@
-import { useEffect } from "preact/hooks";
-import { RefObject } from "preact";
-
-export function useScrollLock(
-  enabled: boolean = true,
-  skipCleanupRef?: RefObject<boolean>,
-) {
-  useEffect(() => {
-    if (!enabled) return;
-    document.body.style.overflow = "hidden";
-    document.documentElement.style.scrollbarGutter = "stable";
-
-    return () => {
-      if (skipCleanupRef?.current) return;
-      document.body.style.overflow = "";
-      document.documentElement.style.scrollbarGutter = "";
-    };
-  }, [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>
-  );
-}