@onexapis/cli 1.0.0

package/templates/default/package.json.ejs

@@ -0,0 +1,30 @@
+{
+  "name": "<%= projectName %>",
+  "version": "1.0.0",
+  "description": "<%= description %>",
+  "main": "dist/bundle.mjs",
+  "scripts": {
+    "build": "node esbuild.config.js",
+    "dev": "node esbuild.config.js --watch"
+  },
+  "keywords": [
+    "onex",
+    "theme"
+  ],
+  "author": "<%= author %>",
+  "license": "MIT",
+  "dependencies": {
+    "@onexapis/core": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "esbuild": "^0.19.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "next": ">=14.0.0"
+  }
+}

package/templates/default/src/config.ts.ejs

@@ -0,0 +1,98 @@
+import type { ThemeConfig } from "@onexapis/core";
+
+/**
+ * <%= displayName %> Theme Configuration
+ * Design tokens: colors, typography, spacing, etc.
+ */
+export const themeConfig: ThemeConfig = {
+  // Color palette
+  colors: {
+    primary: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+    },
+    secondary: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+    },
+    accent: {
+      50: "#fdf4ff",
+      100: "#fae8ff",
+      200: "#f5d0fe",
+      300: "#f0abfc",
+      400: "#e879f9",
+      500: "#d946ef",
+      600: "#c026d3",
+      700: "#a21caf",
+      800: "#86198f",
+      900: "#701a75",
+    },
+  },
+
+  // Typography
+  typography: {
+    fontFamily: {
+      sans: ["Inter", "system-ui", "sans-serif"],
+      serif: ["Georgia", "serif"],
+      mono: ["Monaco", "monospace"],
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+    },
+  },
+
+  // Spacing
+  spacing: {
+    xs: "0.5rem",
+    sm: "1rem",
+    md: "1.5rem",
+    lg: "2rem",
+    xl: "3rem",
+    "2xl": "4rem",
+    "3xl": "6rem",
+    "4xl": "8rem",
+  },
+
+  // Border radius
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    full: "9999px",
+  },
+
+  // Breakpoints
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  },
+};

package/templates/default/src/index.ts.ejs

@@ -0,0 +1,11 @@
+/**
+ * <%= themeNamePascal %> Theme
+ * Entry point for the theme module
+ */
+
+export { manifest as <%= themeName %>Manifest } from "./manifest";
+export { themeConfig as <%= themeName %>Config } from "./config";
+export { themeLayout as <%= themeName %>Layout } from "./layout";
+
+// Re-export default
+export { default } from "./manifest";

package/templates/default/src/layout.ts

@@ -0,0 +1,23 @@
+import type { ThemeLayoutConfig } from "@onexapis/core";
+
+/**
+ * Theme Layout
+ * Define header and footer sections
+ */
+export const themeLayout: ThemeLayoutConfig = {
+  // Header section configuration
+  header: {
+    type: "header",
+    template: "default",
+    enabled: true,
+    settings: {},
+  },
+
+  // Footer section configuration
+  footer: {
+    type: "footer",
+    template: "default",
+    enabled: true,
+    settings: {},
+  },
+};

package/templates/default/src/manifest.ts.ejs

@@ -0,0 +1,47 @@
+import type { ThemeExport } from "@onexapis/core";
+
+/**
+ * <%= displayName %> Theme Manifest
+ * <%= description %>
+ */
+export const manifest: ThemeExport = {
+  id: "<%= themeName %>",
+  name: "<%= displayName %>",
+  description: "<%= description %>",
+  version: "1.0.0",
+  author: "<%= author %>",
+
+  // Theme configuration
+  config: () => import("./config").then((m) => m.themeConfig),
+
+  // Theme layout (header/footer sections)
+  layout: () => import("./layout").then((m) => m.themeLayout),
+
+  // Available sections in this theme
+  sections: {
+    hero: () => import("./sections/hero").then((m) => m.heroSchema),
+    header: () => import("./sections/header").then((m) => m.headerSchema),
+    footer: () => import("./sections/footer").then((m) => m.footerSchema),
+  },
+
+  // Available blocks in this theme
+  blocks: {
+    // Example: productCard: () => import("./blocks/product-card").then((m) => m.productCardDefinition),
+  },
+
+  // Default pages
+  pages: {
+    home: () => import("./pages/home").then((m) => m.homePageConfig),
+  },
+
+  // Supported page types
+  supportedPageTypes: ["home", "about", "contact", "custom"],
+
+  // Preview image (optional)
+  preview: undefined,
+
+  // Tags for categorization (optional)
+  tags: ["starter", "custom"],
+};
+
+export default manifest;

