@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/product-slider-section/types.ts

@@ -0,0 +1,16 @@
+import type { IkasProductList } from "@ikas/bp-storefront";
+import type { AspectRatio, NumberOfColumns, ObjectFit } from "../../global-types";
+
+export interface Props {
+  productList: IkasProductList;
+  title?: string;
+  addToCartText?: string;
+  addedToCartText?: string;
+  outOfStockText?: string;
+  goToProductText?: string;
+  desktopColumns?: NumberOfColumns;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  hideAddToCartButton?: boolean;
+  components?: any;
+}

package/data/section-templates/product-slider-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/product-slider-section/utils/media.ts

@@ -0,0 +1,36 @@
+import type { AspectRatio, ObjectFit, VerticalAlignment } from "../global-types";
+
+const DEFAULT_ASPECT_RATIO: AspectRatio = "Square";
+const DEFAULT_OBJECT_FIT: ObjectFit = "Cover";
+const DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = "Middle";
+
+const ASPECT_RATIO_MAP: Record<AspectRatio, string> = {
+  Square: "1 / 1",
+  Portrait: "3 / 4",
+  Landscape: "4 / 3",
+  Video: "16 / 9",
+};
+
+const OBJECT_FIT_MAP: Record<ObjectFit, string> = {
+  Fill: "fill",
+  Cover: "cover",
+  Contain: "contain",
+};
+
+const ALIGNMENT_MAP: Record<VerticalAlignment, string> = {
+  Top: "flex-start",
+  Middle: "center",
+  Bottom: "flex-end",
+};
+
+export function resolveAspectRatio(value?: AspectRatio): string {
+  return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];
+}
+
+export function resolveObjectFit(value?: ObjectFit): string {
+  return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];
+}
+
+export function resolveVerticalAlignment(value?: VerticalAlignment): string {
+  return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];
+}

package/data/section-templates/product-slider-section/utils/toast.ts

@@ -0,0 +1,5 @@
+export function showToast(message: string, variant: "success" | "error") {
+  window.dispatchEvent(
+    new CustomEvent("ikas:show-toast", { detail: { message, variant } })
+  );
+}

package/data/section-templates/recover-password-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Recover Password Section",
+  "description": "Password reset form for completing recovery. Reads token from URL, validates new password with confirmation, calls customerStore.recoverPassword(). Redirects to login on success."
+}

package/data/section-templates/recover-password-section/components/RecoverPasswordForm/index.tsx

