@onexapis/cli 1.1.16 → 1.1.18

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

@@ -0,0 +1,130 @@
+"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 TestimonialsDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const components = filterEnabledComponents(section.components || []);
+  const titleComp = components.find(
+    (c) => c.slot === "section-title" || c.id === "testimonials-title"
+  );
+  const subtitleComp = components.find(
+    (c) => c.slot === "section-subtitle" || c.id === "testimonials-subtitle"
+  );
+
+  const { settings } = getSectionValues(section, schema);
+  const { sectionTitle, sectionSubtitle, columns, backgroundColor } = settings;
+
+  const colClass =
+    columns === "1"
+      ? "max-w-2xl mx-auto"
+      : columns === "2"
+        ? "md:grid-cols-2"
+        : "md:grid-cols-3";
+
+  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 || "#FFFFFF") }}
+      data-section="testimonials"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple Testimonials"
+    >
+      <div className="container mx-auto px-4 max-w-6xl">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          {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-gray-900 mb-2"
+            >
+              {String(sectionTitle)}
+            </h2>
+          ) : null}
+
+          {subtitleComp ? (
+            <ComponentRenderer
+              key="section-subtitle"
+              instance={toComponentInstance(subtitleComp)}
+              sectionId={section.id}
+              isEditing={isEditing}
+            />
+          ) : sectionSubtitle ? (
+            <p
+              key="section-subtitle-fallback"
+              className="text-lg text-gray-500 mb-12"
+            >
+              {String(sectionSubtitle)}
+            </p>
+          ) : null}
+        </div>
+
+        {/* Testimonial Blocks Grid */}
+        <div
+          className={`grid grid-cols-1 ${columns === "1" ? "" : colClass} gap-8`}
+        >
+          {blocks.map((block) => {
+            const bs = block.settings || {};
+            const radiusMap: Record<string, string> = {
+              none: "rounded-none",
+              sm: "rounded-sm",
+              md: "rounded-md",
+              xl: "rounded-xl",
+            };
+            const radius = radiusMap[bs.borderRadius as string] || "rounded-xl";
+            return (
+              <div
+                key={block.id}
+                className={`${radius} p-6 border border-gray-100`}
+                style={{
+                  backgroundColor: String(bs.backgroundColor || "#F9FAFB"),
+                }}
+                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-300 rounded-lg">
+            <p className="text-gray-500">
+              Add testimonial blocks to populate this section
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default TestimonialsDefault;

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

@@ -0,0 +1,371 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "sectionTitle",
+    type: "text",
+    label: "Section Title",
+    default: "What Our Customers Say",
+  },
+  {
+    id: "sectionSubtitle",
+    type: "textarea",
+    label: "Section Subtitle",
+    default: "Trusted by thousands of happy customers worldwide",
+  },
+  {
+    id: "columns",
+    type: "select",
+    label: "Columns",
+    default: "3",
+    options: [
+      { label: "1 Column", value: "1" },
+      { label: "2 Columns", value: "2" },
+      { label: "3 Columns", value: "3" },
+    ],
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#FFFFFF",
+  },
+];
+
+export const testimonialsSchema: SectionSchema = {
+  type: "my-simple-testimonials",
+  name: "Simple Testimonials",
+  description:
+    "Testimonial cards with quote, rating, name, role, and avatar blocks",
+  category: "testimonials",
+  icon: "message-circle",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Testimonials",
+      description: "A grid of testimonial cards",
+    },
+  ],
+  blocks: [
+    {
+      type: "testimonial-item",
+      name: "Testimonial",
+      description: "A single testimonial with quote, rating, name, and avatar",
+      icon: "quote",
+      settings: [
+        {
+          id: "backgroundColor",
+          type: "color",
+          label: "Background Color",
+          default: "#FFFFFF",
+        },
+        {
+          id: "borderRadius",
+          type: "select",
+          label: "Border Radius",
+          default: "xl",
+          options: [
+            { label: "None", value: "none" },
+            { label: "Small", value: "sm" },
+            { label: "Medium", value: "md" },
+            { label: "Large", value: "xl" },
+          ],
+        },
+        {
+          id: "showAvatar",
+          type: "checkbox",
+          label: "Show Avatar",
+          default: true,
+        },
+        {
+          id: "showRating",
+          type: "checkbox",
+          label: "Show Rating",
+          default: true,
+        },
+      ],
+      defaults: {
+        backgroundColor: "#FFFFFF",
+        borderRadius: "xl",
+        showAvatar: true,
+        showRating: true,
+      },
+      limit: 6,
+    },
+  ],
+  maxBlocks: 6,
+  defaults: {
+    settings: {
+      sectionTitle: "What Our Customers Say",
+      sectionSubtitle: "Trusted by thousands of happy customers worldwide",
+      columns: "3",
+      backgroundColor: "#FFFFFF",
+    },
+    components: [
+      {
+        id: "testimonials-title",
+        type: "heading",
+        slot: "section-title",
+        order: 0,
+        content: { text: "What Our Customers Say", tag: "h2" },
+        style: {
+          fontSize: "3xl",
+          fontWeight: "bold",
+          color: "#111827",
+          textAlign: "center",
+          marginBottom: "0.5rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+      {
+        id: "testimonials-subtitle",
+        type: "paragraph",
+        slot: "section-subtitle",
+        order: 1,
+        content: {
+          text: "Trusted by thousands of happy customers worldwide",
+        },
+        style: {
+          fontSize: "lg",
+          color: "#6B7280",
+          textAlign: "center",
+          marginBottom: "3rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+    ],
+    blocks: [
+      {
+        id: "testimonial-1",
+        type: "testimonial-item",
+        order: 0,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "testimonial-1-quote",
+            type: "quote",
+            slot: "quote",
+            order: 0,
+            content: {
+              text: "This product has completely transformed how we work. The simplicity and power are unmatched.",
+            },
+            style: {
+              fontSize: "base",
+              color: "#374151",
+              lineHeight: "1.6",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-1-rating",
+            type: "rating",
+            slot: "rating",
+            order: 1,
+            content: { value: 5 },
+            style: { color: "#F59E0B" },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-1-name",
+            type: "heading",
+            slot: "name",
+            order: 2,
+            content: { text: "Sarah Johnson", tag: "h4" },
+            style: {
+              fontSize: "base",
+              fontWeight: "semibold",
+              color: "#111827",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-1-role",
+            type: "paragraph",
+            slot: "role",
+            order: 3,
+            content: { text: "CEO at TechCorp" },
+            style: { fontSize: "sm", color: "#6B7280" },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-1-avatar",
+            type: "image",
+            slot: "avatar",
+            order: 4,
+            content: {
+              src: "https://picsum.photos/seed/avatar1/80/80",
+              alt: "Sarah Johnson",
+            },
+            style: {
+              width: "48px",
+              height: "48px",
+              borderRadius: "9999px",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "testimonial-2",
+        type: "testimonial-item",
+        order: 1,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "testimonial-2-quote",
+            type: "quote",
+            slot: "quote",
+            order: 0,
+            content: {
+              text: "Incredible attention to detail. Every feature feels thoughtfully designed and polished.",
+            },
+            style: {
+              fontSize: "base",
+              color: "#374151",
+              lineHeight: "1.6",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-2-rating",
+            type: "rating",
+            slot: "rating",
+            order: 1,
+            content: { value: 5 },
+            style: { color: "#F59E0B" },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-2-name",
+            type: "heading",
+            slot: "name",
+            order: 2,
+            content: { text: "Michael Chen", tag: "h4" },
+            style: {
+              fontSize: "base",
+              fontWeight: "semibold",
+              color: "#111827",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-2-role",
+            type: "paragraph",
+            slot: "role",
+            order: 3,
+            content: { text: "Lead Designer at Artisan" },
+            style: { fontSize: "sm", color: "#6B7280" },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-2-avatar",
+            type: "image",
+            slot: "avatar",
+            order: 4,
+            content: {
+              src: "https://picsum.photos/seed/avatar2/80/80",
+              alt: "Michael Chen",
+            },
+            style: {
+              width: "48px",
+              height: "48px",
+              borderRadius: "9999px",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "testimonial-3",
+        type: "testimonial-item",
+        order: 2,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "testimonial-3-quote",
+            type: "quote",
+            slot: "quote",
+            order: 0,
+            content: {
+              text: "The best investment we made this year. Our team productivity doubled within weeks.",
+            },
+            style: {
+              fontSize: "base",
+              color: "#374151",
+              lineHeight: "1.6",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-3-rating",
+            type: "rating",
+            slot: "rating",
+            order: 1,
+            content: { value: 4 },
+            style: { color: "#F59E0B" },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-3-name",
+            type: "heading",
+            slot: "name",
+            order: 2,
+            content: { text: "Emily Rodriguez", tag: "h4" },
+            style: {
+              fontSize: "base",
+              fontWeight: "semibold",
+              color: "#111827",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-3-role",
+            type: "paragraph",
+            slot: "role",
+            order: 3,
+            content: { text: "Product Manager at Innovate" },
+            style: { fontSize: "sm", color: "#6B7280" },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "testimonial-3-avatar",
+            type: "image",
+            slot: "avatar",
+            order: 4,
+            content: {
+              src: "https://picsum.photos/seed/avatar3/80/80",
+              alt: "Emily Rodriguez",
+            },
+            style: {
+              width: "48px",
+              height: "48px",
+              borderRadius: "9999px",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+    ],
+  },
+};

package/templates/default/sections-registry.ts

@@ -0,0 +1,32 @@
+/**
+ * My Simple Theme - Sections Registry
+ * Auto-discovery entry point for all sections
+ */
+
+// Hero
+export { default as HeroDefault } from "./sections/hero/hero-default";
+export { heroSchema } from "./sections/hero/hero.schema";
+
+// About
+export { default as AboutDefault } from "./sections/about/about-default";
+export { aboutSchema } from "./sections/about/about.schema";
+
+// Features (block-based)
+export { default as FeaturesDefault } from "./sections/features/features-default";
+export { featuresSchema } from "./sections/features/features.schema";
+
+// Testimonials (block-based)
+export { default as TestimonialsDefault } from "./sections/testimonials/testimonials-default";
+export { testimonialsSchema } from "./sections/testimonials/testimonials.schema";
+
+// Gallery (block-based)
+export { default as GalleryDefault } from "./sections/gallery/gallery-default";
+export { gallerySchema } from "./sections/gallery/gallery.schema";
+
+// CTA (component-rich)
+export { default as CtaDefault } from "./sections/cta/cta-default";
+export { ctaSchema } from "./sections/cta/cta.schema";
+
+// Stats (block-based)
+export { default as StatsDefault } from "./sections/stats/stats-default";
+export { statsSchema } from "./sections/stats/stats.schema";

package/templates/default/theme.config.ts

@@ -0,0 +1,107 @@
+/**
+ * My Simple Theme - Theme Configuration
+ * Design system config (colors, fonts, spacing)
+ */
+
+import type { ThemeConfig } from "@onexapis/core";
+
+export const simpleThemeConfig: ThemeConfig = {
+  id: "my-simple",
+  name: "My Simple Theme",
+  version: "1.0.0",
+  description: "A simple, clean theme for basic websites",
+  author: "OneX Team",
+
+  colors: {
+    light: {
+      primary: "#3B82F6",
+      secondary: "#8B5CF6",
+      accent: "#10B981",
+      background: "#FFFFFF",
+      foreground: "#1F2937",
+      muted: "#F3F4F6",
+      mutedForeground: "#6B7280",
+      card: "#FFFFFF",
+      cardForeground: "#1F2937",
+      popover: "#FFFFFF",
+      popoverForeground: "#1F2937",
+      border: "#E5E7EB",
+      input: "#E5E7EB",
+      ring: "#3B82F6",
+      success: "#10B981",
+      warning: "#F59E0B",
+      destructive: "#EF4444",
+      info: "#3B82F6",
+    },
+  },
+
+  typography: {
+    fontFamily: {
+      heading: "system-ui, sans-serif",
+      body: "system-ui, sans-serif",
+      mono: "monospace",
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "2rem",
+      "4xl": "2.5rem",
+      "5xl": "3.5rem",
+    },
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    lineHeight: {
+      tight: 1.2,
+      normal: 1.5,
+      relaxed: 1.8,
+    },
+    letterSpacing: {
+      tight: "-0.02em",
+      normal: "0",
+      wide: "0.05em",
+    },
+  },
+
+  spacing: {
+    xs: "0.5rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2.5rem",
+    "2xl": "4rem",
+    "3xl": "5rem",
+    "4xl": "8rem",
+  },
+
+  borderRadius: {
+    none: "0",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    full: "9999px",
+  },
+
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  },
+
+  active: false,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+};
+
+export default simpleThemeConfig;

package/templates/default/theme.layout.ts

@@ -0,0 +1,21 @@
+/**
+ * My Simple Theme - Layout Configuration
+ * Defines header sections, footer sections, and global settings
+ */
+
+import type { ThemeLayoutConfig } from "@onexapis/core/types";
+
+export const simpleLayoutConfig: ThemeLayoutConfig = {
+  id: "my-simple",
+  name: "My My Simple Theme",
+  version: "1.0.0",
+  headerSections: [],
+  footerSections: [],
+  globalSettings: {
+    primaryColor: "#3B82F6",
+    secondaryColor: "#8B5CF6",
+    fontFamily: "system-ui, sans-serif",
+  },
+};
+
+export default simpleLayoutConfig;

package/templates/default/tsconfig.json

@@ -1,18 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "allowJs": false,
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "declaration": false,
-    "outDir": "dist",
-    "rootDir": "src"
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "types": ["react", "react-dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["src/**/*"],
+  "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist"]
 }