@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,175 +0,0 @@
-.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

@@ -1,15 +0,0 @@
-// 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

@@ -1,129 +0,0 @@
-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 = "Forgot Password",
-  subtitle = "We'll send you an email to reset your password",
-  emailLabel = "Email",
-  emailPlaceholder = "example@email.com",
-  submitButtonText = "Send",
-  submittingButtonText = "Sending...",
-  successTitle = "Forgot Password",
-  successMessage = "We've sent you an email.",
-  successButtonText = "Start Shopping",
-  backToLoginText = "Back to Login",
-}: 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

@@ -1,30 +0,0 @@
-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

@@ -1,85 +0,0 @@
-.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

@@ -1,13 +0,0 @@
-// 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

@@ -1,46 +0,0 @@
-// 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 { 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={{ display: "contents" }}
-      >
-        <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

@@ -1,4 +0,0 @@
-/* ===== Header Section ===== */
-.kombos-header {
-  width: 100%;
-}

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

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

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

@@ -1,110 +0,0 @@
-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;