@ikas/component-cli 0.93.0 → 0.94.0

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

@@ -0,0 +1,243 @@
+/* ===== Navbar Component ===== */
+.kombos-navbar__inner {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-block: 0.75rem;
+  position: relative;
+  justify-content: space-between;
+  min-height: calc(var(--logo-h-mobile, 3rem) + 1.5rem);
+}
+
+/* Logo */
+.kombos-navbar__logo {
+  flex-shrink: 0;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: var(--logo-h-mobile, 3rem);
+  overflow: hidden;
+}
+
+.kombos-navbar__logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 0.5rem 0;
+}
+
+/* Navigation */
+.kombos-navbar__nav {
+  flex: 1;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+/* NavItem sub-component uses kombos-header__* classes — keep those styles here */
+.kombos-header__nav-item {
+  position: relative;
+}
+
+.kombos-header__nav-link {
+  color: var(--kombos-gray-700);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+}
+
+.kombos-header__nav-link:hover {
+  opacity: 0.7;
+}
+
+.kombos-header__chevron {
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.kombos-header__nav-item:hover .kombos-header__chevron {
+  transform: rotate(180deg);
+}
+
+/* Dropdown */
+.kombos-header__dropdown {
+  display: none;
+  position: absolute;
+  top: calc(100% + 1.125rem);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--kombos-white);
+  border: 1px solid var(--kombos-gray-100);
+  border-radius: 6px;
+  padding: 0.375rem 0;
+  width: 13rem;
+  box-shadow: 0 2px 12px 0.4px rgba(0, 0, 0, 0.06);
+  z-index: var(--kombos-z-dropdown);
+  flex-direction: column;
+}
+
+/* Invisible bridge: covers the 18px gap between nav link and dropdown */
+.kombos-header__dropdown::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: -0.75rem;
+  right: -0.75rem;
+  height: 1.125rem;
+}
+
+.kombos-header__nav-item:hover > .kombos-header__dropdown {
+  display: flex;
+}
+
+/* Nested dropdown (2nd level) */
+.kombos-header__dropdown--nested {
+  top: -0.375rem;
+  left: calc(100% + 0.75rem);
+  transform: none;
+}
+
+/* Bridge: covers the 12px gap between 1st and 2nd level dropdowns */
+.kombos-header__dropdown--nested::before {
+  content: "";
+  position: absolute;
+  top: -0.75rem;
+  bottom: -0.75rem;
+  right: 100%;
+  left: auto;
+  width: 0.75rem;
+  height: auto;
+}
+
+.kombos-header__dropdown-item {
+  position: relative;
+}
+
+.kombos-header__dropdown-item:hover > .kombos-header__dropdown--nested {
+  display: flex;
+}
+
+.kombos-header__dropdown-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  padding: 0.75rem 1rem;
+  transition: background-color 0.15s ease;
+}
+
+.kombos-header__dropdown-link:hover {
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-header__caret-right {
+  flex-shrink: 0;
+  color: var(--kombos-gray-900);
+}
+
+/* Action Icons */
+.kombos-navbar__actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.kombos-navbar__icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  position: relative;
+  transition: opacity 0.2s ease;
+  font-size: 1.25rem;
+}
+
+.kombos-navbar__icon-btn:hover {
+  opacity: 0.6;
+}
+
+.kombos-navbar__badge {
+  position: absolute;
+  top: -0.375rem;
+  right: -0.5rem;
+  background: var(--kombos-badge-bg);
+  color: var(--kombos-white);
+  font-size: 0.625rem;
+  font-weight: 600;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.25rem;
+}
+
+/* Hamburger (mobile only — visible by default) */
+.kombos-navbar__hamburger {
+  display: flex;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-900);
+  transition: opacity 0.2s ease;
+  font-size: 1.375rem;
+}
+
+.kombos-navbar__hamburger:hover {
+  opacity: 0.6;
+}
+
+/* ===== Responsive — Desktop ===== */
+@media (min-width: 1024px) {
+  .kombos-navbar__inner {
+    gap: 2rem;
+    position: static;
+    justify-content: initial;
+    min-height: calc(var(--logo-h-desktop, 3.75rem) + 1.5rem);
+  }
+
+  .kombos-navbar__hamburger {
+    display: none;
+  }
+
+  .kombos-navbar__nav {
+    display: flex;
+  }
+
+  .kombos-navbar__nav--no-logo {
+    justify-content: flex-start;
+  }
+
+  .kombos-navbar__logo {
+    position: static;
+    left: auto;
+    top: auto;
+    transform: none;
+    height: var(--logo-h-desktop, 3.75rem);
+  }
+
+  .kombos-navbar__actions {
+    gap: 1.25rem;
+  }
+}

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

