@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/image-handling/types.ts

@@ -0,0 +1,11 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  components?: any;
+  bottomComponents?: any;
+  homepageText?: string;
+}

package/data/section-templates/image-handling/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/image-handling/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/login-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Login Section",
+  "description": "Customer login form with email/password fields, form validation, error handling, social login support, and redirect to account on success. Uses customerStore.login() and useRedirectIfLoggedIn hook."
+}

package/data/section-templates/login-section/components/LoginForm/index.tsx

@@ -0,0 +1,181 @@
+import {
+  customerStore,
+  setLoginFormEmail,
+  setLoginFormPassword,
+  submitLoginForm,
+  socialLogin,
+  Router,
+  getLoginForm,
+} 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";
+import SocialLoginButton from "../../../../sub-components/SocialLoginButton";
+import { GoogleSVG, FacebookSVG } from "../../../../sub-components/icons";
+
+interface LoginFormProps extends Props {
+  loginForm: ReturnType<typeof getLoginForm>;
+}
+
+const LoginForm = observer(function LoginForm({
+  loginForm,
+  title = "Giriş Yap",
+  subtitle = "Hesabınıza giriş yaparak siparişlerinizi\ntakip edebilir ve alışverişe devam edebilirsiniz.",
+  emailLabel = "E-posta",
+  emailPlaceholder = "ornek@email.com",
+  passwordLabel = "Şifre",
+  passwordPlaceholder = "Şifrenizi girin",
+  forgotPasswordText = "Parolamı unuttum",
+  submitButtonText = "Giriş Yap",
+  submittingButtonText = "Giriş yapılıyor...",
+  createAccountText = "Yeni hesap oluştur",
+  showGoogleLogin = false,
+  showFacebookLogin = false,
+  googleButtonText = "Google ile giriş yap",
+  facebookButtonText = "Facebook ile giriş yap",
+  dividerText = "veya",
+}: LoginFormProps) {
+  const showSocialLogin = showGoogleLogin || showFacebookLogin;
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    const success = await submitLoginForm(loginForm);
+    if (success) {
+      Router.navigateToPage("ACCOUNT");
+    }
+  };
+
+  return (
+    <div className="login__container">
+      <div className="login__header">
+        <h1 className="login__title text-xl-medium md:display-xs-medium">
+          {title}
+        </h1>
+        <div
+          className="login__subtitle text-sm-regular"
+          dangerouslySetInnerHTML={{ __html: subtitle }}
+        />
+      </div>
+
+      {loginForm.isFailure && loginForm.responseMessage && (
+        <div className="login__error-banner text-sm-regular">
+          {loginForm.responseMessage}
+        </div>
+      )}
+
+      {showSocialLogin && (
+        <div className="login__social">
+          {showGoogleLogin && (
+            <SocialLoginButton
+              icon={<GoogleSVG />}
+              onClick={() => socialLogin(customerStore, "google")}
+            >
+              {googleButtonText}
+            </SocialLoginButton>
+          )}
+          {showFacebookLogin && (
+            <SocialLoginButton
+              icon={<FacebookSVG />}
+              onClick={() => socialLogin(customerStore, "facebook")}
+            >
+              {facebookButtonText}
+            </SocialLoginButton>
+          )}
+        </div>
+      )}
+
+      {showSocialLogin && (
+        <div className="login__divider">
+          <span className="login__divider-line" />
+          <span className="login__divider-text text-xs-regular">
+            {dividerText}
+          </span>
+          <span className="login__divider-line" />
+        </div>
+      )}
+
+      <form className="login__form" onSubmit={handleSubmit}>
+        <FormItem
+          label={emailLabel}
+          htmlFor="login-email"
+          status={loginForm.email?.hasError ? "error" : "default"}
+          helper={
+            loginForm.email?.hasError ? loginForm.email.message : undefined
+          }
+        >
+          <Input
+            id="login-email"
+            type="email"
+            name="email"
+            autoComplete="email"
+            placeholder={emailPlaceholder}
+            value={loginForm.email?.value ?? ""}
+            onInput={(e: Event) =>
+              setLoginFormEmail(loginForm, (e.target as HTMLInputElement).value)
+            }
+          />
+        </FormItem>
+
+        <FormItem
+          label={passwordLabel}
+          htmlFor="login-password"
+          status={loginForm.password?.hasError ? "error" : "default"}
+          helper={
+            loginForm.password?.hasError
+              ? loginForm.password.message
+              : undefined
+          }
+        >
+          <Input
+            id="login-password"
+            password
+            name="current-password"
+            autoComplete="current-password"
+            placeholder={passwordPlaceholder}
+            value={loginForm.password?.value ?? ""}
+            onInput={(e: Event) =>
+              setLoginFormPassword(
+                loginForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+          />
+        </FormItem>
+
+        <div className="login__options">
+          <button
+            type="button"
+            className="login__forgot text-sm-regular"
+            onClick={() => Router.navigateToPage("FORGOT_PASSWORD")}
+          >
+            {forgotPasswordText}
+          </button>
+        </div>
+
+        <Button
+          variant="primary"
+          size="s"
+          className="login__submit-btn"
+          disabled={loginForm.isSubmitting}
+        >
+          {loginForm.isSubmitting ? submittingButtonText : submitButtonText}
+        </Button>
+      </form>
+
+      <div className="login__footer">
+        <button
+          type="button"
+          className="login__create-account text-sm-regular"
+          onClick={() => Router.navigateToPage("REGISTER")}
+        >
+          {createAccountText}
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export default LoginForm;

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

@@ -0,0 +1,169 @@
+{
+  "id": "{{PROJECT_ID}}-login",
+  "name": "Login",
+  "type": "section",
+  "entry": "./src/components/Login/index.tsx",
+  "styles": "./src/components/Login/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş Yap",
+      "groupId": "content"
+    },
+    {
+      "name": "subtitle",
+      "displayName": "Alt Başlık",
+      "type": "RICH_TEXT",
+      "required": false,
+      "defaultValue": "<p>Hesabınıza giriş yaparak siparişlerinizi takip edebilir ve alışverişe devam edebilirsiniz.</p>",
+      "groupId": "content"
+    },
+    {
+      "name": "emailLabel",
+      "displayName": "E-posta Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "E-posta",
+      "groupId": "email"
+    },
+    {
+      "name": "emailPlaceholder",
+      "displayName": "E-posta Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ornek@email.com",
+      "groupId": "email"
+    },
+    {
+      "name": "passwordLabel",
+      "displayName": "Şifre Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Şifre",
+      "groupId": "password"
+    },
+    {
+      "name": "passwordPlaceholder",
+      "displayName": "Şifre Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Şifrenizi girin",
+      "groupId": "password"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Giriş Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş Yap",
+      "groupId": "buttons"
+    },
+    {
+      "name": "submittingButtonText",
+      "displayName": "Giriş Yapılıyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Giriş yapılıyor...",
+      "groupId": "buttons"
+    },
+    {
+      "name": "forgotPasswordText",
+      "displayName": "Parolamı Unuttum Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Parolamı unuttum",
+      "groupId": "buttons"
+    },
+    {
+      "name": "createAccountText",
+      "displayName": "Hesap Oluştur Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Yeni hesap oluştur",
+      "groupId": "buttons"
+    },
+    {
+      "name": "showGoogleLogin",
+      "displayName": "Google ile Giriş",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "google"
+    },
+    {
+      "name": "googleButtonText",
+      "displayName": "Google Buton Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Google ile giriş yap",
+      "groupId": "google"
+    },
+    {
+      "name": "showFacebookLogin",
+      "displayName": "Facebook ile Giriş",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "facebook"
+    },
+    {
+      "name": "facebookButtonText",
+      "displayName": "Facebook Buton Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Facebook ile giriş yap",
+      "groupId": "facebook"
+    },
+    {
+      "name": "dividerText",
+      "displayName": "Ayırıcı Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "veya",
+      "groupId": "socialLogin"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Sayfa başlığı ve açıklama"
+    },
+    {
+      "id": "formFields",
+      "name": "Form Alanları",
+      "description": "Giriş formu etiket ve placeholder metinleri",
+      "children": [
+        {
+          "id": "email",
+          "name": "E-posta"
+        },
+        {
+          "id": "password",
+          "name": "Şifre"
+        }
+      ]
+    },
+    {
+      "id": "buttons",
+      "name": "Butonlar",
+      "description": "Buton ve link metinleri"
+    },
+    {
+      "id": "socialLogin",
+      "name": "Sosyal Medya ile Giriş",
+      "description": "Google ve Facebook ile giriş ayarları",
+      "children": [
+        {
+          "id": "google",
+          "name": "Google"
+        },
+        {
+          "id": "facebook",
+          "name": "Facebook"
+        }
+      ]
+    }
+  ]
+}

package/data/section-templates/login-section/index.tsx

@@ -0,0 +1,37 @@
+import {
+  customerStore,
+  initLoginForm,
+  Router,
+  getLoginForm,
+  handleSocialLogin,
+} from "@ikas/bp-storefront";
+import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
+
+import { Props } from "./types";
+import LoginForm from "./components/LoginForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function Login(props: Props) {
+  const loginForm = getLoginForm(customerStore);
+
+  const isChecking = useRedirectIfLoggedIn(() => {
+    initLoginForm(loginForm);
+    handleSocialLogin(customerStore).then((result) => {
+      if (result.status === "success") {
+        Router.navigateToPage("ACCOUNT");
+      }
+    });
+  });
+
+  if (isChecking) return <PageLoader />;
+
+  return (
+    <section className="login">
+      <div className="login__wrapper kombos-container">
+        <LoginForm loginForm={loginForm} {...props} />
+      </div>
+    </section>
+  );
+}
+
+export default Login;

package/data/section-templates/login-section/styles.css

@@ -0,0 +1,129 @@
+.login {
+  width: 100%;
+}
+
+.login__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.login__container {
+  width: 100%;
+  max-width: 29rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.login__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.login__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.login__subtitle {
+  color: var(--kombos-gray-700);
+  margin: 0;
+  white-space: pre-line;
+}
+
+.login__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);
+}
+
+/* Social Login */
+.login__social {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Divider */
+.login__divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.login__divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--kombos-gray-200);
+}
+
+.login__divider-text {
+  color: var(--kombos-gray-500);
+  white-space: nowrap;
+}
+
+.login__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.login__options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.login__forgot {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-900);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.login__forgot:hover {
+  text-decoration: underline;
+}
+
+.login__submit-btn {
+  width: 100%;
+}
+
+.login__footer {
+  text-align: center;
+}
+
+.login__create-account {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-900);
+  cursor: pointer;
+}
+
+.login__create-account:hover {
+  text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+  .login__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .login__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

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