@onexapis/cli 1.1.17 → 1.1.18

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

@@ -0,0 +1,154 @@
+"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 FeaturesDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const { sectionTitle, sectionSubtitle, backgroundColor } = settings;
+
+  // Section-level components (title, subtitle)
+  const components = filterEnabledComponents(section.components || []);
+  const titleComp = components.find(
+    (c) => c.slot === "section-title" || c.id === "features-title"
+  );
+  const subtitleComp = components.find(
+    (c) => c.slot === "section-subtitle" || c.id === "features-subtitle"
+  );
+
+  // Parent container block (optional — data may use container or flat structure)
+  const containerBlock = (section.blocks || []).find(
+    (b) => b.type === "features-container"
+  );
+  const containerSettings = containerBlock?.settings || {};
+  const columns = containerSettings.columns || settings.columns || "3";
+  const gap = containerSettings.gap || settings.gap || "lg";
+
+  // Support both: nested blocks inside container, or flat feature-item blocks directly on section
+  const rawBlocks = containerBlock?.blocks || section.blocks || [];
+  const featureBlocks = rawBlocks
+    .filter((b) => b.type === "feature-item" && b.enabled !== false)
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  const colClass =
+    columns === "2"
+      ? "md:grid-cols-2"
+      : columns === "4"
+        ? "md:grid-cols-2 lg:grid-cols-4"
+        : "md:grid-cols-3";
+
+  const gapClass = gap === "sm" ? "gap-4" : gap === "md" ? "gap-6" : "gap-8";
+
+  return (
+    <section
+      className="py-16"
+      style={{ backgroundColor: String(backgroundColor || "#F9FAFB") }}
+      data-section="features"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple Features"
+    >
+      <div className="container mx-auto px-4 max-w-6xl">
+        {/* Section Header (section-level components) */}
+        <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>
+
+        {/* Features Grid (parent container block → nested feature-item blocks) */}
+        <div
+          className={`grid grid-cols-1 ${colClass} ${gapClass}`}
+          data-section-id={section.id}
+          data-block-id={containerBlock?.id || "features-container-1"}
+          data-block-type="features-container"
+        >
+          {featureBlocks.map((block) => {
+            const bs = block.settings || {};
+            const radiusMap: Record<string, string> = {
+              none: "rounded-none",
+              sm: "rounded-sm",
+              md: "rounded-md",
+              xl: "rounded-xl",
+            };
+            const paddingMap: Record<string, string> = {
+              sm: "p-4",
+              md: "p-6",
+              lg: "p-8",
+            };
+            const radius = radiusMap[bs.borderRadius as string] || "rounded-xl";
+            const padding = paddingMap[bs.padding as string] || "p-6";
+            const shadow =
+              bs.showShadow !== false ? "shadow-sm hover:shadow-md" : "";
+            return (
+              <div
+                key={block.id}
+                className={`${radius} ${padding} ${shadow} transition-shadow`}
+                style={{
+                  backgroundColor: String(bs.backgroundColor || "#FFFFFF"),
+                }}
+                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 */}
+        {featureBlocks.length === 0 && isEditing && (
+          <div className="text-center py-12 border-2 border-dashed border-gray-300 rounded-lg">
+            <p className="text-gray-500">
+              Add feature blocks to populate this section
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default FeaturesDefault;

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

@@ -0,0 +1,330 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const sectionSettings: FieldDefinition[] = [
+  {
+    id: "sectionTitle",
+    type: "text",
+    label: "Section Title",
+    default: "Our Features",
+  },
+  {
+    id: "sectionSubtitle",
+    type: "textarea",
+    label: "Section Subtitle",
+    default: "Everything you need to build something great",
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#F9FAFB",
+  },
+];
+
+export const featuresSchema: SectionSchema = {
+  type: "my-simple-features",
+  name: "Simple Features",
+  description: "Feature grid with icon, heading, and description blocks",
+  category: "features",
+  icon: "grid",
+  settings: sectionSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Features",
+      description: "A grid of feature blocks with icons",
+    },
+  ],
+  blocks: [
+    {
+      type: "features-container",
+      name: "Features Grid",
+      description: "Grid container for feature items",
+      icon: "grid",
+      settings: [
+        {
+          id: "columns",
+          type: "select",
+          label: "Columns",
+          default: "3",
+          options: [
+            { label: "2 Columns", value: "2" },
+            { label: "3 Columns", value: "3" },
+            { label: "4 Columns", value: "4" },
+          ],
+        },
+        {
+          id: "gap",
+          type: "select",
+          label: "Gap Size",
+          default: "lg",
+          options: [
+            { label: "Small", value: "sm" },
+            { label: "Medium", value: "md" },
+            { label: "Large", value: "lg" },
+          ],
+        },
+      ],
+      defaults: {
+        columns: "3",
+        gap: "lg",
+      },
+      limit: 1,
+    },
+    {
+      type: "feature-item",
+      name: "Feature Item",
+      description: "A single feature with icon, title, and description",
+      icon: "star",
+      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: "padding",
+          type: "select",
+          label: "Padding",
+          default: "md",
+          options: [
+            { label: "Small", value: "sm" },
+            { label: "Medium", value: "md" },
+            { label: "Large", value: "lg" },
+          ],
+        },
+        {
+          id: "showShadow",
+          type: "checkbox",
+          label: "Show Shadow",
+          default: true,
+        },
+      ],
+      defaults: {
+        backgroundColor: "#FFFFFF",
+        borderRadius: "xl",
+        padding: "md",
+        showShadow: true,
+      },
+      limit: 12,
+    },
+  ],
+  maxBlocks: 13,
+  defaults: {
+    settings: {
+      sectionTitle: "Our Features",
+      sectionSubtitle: "Everything you need to build something great",
+      backgroundColor: "#F9FAFB",
+    },
+    components: [
+      {
+        id: "features-title",
+        type: "heading",
+        slot: "section-title",
+        order: 0,
+        content: { text: "Our Features", tag: "h2" },
+        style: {
+          fontSize: "3xl",
+          fontWeight: "bold",
+          color: "#111827",
+          textAlign: "center",
+          marginBottom: "0.5rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+      {
+        id: "features-subtitle",
+        type: "paragraph",
+        slot: "section-subtitle",
+        order: 1,
+        content: { text: "Everything you need to build something great" },
+        style: {
+          fontSize: "lg",
+          color: "#6B7280",
+          textAlign: "center",
+          marginBottom: "3rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+    ],
+    blocks: [
+      {
+        id: "features-container-1",
+        type: "features-container",
+        order: 0,
+        enabled: true,
+        settings: {
+          columns: "3",
+          gap: "lg",
+        },
+        blocks: [
+          {
+            id: "feature-1",
+            type: "feature-item",
+            order: 0,
+            enabled: true,
+            settings: {},
+            components: [
+              {
+                id: "feature-1-icon",
+                type: "icon",
+                slot: "icon",
+                order: 0,
+                content: { icon: "zap", text: "" },
+                style: { fontSize: "2xl", color: "#3B82F6" },
+                styleMode: "advanced",
+                enabled: true,
+              },
+              {
+                id: "feature-1-title",
+                type: "heading",
+                slot: "title",
+                order: 1,
+                content: { text: "Lightning Fast", tag: "h3" },
+                style: {
+                  fontSize: "xl",
+                  fontWeight: "semibold",
+                  color: "#111827",
+                  marginBottom: "0.5rem",
+                },
+                styleMode: "advanced",
+                enabled: true,
+              },
+              {
+                id: "feature-1-desc",
+                type: "paragraph",
+                slot: "description",
+                order: 2,
+                content: {
+                  text: "Built for speed with optimized performance at every level.",
+                },
+                style: {
+                  fontSize: "base",
+                  color: "#6B7280",
+                  lineHeight: "1.6",
+                },
+                styleMode: "advanced",
+                enabled: true,
+              },
+            ],
+          },
+          {
+            id: "feature-2",
+            type: "feature-item",
+            order: 1,
+            enabled: true,
+            settings: {},
+            components: [
+              {
+                id: "feature-2-icon",
+                type: "icon",
+                slot: "icon",
+                order: 0,
+                content: { icon: "shield", text: "" },
+                style: { fontSize: "2xl", color: "#3B82F6" },
+                styleMode: "advanced",
+                enabled: true,
+              },
+              {
+                id: "feature-2-title",
+                type: "heading",
+                slot: "title",
+                order: 1,
+                content: { text: "Secure by Default", tag: "h3" },
+                style: {
+                  fontSize: "xl",
+                  fontWeight: "semibold",
+                  color: "#111827",
+                  marginBottom: "0.5rem",
+                },
+                styleMode: "advanced",
+                enabled: true,
+              },
+              {
+                id: "feature-2-desc",
+                type: "paragraph",
+                slot: "description",
+                order: 2,
+                content: {
+                  text: "Enterprise-grade security built into every feature.",
+                },
+                style: {
+                  fontSize: "base",
+                  color: "#6B7280",
+                  lineHeight: "1.6",
+                },
+                styleMode: "advanced",
+                enabled: true,
+              },
+            ],
+          },
+          {
+            id: "feature-3",
+            type: "feature-item",
+            order: 2,
+            enabled: true,
+            settings: {},
+            components: [
+              {
+                id: "feature-3-icon",
+                type: "icon",
+                slot: "icon",
+                order: 0,
+                content: { icon: "palette", text: "" },
+                style: { fontSize: "2xl", color: "#3B82F6" },
+                styleMode: "advanced",
+                enabled: true,
+              },
+              {
+                id: "feature-3-title",
+                type: "heading",
+                slot: "title",
+                order: 1,
+                content: { text: "Beautiful Design", tag: "h3" },
+                style: {
+                  fontSize: "xl",
+                  fontWeight: "semibold",
+                  color: "#111827",
+                  marginBottom: "0.5rem",
+                },
+                styleMode: "advanced",
+                enabled: true,
+              },
+              {
+                id: "feature-3-desc",
+                type: "paragraph",
+                slot: "description",
+                order: 2,
+                content: {
+                  text: "Pixel-perfect designs that look great on any device.",
+                },
+                style: {
+                  fontSize: "base",
+                  color: "#6B7280",
+                  lineHeight: "1.6",
+                },
+                styleMode: "advanced",
+                enabled: true,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};

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

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

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

@@ -0,0 +1,134 @@
+"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 GalleryDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const components = filterEnabledComponents(section.components || []);
+  const titleComp = components.find(
+    (c) => c.slot === "section-title" || c.id === "gallery-title"
+  );
+  const subtitleComp = components.find(
+    (c) => c.slot === "section-subtitle" || c.id === "gallery-subtitle"
+  );
+
+  const { settings } = getSectionValues(section, schema);
+  const { sectionTitle, sectionSubtitle, columns, gap, backgroundColor } =
+    settings;
+
+  const colClass =
+    columns === "2"
+      ? "md:grid-cols-2"
+      : columns === "4"
+        ? "md:grid-cols-2 lg:grid-cols-4"
+        : "md:grid-cols-3";
+
+  const gapClass = gap === "sm" ? "gap-4" : gap === "lg" ? "gap-8" : "gap-6";
+
+  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="gallery"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple Gallery"
+    >
+      <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>
+
+        {/* Gallery Grid */}
+        <div className={`grid grid-cols-1 ${colClass} ${gapClass}`}>
+          {blocks.map((block) => {
+            const bs = block.settings || {};
+            const radiusMap: Record<string, string> = {
+              none: "rounded-none",
+              sm: "rounded-sm",
+              md: "rounded-md",
+              lg: "rounded-lg",
+            };
+            const radius = radiusMap[bs.borderRadius as string] || "rounded-lg";
+            const aspectMap: Record<string, string> = {
+              square: "aspect-square",
+              landscape: "aspect-[4/3]",
+              wide: "aspect-video",
+            };
+            const aspect = aspectMap[bs.aspectRatio as string] || "";
+            return (
+              <div
+                key={block.id}
+                className={`overflow-hidden ${radius} ${aspect} group`}
+                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 gallery items to populate this section
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default GalleryDefault;