@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/src/components/AccountOrders/components/OrderCard/index.tsx

@@ -1,122 +0,0 @@
-import {
-  IkasOrder,
-  getIkasOrderFormattedTotalFinalPrice,
-  getIkasOrderDistinctItemCount,
-  getIkasOrderFormattedOrderedAt,
-  getIkasOrderPackageStatusTranslation,
-  getIkasOrderHref,
-  getIkasOrderLineVariantMainImage,
-  getThumbnailSrc,
-  getDefaultSrc,
-} from "@ikas/bp-storefront";
-import Button from "../../../../sub-components/Button";
-import { NoProductSVG } from "../../../../sub-components/icons";
-import { getStatusColor } from "../../../../utils/orderStatus";
-
-const MAX_THUMBS = 4;
-
-interface Props {
-  order: IkasOrder;
-  detailButtonText: string;
-  orderNoText: string;
-  itemsText: string;
-}
-
-export default function OrderCard({
-  order,
-  detailButtonText,
-  orderNoText,
-  itemsText,
-}: Props) {
-  const date = getIkasOrderFormattedOrderedAt(order);
-  const statusLabel = getIkasOrderPackageStatusTranslation(order);
-  const statusColor = getStatusColor(order);
-  const itemCount = getIkasOrderDistinctItemCount(order);
-  const totalPrice = getIkasOrderFormattedTotalFinalPrice(order);
-  const href = getIkasOrderHref(order);
-
-  const thumbs = (order.orderLineItems ?? [])
-    .map((item) => {
-      const image = getIkasOrderLineVariantMainImage(item.variant);
-      return {
-        id: item.id,
-        src: image && !image.isVideo ? getThumbnailSrc(image) : null,
-        videoSrc: image?.isVideo ? getDefaultSrc(image) : null,
-        isVideo: image?.isVideo ?? false,
-        alt: item.variant?.name ?? "",
-      };
-    })
-    .slice(0, MAX_THUMBS);
-
-  return (
-    <div className="kombos-account-orders__card">
-      <div className="kombos-account-orders__card-info">
-        <div className="kombos-account-orders__card-meta">
-          {date && (
-            <span className="kombos-account-orders__card-date text-sm-regular">
-              {date}
-            </span>
-          )}
-          {statusLabel && (
-            <span
-              className="kombos-account-orders__card-status text-sm-medium"
-              style={statusColor ? { color: statusColor } : undefined}
-            >
-              {statusLabel}
-            </span>
-          )}
-          {order.orderNumber && (
-            <span className="kombos-account-orders__card-order-no text-sm-regular">
-              {orderNoText}{" "}
-              <span className="text-sm-medium">{order.orderNumber}</span>
-            </span>
-          )}
-          <span className="kombos-account-orders__card-summary text-sm-regular">
-            <span className="text-sm-medium">{itemCount}</span> {itemsText}
-            {" - "}
-            <span className="text-sm-medium">{totalPrice}</span>
-          </span>
-        </div>
-
-        {thumbs.length > 0 && (
-          <div className="kombos-account-orders__card-thumbs">
-            {thumbs.map((t) => (
-              <div key={t.id} className="kombos-account-orders__thumb">
-                {t.videoSrc ? (
-                  <video
-                    src={t.videoSrc}
-                    className="kombos-account-orders__thumb-video"
-                    muted
-                    loop
-                    autoPlay
-                    playsInline
-                  >
-                    <track kind="captions" />
-                  </video>
-                ) : t.src ? (
-                  <img src={t.src} alt={t.alt} loading="lazy" />
-                ) : (
-                  <div className="kombos-account-orders__thumb-placeholder">
-                    <NoProductSVG />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="kombos-account-orders__card-action">
-        <a
-          href={href}
-          className="kombos-account-orders__detail-link"
-          aria-label={`${detailButtonText} - ${orderNoText} ${order.orderNumber}`}
-        >
-          <Button variant="secondary" size="s" tabIndex={-1} aria-hidden="true">
-            {detailButtonText}
-          </Button>
-        </a>
-      </div>
-    </div>
-  );
-}

package/templates/create-full/src/components/AccountOrders/components/OrderCard/styles.css

@@ -1,114 +0,0 @@
-/* ── Order Card ── */
-
-.kombos-account-orders__card {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  border-top: 1px solid var(--kombos-gray-200);
-  border-bottom: 1px solid var(--kombos-gray-200);
-  padding: 1.5rem 0;
-}
-
-.kombos-account-orders__card + .kombos-account-orders__card {
-  border-top: none;
-}
-
-.kombos-account-orders__card-info {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.kombos-account-orders__card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.kombos-account-orders__card-date {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-account-orders__card-status {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-account-orders__card-order-no {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-account-orders__card-summary {
-  color: var(--kombos-gray-900);
-}
-
-/* ── Thumbnails ── */
-
-.kombos-account-orders__card-thumbs {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-}
-
-.kombos-account-orders__thumb {
-  width: 3.5rem;
-  height: 3.5rem;
-  border-radius: 4px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.kombos-account-orders__thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.kombos-account-orders__thumb-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.kombos-account-orders__thumb-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--kombos-gray-100);
-  color: var(--kombos-gray-300);
-  font-size: 1.5rem;
-}
-
-/* ── Card Action ── */
-
-.kombos-account-orders__card-action {
-  flex-shrink: 0;
-}
-
-.kombos-account-orders__detail-link {
-  text-decoration: none;
-  display: block;
-}
-
-.kombos-account-orders__detail-link button {
-  width: 100%;
-}
-
-/* ── Responsive: Tablet+ ── */
-
-@media (min-width: 768px) {
-  .kombos-account-orders__card {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .kombos-account-orders__thumb {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-
-  .kombos-account-orders__detail-link button {
-    width: auto;
-  }
-}

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

@@ -1,105 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import {
-  customerStore,
-  getOrders,
-  IkasOrder,
-  Router,
-} from "@ikas/bp-storefront";
-import Button from "../../sub-components/Button";
-import PageLoader from "../../sub-components/PageLoader";
-import OrderCard from "./components/OrderCard";
-import { Props } from "./types";
-
-export function AccountOrders({
-  ordersLabel = "My Orders",
-  emptyText = "You don't have any orders yet.",
-  detailButtonText = "View Details",
-  orderNoText = "Order No:",
-  itemsText = "Product",
-  shopButtonText = "Start Shopping",
-  errorText = "An error occurred while loading orders.",
-  retryButtonText = "Try Again",
-}: Props) {
-  const [orders, setOrders] = useState<IkasOrder[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  const controllerRef = useRef<AbortController | null>(null);
-
-  const fetchOrders = useCallback(() => {
-    controllerRef.current?.abort();
-    const controller = new AbortController();
-    controllerRef.current = controller;
-    const { signal } = controller;
-
-    setLoading(true);
-    setError(false);
-
-    (async () => {
-      try {
-        const result = await getOrders(customerStore);
-        if (signal.aborted) return;
-        setOrders(result);
-      } catch {
-        if (signal.aborted) return;
-        setError(true);
-      } finally {
-        if (!signal.aborted) setLoading(false);
-      }
-    })();
-  }, []);
-
-  useEffect(() => {
-    fetchOrders();
-    return () => controllerRef.current?.abort();
-  }, [fetchOrders]);
-
-  const hasOrders = orders.length > 0;
-
-  return (
-    <div className="kombos-account-orders">
-      <h1 className="kombos-account-orders__title text-md-medium">
-        {`${ordersLabel}${hasOrders ? ` (${orders.length})` : ""}`}
-      </h1>
-
-      {loading ? (
-        <PageLoader />
-      ) : error ? (
-        <div className="kombos-account-orders__error">
-          <p className="kombos-account-orders__error-text text-sm-regular">
-            {errorText}
-          </p>
-          <Button variant="primary" size="s" onClick={fetchOrders}>
-            {retryButtonText}
-          </Button>
-        </div>
-      ) : !hasOrders ? (
-        <div className="kombos-account-orders__empty">
-          <p className="kombos-account-orders__empty-text text-sm-regular">
-            {emptyText}
-          </p>
-          <Button
-            variant="primary"
-            size="s"
-            onClick={() => Router.navigate("/")}
-          >
-            {shopButtonText}
-          </Button>
-        </div>
-      ) : (
-        <div className="kombos-account-orders__list">
-          {orders.map((order) => (
-            <OrderCard
-              key={order.id}
-              order={order}
-              detailButtonText={detailButtonText}
-              orderNoText={orderNoText}
-              itemsText={itemsText}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default AccountOrders;

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

@@ -1,36 +0,0 @@
-/* ── Account Orders ── */
-
-.kombos-account-orders {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.kombos-account-orders__title {
-  color: var(--kombos-gray-900);
-}
-
-/* ── Empty / Error State ── */
-
-.kombos-account-orders__empty,
-.kombos-account-orders__error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 3rem 0;
-}
-
-.kombos-account-orders__empty-text,
-.kombos-account-orders__error-text {
-  color: var(--kombos-gray-500);
-  text-align: center;
-}
-
-/* ── Order List ── */
-
-.kombos-account-orders__list {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}

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

@@ -1,11 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  ordersLabel?: string;
-  emptyText?: string;
-  detailButtonText?: string;
-  orderNoText?: string;
-  itemsText?: string;
-  shopButtonText?: string;
-  errorText?: string;
-  retryButtonText?: string;
-}

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

@@ -1,11 +0,0 @@
-import { Props } from "./types";
-
-export function Announcement({ text }: Props) {
-  if (!text) return null;
-
-  return (
-    <span className="kombos-announcement text-sm-medium">{text}</span>
-  );
-}
-
-export default Announcement;

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

@@ -1,4 +0,0 @@
-.kombos-announcement {
-  text-align: center;
-  white-space: nowrap;
-}

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

@@ -1,4 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  text?: string;
-}

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

@@ -1,91 +0,0 @@
-import { useEffect, useCallback, useRef, useState } from "preact/hooks";
-import { Props } from "./types";
-import { IkasComponentRenderer } from "@ikas/bp-storefront";
-
-const SWIPE_THRESHOLD = 50;
-
-export function Announcements(props: Props) {
-  const {
-    bgColor,
-    textColor,
-    items,
-    autoPlay = false,
-    autoPlayInterval = 5000,
-  } = props;
-  const [current, setCurrent] = useState(0);
-  const dragStartX = useRef(0);
-  const isDragging = useRef(false);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const count = items?.length ?? 0;
-
-  const resetAutoPlay = useCallback(() => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (!autoPlay || count <= 1) return;
-    const interval = autoPlayInterval > 0 ? autoPlayInterval : 7000;
-    timerRef.current = setInterval(() => {
-      setCurrent((prev) => (prev + 1) % count);
-    }, interval);
-  }, [autoPlay, autoPlayInterval, count]);
-
-  useEffect(() => {
-    resetAutoPlay();
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, [resetAutoPlay]);
-
-  const handlePointerDown = useCallback((e: PointerEvent) => {
-    isDragging.current = true;
-    dragStartX.current = e.clientX;
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-  }, []);
-
-  const handlePointerUp = useCallback(
-    (e: PointerEvent) => {
-      if (!isDragging.current) return;
-      isDragging.current = false;
-      const diff = dragStartX.current - e.clientX;
-      if (count <= 1) return;
-
-      if (diff > SWIPE_THRESHOLD) {
-        setCurrent((prev) => (prev + 1) % count);
-        resetAutoPlay();
-      } else if (diff < -SWIPE_THRESHOLD) {
-        setCurrent((prev) => (prev - 1 + count) % count);
-        resetAutoPlay();
-      }
-    },
-    [count, resetAutoPlay],
-  );
-
-  return (
-    <div
-      className="kombos-announcements"
-      style={{
-        backgroundColor: bgColor ?? "var(--kombos-gray-900)",
-        color: textColor ?? "var(--kombos-white)",
-      }}
-    >
-      <div
-        className="kombos-announcements__slider"
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
-        onPointerCancel={handlePointerUp}
-      >
-        <div
-          className="kombos-announcements__track"
-          style={{ transform: `translateX(-${current * 100}%)` }}
-        >
-          <IkasComponentRenderer
-            id="announcements"
-            components={items}
-            parentProps={props}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Announcements;

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

@@ -1,46 +0,0 @@
-.kombos-announcements {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  overflow: hidden;
-}
-
-.kombos-announcements__slider {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  cursor: grab;
-  user-select: none;
-  touch-action: pan-y;
-}
-
-.kombos-announcements__slider:active {
-  cursor: grabbing;
-}
-
-.kombos-announcements__track {
-  display: flex;
-  transition: transform 0.4s ease-in-out;
-}
-
-.kombos-announcements__track > * > * > * {
-  flex: 0 0 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@media (min-width: 768px) {
-  .kombos-announcements {
-    padding: 0.75rem 2rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .kombos-announcements {
-    padding: 0.75rem 4.5rem;
-  }
-}

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

@@ -1,8 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  bgColor?: string;
-  textColor?: string;
-  items?: any;
-  autoPlay?: boolean;
-  autoPlayInterval?: number;
-}

package/templates/create-full/src/components/BlogHome/components/BlogCard/index.tsx

@@ -1,89 +0,0 @@
-import {
-  IkasBlog,
-  getIkasBlogHref,
-  getIkasBlogFormattedDate,
-  getIkasBlogCategoryHref,
-  getDefaultSrc,
-} from "@ikas/bp-storefront";
-import { resolveAspectRatio, resolveObjectFit } from "../../../../utils/media";
-import { getFullName } from "../../../../utils/fullName";
-import { CaretRightSVG } from "../../../../sub-components/icons";
-import type { AspectRatio, ObjectFit } from "../../../../global-types";
-
-interface Props {
-  blog: IkasBlog;
-  readMoreText: string;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}
-
-export default function BlogCard({
-  blog,
-  readMoreText,
-  aspectRatio,
-  objectFit,
-}: Props) {
-  const href = getIkasBlogHref(blog);
-  const imageSrc = blog.image ? getDefaultSrc(blog.image) : "";
-  const writerName = blog.writer
-    ? getFullName(blog.writer.firstName, blog.writer.lastName)
-    : "";
-
-  return (
-    <div className="kombos-blog-card">
-      <a href={href} className="kombos-blog-card__image-link">
-        <div
-          className="kombos-blog-card__image-wrap"
-          style={{ aspectRatio: resolveAspectRatio(aspectRatio) }}
-        >
-          {imageSrc && (
-            <img
-              src={imageSrc}
-              alt={blog.title}
-              className="kombos-blog-card__image"
-              loading="lazy"
-              style={{ objectFit: resolveObjectFit(objectFit) }}
-            />
-          )}
-        </div>
-      </a>
-      <div className="kombos-blog-card__content">
-        {blog.category?.name && (
-          <a
-            href={getIkasBlogCategoryHref(blog.category)}
-            className="kombos-blog-card__category text-xs-semibold"
-          >
-            {blog.category.name}
-          </a>
-        )}
-        <h2 className="kombos-blog-card__title text-md-semibold md:text-lg-semibold">
-          {blog.title}
-        </h2>
-        {blog.shortDescription && (
-          <p className="kombos-blog-card__desc text-sm-regular">
-            {blog.shortDescription}
-          </p>
-        )}
-        <div className="kombos-blog-card__footer">
-          <div className="kombos-blog-card__meta text-xs-regular">
-            <time>{getIkasBlogFormattedDate(blog)}</time>
-            {writerName && (
-              <>
-                <span className="kombos-blog-card__dot">&middot;</span>
-                <span>{writerName}</span>
-              </>
-            )}
-          </div>
-          <a
-            href={href}
-            className="kombos-blog-card__read-more text-sm-semibold"
-            aria-label={`${readMoreText} - ${blog.title}`}
-          >
-            {readMoreText}
-            <CaretRightSVG />
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}