@onexapis/cli 1.1.16 → 1.1.18

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

@@ -0,0 +1,273 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "title",
+    type: "text",
+    label: "Title",
+    default: "Welcome to Our Site",
+    required: true,
+  },
+  {
+    id: "subtitle",
+    type: "text",
+    label: "Subtitle",
+    default: "This is a simple, clean theme for your website",
+  },
+  {
+    id: "buttonText",
+    type: "text",
+    label: "Button Text",
+    default: "Get Started",
+  },
+  {
+    id: "buttonLink",
+    type: "url",
+    label: "Button Link",
+    default: "/contact",
+  },
+  {
+    id: "secondaryButtonText",
+    type: "text",
+    label: "Secondary Button Text",
+    default: "Learn More",
+  },
+  {
+    id: "secondaryButtonLink",
+    type: "url",
+    label: "Secondary Button Link",
+    default: "/about",
+  },
+  {
+    id: "badgeText",
+    type: "text",
+    label: "Badge Text",
+    default: "New Release",
+  },
+  {
+    id: "showBadge",
+    type: "checkbox",
+    label: "Show Badge",
+    default: true,
+  },
+  {
+    id: "showImage",
+    type: "checkbox",
+    label: "Show Image",
+    default: true,
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#3B82F6",
+  },
+];
+
+export const heroSchema: SectionSchema = {
+  type: "my-simple-hero",
+  name: "Simple Hero",
+  description:
+    "Hero section with badge, heading, paragraph, divider, buttons, and image",
+  category: "marketing",
+  icon: "layout",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Hero",
+      description:
+        "A hero section with badge, title, subtitle, divider, CTA buttons, and image",
+    },
+  ],
+  blocks: [
+    {
+      type: "hero-content",
+      name: "Hero Content",
+      description:
+        "Hero content block with badge, title, subtitle, buttons, and image",
+      icon: "layout",
+      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: {
+      title: "Welcome to Our Site",
+      subtitle: "This is a simple, clean theme for your website",
+      buttonText: "Get Started",
+      buttonLink: "/contact",
+      secondaryButtonText: "Learn More",
+      secondaryButtonLink: "/about",
+      badgeText: "New Release",
+      showBadge: true,
+      showImage: true,
+      backgroundColor: "#3B82F6",
+    },
+    blocks: [
+      {
+        id: "hero-content-1",
+        type: "hero-content",
+        order: 0,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "hero-badge",
+            type: "badge",
+            slot: "badge",
+            order: 0,
+            content: { text: "New Release" },
+            style: {
+              fontSize: "sm",
+              fontWeight: "semibold",
+              color: "#3B82F6",
+              backgroundColor: "rgba(255,255,255,0.2)",
+              padding: "0.25rem 0.75rem",
+              borderRadius: "9999px",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "hero-title",
+            type: "heading",
+            slot: "title",
+            order: 1,
+            content: {
+              text: "Welcome to Our Site",
+              tag: "h1",
+            },
+            style: {
+              fontSize: "5xl",
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              marginBottom: "1rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "hero-subtitle",
+            type: "paragraph",
+            slot: "subtitle",
+            order: 2,
+            content: {
+              text: "This is a simple, clean theme for your website",
+            },
+            style: {
+              fontSize: "xl",
+              color: "rgba(255,255,255,0.9)",
+              marginBottom: "1.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "hero-divider",
+            type: "divider",
+            slot: "divider",
+            order: 3,
+            content: {},
+            style: {
+              borderColor: "rgba(255,255,255,0.3)",
+              marginTop: "0.5rem",
+              marginBottom: "1.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "hero-cta",
+            type: "button",
+            slot: "cta",
+            order: 4,
+            content: {
+              text: "Get Started",
+              href: "/contact",
+            },
+            style: {
+              fontSize: "base",
+              fontWeight: "semibold",
+              color: "#3B82F6",
+              backgroundColor: "#FFFFFF",
+              padding: "0.75rem 2rem",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "hero-secondary-cta",
+            type: "button",
+            slot: "secondary-cta",
+            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: "hero-image",
+            type: "image",
+            slot: "image",
+            order: 6,
+            content: {
+              src: "https://picsum.photos/seed/hero/800/500",
+              alt: "Hero illustration",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.75rem",
+              marginTop: "2rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,15 @@
+/**
+ * Simple Hero Section Registry
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { HeroDefault } from "./hero-default";
+
+export const heroComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = {
+  default: HeroDefault,
+};
+
+export { heroSchema } from "./hero.schema";

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

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

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

@@ -0,0 +1,103 @@
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreRenderers from "@onexapis/core/renderers";
+import coreUtils from "@onexapis/core/utils";
+
+const { ComponentRenderer, BlockRenderer } = coreRenderers;
+const { toComponentInstance, getSectionValues, filterEnabledComponents } =
+  coreUtils;
+
+export function StatsDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const components = filterEnabledComponents(section.components || []);
+  const titleComp = components.find(
+    (c) => c.slot === "section-title" || c.id === "stats-title"
+  );
+
+  const { settings } = getSectionValues(section, schema);
+  const { sectionTitle, columns, backgroundColor } = settings;
+
+  const colClass =
+    columns === "2"
+      ? "md:grid-cols-2"
+      : columns === "3"
+        ? "md:grid-cols-3"
+        : "md:grid-cols-4";
+
+  const blocks = (section.blocks || [])
+    .filter((b) => b.enabled !== false)
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  return (
+    <section
+      className="py-16"
+      style={{ backgroundColor: String(backgroundColor || "#111827") }}
+      data-section="stats"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple Stats"
+    >
+      <div className="container mx-auto px-4 max-w-6xl">
+        {/* Section Title */}
+        {titleComp ? (
+          <ComponentRenderer
+            key="section-title"
+            instance={toComponentInstance(titleComp)}
+            sectionId={section.id}
+            isEditing={isEditing}
+          />
+        ) : sectionTitle ? (
+          <h2
+            key="section-title-fallback"
+            className="text-3xl font-bold text-white text-center mb-12"
+          >
+            {String(sectionTitle)}
+          </h2>
+        ) : null}
+
+        {/* Stats Grid */}
+        <div className={`grid grid-cols-2 ${colClass} gap-8`}>
+          {blocks.map((block) => {
+            const bs = block.settings || {};
+            const alignMap: Record<string, string> = {
+              left: "text-left",
+              center: "text-center",
+              right: "text-right",
+            };
+            const align = alignMap[bs.alignment as string] || "text-center";
+            return (
+              <div
+                key={block.id}
+                className={`${align} py-4`}
+                data-section-id={section.id}
+                data-block-id={block.id}
+                data-block-type={block.type}
+              >
+                <BlockRenderer
+                  block={block}
+                  sectionId={section.id}
+                  isEditing={isEditing}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Empty state for editor */}
+        {blocks.length === 0 && isEditing && (
+          <div className="text-center py-12 border-2 border-dashed border-gray-500 rounded-lg">
+            <p className="text-gray-400">
+              Add stat blocks to populate this section
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default StatsDefault;

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

@@ -0,0 +1,266 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "sectionTitle",
+    type: "text",
+    label: "Section Title",
+    default: "By the Numbers",
+  },
+  {
+    id: "columns",
+    type: "select",
+    label: "Columns",
+    default: "4",
+    options: [
+      { label: "2 Columns", value: "2" },
+      { label: "3 Columns", value: "3" },
+      { label: "4 Columns", value: "4" },
+    ],
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#111827",
+  },
+];
+
+export const statsSchema: SectionSchema = {
+  type: "my-simple-stats",
+  name: "Simple Stats",
+  description: "Statistics section with large numbers and labels",
+  category: "content",
+  icon: "bar-chart",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Stats",
+      description: "A grid of stat blocks with large numbers",
+    },
+  ],
+  blocks: [
+    {
+      type: "stat-item",
+      name: "Stat Item",
+      description: "A single stat with a number and label",
+      icon: "hash",
+      settings: [
+        {
+          id: "numberColor",
+          type: "color",
+          label: "Number Color",
+          default: "#FFFFFF",
+        },
+        {
+          id: "labelColor",
+          type: "color",
+          label: "Label Color",
+          default: "rgba(255,255,255,0.7)",
+        },
+        {
+          id: "alignment",
+          type: "select",
+          label: "Alignment",
+          default: "center",
+          options: [
+            { label: "Left", value: "left" },
+            { label: "Center", value: "center" },
+            { label: "Right", value: "right" },
+          ],
+        },
+      ],
+      defaults: {
+        numberColor: "#FFFFFF",
+        labelColor: "rgba(255,255,255,0.7)",
+        alignment: "center",
+      },
+      limit: 8,
+    },
+  ],
+  maxBlocks: 8,
+  defaults: {
+    settings: {
+      sectionTitle: "By the Numbers",
+      columns: "4",
+      backgroundColor: "#111827",
+    },
+    components: [
+      {
+        id: "stats-title",
+        type: "heading",
+        slot: "section-title",
+        order: 0,
+        content: { text: "By the Numbers", tag: "h2" },
+        style: {
+          fontSize: "3xl",
+          fontWeight: "bold",
+          color: "#FFFFFF",
+          textAlign: "center",
+          marginBottom: "3rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+    ],
+    blocks: [
+      {
+        id: "stat-1",
+        type: "stat-item",
+        order: 0,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "stat-1-number",
+            type: "heading",
+            slot: "number",
+            order: 0,
+            content: { text: "10K+", tag: "h3" },
+            style: {
+              fontSize: "4xl",
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              textAlign: "center",
+              marginBottom: "0.25rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "stat-1-label",
+            type: "paragraph",
+            slot: "label",
+            order: 1,
+            content: { text: "Happy Customers" },
+            style: {
+              fontSize: "base",
+              color: "rgba(255,255,255,0.7)",
+              textAlign: "center",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "stat-2",
+        type: "stat-item",
+        order: 1,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "stat-2-number",
+            type: "heading",
+            slot: "number",
+            order: 0,
+            content: { text: "99.9%", tag: "h3" },
+            style: {
+              fontSize: "4xl",
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              textAlign: "center",
+              marginBottom: "0.25rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "stat-2-label",
+            type: "paragraph",
+            slot: "label",
+            order: 1,
+            content: { text: "Uptime SLA" },
+            style: {
+              fontSize: "base",
+              color: "rgba(255,255,255,0.7)",
+              textAlign: "center",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "stat-3",
+        type: "stat-item",
+        order: 2,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "stat-3-number",
+            type: "heading",
+            slot: "number",
+            order: 0,
+            content: { text: "150+", tag: "h3" },
+            style: {
+              fontSize: "4xl",
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              textAlign: "center",
+              marginBottom: "0.25rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "stat-3-label",
+            type: "paragraph",
+            slot: "label",
+            order: 1,
+            content: { text: "Integrations" },
+            style: {
+              fontSize: "base",
+              color: "rgba(255,255,255,0.7)",
+              textAlign: "center",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "stat-4",
+        type: "stat-item",
+        order: 3,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "stat-4-number",
+            type: "heading",
+            slot: "number",
+            order: 0,
+            content: { text: "24/7", tag: "h3" },
+            style: {
+              fontSize: "4xl",
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              textAlign: "center",
+              marginBottom: "0.25rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "stat-4-label",
+            type: "paragraph",
+            slot: "label",
+            order: 1,
+            content: { text: "Support Available" },
+            style: {
+              fontSize: "base",
+              color: "rgba(255,255,255,0.7)",
+              textAlign: "center",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+    ],
+  },
+};

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

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