@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,10 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  cookieContent: string;
-  buttonText?: string;
-  position?: boolean;
-  showCloseIcon?: boolean;
-  backgroundColor?: string;
-  textColor?: string;
-  buttonTextColor?: string;
-}

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

@@ -1,168 +0,0 @@
-import { useState, useEffect } from "preact/hooks";
-import {
-  customerStore,
-  activateCustomer,
-  resendCustomerActivationMail,
-  Router,
-} from "@ikas/bp-storefront";
-
-import { Props } from "./types";
-import { cx } from "../../utils/cx";
-import { CheckCircleSVG, XCircleSVG } from "../../sub-components/icons";
-import SpinnerIcon from "../../sub-components/SpinnerIcon";
-import Button from "../../sub-components/Button";
-import FormItem from "../../sub-components/FormItem";
-import Input from "../../sub-components/Input";
-
-type Status = "loading" | "success" | "error";
-type ResendStatus = "idle" | "sending" | "success" | "error";
-
-export function CustomerEmailVerification({
-  title = "Account Activation",
-  successTitle = "Your Account Has Been Activated!",
-  successMessage = "Your account has been successfully activated. You can sign in and start shopping.",
-  errorTitle = "Activation Failed",
-  errorMessage = "Your activation link may be invalid or expired.",
-  loadingMessage = "Activating your account...",
-  loginButtonText = "Sign In",
-  resendTitle = "Resend Activation Email",
-  emailLabel = "Email",
-  emailPlaceholder = "example@email.com",
-  resendButtonText = "Resend",
-  resendingButtonText = "Sending...",
-  resendSuccessMessage = "Activation email has been resent. Please check your inbox.",
-  resendErrorMessage = "Failed to send email. Please try again.",
-}: Props) {
-  const [status, setStatus] = useState<Status>("loading");
-  const [email, setEmail] = useState("");
-  const [resendStatus, setResendStatus] = useState<ResendStatus>("idle");
-
-  useEffect(() => {
-    let cancelled = false;
-
-    activateCustomer(customerStore)
-      .then((success) => {
-        if (!cancelled) setStatus(success ? "success" : "error");
-      })
-      .catch(() => {
-        if (!cancelled) setStatus("error");
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const resending = resendStatus === "sending";
-
-  const handleResend = async () => {
-    const trimmed = email.trim();
-    if (!trimmed || resending) return;
-    setResendStatus("sending");
-
-    const success = await resendCustomerActivationMail(customerStore, trimmed);
-    setResendStatus(success ? "success" : "error");
-  };
-
-  return (
-    <section className="customer-email-verification">
-      <div className="customer-email-verification__wrapper kombos-container">
-        <div className="customer-email-verification__container">
-          {status === "loading" && (
-            <div className="customer-email-verification__state">
-              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
-                {title}
-              </h1>
-              <SpinnerIcon className="customer-email-verification__spinner" />
-              <p className="customer-email-verification__state-text text-md-regular">
-                {loadingMessage}
-              </p>
-            </div>
-          )}
-
-          {status === "success" && (
-            <div className="customer-email-verification__state">
-              <div className="customer-email-verification__icon customer-email-verification__icon--success">
-                <CheckCircleSVG />
-              </div>
-              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
-                {successTitle}
-              </h1>
-              <p className="customer-email-verification__message text-md-regular">{successMessage}</p>
-              <Button
-                className="customer-email-verification__action-btn"
-                variant="primary"
-                size="s"
-                onClick={() => Router.navigateToPage("LOGIN")}
-              >
-                {loginButtonText}
-              </Button>
-            </div>
-          )}
-
-          {status === "error" && (
-            <div className="customer-email-verification__state">
-              <div className="customer-email-verification__icon customer-email-verification__icon--error">
-                <XCircleSVG />
-              </div>
-              <h1 className="customer-email-verification__title text-xl-medium md:display-xs-medium">
-                {errorTitle}
-              </h1>
-              <p className="customer-email-verification__message text-md-regular">{errorMessage}</p>
-
-              <div className="customer-email-verification__resend">
-                <h2 className="customer-email-verification__resend-title text-md-semibold md:text-lg-semibold">
-                  {resendTitle}
-                </h2>
-                <form
-                  className="customer-email-verification__resend-form"
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    handleResend();
-                  }}
-                >
-                  <FormItem label={emailLabel} htmlFor="customer-email-verification-email">
-                    <Input
-                      id="customer-email-verification-email"
-                      type="email"
-                      name="email"
-                      autoComplete="email"
-                      placeholder={emailPlaceholder}
-                      value={email}
-                      onInput={(e) =>
-                        setEmail((e.target as HTMLInputElement).value)
-                      }
-                    />
-                  </FormItem>
-                  <Button
-                    className="customer-email-verification__resend-btn"
-                    variant="primary"
-                    size="s"
-                    disabled={resending || !email.trim()}
-                  >
-                    {resending ? resendingButtonText : resendButtonText}
-                  </Button>
-                </form>
-
-                {(resendStatus === "success" || resendStatus === "error") && (
-                  <div
-                    className={cx(
-                      "customer-email-verification__banner text-sm-regular",
-                      `customer-email-verification__banner--${resendStatus}`,
-                    )}
-                  >
-                    {resendStatus === "success"
-                      ? resendSuccessMessage
-                      : resendErrorMessage}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export default CustomerEmailVerification;

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

@@ -1,118 +0,0 @@
-.customer-email-verification {
-  width: 100%;
-}
-
-.customer-email-verification__wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.customer-email-verification__container {
-  width: 100%;
-  max-width: 29rem;
-}
-
-.customer-email-verification__state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  text-align: center;
-}
-
-.customer-email-verification__spinner {
-  font-size: 2.5rem;
-  color: var(--kombos-gray-500);
-}
-
-.customer-email-verification__state-text {
-  color: var(--kombos-gray-500);
-  margin: 0;
-}
-
-.customer-email-verification__icon {
-  font-size: 3rem;
-}
-
-.customer-email-verification__icon--success {
-  color: var(--kombos-success);
-}
-
-.customer-email-verification__icon--error {
-  color: var(--kombos-error);
-}
-
-.customer-email-verification__title {
-  color: var(--kombos-gray-900);
-  margin: 0;
-}
-
-.customer-email-verification__message {
-  color: var(--kombos-gray-500);
-  margin: 0;
-}
-
-.customer-email-verification__action-btn {
-  width: 100%;
-  margin-top: 0.5rem;
-}
-
-.customer-email-verification__resend {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--kombos-gray-200);
-}
-
-.customer-email-verification__resend-title {
-  color: var(--kombos-gray-900);
-  margin: 0;
-  text-align: left;
-}
-
-.customer-email-verification__resend-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.customer-email-verification__resend-btn {
-  width: 100%;
-}
-
-.customer-email-verification__banner {
-  padding: 0.75rem 1rem;
-  border-radius: 6px;
-}
-
-.customer-email-verification__banner--success {
-  background: rgba(18, 183, 106, 0.08);
-  border: 1px solid var(--kombos-success);
-  color: var(--kombos-success);
-}
-
-.customer-email-verification__banner--error {
-  background: rgba(255, 60, 72, 0.08);
-  border: 1px solid var(--kombos-error);
-  color: var(--kombos-error);
-}
-
-@media (min-width: 768px) {
-  .customer-email-verification__wrapper {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .customer-email-verification__wrapper {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-}

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

@@ -1,17 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title?: string;
-  successTitle?: string;
-  successMessage?: string;
-  errorTitle?: string;
-  errorMessage?: string;
-  loadingMessage?: string;
-  loginButtonText?: string;
-  resendTitle?: string;
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  resendButtonText?: string;
-  resendingButtonText?: string;
-  resendSuccessMessage?: string;
-  resendErrorMessage?: string;
-}

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

@@ -1,27 +0,0 @@
-import { getDefaultSrc } from "@ikas/bp-storefront";
-
-import { Props } from "./types";
-
-export function FeatureItem({ image, text }: Props) {
-  const src = image ? getDefaultSrc(image) : undefined;
-
-  return (
-    <div className="kombos-feature-item">
-      {src && (
-        <img
-          className="kombos-feature-item__icon"
-          src={src}
-          alt={image?.altText || ""}
-        />
-      )}
-      {text && (
-        <div
-          className="kombos-feature-item__text text-sm-medium"
-          dangerouslySetInnerHTML={{ __html: text }}
-        />
-      )}
-    </div>
-  );
-}
-
-export default FeatureItem;

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

@@ -1,19 +0,0 @@
-.kombos-feature-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-}
-
-.kombos-feature-item__icon {
-  width: 2rem;
-  height: 2rem;
-  overflow: hidden;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.kombos-feature-item__text {
-  color: var(--kombos-gray-900);
-  text-align: center;
-}

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

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

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

@@ -1,25 +0,0 @@
-// import { IkasComponentRenderer } from "@ikas/bp-storefront";
-
-import { IkasComponentRenderer } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function Features(props: Props) {
-  const { backgroundColor, components } = props;
-
-  return (
-    <section
-      className="kombos-features"
-      style={backgroundColor ? { backgroundColor } : undefined}
-    >
-      <div className="kombos-container kombos-features__container">
-        <IkasComponentRenderer
-          id="features"
-          components={components}
-          parentProps={props}
-        />
-      </div>
-    </section>
-  );
-}
-
-export default Features;

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

@@ -1,39 +0,0 @@
-.kombos-features {
-  width: 100%;
-}
-
-.kombos-features__container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1.5rem;
-  padding: 2rem 1rem;
-}
-
-.kombos-features__container > * > * > * {
-  width: calc(50% - 0.75rem);
-  flex-shrink: 0;
-}
-
-@media (min-width: 640px) {
-  .kombos-features__container > * > * > * {
-    width: calc(33.33% - 1rem);
-  }
-}
-
-@media (min-width: 768px) {
-  .kombos-features__container {
-    padding: 3rem 2rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .kombos-features__container {
-    padding: 3rem 4.5rem;
-  }
-
-  .kombos-features__container > * > * > * {
-    width: auto;
-    flex: 1 0 calc(16.66% - 1.25rem);
-  }
-}

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

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

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

@@ -1,154 +0,0 @@
-import {
-  IkasNavigationLink,
-  IkasComponentRenderer,
-  createMediaSrcset,
-  getDefaultSrc,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import { IkasLogoSVG } from "../../sub-components/icons";
-
-export function Footer(props: Props) {
-  const {
-    logo,
-    description,
-    copyrightText = "© 2026 ikas Store. All Rights Reserved",
-    linkColor,
-    linkHoverColor,
-    contactTitle = "Contact Information",
-    contactEmail,
-    contactPhone,
-    footerLinks,
-    socialMediaIcons,
-  } = props;
-
-  const columns = footerLinks?.links ?? [];
-  const hasContact = !!(contactEmail || contactPhone);
-  const hasSocials = socialMediaIcons?.length > 0;
-
-  return (
-    <footer
-      className="kombos-footer"
-      style={{
-...(linkColor ? { "--footer-link-color": linkColor } : {}),
-        ...(linkHoverColor
-          ? { "--footer-link-hover-color": linkHoverColor }
-          : {}),
-      }}
-    >
-      <div className="kombos-footer__wrapper kombos-container">
-        <div className="kombos-footer__top">
-          {/* Brand column */}
-          <div className="kombos-footer__brand">
-            {logo && (
-              <div className="kombos-footer__logo-wrap">
-                <img
-                  src={getDefaultSrc(logo)}
-                  srcSet={createMediaSrcset(logo)}
-                  sizes="96px"
-                  alt={logo?.altText || "Logo"}
-                  className="kombos-footer__logo-img"
-                  loading="lazy"
-                  decoding="async"
-                />
-              </div>
-            )}
-
-            {description && (
-              <div
-                className="kombos-footer__desc text-sm-regular"
-                dangerouslySetInnerHTML={{ __html: description }}
-              />
-            )}
-
-            {hasSocials && (
-              <div className="kombos-footer__socials">
-                <IkasComponentRenderer
-                  id="footer-socials"
-                  components={socialMediaIcons}
-                  parentProps={props}
-                />
-              </div>
-            )}
-          </div>
-
-          {/* Link columns */}
-          {(columns.length > 0 || hasContact) && (
-            <div className="kombos-footer__columns">
-              {columns.map((column: IkasNavigationLink, i: number) => (
-                <div key={i} className="kombos-footer__col">
-                  <p className="kombos-footer__col-title text-sm-medium">
-                    {column.label}
-                  </p>
-                  {column.subLinks?.length > 0 && (
-                    <nav className="kombos-footer__col-links">
-                      {column.subLinks.map(
-                        (link: IkasNavigationLink, j: number) => (
-                          <a
-                            key={j}
-                            href={link.href}
-                            className="kombos-footer__col-link text-sm-regular"
-                            target={link.openInNewTab ? "_blank" : undefined}
-                            rel={
-                              link.openInNewTab
-                                ? "noopener noreferrer"
-                                : undefined
-                            }
-                          >
-                            {link.label}
-                          </a>
-                        ),
-                      )}
-                    </nav>
-                  )}
-                </div>
-              ))}
-
-              {/* Contact column */}
-              {hasContact && (
-                <div className="kombos-footer__col">
-                  <p className="kombos-footer__col-title text-sm-medium">
-                    {contactTitle}
-                  </p>
-                  <div className="kombos-footer__col-links">
-                    {contactEmail && (
-                      <a
-                        href={`mailto:${contactEmail}`}
-                        className="kombos-footer__col-link text-sm-regular"
-                      >
-                        {contactEmail}
-                      </a>
-                    )}
-                    {contactPhone && (
-                      <a
-                        href={`tel:${contactPhone.replace(/\s/g, "")}`}
-                        className="kombos-footer__col-link text-sm-regular"
-                      >
-                        {contactPhone}
-                      </a>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Bottom bar */}
-        <div className="kombos-footer__bottom">
-          <div
-            className="kombos-footer__copyright text-xs-regular"
-            dangerouslySetInnerHTML={{ __html: copyrightText }}
-          />
-          <div className="kombos-footer__badge">
-            <IkasLogoSVG className="kombos-footer__badge-logo" />
-            <span className="kombos-footer__badge-text text-xs-medium">
-              Powered by ikas E-Commerce.
-            </span>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-export default Footer;