@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/component-renderer/types.ts

@@ -0,0 +1,5 @@
+export interface Props {
+  backgroundColor?: string;
+  borderColor?: string;
+  components?: any;
+}

package/data/section-templates/component-renderer/utils/cx.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cx(...classes: any[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/data/section-templates/email-verification-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Email Verification Section",
+  "description": "Customer email verification page. Reads verification token from URL, calls customerStore.verifyEmail(), shows success or error state with configurable messages."
+}

package/data/section-templates/email-verification-section/ikas-config-snippet.json

@@ -0,0 +1,143 @@
+{
+  "id": "{{PROJECT_ID}}-customer-email-verification",
+  "name": "CustomerEmailVerification",
+  "type": "section",
+  "entry": "./src/components/CustomerEmailVerification/index.tsx",
+  "styles": "./src/components/CustomerEmailVerification/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesap Aktivasyonu",
+      "groupId": "loading"
+    },
+    {
+      "name": "successTitle",
+      "displayName": "Başarı Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesabınız Aktifleştirildi!",
+      "groupId": "success"
+    },
+    {
+      "name": "successMessage",
+      "displayName": "Başarı Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesabınız başarıyla aktifleştirildi. Giriş yaparak alışverişe başlayabilirsiniz.",
+      "groupId": "success"
+    },
+    {
+      "name": "errorTitle",
+      "displayName": "Hata Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Aktivasyon Başarısız",
+      "groupId": "error"
+    },
+    {
+      "name": "errorMessage",
+      "displayName": "Hata Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Aktivasyon bağlantınız geçersiz veya süresi dolmuş olabilir.",
+      "groupId": "error"
+    },
+    {
+      "name": "loadingMessage",
+      "displayName": "Yükleniyor Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesabınız aktifleştiriliyor...",
+      "groupId": "loading"
+    },
+    {
+      "name": "loginButtonText",
+      "displayName": "Giriş Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş Yap",
+      "groupId": "success"
+    },
+    {
+      "name": "resendTitle",
+      "displayName": "Tekrar Gönder Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Aktivasyon Mailini Tekrar Gönder",
+      "groupId": "resend"
+    },
+    {
+      "name": "emailLabel",
+      "displayName": "E-posta Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "E-posta",
+      "groupId": "resend"
+    },
+    {
+      "name": "emailPlaceholder",
+      "displayName": "E-posta Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ornek@email.com",
+      "groupId": "resend"
+    },
+    {
+      "name": "resendButtonText",
+      "displayName": "Tekrar Gönder Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tekrar Gönder",
+      "groupId": "resend"
+    },
+    {
+      "name": "resendingButtonText",
+      "displayName": "Gönderiliyor Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Gönderiliyor...",
+      "groupId": "resend"
+    },
+    {
+      "name": "resendSuccessMessage",
+      "displayName": "Tekrar Gönderim Başarı Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Aktivasyon maili tekrar gönderildi. Lütfen gelen kutunuzu kontrol edin.",
+      "groupId": "resend"
+    },
+    {
+      "name": "resendErrorMessage",
+      "displayName": "Tekrar Gönderim Hata Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Mail gönderilemedi. Lütfen tekrar deneyin.",
+      "groupId": "resend"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "loading",
+      "name": "Yükleniyor",
+      "description": "E-posta doğrulama işlemi devam ederken gösterilen başlık ve mesaj metinleri"
+    },
+    {
+      "id": "success",
+      "name": "Başarılı",
+      "description": "Doğrulama başarılı olduğunda gösterilen başlık, mesaj ve giriş butonu metinleri"
+    },
+    {
+      "id": "error",
+      "name": "Hata",
+      "description": "Doğrulama başarısız olduğunda gösterilen başlık ve hata mesajı metinleri"
+    },
+    {
+      "id": "resend",
+      "name": "Tekrar Gönder",
+      "description": "Doğrulama e-postasını tekrar göndermek için kullanılan form alanı, buton ve durum mesajı metinleri"
+    }
+  ]
+}

package/data/section-templates/email-verification-section/index.tsx

