@onexapis/cli 1.1.17 → 1.1.19

package/templates/default/bundle-entry.ts

@@ -0,0 +1,18 @@
+/**
+ * My Simple Theme Bundle Entry
+ *
+ * This file exports all sections, schemas, and configurations.
+ * It's compiled into a standalone bundle that can be loaded at runtime.
+ */
+
+// Export all sections and schemas from registry
+export * from "./sections-registry";
+
+// Export theme configuration
+export { default as themeConfig } from "./theme.config";
+export { default as layoutConfig } from "./theme.layout";
+
+// Export pages
+export { default as homePageConfig } from "./pages/home";
+export { default as aboutPageConfig } from "./pages/about";
+export { default as showcasePageConfig } from "./pages/showcase";

package/templates/default/index.ts

@@ -0,0 +1,26 @@
+/**
+ * My Simple Theme - Main Export
+ * Exports theme configuration, layout, and pages
+ * Sections are auto-discovered by ThemeRegistryManager
+ */
+
+// Design system config (colors, fonts, spacing)
+export { default as themeConfig, simpleThemeConfig } from "./theme.config";
+
+// Layout config (header/footer sections)
+export { default as layoutConfig, simpleLayoutConfig } from "./theme.layout";
+
+// Page configurations
+export { default as homePageConfig } from "./pages/home";
+export { default as aboutPageConfig } from "./pages/about";
+export { default as showcasePageConfig } from "./pages/showcase";
+
+// Page map for dynamic access
+export const pages = {
+  home: () => import("./pages/home").then((m) => m.default),
+  about: () => import("./pages/about").then((m) => m.default),
+  showcase: () => import("./pages/showcase").then((m) => m.default),
+};
+
+// Page slugs (for discovery)
+export const pageList = ["home", "about", "showcase"] as const;

package/templates/default/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@onex-themes/my-simple",
+  "version": "1.0.0",
+  "description": "My Simple - A clean and minimal theme for basic websites",
+  "private": true,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "onexthm dev",
+    "build": "onexthm build",
+    "publish": "onexthm publish",
+    "validate": "onexthm validate",
+    "type-check": "tsc --noEmit",
+    "lint": "echo 'no linter configured'"
+  },
+  "keywords": [
+    "onex",
+    "theme",
+    "simple",
+    "minimal"
+  ],
+  "author": "OneX Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "@onexapis/core": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/default/pages/about.ts