@@ -0,0 +1,37 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasImage, HeightStyleType, IkasNavigationLinkList, IkasProductList } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  logo?: IkasImage | null;
+  logoSizeDesktop?: HeightStyleType;
+  logoSizeMobile?: HeightStyleType;
+  navigationLinks?: IkasNavigationLinkList;
+  navigationLinkColor?: string;
+  coloredLinks?: IkasNavigationLinkList;
+  coloredLinkColor?: string;
+  cartTitle?: string;
+  emptyCartText?: string;
+  checkoutButtonText?: string;
+  totalText?: string;
+  freeShippingText?: string;
+  emptyCartButtonText?: string;
+  registerButtonText?: string;
+  loginButtonText?: string;
+  logoutButtonText?: string;
+  searchProductList?: IkasProductList;
+  hideAddToCartButton?: boolean;
+  searchPlaceholder?: string;
+  searchingText?: string;
+  noResultsText?: string;
+  resultCountText?: string;
+  addToCartText?: string;
+  addedToCartText?: string;
+  outOfStockText?: string;
+  goToProductText?: string;
+  viewAllText?: string;
+  components?: any;
+  imageAspectRatio?: AspectRatio;
+  imageObjectFit?: ObjectFit;
+  viewCartButtonText?: string;
+}

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

