@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/mcp.json

@@ -1,10 +0,0 @@
-{
-  "mcpServers": {
-    "ikas-code-components": {
-      "command": "npx",
-      "args": [
-        "ikas-mcp"
-      ]
-    }
-  }
-}

package/templates/create-full/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "version": "1.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "ikas-component dev",
-    "build": "ikas-component build",
-    "publish": "ikas-component publish",
-    "check": "ikas-component check"
-  },
-  "dependencies": {
-    "preact": "^10.19.3"
-  },
-  "devDependencies": {
-    "@ikas/component-cli": "*",
-    "@ikas/bp-storefront": "*",
-    "@ikas/code-components-mcp": "*",
-    "@preact/preset-vite": "^2.10.3",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.0"
-  }
-}

package/templates/create-full/src/components/AccountAddresses/components/AddressCard/index.tsx

@@ -1,55 +0,0 @@
-import {
-  IkasCustomerAddress,
-  getCustomerAddressText,
-} from "@ikas/bp-storefront";
-import { getFullName } from "../../../../utils/fullName";
-
-interface Props {
-  address: IkasCustomerAddress;
-  editButtonText: string;
-  deleteButtonText: string;
-  onEdit: () => void;
-  onDelete: () => void;
-}
-
-export default function AddressCard({
-  address,
-  editButtonText,
-  deleteButtonText,
-  onEdit,
-  onDelete,
-}: Props) {
-  const fullName = getFullName(address?.firstName, address?.lastName);
-
-  return (
-    <div className="kombos-address-card">
-      <div className="kombos-address-card__header">
-        <span className="kombos-address-card__title text-sm-medium">
-          {address.title}
-        </span>
-        <div className="kombos-address-card__actions">
-          <button
-            type="button"
-            className="kombos-address-card__edit text-sm-semibold"
-            onClick={onEdit}
-          >
-            {editButtonText}
-          </button>
-          <button
-            type="button"
-            className="kombos-address-card__delete text-sm-semibold"
-            onClick={onDelete}
-          >
-            {deleteButtonText}
-          </button>
-        </div>
-      </div>
-      <div className="kombos-address-card__body">
-        <span className="text-sm-medium">{fullName}</span>
-        <span className="text-sm-regular">
-          {getCustomerAddressText(address)}
-        </span>
-      </div>
-    </div>
-  );
-}

package/templates/create-full/src/components/AccountAddresses/components/AddressCard/styles.css

