@ikas/component-cli 0.101.0 → 0.103.0

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

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

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

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

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

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

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