@ikas/component-cli 0.92.0 → 0.94.0

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

@@ -0,0 +1,49 @@
+/* ===== 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

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

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

@@ -0,0 +1,43 @@
+/* ===== 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

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

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

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

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

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

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

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

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

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