@@ -1,46 +0,0 @@
-/* ── Address Card ── */
-.kombos-address-card {
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.kombos-address-card__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.kombos-address-card__title {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-address-card__actions {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.kombos-address-card__edit,
-.kombos-address-card__delete {
-  text-decoration: underline;
-  color: var(--kombos-gray-900);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
-.kombos-address-card__delete {
-  color: var(--kombos-gray-500);
-}
-
-.kombos-address-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  color: var(--kombos-gray-900);
-}

package/templates/create-full/src/components/AccountAddresses/components/AddressModal/index.tsx

@@ -1,298 +0,0 @@
-import { Fragment } from "preact";
-import { useState, useEffect, useRef } from "preact/hooks";
-import {
-  type AddressForm,
-  type IkasFormItem,
-  type IkasFormItemOption,
-  type IkasFormFreeText,
-  type AddressFormItem,
-  IkasCustomerAddress,
-  getIkasCustomerAddressForm,
-  getEmptyAddressForm,
-  initAddressForm,
-  submitAddressForm,
-  setAddressFormFirstName,
-  setAddressFormLastName,
-  setAddressFormIdentityNumber,
-  setAddressFormPhone,
-  setAddressFormAddressLine1,
-  setAddressFormAddressLine2,
-  setAddressFormCountry,
-  setAddressFormState,
-  setAddressFormCity,
-  setAddressFormDistrict,
-  setAddressFormRegion,
-  setAddressFormPostalCode,
-  setAddressFormTitle,
-  customerStore,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Modal from "../../../../sub-components/Modal";
-import FormItem from "../../../../sub-components/FormItem";
-import Input from "../../../../sub-components/Input";
-import Select from "../../../../sub-components/Select";
-import SkeletonField from "../../../../sub-components/SkeletonField";
-
-interface Props {
-  address?: IkasCustomerAddress;
-  title: string;
-  saveButtonText: string;
-  savingButtonText: string;
-  cancelButtonText: string;
-  onClose: () => void;
-  onSaved: () => void;
-}
-
-type FormFieldSetter = (form: AddressForm, value: string) => void;
-
-const SKELETON_ROWS: AddressFormItem[][] = [
-  ["firstName", "lastName"],
-  ["identityNumber"],
-  ["phone"],
-  ["addressLine1"],
-  ["addressLine2"],
-  ["country"],
-  ["state", "city"],
-  ["district", "postalCode"],
-];
-
-const getFieldStatus = (field?: { hasError: boolean }): "default" | "error" =>
-  field?.hasError ? "error" : "default";
-
-const getFieldHelper = (field?: { hasError: boolean; message?: string }) =>
-  field?.hasError ? field.message : undefined;
-
-const AddressModal = observer(function AddressModal({
-  address,
-  title,
-  saveButtonText,
-  savingButtonText,
-  cancelButtonText,
-  onClose,
-  onSaved,
-}: Props) {
-  const onSavedRef = useRef(onSaved);
-  onSavedRef.current = onSaved;
-
-  const [addressForm] = useState<AddressForm>(() =>
-    address
-      ? getIkasCustomerAddressForm(address)
-      : getEmptyAddressForm(customerStore),
-  );
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    initAddressForm(addressForm, address).then(() => setIsLoading(false));
-  }, []);
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    const success = await submitAddressForm(addressForm);
-    if (success) {
-      onSavedRef.current();
-      onClose();
-    }
-  };
-
-  const renderInput = (
-    field: IkasFormItem | undefined,
-    setter: FormFieldSetter,
-    id: string,
-    type?: string,
-  ) => {
-    if (!field) return null;
-
-    return (
-      <FormItem
-        label={field.label ?? ""}
-        htmlFor={id}
-        status={getFieldStatus(field)}
-        helper={getFieldHelper(field)}
-      >
-        <Input
-          id={id}
-          type={type}
-          value={field.value ?? ""}
-          placeholder={field.placeholder}
-          onInput={(e: Event) =>
-            setter(addressForm, (e.target as HTMLInputElement).value)
-          }
-        />
-      </FormItem>
-    );
-  };
-
-  const renderSelect = (
-    field: IkasFormFreeText | undefined,
-    options: IkasFormItemOption[] | undefined,
-    setter: FormFieldSetter,
-    id: string,
-  ) => {
-    if (!field) return null;
-
-    if (field.isFreeText || !options?.length) {
-      return renderInput(field, setter, id);
-    }
-
-    return (
-      <FormItem
-        label={field.label ?? ""}
-        htmlFor={id}
-        status={getFieldStatus(field)}
-        helper={getFieldHelper(field)}
-      >
-        <Select
-          id={id}
-          options={[{ value: "", label: field.placeholder ?? "" }, ...options]}
-          value={field.value ?? ""}
-          onChange={(e: Event) =>
-            setter(addressForm, (e.target as HTMLSelectElement).value)
-          }
-          disabled={field.isLoading}
-        />
-      </FormItem>
-    );
-  };
-
-  const renderFormField = (key: AddressFormItem) => {
-    switch (key) {
-      case "firstName":
-        return renderInput(
-          addressForm.firstName,
-          setAddressFormFirstName,
-          "addr-first-name",
-        );
-      case "lastName":
-        return renderInput(
-          addressForm.lastName,
-          setAddressFormLastName,
-          "addr-last-name",
-        );
-      case "identityNumber":
-        return renderInput(
-          addressForm.identityNumber,
-          setAddressFormIdentityNumber,
-          "addr-identity",
-        );
-      case "phone":
-        return renderInput(
-          addressForm.phone,
-          setAddressFormPhone,
-          "addr-phone",
-          "tel",
-        );
-      case "addressLine1":
-        return renderInput(
-          addressForm.addressLine1,
-          setAddressFormAddressLine1,
-          "addr-line1",
-        );
-      case "addressLine2":
-        return renderInput(
-          addressForm.addressLine2,
-          setAddressFormAddressLine2,
-          "addr-line2",
-        );
-      case "country":
-        return renderSelect(
-          addressForm.country,
-          addressForm.countryOptions,
-          setAddressFormCountry,
-          "addr-country",
-        );
-      case "state":
-        return renderSelect(
-          addressForm.state,
-          addressForm.stateOptions,
-          setAddressFormState,
-          "addr-state",
-        );
-      case "city":
-        return renderSelect(
-          addressForm.city,
-          addressForm.cityOptions,
-          setAddressFormCity,
-          "addr-city",
-        );
-      case "district":
-        return renderSelect(
-          addressForm.district,
-          addressForm.districtOptions,
-          setAddressFormDistrict,
-          "addr-district",
-        );
-      case "region":
-        return addressForm.regionOptions?.length
-          ? renderSelect(
-              addressForm.region,
-              addressForm.regionOptions,
-              setAddressFormRegion,
-              "addr-region",
-            )
-          : null;
-      case "postalCode":
-        return renderInput(
-          addressForm.postalCode,
-          setAddressFormPostalCode,
-          "addr-postal",
-        );
-      default:
-        return null;
-    }
-  };
-
-  const renderRowLayout = (
-    rows: AddressFormItem[][],
-    renderItem: (key: AddressFormItem) => preact.JSX.Element | null,
-  ) =>
-    rows.map((row) => {
-      const visibleKeys = row.filter((key) => addressForm[key] != null);
-      if (visibleKeys.length === 0) return null;
-      const rowKey = visibleKeys.join("-");
-      if (visibleKeys.length === 1) {
-        return <Fragment key={rowKey}>{renderItem(visibleKeys[0])}</Fragment>;
-      }
-      return (
-        <div key={rowKey} className="kombos-address-modal__row">
-          {visibleKeys.map((key) => (
-            <Fragment key={key}>{renderItem(key)}</Fragment>
-          ))}
-        </div>
-      );
-    });
-
-  return (
-    <Modal
-      onClose={onClose}
-      title={title}
-      cancelText={cancelButtonText}
-      okText={addressForm.isSubmitting ? savingButtonText : saveButtonText}
-      okButtonProps={{
-        type: "submit",
-        form: "kombos-address-form",
-        disabled: addressForm.isSubmitting || isLoading,
-      }}
-    >
-      {isLoading ? (
-        <div className="kombos-address-modal__form">
-          <SkeletonField labelWidth="40%" />
-          {renderRowLayout(SKELETON_ROWS, () => (
-            <SkeletonField labelWidth="40%" />
-          ))}
-        </div>
-      ) : (
-        <form
-          id="kombos-address-form"
-          className="kombos-address-modal__form"
-          onSubmit={handleSubmit}
-        >
-          {renderInput(addressForm.title, setAddressFormTitle, "addr-title")}
-          {renderRowLayout(addressForm.addressFormat ?? [], renderFormField)}
-        </form>
-      )}
-    </Modal>
-  );
-});
-
-export default AddressModal;

package/templates/create-full/src/components/AccountAddresses/components/AddressModal/styles.css

@@ -1,23 +0,0 @@
-/* ── Address Modal (form-specific styles) ── */
-.kombos-address-modal__form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.kombos-address-modal__row {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-@media (min-width: 768px) {
-  .kombos-address-modal__row {
-    flex-direction: row;
-  }
-
-  .kombos-address-modal__row > * {
-    flex: 1;
-    min-width: 0;
-  }
-}

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

@@ -1,127 +0,0 @@
-import { useState } from "preact/hooks";
-import {
-  customerStore,
-  IkasCustomerAddress,
-  deleteCustomerAddress,
-} from "@ikas/bp-storefront";
-import Button from "../../sub-components/Button";
-import AddressCard from "./components/AddressCard";
-import AddressModal from "./components/AddressModal";
-import ConfirmModal from "../../sub-components/ConfirmModal";
-import { Props } from "./types";
-
-export function AccountAddresses({
-  title = "My Addresses",
-  addButtonText = "Add Address",
-  emptyMessage = "No addresses added yet.",
-  editButtonText = "Edit",
-  deleteButtonText = "Delete",
-  saveButtonText = "Save",
-  savingButtonText = "Saving...",
-  cancelButtonText = "Cancel",
-  modalTitleAdd = "Add Address",
-  modalTitleEdit = "Edit Address",
-  deleteConfirmMessage = "Are you sure you want to delete this address?",
-  deleteConfirmTitle = "Delete Address",
-}: Props) {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editingAddress, setEditingAddress] = useState<
-    IkasCustomerAddress | undefined
-  >(undefined);
-  const [deletingAddress, setDeletingAddress] = useState<
-    IkasCustomerAddress | undefined
-  >(undefined);
-
-  const addresses = customerStore.customer?.addresses ?? [];
-
-  const handleAdd = () => {
-    setEditingAddress(undefined);
-    setModalOpen(true);
-  };
-
-  const handleEdit = (addr: IkasCustomerAddress) => {
-    setEditingAddress(addr);
-    setModalOpen(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!deletingAddress) return;
-    await deleteCustomerAddress(customerStore, deletingAddress);
-    setDeletingAddress(undefined);
-  };
-
-  const handleModalClose = () => {
-    setModalOpen(false);
-    setEditingAddress(undefined);
-  };
-
-  return (
-    <div className="kombos-account-addresses">
-      <h1 className="kombos-account-addresses__title text-md-medium">{title}</h1>
-
-      {addresses.length === 0 ? (
-        <div className="kombos-account-addresses__empty-state">
-          <p className="kombos-account-addresses__empty text-sm-medium">{emptyMessage}</p>
-          <Button
-            variant="primary"
-            size="s"
-            onClick={handleAdd}
-            className="kombos-account-addresses__add"
-          >
-            {addButtonText}
-          </Button>
-        </div>
-      ) : (
-        <>
-          <div className="kombos-account-addresses__grid">
-            {addresses.map((addr) => (
-              <AddressCard
-                key={addr.id}
-                address={addr}
-                editButtonText={editButtonText}
-                deleteButtonText={deleteButtonText}
-                onEdit={() => handleEdit(addr)}
-                onDelete={() => setDeletingAddress(addr)}
-              />
-            ))}
-          </div>
-
-          <Button
-            variant="primary"
-            size="s"
-            onClick={handleAdd}
-            className="kombos-account-addresses__add"
-          >
-            {addButtonText}
-          </Button>
-        </>
-      )}
-
-      {modalOpen && (
-        <AddressModal
-          address={editingAddress}
-          title={editingAddress ? modalTitleEdit : modalTitleAdd}
-          saveButtonText={saveButtonText}
-          savingButtonText={savingButtonText}
-          cancelButtonText={cancelButtonText}
-          onClose={handleModalClose}
-          onSaved={handleModalClose}
-        />
-      )}
-
-      {deletingAddress && (
-        <ConfirmModal
-          title={deleteConfirmTitle}
-          message={deleteConfirmMessage}
-          cancelText={cancelButtonText}
-          confirmText={deleteButtonText}
-          confirmVariant="dangerous"
-          onClose={() => setDeletingAddress(undefined)}
-          onConfirm={handleDeleteConfirm}
-        />
-      )}
-    </div>
-  );
-}
-
-export default AccountAddresses;

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

@@ -1,41 +0,0 @@
-/* ── Account Addresses ── */
-.kombos-account-addresses {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.kombos-account-addresses__title {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-account-addresses__add {
-  width: fit-content;
-  min-width: 12.5rem;
-}
-
-/* Cards grid: 1 col mobile, 2 col desktop */
-.kombos-account-addresses__grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-}
-
-@media (min-width: 768px) {
-  .kombos-account-addresses__grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* Empty state */
-.kombos-account-addresses__empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 3rem 0;
-}
-
-.kombos-account-addresses__empty {
-  color: var(--kombos-gray-500);
-}

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

@@ -1,15 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  emptyMessage?: string;
-  addButtonText?: string;
-  editButtonText?: string;
-  modalTitleAdd?: string;
-  modalTitleEdit?: string;
-  saveButtonText?: string;
-  savingButtonText?: string;
-  cancelButtonText?: string;
-  deleteConfirmTitle?: string;
-  deleteConfirmMessage?: string;
-  deleteButtonText?: string;
-}