@onexapis/cli 1.1.34 → 1.1.37

package/templates/default/sections/auth-verify-code/auth-verify-code-default.tsx

@@ -0,0 +1,209 @@
+/**
+ * Auth Verify Code - Default Template
+ * OTP verification form with customizable settings
+ */
+
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreUtils from "@onexapis/core/utils";
+import { useVerifyCodeForm } from "../../hooks/use-verify-code-form";
+
+const { getSectionValues } = coreUtils;
+
+export function AuthVerifyCodeDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const {
+    heading,
+    subheading,
+    submitButtonText,
+    loadingText,
+    resendText,
+    resendCountdownText,
+    didNotReceiveText,
+    loginPromptText,
+    loginLinkText,
+    loginUrl,
+    backgroundColor,
+    cardBackground,
+    primaryColor,
+    textColor,
+    cardBorderRadius,
+  } = settings;
+
+  const {
+    code,
+    error,
+    countdown,
+    email,
+    isVerifying,
+    isResending,
+    isLoading,
+    inputRefs,
+    handleCodeChange,
+    handleKeyDown,
+    handlePaste,
+    handleSubmit,
+    handleResend,
+  } = useVerifyCodeForm();
+
+  const bgColor = String(backgroundColor || "#F9FAFB");
+  const cardBg = String(cardBackground || "#FFFFFF");
+  const btnColor = String(primaryColor || "#2563EB");
+  const headingColor = String(textColor || "#111827");
+  const radiusClass = `rounded-${String(cardBorderRadius || "2xl")}`;
+
+  return (
+    <section
+      className="min-h-screen w-full flex items-center justify-center p-4"
+      style={{ backgroundColor: bgColor }}
+      data-section-id={section.id}
+      data-section-type={section.type}
+      data-section-template="default"
+    >
+      <div
+        className={`w-full max-w-md shadow-lg p-8 ${radiusClass}`}
+        style={{ backgroundColor: cardBg }}
+      >
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold" style={{ color: headingColor }}>
+            {String(heading)}
+          </h1>
+          <p className="mt-2 text-sm text-gray-500">
+            {String(subheading)}
+            {email && (
+              <span
+                className="block mt-1 font-medium"
+                style={{ color: btnColor }}
+              >
+                {email}
+              </span>
+            )}
+          </p>
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-600 text-center">
+            {error}
+          </div>
+        )}
+
+        {/* OTP Form */}
+        <form
+          onSubmit={handleSubmit}
+          className="flex flex-col items-center gap-6"
+        >
+          {/* OTP Inputs */}
+          <div className="flex items-center justify-center gap-2 md:gap-3">
+            {code.map((digit, index) => (
+              <input
+                key={index}
+                ref={(el) => {
+                  inputRefs.current[index] = el;
+                }}
+                type="text"
+                inputMode="numeric"
+                maxLength={1}
+                value={digit}
+                onChange={(e) => handleCodeChange(index, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(index, e)}
+                onPaste={handlePaste}
+                disabled={isVerifying || isEditing}
+                className={`h-12 w-10 md:w-12 rounded-lg border text-center text-xl font-medium text-gray-900 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:opacity-50 ${
+                  error ? "border-red-400" : "border-gray-300"
+                }`}
+                aria-label={`Digit ${index + 1}`}
+              />
+            ))}
+          </div>
+
+          {/* Resend Code */}
+          <button
+            type="button"
+            disabled={isLoading || countdown > 0 || isEditing}
+            onClick={handleResend}
+            className="text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-80"
+            style={{ color: btnColor }}
+          >
+            {countdown > 0 ? (
+              <span className="text-gray-400">
+                {String(resendCountdownText)} {countdown}s
+              </span>
+            ) : isResending ? (
+              "Sending..."
+            ) : (
+              <>
+                <span className="text-gray-500">
+                  {String(didNotReceiveText)}{" "}
+                </span>
+                {String(resendText)}
+              </>
+            )}
+          </button>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={isVerifying || code.join("").length !== 6 || isEditing}
+            className="h-11 w-full rounded-lg text-sm font-medium text-white transition-colors hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            style={{ backgroundColor: btnColor }}
+          >
+            {isVerifying && (
+              <svg
+                className="h-4 w-4 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            )}
+            {isVerifying ? String(loadingText) : String(submitButtonText)}
+          </button>
+        </form>
+
+        {/* Login Link */}
+        <div className="mt-6 text-center">
+          <p className="text-sm text-gray-500">
+            {String(loginPromptText)}{" "}
+            {isEditing ? (
+              <span
+                className="font-medium hover:opacity-80"
+                style={{ color: btnColor }}
+              >
+                {String(loginLinkText)}
+              </span>
+            ) : (
+              <a
+                href={String(loginUrl)}
+                className="font-medium hover:opacity-80 transition-colors"
+                style={{ color: btnColor }}
+              >
+                {String(loginLinkText)}
+              </a>
+            )}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default AuthVerifyCodeDefault;

package/templates/default/sections/auth-verify-code/auth-verify-code.schema.ts

@@ -0,0 +1,150 @@
+/**
+ * Auth Verify Code Section Schema
+ * OTP verification form with editable labels
+ */
+
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "heading",
+    type: "text",
+    label: "Heading",
+    default: "Verify Your Account",
+    required: true,
+  },
+  {
+    id: "subheading",
+    type: "text",
+    label: "Subheading",
+    default: "Enter the 6-digit code sent to your email",
+  },
+  {
+    id: "submitButtonText",
+    type: "text",
+    label: "Submit Button Text",
+    default: "Verify",
+  },
+  {
+    id: "loadingText",
+    type: "text",
+    label: "Loading Text",
+    default: "Verifying...",
+  },
+  {
+    id: "resendText",
+    type: "text",
+    label: "Resend Text",
+    default: "Resend code",
+  },
+  {
+    id: "resendCountdownText",
+    type: "text",
+    label: "Countdown Text",
+    default: "Resend in",
+  },
+  {
+    id: "didNotReceiveText",
+    type: "text",
+    label: "Did Not Receive Text",
+    default: "Didn't receive a code?",
+  },
+  {
+    id: "loginPromptText",
+    type: "text",
+    label: "Login Prompt Text",
+    default: "Already have an account?",
+  },
+  {
+    id: "loginLinkText",
+    type: "text",
+    label: "Login Link Text",
+    default: "Sign in",
+  },
+  {
+    id: "loginUrl",
+    type: "url",
+    label: "Login URL",
+    default: "/login",
+  },
+  {
+    id: "countdownSeconds",
+    type: "number",
+    label: "Countdown Duration (seconds)",
+    default: 60,
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#F9FAFB",
+  },
+  {
+    id: "cardBackground",
+    type: "color",
+    label: "Card Background",
+    default: "#FFFFFF",
+  },
+  {
+    id: "primaryColor",
+    type: "color",
+    label: "Primary Color (buttons)",
+    default: "#2563EB",
+  },
+  {
+    id: "textColor",
+    type: "color",
+    label: "Heading Text Color",
+    default: "#111827",
+  },
+  {
+    id: "cardBorderRadius",
+    type: "select",
+    label: "Card Border Radius",
+    default: "2xl",
+    options: [
+      { label: "Small", value: "lg" },
+      { label: "Medium", value: "xl" },
+      { label: "Large", value: "2xl" },
+      { label: "Extra Large", value: "3xl" },
+    ],
+  },
+];
+
+export const authVerifyCodeSchema: SectionSchema = {
+  type: "my-simple-auth-verify-code",
+  name: "Auth Verify Code",
+  description: "OTP verification form with 6-digit code input",
+  category: "auth",
+  icon: "shield-check",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Verify Code",
+      description: "Clean OTP verification form",
+      isDefault: true,
+    },
+  ],
+  defaults: {
+    settings: {
+      heading: "Verify Your Account",
+      subheading: "Enter the 6-digit code sent to your email",
+      submitButtonText: "Verify",
+      loadingText: "Verifying...",
+      resendText: "Resend code",
+      resendCountdownText: "Resend in",
+      didNotReceiveText: "Didn't receive a code?",
+      loginPromptText: "Already have an account?",
+      loginLinkText: "Sign in",
+      loginUrl: "/login",
+      countdownSeconds: 60,
+      backgroundColor: "#F9FAFB",
+      cardBackground: "#FFFFFF",
+      primaryColor: "#2563EB",
+      textColor: "#111827",
+      cardBorderRadius: "2xl",
+    },
+  },
+  tags: ["auth", "verify-code", "otp"],
+};

