@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/src/components/Login/components/LoginForm/index.tsx

@@ -1,181 +0,0 @@
-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 = "Sign In",
-  subtitle = "Sign in to your account to track your orders\nand continue shopping.",
-  emailLabel = "Email",
-  emailPlaceholder = "example@email.com",
-  passwordLabel = "Password",
-  passwordPlaceholder = "Enter your password",
-  forgotPasswordText = "Forgot my password",
-  submitButtonText = "Sign In",
-  submittingButtonText = "Signing in...",
-  createAccountText = "Create new account",
-  showGoogleLogin = false,
-  showFacebookLogin = false,
-  googleButtonText = "Sign in with Google",
-  facebookButtonText = "Sign in with Facebook",
-  dividerText = "or",
-}: 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/templates/create-full/src/components/Login/index.tsx

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

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

@@ -1,18 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  passwordLabel?: string;
-  passwordPlaceholder?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  forgotPasswordText?: string;
-  createAccountText?: string;
-  showGoogleLogin?: boolean;
-  googleButtonText?: string;
-  showFacebookLogin?: boolean;
-  facebookButtonText?: string;
-  dividerText?: string;
-}

package/templates/create-full/src/components/Navbar/components/CartSidebar/index.tsx

@@ -1,203 +0,0 @@
-import { useEffect, useState, useCallback } from "preact/hooks";
-import { observer } from "@ikas/component-utils";
-import { useScrollLock } from "../../../../hooks/useScrollLock";
-import { cx } from "../../../../utils/cx";
-import {
-  XSVG,
-  Package1SVG,
-  Handbag1SVG,
-} from "../../../../sub-components/icons";
-import Button from "../../../../sub-components/Button";
-import {
-  cartStore,
-  hasCart,
-  getIkasOrderTotalItemCount,
-  getIkasOrderFormattedTotalFinalPrice,
-  getOrderAdjustmentDisplayName,
-  getOrderAdjustmentFormattedAmount,
-  removeItem,
-  getCheckoutUrlFromCartStore,
-  IkasOrderLineItem,
-  Router,
-} from "@ikas/bp-storefront";
-import type { AspectRatio, ObjectFit } from "../../../../global-types";
-import CartItem from "../../../../sub-components/CartItem";
-
-interface Props {
-  cartTitle: string;
-  emptyCartText: string;
-  checkoutButtonText: string;
-  viewCartButtonText: string;
-  totalText: string;
-  freeShippingText: string;
-  emptyCartButtonText: string;
-  imageAspectRatio?: AspectRatio;
-  imageObjectFit?: ObjectFit;
-  onClose: () => void;
-}
-
-const CartSidebar = observer(function CartSidebar({
-  cartTitle,
-  emptyCartText,
-  checkoutButtonText,
-  viewCartButtonText,
-  totalText,
-  freeShippingText,
-  emptyCartButtonText,
-  imageAspectRatio,
-  imageObjectFit,
-  onClose,
-}: Props) {
-  const [open, setOpen] = useState(false);
-
-  useScrollLock();
-
-  useEffect(() => {
-    requestAnimationFrame(() => setOpen(true));
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    setTimeout(onClose, 300);
-  }, [onClose]);
-
-  const cart = cartStore.cart;
-  const isCartLoading = cartStore.isCartLoading;
-  const cartHasItems = hasCart(cartStore);
-  const itemCount = cart ? getIkasOrderTotalItemCount(cart) : 0;
-  const lineItems = cart?.orderLineItems ?? [];
-  const adjustments = cart?.orderAdjustments ?? [];
-
-  const handleRemove = async (item: IkasOrderLineItem) => {
-    await removeItem(item);
-  };
-
-  return (
-    <div
-      className={cx("kombos-cart-overlay", open && "kombos-cart-overlay--open")}
-    >
-      <div className="kombos-cart-backdrop" onClick={handleClose} />
-      <aside className="kombos-cart-sidebar">
-        {/* Header */}
-        <div className="kombos-cart-sidebar__head">
-          <h3 className="kombos-cart-sidebar__title text-md-medium">
-            {cartTitle} ({itemCount})
-          </h3>
-          <button
-            className="kombos-cart-sidebar__close"
-            onClick={handleClose}
-            aria-label="Close"
-          >
-            <XSVG />
-          </button>
-        </div>
-
-        {/* Free Shipping Banner */}
-        {freeShippingText && (
-          <div className="kombos-cart-sidebar__banner">
-            <Package1SVG />
-            <span className="text-xs-semibold">{freeShippingText}</span>
-          </div>
-        )}
-
-        {/* Loading */}
-        {isCartLoading && (
-          <div className="kombos-cart-sidebar__loading text-sm-regular" />
-        )}
-
-        {/* Empty State */}
-        {!cartHasItems && !isCartLoading && (
-          <div className="kombos-cart-sidebar__empty">
-            <Handbag1SVG />
-            <p className="kombos-cart-sidebar__empty-text text-md-medium">
-              {emptyCartText}
-            </p>
-            <Button
-              variant="primary"
-              size="s"
-              className="kombos-cart-sidebar__empty-btn"
-              onClick={handleClose}
-            >
-              {emptyCartButtonText}
-            </Button>
-          </div>
-        )}
-
-        {/* Cart Items */}
-        {cartHasItems && (
-          <div className="kombos-cart-sidebar__items">
-            {lineItems.map((item) => (
-              <CartItem
-                key={item.id}
-                item={item}
-                onRemove={handleRemove}
-                aspectRatio={imageAspectRatio}
-                objectFit={imageObjectFit}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Adjustments */}
-        {adjustments.length > 0 && (
-          <div className="kombos-cart-sidebar__adjustments">
-            {adjustments.map((adj: any, i: number) => (
-              <div
-                key={i}
-                className="kombos-cart-sidebar__adj-row text-sm-regular"
-              >
-                <span>{getOrderAdjustmentDisplayName(adj)}</span>
-                <span className="kombos-cart-sidebar__adj-amount text-sm-medium">
-                  {getOrderAdjustmentFormattedAmount(adj)}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Footer */}
-        {cartHasItems && cart && (
-          <div className="kombos-cart-sidebar__footer">
-            <div className="kombos-cart-sidebar__total text-md-semibold">
-              <span>{totalText}</span>
-              <span>{getIkasOrderFormattedTotalFinalPrice(cart)}</span>
-            </div>
-            <div className="kombos-cart-sidebar__footer-buttons">
-              <a
-                href="/cart"
-                className="kombos-cart-sidebar__view-cart-link"
-                onClick={(e: Event) => {
-                  e.preventDefault();
-                  handleClose();
-                  Router.navigateToPage("CART");
-                }}
-              >
-                <Button
-                  variant="secondary"
-                  size="s"
-                  className="kombos-cart-sidebar__view-cart-btn"
-                >
-                  {viewCartButtonText}
-                </Button>
-              </a>
-              <a
-                href={getCheckoutUrlFromCartStore(cartStore)}
-                className="kombos-cart-sidebar__checkout"
-              >
-                <Button
-                  variant="primary"
-                  size="s"
-                  className="kombos-cart-sidebar__checkout-btn"
-                >
-                  {checkoutButtonText}
-                </Button>
-              </a>
-            </div>
-          </div>
-        )}
-      </aside>
-    </div>
-  );
-});
-
-export default CartSidebar;