@ikas/component-cli 0.102.0 → 0.103.0

package/templates/create-full/src/sub-components/Breadcrumb/styles.css

@@ -1,49 +0,0 @@
-/* ===== Breadcrumb Sub-Component ===== */
-.kombos-breadcrumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.kombos-breadcrumb__item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.kombos-breadcrumb__link {
-  color: var(--kombos-gray-500);
-  text-decoration: none;
-}
-
-.kombos-breadcrumb__link:hover {
-  text-decoration: underline;
-}
-
-.kombos-breadcrumb__link-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-}
-
-.kombos-breadcrumb__link--active {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-breadcrumb__current {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-breadcrumb__sep {
-  font-size: 0.75rem;
-  color: var(--kombos-gray-400);
-  display: inline-flex;
-  align-items: center;
-}
-
-.kombos-breadcrumb__sep--xs {
-  font-size: 0.625rem;
-  color: var(--kombos-gray-300);
-}

package/templates/create-full/src/sub-components/BundleMedia/index.tsx

@@ -1,72 +0,0 @@
-import {
-  getProductVariantMainImage,
-  getDefaultSrc,
-  IkasProductVariant,
-} from "@ikas/bp-storefront";
-import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-import { NoProductSVG } from "../icons";
-
-interface Props {
-  variant: IkasProductVariant | null;
-  alt: string;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-  wrapperClassName: string;
-  mediaClassName: string;
-  placeholderClassName: string;
-}
-
-export default function BundleMedia({
-  variant,
-  alt,
-  aspectRatio,
-  objectFit,
-  wrapperClassName,
-  mediaClassName,
-  placeholderClassName,
-}: Props) {
-  const variantImage = variant ? getProductVariantMainImage(variant) : null;
-  const imageSrc = variantImage?.image
-    ? getDefaultSrc(variantImage.image)
-    : null;
-
-  const fitStyle = {
-    objectFit: resolveObjectFit(objectFit) as CSSStyleDeclaration["objectFit"],
-  };
-
-  return (
-    <div
-      className={wrapperClassName}
-      style={{ aspectRatio: resolveAspectRatio(aspectRatio) }}
-    >
-      {imageSrc ? (
-        variantImage?.isVideo ? (
-          <video
-            src={imageSrc}
-            className={mediaClassName}
-            autoPlay
-            loop
-            muted
-            playsInline
-            style={fitStyle}
-          >
-            <track kind="captions" />
-          </video>
-        ) : (
-          <img
-            src={imageSrc}
-            alt={alt}
-            className={mediaClassName}
-            loading="lazy"
-            style={fitStyle}
-          />
-        )
-      ) : (
-        <div className={placeholderClassName}>
-          <NoProductSVG />
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/create-full/src/sub-components/BundleQuantityBox/index.tsx

@@ -1,73 +0,0 @@
-import {
-  IkasBundleProduct,
-  isBundleProductQuantityEditable,
-  setBundleProductQuantity,
-  getSelectedProductVariant,
-  hasProductVariantStock,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { MinusSVG, PlusSVG } from "../icons";
-
-interface Props {
-  bundleProduct: IkasBundleProduct;
-}
-
-const BundleQuantityBox = observer(function BundleQuantityBox({
-  bundleProduct,
-}: Props) {
-  if (!isBundleProductQuantityEditable(bundleProduct)) {
-    return (
-      <span className="kombos-bundle-qty__static text-sm-medium">
-        {bundleProduct.quantity}
-      </span>
-    );
-  }
-
-  const selectedVariant = bundleProduct.product
-    ? getSelectedProductVariant(bundleProduct.product)
-    : null;
-
-  const stock = selectedVariant?.stock ?? 0;
-  const sellIfOutOfStock = selectedVariant?.sellIfOutOfStock ?? false;
-  const hasNoStock = selectedVariant
-    ? !hasProductVariantStock(selectedVariant)
-    : false;
-
-  const canDecrement =
-    bundleProduct.quantity > (bundleProduct.minQuantity ?? 0);
-  const canIncrement =
-    sellIfOutOfStock ||
-    (!hasNoStock && (stock >= 10 || bundleProduct.quantity < stock));
-
-  return (
-    <div className="kombos-bundle-qty">
-      <button
-        type="button"
-        className="kombos-bundle-qty__btn"
-        onClick={() =>
-          setBundleProductQuantity(bundleProduct, bundleProduct.quantity - 1)
-        }
-        disabled={!canDecrement}
-        aria-label="Decrease quantity"
-      >
-        <MinusSVG />
-      </button>
-      <span className="kombos-bundle-qty__value text-sm-medium">
-        {bundleProduct.quantity}
-      </span>
-      <button
-        type="button"
-        className="kombos-bundle-qty__btn"
-        onClick={() =>
-          setBundleProductQuantity(bundleProduct, bundleProduct.quantity + 1)
-        }
-        disabled={!canIncrement}
-        aria-label="Increase quantity"
-      >
-        <PlusSVG />
-      </button>
-    </div>
-  );
-});
-
-export default BundleQuantityBox;

package/templates/create-full/src/sub-components/BundleQuantityBox/styles.css

@@ -1,43 +0,0 @@
-/* ===== BundleQuantityBox ===== */
-.kombos-bundle-qty {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  padding: 0.125rem;
-}
-
-.kombos-bundle-qty__btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--kombos-gray-700);
-  font-size: 0.875rem;
-  border-radius: 4px;
-  transition: background-color 0.15s ease;
-}
-
-.kombos-bundle-qty__btn:hover:not(:disabled) {
-  background-color: var(--kombos-gray-50);
-}
-
-.kombos-bundle-qty__btn:disabled {
-  color: var(--kombos-gray-300);
-  cursor: not-allowed;
-}
-
-.kombos-bundle-qty__value {
-  min-width: 1.5rem;
-  text-align: center;
-  color: var(--kombos-gray-900);
-}
-
-.kombos-bundle-qty__static {
-  color: var(--kombos-gray-700);
-}

package/templates/create-full/src/sub-components/Button/index.tsx

@@ -1,52 +0,0 @@
-import type { ButtonHTMLAttributes, ComponentChildren } from "preact";
-import { SpinnerSVG } from "../icons";
-import { cx } from "../../utils/cx";
-
-type Variant = "primary" | "secondary" | "dangerous";
-type Size = "xs" | "s" | "m";
-
-export interface ButtonProps extends Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "size" | "icon" | "loading"
-> {
-  variant?: Variant;
-  size?: Size;
-  icon?: ComponentChildren;
-  loading?: boolean;
-}
-
-const TYPOGRAPHY: Record<Size, string> = {
-  xs: "text-sm-semibold",
-  s: "text-md-semibold",
-  m: "text-lg-semibold",
-};
-
-export default function Button({
-  variant = "primary",
-  size = "s",
-  icon,
-  loading,
-  className,
-  children,
-  disabled,
-  ...rest
-}: ButtonProps) {
-  const cls = cx(
-    "kombos-btn",
-    `kombos-btn--${variant}`,
-    `kombos-btn--${size}`,
-    TYPOGRAPHY[size],
-    className,
-  );
-
-  return (
-    <button className={cls} disabled={loading || disabled} {...rest}>
-      {loading ? (
-        <SpinnerSVG className="kombos-btn__spinner" />
-      ) : (
-        icon && <span className="kombos-btn__icon">{icon}</span>
-      )}
-      {children}
-    </button>
-  );
-}

package/templates/create-full/src/sub-components/Button/styles.css

@@ -1,114 +0,0 @@
-/* ===== Button ===== */
-
-/* --- Base --- */
-.kombos-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  gap: 0.5rem;
-  cursor: pointer;
-  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
-}
-
-.kombos-btn:disabled {
-  cursor: not-allowed;
-}
-
-/* --- Spinner --- */
-.kombos-btn__spinner {
-  animation: kombos-spin 1s linear infinite;
-}
-
-@keyframes kombos-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* --- Icon --- */
-.kombos-btn__icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.kombos-btn--xs .kombos-btn__icon {
-  font-size: 1rem;
-}
-
-.kombos-btn--s .kombos-btn__icon {
-  font-size: 1.25rem;
-}
-
-.kombos-btn--m .kombos-btn__icon {
-  font-size: 1.5rem;
-}
-
-/* --- Sizes --- */
-.kombos-btn--xs {
-  padding: 0.4375rem 0.9375rem;
-  min-height: 2.25rem;
-}
-
-.kombos-btn--s {
-  padding: 0.5625rem 1.1875rem;
-  min-height: 2.75rem;
-}
-
-.kombos-btn--m {
-  padding: 0.6875rem 1.4375rem;
-  min-height: 3.375rem;
-}
-
-/* --- Primary --- */
-.kombos-btn--primary {
-  background-color: var(--kombos-gray-900);
-  border-color: var(--kombos-gray-900);
-  color: var(--kombos-white);
-}
-
-.kombos-btn--primary:hover:not(:disabled) {
-  opacity: 0.85;
-}
-
-.kombos-btn--primary:disabled {
-  background-color: var(--kombos-gray-300);
-  border-color: var(--kombos-gray-300);
-  color: var(--kombos-gray-50);
-}
-
-/* --- Secondary --- */
-.kombos-btn--secondary {
-  background-color: var(--kombos-white);
-  border-color: var(--kombos-gray-200);
-  color: var(--kombos-gray-900);
-}
-
-.kombos-btn--secondary:hover:not(:disabled) {
-  border-color: var(--kombos-gray-300);
-}
-
-.kombos-btn--secondary:disabled {
-  background-color: var(--kombos-gray-50);
-  border-color: var(--kombos-gray-200);
-  color: var(--kombos-gray-300);
-}
-
-/* --- Dangerous --- */
-.kombos-btn--dangerous {
-  background-color: var(--kombos-error);
-  border-color: var(--kombos-error);
-  color: var(--kombos-white);
-}
-
-.kombos-btn--dangerous:hover:not(:disabled) {
-  background-color: var(--kombos-error-hover);
-  border-color: var(--kombos-error-hover);
-}
-
-.kombos-btn--dangerous:disabled {
-  background-color: var(--kombos-gray-300);
-  border-color: var(--kombos-gray-300);
-  color: var(--kombos-gray-50);
-}

package/templates/create-full/src/sub-components/CartItem/components/BundleProductItem/index.tsx

@@ -1,59 +0,0 @@
-import {
-  IkasOrderLineVariantBundleProduct,
-  getIkasOrderLineBundleVariantMainImage,
-  getDefaultSrc,
-  createMediaSrcset,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { resolveAspectRatio, resolveObjectFit } from "../../../../utils/media";
-import type { AspectRatio, ObjectFit } from "../../../../global-types";
-
-interface Props {
-  bundleProduct: IkasOrderLineVariantBundleProduct;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}
-
-const BundleProductItem = observer(function BundleProductItem({
-  bundleProduct,
-  aspectRatio,
-  objectFit,
-}: Props) {
-  const { variant, quantity } = bundleProduct;
-  const image = getIkasOrderLineBundleVariantMainImage(variant);
-  const variantValues = variant.variantValues ?? [];
-
-  const mediaStyle: Record<string, string> = {
-    aspectRatio: resolveAspectRatio(aspectRatio),
-    objectFit: resolveObjectFit(objectFit),
-  };
-
-  return (
-    <div className="kombos-cart-item__bundle">
-      {image && (
-        <img
-          src={getDefaultSrc(image)}
-          srcSet={createMediaSrcset(image)}
-          sizes="32px"
-          alt={variant.name}
-          className="kombos-cart-item__bundle-img"
-          style={mediaStyle}
-        />
-      )}
-      <div className="kombos-cart-item__bundle-info">
-        <span className="text-xs-regular">
-          {quantity} × {variant.name}
-        </span>
-        {variantValues.length > 0 && (
-          <span className="kombos-cart-item__bundle-variants text-xs-regular">
-            {variantValues
-              .map((vv) => `${vv.variantTypeName}: ${vv.variantValueName}`)
-              .join(", ")}
-          </span>
-        )}
-      </div>
-    </div>
-  );
-});
-
-export default BundleProductItem;

package/templates/create-full/src/sub-components/CartItem/components/BundleProductItem/styles.css

@@ -1,24 +0,0 @@
-.kombos-cart-item__bundle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.kombos-cart-item__bundle-img {
-  width: 2rem;
-  border-radius: 4px;
-  border: 1px solid var(--kombos-gray-100);
-  background: var(--kombos-gray-100);
-  flex-shrink: 0;
-}
-
-.kombos-cart-item__bundle-info {
-  display: flex;
-  flex-direction: column;
-  color: var(--kombos-gray-700);
-  min-width: 0;
-}
-
-.kombos-cart-item__bundle-variants {
-  color: var(--kombos-gray-500);
-}

package/templates/create-full/src/sub-components/CartItem/components/BundleProducts/index.tsx

@@ -1,55 +0,0 @@
-import { IkasOrderLineItem, editOrderLineItem } from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import type { AspectRatio, ObjectFit } from "../../../../global-types";
-
-import BundleProductItem from "../BundleProductItem";
-import { PencilSVG } from "../../../icons";
-
-interface Props {
-  item: IkasOrderLineItem;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-  editButtonText?: string;
-}
-
-const BundleProducts = observer(function BundleProducts({
-  item,
-  aspectRatio,
-  objectFit,
-  editButtonText = "Düzenle",
-}: Props) {
-  const bundleProducts = (item.variant?.bundleProducts ?? []).filter(
-    (bp) => bp.quantity > 0,
-  );
-
-  if (bundleProducts.length === 0) return null;
-
-  const handleEdit = () => {
-    editOrderLineItem(item);
-  };
-
-  return (
-    <div className="kombos-cart-item__bundles">
-      <div className="kombos-cart-item__bundles-header">
-        <button
-          type="button"
-          className="kombos-cart-item__bundle-edit-btn text-xs-medium"
-          onClick={handleEdit}
-        >
-          <PencilSVG />
-          {editButtonText}
-        </button>
-      </div>
-      {bundleProducts.map((bp) => (
-        <BundleProductItem
-          key={bp.id}
-          bundleProduct={bp}
-          aspectRatio={aspectRatio}
-          objectFit={objectFit}
-        />
-      ))}
-    </div>
-  );
-});
-
-export default BundleProducts;

package/templates/create-full/src/sub-components/CartItem/components/BundleProducts/styles.css

@@ -1,30 +0,0 @@
-/* Bundle Products */
-.kombos-cart-item__bundles {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-  padding-top: 0.25rem;
-  border-top: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-cart-item__bundles-header {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.kombos-cart-item__bundle-edit-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--kombos-gray-500);
-  cursor: pointer;
-}
-
-.kombos-cart-item__bundle-edit-btn:hover {
-  color: var(--kombos-gray-700);
-}

package/templates/create-full/src/sub-components/CartItem/components/ItemOptions/index.tsx

@@ -1,31 +0,0 @@
-import { IkasOrderLineItem } from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-
-import OptionValueDisplay from "../OptionValueDisplay";
-
-interface Props {
-  item: IkasOrderLineItem;
-}
-
-const ItemOptions = observer(function ItemOptions({ item }: Props) {
-  const options = item.options ?? [];
-
-  if (options.length === 0) return null;
-
-  return (
-    <div className="kombos-cart-item__options">
-      {options.map((option, optIdx) =>
-        option.values.map((value, valIdx) => (
-          <OptionValueDisplay
-            key={`${optIdx}-${valIdx}`}
-            item={item}
-            option={option}
-            value={value}
-          />
-        )),
-      )}
-    </div>
-  );
-});
-
-export default ItemOptions;

package/templates/create-full/src/sub-components/CartItem/components/ItemOptions/styles.css

@@ -1,6 +0,0 @@
-/* Options */
-.kombos-cart-item__options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}

package/templates/create-full/src/sub-components/CartItem/components/OptionValueDisplay/index.tsx

@@ -1,79 +0,0 @@
-import {
-  IkasOrderLineItem,
-  IkasOrderLineItemOption,
-  IkasOrderLineItemOptionValue,
-  getOrderLineItemOptionValueFormattedPrice,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-
-interface Props {
-  item: IkasOrderLineItem;
-  option: IkasOrderLineItemOption;
-  value: IkasOrderLineItemOptionValue;
-}
-
-function getFileName(value: string): string {
-  try {
-    const url = new URL(value);
-    const segments = url.pathname.split("/");
-    return decodeURIComponent(segments[segments.length - 1] || "File");
-  } catch {
-    return value || "File";
-  }
-}
-
-const OptionValueDisplay = observer(function OptionValueDisplay({
-  item,
-  option,
-  value,
-}: Props) {
-  const price =
-    (value?.price ?? 0) > 0
-      ? getOrderLineItemOptionValueFormattedPrice(item, value)
-      : "";
-
-  const priceStr = price ? ` (+${price})` : null;
-  const type = option.type as string;
-
-  if (type === "COLOR_PICKER") {
-    return (
-      <span className="kombos-cart-item__option text-xs-regular">
-        {option.name}:
-        <span
-          className="kombos-cart-item__option-color"
-          style={{ backgroundColor: value.value }}
-        />
-        {priceStr}
-      </span>
-    );
-  }
-
-  if (type === "FILE") {
-    return (
-      <span className="kombos-cart-item__option text-xs-regular">
-        {option.name}:{" "}
-        <a
-          href={value.value}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="kombos-cart-item__option-file text-xs-regular"
-        >
-          {getFileName(value.value)}
-        </a>
-        {priceStr}
-      </span>
-    );
-  }
-
-  const displayValue = type === "CHECKBOX" ? null : value.name || value.value;
-
-  return (
-    <span className="kombos-cart-item__option text-xs-regular">
-      {option.name}
-      {displayValue ? `: ${displayValue}` : ""}
-      {priceStr}
-    </span>
-  );
-});
-
-export default OptionValueDisplay;