@ikas/component-cli 0.101.0 → 0.103.0

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 = "Anasayfa",
-  } = 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;
-}

package/templates/create-full/src/components/ProductDetailAddToCart/components/PayWithIkas/index.tsx

@@ -1,34 +0,0 @@
-import { IkasProduct } from "@ikas/bp-storefront";
-import { usePayWithIkas } from "../../../../hooks/usePayWithIkas";
-
-interface Props {
-  product: IkasProduct;
-  quantity: number;
-  isEnabled: boolean;
-  payWithIkasUrl: string;
-}
-
-export default function PayWithIkas({
-  product,
-  quantity,
-  isEnabled,
-  payWithIkasUrl,
-}: Props) {
-  const { iframeRef, iframeSrc, iframeHeight } = usePayWithIkas({
-    product,
-    quantity,
-    isEnabled,
-    payWithIkasUrl,
-  });
-
-  return (
-    <iframe
-      ref={iframeRef}
-      className="kombos-pd-atc__ikas-pay"
-      title="Pay with ikas"
-      src={iframeSrc}
-      width="100%"
-      height={iframeHeight}
-    />
-  );
-}

package/templates/create-full/src/components/ProductDetailAddToCart/components/PayWithIkas/styles.css

@@ -1,4 +0,0 @@
-.kombos-pd-atc__ikas-pay {
-  display: block;
-  border: none;
-}

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

@@ -1,146 +0,0 @@
-import {
-  addItemToCart,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  getSelectedProductVariant,
-  hasProductStock,
-  hasProductVariantStock,
-  isAddToCartEnabled,
-  initProductOptionSetValues,
-  IkasBundleSettings,
-  IkasStorefrontConfig,
-} from "@ikas/bp-storefront";
-import { useState } from "preact/hooks";
-import { Props } from "./types";
-import Button from "../../sub-components/Button";
-import QuantitySelector from "../../sub-components/QuantitySelector";
-import PayWithIkas from "./components/PayWithIkas";
-import { isBundleOutOfStock } from "../../utils/bundle";
-import { validateOptionSet } from "../../utils/optionSet";
-import { showToast } from "../../utils/toast";
-
-export function ProductDetailAddToCart({
-  product,
-  addToCartButtonText = "Sepete Ekle",
-  addingToCartText = "Ekleniyor...",
-  outOfStockText = "Tükendi",
-  errorMessage = "Ürün sepete eklenemedi",
-  optionSetErrorMessage = "Lütfen gerekli seçenekleri doldurun",
-  updateCartButtonText = "Güncelle",
-  updatingCartText = "Güncelleniyor...",
-  hideQuantityInput = false,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  const [quantity, setQuantity] = useState(1);
-  const [isAddingToCart, setIsAddingToCart] = useState(false);
-
-  if (!product) return null;
-
-  const editLineID =
-    typeof window !== "undefined"
-      ? new URLSearchParams(window.location.search).get("editLineID")
-      : null;
-  const isEditMode = !!editLineID;
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const bundleSettings = selectedVariant?.bundleSettings as
-    | IkasBundleSettings
-    | undefined;
-  const isBundle = !!bundleSettings;
-
-  const isEnabled = isAddToCartEnabled(product);
-
-  const isOutOfStock = isBundle
-    ? isBundleOutOfStock(bundleSettings) || !isEnabled
-    : !hasProductStock(product) || !hasProductVariantStock(selectedVariant);
-
-  const isDisabled = isOutOfStock || isAddingToCart;
-
-  const payWithIkasUrl = IkasStorefrontConfig.getPayWithIkasUrl();
-  const routing = IkasStorefrontConfig.getCurrentRouting();
-  const showPayWithIkas =
-    !isOutOfStock &&
-    !!payWithIkasUrl &&
-    routing?.locale === "tr" &&
-    routing?.currencyCode === "TRY";
-
-  const handleAddToCart = async () => {
-    if (isDisabled) return;
-
-    if (!validateOptionSet(product.productOptionSet, optionSetErrorMessage))
-      return;
-
-    if (!isAddToCartEnabled(product)) {
-      showToast(errorMessage, "error");
-      return;
-    }
-
-    setIsAddingToCart(true);
-    try {
-      const result = await addItemToCart(selectedVariant, product, quantity);
-
-      if (result.success) {
-        if (product.productOptionSet) {
-          initProductOptionSetValues(product.productOptionSet);
-        }
-        window.dispatchEvent(new CustomEvent("ikas:reset-option-state"));
-        window.dispatchEvent(new CustomEvent("ikas:open-cart-sidebar"));
-      } else {
-        showToast(errorMessage, "error");
-      }
-    } finally {
-      setIsAddingToCart(false);
-    }
-  };
-
-  const getButtonText = () => {
-    if (isEditMode) {
-      if (isAddingToCart) return updatingCartText;
-      if (isOutOfStock) return outOfStockText;
-      return updateCartButtonText;
-    }
-    if (isAddingToCart) return addingToCartText;
-    if (isOutOfStock) return outOfStockText;
-    return addToCartButtonText;
-  };
-
-  return (
-    <div
-      className="kombos-pd-atc"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <div className="kombos-pd-atc__actions">
-        {!hideQuantityInput && !isOutOfStock && (
-          <QuantitySelector value={quantity} onChange={setQuantity} />
-        )}
-        <Button
-          variant="primary"
-          size="s"
-          className="kombos-pd-atc__btn"
-          disabled={isDisabled}
-          onClick={handleAddToCart}
-        >
-          {getButtonText()}
-        </Button>
-      </div>
-      {showPayWithIkas && (
-        <PayWithIkas
-          product={product}
-          quantity={quantity}
-          isEnabled={isEnabled}
-          payWithIkasUrl={payWithIkasUrl!}
-        />
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailAddToCart;

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

@@ -1,27 +0,0 @@
-/* ===== ProductDetailAddToCart ===== */
-
-.kombos-pd-atc {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-atc__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.kombos-pd-atc__btn {
-  flex: 1;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-atc {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,18 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  product?: IkasProduct | null;
-  addToCartButtonText?: string;
-  addingToCartText?: string;
-  outOfStockText?: string;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  hideQuantityInput?: boolean;
-  errorMessage?: string;
-  optionSetErrorMessage?: string;
-  updateCartButtonText?: string;
-  updatingCartText?: string;
-}