@ikas/component-cli 0.93.0 → 0.95.0

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

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

@@ -0,0 +1,114 @@
+/* ── 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

@@ -0,0 +1,105 @@
+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 = "Siparişlerim",
+  emptyText = "Henüz siparişiniz bulunmuyor.",
+  detailButtonText = "Detaya Git",
+  orderNoText = "Sipariş No:",
+  itemsText = "Ürün",
+  shopButtonText = "Alışverişe Başla",
+  errorText = "Siparişler yüklenirken bir hata oluştu.",
+  retryButtonText = "Tekrar Dene",
+}: 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

@@ -0,0 +1,36 @@
+/* ── 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

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

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

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

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

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

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

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

@@ -0,0 +1,45 @@
+.kombos-announcements {
+  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

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

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