@@ -0,0 +1,133 @@
+import {
+  getRecoverPasswordForm,
+  setRecoverPasswordFormPassword,
+  setRecoverPasswordFormPasswordAgain,
+  submitRecoverPasswordForm,
+  Router,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+
+import { Props } from "../../types";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+import FormItem from "../../../../sub-components/FormItem";
+
+interface RecoverPasswordFormProps extends Omit<Props, "backgroundColor"> {
+  recoverForm: ReturnType<typeof getRecoverPasswordForm>;
+}
+
+const RecoverPasswordForm = observer(function RecoverPasswordForm({
+  recoverForm,
+  title = "Parola Değiştirme",
+  subtitle = "Lütfen yeni parolanızı belirleyiniz.",
+  passwordLabel = "Yeni Şifre",
+  passwordPlaceholder = "Parola",
+  passwordAgainLabel = "Yeni Şifre Tekrar",
+  passwordAgainPlaceholder = "Parola",
+  submitButtonText = "Değiştir",
+  submittingButtonText = "Değiştiriliyor...",
+  successMessage = "Parolanız başarıyla değiştirildi.",
+  loginLinkText = "Giriş Yap",
+}: RecoverPasswordFormProps) {
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    const success = await submitRecoverPasswordForm(recoverForm);
+    if (success) {
+      Router.navigateToPage("LOGIN");
+    }
+  };
+
+  return (
+    <div className="recover-password__container">
+      <div className="recover-password__header">
+        <h1 className="recover-password__title text-xl-medium md:display-xs-medium">{title}</h1>
+        <p className="recover-password__subtitle text-sm-regular">{subtitle}</p>
+      </div>
+
+      {recoverForm.isSuccess && (
+        <div className="recover-password__success-banner text-sm-regular">
+          {successMessage}
+        </div>
+      )}
+
+      {recoverForm.isFailure && recoverForm.responseMessage && (
+        <div className="recover-password__error-banner text-sm-regular">
+          {recoverForm.responseMessage}
+        </div>
+      )}
+
+      {!recoverForm.isSuccess && (
+        <form className="recover-password__form" onSubmit={handleSubmit}>
+          <FormItem
+            label={passwordLabel}
+            htmlFor="recover-password"
+            status={recoverForm.password?.hasError ? "error" : "default"}
+            helper={
+              recoverForm.password?.hasError
+                ? recoverForm.password.message
+                : undefined
+            }
+          >
+            <Input
+              id="recover-password"
+              password
+              placeholder={passwordPlaceholder}
+              value={recoverForm.password?.value ?? ""}
+              onInput={(e: Event) =>
+                setRecoverPasswordFormPassword(
+                  recoverForm,
+                  (e.target as HTMLInputElement).value,
+                )
+              }
+            />
+          </FormItem>
+
+          <FormItem
+            label={passwordAgainLabel}
+            htmlFor="recover-password-again"
+            status={recoverForm.passwordAgain?.hasError ? "error" : "default"}
+            helper={
+              recoverForm.passwordAgain?.hasError
+                ? recoverForm.passwordAgain.message
+                : undefined
+            }
+          >
+            <Input
+              id="recover-password-again"
+              password
+              placeholder={passwordAgainPlaceholder}
+              value={recoverForm.passwordAgain?.value ?? ""}
+              onInput={(e: Event) =>
+                setRecoverPasswordFormPasswordAgain(
+                  recoverForm,
+                  (e.target as HTMLInputElement).value,
+                )
+              }
+            />
+          </FormItem>
+
+          <Button
+            variant="primary"
+            size="s"
+            className="recover-password__submit-btn"
+            disabled={recoverForm.isSubmitting}
+          >
+            {recoverForm.isSubmitting ? submittingButtonText : submitButtonText}
+          </Button>
+        </form>
+      )}
+
+      <div className="recover-password__footer">
+        <button
+          type="button"
+          className="recover-password__login-link text-sm-medium"
+          onClick={() => Router.navigateToPage("LOGIN")}
+        >
+          {loginLinkText}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export default RecoverPasswordForm;

package/data/section-templates/recover-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/recover-password-section/ikas-config-snippet.json

@@ -0,0 +1,111 @@
+{
+  "id": "{{PROJECT_ID}}-recover-password",
+  "name": "RecoverPassword",
+  "type": "section",
+  "entry": "./src/components/RecoverPassword/index.tsx",
+  "styles": "./src/components/RecoverPassword/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parola Değiştirme",
+      "groupId": "form-baslik"
+    },
+    {
+      "name": "subtitle",
+      "displayName": "Açıklama",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Lütfen yeni parolanızı belirleyiniz.",
+      "groupId": "form-baslik"
+    },
+    {
+      "name": "passwordLabel",
+      "displayName": "Şifre Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Yeni Şifre",
+      "groupId": "form-alanlari"
+    },
+    {
+      "name": "passwordPlaceholder",
+      "displayName": "Şifre Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parola",
+      "groupId": "form-alanlari"
+    },
+    {
+      "name": "passwordAgainLabel",
+      "displayName": "Şifre Tekrar Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Yeni Şifre Tekrar",
+      "groupId": "form-alanlari"
+    },
+    {
+      "name": "passwordAgainPlaceholder",
+      "displayName": "Şifre Tekrar Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parola",
+      "groupId": "form-alanlari"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Değiştir Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Değiştir",
+      "groupId": "buton-metinleri"
+    },
+    {
+      "name": "submittingButtonText",
+      "displayName": "Değiştiriliyor Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Değiştiriliyor...",
+      "groupId": "buton-metinleri"
+    },
+    {
+      "name": "successMessage",
+      "displayName": "Başarı Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parolanız başarıyla değiştirildi.",
+      "groupId": "basari-ekrani"
+    },
+    {
+      "name": "loginLinkText",
+      "displayName": "Girişe Dön Bağlantısı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş Yap",
+      "groupId": "basari-ekrani"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "form-baslik",
+      "name": "Form Başlığı",
+      "description": "Formun üst kısmında görünen başlık ve açıklama metinleri"
+    },
+    {
+      "id": "form-alanlari",
+      "name": "Form Alanları",
+      "description": "Parola giriş alanlarının etiket ve placeholder metinleri"
+    },
+    {
+      "id": "buton-metinleri",
+      "name": "Buton Metinleri",
+      "description": "Gönder butonu ve yükleniyor durumu metinleri"
+    },
+    {
+      "id": "basari-ekrani",
+      "name": "Başarı Ekranı",
+      "description": "Parola başarıyla değiştirildikten sonra gösterilen mesaj ve bağlantılar"
+    }
+  ]
+}

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

@@ -0,0 +1,30 @@
+import {
+  customerStore,
+  getRecoverPasswordForm,
+  initRecoverPasswordForm,
+} from "@ikas/bp-storefront";
+import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
+
+import { Props } from "./types";
+import RecoverPasswordForm from "./components/RecoverPasswordForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function RecoverPassword(props: Props) {
+  const recoverForm = getRecoverPasswordForm(customerStore);
+
+  const isChecking = useRedirectIfLoggedIn(() => {
+    initRecoverPasswordForm(recoverForm);
+  });
+
+  if (isChecking) return <PageLoader />;
+
+  return (
+    <section className="recover-password">
+      <div className="recover-password__wrapper kombos-container">
+        <RecoverPasswordForm recoverForm={recoverForm} {...props} />
+      </div>
+    </section>
+  );
+}
+
+export default RecoverPassword;

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

@@ -0,0 +1,93 @@
+.recover-password {
+  width: 100%;
+}
+
+.recover-password__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.recover-password__container {
+  width: 100%;
+  max-width: 29rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.recover-password__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.recover-password__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.recover-password__subtitle {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}
+
+.recover-password__success-banner {
+  padding: 0.75rem 1rem;
+  background: rgba(18, 183, 106, 0.08);
+  border: 1px solid var(--kombos-success);
+  border-radius: 6px;
+  color: var(--kombos-success);
+}
+
+.recover-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);
+}
+
+.recover-password__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.recover-password__submit-btn {
+  width: 100%;
+}
+
+.recover-password__footer {
+  text-align: center;
+}
+
+.recover-password__login-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.recover-password__login-link:hover {
+  color: var(--kombos-gray-900);
+}
+
+@media (min-width: 768px) {
+  .recover-password__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .recover-password__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

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