@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/footer-section/types.ts

@@ -0,0 +1,14 @@
+import type { IkasImage, IkasNavigationLinkList } from "@ikas/bp-storefront";
+
+export interface Props {
+  logo?: IkasImage | null;
+  description?: string;
+  copyrightText?: string;
+  footerLinks?: IkasNavigationLinkList;
+  linkColor?: string;
+  linkHoverColor?: string;
+  contactTitle?: string;
+  contactEmail?: string;
+  contactPhone?: string;
+  socialMediaIcons?: any;
+}

package/data/section-templates/footer-section/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/forgot-password-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Forgot Password Section",
+  "description": "Password recovery request form. Sends reset email via customerStore.sendRecoverPasswordEmail(). Includes email validation and success/error states."
+}

package/data/section-templates/forgot-password-section/components/ForgotPasswordForm/index.tsx

@@ -0,0 +1,129 @@
+import {
+  getForgotPasswordForm,
+  setForgotPasswordFormEmail,
+  submitForgotPasswordForm,
+  Router,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+
+import { Props } from "../../types";
+import FormItem from "../../../../sub-components/FormItem";
+import Input from "../../../../sub-components/Input";
+import Button from "../../../../sub-components/Button";
+
+interface ForgotPasswordFormProps extends Props {
+  forgotForm: ReturnType<typeof getForgotPasswordForm>;
+}
+
+const ForgotPasswordForm = observer(function ForgotPasswordForm({
+  forgotForm,
+  title = "Parolamı Unuttum",
+  subtitle = "Şifrenizi sıfırlamanız için size bir e-posta göndereceğiz",
+  emailLabel = "E-posta",
+  emailPlaceholder = "yildo@ikas.com",
+  submitButtonText = "Gönder",
+  submittingButtonText = "Gönderiliyor...",
+  successTitle = "Parolamı Unuttum",
+  successMessage = "Size bir e-posta gönderdik.",
+  successButtonText = "Alışverişe Başla",
+  backToLoginText = "Giriş Sayfasına Dön",
+}: ForgotPasswordFormProps) {
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    await submitForgotPasswordForm(forgotForm);
+  };
+
+  if (forgotForm.isSuccess) {
+    return (
+      <div className="forgot-password__container">
+        <div className="forgot-password__header">
+          <h1 className="forgot-password__title text-xl-medium md:display-xs-medium">
+            {successTitle}
+          </h1>
+          <p className="forgot-password__subtitle text-sm-regular">
+            {successMessage}
+          </p>
+        </div>
+
+        <Button
+          variant="primary"
+          size="s"
+          className="forgot-password__submit-btn"
+          onClick={() => Router.navigate("/")}
+        >
+          {successButtonText}
+        </Button>
+
+        <div className="forgot-password__footer">
+          <button
+            type="button"
+            className="forgot-password__back-link text-sm-medium"
+            onClick={() => Router.navigateToPage("LOGIN")}
+          >
+            {backToLoginText}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="forgot-password__container">
+      <div className="forgot-password__header">
+        <h1 className="forgot-password__title text-xl-medium md:display-xs-medium">{title}</h1>
+        <p className="forgot-password__subtitle text-sm-regular">{subtitle}</p>
+      </div>
+
+      {forgotForm.isFailure && forgotForm.responseMessage && (
+        <div className="forgot-password__error-banner text-sm-regular">
+          {forgotForm.responseMessage}
+        </div>
+      )}
+
+      <form className="forgot-password__form" onSubmit={handleSubmit}>
+        <FormItem
+          label={emailLabel}
+          htmlFor="forgot-email"
+          status={forgotForm.email?.hasError ? "error" : "default"}
+          helper={
+            forgotForm.email?.hasError ? forgotForm.email.message : undefined
+          }
+        >
+          <Input
+            id="forgot-email"
+            type="email"
+            placeholder={emailPlaceholder}
+            value={forgotForm.email?.value ?? ""}
+            onInput={(e: Event) =>
+              setForgotPasswordFormEmail(
+                forgotForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <Button
+          variant="primary"
+          size="s"
+          className="forgot-password__submit-btn"
+          disabled={forgotForm.isSubmitting}
+        >
+          {forgotForm.isSubmitting ? submittingButtonText : submitButtonText}
+        </Button>
+      </form>
+
+      <div className="forgot-password__footer">
+        <button
+          type="button"
+          className="forgot-password__back-link text-sm-medium"
+          onClick={() => Router.navigateToPage("LOGIN")}
+        >
+          {backToLoginText}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export default ForgotPasswordForm;

package/data/section-templates/forgot-password-section/hooks/useRedirectIfLoggedIn.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  customerStore,
+  waitForCustomerStoreInit,
+  Router,
+} from "@ikas/bp-storefront";
+
+/**
+ * Redirects logged-in users to the account page.
+ * Returns `true` while the check is in progress (use to hide content and prevent flash).
+ * Calls `onGuest` only if the user is not logged in.
+ */
+export function useRedirectIfLoggedIn(onGuest: () => void): boolean {
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    waitForCustomerStoreInit(customerStore).then(() => {
+      if (!isMounted) return;
+      if (customerStore.customer) {
+        Router.navigateToPage("ACCOUNT");
+        return;
+      }
+      onGuest();
+      setIsChecking(false);
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return isChecking;
+}

package/data/section-templates/forgot-password-section/ikas-config-snippet.json

@@ -0,0 +1,117 @@
+{
+  "id": "{{PROJECT_ID}}-forgot-password",
+  "name": "ForgotPassword",
+  "type": "section",
+  "entry": "./src/components/ForgotPassword/index.tsx",
+  "styles": "./src/components/ForgotPassword/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parolamı Unuttum",
+      "groupId": "content"
+    },
+    {
+      "name": "subtitle",
+      "displayName": "Açıklama",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Şifrenizi sıfırlamanız için size bir e-posta göndereceğiz",
+      "groupId": "content"
+    },
+    {
+      "name": "emailLabel",
+      "displayName": "E-posta Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "E-posta",
+      "groupId": "email"
+    },
+    {
+      "name": "emailPlaceholder",
+      "displayName": "E-posta Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ikas@ikas.com",
+      "groupId": "email"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Gönder Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Gönder",
+      "groupId": "buttons"
+    },
+    {
+      "name": "submittingButtonText",
+      "displayName": "Gönderiliyor Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Gönderiliyor...",
+      "groupId": "buttons"
+    },
+    {
+      "name": "backToLoginText",
+      "displayName": "Girişe Dön Bağlantısı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş Sayfasına Dön",
+      "groupId": "buttons"
+    },
+    {
+      "name": "successTitle",
+      "displayName": "Başarı Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parolamı Unuttum",
+      "groupId": "success"
+    },
+    {
+      "name": "successMessage",
+      "displayName": "Başarı Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Size bir e-posta gönderdik.",
+      "groupId": "success"
+    },
+    {
+      "name": "successButtonText",
+      "displayName": "Başarı Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Alışverişe Başla",
+      "groupId": "success"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "success",
+      "name": "Başarı Ekranı",
+      "description": "E-posta gönderildikten sonra gösterilen başarı mesajları"
+    },
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Sayfa başlığı ve açıklama metni"
+    },
+    {
+      "id": "formFields",
+      "name": "Form Alanları",
+      "description": "E-posta alanı etiket ve placeholder metinleri",
+      "children": [
+        {
+          "id": "email",
+          "name": "E-posta"
+        }
+      ]
+    },
+    {
+      "id": "buttons",
+      "name": "Butonlar",
+      "description": "Buton ve link metinleri"
+    }
+  ]
+}

package/data/section-templates/forgot-password-section/index.tsx

@@ -0,0 +1,30 @@
+import {
+  customerStore,
+  getForgotPasswordForm,
+  initForgotPasswordForm,
+} from "@ikas/bp-storefront";
+import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
+
+import { Props } from "./types";
+import ForgotPasswordForm from "./components/ForgotPasswordForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function ForgotPassword(props: Props) {
+  const forgotForm = getForgotPasswordForm(customerStore);
+
+  const isChecking = useRedirectIfLoggedIn(() => {
+    initForgotPasswordForm(forgotForm);
+  });
+
+  if (isChecking) return <PageLoader />;
+
+  return (
+    <section className="forgot-password">
+      <div className="forgot-password__wrapper kombos-container">
+        <ForgotPasswordForm forgotForm={forgotForm} {...props} />
+      </div>
+    </section>
+  );
+}
+
+export default ForgotPassword;

package/data/section-templates/forgot-password-section/styles.css

@@ -0,0 +1,85 @@
+.forgot-password {
+  width: 100%;
+}
+
+.forgot-password__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.forgot-password__container {
+  width: 100%;
+  max-width: 29rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.forgot-password__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.forgot-password__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.forgot-password__subtitle {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}
+
+.forgot-password__error-banner {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 60, 72, 0.08);
+  border: 1px solid var(--kombos-error);
+  border-radius: 6px;
+  color: var(--kombos-error);
+}
+
+.forgot-password__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.forgot-password__submit-btn {
+  width: 100%;
+}
+
+.forgot-password__footer {
+  text-align: center;
+}
+
+.forgot-password__back-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.forgot-password__back-link:hover {
+  color: var(--kombos-gray-900);
+}
+
+@media (min-width: 768px) {
+  .forgot-password__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .forgot-password__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

package/data/section-templates/forgot-password-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/forgot-password-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/forgot-password-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>
+  );
+}

package/data/section-templates/forgot-password-section/sub-components/FormItem/styles.css

@@ -0,0 +1,38 @@
+/* ===== FormItem Sub-Component ===== */
+
+.kombos-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+/* Label */
+.kombos-form-item__label {
+  width: fit-content;
+  color: var(--kombos-gray-700);
+}
+
+/* Description */
+.kombos-form-item__description {
+  width: fit-content;
+  margin-top: -0.25rem;
+  color: var(--kombos-gray-500);
+}
+
+
+/* Helper text */
+.kombos-form-item__helper {
+  color: var(--kombos-gray-500);
+}
+
+/* === Error state === */
+[data-state="error"] .kombos-form-item__label,
+[data-state="error"] .kombos-form-item__helper {
+  color: var(--kombos-error);
+}
+
+/* === Success state === */
+[data-state="success"] .kombos-form-item__helper {
+  color: var(--kombos-success);
+}