package/templates/default/src/pages/home.ts.ejs

@@ -0,0 +1,37 @@
+import type { PageConfig } from "@onexapis/core";
+
+/**
+ * Home Page Configuration
+ */
+export const homePageConfig: PageConfig = {
+  type: "home",
+  title: "<%= displayName %>",
+  description: "Welcome to <%= displayName %>",
+
+  // SEO metadata
+  seo: {
+    title: "<%= displayName %> - Home",
+    description: "<%= description %>",
+    keywords: [],
+    ogImage: undefined,
+  },
+
+  // Page sections
+  sections: [
+    {
+      id: "hero-1",
+      type: "hero",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {
+        title: "Welcome to <%= displayName %>",
+        subtitle: "<%= description %>",
+        backgroundColor: "#3b82f6",
+        textColor: "#ffffff",
+      },
+      components: [],
+      blocks: [],
+    },
+  ],
+};

package/templates/default/src/sections/footer/footer-default.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { SectionComponentProps } from "@onexapis/core";
+
+export function FooterDefault({ section, isEditing }: SectionComponentProps) {
+  const { settings } = section;
+
+  const copyright =
+    (settings.copyright as string) || "© 2024 OneX. All rights reserved.";
+  const backgroundColor = (settings.backgroundColor as string) || "#1f2937";
+  const textColor = (settings.textColor as string) || "#ffffff";
+
+  return (
+    <footer
+      style={{
+        backgroundColor,
+        color: textColor,
+        padding: "2rem",
+        textAlign: "center",
+      }}
+      data-section-id={section.id}
+      data-editable={isEditing}
+    >
+      <div style={{ maxWidth: "1280px", margin: "0 auto" }}>
+        <p data-editable-field="copyright">{copyright}</p>
+      </div>
+    </footer>
+  );
+}

package/templates/default/src/sections/footer/footer.schema.ts

@@ -0,0 +1,45 @@
+import type { SectionSchema } from "@onexapis/core";
+import { FooterDefault } from "./footer-default";
+
+export const footerSchema: SectionSchema = {
+  id: "footer",
+  name: "Footer",
+  description: "Site footer with copyright notice",
+  icon: "layout",
+  category: "layout",
+
+  // Available templates
+  templates: {
+    default: {
+      name: "Default Footer",
+      component: FooterDefault,
+      preview: undefined,
+    },
+  },
+
+  // Section settings schema
+  settingsSchema: {
+    copyright: {
+      type: "text",
+      label: "Copyright Text",
+      default: "© 2024 OneX. All rights reserved.",
+    },
+    backgroundColor: {
+      type: "color",
+      label: "Background Color",
+      default: "#1f2937",
+    },
+    textColor: {
+      type: "color",
+      label: "Text Color",
+      default: "#ffffff",
+    },
+  },
+
+  // Default settings
+  defaultSettings: {
+    copyright: "© 2024 OneX. All rights reserved.",
+    backgroundColor: "#1f2937",
+    textColor: "#ffffff",
+  },
+};

package/templates/default/src/sections/footer/index.ts

@@ -0,0 +1,2 @@
+export { FooterDefault } from "./footer-default";
+export { footerSchema } from "./footer.schema";

