@ikas/component-cli 0.133.0 → 1.2.0

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

@@ -1,30 +0,0 @@
-import {
-  getSelectedProductVariant,
-  getProductVariantFormattedFinalPrice,
-  getProductVariantFormattedSellPrice,
-  hasProductVariantDiscount,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function CardProductPrice({ product }: Props) {
-  if (!product) return null;
-
-  const selectedVariant = getSelectedProductVariant(product);
-
-  const hasDiscount = hasProductVariantDiscount(selectedVariant);
-
-  return (
-    <div className="kombos-card-product-price">
-      <span className="kombos-card-product-price__current text-sm-medium sm:text-md-medium md:text-xl-medium">
-        {getProductVariantFormattedFinalPrice(selectedVariant)}
-      </span>
-      {hasDiscount && (
-        <span className="kombos-card-product-price__old text-xs-regular-strike sm:text-sm-regular-strike md:text-md-regular-strike">
-          {getProductVariantFormattedSellPrice(selectedVariant)}
-        </span>
-      )}
-    </div>
-  );
-}
-
-export default CardProductPrice;

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

@@ -1,13 +0,0 @@
-.kombos-card-product-price {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-}
-
-.kombos-card-product-price__current {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-card-product-price__old {
-  color: var(--kombos-gray-500);
-}

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

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

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

@@ -1,10 +0,0 @@
-import { Props } from "./types";
-import VariantBadge from "../../sub-components/VariantBadge";
-
-export function CardProductVariants({ product }: Props) {
-  if (!product) return null;
-
-  return <VariantBadge product={product} size="s" scrollable disableRoute />;
-}
-
-export default CardProductVariants;

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

@@ -1 +0,0 @@
-/* CardProductVariants — styles handled by VariantBadge sub-component */

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

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

package/templates/create-full/src/components/CartPage/components/CouponCode/index.tsx

@@ -1,108 +0,0 @@
-import { useState, useEffect } from "preact/hooks";
-import {
-  customerStore,
-  getCouponCodeForm,
-  initCouponCodeForm,
-  setCouponCodeFormCouponCode,
-  submitCouponCodeForm,
-  removeCouponCodeForm,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Button from "../../../../sub-components/Button";
-import Input from "../../../../sub-components/Input";
-
-interface Props {
-  appliedCoupon?: string | null;
-  toggleText: string;
-  placeholder: string;
-  applyText: string;
-  removeText: string;
-  applyingText: string;
-}
-
-const CouponCode = observer(function CouponCode({
-  appliedCoupon,
-  toggleText,
-  placeholder,
-  applyText,
-  removeText,
-  applyingText,
-}: Props) {
-  const [isOpen, setIsOpen] = useState(false);
-  const couponForm = getCouponCodeForm(customerStore);
-
-  useEffect(() => {
-    initCouponCodeForm(couponForm);
-  }, [couponForm]);
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    await submitCouponCodeForm(couponForm);
-  };
-
-  const handleRemove = async () => {
-    await removeCouponCodeForm(couponForm);
-    setIsOpen(false);
-  };
-
-  if (appliedCoupon) {
-    return (
-      <div className="coupon-code">
-        <div className="coupon-code__applied">
-          <span className="coupon-code__value text-sm-medium">
-            {appliedCoupon}
-          </span>
-          <button
-            type="button"
-            className="coupon-code__remove text-sm-medium"
-            onClick={handleRemove}
-          >
-            {removeText}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="coupon-code">
-      {!isOpen ? (
-        <button
-          type="button"
-          className="coupon-code__toggle text-sm-semibold"
-          onClick={() => setIsOpen(true)}
-        >
-          {toggleText}
-        </button>
-      ) : (
-        <form className="coupon-code__form" onSubmit={handleSubmit}>
-          <Input
-            placeholder={couponForm.couponCode?.placeholder ?? placeholder}
-            value={couponForm.couponCode?.value ?? ""}
-            onInput={(e: Event) =>
-              setCouponCodeFormCouponCode(
-                couponForm,
-                (e.target as HTMLInputElement).value,
-              )
-            }
-            status={couponForm.isFailure ? "error" : undefined}
-          />
-          <Button
-            variant="secondary"
-            size="xs"
-            disabled={couponForm.isSubmitting}
-          >
-            {couponForm.isSubmitting ? applyingText : applyText}
-          </Button>
-        </form>
-      )}
-      {couponForm.isFailure && couponForm.responseMessage && (
-        <p className="coupon-code__error text-xs-regular">
-          {couponForm.responseMessage}
-        </p>
-      )}
-    </div>
-  );
-});
-
-export default CouponCode;

package/templates/create-full/src/components/CartPage/components/CouponCode/styles.css

@@ -1,68 +0,0 @@
-/* CouponCode */
-.coupon-code {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.coupon-code__toggle {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-900);
-  text-decoration: underline;
-  text-align: left;
-}
-
-.coupon-code__toggle:hover {
-  color: var(--kombos-gray-700);
-}
-
-.coupon-code__form {
-  display: flex;
-  gap: 0.5rem;
-  align-items: stretch;
-}
-
-.coupon-code__form > :first-child {
-  flex: 1;
-  min-width: 0;
-}
-
-.coupon-code__form > :last-child {
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.coupon-code__applied {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.625rem 0.875rem;
-  background-color: var(--kombos-gray-50);
-  border-radius: 6px;
-  min-height: 2.75rem;
-}
-
-.coupon-code__value {
-  color: var(--kombos-gray-900);
-}
-
-.coupon-code__remove {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-500);
-  text-decoration: underline;
-}
-
-.coupon-code__remove:hover {
-  color: var(--kombos-gray-700);
-}
-
-.coupon-code__error {
-  color: var(--kombos-error);
-  margin: 0;
-}

package/templates/create-full/src/components/CartPage/components/EmptyState/index.tsx

@@ -1,31 +0,0 @@
-import { Router } from "@ikas/bp-storefront";
-import { Handbag1SVG } from "../../../../sub-components/icons";
-import Button from "../../../../sub-components/Button";
-
-interface Props {
-  emptyCartText: string;
-  continueShoppingText: string;
-}
-
-export default function EmptyState({
-  emptyCartText,
-  continueShoppingText,
-}: Props) {
-  const handleContinueShopping = () => {
-    Router.navigate("/");
-  };
-
-  return (
-    <div className="cart-page__empty">
-      <span className="cart-page__empty-icon">
-        <Handbag1SVG />
-      </span>
-      <p className="cart-page__empty-text text-xl-semibold md:display-xs-semibold">
-        {emptyCartText}
-      </p>
-      <Button variant="primary" size="s" onClick={handleContinueShopping}>
-        {continueShoppingText}
-      </Button>
-    </div>
-  );
-}

package/templates/create-full/src/components/CartPage/components/EmptyState/styles.css

@@ -1,18 +0,0 @@
-/* EmptyState */
-.cart-page__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 5rem 0;
-}
-
-.cart-page__empty-icon {
-  font-size: 3rem;
-  color: var(--kombos-gray-300);
-}
-
-.cart-page__empty-text {
-  color: var(--kombos-gray-700);
-  margin: 0;
-}

package/templates/create-full/src/components/CartPage/components/OrderSummary/index.tsx

@@ -1,106 +0,0 @@
-import {
-  cartStore,
-  IkasCart,
-  getIkasOrderFormattedTotalFinalPrice,
-  getIkasOrderFormattedTotalPrice,
-  getOrderAdjustmentDisplayName,
-  getOrderAdjustmentFormattedAmount,
-  getOrderAdjustmentIsDecrement,
-  getCheckoutUrlFromCartStore,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Button from "../../../../sub-components/Button";
-import CouponCode from "../CouponCode";
-import { cx } from "../../../../utils/cx";
-
-interface Props {
-  cart: IkasCart;
-  title: string;
-  subtotalLabel: string;
-  totalLabel: string;
-  checkoutButtonText: string;
-  couponToggleText: string;
-  couponPlaceholder: string;
-  couponApplyText: string;
-  couponRemoveText: string;
-  couponApplyingText: string;
-}
-
-const OrderSummary = observer(function OrderSummary({
-  cart,
-  title,
-  subtotalLabel,
-  totalLabel,
-  checkoutButtonText,
-  couponToggleText,
-  couponPlaceholder,
-  couponApplyText,
-  couponRemoveText,
-  couponApplyingText,
-}: Props) {
-  const adjustments = cart.orderAdjustments ?? [];
-
-  return (
-    <div className="order-summary">
-      <h2 className="order-summary__title text-md-semibold md:text-lg-semibold">{title}</h2>
-
-      <div className="order-summary__rows">
-        <div className="order-summary__row">
-          <span className="text-md-regular">{subtotalLabel}</span>
-          <span className="text-md-semibold">
-            {getIkasOrderFormattedTotalPrice(cart)}
-          </span>
-        </div>
-
-        {adjustments.map((adj, i) => {
-          const isDecrement = !!getOrderAdjustmentIsDecrement(adj);
-
-          return (
-            <div key={i} className="order-summary__row">
-              <span className="text-sm-regular">
-                {getOrderAdjustmentDisplayName(adj)}
-              </span>
-              <span
-                className={cx(
-                  "order-summary__adjustment-amount text-sm-semibold",
-                  isDecrement && "order-summary__adjustment-amount--discount",
-                )}
-              >
-                {getOrderAdjustmentFormattedAmount(adj)}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="order-summary__divider" />
-
-      <div className="order-summary__row order-summary__total">
-        <span className="text-md-semibold md:text-lg-semibold">{totalLabel}</span>
-        <span className="text-md-semibold md:text-lg-semibold">
-          {getIkasOrderFormattedTotalFinalPrice(cart)}
-        </span>
-      </div>
-
-      <CouponCode
-        appliedCoupon={cart.couponCode}
-        toggleText={couponToggleText}
-        placeholder={couponPlaceholder}
-        applyText={couponApplyText}
-        removeText={couponRemoveText}
-        applyingText={couponApplyingText}
-      />
-
-      <a
-        className="order-summary__checkout-link"
-        href={getCheckoutUrlFromCartStore(cartStore)}
-      >
-        <Button variant="primary" className="order-summary__checkout-btn">
-          {checkoutButtonText}
-        </Button>
-      </a>
-    </div>
-  );
-});
-
-export default OrderSummary;

package/templates/create-full/src/components/CartPage/components/OrderSummary/styles.css

@@ -1,70 +0,0 @@
-/* OrderSummary */
-.order-summary {
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  background-color: var(--kombos-white);
-  min-width: 0;
-}
-
-@media (min-width: 768px) {
-  .order-summary {
-    padding: 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .order-summary {
-    position: sticky;
-    top: 7rem;
-  }
-}
-
-.order-summary__title {
-  margin: 0;
-  color: var(--kombos-gray-900);
-}
-
-.order-summary__rows {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.order-summary__row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--kombos-gray-700);
-}
-
-.order-summary__adjustment-amount {
-  color: var(--kombos-gray-500);
-}
-
-.order-summary__adjustment-amount--discount {
-  color: var(--kombos-error);
-}
-
-.order-summary__divider {
-  height: 1px;
-  background-color: var(--kombos-gray-200);
-}
-
-.order-summary__total {
-  color: var(--kombos-gray-900);
-}
-
-/* Checkout */
-.order-summary__checkout-link {
-  display: block;
-  text-decoration: none;
-}
-
-.order-summary__checkout-btn {
-  display: flex;
-  width: 100%;
-}

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

@@ -1,107 +0,0 @@
-import {
-  cartStore,
-  hasCart,
-  removeItem,
-  getIkasOrderTotalItemCount,
-  IkasOrderLineItem,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import PageLoader from "../../sub-components/PageLoader";
-import CartItem from "../../sub-components/CartItem";
-import OrderSummary from "./components/OrderSummary";
-import EmptyState from "./components/EmptyState";
-
-export function CartPage({
-  title = "Cart",
-  emptyCartText = "Your cart is empty",
-  subtotalLabel = "Subtotal",
-  totalLabel = "Total",
-  checkoutButtonText = "Complete Order",
-  itemsText = "product",
-  couponToggleText = "Use Gift Code!",
-  couponPlaceholder = "Enter coupon code",
-  couponApplyText = "Apply",
-  couponRemoveText = "Remove",
-  couponApplyingText = "Applying...",
-  orderSummaryTitle = "Order Summary",
-  continueShoppingText = "Start Shopping",
-}: Props) {
-  const cart = cartStore.cart;
-  const isLoading = cartStore.isCartLoading;
-  const cartHasItems = hasCart(cartStore);
-  const lineItems = (cart?.orderLineItems ?? []).filter(
-    (item) => !item?.deleted,
-  );
-  const totalItemCount = cart ? getIkasOrderTotalItemCount(cart) : 0;
-
-  const handleRemove = async (item: IkasOrderLineItem) => {
-    await removeItem(item);
-  };
-
-  if (isLoading) {
-    return <PageLoader />;
-  }
-
-  if (!cartHasItems) {
-    return (
-      <section className="cart-page">
-        <div className="kombos-container cart-page__container">
-          <header className="cart-page__header">
-            <h1 className="cart-page__title text-xl-semibold md:display-xs-semibold">{title}</h1>
-          </header>
-          <EmptyState
-            emptyCartText={emptyCartText}
-            continueShoppingText={continueShoppingText}
-          />
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="cart-page">
-      <div className="kombos-container cart-page__container">
-        <header className="cart-page__header">
-          <h1 className="cart-page__title text-xl-semibold md:display-xs-semibold">
-            {title}{" "}
-            <span className="cart-page__count text-lg-regular">
-              ({totalItemCount} {itemsText})
-            </span>
-          </h1>
-        </header>
-
-        <div className="cart-page__layout">
-          <div className="cart-page__items-col">
-            <div className="cart-page__items">
-              {lineItems.map((item) => (
-                <CartItem
-                  key={item.id}
-                  item={item}
-                  onRemove={handleRemove}
-                  variant="page"
-                />
-              ))}
-            </div>
-          </div>
-
-          {cart && (
-            <OrderSummary
-              cart={cart}
-              title={orderSummaryTitle}
-              subtotalLabel={subtotalLabel}
-              totalLabel={totalLabel}
-              checkoutButtonText={checkoutButtonText}
-              couponToggleText={couponToggleText}
-              couponPlaceholder={couponPlaceholder}
-              couponApplyText={couponApplyText}
-              couponRemoveText={couponRemoveText}
-              couponApplyingText={couponApplyingText}
-            />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export default CartPage;

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

@@ -1,54 +0,0 @@
-/* CartPage */
-.cart-page {
-  width: 100%;
-}
-
-.cart-page__container {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-/* Header */
-.cart-page__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-/* Title */
-.cart-page__title {
-  margin: 0;
-  color: var(--kombos-gray-900);
-}
-
-.cart-page__count {
-  color: var(--kombos-gray-500);
-}
-
-/* Two-column Layout */
-.cart-page__layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 2rem;
-}
-
-@media (min-width: 1024px) {
-  .cart-page__layout {
-    grid-template-columns: minmax(0, 1fr) 22.5rem;
-    gap: 2.5rem;
-    align-items: start;
-  }
-}
-
-/* Cart Items Column */
-.cart-page__items-col {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.cart-page__items {
-  display: flex;
-  flex-direction: column;
-}

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

@@ -1,16 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  emptyCartText?: string;
-  subtotalLabel?: string;
-  totalLabel?: string;
-  checkoutButtonText?: string;
-  itemsText?: string;
-  couponPlaceholder?: string;
-  couponApplyText?: string;
-  couponRemoveText?: string;
-  couponApplyingText?: string;
-  orderSummaryTitle?: string;
-  couponToggleText?: string;
-  continueShoppingText?: string;
-}