@@ -0,0 +1,168 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  customerStore,
+  activateCustomer,
+  resendCustomerActivationMail,
+  Router,
+} from "@ikas/bp-storefront";
+
+import { Props } from "./types";
+import { cx } from "../../utils/cx";
+import { CheckCircleSVG, XCircleSVG } from "../../sub-components/icons";
+import SpinnerIcon from "../../sub-components/SpinnerIcon";
+import Button from "../../sub-components/Button";
+import FormItem from "../../sub-components/FormItem";
+import Input from "../../sub-components/Input";
+
+type Status = "loading" | "success" | "error";
+type ResendStatus = "idle" | "sending" | "success" | "error";
+
+export function CustomerEmailVerification({
+  title = "E-posta Doğrulama",
+  successTitle = "E-posta Doğrulandı",
+  successMessage = "E-posta adresiniz başarıyla doğrulandı. Artık giriş yapabilirsiniz.",
+  errorTitle = "Doğrulama Başarısız",
+  errorMessage = "E-posta doğrulama bağlantısı geçersiz veya süresi dolmuş.",
+  loadingMessage = "E-posta adresiniz doğrulanıyor, lütfen bekleyin...",
+  loginButtonText = "Giriş Yap",
+  resendTitle = "Doğrulama E-postasını Tekrar Gönder",
+  emailLabel = "E-posta",
+  emailPlaceholder = "ornek@email.com",
+  resendButtonText = "Tekrar Gönder",
+  resendingButtonText = "Gönderiliyor...",
+  resendSuccessMessage = "Doğrulama e-postası başarıyla gönderildi.",
+  resendErrorMessage = "E-posta gönderilemedi. Lütfen tekrar deneyin.",
+}: Props) {
+  const [status, setStatus] = useState<Status>("loading");
+  const [email, setEmail] = useState("");
+  const [resendStatus, setResendStatus] = useState<ResendStatus>("idle");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    activateCustomer(customerStore)
+      .then((success) => {
+        if (!cancelled) setStatus(success ? "success" : "error");
+      })
+      .catch(() => {
+        if (!cancelled) setStatus("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const resending = resendStatus === "sending";
+
+  const handleResend = async () => {
+    const trimmed = email.trim();
+    if (!trimmed || resending) return;
+    setResendStatus("sending");
+
+    const success = await resendCustomerActivationMail(customerStore, trimmed);
+    setResendStatus(success ? "success" : "error");
+  };
+
+  return (
+    <section className="customer-email-verification">
+      <div className="customer-email-verification__wrapper kombos-container">
+        <div className="customer-email-verification__container">
+          {status === "loading" && (
+            <div className="customer-email-verification__state">
+              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
+                {title}
+              </h1>
+              <SpinnerIcon className="customer-email-verification__spinner" />
+              <p className="customer-email-verification__state-text text-md-regular">
+                {loadingMessage}
+              </p>
+            </div>
+          )}
+
+          {status === "success" && (
+            <div className="customer-email-verification__state">
+              <div className="customer-email-verification__icon customer-email-verification__icon--success">
+                <CheckCircleSVG />
+              </div>
+              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
+                {successTitle}
+              </h1>
+              <p className="customer-email-verification__message text-md-regular">{successMessage}</p>
+              <Button
+                className="customer-email-verification__action-btn"
+                variant="primary"
+                size="s"
+                onClick={() => Router.navigateToPage("LOGIN")}
+              >
+                {loginButtonText}
+              </Button>
+            </div>
+          )}
+
+          {status === "error" && (
+            <div className="customer-email-verification__state">
+              <div className="customer-email-verification__icon customer-email-verification__icon--error">
+                <XCircleSVG />
+              </div>
+              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
+                {errorTitle}
+              </h1>
+              <p className="customer-email-verification__message text-md-regular">{errorMessage}</p>
+
+              <div className="customer-email-verification__resend">
+                <h2 className="customer-email-verification__resend-title text-md-semibold md:text-lg-semibold">
+                  {resendTitle}
+                </h2>
+                <form
+                  className="customer-email-verification__resend-form"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleResend();
+                  }}
+                >
+                  <FormItem label={emailLabel} htmlFor="customer-email-verification-email">
+                    <Input
+                      id="customer-email-verification-email"
+                      type="email"
+                      name="email"
+                      autoComplete="email"
+                      placeholder={emailPlaceholder}
+                      value={email}
+                      onInput={(e) =>
+                        setEmail((e.target as HTMLInputElement).value)
+                      }
+                    />
+                  </FormItem>
+                  <Button
+                    className="customer-email-verification__resend-btn"
+                    variant="primary"
+                    size="s"
+                    disabled={resending || !email.trim()}
+                  >
+                    {resending ? resendingButtonText : resendButtonText}
+                  </Button>
+                </form>
+
+                {(resendStatus === "success" || resendStatus === "error") && (
+                  <div
+                    className={cx(
+                      "customer-email-verification__banner text-sm-regular",
+                      `customer-email-verification__banner--${resendStatus}`,
+                    )}
+                  >
+                    {resendStatus === "success"
+                      ? resendSuccessMessage
+                      : resendErrorMessage}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CustomerEmailVerification;

package/data/section-templates/email-verification-section/styles.css

@@ -0,0 +1,118 @@
+.customer-email-verification {
+  width: 100%;
+}
+
+.customer-email-verification__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.customer-email-verification__container {
+  width: 100%;
+  max-width: 29rem;
+}
+
+.customer-email-verification__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+}
+
+.customer-email-verification__spinner {
+  font-size: 2.5rem;
+  color: var(--kombos-gray-500);
+}
+
+.customer-email-verification__state-text {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+.customer-email-verification__icon {
+  font-size: 3rem;
+}
+
+.customer-email-verification__icon--success {
+  color: var(--kombos-success);
+}
+
+.customer-email-verification__icon--error {
+  color: var(--kombos-error);
+}
+
+.customer-email-verification__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.customer-email-verification__message {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+.customer-email-verification__action-btn {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.customer-email-verification__resend {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--kombos-gray-200);
+}
+
+.customer-email-verification__resend-title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+  text-align: left;
+}
+
+.customer-email-verification__resend-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.customer-email-verification__resend-btn {
+  width: 100%;
+}
+
+.customer-email-verification__banner {
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+}
+
+.customer-email-verification__banner--success {
+  background: rgba(18, 183, 106, 0.08);
+  border: 1px solid var(--kombos-success);
+  color: var(--kombos-success);
+}
+
+.customer-email-verification__banner--error {
+  background: rgba(255, 60, 72, 0.08);
+  border: 1px solid var(--kombos-error);
+  color: var(--kombos-error);
+}
+
+@media (min-width: 768px) {
+  .customer-email-verification__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .customer-email-verification__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

package/data/section-templates/email-verification-section/sub-components/Button/index.tsx

@@ -0,0 +1,52 @@
+import type { ButtonHTMLAttributes, ComponentChildren } from "preact";
+import { SpinnerSVG } from "../icons";
+import { cx } from "../../utils/cx";
+
+type Variant = "primary" | "secondary" | "dangerous";
+type Size = "xs" | "s" | "m";
+
+export interface ButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "size" | "icon" | "loading"
+> {
+  variant?: Variant;
+  size?: Size;
+  icon?: ComponentChildren;
+  loading?: boolean;
+}
+
+const TYPOGRAPHY: Record<Size, string> = {
+  xs: "text-sm-semibold",
+  s: "text-md-semibold",
+  m: "text-lg-semibold",
+};
+
+export default function Button({
+  variant = "primary",
+  size = "s",
+  icon,
+  loading,
+  className,
+  children,
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const cls = cx(
+    "kombos-btn",
+    `kombos-btn--${variant}`,
+    `kombos-btn--${size}`,
+    TYPOGRAPHY[size],
+    className,
+  );
+
+  return (
+    <button className={cls} disabled={loading || disabled} {...rest}>
+      {loading ? (
+        <SpinnerSVG className="kombos-btn__spinner" />
+      ) : (
+        icon && <span className="kombos-btn__icon">{icon}</span>
+      )}
+      {children}
+    </button>
+  );
+}

package/data/section-templates/email-verification-section/sub-components/Button/styles.css

@@ -0,0 +1,114 @@
+/* ===== Button ===== */
+
+/* --- Base --- */
+.kombos-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+
+.kombos-btn:disabled {
+  cursor: not-allowed;
+}
+
+/* --- Spinner --- */
+.kombos-btn__spinner {
+  animation: kombos-spin 1s linear infinite;
+}
+
+@keyframes kombos-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* --- Icon --- */
+.kombos-btn__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.kombos-btn--xs .kombos-btn__icon {
+  font-size: 1rem;
+}
+
+.kombos-btn--s .kombos-btn__icon {
+  font-size: 1.25rem;
+}
+
+.kombos-btn--m .kombos-btn__icon {
+  font-size: 1.5rem;
+}
+
+/* --- Sizes --- */
+.kombos-btn--xs {
+  padding: 0.4375rem 0.9375rem;
+  min-height: 2.25rem;
+}
+
+.kombos-btn--s {
+  padding: 0.5625rem 1.1875rem;
+  min-height: 2.75rem;
+}
+
+.kombos-btn--m {
+  padding: 0.6875rem 1.4375rem;
+  min-height: 3.375rem;
+}
+
+/* --- Primary --- */
+.kombos-btn--primary {
+  background-color: var(--kombos-gray-900);
+  border-color: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-btn--primary:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.kombos-btn--primary:disabled {
+  background-color: var(--kombos-gray-300);
+  border-color: var(--kombos-gray-300);
+  color: var(--kombos-gray-50);
+}
+
+/* --- Secondary --- */
+.kombos-btn--secondary {
+  background-color: var(--kombos-white);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-900);
+}
+
+.kombos-btn--secondary:hover:not(:disabled) {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-btn--secondary:disabled {
+  background-color: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-300);
+}
+
+/* --- Dangerous --- */
+.kombos-btn--dangerous {
+  background-color: var(--kombos-error);
+  border-color: var(--kombos-error);
+  color: var(--kombos-white);
+}
+
+.kombos-btn--dangerous:hover:not(:disabled) {
+  background-color: var(--kombos-error-hover);
+  border-color: var(--kombos-error-hover);
+}
+
+.kombos-btn--dangerous:disabled {
+  background-color: var(--kombos-gray-300);
+  border-color: var(--kombos-gray-300);
+  color: var(--kombos-gray-50);
+}

package/data/section-templates/email-verification-section/sub-components/FormItem/index.tsx

@@ -0,0 +1,66 @@
+import type { ComponentChildren } from "preact";
+import { useId } from "preact/hooks";
+import { cx } from "../../utils/cx";
+import { cloneElement, isValidElement } from "preact";
+
+type FormItemStatus = "default" | "error" | "success";
+
+interface Props {
+  label?: ComponentChildren;
+  description?: ComponentChildren;
+  status?: FormItemStatus;
+  helper?: ComponentChildren;
+  children: ComponentChildren;
+  className?: string;
+  htmlFor?: string;
+}
+
+export default function FormItem({
+  label,
+  description,
+  status = "default",
+  helper,
+  children,
+  className,
+  htmlFor,
+}: Props) {
+  const autoId = useId();
+  const helperId = helper ? `${autoId}-helper` : undefined;
+
+  const enhancedChildren =
+    helperId && isValidElement(children)
+      ? cloneElement(children, { "aria-describedby": helperId })
+      : children;
+
+  return (
+    <div
+      className={cx("kombos-form-item", className)}
+      data-state={status !== "default" ? status : undefined}
+    >
+      {label &&
+        (htmlFor ? (
+          <label
+            htmlFor={htmlFor}
+            className="kombos-form-item__label text-xs-medium"
+          >
+            {label}
+          </label>
+        ) : (
+          <span className="kombos-form-item__label text-xs-medium">
+            {label}
+          </span>
+        ))}
+      {description && (
+        <span className="kombos-form-item__description text-xs-regular">
+          {description}
+        </span>
+      )}
+      {enhancedChildren}
+      {helper && (
+        <span id={helperId} className="kombos-form-item__helper text-xs-regular">
+          {helper}
+        </span>
+      )}
+    </div>
+  );
+}