@ikas/component-cli 0.133.0 → 1.2.0

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>
-  );
-}

package/templates/create-full/src/components/ProductDetail/components/ProductGallery/styles.css

@@ -1,213 +0,0 @@
-/* ---- Gallery ---- */
-.kombos-pd__gallery {
-  display: flex;
-  flex-direction: column;
-}
-
-.kombos-pd__thumbs {
-  display: none;
-}
-
-.kombos-pd__main-col {
-  flex: 1;
-  min-width: 0;
-}
-
-.kombos-pd__main-image-wrap {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.kombos-pd__track {
-  display: flex;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  width: 100%;
-  height: 100%;
-  -webkit-overflow-scrolling: touch;
-  cursor: grab;
-  user-select: none;
-}
-
-.kombos-pd__track::-webkit-scrollbar {
-  display: none;
-}
-
-.kombos-pd__slide {
-  flex: 0 0 100%;
-  width: 100%;
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-}
-
-.kombos-pd__main-image {
-  width: 100%;
-  height: 100%;
-  display: block;
-  -webkit-user-drag: none;
-  user-drag: none;
-  pointer-events: none;
-}
-
-.kombos-pd__main-video {
-  pointer-events: auto;
-  cursor: default;
-}
-
-.kombos-pd__thumb-video {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.kombos-pd__thumb-play {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.55);
-  color: var(--kombos-white);
-  font-size: 0.75rem;
-}
-
-.kombos-pd__main-image--placeholder {
-  border: 1px solid var(--kombos-gray-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  color: var(--kombos-gray-300);
-  font-size: 5rem;
-}
-
-/* Arrow buttons */
-.kombos-pd__arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.kombos-pd__arrow--prev {
-  left: 1.25rem;
-}
-
-.kombos-pd__arrow--next {
-  right: 1.25rem;
-}
-
-/* Dots */
-.kombos-pd__dots {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0;
-}
-
-.kombos-pd__dot {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2.25rem;
-  height: 2.25rem;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.kombos-pd__dot::after {
-  content: "";
-  display: block;
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 10px;
-  border: 1px solid var(--kombos-gray-100);
-  background: var(--kombos-white);
-  transition: all 0.15s;
-}
-
-.kombos-pd__dot--active::after {
-  width: 2rem;
-  background: var(--kombos-gray-900);
-  border-color: var(--kombos-gray-200);
-}
-
-/* ===== Tablet (>=768px) ===== */
-@media (min-width: 768px) {
-  .kombos-pd__gallery {
-    flex-direction: row;
-    gap: 1.25rem;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .kombos-pd__thumbs {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    flex-shrink: 0;
-    width: 7rem;
-    overflow-y: auto;
-    scrollbar-width: none;
-  }
-
-  .kombos-pd__thumbs::-webkit-scrollbar {
-    display: none;
-  }
-
-  .kombos-pd__thumb {
-    width: 7rem;
-    flex-shrink: 0;
-    border-radius: 12px;
-    border: 1px solid var(--kombos-gray-200);
-    overflow: hidden;
-    cursor: pointer;
-    padding: 0.375rem;
-    background: var(--kombos-white);
-    transition: border-color 0.15s;
-  }
-
-  .kombos-pd__thumb:hover {
-    border-color: var(--kombos-gray-500);
-  }
-
-  .kombos-pd__thumb--active {
-    border-color: var(--kombos-gray-900);
-  }
-
-  .kombos-pd__thumb-img {
-    width: 100%;
-    height: 100%;
-    display: block;
-    border-radius: 8px;
-  }
-
-  .kombos-pd__main-col {
-    align-self: flex-start;
-  }
-
-  .kombos-pd__main-image-wrap {
-    border-radius: 6px;
-    overflow: hidden;
-  }
-
-  .kombos-pd__main-image {
-    max-height: 45.75rem;
-    border-radius: 6px;
-  }
-
-}

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

@@ -1,92 +0,0 @@
-import {
-  getIkasCategoryPathItemHref,
-  getProductCategoryPath,
-  getProductVariantMainImage,
-  getSelectedProductVariant,
-  IkasImage,
-  isNotEmpty,
-  IkasComponentRenderer,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import Breadcrumb from "../../sub-components/Breadcrumb";
-import type { BreadcrumbItem } from "../../sub-components/Breadcrumb";
-import ProductGallery from "./components/ProductGallery";
-
-export function ProductDetail(props: Props) {
-  const {
-    product,
-    components,
-    aspectRatio,
-    objectFit,
-    bottomComponents,
-    homepageText = "Home",
-  } = props;
-  if (!product) return null;
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const mainProductImage = getProductVariantMainImage(selectedVariant);
-  const mainImage = mainProductImage?.image;
-  const variantImages = selectedVariant?.images;
-  const images: IkasImage[] = variantImages?.length
-    ? variantImages
-        .map((pi: any) => pi.image)
-        .filter((img: any): img is IkasImage => img != null)
-    : mainImage
-      ? [mainImage]
-      : [];
-
-  const categoryPath = getProductCategoryPath(product);
-
-  return (
-    <section className="kombos-pd">
-      <div className="kombos-container kombos-pd__container">
-        <Breadcrumb
-          items={[
-            { label: homepageText, href: "/" } as BreadcrumbItem,
-            ...(isNotEmpty(categoryPath)
-              ? categoryPath.map(
-                  (pathItem: any) =>
-                    ({
-                      label: pathItem.name,
-                      href: getIkasCategoryPathItemHref(pathItem),
-                    }) as BreadcrumbItem,
-                )
-              : []),
-            { label: product.name } as BreadcrumbItem,
-          ]}
-          size="xs"
-          className="kombos-pd__breadcrumb"
-        />
-
-        <div className="kombos-pd__layout">
-          <ProductGallery
-            images={images}
-            productName={product.name}
-            aspectRatio={aspectRatio}
-            objectFit={objectFit}
-          />
-
-          <div className="kombos-pd__info">
-            <IkasComponentRenderer
-              id="product-detail-info"
-              components={components}
-              parentProps={props}
-            />
-          </div>
-        </div>
-
-        {bottomComponents && (
-          <div className="kombos-pd__bottom">
-            <IkasComponentRenderer
-              id="product-detail-bottom"
-              components={bottomComponents}
-              parentProps={props}
-            />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
-
-export default ProductDetail;

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

@@ -1,58 +0,0 @@
-/* ===== Product Detail Section ===== */
-
-.kombos-pd {
-  width: 100%;
-}
-
-/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */
-.kombos-pd__breadcrumb {
-  padding-top: 1rem;
-}
-
-/* ---- Layout ---- */
-.kombos-pd__layout {
-  display: flex;
-  flex-direction: column;
-  padding-top: 1rem;
-}
-
-/* ---- Product Info ---- */
-.kombos-pd__info {
-  display: flex;
-  flex-direction: column;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd__container {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-
-  .kombos-pd__breadcrumb {
-    padding-top: 0;
-    padding-bottom: 1.5rem;
-  }
-
-  .kombos-pd__layout {
-    display: grid;
-    grid-template-columns: 7fr 5fr;
-    gap: 2rem;
-    padding-top: 0;
-  }
-
-  /* Gallery — sticky on desktop */
-  .kombos-pd__gallery {
-    position: sticky;
-    top: 0.75rem;
-    align-self: start;
-  }
-
-  /* Info — right side */
-  .kombos-pd__info {
-    min-width: 0;
-    padding: 0;
-  }
-}

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

@@ -1,12 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct } from "@ikas/bp-storefront";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-
-export interface Props {
-  product?: IkasProduct | null;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-  components?: any;
-  bottomComponents?: any;
-  homepageText?: string;
-}