@@ -0,0 +1,66 @@
+/**
+ * My Simple Theme - About Page Configuration
+ * Page skeleton with sections structure
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const aboutPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "About Us - My Simple Theme",
+  handle: "about",
+  path: "/about",
+  type: "about",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "About Us - My Simple Theme",
+    description: "Learn more about us",
+    keywords: ["about", "company", "team"],
+  },
+
+  sections: [
+    {
+      id: "about-1",
+      type: "my-simple-about",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {
+        heading: "About Our Company",
+        subheading: "Our Story",
+        description:
+          "We are a team dedicated to creating simple, elegant solutions for the web. Our mission is to make beautiful websites accessible to everyone.",
+        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: "image-right",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "testimonials-1",
+      type: "my-simple-testimonials",
+      template: "default",
+      order: 1,
+      enabled: true,
+      settings: {
+        sectionTitle: "What People Say About Us",
+        sectionSubtitle: "Hear from our satisfied customers",
+        columns: "3",
+        backgroundColor: "#F9FAFB",
+      },
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default aboutPageConfig;

package/templates/default/pages/home.ts

@@ -0,0 +1,93 @@
+/**
+ * My Simple Theme - Home Page Configuration
+ * Page skeleton with sections structure
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const homePageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "My Simple Theme - Home",
+  handle: "home",
+  path: "/",
+  type: "home",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "My Simple Theme - Home",
+    description: "A simple, clean theme for your website",
+    keywords: ["simple", "theme", "website"],
+  },
+
+  sections: [
+    {
+      id: "hero-1",
+      type: "my-simple-hero",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {
+        title: "Welcome to My Simple Theme",
+        subtitle: "A clean and minimal theme for your website",
+        buttonText: "Learn More",
+        buttonLink: "/about",
+        secondaryButtonText: "View Showcase",
+        secondaryButtonLink: "/showcase",
+        badgeText: "New Release",
+        showBadge: true,
+        showImage: false,
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "features-1",
+      type: "my-simple-features",
+      template: "default",
+      order: 1,
+      enabled: true,
+      settings: {
+        sectionTitle: "Why Choose Us",
+        sectionSubtitle: "Built with the best tools and practices",
+        columns: "3",
+        backgroundColor: "#F9FAFB",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "stats-1",
+      type: "my-simple-stats",
+      template: "default",
+      order: 2,
+      enabled: true,
+      settings: {
+        sectionTitle: "Our Impact",
+        columns: "4",
+        backgroundColor: "#111827",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "cta-1",
+      type: "my-simple-cta",
+      template: "default",
+      order: 3,
+      enabled: true,
+      settings: {
+        backgroundColor: "#3B82F6",
+        layout: "centered",
+      },
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default homePageConfig;

package/templates/default/pages/showcase.ts

@@ -0,0 +1,146 @@
+/**
+ * My Simple Theme - Showcase Page Configuration
+ * Demonstrates all available sections
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const showcasePageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Showcase - My Simple Theme",
+  handle: "showcase",
+  path: "/showcase",
+  type: "custom",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "Showcase - My Simple Theme",
+    description: "A showcase of all available sections in the My Simple Theme",
+    keywords: ["showcase", "sections", "demo"],
+  },
+
+  sections: [
+    {
+      id: "showcase-hero",
+      type: "my-simple-hero",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {
+        title: "Section Showcase",
+        subtitle: "Explore all the sections available in the My Simple Theme",
+        buttonText: "Explore",
+        buttonLink: "#features",
+        secondaryButtonText: "Back Home",
+        secondaryButtonLink: "/",
+        badgeText: "Showcase",
+        showBadge: true,
+        showImage: false,
+        backgroundColor: "#7C3AED",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "showcase-features",
+      type: "my-simple-features",
+      template: "default",
+      order: 1,
+      enabled: true,
+      settings: {
+        sectionTitle: "Features Section",
+        sectionSubtitle: "Block-based feature grid with icons",
+        columns: "3",
+        backgroundColor: "#F9FAFB",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "showcase-stats",
+      type: "my-simple-stats",
+      template: "default",
+      order: 2,
+      enabled: true,
+      settings: {
+        sectionTitle: "Stats Section",
+        columns: "4",
+        backgroundColor: "#111827",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "showcase-about",
+      type: "my-simple-about",
+      template: "default",
+      order: 3,
+      enabled: true,
+      settings: {
+        heading: "About Section",
+        subheading: "With image-left layout",
+        description:
+          "This about section supports multiple layouts including centered, image-left, and image-right.",
+        secondaryDescription:
+          "It uses badge, heading, subheading, divider, paragraph, and image components.",
+        badgeText: "About",
+        showImage: true,
+        layout: "image-left",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "showcase-testimonials",
+      type: "my-simple-testimonials",
+      template: "default",
+      order: 4,
+      enabled: true,
+      settings: {
+        sectionTitle: "Testimonials Section",
+        sectionSubtitle:
+          "Block-based testimonial cards with quotes and ratings",
+        columns: "3",
+        backgroundColor: "#FFFFFF",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "showcase-gallery",
+      type: "my-simple-gallery",
+      template: "default",
+      order: 5,
+      enabled: true,
+      settings: {
+        sectionTitle: "Gallery Section",
+        sectionSubtitle: "Block-based responsive image gallery",
+        columns: "3",
+        gap: "md",
+        backgroundColor: "#F9FAFB",
+      },
+      components: [],
+      blocks: [],
+    },
+    {
+      id: "showcase-cta",
+      type: "my-simple-cta",
+      template: "default",
+      order: 6,
+      enabled: true,
+      settings: {
+        backgroundColor: "#3B82F6",
+        layout: "centered",
+      },
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default showcasePageConfig;

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

@@ -0,0 +1,237 @@
+"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 AboutDefault({
+  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 === "about-badge"
+  );
+  const headingComp = components.find(
+    (c) => c.slot === "heading" || c.id === "about-heading"
+  );
+  const subheadingComp = components.find(
+    (c) => c.slot === "subheading" || c.id === "about-subheading"
+  );
+  const dividerComp = components.find(
+    (c) => c.slot === "divider" || c.id === "about-divider"
+  );
+  const descriptionComp = components.find(
+    (c) => c.slot === "description" || c.id === "about-description"
+  );
+  const secondaryDescComp = components.find(
+    (c) =>
+      c.slot === "secondary-description" ||
+      c.id === "about-secondary-description"
+  );
+  const imageComp = components.find(
+    (c) => c.slot === "image" || c.id === "about-image"
+  );
+
+  const { settings } = getSectionValues(section, schema);
+  const {
+    heading,
+    subheading,
+    description,
+    secondaryDescription,
+    badgeText,
+    showImage,
+    layout,
+  } = settings;
+
+  const isTwoColumn = layout === "image-left" || layout === "image-right";
+  const isImageLeft = layout === "image-left";
+
+  // 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";
+
+  const renderContent = () => (
+    <div className={isTwoColumn ? "" : "text-center"}>
+      {/* Badge */}
+      {badgeComp ? (
+        <div
+          key="badge-wrapper"
+          className={`mb-4 ${isTwoColumn ? "" : "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 text-blue-600 bg-blue-50 rounded-full`}
+        >
+          {String(badgeText)}
+        </span>
+      ) : null}
+
+      {/* Heading */}
+      {headingComp ? (
+        <ComponentRenderer
+          key="heading"
+          instance={toComponentInstance(headingComp)}
+          sectionId={section.id}
+          isEditing={isEditing}
+        />
+      ) : heading ? (
+        <h2
+          key="heading-fallback"
+          className="text-4xl font-bold text-gray-900 mb-2"
+        >
+          {String(heading)}
+        </h2>
+      ) : null}
+
+      {/* Subheading */}
+      {subheadingComp ? (
+        <ComponentRenderer
+          key="subheading"
+          instance={toComponentInstance(subheadingComp)}
+          sectionId={section.id}
+          isEditing={isEditing}
+        />
+      ) : subheading ? (
+        <h3
+          key="subheading-fallback"
+          className="text-xl font-medium text-gray-500 mb-4"
+        >
+          {String(subheading)}
+        </h3>
+      ) : null}
+
+      {/* Divider */}
+      {dividerComp && (
+        <ComponentRenderer
+          key="divider"
+          instance={toComponentInstance(dividerComp)}
+          sectionId={section.id}
+          isEditing={isEditing}
+        />
+      )}
+
+      {/* Description */}
+      {descriptionComp ? (
+        <ComponentRenderer
+          key="description"
+          instance={toComponentInstance(descriptionComp)}
+          sectionId={section.id}
+          isEditing={isEditing}
+        />
+      ) : description ? (
+        <p
+          key="description-fallback"
+          className="text-lg text-gray-600 leading-relaxed mb-4"
+        >
+          {String(description)}
+        </p>
+      ) : null}
+
+      {/* Secondary Description */}
+      {secondaryDescComp ? (
+        <ComponentRenderer
+          key="secondary-description"
+          instance={toComponentInstance(secondaryDescComp)}
+          sectionId={section.id}
+          isEditing={isEditing}
+        />
+      ) : secondaryDescription ? (
+        <p
+          key="secondary-description-fallback"
+          className="text-base text-gray-500 leading-relaxed"
+        >
+          {String(secondaryDescription)}
+        </p>
+      ) : null}
+    </div>
+  );
+
+  const renderImage = () => {
+    if (showImage === false) return null;
+    if (!imageComp) return null;
+
+    return (
+      <div>
+        <ComponentRenderer
+          key={imageComp.id}
+          instance={toComponentInstance(imageComp)}
+          sectionId={section.id}
+          isEditing={isEditing}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <section
+      className="py-16 bg-white"
+      data-section="about"
+      data-section-id={section.id}
+      data-section-template="default"
+      data-section-name="Simple About"
+    >
+      <div
+        className="container mx-auto px-4 max-w-6xl"
+        data-section-id={section.id}
+        data-block-id={contentBlock?.id || "about-content-1"}
+        data-block-type="about-content"
+      >
+        {isTwoColumn ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            {isImageLeft ? (
+              <>
+                {renderImage()}
+                {renderContent()}
+              </>
+            ) : (
+              <>
+                {renderContent()}
+                {renderImage()}
+              </>
+            )}
+          </div>
+        ) : (
+          <div className={`${blockWidth} mx-auto`}>
+            {renderContent()}
+            {renderImage()}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default AboutDefault;