@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,134 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-import {
-  customerStore,
-  getAccountInfoForm,
-  initAccountInfoForm,
-  setAccountInfoFormFirstName,
-  setAccountInfoFormLastName,
-  setAccountInfoFormPhone,
-  submitAccountInfoForm,
-} from "@ikas/bp-storefront";
-import FormItem from "../../sub-components/FormItem";
-import Input from "../../sub-components/Input";
-import Button from "../../sub-components/Button";
-import SkeletonField from "../../sub-components/SkeletonField";
-import { Props } from "./types";
-
-export function AccountInfoContent({
-  title = "My Account",
-  successMessage = "Your information has been updated.",
-  submitButtonText = "Save",
-  submittingButtonText = "Saving...",
-  emailLabel = "Email",
-}: Props) {
-  const accountForm = getAccountInfoForm(customerStore);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    initAccountInfoForm(accountForm).finally(() => setIsLoading(false));
-  }, []);
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    await submitAccountInfoForm(accountForm);
-  };
-
-  function renderFormField(
-    field: typeof accountForm.firstName,
-    id: string,
-    setter: (form: typeof accountForm, value: string) => void,
-    inputProps?: Record<string, unknown>,
-  ) {
-    if (!field) return null;
-    const status = field.hasError ? "error" : "default";
-    return (
-      <FormItem
-        label={field.label}
-        htmlFor={id}
-        status={status}
-        helper={field.hasError ? field.message : undefined}
-      >
-        <Input
-          id={id}
-          value={field.value ?? ""}
-          onInput={(e: Event) =>
-            setter(accountForm, (e.target as HTMLInputElement).value)
-          }
-          {...inputProps}
-        />
-      </FormItem>
-    );
-  }
-
-  return (
-    <div className="kombos-account-info-content">
-      <h1 className="kombos-account-info-content__title text-md-medium">{title}</h1>
-
-      {accountForm.isSuccess && (
-        <div className="kombos-account-info-content__alert kombos-account-info-content__alert--success text-sm-regular">
-          {successMessage}
-        </div>
-      )}
-      {accountForm.isFailure && accountForm.responseMessage && (
-        <div className="kombos-account-info-content__alert kombos-account-info-content__alert--error text-sm-regular">
-          {accountForm.responseMessage}
-        </div>
-      )}
-
-      {isLoading ? (
-        <div className="kombos-account-info-content__form">
-          <div className="kombos-account-info-content__row">
-            <SkeletonField />
-            <SkeletonField />
-          </div>
-          <div className="kombos-account-info-content__row">
-            <SkeletonField />
-            <SkeletonField />
-          </div>
-        </div>
-      ) : (
-        <form className="kombos-account-info-content__form" onSubmit={handleSubmit}>
-          <div className="kombos-account-info-content__row">
-            {renderFormField(
-              accountForm.firstName,
-              "account-first-name",
-              setAccountInfoFormFirstName,
-            )}
-            {renderFormField(
-              accountForm.lastName,
-              "account-last-name",
-              setAccountInfoFormLastName,
-            )}
-          </div>
-
-          <div className="kombos-account-info-content__row">
-            <FormItem label={emailLabel} htmlFor="account-email">
-              <Input
-                id="account-email"
-                value={customerStore.customer?.email ?? ""}
-                disabled
-              />
-            </FormItem>
-
-            {renderFormField(
-              accountForm.phone,
-              "account-phone",
-              setAccountInfoFormPhone,
-              { type: "tel" },
-            )}
-          </div>
-
-          <Button
-            variant="primary"
-            loading={accountForm.isSubmitting}
-            className="kombos-account-info-content__submit"
-          >
-            {accountForm.isSubmitting ? submittingButtonText : submitButtonText}
-          </Button>
-        </form>
-      )}
-    </div>
-  );
-}
-
-export default AccountInfoContent;

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

@@ -1,57 +0,0 @@
-/* ── Account Info Content ── */
-.kombos-account-info-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.kombos-account-info-content__title {
-  color: var(--kombos-gray-900);
-}
-
-/* ── Alerts ── */
-.kombos-account-info-content__alert {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border-radius: 6px;
-}
-
-.kombos-account-info-content__alert--success {
-  background: rgba(18, 183, 106, 0.08);
-  color: var(--kombos-success);
-}
-
-.kombos-account-info-content__alert--error {
-  background: rgba(255, 60, 72, 0.08);
-  color: var(--kombos-error);
-}
-
-/* ── Form ── */
-.kombos-account-info-content__form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.kombos-account-info-content__row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-}
-
-.kombos-account-info-content__submit {
-  width: fit-content;
-  min-width: 12.5rem;
-  margin-left: auto;
-}
-
-/* ── Tablet (768px+) ── */
-@media (min-width: 768px) {
-  .kombos-account-info-content__row {
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-  }
-}
-

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