package/templates/default/sections/auth-verify-code/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Auth Verify Code Section
+ * Exports schema and component templates
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { AuthVerifyCodeDefault } from "./auth-verify-code-default";
+
+export const authVerifyCodeComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = { default: AuthVerifyCodeDefault };
+
+export { authVerifyCodeSchema } from "./auth-verify-code.schema";

package/templates/default/sections/footer/footer-default.tsx

@@ -0,0 +1,214 @@
+/**
+ * Footer - Default Template
+ * Clean responsive footer with company info, links, and copyright
+ */
+
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreRenderers from "@onexapis/core/renderers";
+import coreUtils from "@onexapis/core/utils";
+
+const { ComponentRenderer } = coreRenderers;
+const { toComponentInstance, getSectionValues, filterEnabledComponents } =
+  coreUtils;
+
+export function FooterDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const {
+    companyName,
+    description,
+    copyrightText,
+    showAboutColumn,
+    aboutColumnTitle,
+    showLinksColumn,
+    linksColumnTitle,
+    backgroundColor,
+    textColor,
+    primaryColor,
+  } = settings;
+
+  const bgColor = String(backgroundColor || "#111827");
+  const txtColor = String(textColor || "#9CA3AF");
+  const headingColor = String(primaryColor || "#FFFFFF");
+
+  // Find components
+  const components = filterEnabledComponents(section.components || []);
+  const companyNameComp = components.find(
+    (c) => c.slot === "company-name" || c.id === "footer-company-name"
+  );
+  const descComp = components.find(
+    (c) => c.slot === "description" || c.id === "footer-description"
+  );
+  const copyrightComp = components.find(
+    (c) => c.slot === "copyright" || c.id === "footer-copyright"
+  );
+
+  // Parse link items
+  let aboutLinks: Array<{ label: string; href: string }> = [];
+  let quickLinks: Array<{ label: string; href: string }> = [];
+  try {
+    const rawAbout = settings.aboutLinks;
+    if (typeof rawAbout === "string") aboutLinks = JSON.parse(rawAbout);
+    else if (Array.isArray(rawAbout))
+      aboutLinks = rawAbout as Array<{ label: string; href: string }>;
+  } catch {
+    aboutLinks = [
+      { label: "About Us", href: "/about" },
+      { label: "Contact", href: "#contact" },
+    ];
+  }
+  try {
+    const rawLinks = settings.quickLinks;
+    if (typeof rawLinks === "string") quickLinks = JSON.parse(rawLinks);
+    else if (Array.isArray(rawLinks))
+      quickLinks = rawLinks as Array<{ label: string; href: string }>;
+  } catch {
+    quickLinks = [
+      { label: "Home", href: "/" },
+      { label: "Showcase", href: "/showcase" },
+    ];
+  }
+
+  const showAbout = Boolean(showAboutColumn) !== false;
+  const showLinks = Boolean(showLinksColumn) !== false;
+
+  return (
+    <footer
+      className="w-full"
+      style={{ backgroundColor: bgColor }}
+      data-section-id={section.id}
+      data-section-type={section.type}
+      data-section-template="default"
+    >
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Column 1: Company Info */}
+          <div className="space-y-4">
+            {companyNameComp ? (
+              <ComponentRenderer
+                instance={toComponentInstance(companyNameComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            ) : (
+              <h3 className="text-xl font-bold" style={{ color: headingColor }}>
+                {String(companyName)}
+              </h3>
+            )}
+            {descComp ? (
+              <ComponentRenderer
+                instance={toComponentInstance(descComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            ) : description ? (
+              <p
+                className="text-sm leading-relaxed"
+                style={{ color: txtColor }}
+              >
+                {String(description)}
+              </p>
+            ) : null}
+          </div>
+
+          {/* Column 2: About Links */}
+          {showAbout && (
+            <div className="space-y-4">
+              <h4
+                className="text-base font-semibold"
+                style={{ color: headingColor }}
+              >
+                {String(aboutColumnTitle)}
+              </h4>
+              <nav className="flex flex-col gap-2">
+                {aboutLinks.map((link, i) =>
+                  isEditing ? (
+                    <span
+                      key={i}
+                      className="text-sm hover:opacity-80"
+                      style={{ color: txtColor }}
+                    >
+                      {link.label}
+                    </span>
+                  ) : (
+                    <a
+                      key={i}
+                      href={link.href}
+                      className="text-sm hover:opacity-80 transition-opacity"
+                      style={{ color: txtColor }}
+                    >
+                      {link.label}
+                    </a>
+                  )
+                )}
+              </nav>
+            </div>
+          )}
+
+          {/* Column 3: Quick Links */}
+          {showLinks && (
+            <div className="space-y-4">
+              <h4
+                className="text-base font-semibold"
+                style={{ color: headingColor }}
+              >
+                {String(linksColumnTitle)}
+              </h4>
+              <nav className="flex flex-col gap-2">
+                {quickLinks.map((link, i) =>
+                  isEditing ? (
+                    <span
+                      key={i}
+                      className="text-sm hover:opacity-80"
+                      style={{ color: txtColor }}
+                    >
+                      {link.label}
+                    </span>
+                  ) : (
+                    <a
+                      key={i}
+                      href={link.href}
+                      className="text-sm hover:opacity-80 transition-opacity"
+                      style={{ color: txtColor }}
+                    >
+                      {link.label}
+                    </a>
+                  )
+                )}
+              </nav>
+            </div>
+          )}
+        </div>
+
+        {/* Copyright */}
+        <div
+          className="mt-10 pt-8 text-center text-sm"
+          style={{
+            borderTopColor: `${txtColor}33`,
+            borderTopWidth: "1px",
+            color: txtColor,
+          }}
+        >
+          {copyrightComp ? (
+            <ComponentRenderer
+              instance={toComponentInstance(copyrightComp)}
+              sectionId={section.id}
+              isEditing={isEditing}
+            />
+          ) : (
+            <p>
+              &copy; {new Date().getFullYear()} {String(copyrightText)}
+            </p>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default FooterDefault;