@ikas/component-cli 0.92.0 → 0.94.0

package/templates/create-full/src/components/Footer/styles.css

@@ -0,0 +1,175 @@
+.kombos-footer {
+  width: 100%;
+  border-top: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-footer__wrapper {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+/* ===== Top section ===== */
+
+.kombos-footer__top {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+/* Brand */
+
+.kombos-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-footer__logo-wrap {
+  width: 6rem;
+  height: 4rem;
+  overflow: hidden;
+}
+
+.kombos-footer__logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: left center;
+}
+
+.kombos-footer__desc {
+  margin: 0;
+  color: var(--kombos-gray-700);
+  max-width: 21.5rem;
+}
+
+/* Socials */
+
+.kombos-footer__socials {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  font-size: 1.25rem;
+}
+
+/* Link columns */
+
+.kombos-footer__columns {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+
+.kombos-footer__col {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.kombos-footer__col-title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-footer__col-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-footer__col-link {
+  color: var(--footer-link-color, var(--kombos-gray-700));
+  text-decoration: none;
+  transition: color 0.15s ease;
+  width: fit-content;
+}
+
+.kombos-footer__col-link:hover {
+  color: var(--footer-link-hover-color, var(--kombos-gray-900));
+}
+
+/* ===== Bottom bar ===== */
+
+.kombos-footer__bottom {
+  border-top: 1px solid var(--kombos-gray-200);
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-footer__copyright {
+  margin: 0;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-footer__badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: var(--kombos-gray-50);
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  width: fit-content;
+}
+
+.kombos-footer__badge-logo {
+  width: 42px;
+  height: auto;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-footer__badge-text {
+  color: var(--kombos-gray-900);
+  white-space: nowrap;
+}
+
+/* ===== 2 columns (660px+) ===== */
+
+@media (min-width: 660px) {
+  .kombos-footer__columns {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ===== Tablet (769px+) ===== */
+
+@media (min-width: 768px) {
+  .kombos-footer__socials {
+    gap: 0.75rem;
+  }
+}
+
+/* ===== Desktop (1025px+) ===== */
+
+@media (min-width: 1024px) {
+  .kombos-footer__wrapper {
+    padding-top: 3rem;
+  }
+
+  .kombos-footer__top {
+    flex-direction: row;
+    gap: 7.75rem;
+  }
+
+  .kombos-footer__brand {
+    width: 21.5rem;
+    flex-shrink: 0;
+  }
+
+  .kombos-footer__columns {
+    flex: 1;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .kombos-footer__bottom {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

package/templates/create-full/src/components/Footer/types.ts

@@ -0,0 +1,15 @@
+// This file is auto-generated — do not edit manually.
+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/templates/create-full/src/components/ForgotPassword/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/templates/create-full/src/components/ForgotPassword/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/templates/create-full/src/components/ForgotPassword/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/templates/create-full/src/components/ForgotPassword/types.ts

@@ -0,0 +1,13 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  backToLoginText?: string;
+  successTitle?: string;
+  successMessage?: string;
+  successButtonText?: string;
+}

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

@@ -0,0 +1,53 @@
+// import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { useEffect, useCallback } from "preact/hooks";
+import { Props } from "./types";
+import { ToastContainer } from "../../sub-components/Toast";
+import { useToast } from "../../hooks/useToast";
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+
+export function Header(props: Props) {
+  const {
+    backgroundColor = "var(--kombos-white)",
+    borderColor = "var(--kombos-gray-100)",
+    components,
+  } = props;
+
+  const toast = useToast();
+
+  const handleShowToast = useCallback(
+    (e: Event) => {
+      const detail = (e as CustomEvent).detail as {
+        message: string;
+        variant: "success" | "error";
+      };
+      toast.show(detail.message, detail.variant);
+    },
+    [toast.show],
+  );
+
+  useEffect(() => {
+    window.addEventListener("ikas:show-toast", handleShowToast);
+    return () => window.removeEventListener("ikas:show-toast", handleShowToast);
+  }, [handleShowToast]);
+
+  return (
+    <>
+      <section
+        className="kombos-header"
+        style={{
+          backgroundColor,
+          borderColor,
+        }}
+      >
+        <IkasComponentRenderer
+          id="header"
+          components={components}
+          parentProps={props}
+        />
+      </section>
+      <ToastContainer toasts={toast.toasts} onDismiss={toast.dismiss} />
+    </>
+  );
+}
+
+export default Header;

package/templates/create-full/src/components/Header/styles.css

@@ -0,0 +1,6 @@
+/* ===== Header Section ===== */
+.kombos-header {
+  width: 100%;
+  background-color: var(--kombos-white);
+  border-bottom: 1px solid var(--kombos-gray-200);
+}

package/templates/create-full/src/components/Header/types.ts

@@ -0,0 +1,6 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  backgroundColor?: string;
+  borderColor?: string;
+  components?: any;
+}

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

@@ -0,0 +1,110 @@
+import { useState, useEffect, useCallback, useRef } from "preact/hooks";
+import { Props } from "./types";
+import SliderArrow from "../../sub-components/SliderArrow";
+import { cx } from "../../utils/cx";
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+
+export function HeroSlider(props: Props) {
+  const {
+    backgroundColor,
+    autoplay = false,
+    autoplayDelay = 5000,
+    fullWidth = false,
+    showArrows = false,
+    components,
+  } = props;
+
+  const count = components?.length ?? 0;
+
+  const [current, setCurrent] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const resetAutoplay = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    if (!autoplay || count <= 1) return;
+    timerRef.current = setInterval(() => {
+      setCurrent((prev) => (prev + 1) % count);
+    }, autoplayDelay);
+  }, [autoplay, autoplayDelay, count]);
+
+  const goTo = useCallback(
+    (index: number) => {
+      if (count === 0) return;
+      setCurrent(((index % count) + count) % count);
+      resetAutoplay();
+    },
+    [count, resetAutoplay],
+  );
+
+  useEffect(() => {
+    resetAutoplay();
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [resetAutoplay]);
+
+  if (count === 0) return null;
+
+  const viewportClass = cx(
+    "kombos-hero-slider__viewport",
+    !fullWidth && "kombos-hero-slider__viewport--contained",
+    !fullWidth && "kombos-container",
+  );
+
+  return (
+    <section
+      className="kombos-hero-slider"
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <div className={viewportClass}>
+        <div className="kombos-hero-slider__viewport-inner">
+          <div
+            className="kombos-hero-slider__track"
+            style={{ transform: `translateX(-${current * 100}%)` }}
+          >
+            <IkasComponentRenderer
+              id="hero-slider"
+              components={components}
+              parentProps={props}
+            />
+          </div>
+
+          {/* Navigation arrows */}
+          {showArrows && count > 1 && (
+            <>
+              <SliderArrow
+                direction="left"
+                className="kombos-hero-slider__arrow kombos-hero-slider__arrow--prev"
+                onClick={() => goTo(current - 1)}
+              />
+              <SliderArrow
+                direction="right"
+                className="kombos-hero-slider__arrow kombos-hero-slider__arrow--next"
+                onClick={() => goTo(current + 1)}
+              />
+            </>
+          )}
+
+          {/* Dot pagination */}
+          {count > 1 && (
+            <div className="kombos-hero-slider__dots">
+              {Array.from({ length: count }).map((_, i) => (
+                <button
+                  key={i}
+                  className={cx(
+                    "kombos-hero-slider__dot",
+                    i === current && "kombos-hero-slider__dot--active",
+                  )}
+                  onClick={() => goTo(i)}
+                  aria-label={`Go to slide ${i + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default HeroSlider;