@onexapis/cli 1.1.38 → 1.1.40

package/templates/default/sections/footer/footer.schema.ts

@@ -0,0 +1,170 @@
+/**
+ * Footer Section Schema
+ * Responsive footer with company info, links, and copyright
+ */
+
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "companyName",
+    type: "text",
+    label: "Company Name",
+    default: "My Site",
+  },
+  {
+    id: "description",
+    type: "textarea",
+    label: "Description",
+    default: "A clean and minimal theme for your website.",
+  },
+  {
+    id: "showAboutColumn",
+    type: "checkbox",
+    label: "Show About Column",
+    default: true,
+  },
+  {
+    id: "aboutColumnTitle",
+    type: "text",
+    label: "About Column Title",
+    default: "About",
+  },
+  {
+    id: "aboutLinks",
+    type: "array",
+    label: "About Links",
+    default: [
+      { label: "About Us", href: "/about" },
+      { label: "Contact", href: "#contact" },
+    ],
+  },
+  {
+    id: "showLinksColumn",
+    type: "checkbox",
+    label: "Show Links Column",
+    default: true,
+  },
+  {
+    id: "linksColumnTitle",
+    type: "text",
+    label: "Links Column Title",
+    default: "Quick Links",
+  },
+  {
+    id: "quickLinks",
+    type: "array",
+    label: "Quick Links",
+    default: [
+      { label: "Home", href: "/" },
+      { label: "Showcase", href: "/showcase" },
+    ],
+  },
+  {
+    id: "copyrightText",
+    type: "text",
+    label: "Copyright Text",
+    default: "My Site. All rights reserved.",
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#111827",
+  },
+  {
+    id: "textColor",
+    type: "color",
+    label: "Text Color",
+    default: "#9CA3AF",
+  },
+  {
+    id: "primaryColor",
+    type: "color",
+    label: "Heading Color",
+    default: "#FFFFFF",
+  },
+];
+
+export const footerSchema: SectionSchema = {
+  type: "footer",
+  name: "Footer",
+  description: "Responsive footer with company info, links, and copyright",
+  category: "footer",
+  icon: "layout",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Footer",
+      description: "3-column footer with company info and links",
+      isDefault: true,
+    },
+  ],
+  defaults: {
+    settings: {
+      companyName: "My Site",
+      description: "A clean and minimal theme for your website.",
+      showAboutColumn: true,
+      aboutColumnTitle: "About",
+      aboutLinks: [
+        { label: "About Us", href: "/about" },
+        { label: "Contact", href: "#contact" },
+      ],
+      showLinksColumn: true,
+      linksColumnTitle: "Quick Links",
+      quickLinks: [
+        { label: "Home", href: "/" },
+        { label: "Showcase", href: "/showcase" },
+      ],
+      copyrightText: "My Site. All rights reserved.",
+      backgroundColor: "#111827",
+      textColor: "#9CA3AF",
+      primaryColor: "#FFFFFF",
+    },
+    components: [
+      {
+        id: "footer-company-name",
+        type: "heading",
+        slot: "company-name",
+        order: 0,
+        content: { text: "My Site", tag: "h3" },
+        style: {
+          fontSize: "xl",
+          fontWeight: "bold",
+          color: "#FFFFFF",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+      {
+        id: "footer-description",
+        type: "paragraph",
+        slot: "description",
+        order: 1,
+        content: { text: "A clean and minimal theme for your website." },
+        style: {
+          fontSize: "sm",
+          color: "#9CA3AF",
+          lineHeight: "1.625",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+      {
+        id: "footer-copyright",
+        type: "paragraph",
+        slot: "copyright",
+        order: 2,
+        content: { text: "My Site. All rights reserved." },
+        style: {
+          fontSize: "sm",
+          color: "#6B7280",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+    ],
+  },
+  tags: ["footer", "layout"],
+};

package/templates/default/sections/footer/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Footer Section
+ * Exports schema and component templates
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { FooterDefault } from "./footer-default";
+
+export const footerComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = { default: FooterDefault };
+
+export { footerSchema } from "./footer.schema";

package/templates/default/sections/gallery/gallery.schema.ts

@@ -44,7 +44,7 @@ const commonSettings: FieldDefinition[] = [
 ];
 
 export const gallerySchema: SectionSchema = {
-  type: "my-simple-gallery",
+  type: "gallery",
   name: "Simple Gallery",
   description: "Responsive image gallery with captions",
   category: "gallery",

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

@@ -0,0 +1,322 @@
+/**
+ * Header - Default Template
+ * Smart responsive header with auto-hide on scroll, sticky, and customizable behavior
+ */
+
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+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;
+
+/**
+ * Hook for smart header scroll behavior
+ * - Hides header on scroll down, shows on scroll up
+ * - Tracks whether page is scrolled (for shadow/transparent effects)
+ */
+function useHeaderScroll(options: {
+  enabled: boolean;
+  threshold: number;
+  isEditing: boolean;
+}) {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const lastScrollY = useRef(0);
+  const ticking = useRef(false);
+
+  const handleScroll = useCallback(() => {
+    if (!ticking.current) {
+      requestAnimationFrame(() => {
+        const currentScrollY = window.scrollY;
+        const scrollDelta = currentScrollY - lastScrollY.current;
+
+        // Track if page is scrolled past top
+        setIsScrolled(currentScrollY > 0);
+
+        if (options.enabled && !options.isEditing) {
+          // Scrolling down past threshold → hide
+          if (scrollDelta > options.threshold && currentScrollY > 80) {
+            setIsVisible(false);
+          }
+          // Scrolling up past threshold → show
+          else if (scrollDelta < -options.threshold) {
+            setIsVisible(true);
+          }
+          // At the very top → always show
+          if (currentScrollY <= 0) {
+            setIsVisible(true);
+          }
+        }
+
+        lastScrollY.current = currentScrollY;
+        ticking.current = false;
+      });
+      ticking.current = true;
+    }
+  }, [options.enabled, options.threshold, options.isEditing]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  return { isVisible, isScrolled };
+}
+
+export function HeaderDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const { settings } = getSectionValues(section, schema);
+  const {
+    logoText,
+    sticky,
+    autoHide,
+    scrollThreshold,
+    showShadowOnScroll,
+    transparentOnTop,
+    headerHeight,
+    ctaText,
+    ctaLink,
+    backgroundColor,
+    textColor,
+    primaryColor,
+  } = settings;
+
+  const bgColor = String(backgroundColor || "#FFFFFF");
+  const txtColor = String(textColor || "#111827");
+  const btnColor = String(primaryColor || "#2563EB");
+  const height = String(headerHeight || "16");
+  const heightClass = `h-${height}`;
+
+  // Smart scroll behavior
+  const { isVisible, isScrolled } = useHeaderScroll({
+    enabled: Boolean(autoHide),
+    threshold: Number(scrollThreshold) || 10,
+    isEditing: !!isEditing,
+  });
+
+  // Build dynamic classes and styles
+  const isSticky = Boolean(sticky);
+  const shouldShowShadow = Boolean(showShadowOnScroll) && isScrolled;
+  const isTransparentOnTop = Boolean(transparentOnTop) && !isScrolled;
+
+  // Find components from schema defaults
+  const components = filterEnabledComponents(section.components || []);
+  const logoComp = components.find(
+    (c) => c.slot === "logo" || c.id === "header-logo"
+  );
+  const ctaComp = components.find(
+    (c) => c.slot === "cta" || c.id === "header-cta"
+  );
+
+  // Parse navigation items from settings
+  let navItems: Array<{ label: string; href: string }> = [];
+  try {
+    const raw = settings.navigationItems;
+    if (typeof raw === "string") {
+      navItems = JSON.parse(raw);
+    } else if (Array.isArray(raw)) {
+      navItems = raw as Array<{ label: string; href: string }>;
+    }
+  } catch {
+    navItems = [
+      { label: "Home", href: "/" },
+      { label: "About", href: "/about" },
+      { label: "Showcase", href: "/showcase" },
+    ];
+  }
+
+  return (
+    <header
+      className={`w-full transition-all duration-300 ease-in-out ${
+        isSticky ? "sticky top-0 z-50" : ""
+      }`}
+      style={{
+        backgroundColor: isTransparentOnTop ? "transparent" : bgColor,
+        boxShadow: shouldShowShadow
+          ? "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)"
+          : "none",
+        transform:
+          isSticky && !isVisible && !isEditing
+            ? "translateY(-100%)"
+            : "translateY(0)",
+      }}
+      data-section-id={section.id}
+      data-section-type={section.type}
+      data-section-template="default"
+    >
+      <div className="container mx-auto px-4">
+        <div className={`flex ${heightClass} items-center justify-between`}>
+          {/* Logo */}
+          {isEditing ? (
+            <span className="flex items-center">
+              {logoComp ? (
+                <ComponentRenderer
+                  instance={toComponentInstance(logoComp)}
+                  sectionId={section.id}
+                  isEditing={isEditing}
+                />
+              ) : (
+                <span className="text-xl font-bold" style={{ color: txtColor }}>
+                  {String(logoText)}
+                </span>
+              )}
+            </span>
+          ) : (
+            <a href="/" className="flex items-center">
+              {logoComp ? (
+                <ComponentRenderer
+                  instance={toComponentInstance(logoComp)}
+                  sectionId={section.id}
+                  isEditing={isEditing}
+                />
+              ) : (
+                <span className="text-xl font-bold" style={{ color: txtColor }}>
+                  {String(logoText)}
+                </span>
+              )}
+            </a>
+          )}
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-6">
+            {navItems.map((item, i) =>
+              isEditing ? (
+                <span
+                  key={i}
+                  className="text-sm font-medium opacity-70"
+                  style={{ color: txtColor }}
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  key={i}
+                  href={item.href}
+                  className="text-sm font-medium hover:opacity-70 transition-opacity"
+                  style={{ color: txtColor }}
+                >
+                  {item.label}
+                </a>
+              )
+            )}
+
+            {/* CTA Button */}
+            {ctaComp ? (
+              <ComponentRenderer
+                instance={toComponentInstance(ctaComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            ) : ctaText ? (
+              isEditing ? (
+                <span
+                  className="px-4 py-2 text-sm font-medium text-white rounded-lg"
+                  style={{ backgroundColor: btnColor }}
+                >
+                  {String(ctaText)}
+                </span>
+              ) : (
+                <a
+                  href={String(ctaLink || "#")}
+                  className="px-4 py-2 text-sm font-medium text-white rounded-lg hover:opacity-90 transition-opacity"
+                  style={{ backgroundColor: btnColor }}
+                >
+                  {String(ctaText)}
+                </a>
+              )
+            ) : null}
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden"
+            style={{ color: txtColor }}
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label="Toggle menu"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              {mobileMenuOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <nav className="md:hidden border-t py-4 space-y-3">
+            {navItems.map((item, i) =>
+              isEditing ? (
+                <span
+                  key={i}
+                  className="block text-sm font-medium opacity-70"
+                  style={{ color: txtColor }}
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  key={i}
+                  href={item.href}
+                  className="block text-sm font-medium hover:opacity-70 transition-opacity"
+                  style={{ color: txtColor }}
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {item.label}
+                </a>
+              )
+            )}
+            {ctaText &&
+              (isEditing ? (
+                <span
+                  className="block text-center px-4 py-2 text-sm font-medium text-white rounded-lg"
+                  style={{ backgroundColor: btnColor }}
+                >
+                  {String(ctaText)}
+                </span>
+              ) : (
+                <a
+                  href={String(ctaLink || "#")}
+                  className="block text-center px-4 py-2 text-sm font-medium text-white rounded-lg hover:opacity-90 transition-opacity"
+                  style={{ backgroundColor: btnColor }}
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {String(ctaText)}
+                </a>
+              ))}
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export default HeaderDefault;

package/templates/default/sections/header/header.schema.ts

@@ -0,0 +1,168 @@
+/**
+ * Header Section Schema
+ * Responsive header with logo, navigation, and CTA
+ */
+
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "logoText",
+    type: "text",
+    label: "Logo Text",
+    default: "My Site",
+  },
+  {
+    id: "sticky",
+    type: "checkbox",
+    label: "Sticky Header",
+    default: true,
+  },
+  {
+    id: "autoHide",
+    type: "checkbox",
+    label: "Auto-hide on Scroll Down",
+    default: true,
+  },
+  {
+    id: "scrollThreshold",
+    type: "number",
+    label: "Scroll Threshold (px)",
+    default: 10,
+  },
+  {
+    id: "showShadowOnScroll",
+    type: "checkbox",
+    label: "Show Shadow When Scrolled",
+    default: true,
+  },
+  {
+    id: "transparentOnTop",
+    type: "checkbox",
+    label: "Transparent When at Top",
+    default: false,
+  },
+  {
+    id: "headerHeight",
+    type: "select",
+    label: "Header Height",
+    default: "16",
+    options: [
+      { label: "Compact (48px)", value: "12" },
+      { label: "Default (64px)", value: "16" },
+      { label: "Tall (80px)", value: "20" },
+    ],
+  },
+  {
+    id: "navigationItems",
+    type: "array",
+    label: "Navigation Items",
+    default: [
+      { label: "Home", href: "/" },
+      { label: "About", href: "/about" },
+      { label: "Showcase", href: "/showcase" },
+    ],
+  },
+  {
+    id: "ctaText",
+    type: "text",
+    label: "CTA Button Text",
+    default: "Contact",
+  },
+  {
+    id: "ctaLink",
+    type: "url",
+    label: "CTA Button Link",
+    default: "#contact",
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#FFFFFF",
+  },
+  {
+    id: "textColor",
+    type: "color",
+    label: "Text Color",
+    default: "#111827",
+  },
+  {
+    id: "primaryColor",
+    type: "color",
+    label: "CTA Button Color",
+    default: "#2563EB",
+  },
+];
+
+export const headerSchema: SectionSchema = {
+  type: "header",
+  name: "Header",
+  description: "Responsive header with logo, navigation, and CTA button",
+  category: "header",
+  icon: "layout",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Header",
+      description: "Clean header with horizontal navigation",
+      isDefault: true,
+    },
+  ],
+  defaults: {
+    settings: {
+      logoText: "My Site",
+      sticky: true,
+      autoHide: true,
+      scrollThreshold: 10,
+      showShadowOnScroll: true,
+      transparentOnTop: false,
+      headerHeight: "16",
+      navigationItems: [
+        { label: "Home", href: "/" },
+        { label: "About", href: "/about" },
+        { label: "Showcase", href: "/showcase" },
+      ],
+      ctaText: "Contact",
+      ctaLink: "#contact",
+      backgroundColor: "#FFFFFF",
+      textColor: "#111827",
+      primaryColor: "#2563EB",
+    },
+    components: [
+      {
+        id: "header-logo",
+        type: "heading",
+        slot: "logo",
+        order: 0,
+        content: { text: "My Site", tag: "span" },
+        style: {
+          fontSize: "xl",
+          fontWeight: "bold",
+          color: "#111827",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+      {
+        id: "header-cta",
+        type: "button",
+        slot: "cta",
+        order: 1,
+        content: { text: "Contact", href: "#contact" },
+        style: {
+          fontSize: "sm",
+          fontWeight: "medium",
+          color: "#FFFFFF",
+          backgroundColor: "#2563EB",
+          padding: "0.5rem 1rem",
+          borderRadius: "0.5rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+    ],
+  },
+  tags: ["header", "navigation", "layout"],
+};

package/templates/default/sections/header/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Header Section
+ * Exports schema and component templates
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { HeaderDefault } from "./header-default";
+
+export const headerComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = { default: HeaderDefault };
+
+export { headerSchema } from "./header.schema";

package/templates/default/sections/hero/hero.schema.ts

@@ -65,7 +65,7 @@ const commonSettings: FieldDefinition[] = [
 ];
 
 export const heroSchema: SectionSchema = {
-  type: "my-simple-hero",
+  type: "hero",
   name: "Simple Hero",
   description:
     "Hero section with badge, heading, paragraph, divider, buttons, and image",