@ikas/component-cli 0.101.0 → 0.103.0

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

@@ -1,20 +0,0 @@
-/* ===== ProductDetailBundleProduct ===== */
-.kombos-bundle {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-bundle__list {
-  display: flex;
-  flex-direction: column;
-}
-
-@media (min-width: 1024px) {
-  .kombos-bundle {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,18 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-
-export interface Props {
-  product?: IkasProduct | null;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  isBundleFurniture?: boolean;
-  bundleProductWithoutLink?: boolean;
-  quantityLabel?: string;
-  outOfStockText?: string;
-  productContentTitle?: string;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}

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

@@ -1,56 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  IkasComponentRenderer,
-} from "@ikas/bp-storefront";
-import CollapsibleGroup from "../../sub-components/CollapsibleGroup";
-import { Props } from "./types";
-
-export function ProductDetailDescription(props: Props) {
-  const {
-    product,
-    title = "Ürün Özellikleri",
-    defaultOpen = false,
-    mobileMarginTop,
-    mobileMarginBottom,
-    desktopMarginTop,
-    desktopMarginBottom,
-    components,
-  } = props;
-  if (!product) return null;
-
-  const hasDescription = !!product?.description;
-  const hasComponents = Array.isArray(components) && components.length > 0;
-
-  if (!hasDescription && !hasComponents) return null;
-
-  return (
-    <div
-      className="kombos-pd-desc"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      {hasDescription && (
-        <CollapsibleGroup title={title} defaultOpen={defaultOpen}>
-          <div
-            className="kombos-pd-desc__body text-sm-regular kombos-richtext"
-            dangerouslySetInnerHTML={{ __html: product.description }}
-          />
-        </CollapsibleGroup>
-      )}
-      {hasComponents && (
-        <IkasComponentRenderer
-          id="product-detail-description"
-          components={components}
-          parentProps={props}
-        />
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailDescription;

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

@@ -1,21 +0,0 @@
-/* ===== ProductDetailDescription ===== */
-
-.kombos-pd-desc {
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-  border-top: 1px solid var(--kombos-gray-200);
-}
-
-.kombos-pd-desc__body {
-  color: var(--kombos-gray-700);
-  max-height: 500px;
-  overflow: auto;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-desc {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,13 +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;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  title?: string;
-  defaultOpen?: boolean;
-  components?: any;
-}

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

@@ -1,28 +0,0 @@
-import { getDefaultSrc } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function ProductDetailFeatureItem({ image, text }: Props) {
-  const imageSrc = image ? getDefaultSrc(image) : null;
-  if (!imageSrc && !text) return null;
-
-  return (
-    <div className="product-detail-feature-item">
-      {imageSrc && (
-        <img
-          className="product-detail-feature-item__icon"
-          src={imageSrc}
-          alt={image?.altText || ""}
-          width={32}
-          height={32}
-        />
-      )}
-      {text && (
-        <p className="product-detail-feature-item__text text-sm-medium">
-          {text}
-        </p>
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailFeatureItem;

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

@@ -1,22 +0,0 @@
-/* ===== ProductDetailFeatureItem ===== */
-
-.product-detail-feature-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-}
-
-.product-detail-feature-item__icon {
-  width: 2rem;
-  height: auto;
-  object-fit: contain;
-}
-
-.product-detail-feature-item__text {
-  color: var(--kombos-gray-900);
-  text-align: center;
-  margin: 0;
-  text-wrap-style: pretty;
-}

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

@@ -1,7 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasImage } from "@ikas/bp-storefront";
-
-export interface Props {
-  image?: IkasImage | null;
-  text?: string;
-}

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

@@ -1,40 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  IkasComponentRenderer,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function ProductDetailFeatures(props: Props) {
-  const {
-    mobileMarginTop,
-    mobileMarginBottom,
-    desktopMarginTop,
-    desktopMarginBottom,
-    components,
-  } = props;
-
-  const count = components?.length ?? 0;
-  if (count === 0) return null;
-
-  return (
-    <div
-      className="kombos-pd-features"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-        "--columns": count,
-      }}
-    >
-      <IkasComponentRenderer
-        id="product-detail-features"
-        components={components}
-        parentProps={props}
-      />
-    </div>
-  );
-}
-
-export default ProductDetailFeatures;

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

@@ -1,17 +0,0 @@
-/* ===== ProductDetailFeatures ===== */
-
-.kombos-pd-features {
-  display: grid;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  gap: 1rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-features {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,10 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  components?: any;
-}

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

@@ -1,66 +0,0 @@
-import {
-  addIkasProductToFavorites,
-  customerStore,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  hasCustomer,
-  isFavoriteIkasProduct,
-  removeIkasProductFromFavorites,
-  Router,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import { Heart2SVG, HeartFilledSVG } from "../../sub-components/icons";
-
-export function ProductDetailNameFavorite({
-  product,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-  hideFavoriteButton,
-}: Props) {
-  if (!product) return null;
-
-  const isFavorite = isFavoriteIkasProduct(product);
-
-  const handleToggleFavorite = async () => {
-    const isLoggedIn = hasCustomer(customerStore);
-
-    if (!isLoggedIn) {
-      Router.navigateToPage("LOGIN");
-      return;
-    }
-
-    if (isFavorite) {
-      await removeIkasProductFromFavorites(product);
-    } else {
-      await addIkasProductToFavorites(product);
-    }
-  };
-
-  return (
-    <div
-      className="kombos-pd-name__row"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <h1 className="kombos-pd-name__title text-xl-medium lg:display-xs-medium">{product.name}</h1>
-      {!hideFavoriteButton && (
-        <button
-          type="button"
-          className="kombos-pd-name__fav-btn"
-          onClick={handleToggleFavorite}
-          aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
-        >
-          {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}
-        </button>
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailNameFavorite;

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

@@ -1,45 +0,0 @@
-/* ===== ProductDetailNameFavorite ===== */
-
-.kombos-pd-name__row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-name__title {
-  flex: 1;
-  margin: 0;
-  color: var(--kombos-gray-900);
-}
-
-.kombos-pd-name__fav-btn {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 1.5rem;
-  color: var(--kombos-gray-700);
-  padding: 0;
-}
-
-.kombos-pd-name__fav-btn:hover {
-  color: var(--kombos-gray-900);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-name__row {
-    gap: 1.5rem;
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-
-}

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

@@ -1,11 +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;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  hideFavoriteButton?: boolean;
-}

package/templates/create-full/src/components/ProductDetailOffer/components/OfferCard/index.tsx

@@ -1,209 +0,0 @@
-import {
-  IkasProductOffer,
-  getSelectedProductVariant,
-  getProductVariantMainImage,
-  getDefaultSrc,
-  getProductVariantFormattedFinalPrice,
-  getProductVariantFormattedSellPrice,
-  hasProductVariantDiscount,
-  hasProductVariantStock,
-  isAcceptedProductOffer,
-  acceptProductOffer,
-  rejectProductOffer,
-  getDisplayedProductVariantTypes,
-  selectVariantValue,
-  getProductHref,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { cx } from "../../../../utils/cx";
-import Toggle from "../../../../sub-components/Toggle";
-import Select from "../../../../sub-components/Select";
-import { CheckCircleSVG, NoProductSVG } from "../../../../sub-components/icons";
-
-interface Props {
-  offer: IkasProductOffer;
-  outOfStockText?: string;
-  addedToCartBannerText?: string;
-  imageAspectRatio?: string;
-  imageObjectFit?: string;
-}
-
-const OfferCard = observer(function OfferCard({
-  offer,
-  outOfStockText = "Tükendi",
-  addedToCartBannerText = "Sepete eklenmiş",
-  imageAspectRatio,
-  imageObjectFit,
-}: Props) {
-  const product = offer.product;
-  if (!product) return null;
-
-  const variant = getSelectedProductVariant(product);
-  const isSelected = offer.isSelected;
-  const isAccepted = isAcceptedProductOffer(offer);
-  const inStock = variant ? hasProductVariantStock(variant) : false;
-
-  const productImage = variant
-    ? getProductVariantMainImage(variant)
-    : undefined;
-  const image = productImage?.image;
-  const imageSrc = image ? getDefaultSrc(image) : undefined;
-
-  const price = getProductVariantFormattedFinalPrice(variant);
-  const hasDiscount = hasProductVariantDiscount(variant);
-  const originalPrice = getProductVariantFormattedSellPrice(variant);
-  const variantTypes = getDisplayedProductVariantTypes(product);
-  const productHref = getProductHref(product);
-
-  function handleToggle(checked: boolean) {
-    if (isAccepted) return;
-
-    if (checked) {
-      acceptProductOffer(offer);
-    } else {
-      rejectProductOffer(offer);
-    }
-  }
-
-  const imageStyle =
-    imageAspectRatio || imageObjectFit
-      ? {
-          ...(imageAspectRatio && { aspectRatio: imageAspectRatio }),
-          ...(imageObjectFit && { objectFit: imageObjectFit }),
-        }
-      : undefined;
-
-  return (
-    <div
-      className={cx(
-        "kombos-offer-card",
-        isSelected && "kombos-offer-card--selected",
-        isAccepted && "kombos-offer-card--accepted",
-        !inStock && "kombos-offer-card--out-of-stock",
-      )}
-    >
-      <div className="kombos-offer-card__content">
-        <a href={productHref} className="kombos-offer-card__link">
-          {image?.isVideo ? (
-            <video
-              src={imageSrc}
-              className="kombos-offer-card__image"
-              style={imageStyle}
-              muted
-              loop
-              autoPlay
-              playsInline
-            >
-              <track kind="captions" />
-            </video>
-          ) : imageSrc ? (
-            <img
-              className="kombos-offer-card__image"
-              src={imageSrc}
-              alt={product.name}
-              loading="lazy"
-              style={imageStyle}
-            />
-          ) : (
-            <div
-              className="kombos-offer-card__image kombos-offer-card__image--placeholder"
-              style={imageStyle}
-            >
-              <NoProductSVG />
-            </div>
-          )}
-        </a>
-
-        <div className="kombos-offer-card__body">
-          <a
-            href={productHref}
-            className="kombos-offer-card__link kombos-offer-card__name text-sm-medium"
-          >
-            {product.name}
-          </a>
-
-          {variantTypes.length > 0 && (
-            <div className="kombos-offer-card__variants">
-              {variantTypes.map((dvt) => {
-                const selected = dvt.displayedVariantValues.find(
-                  (dvv) => dvv.isSelected,
-                );
-                const options = dvt.displayedVariantValues.map((dvv) => ({
-                  label: dvv.variantValue.name,
-                  value: dvv.variantValue.id,
-                }));
-
-                return (
-                  <div
-                    key={dvt.variantType.id}
-                    className="kombos-offer-card__variant-group"
-                  >
-                    <span className="kombos-offer-card__variant-label text-xs-medium">
-                      {dvt.variantType.name}
-                    </span>
-                    <Select
-                      disabled={isAccepted}
-                      size="xs"
-                      options={options}
-                      value={selected?.variantValue.id}
-                      aria-label={dvt.variantType.name}
-                      onChange={(e) => {
-                        const val = (e.target as HTMLSelectElement).value;
-                        const dvv = dvt.displayedVariantValues.find(
-                          (d) => d.variantValue.id === val,
-                        );
-                        if (dvv) {
-                          selectVariantValue(product, dvv.variantValue, true);
-                        }
-                      }}
-                      style={{
-                        maxWidth: 180,
-                      }}
-                    />
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {inStock ? (
-            <div className="kombos-offer-card__prices">
-              <span className="kombos-offer-card__price text-sm-semibold">
-                {price}
-              </span>
-
-              {hasDiscount && (
-                <span className="kombos-offer-card__original-price text-sm-regular-strike">
-                  {originalPrice}
-                </span>
-              )}
-            </div>
-          ) : (
-            <span className="kombos-offer-card__out-of-stock text-xs-medium">
-              {outOfStockText}
-            </span>
-          )}
-        </div>
-
-        <div className="kombos-offer-card__toggle">
-          <Toggle
-            checked={isSelected || isAccepted}
-            onChange={inStock ? handleToggle : undefined}
-            disabled={!inStock || isAccepted}
-          />
-        </div>
-      </div>
-
-      {isAccepted && (
-        <div className="kombos-offer-card__banner">
-          <span className="kombos-offer-card__banner-icon">
-            <CheckCircleSVG />
-          </span>
-          <span className="text-xs-medium">{addedToCartBannerText}</span>
-        </div>
-      )}
-    </div>
-  );
-});
-
-export default OfferCard;