package/templates/default/src/sections/header/header-default.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { SectionComponentProps } from "@onexapis/core";
+
+export function HeaderDefault({ section, isEditing }: SectionComponentProps) {
+  const { settings } = section;
+
+  const logo = (settings.logo as string) || "OneX";
+  const backgroundColor = (settings.backgroundColor as string) || "#ffffff";
+  const textColor = (settings.textColor as string) || "#1f2937";
+
+  return (
+    <header
+      style={{
+        backgroundColor,
+        color: textColor,
+        padding: "1rem 2rem",
+        borderBottom: "1px solid #e5e7eb",
+        position: "sticky",
+        top: 0,
+        zIndex: 1000,
+      }}
+      data-section-id={section.id}
+      data-editable={isEditing}
+    >
+      <div
+        style={{
+          maxWidth: "1280px",
+          margin: "0 auto",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            fontSize: "1.5rem",
+            fontWeight: "bold",
+          }}
+          data-editable-field="logo"
+        >
+          {logo}
+        </div>
+
+        <nav style={{ display: "flex", gap: "2rem" }}>
+          <a href="/" style={{ textDecoration: "none", color: "inherit" }}>
+            Home
+          </a>
+          <a href="/about" style={{ textDecoration: "none", color: "inherit" }}>
+            About
+          </a>
+          <a
+            href="/contact"
+            style={{ textDecoration: "none", color: "inherit" }}
+          >
+            Contact
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/default/src/sections/header/header.schema.ts

@@ -0,0 +1,46 @@
+import type { SectionSchema } from "@onexapis/core";
+import { HeaderDefault } from "./header-default";
+
+export const headerSchema: SectionSchema = {
+  id: "header",
+  name: "Header",
+  description: "Site header with logo and navigation",
+  icon: "layout",
+  category: "layout",
+
+  // Available templates
+  templates: {
+    default: {
+      name: "Default Header",
+      component: HeaderDefault,
+      preview: undefined,
+    },
+  },
+
+  // Section settings schema
+  settingsSchema: {
+    logo: {
+      type: "text",
+      label: "Logo Text",
+      default: "OneX",
+      required: true,
+    },
+    backgroundColor: {
+      type: "color",
+      label: "Background Color",
+      default: "#ffffff",
+    },
+    textColor: {
+      type: "color",
+      label: "Text Color",
+      default: "#1f2937",
+    },
+  },
+
+  // Default settings
+  defaultSettings: {
+    logo: "OneX",
+    backgroundColor: "#ffffff",
+    textColor: "#1f2937",
+  },
+};

package/templates/default/src/sections/header/index.ts

@@ -0,0 +1,2 @@
+export { HeaderDefault } from "./header-default";
+export { headerSchema } from "./header.schema";

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

@@ -0,0 +1,52 @@
+import React from "react";
+import type { SectionComponentProps } from "@onexapis/core";
+
+export function HeroDefault({ section, isEditing }: SectionComponentProps) {
+  const { settings } = section;
+
+  // Get settings with defaults
+  const title = (settings.title as string) || "Welcome to OneX";
+  const subtitle =
+    (settings.subtitle as string) || "Build amazing websites with themes";
+  const backgroundColor = (settings.backgroundColor as string) || "#3b82f6";
+  const textColor = (settings.textColor as string) || "#ffffff";
+
+  return (
+    <section
+      style={{
+        backgroundColor,
+        color: textColor,
+        minHeight: "500px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "4rem 2rem",
+      }}
+      data-section-id={section.id}
+      data-editable={isEditing}
+    >
+      <div style={{ maxWidth: "800px", textAlign: "center" }}>
+        <h1
+          style={{
+            fontSize: "3rem",
+            fontWeight: "bold",
+            marginBottom: "1rem",
+          }}
+          data-editable-field="title"
+        >
+          {title}
+        </h1>
+
+        <p
+          style={{
+            fontSize: "1.25rem",
+            opacity: 0.9,
+          }}
+          data-editable-field="subtitle"
+        >
+          {subtitle}
+        </p>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,52 @@
+import type { SectionSchema } from "@onexapis/core";
+import { HeroDefault } from "./hero-default";
+
+export const heroSchema: SectionSchema = {
+  id: "hero",
+  name: "Hero Section",
+  description: "A hero section with title and subtitle",
+  icon: "layout",
+  category: "marketing",
+
+  // Available templates
+  templates: {
+    default: {
+      name: "Default Hero",
+      component: HeroDefault,
+      preview: undefined,
+    },
+  },
+
+  // Section settings schema
+  settingsSchema: {
+    title: {
+      type: "text",
+      label: "Title",
+      default: "Welcome to OneX",
+      required: true,
+    },
+    subtitle: {
+      type: "textarea",
+      label: "Subtitle",
+      default: "Build amazing websites with themes",
+    },
+    backgroundColor: {
+      type: "color",
+      label: "Background Color",
+      default: "#3b82f6",
+    },
+    textColor: {
+      type: "color",
+      label: "Text Color",
+      default: "#ffffff",
+    },
+  },
+
+  // Default settings
+  defaultSettings: {
+    title: "Welcome to OneX",
+    subtitle: "Build amazing websites with themes",
+    backgroundColor: "#3b82f6",
+    textColor: "#ffffff",
+  },
+};

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

@@ -0,0 +1,2 @@
+export { HeroDefault } from "./hero-default";
+export { heroSchema } from "./hero.schema";

package/templates/default/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": false,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}