@ikas/component-cli 0.102.0 → 0.103.0

package/templates/create-full/src/components/RecoverPassword/components/RecoverPasswordForm/index.tsx

@@ -1,133 +0,0 @@
-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/templates/create-full/src/components/RecoverPassword/index.tsx

@@ -1,30 +0,0 @@
-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/templates/create-full/src/components/RecoverPassword/styles.css

@@ -1,93 +0,0 @@
-.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/templates/create-full/src/components/RecoverPassword/types.ts

@@ -1,13 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  passwordLabel?: string;
-  passwordPlaceholder?: string;
-  passwordAgainLabel?: string;
-  passwordAgainPlaceholder?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  successMessage?: string;
-  loginLinkText?: string;
-}

package/templates/create-full/src/components/Register/components/RegisterForm/index.tsx

@@ -1,326 +0,0 @@
-import {
-  customerStore,
-  getRegisterForm,
-  setRegisterFormFirstName,
-  setRegisterFormLastName,
-  setRegisterFormEmail,
-  setRegisterFormPassword,
-  setRegisterFormIsMarketingAccepted,
-  setRegisterFormIsMembershipAgreementAccepted,
-  submitRegisterForm,
-  socialLogin,
-  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";
-import Checkbox from "../../../../sub-components/Checkbox";
-import SocialLoginButton from "../../../../sub-components/SocialLoginButton";
-import { GoogleSVG, FacebookSVG } from "../../../../sub-components/icons";
-
-interface RegisterFormProps extends Props {
-  registerForm: ReturnType<typeof getRegisterForm>;
-}
-
-const RegisterForm = observer(function RegisterForm({
-  registerForm,
-  title = "Hesap Oluştur",
-  subtitle = "Hemen ücretsiz hesap oluşturun ve alışverişe başlayın.",
-  firstNameLabel = "İsim",
-  lastNameLabel = "Soyisim",
-  emailLabel = "E-posta",
-  passwordLabel = "Şifre",
-  firstNamePlaceholder,
-  lastNamePlaceholder,
-  emailPlaceholder,
-  passwordPlaceholder = "Şifrenizi girin",
-  submitButtonText = "Kayıt Ol",
-  submittingButtonText = "Kayıt yapılıyor...",
-  loginLinkText = "Zaten hesabınız var mı? Giriş yapın",
-  marketingConsentText = "Kampanya ve promosyonlardan e-posta ile haberdar olmak istiyorum",
-  agreementConsentText = "Üyelik sözleşmesini kabul ediyorum",
-  googleButtonText = "Google ile kayıt ol",
-  facebookButtonText = "Facebook ile kayıt ol",
-  dividerText = "veya",
-  showGoogleLogin = false,
-  showFacebookLogin = false,
-  marketingConsentLink,
-  agreementConsentLink,
-}: RegisterFormProps) {
-  const resolvedFirstNamePlaceholder = firstNamePlaceholder || firstNameLabel;
-  const resolvedLastNamePlaceholder = lastNamePlaceholder || lastNameLabel;
-  const resolvedEmailPlaceholder = emailPlaceholder || emailLabel;
-
-  const showSocialLogin = showGoogleLogin || showFacebookLogin;
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    const success = await submitRegisterForm(registerForm);
-    if (success) {
-      Router.navigateToPage("ACCOUNT");
-    }
-  };
-
-  return (
-    <div className="register__container">
-      <div className="register__header">
-        <h1 className="register__title text-xl-medium md:display-xs-medium">
-          {title}
-        </h1>
-        <div
-          className="register__subtitle text-sm-regular"
-          dangerouslySetInnerHTML={{ __html: subtitle }}
-        />
-      </div>
-
-      {registerForm.isFailure && registerForm.responseMessage && (
-        <div className="register__error-banner text-sm-regular">
-          {registerForm.responseMessage}
-        </div>
-      )}
-
-      {showSocialLogin && (
-        <div className="register__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="register__divider">
-          <span className="register__divider-line" />
-          <span className="register__divider-text text-xs-regular">
-            {dividerText}
-          </span>
-          <span className="register__divider-line" />
-        </div>
-      )}
-
-      <form className="register__form" onSubmit={handleSubmit}>
-        <FormItem
-          label={firstNameLabel}
-          htmlFor="register-first-name"
-          status={registerForm.firstName?.hasError ? "error" : "default"}
-          helper={
-            registerForm.firstName?.hasError
-              ? registerForm.firstName.message
-              : undefined
-          }
-        >
-          <Input
-            id="register-first-name"
-            name="given-name"
-            autoComplete="given-name"
-            placeholder={resolvedFirstNamePlaceholder}
-            value={registerForm.firstName?.value ?? ""}
-            onInput={(e: Event) =>
-              setRegisterFormFirstName(
-                registerForm,
-                (e.target as HTMLInputElement).value,
-              )
-            }
-          />
-        </FormItem>
-
-        <FormItem
-          label={lastNameLabel}
-          htmlFor="register-last-name"
-          status={registerForm.lastName?.hasError ? "error" : "default"}
-          helper={
-            registerForm.lastName?.hasError
-              ? registerForm.lastName.message
-              : undefined
-          }
-        >
-          <Input
-            id="register-last-name"
-            name="family-name"
-            autoComplete="family-name"
-            placeholder={resolvedLastNamePlaceholder}
-            value={registerForm.lastName?.value ?? ""}
-            onInput={(e: Event) =>
-              setRegisterFormLastName(
-                registerForm,
-                (e.target as HTMLInputElement).value,
-              )
-            }
-          />
-        </FormItem>
-
-        <FormItem
-          label={emailLabel}
-          htmlFor="register-email"
-          status={registerForm.email?.hasError ? "error" : "default"}
-          helper={
-            registerForm.email?.hasError
-              ? registerForm.email.message
-              : undefined
-          }
-        >
-          <Input
-            id="register-email"
-            type="email"
-            name="email"
-            autoComplete="email"
-            placeholder={resolvedEmailPlaceholder}
-            value={registerForm.email?.value ?? ""}
-            onInput={(e: Event) =>
-              setRegisterFormEmail(
-                registerForm,
-                (e.target as HTMLInputElement).value,
-              )
-            }
-          />
-        </FormItem>
-
-        <FormItem
-          label={passwordLabel}
-          htmlFor="register-password"
-          status={registerForm.password?.hasError ? "error" : "default"}
-          helper={
-            registerForm.password?.hasError
-              ? registerForm.password.message
-              : undefined
-          }
-        >
-          <Input
-            id="register-password"
-            password
-            name="new-password"
-            autoComplete="new-password"
-            placeholder={passwordPlaceholder}
-            value={registerForm.password?.value ?? ""}
-            onInput={(e: Event) =>
-              setRegisterFormPassword(
-                registerForm,
-                (e.target as HTMLInputElement).value,
-              )
-            }
-          />
-        </FormItem>
-
-        <div className="register__consents">
-          <div className="register__consent-field">
-            <div className="register__consent-row">
-              <Checkbox
-                checked={registerForm.isMarketingAccepted?.value ?? false}
-                onChange={(checked) =>
-                  setRegisterFormIsMarketingAccepted(registerForm, checked)
-                }
-              />
-              {marketingConsentLink?.href ? (
-                <a
-                  className="register__consent-label text-sm-regular"
-                  href={marketingConsentLink.href}
-                  target={
-                    marketingConsentLink.openInNewTab ? "_blank" : undefined
-                  }
-                  rel={
-                    marketingConsentLink.openInNewTab
-                      ? "noopener noreferrer"
-                      : undefined
-                  }
-                  dangerouslySetInnerHTML={{ __html: marketingConsentText }}
-                />
-              ) : (
-                <span
-                  className="register__consent-label text-sm-regular"
-                  dangerouslySetInnerHTML={{ __html: marketingConsentText }}
-                />
-              )}
-            </div>
-            {registerForm.isMarketingAccepted?.hasError && (
-              <span className="register__consent-error text-xs-regular">
-                {registerForm.isMarketingAccepted.message}
-              </span>
-            )}
-          </div>
-
-          <div className="register__consent-field">
-            <div className="register__consent-row">
-              <Checkbox
-                checked={
-                  registerForm.isMembershipAgreementAccepted?.value ?? false
-                }
-                onChange={(checked) =>
-                  setRegisterFormIsMembershipAgreementAccepted(
-                    registerForm,
-                    checked,
-                  )
-                }
-                status={
-                  registerForm.isMembershipAgreementAccepted?.hasError
-                    ? "error"
-                    : "default"
-                }
-              />
-              {agreementConsentLink?.href ? (
-                <a
-                  className="register__consent-label text-sm-regular"
-                  href={agreementConsentLink.href}
-                  target={
-                    agreementConsentLink.openInNewTab ? "_blank" : undefined
-                  }
-                  rel={
-                    agreementConsentLink.openInNewTab
-                      ? "noopener noreferrer"
-                      : undefined
-                  }
-                  dangerouslySetInnerHTML={{ __html: agreementConsentText }}
-                />
-              ) : (
-                <span
-                  className="register__consent-label text-sm-regular"
-                  dangerouslySetInnerHTML={{ __html: agreementConsentText }}
-                />
-              )}
-            </div>
-            {registerForm.isMembershipAgreementAccepted?.hasError && (
-              <span className="register__consent-error text-xs-regular">
-                {registerForm.isMembershipAgreementAccepted.message}
-              </span>
-            )}
-          </div>
-        </div>
-
-        <Button
-          variant="primary"
-          size="s"
-          className="register__submit-btn"
-          disabled={registerForm.isSubmitting}
-        >
-          {registerForm.isSubmitting ? submittingButtonText : submitButtonText}
-        </Button>
-      </form>
-
-      <div className="register__footer">
-        <button
-          type="button"
-          className="register__login-link text-sm-medium"
-          onClick={() => Router.navigateToPage("LOGIN")}
-        >
-          {loginLinkText}
-        </button>
-      </div>
-    </div>
-  );
-});
-
-export default RegisterForm;

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

@@ -1,30 +0,0 @@
-import {
-  customerStore,
-  getRegisterForm,
-  initRegisterForm,
-} from "@ikas/bp-storefront";
-import { useRedirectIfLoggedIn } from "../../hooks/useRedirectIfLoggedIn";
-
-import { Props } from "./types";
-import RegisterForm from "./components/RegisterForm";
-import PageLoader from "../../sub-components/PageLoader";
-
-export function Register(props: Props) {
-  const registerForm = getRegisterForm(customerStore);
-
-  const isChecking = useRedirectIfLoggedIn(() => {
-    initRegisterForm(registerForm);
-  });
-
-  if (isChecking) return <PageLoader />;
-
-  return (
-    <section className="register">
-      <div className="register__wrapper kombos-container">
-        <RegisterForm registerForm={registerForm} {...props} />
-      </div>
-    </section>
-  );
-}
-
-export default Register;