@ikas/component-cli 0.133.0 → 1.1.0

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

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

@@ -1,28 +0,0 @@
-.kombos-cart-item__option {
-  color: var(--kombos-gray-500);
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.kombos-cart-item__option-color {
-  display: inline-block;
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  border: 1px solid var(--kombos-gray-200);
-  flex-shrink: 0;
-}
-
-.kombos-cart-item__option-file {
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--kombos-gray-500);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.kombos-cart-item__option-file:hover {
-  color: var(--kombos-gray-700);
-}

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

@@ -1,216 +0,0 @@
-import { observer } from "@ikas/component-utils";
-import { TrashSVG, NoProductSVG } from "../icons";
-import QuantitySelector from "../QuantitySelector";
-import BundleProducts from "./components/BundleProducts";
-import ItemOptions from "./components/ItemOptions";
-import {
-  getIkasOrderLineVariantMainImage,
-  getIkasOrderLineVariantHref,
-  getOrderLineItemFormattedFinalPriceWithQuantity,
-  getDefaultSrc,
-  createMediaSrcset,
-  changeItemQuantity,
-  IkasOrderLineItem,
-  getOrderLineItemFormattedOverridenPriceWithQuantity,
-  hasOrderLineItemDiscount,
-  getOrderLineItemOverridenPriceWithQuantity,
-} from "@ikas/bp-storefront";
-import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
-import { cx } from "../../utils/cx";
-import type { AspectRatio, ObjectFit } from "../../global-types";
-
-interface CartItemProps {
-  item: IkasOrderLineItem;
-  onRemove: (item: IkasOrderLineItem) => void;
-  variant?: "sidebar" | "page";
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}
-
-const CartItem = observer(function CartItem({
-  item,
-  onRemove,
-  variant = "sidebar",
-  aspectRatio,
-  objectFit,
-}: CartItemProps) {
-  const isPage = variant === "page";
-
-  const mediaStyle: Record<string, string> = {
-    aspectRatio: resolveAspectRatio(aspectRatio),
-    objectFit: resolveObjectFit(objectFit),
-  };
-  const image = item.variant
-    ? getIkasOrderLineVariantMainImage(item.variant)
-    : null;
-  const href = item.variant
-    ? getIkasOrderLineVariantHref(item.variant)
-    : undefined;
-  const overridenPriceWithQuantity =
-    getOrderLineItemOverridenPriceWithQuantity(item);
-  const overridenFormattedPriceWithQuantity =
-    getOrderLineItemFormattedOverridenPriceWithQuantity(item);
-
-  const hasDiscount =
-    hasOrderLineItemDiscount(item) || !!overridenPriceWithQuantity;
-  const variantValues = item.variant?.variantValues ?? [];
-
-  const rootClass = isPage
-    ? "kombos-cart-item kombos-cart-item--page"
-    : "kombos-cart-item";
-  const nameClass = isPage
-    ? "kombos-cart-item__name text-md-semibold"
-    : "kombos-cart-item__name text-sm-regular";
-  const imgSizes = isPage ? "(min-width: 768px) 100px, 80px" : "72px";
-
-  return (
-    <div className={rootClass}>
-      <a href={href} className="kombos-cart-item__img-link">
-        {image?.isVideo ? (
-          <video
-            src={getDefaultSrc(image)}
-            className="kombos-cart-item__img"
-            style={mediaStyle}
-            muted
-            loop
-            autoPlay
-            playsInline
-          >
-            <track kind="captions" />
-          </video>
-        ) : image ? (
-          <img
-            src={getDefaultSrc(image)}
-            srcSet={createMediaSrcset(image)}
-            sizes={imgSizes}
-            alt={item.variant?.name || ""}
-            className="kombos-cart-item__img"
-            style={mediaStyle}
-          />
-        ) : (
-          <div
-            className="kombos-cart-item__img kombos-cart-item__img--placeholder"
-            style={mediaStyle}
-          >
-            <NoProductSVG />
-          </div>
-        )}
-      </a>
-      <div className="kombos-cart-item__details">
-        {isPage ? (
-          <div className="kombos-cart-item__top">
-            <div className="kombos-cart-item__info">
-              <a href={href} className={nameClass}>
-                {item.variant?.name}
-              </a>
-              {variantValues.length > 0 && (
-                <p className="kombos-cart-item__variant-text text-sm-regular">
-                  {variantValues
-                    .map(
-                      (vv) => `${vv.variantTypeName}: ${vv.variantValueName}`,
-                    )
-                    .join(" / ")}
-                </p>
-              )}
-            </div>
-            <button
-              className="kombos-cart-item__remove"
-              onClick={() => onRemove(item)}
-              aria-label="Remove"
-            >
-              <TrashSVG />
-            </button>
-          </div>
-        ) : (
-          <>
-            <a href={href} className={nameClass}>
-              {item.variant?.name}
-            </a>
-
-            {variantValues.length > 0 && (
-              <div className="kombos-cart-item__variants">
-                {variantValues.map((vv, idx) => (
-                  <span
-                    key={idx}
-                    className="kombos-cart-item__variant text-xs-regular"
-                  >
-                    {`${vv.variantTypeName}: ${vv.variantValueName}`}
-                  </span>
-                ))}
-              </div>
-            )}
-          </>
-        )}
-
-        <ItemOptions item={item} />
-        <BundleProducts
-          item={item}
-          aspectRatio={aspectRatio}
-          objectFit={objectFit}
-        />
-
-        {isPage ? (
-          <div className="kombos-cart-item__bottom">
-            <QuantitySelector
-              size="sm"
-              value={item.quantity}
-              onChange={(qty) => changeItemQuantity(item, qty)}
-            />
-            <div className="kombos-cart-item__prices">
-              {hasDiscount && (
-                <span className="kombos-cart-item__original-price text-sm-regular-strike">
-                  {overridenFormattedPriceWithQuantity}
-                </span>
-              )}
-              <span
-                className={cx(
-                  "kombos-cart-item__price",
-                  "text-md-semibold",
-                  hasDiscount && "kombos-cart-item__price--discount",
-                )}
-              >
-                {getOrderLineItemFormattedFinalPriceWithQuantity(item)}
-              </span>
-            </div>
-          </div>
-        ) : (
-          <>
-            <div className="kombos-cart-item__price-row">
-              <span
-                className={cx(
-                  "kombos-cart-item__price",
-                  "text-sm-medium",
-                  hasDiscount && "kombos-cart-item__price--discount",
-                )}
-              >
-                {getOrderLineItemFormattedFinalPriceWithQuantity(item)}
-              </span>
-              {hasDiscount && (
-                <span className="kombos-cart-item__original-price text-sm-regular-strike">
-                  {overridenFormattedPriceWithQuantity}
-                </span>
-              )}
-            </div>
-
-            <div className="kombos-cart-item__actions">
-              <QuantitySelector
-                size="sm"
-                value={item.quantity}
-                onChange={(qty) => changeItemQuantity(item, qty)}
-              />
-              <button
-                className="kombos-cart-item__remove"
-                onClick={() => onRemove(item)}
-                aria-label="Remove"
-              >
-                <TrashSVG />
-              </button>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-});
-
-export default CartItem;

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

@@ -1,170 +0,0 @@
-/* Cart Sidebar Item */
-.kombos-cart-item {
-  display: flex;
-  gap: 0.875rem;
-  padding: 1.5rem 0;
-  border-bottom: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-cart-item:last-child {
-  border-bottom: none;
-}
-
-.kombos-cart-item__img-link {
-  flex-shrink: 0;
-  height: fit-content;
-}
-
-.kombos-cart-item__img {
-  width: 4.5rem;
-  border-radius: 6px;
-  border: 1px solid var(--kombos-gray-100);
-  background: var(--kombos-gray-100);
-}
-
-.kombos-cart-item__img--placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--kombos-gray-300);
-  font-size: 2.5rem;
-}
-
-.kombos-cart-item__details {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-width: 0;
-}
-
-.kombos-cart-item__name {
-  max-width: 100%;
-  color: var(--kombos-gray-900);
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kombos-cart-item__name:hover {
-  text-decoration: underline;
-}
-
-.kombos-cart-item__variants {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.75rem;
-}
-
-.kombos-cart-item__variant {
-  color: var(--kombos-gray-500);
-}
-
-/* Price Row */
-.kombos-cart-item__price-row {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.kombos-cart-item__original-price {
-  color: var(--kombos-gray-400);
-}
-
-.kombos-cart-item__price {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-cart-item__actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 0.5rem;
-}
-
-.kombos-cart-item__remove {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--kombos-gray-300);
-  padding: 0.25rem;
-  display: flex;
-  font-size: 1.25rem;
-  transition: color 0.15s;
-}
-
-.kombos-cart-item__remove:hover {
-  color: var(--kombos-gray-500);
-}
-
-/* Page variant */
-.kombos-cart-item--page {
-  gap: 1rem;
-  padding: 1.25rem 0;
-}
-
-.kombos-cart-item--page:first-child {
-  border-top: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-cart-item--page .kombos-cart-item__img {
-  width: 5rem;
-  background-color: var(--kombos-gray-50);
-}
-
-@media (min-width: 768px) {
-  .kombos-cart-item--page .kombos-cart-item__img {
-    width: 6.25rem;
-  }
-}
-
-.kombos-cart-item--page .kombos-cart-item__details {
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.kombos-cart-item--page .kombos-cart-item__remove {
-  color: var(--kombos-gray-400);
-  font-size: 1.125rem;
-}
-
-.kombos-cart-item--page .kombos-cart-item__remove:hover {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-cart-item__top {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-.kombos-cart-item__info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-width: 0;
-}
-
-.kombos-cart-item__variant-text {
-  color: var(--kombos-gray-500);
-  margin: 0;
-}
-
-.kombos-cart-item__bottom {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.kombos-cart-item__prices {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-

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

@@ -1,42 +0,0 @@
-import { cx } from "../../utils/cx";
-import { CheckSVG } from "../icons";
-
-interface Props {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  status?: "default" | "error" | "success";
-  className?: string;
-  "aria-label"?: string;
-}
-
-export default function Checkbox({
-  checked = false,
-  onChange,
-  status = "default",
-  className,
-  "aria-label": ariaLabel,
-}: Props) {
-  return (
-    <label
-      className={cx("kombos-checkbox", checked && "kombos-checkbox--checked", className)}
-      data-state={status !== "default" ? status : undefined}
-    >
-      <input
-        type="checkbox"
-        className="kombos-checkbox__native"
-        checked={checked}
-        onChange={() => onChange?.(!checked)}
-        aria-label={ariaLabel}
-      />
-      <span
-        className={cx("kombos-checkbox__box", checked && "kombos-checkbox__box--checked")}
-      >
-        {checked && (
-          <span className="kombos-checkbox__icon">
-            <CheckSVG />
-          </span>
-        )}
-      </span>
-    </label>
-  );
-}