@ikas/component-cli 0.93.0 → 0.95.0

package/templates/create-full/mcp.json

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

package/templates/create-full/package.json

@@ -0,0 +1,17 @@
+{
+  "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"
+  },
+  "devDependencies": {
+    "@ikas/component-cli": "latest",
+    "@ikas/code-components-mcp": "latest",
+    "typescript": "^5.3.3"
+  }
+}

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

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

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

@@ -0,0 +1,301 @@
+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?.label) 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?.label) 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

@@ -0,0 +1,22 @@
+/* ── 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;
+  }
+}

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

@@ -0,0 +1,127 @@
+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 = "Adreslerim",
+  addButtonText = "Adres Ekle",
+  emptyMessage = "Henüz adres eklenmedi.",
+  editButtonText = "Düzenle",
+  deleteButtonText = "Sil",
+  saveButtonText = "Kaydet",
+  savingButtonText = "Kaydediliyor...",
+  cancelButtonText = "Iptal",
+  modalTitleAdd = "Adres Ekle",
+  modalTitleEdit = "Adresi Düzenle",
+  deleteConfirmMessage = "Bu adresi silmek istediginize emin misiniz?",
+  deleteConfirmTitle = "Adresi Sil",
+}: 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

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

@@ -0,0 +1,15 @@
+// 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;
+}