@onexapis/cli 1.1.16 → 1.1.18

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

@@ -0,0 +1,259 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "heading",
+    type: "text",
+    label: "Heading",
+    default: "About Us",
+    required: true,
+  },
+  {
+    id: "subheading",
+    type: "text",
+    label: "Subheading",
+    default: "Our Story",
+  },
+  {
+    id: "description",
+    type: "textarea",
+    label: "Description",
+    default:
+      "We create simple and elegant solutions for your business needs. Our focus is on clean design and user experience.",
+    maxLength: 500,
+  },
+  {
+    id: "secondaryDescription",
+    type: "textarea",
+    label: "Secondary Description",
+    default:
+      "Founded with a vision to simplify the digital experience, we have grown into a team of passionate creators dedicated to excellence.",
+    maxLength: 500,
+  },
+  {
+    id: "badgeText",
+    type: "text",
+    label: "Badge Text",
+    default: "About Us",
+  },
+  {
+    id: "showImage",
+    type: "checkbox",
+    label: "Show Image",
+    default: true,
+  },
+  {
+    id: "layout",
+    type: "select",
+    label: "Layout",
+    default: "centered",
+    options: [
+      { label: "Centered", value: "centered" },
+      { label: "Image Left", value: "image-left" },
+      { label: "Image Right", value: "image-right" },
+    ],
+  },
+];
+
+export const aboutSchema: SectionSchema = {
+  type: "my-simple-about",
+  name: "Simple About",
+  description:
+    "About section with badge, heading, subheading, descriptions, divider, and image",
+  category: "content",
+  icon: "text",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default About",
+      description: "An about section with rich content and layout options",
+    },
+  ],
+  blocks: [
+    {
+      type: "about-content",
+      name: "About Content",
+      description:
+        "About content block with badge, heading, descriptions, and image",
+      icon: "text",
+      settings: [
+        {
+          id: "contentAlignment",
+          type: "select",
+          label: "Content Alignment",
+          default: "center",
+          options: [
+            { label: "Left", value: "left" },
+            { label: "Center", value: "center" },
+            { label: "Right", value: "right" },
+          ],
+        },
+        {
+          id: "contentWidth",
+          type: "select",
+          label: "Content Width",
+          default: "lg",
+          options: [
+            { label: "Small", value: "sm" },
+            { label: "Medium", value: "md" },
+            { label: "Large", value: "lg" },
+            { label: "Full", value: "full" },
+          ],
+        },
+      ],
+      defaults: {
+        contentAlignment: "center",
+        contentWidth: "lg",
+      },
+      limit: 1,
+    },
+  ],
+  maxBlocks: 1,
+  defaults: {
+    settings: {
+      heading: "About Us",
+      subheading: "Our Story",
+      description:
+        "We create simple and elegant solutions for your business needs. Our focus is on clean design and user experience.",
+      secondaryDescription:
+        "Founded with a vision to simplify the digital experience, we have grown into a team of passionate creators dedicated to excellence.",
+      badgeText: "About Us",
+      showImage: true,
+      layout: "centered",
+    },
+    blocks: [
+      {
+        id: "about-content-1",
+        type: "about-content",
+        order: 0,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "about-badge",
+            type: "badge",
+            slot: "badge",
+            order: 0,
+            content: { text: "About Us" },
+            style: {
+              fontSize: "sm",
+              fontWeight: "semibold",
+              color: "#3B82F6",
+              backgroundColor: "#EFF6FF",
+              padding: "0.25rem 0.75rem",
+              borderRadius: "9999px",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "about-heading",
+            type: "heading",
+            slot: "heading",
+            order: 1,
+            content: {
+              text: "About Us",
+              tag: "h2",
+            },
+            style: {
+              fontSize: "4xl",
+              fontWeight: "bold",
+              color: "#1F2937",
+              marginBottom: "0.5rem",
+              textAlign: "center",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "about-subheading",
+            type: "heading",
+            slot: "subheading",
+            order: 2,
+            content: {
+              text: "Our Story",
+              tag: "h3",
+            },
+            style: {
+              fontSize: "xl",
+              fontWeight: "medium",
+              color: "#6B7280",
+              marginBottom: "1rem",
+              textAlign: "center",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "about-divider",
+            type: "divider",
+            slot: "divider",
+            order: 3,
+            content: {},
+            style: {
+              borderColor: "#E5E7EB",
+              marginTop: "0.5rem",
+              marginBottom: "1.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "about-description",
+            type: "paragraph",
+            slot: "description",
+            order: 4,
+            content: {
+              text: "We create simple and elegant solutions for your business needs. Our focus is on clean design and user experience.",
+            },
+            style: {
+              fontSize: "lg",
+              color: "#4B5563",
+              textAlign: "center",
+              lineHeight: "1.75",
+              marginBottom: "1rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "about-secondary-description",
+            type: "paragraph",
+            slot: "secondary-description",
+            order: 5,
+            content: {
+              text: "Founded with a vision to simplify the digital experience, we have grown into a team of passionate creators dedicated to excellence.",
+            },
+            style: {
+              fontSize: "base",
+              color: "#6B7280",
+              textAlign: "center",
+              lineHeight: "1.75",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "about-image",
+            type: "image",
+            slot: "image",
+            order: 6,
+            content: {
+              src: "https://picsum.photos/seed/about/800/500",
+              alt: "About us image",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.75rem",
+              marginTop: "2rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,15 @@
+/**
+ * Simple About Section Registry
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { AboutDefault } from "./about-default";
+
+export const aboutComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = {
+  default: AboutDefault,
+};
+
+export { aboutSchema } from "./about.schema";

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

@@ -0,0 +1,180 @@
+"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 CtaDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  // Get components from the first block (preferred) or fallback to section.components
+  const contentBlock = (section.blocks || [])[0];
+  const components = contentBlock?.components
+    ? filterEnabledComponents(contentBlock.components)
+    : filterEnabledComponents(section.components || []);
+
+  const badgeComp = components.find(
+    (c) => c.slot === "badge" || c.id === "cta-badge"
+  );
+  const headingComp = components.find(
+    (c) => c.slot === "heading" || c.id === "cta-heading"
+  );
+  const descriptionComp = components.find(
+    (c) => c.slot === "description" || c.id === "cta-description"
+  );
+  const dividerComp = components.find(
+    (c) => c.slot === "divider" || c.id === "cta-divider"
+  );
+  const primaryButtonComp = components.find(
+    (c) => c.slot === "primary-button" || c.id === "cta-primary-button"
+  );
+  const secondaryButtonComp = components.find(
+    (c) => c.slot === "secondary-button" || c.id === "cta-secondary-button"
+  );
+  const imageComp = components.find(
+    (c) => c.slot === "image" || c.id === "cta-image"
+  );
+
+  const { settings } = getSectionValues(section, schema);
+  const { backgroundColor, layout } = settings;
+
+  const isSplit = layout === "split";
+
+  // Block-level settings
+  const blockSettings = contentBlock?.settings || {};
+  const alignMap: Record<string, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+  };
+  const widthMap: Record<string, string> = {
+    sm: "max-w-2xl",
+    md: "max-w-3xl",
+    lg: "max-w-4xl",
+    full: "max-w-6xl",
+  };
+  const blockAlign =
+    alignMap[blockSettings.contentAlignment as string] || "text-center";
+  const blockWidth =
+    widthMap[blockSettings.contentWidth as string] || "max-w-3xl";
+
+  return (
+    <section
+      className="py-20"
+      style={{ backgroundColor: String(backgroundColor || "#3B82F6") }}
+      data-section="cta"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple CTA"
+    >
+      <div
+        className="container mx-auto px-4 max-w-6xl"
+        data-section-id={section.id}
+        data-block-id={contentBlock?.id || "cta-content-1"}
+        data-block-type="cta-content"
+      >
+        <div
+          className={
+            isSplit
+              ? "grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
+              : `${blockAlign} ${blockWidth} mx-auto`
+          }
+        >
+          {/* Content Side */}
+          <div>
+            {badgeComp && (
+              <div
+                key="badge-wrapper"
+                className={isSplit ? "mb-4" : "mb-4 inline-block"}
+              >
+                <ComponentRenderer
+                  instance={toComponentInstance(badgeComp)}
+                  sectionId={section.id}
+                  isEditing={isEditing}
+                />
+              </div>
+            )}
+
+            {headingComp ? (
+              <ComponentRenderer
+                key="heading"
+                instance={toComponentInstance(headingComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            ) : (
+              <h2
+                key="heading-fallback"
+                className="text-4xl font-bold text-white mb-4"
+              >
+                Ready to Get Started?
+              </h2>
+            )}
+
+            {descriptionComp && (
+              <ComponentRenderer
+                key="description"
+                instance={toComponentInstance(descriptionComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            )}
+
+            {dividerComp && (
+              <ComponentRenderer
+                key="divider"
+                instance={toComponentInstance(dividerComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            )}
+
+            {/* Button Row */}
+            {(primaryButtonComp || secondaryButtonComp) && (
+              <div
+                key="button-row"
+                className={`flex gap-4 ${isSplit ? "" : "justify-center"} flex-wrap`}
+              >
+                {primaryButtonComp && (
+                  <ComponentRenderer
+                    key={primaryButtonComp.id}
+                    instance={toComponentInstance(primaryButtonComp)}
+                    sectionId={section.id}
+                    isEditing={isEditing}
+                  />
+                )}
+                {secondaryButtonComp && (
+                  <ComponentRenderer
+                    key={secondaryButtonComp.id}
+                    instance={toComponentInstance(secondaryButtonComp)}
+                    sectionId={section.id}
+                    isEditing={isEditing}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Image Side (split layout only) */}
+          {isSplit && imageComp && (
+            <div key="image-wrapper">
+              <ComponentRenderer
+                instance={toComponentInstance(imageComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CtaDefault;

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

@@ -0,0 +1,210 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#3B82F6",
+  },
+  {
+    id: "layout",
+    type: "select",
+    label: "Layout",
+    default: "centered",
+    options: [
+      { label: "Centered", value: "centered" },
+      { label: "Split", value: "split" },
+    ],
+  },
+];
+
+export const ctaSchema: SectionSchema = {
+  type: "my-simple-cta",
+  name: "Simple CTA",
+  description:
+    "Call-to-action section with badge, heading, text, buttons, and optional image",
+  category: "cta",
+  icon: "megaphone",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default CTA",
+      description: "A bold call-to-action section",
+    },
+  ],
+  blocks: [
+    {
+      type: "cta-content",
+      name: "CTA Content",
+      description:
+        "CTA content block with badge, heading, text, buttons, and image",
+      icon: "megaphone",
+      settings: [
+        {
+          id: "contentAlignment",
+          type: "select",
+          label: "Content Alignment",
+          default: "center",
+          options: [
+            { label: "Left", value: "left" },
+            { label: "Center", value: "center" },
+            { label: "Right", value: "right" },
+          ],
+        },
+        {
+          id: "contentWidth",
+          type: "select",
+          label: "Content Width",
+          default: "lg",
+          options: [
+            { label: "Small", value: "sm" },
+            { label: "Medium", value: "md" },
+            { label: "Large", value: "lg" },
+            { label: "Full", value: "full" },
+          ],
+        },
+      ],
+      defaults: {
+        contentAlignment: "center",
+        contentWidth: "lg",
+      },
+      limit: 1,
+    },
+  ],
+  maxBlocks: 1,
+  defaults: {
+    settings: {
+      backgroundColor: "#3B82F6",
+      layout: "centered",
+    },
+    blocks: [
+      {
+        id: "cta-content-1",
+        type: "cta-content",
+        order: 0,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "cta-badge",
+            type: "badge",
+            slot: "badge",
+            order: 0,
+            content: { text: "Limited Time" },
+            style: {
+              fontSize: "sm",
+              fontWeight: "semibold",
+              color: "#3B82F6",
+              backgroundColor: "#FFFFFF",
+              padding: "0.25rem 0.75rem",
+              borderRadius: "9999px",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "cta-heading",
+            type: "heading",
+            slot: "heading",
+            order: 1,
+            content: { text: "Ready to Get Started?", tag: "h2" },
+            style: {
+              fontSize: "4xl",
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              marginBottom: "1rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "cta-description",
+            type: "paragraph",
+            slot: "description",
+            order: 2,
+            content: {
+              text: "Join thousands of satisfied customers and take your business to the next level. Start your free trial today.",
+            },
+            style: {
+              fontSize: "lg",
+              color: "rgba(255,255,255,0.9)",
+              marginBottom: "1rem",
+              lineHeight: "1.6",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "cta-divider",
+            type: "divider",
+            slot: "divider",
+            order: 3,
+            content: {},
+            style: {
+              borderColor: "rgba(255,255,255,0.3)",
+              marginTop: "1rem",
+              marginBottom: "1.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "cta-primary-button",
+            type: "button",
+            slot: "primary-button",
+            order: 4,
+            content: { text: "Start Free Trial", href: "/register" },
+            style: {
+              fontSize: "base",
+              fontWeight: "semibold",
+              color: "#3B82F6",
+              backgroundColor: "#FFFFFF",
+              padding: "0.75rem 2rem",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "cta-secondary-button",
+            type: "button",
+            slot: "secondary-button",
+            order: 5,
+            content: { text: "Learn More", href: "/about" },
+            style: {
+              fontSize: "base",
+              fontWeight: "semibold",
+              color: "#FFFFFF",
+              backgroundColor: "transparent",
+              padding: "0.75rem 2rem",
+              borderRadius: "0.5rem",
+              borderWidth: "2px",
+              borderColor: "#FFFFFF",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "cta-image",
+            type: "image",
+            slot: "image",
+            order: 6,
+            content: {
+              src: "https://picsum.photos/seed/cta/600/400",
+              alt: "Get started illustration",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.75rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,11 @@
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { CtaDefault } from "./cta-default";
+
+export const ctaComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = {
+  default: CtaDefault,
+};
+
+export { ctaSchema } from "./cta.schema";