@ikas/component-cli 0.133.0 → 1.1.0

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 = "Create Account",
-  subtitle = "Create your free account and start shopping.",
-  firstNameLabel = "First Name",
-  lastNameLabel = "Last Name",
-  emailLabel = "Email",
-  passwordLabel = "Password",
-  firstNamePlaceholder,
-  lastNamePlaceholder,
-  emailPlaceholder,
-  passwordPlaceholder = "Enter your password",
-  submitButtonText = "Sign Up",
-  submittingButtonText = "Signing up...",
-  loginLinkText = "Already have an account? Sign in",
-  marketingConsentText = "I want to receive emails about campaigns and promotions",
-  agreementConsentText = "I accept the membership agreement",
-  googleButtonText = "Sign up with Google",
-  facebookButtonText = "Sign up with Facebook",
-  dividerText = "or",
-  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;

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

@@ -1,152 +0,0 @@
-.register {
-  width: 100%;
-}
-
-.register__wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.register__container {
-  width: 100%;
-  max-width: 29rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.register__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  text-align: center;
-}
-
-.register__title {
-  color: var(--kombos-gray-900);
-  margin: 0;
-}
-
-.register__subtitle {
-  color: var(--kombos-gray-500);
-  margin: 0;
-}
-
-.register__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 */
-.register__social {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-/* Divider */
-.register__divider {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.register__divider-line {
-  flex: 1;
-  height: 1px;
-  background: var(--kombos-gray-200);
-}
-
-.register__divider-text {
-  color: var(--kombos-gray-500);
-  white-space: nowrap;
-}
-
-/* Form */
-.register__form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Consents */
-.register__consents {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.register__consent-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.register__consent-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-.register__consent-row > .kombos-checkbox {
-  margin-top: 3px;
-}
-
-.register__consent-error {
-  color: var(--kombos-error);
-  padding-left: 1.5rem;
-}
-
-.register__consent-label {
-  color: var(--kombos-gray-700);
-  margin-top: 1px;
-}
-
-a.register__consent-label {
-  text-decoration: none;
-}
-
-a.register__consent-label:hover {
-  color: var(--kombos-gray-900);
-}
-
-.register__submit-btn {
-  width: 100%;
-}
-
-.register__footer {
-  text-align: center;
-}
-
-.register__login-link {
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--kombos-gray-700);
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.register__login-link:hover {
-  color: var(--kombos-gray-900);
-}
-
-@media (min-width: 768px) {
-  .register__wrapper {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .register__wrapper {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-}

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

@@ -1,27 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasNavigationLink } from "@ikas/bp-storefront";
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  firstNameLabel?: string;
-  firstNamePlaceholder?: string;
-  lastNameLabel?: string;
-  lastNamePlaceholder?: string;
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  passwordLabel?: string;
-  passwordPlaceholder?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  loginLinkText?: string;
-  marketingConsentText?: string;
-  marketingConsentLink?: IkasNavigationLink | null;
-  agreementConsentText?: string;
-  agreementConsentLink?: IkasNavigationLink | null;
-  showGoogleLogin?: boolean;
-  googleButtonText?: string;
-  showFacebookLogin?: boolean;
-  facebookButtonText?: string;
-  dividerText?: string;
-}

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

@@ -1,25 +0,0 @@
-import { Props } from "./types";
-
-export function RichText({ title, content }: Props) {
-  if (!title && !content) return null;
-
-  return (
-    <section className="kombos-rich-text">
-      <div className="kombos-container">
-        {title && (
-          <h2 className="kombos-rich-text__title display-xs-semibold">
-            {title}
-          </h2>
-        )}
-        {content && (
-          <div
-            className="kombos-rich-text__content text-md-regular kombos-richtext"
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
-        )}
-      </div>
-    </section>
-  );
-}
-
-export default RichText;

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

@@ -1,51 +0,0 @@
-.kombos-rich-text {
-  width: 100%;
-}
-
-.kombos-rich-text .kombos-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  max-width: 50rem;
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
-.kombos-rich-text__title {
-  color: var(--kombos-gray-900);
-  margin: 0;
-  text-align: center;
-}
-
-.kombos-rich-text__content {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-rich-text__content a {
-  color: var(--kombos-gray-900);
-  text-decoration: underline;
-}
-
-.kombos-rich-text__content a:hover {
-  color: var(--kombos-gray-700);
-}
-
-.kombos-rich-text__content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
-}
-
-@media (min-width: 768px) {
-  .kombos-rich-text .kombos-container {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .kombos-rich-text .kombos-container {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-  }
-}

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

@@ -1,5 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  content?: string;
-}

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

@@ -1,26 +0,0 @@
-import { getDefaultSrc, createMediaSrcset } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function SocialMediaIcon({ icon, link }: Props) {
-  if (!icon) return null;
-
-  return (
-    <a
-      href={link?.href}
-      target={link?.openInNewTab ? "_blank" : undefined}
-      rel={link?.openInNewTab ? "noopener noreferrer" : undefined}
-      aria-label={link?.label || undefined}
-      className="kombos-social-media-icon"
-    >
-      <img
-        src={getDefaultSrc(icon)}
-        srcSet={createMediaSrcset(icon)}
-        sizes="20px"
-        alt={link?.label || ""}
-        className="kombos-social-media-icon__img"
-      />
-    </a>
-  );
-}
-
-export default SocialMediaIcon;

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

@@ -1,17 +0,0 @@
-.kombos-social-media-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  transition: opacity 0.15s ease;
-}
-
-.kombos-social-media-icon:hover {
-  opacity: 0.7;
-}
-
-.kombos-social-media-icon__img {
-  width: 1.25rem;
-  height: 1.25rem;
-  object-fit: contain;
-}

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

@@ -1,7 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasImage, IkasNavigationLink } from "@ikas/bp-storefront";
-
-export interface Props {
-  icon?: IkasImage | null;
-  link?: IkasNavigationLink | null;
-}