@@ -0,0 +1,39 @@
+import { Router } from "@ikas/bp-storefront";
+
+import { Props } from "./types";
+import Button from "../../sub-components/Button";
+
+export function NotFound({ title, description, button }: Props) {
+  return (
+    <section className="not-found">
+      <div className="not-found__wrapper kombos-container">
+        <div className="not-found__content">
+          <h1 className="not-found__title display-sm-semibold">{title}</h1>
+          <p className="not-found__description text-md-regular">
+            {description}
+          </p>
+          {button?.href && button?.label && (
+            <Button
+              variant="primary"
+              size="s"
+              onClick={() =>
+                Router.navigate(
+                  button.href,
+                  false,
+                  button.openInNewTab ?? false,
+                )
+              }
+              style={{
+                minWidth: 200,
+              }}
+            >
+              {button.label}
+            </Button>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default NotFound;

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

@@ -0,0 +1,46 @@
+.not-found {
+  width: 100%;
+}
+
+.not-found__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 50vh;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.not-found__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 1rem;
+  max-width: 29rem;
+  text-wrap-style: pretty;
+}
+
+.not-found__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.not-found__description {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .not-found__wrapper {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .not-found__wrapper {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+}

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

@@ -0,0 +1,8 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasNavigationLink } from "@ikas/bp-storefront";
+
+export interface Props {
+  title?: string;
+  description?: string;
+  button?: IkasNavigationLink | null;
+}

package/templates/create-full/src/components/ProductDetail/components/ProductGallery/index.tsx

@@ -0,0 +1,316 @@
+import {
+  createMediaSrcset,
+  getDefaultSrc,
+  getThumbnailSrc,
+  IkasImage,
+} from "@ikas/bp-storefront";
+import { useRef, useState, useCallback, useEffect, useMemo } from "preact/hooks";
+import { cx } from "../../../../utils/cx";
+import { NoProductSVG, PlaySVG } from "../../../../sub-components/icons";
+import SliderArrow from "../../../../sub-components/SliderArrow";
+import { resolveAspectRatio, resolveObjectFit } from "../../../../utils/media";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+
+const SETTLE_DELAY = 100;
+const DRAG_THRESHOLD_RATIO = 0.15;
+const SNAP_DURATION = 300;
+
+function easeInOutCubic(t: number): number {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+
+interface Props {
+  images: IkasImage[];
+  productName: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+export default function ProductGallery({
+  images,
+  productName,
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const mainWrapRef = useRef<HTMLDivElement>(null);
+  const thumbsRef = useRef<HTMLDivElement>(null);
+  const isProgrammaticRef = useRef(false);
+  const settleTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const isDraggingRef = useRef(false);
+  const dragStartXRef = useRef(0);
+  const dragScrollLeftRef = useRef(0);
+  const animFrameRef = useRef(0);
+
+  const hasMultiple = images.length > 1;
+  const resolvedAR = resolveAspectRatio(aspectRatio);
+  const resolvedOF = resolveObjectFit(objectFit);
+
+  const imageStyle = useMemo(() => ({ objectFit: resolvedOF as CSSStyleDeclaration["objectFit"] }), [resolvedOF]);
+  const thumbStyle = useMemo(() => ({ aspectRatio: resolvedAR }), [resolvedAR]);
+
+  // Sync thumbnail column height with main image
+  useEffect(() => {
+    if (!hasMultiple) return;
+    const syncHeight = () => {
+      const wrap = mainWrapRef.current;
+      const thumbs = thumbsRef.current;
+      if (wrap && thumbs) {
+        thumbs.style.maxHeight = `${wrap.offsetHeight}px`;
+      }
+    };
+    syncHeight();
+    window.addEventListener("resize", syncHeight);
+    return () => window.removeEventListener("resize", syncHeight);
+  }, [hasMultiple, aspectRatio]);
+
+  // Auto-play/pause videos based on selected slide
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const slides = track.children;
+    for (let i = 0; i < slides.length; i++) {
+      const video = slides[i].querySelector("video");
+      if (!video) continue;
+      if (i === selectedIndex) {
+        video.play().catch(() => {});
+      } else {
+        video.pause();
+        video.currentTime = 0;
+      }
+    }
+  }, [selectedIndex]);
+
+  const scrollThumbIntoView = useCallback((index: number) => {
+    const thumb = thumbsRef.current?.children[index] as HTMLElement | undefined;
+    thumb?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, []);
+
+  const smoothScrollTo = useCallback((track: HTMLElement, target: number) => {
+    cancelAnimationFrame(animFrameRef.current);
+    const start = track.scrollLeft;
+    const distance = target - start;
+    if (Math.abs(distance) < 1) {
+      track.scrollLeft = target;
+      track.style.scrollSnapType = "x mandatory";
+      isProgrammaticRef.current = false;
+      return;
+    }
+    const startTime = performance.now();
+    const step = (now: number) => {
+      const elapsed = Math.min((now - startTime) / SNAP_DURATION, 1);
+      track.scrollLeft = start + distance * easeInOutCubic(elapsed);
+      if (elapsed < 1) {
+        animFrameRef.current = requestAnimationFrame(step);
+      } else {
+        track.style.scrollSnapType = "x mandatory";
+        isProgrammaticRef.current = false;
+      }
+    };
+    animFrameRef.current = requestAnimationFrame(step);
+  }, []);
+
+  const goToSlide = useCallback((index: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+    isProgrammaticRef.current = true;
+    clearTimeout(settleTimerRef.current);
+    const slide = track.children[index] as HTMLElement | undefined;
+    if (slide) {
+      track.scrollTo({ left: slide.offsetLeft, behavior: "smooth" });
+    }
+    setSelectedIndex(index);
+    scrollThumbIntoView(index);
+  }, [scrollThumbIntoView]);
+
+  const handlePrev = useCallback(() => {
+    goToSlide(selectedIndex === 0 ? images.length - 1 : selectedIndex - 1);
+  }, [goToSlide, selectedIndex, images.length]);
+
+  const handleNext = useCallback(() => {
+    goToSlide(selectedIndex === images.length - 1 ? 0 : selectedIndex + 1);
+  }, [goToSlide, selectedIndex, images.length]);
+
+  const handleScroll = useCallback(() => {
+    clearTimeout(settleTimerRef.current);
+    if (isProgrammaticRef.current) {
+      settleTimerRef.current = setTimeout(() => {
+        isProgrammaticRef.current = false;
+      }, SETTLE_DELAY);
+      return;
+    }
+    const track = trackRef.current;
+    if (!track) return;
+    const newIndex = Math.round(track.scrollLeft / track.clientWidth);
+    if (newIndex >= 0 && newIndex < images.length) {
+      setSelectedIndex(newIndex);
+    }
+  }, [images.length]);
+
+  const handleMouseDown = useCallback((e: MouseEvent) => {
+    const track = trackRef.current;
+    if (!track) return;
+    cancelAnimationFrame(animFrameRef.current);
+    isDraggingRef.current = true;
+    dragStartXRef.current = e.pageX;
+    dragScrollLeftRef.current = track.scrollLeft;
+    track.style.scrollSnapType = "none";
+    track.style.cursor = "grabbing";
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDraggingRef.current) return;
+    e.preventDefault();
+    const track = trackRef.current;
+    if (!track) return;
+    track.scrollLeft = dragScrollLeftRef.current - (e.pageX - dragStartXRef.current);
+  }, []);
+
+  const handleMouseEnd = useCallback((e: MouseEvent) => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    const track = trackRef.current;
+    if (!track) return;
+    track.style.cursor = "";
+
+    const dragDelta = dragStartXRef.current - e.pageX;
+    const threshold = track.clientWidth * DRAG_THRESHOLD_RATIO;
+    let targetIndex = Math.round(dragScrollLeftRef.current / track.clientWidth);
+    if (dragDelta > threshold) targetIndex++;
+    else if (dragDelta < -threshold) targetIndex--;
+    const clamped = Math.max(0, Math.min(targetIndex, images.length - 1));
+
+    isProgrammaticRef.current = true;
+    setSelectedIndex(clamped);
+    smoothScrollTo(track, track.clientWidth * clamped);
+    scrollThumbIntoView(clamped);
+  }, [images.length, smoothScrollTo, scrollThumbIntoView]);
+
+  return (
+    <div className="kombos-pd__gallery">
+      {hasMultiple && (
+        <div className="kombos-pd__thumbs" ref={thumbsRef}>
+          {images.map((img, i) => (
+            <button
+              key={img.id || i}
+              type="button"
+              className={cx("kombos-pd__thumb", i === selectedIndex && "kombos-pd__thumb--active")}
+              onClick={() => goToSlide(i)}
+              style={thumbStyle}
+            >
+              {img.isVideo ? (
+                <div className="kombos-pd__thumb-video">
+                  <video
+                    src={getDefaultSrc(img)}
+                    className="kombos-pd__thumb-img"
+                    style={imageStyle}
+                    muted
+                    preload="metadata"
+                  >
+                    <track kind="captions" />
+                  </video>
+                  <span className="kombos-pd__thumb-play">
+                    <PlaySVG />
+                  </span>
+                </div>
+              ) : (
+                <img
+                  src={getThumbnailSrc(img)}
+                  srcSet={createMediaSrcset(img)}
+                  sizes="112px"
+                  alt={`${productName} ${i + 1}`}
+                  className="kombos-pd__thumb-img"
+                  style={imageStyle}
+                />
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="kombos-pd__main-col">
+        <div
+          className="kombos-pd__main-image-wrap"
+          ref={mainWrapRef}
+          style={{ aspectRatio: resolvedAR }}
+        >
+          <div
+            className="kombos-pd__track"
+            ref={trackRef}
+            onScroll={handleScroll}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseEnd}
+            onMouseLeave={handleMouseEnd}
+          >
+            {images.length > 0 ? (
+              images.map((img, i) => (
+                <div key={img.id || i} className="kombos-pd__slide">
+                  {img.isVideo ? (
+                    <video
+                      className="kombos-pd__main-image kombos-pd__main-video"
+                      src={getDefaultSrc(img)}
+                      loop
+                      muted
+                      playsInline
+                      style={imageStyle}
+                    >
+                      <track kind="captions" />
+                    </video>
+                  ) : (
+                    <img
+                      className="kombos-pd__main-image"
+                      src={getDefaultSrc(img)}
+                      srcSet={createMediaSrcset(img)}
+                      sizes="(max-width: 1023px) 100vw, min(calc((100vw - 440px) / 2), 530px)"
+                      alt={img?.altText || `${productName} ${i + 1}`}
+                      style={imageStyle}
+                      loading={i === 0 ? "eager" : "lazy"}
+                      fetchpriority={i === 0 ? "high" : undefined}
+                    />
+                  )}
+                </div>
+              ))
+            ) : (
+              <div className="kombos-pd__slide">
+                <div className="kombos-pd__main-image kombos-pd__main-image--placeholder">
+                  <NoProductSVG />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {hasMultiple && (
+            <>
+              <SliderArrow
+                direction="left"
+                className="kombos-pd__arrow kombos-pd__arrow--prev"
+                onClick={handlePrev}
+              />
+              <SliderArrow
+                direction="right"
+                className="kombos-pd__arrow kombos-pd__arrow--next"
+                onClick={handleNext}
+              />
+            </>
+          )}
+
+          {hasMultiple && (
+            <div className="kombos-pd__dots">
+              {images.map((_, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  className={cx("kombos-pd__dot", i === selectedIndex && "kombos-pd__dot--active")}
+                  onClick={() => goToSlide(i)}
+                  aria-label={`${images[i]?.isVideo ? "Video" : "Image"} ${i + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}