@@ -1,8 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  successMessage?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  emailLabel?: string;
-}

package/templates/create-full/src/components/AccountOrderDetail/components/OrderHeader/index.tsx

@@ -1,78 +0,0 @@
-import {
-  IkasOrder,
-  getIkasOrderFormattedOrderedAt,
-  getIkasOrderPackageStatusTranslation,
-} from "@ikas/bp-storefront";
-import { CopySVG } from "../../../../sub-components/icons";
-import { getStatusColor } from "../../../../utils/orderStatus";
-import { showToast } from "../../../../utils/toast";
-
-interface Props {
-  order: IkasOrder;
-  orderNoLabel: string;
-  orderStatusLabel: string;
-  orderDateLabel: string;
-  copiedText: string;
-}
-
-export default function OrderHeader({
-  order,
-  orderNoLabel,
-  orderStatusLabel,
-  orderDateLabel,
-  copiedText,
-}: Props) {
-  const statusLabel = getIkasOrderPackageStatusTranslation(order);
-  const statusColor = getStatusColor(order);
-  const date = getIkasOrderFormattedOrderedAt(order);
-
-  const handleCopy = async () => {
-    if (order.orderNumber) {
-      try {
-        await navigator.clipboard.writeText(order.orderNumber);
-        showToast(copiedText, "success");
-      } catch {
-        // Clipboard API may fail on non-HTTPS or without permissions
-      }
-    }
-  };
-
-  return (
-    <div className="kombos-order-detail-header">
-      <div className="kombos-order-detail-header__info">
-        {order.orderNumber && (
-          <div className="kombos-order-detail-header__row">
-            <span className="text-sm-regular kombos-order-detail-header__label">
-              {orderNoLabel}{" "}
-              <span className="text-sm-medium">{order.orderNumber}</span>
-            </span>
-            <button
-              type="button"
-              className="kombos-order-detail-header__copy"
-              onClick={handleCopy}
-              aria-label="Copy order number"
-            >
-              <CopySVG />
-            </button>
-          </div>
-        )}
-        {statusLabel && (
-          <p className="text-sm-regular kombos-order-detail-header__label">
-            {orderStatusLabel}{" "}
-            <span
-              className="text-sm-medium"
-              style={statusColor ? { color: statusColor } : undefined}
-            >
-              {statusLabel}
-            </span>
-          </p>
-        )}
-        {date && (
-          <p className="text-sm-regular kombos-order-detail-header__label">
-            {orderDateLabel} {date}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

package/templates/create-full/src/components/AccountOrderDetail/components/OrderHeader/styles.css

@@ -1,46 +0,0 @@
-.kombos-order-detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--kombos-gray-100);
-  width: 100%;
-}
-
-.kombos-order-detail-header__info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.kombos-order-detail-header__row {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.kombos-order-detail-header__label {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-order-detail-header__copy {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-500);
-  font-size: 1rem;
-  transition: color 0.15s ease;
-}
-
-.kombos-order-detail-header__copy:hover {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-order-detail-header__copy:focus-visible {
-  outline: 2px solid var(--kombos-gray-900);
-  outline-offset: 2px;
-}

package/templates/create-full/src/components/AccountOrderDetail/components/OrderItemRow/index.tsx

@@ -1,20 +0,0 @@
-import { IkasOrderLineItem } from "@ikas/bp-storefront";
-import OrderLineItemDisplay from "../OrderLineItemDisplay";
-
-interface Props {
-  item: IkasOrderLineItem;
-  quantityLabel: string;
-}
-
-export default function OrderItemRow({ item, quantityLabel }: Props) {
-  return (
-    <div className="kombos-order-detail-item">
-      <div className="kombos-order-detail-item__row">
-        <OrderLineItemDisplay item={item} />
-        <span className="kombos-order-detail-item__qty text-sm-regular">
-          {item.quantity} {quantityLabel}
-        </span>
-      </div>
-    </div>
-  );
-}

package/templates/create-full/src/components/AccountOrderDetail/components/OrderItemRow/styles.css

@@ -1,16 +0,0 @@
-.kombos-order-detail-item {
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--kombos-gray-100);
-}
-
-.kombos-order-detail-item__row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.kombos-order-detail-item__qty {
-  color: var(--kombos-gray-900);
-  white-space: nowrap;
-}

package/templates/create-full/src/components/AccountOrderDetail/components/OrderLineItemDisplay/index.tsx

@@ -1,112 +0,0 @@
-import {
-  IkasOrderLineItem,
-  getIkasOrderLineVariantMainImage,
-  getIkasOrderLineVariantHref,
-  getThumbnailSrc,
-  getDefaultSrc,
-  getOrderLineItemFormattedFinalPriceWithQuantity,
-  getOrderLineItemFormattedPriceWithQuantity,
-  hasOrderLineItemDiscount,
-} from "@ikas/bp-storefront";
-import { NoProductSVG } from "../../../../sub-components/icons";
-
-interface Props {
-  item: IkasOrderLineItem;
-}
-
-export default function OrderLineItemDisplay({ item }: Props) {
-  const image = item.variant
-    ? getIkasOrderLineVariantMainImage(item.variant)
-    : null;
-  const imgSrc = image && !image.isVideo ? getThumbnailSrc(image) : null;
-  const videoSrc = image?.isVideo ? getDefaultSrc(image) : null;
-  const hasDiscount = hasOrderLineItemDiscount(item);
-  const finalPrice = getOrderLineItemFormattedFinalPriceWithQuantity(item);
-  const originalPrice = hasDiscount
-    ? getOrderLineItemFormattedPriceWithQuantity(item)
-    : null;
-
-  const variantValues = item.variant?.variantValues ?? [];
-  const href = item.variant
-    ? getIkasOrderLineVariantHref(item.variant)
-    : undefined;
-
-  const ImageWrap = (
-    <div className="kombos-order-detail-line__img-wrap">
-      {videoSrc ? (
-        <video
-          src={videoSrc}
-          className="kombos-order-detail-line__video"
-          muted
-          loop
-          autoPlay
-          playsInline
-        >
-          <track kind="captions" />
-        </video>
-      ) : imgSrc ? (
-        <img
-          src={imgSrc}
-          alt={item.variant?.name ?? ""}
-          loading="lazy"
-          className="kombos-order-detail-line__img"
-        />
-      ) : (
-        <div className="kombos-order-detail-line__placeholder">
-          <NoProductSVG />
-        </div>
-      )}
-    </div>
-  );
-
-  const Name = (
-    <p className="kombos-order-detail-line__name text-sm-medium">
-      {item.variant?.name}
-    </p>
-  );
-
-  return (
-    <>
-      {href ? (
-        <a href={href} className="kombos-order-detail-line__img-link">
-          {ImageWrap}
-        </a>
-      ) : (
-        ImageWrap
-      )}
-      <div className="kombos-order-detail-line__details">
-        {href ? (
-          <a href={href} className="kombos-order-detail-line__name-link">
-            {Name}
-          </a>
-        ) : (
-          Name
-        )}
-        {variantValues.length > 0 &&
-          variantValues.map((v) => (
-            <div
-              key={v.variantTypeId}
-              className="kombos-order-detail-line__variant"
-            >
-              <span className="kombos-order-detail-line__variant-label text-sm-regular">
-                {v.variantTypeName}:
-              </span>
-              <span className="kombos-order-detail-line__variant-value text-sm-regular">
-                {v.variantValueName}
-              </span>
-            </div>
-          ))}
-        <div className="kombos-order-detail-line__prices">
-          <span className="kombos-order-detail-line__price text-sm-medium">
-            {finalPrice}
-          </span>
-          {originalPrice && (
-            <span className="kombos-order-detail-line__price-old text-sm-regular-strike">
-              {originalPrice}
-            </span>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}

package/templates/create-full/src/components/AccountOrderDetail/components/OrderLineItemDisplay/styles.css

@@ -1,86 +0,0 @@
-.kombos-order-detail-line__img-wrap {
-  width: 4.25rem;
-  height: 4.25rem;
-  min-width: 4.25rem;
-  border-radius: 6px;
-  border: 1px solid var(--kombos-gray-100);
-  overflow: hidden;
-}
-
-.kombos-order-detail-line__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-
-.kombos-order-detail-line__video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-
-.kombos-order-detail-line__placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--kombos-gray-100);
-  color: var(--kombos-gray-300);
-  font-size: 2rem;
-}
-
-.kombos-order-detail-line__details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.kombos-order-detail-line__img-link {
-  display: contents;
-}
-
-.kombos-order-detail-line__name-link {
-  text-decoration: none;
-  color: inherit;
-}
-
-.kombos-order-detail-line__name-link:hover .kombos-order-detail-line__name {
-  text-decoration: underline;
-}
-
-.kombos-order-detail-line__name {
-  color: var(--kombos-gray-900);
-  width: fit-content;
-}
-
-.kombos-order-detail-line__variant {
-  display: flex;
-  gap: 0.375rem;
-}
-
-.kombos-order-detail-line__variant-label {
-  color: var(--kombos-gray-500);
-}
-
-.kombos-order-detail-line__variant-value {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-order-detail-line__prices {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.kombos-order-detail-line__price {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-order-detail-line__price-old {
-  color: var(--kombos-gray-500);
-  text-decoration: line-through;
-}