@onexapis/cli 1.1.16 → 1.1.18

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

@@ -0,0 +1,397 @@
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "sectionTitle",
+    type: "text",
+    label: "Section Title",
+    default: "Gallery",
+  },
+  {
+    id: "sectionSubtitle",
+    type: "textarea",
+    label: "Section Subtitle",
+    default: "A showcase of our finest work",
+  },
+  {
+    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: "md",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" },
+    ],
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#FFFFFF",
+  },
+];
+
+export const gallerySchema: SectionSchema = {
+  type: "my-simple-gallery",
+  name: "Simple Gallery",
+  description: "Responsive image gallery with captions",
+  category: "gallery",
+  icon: "image",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Gallery",
+      description: "A responsive grid of image cards with captions",
+    },
+  ],
+  blocks: [
+    {
+      type: "gallery-item",
+      name: "Gallery Item",
+      description: "A single gallery image with optional caption",
+      icon: "image",
+      settings: [
+        {
+          id: "aspectRatio",
+          type: "select",
+          label: "Aspect Ratio",
+          default: "auto",
+          options: [
+            { label: "Auto", value: "auto" },
+            { label: "Square (1:1)", value: "square" },
+            { label: "Landscape (4:3)", value: "landscape" },
+            { label: "Wide (16:9)", value: "wide" },
+          ],
+        },
+        {
+          id: "borderRadius",
+          type: "select",
+          label: "Border Radius",
+          default: "lg",
+          options: [
+            { label: "None", value: "none" },
+            { label: "Small", value: "sm" },
+            { label: "Medium", value: "md" },
+            { label: "Large", value: "lg" },
+          ],
+        },
+        {
+          id: "showCaption",
+          type: "checkbox",
+          label: "Show Caption",
+          default: true,
+        },
+      ],
+      defaults: {
+        aspectRatio: "auto",
+        borderRadius: "lg",
+        showCaption: true,
+      },
+      limit: 24,
+    },
+  ],
+  maxBlocks: 24,
+  defaults: {
+    settings: {
+      sectionTitle: "Gallery",
+      sectionSubtitle: "A showcase of our finest work",
+      columns: "3",
+      gap: "md",
+      backgroundColor: "#FFFFFF",
+    },
+    components: [
+      {
+        id: "gallery-title",
+        type: "heading",
+        slot: "section-title",
+        order: 0,
+        content: { text: "Gallery", tag: "h2" },
+        style: {
+          fontSize: "3xl",
+          fontWeight: "bold",
+          color: "#111827",
+          textAlign: "center",
+          marginBottom: "0.5rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+      {
+        id: "gallery-subtitle",
+        type: "paragraph",
+        slot: "section-subtitle",
+        order: 1,
+        content: { text: "A showcase of our finest work" },
+        style: {
+          fontSize: "lg",
+          color: "#6B7280",
+          textAlign: "center",
+          marginBottom: "3rem",
+        },
+        styleMode: "advanced",
+        enabled: true,
+      },
+    ],
+    blocks: [
+      {
+        id: "gallery-1",
+        type: "gallery-item",
+        order: 0,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "gallery-1-image",
+            type: "image",
+            slot: "image",
+            order: 0,
+            content: {
+              src: "https://picsum.photos/seed/gallery1/600/400",
+              alt: "Gallery image 1",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "gallery-1-caption",
+            type: "paragraph",
+            slot: "caption",
+            order: 1,
+            content: { text: "Creative workspace design" },
+            style: {
+              fontSize: "sm",
+              color: "#6B7280",
+              textAlign: "center",
+              marginTop: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "gallery-2",
+        type: "gallery-item",
+        order: 1,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "gallery-2-image",
+            type: "image",
+            slot: "image",
+            order: 0,
+            content: {
+              src: "https://picsum.photos/seed/gallery2/600/400",
+              alt: "Gallery image 2",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "gallery-2-caption",
+            type: "paragraph",
+            slot: "caption",
+            order: 1,
+            content: { text: "Modern architecture" },
+            style: {
+              fontSize: "sm",
+              color: "#6B7280",
+              textAlign: "center",
+              marginTop: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "gallery-3",
+        type: "gallery-item",
+        order: 2,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "gallery-3-image",
+            type: "image",
+            slot: "image",
+            order: 0,
+            content: {
+              src: "https://picsum.photos/seed/gallery3/600/400",
+              alt: "Gallery image 3",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "gallery-3-caption",
+            type: "paragraph",
+            slot: "caption",
+            order: 1,
+            content: { text: "Nature photography" },
+            style: {
+              fontSize: "sm",
+              color: "#6B7280",
+              textAlign: "center",
+              marginTop: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "gallery-4",
+        type: "gallery-item",
+        order: 3,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "gallery-4-image",
+            type: "image",
+            slot: "image",
+            order: 0,
+            content: {
+              src: "https://picsum.photos/seed/gallery4/600/400",
+              alt: "Gallery image 4",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "gallery-4-caption",
+            type: "paragraph",
+            slot: "caption",
+            order: 1,
+            content: { text: "Urban landscape" },
+            style: {
+              fontSize: "sm",
+              color: "#6B7280",
+              textAlign: "center",
+              marginTop: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "gallery-5",
+        type: "gallery-item",
+        order: 4,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "gallery-5-image",
+            type: "image",
+            slot: "image",
+            order: 0,
+            content: {
+              src: "https://picsum.photos/seed/gallery5/600/400",
+              alt: "Gallery image 5",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "gallery-5-caption",
+            type: "paragraph",
+            slot: "caption",
+            order: 1,
+            content: { text: "Abstract patterns" },
+            style: {
+              fontSize: "sm",
+              color: "#6B7280",
+              textAlign: "center",
+              marginTop: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+      {
+        id: "gallery-6",
+        type: "gallery-item",
+        order: 5,
+        enabled: true,
+        settings: {},
+        components: [
+          {
+            id: "gallery-6-image",
+            type: "image",
+            slot: "image",
+            order: 0,
+            content: {
+              src: "https://picsum.photos/seed/gallery6/600/400",
+              alt: "Gallery image 6",
+            },
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+          {
+            id: "gallery-6-caption",
+            type: "paragraph",
+            slot: "caption",
+            order: 1,
+            content: { text: "Minimalist interior" },
+            style: {
+              fontSize: "sm",
+              color: "#6B7280",
+              textAlign: "center",
+              marginTop: "0.5rem",
+            },
+            styleMode: "advanced",
+            enabled: true,
+          },
+        ],
+      },
+    ],
+  },
+};

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

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

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

@@ -0,0 +1,212 @@
+"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 HeroDefault({
+  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 || []);
+
+  // Find components by slot (preferred) OR legacy ID (backward compatibility)
+  const badgeComp = components.find(
+    (c) => c.slot === "badge" || c.id === "hero-badge"
+  );
+  const titleComp = components.find(
+    (c) => c.slot === "title" || c.id === "hero-title"
+  );
+  const subtitleComp = components.find(
+    (c) => c.slot === "subtitle" || c.id === "hero-subtitle"
+  );
+  const dividerComp = components.find(
+    (c) => c.slot === "divider" || c.id === "hero-divider"
+  );
+  const ctaComp = components.find(
+    (c) => c.slot === "cta" || c.id === "hero-cta"
+  );
+  const secondaryCtaComp = components.find(
+    (c) => c.slot === "secondary-cta" || c.id === "hero-secondary-cta"
+  );
+  const imageComp = components.find(
+    (c) => c.slot === "image" || c.id === "hero-image"
+  );
+
+  const { settings } = getSectionValues(section, schema);
+  const {
+    title,
+    subtitle,
+    buttonText,
+    buttonLink,
+    secondaryButtonText,
+    secondaryButtonLink,
+    badgeText,
+    showBadge,
+    showImage,
+    backgroundColor,
+  } = settings;
+
+  // 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-4xl";
+
+  return (
+    <section
+      className="relative py-20 bg-gradient-to-br from-blue-500 to-purple-600"
+      style={
+        backgroundColor
+          ? {
+              background: `linear-gradient(135deg, ${String(backgroundColor)}, ${String(backgroundColor)}dd)`,
+            }
+          : undefined
+      }
+      data-section="hero"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple Hero"
+    >
+      <div
+        className={`container mx-auto px-4 text-white ${blockAlign} ${blockWidth}`}
+        data-section-id={section.id}
+        data-block-id={contentBlock?.id || "hero-content-1"}
+        data-block-type="hero-content"
+      >
+        {/* Badge */}
+        {showBadge !== false &&
+          (badgeComp ? (
+            <div key="badge-wrapper" className="mb-4 inline-block">
+              <ComponentRenderer
+                instance={toComponentInstance(badgeComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            </div>
+          ) : badgeText ? (
+            <span
+              key="badge-fallback"
+              className="inline-block mb-4 px-3 py-1 text-sm font-semibold bg-white/20 rounded-full text-white"
+            >
+              {String(badgeText)}
+            </span>
+          ) : null)}
+
+        {/* Title */}
+        {titleComp ? (
+          <ComponentRenderer
+            key="title"
+            instance={toComponentInstance(titleComp)}
+            sectionId={section.id}
+            isEditing={isEditing}
+          />
+        ) : title ? (
+          <h1
+            key="title-fallback"
+            className="text-5xl font-bold mb-4 text-white"
+          >
+            {String(title)}
+          </h1>
+        ) : null}
+
+        {/* Subtitle */}
+        {subtitleComp ? (
+          <ComponentRenderer
+            key="subtitle"
+            instance={toComponentInstance(subtitleComp)}
+            sectionId={section.id}
+            isEditing={isEditing}
+          />
+        ) : subtitle ? (
+          <p key="subtitle-fallback" className="text-xl mb-6 text-white/90">
+            {String(subtitle)}
+          </p>
+        ) : null}
+
+        {/* Divider */}
+        {dividerComp && (
+          <ComponentRenderer
+            key="divider"
+            instance={toComponentInstance(dividerComp)}
+            sectionId={section.id}
+            isEditing={isEditing}
+          />
+        )}
+
+        {/* Button Row */}
+        <div key="button-row" className="flex gap-4 justify-center flex-wrap">
+          {ctaComp ? (
+            <ComponentRenderer
+              key={ctaComp.id}
+              instance={toComponentInstance(ctaComp)}
+              sectionId={section.id}
+              isEditing={isEditing}
+            />
+          ) : buttonText ? (
+            <a
+              key="cta-fallback"
+              href={String(buttonLink || "#")}
+              className="inline-block px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition"
+            >
+              {String(buttonText)}
+            </a>
+          ) : null}
+
+          {secondaryCtaComp ? (
+            <ComponentRenderer
+              key={secondaryCtaComp.id}
+              instance={toComponentInstance(secondaryCtaComp)}
+              sectionId={section.id}
+              isEditing={isEditing}
+            />
+          ) : secondaryButtonText ? (
+            <a
+              key="secondary-cta-fallback"
+              href={String(secondaryButtonLink || "#")}
+              className="inline-block px-8 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition"
+            >
+              {String(secondaryButtonText)}
+            </a>
+          ) : null}
+        </div>
+
+        {/* Hero Image */}
+        {showImage !== false &&
+          (imageComp ? (
+            <div key="image-wrapper" className="mt-8">
+              <ComponentRenderer
+                key={imageComp.id}
+                instance={toComponentInstance(imageComp)}
+                sectionId={section.id}
+                isEditing={isEditing}
+              />
+            </div>
+          ) : null)}
+      </div>
+    </section>
+  );
+}
+
+export default HeroDefault;