@onexapis/cli 1.1.2 → 1.1.3

package/dist/preview/preview-app.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { createRoot } from "react-dom/client";
 import * as jsxRuntime from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // Core subpath imports — MUST match what setup-theme-globals.ts sets
 // Only import browser-safe subpaths (NOT the root @onexapis/core which pulls server code)
@@ -11,6 +12,8 @@ import * as coreUtils from "@onexapis/core/utils";
 import * as coreContexts from "@onexapis/core/contexts";
 import * as coreComponents from "@onexapis/core/components";
 import * as coreRegistry from "@onexapis/core/registry";
+import * as coreCommerce from "@onexapis/core/commerce";
+import * as coreCommerceHooks from "@onexapis/core/commerce/hooks";
 
 // Set React globals
 (globalThis as any).__ONEX_REACT__ = React;
@@ -26,8 +29,40 @@ import * as coreRegistry from "@onexapis/core/registry";
   contexts: coreContexts,
   components: coreComponents,
   registry: coreRegistry,
+  commerce: coreCommerce,
+  "commerce/hooks": coreCommerceHooks,
 };
 
+// Initialize CommerceClient for preview
+// If .env has NEXT_PUBLIC_API_URL + NEXT_PUBLIC_COMPANY_ID, use real API data.
+// Otherwise, use a stub that returns empty data.
+try {
+  const { CommerceClient, setCommerceClient } = coreCommerce as any;
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  const companyId = process.env.NEXT_PUBLIC_COMPANY_ID;
+
+  if (apiUrl && companyId && CommerceClient && setCommerceClient) {
+    // Real API connection — preview will show actual products/blogs
+    setCommerceClient(new CommerceClient({ apiUrl, companyId }));
+  } else if (setCommerceClient) {
+    // No API config — use stub that returns empty data
+    const emptyPagination = { total: 0, page: 1, limit: 10, totalPages: 0, hasNext: false, hasPrev: false };
+    const emptyList = { data: [], pagination: emptyPagination };
+    setCommerceClient({
+      getProducts: () => Promise.resolve(emptyList),
+      getProductBySlug: () => Promise.resolve(null),
+      getProductById: () => Promise.resolve(null),
+      getProductCategories: () => Promise.resolve([]),
+      getBlogs: () => Promise.resolve(emptyList),
+      getBlogBySlug: () => Promise.resolve(null),
+      getBlogById: () => Promise.resolve(null),
+      getBlogCategories: () => Promise.resolve([]),
+      getSettings: () => Promise.resolve({}),
+    });
+  }
+} catch {
+  // CommerceClient not available — safe to ignore
+}
 
 // ===== 2. THEME LOADING =====
 
@@ -39,11 +74,12 @@ interface ThemeExports {
 
 async function loadThemeBundle(timestamp?: number): Promise<ThemeExports> {
   const cacheBust = timestamp ? `?t=${timestamp}` : `?t=${Date.now()}`;
-  const module = await import(/* @vite-ignore */ `/bundle-entry.js${cacheBust}`);
+  const module = await import(
+    /* @vite-ignore */ `/bundle-entry.js${cacheBust}`
+  );
   return module;
 }
 
-
 // ===== 3. SECTION RESOLUTION (adapted from storefront section-renderer.tsx) =====
 
 function getSectionComponent(
@@ -62,12 +98,18 @@ function getSectionComponent(
   const componentKey = toPascalCase(baseName) + toPascalCase(template);
   const schemaKey = toCamelCase(baseName) + "Schema";
 
-  const Component = themeExports[componentKey] as React.ComponentType<any> | undefined;
+  const Component = themeExports[componentKey] as
+    | React.ComponentType<any>
+    | undefined;
   const schema = themeExports[schemaKey] as any | undefined;
 
   if (!Component) return null;
 
-  return { Component, schema, template: { id: template, name: capitalize(template) } };
+  return {
+    Component,
+    schema,
+    template: { id: template, name: capitalize(template) },
+  };
 }
 
 function capitalize(str: string): string {
@@ -79,10 +121,12 @@ function toCamelCase(str: string): string {
 }
 
 function toPascalCase(str: string): string {
-  return str.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+  return str
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join("");
 }
 
-
 // ===== 4. SECTION DATA ENRICHMENT =====
 
 /**
@@ -111,7 +155,6 @@ function enrichSectionWithDefaults(section: any, schema: any): any {
   };
 }
 
-
 // ===== 5. PAGE CONFIG DISCOVERY =====
 
 function discoverPageConfigs(
@@ -144,15 +187,18 @@ function discoverPageConfigs(
   return pages;
 }
 
-
 // ===== 6. PREVIEW APP COMPONENT =====
 
 /**
  * Match URL pathname to a page index.
  * "/" or "/home" → home page, "/showcase" → showcase page, etc.
  */
-function getInitialPageFromURL(pages: Array<{ key: string; label: string; config: any }>): number {
-  const pathname = window.location.pathname.replace(/^\/+|\/+$/g, "").toLowerCase();
+function getInitialPageFromURL(
+  pages: Array<{ key: string; label: string; config: any }>
+): number {
+  const pathname = window.location.pathname
+    .replace(/^\/+|\/+$/g, "")
+    .toLowerCase();
   if (!pathname || pathname === "home") return 0; // home is always first after sorting
 
   const idx = pages.findIndex((p) => {
@@ -258,7 +304,9 @@ function PreviewApp() {
 
   if (!themeExports) {
     return (
-      <div style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}>
+      <div
+        style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}
+      >
         <p>Loading theme...</p>
       </div>
     );
@@ -270,19 +318,42 @@ function PreviewApp() {
   const themePrefix = themeId ? `${themeId}-` : "";
 
   // Resolve initial page from URL path (once pages are discovered)
-  const resolvedPage = selectedPage === -1 ? getInitialPageFromURL(pages) : selectedPage;
+  const resolvedPage =
+    selectedPage === -1 ? getInitialPageFromURL(pages) : selectedPage;
 
   // Page not found (-2)
   if (resolvedPage === -2) {
     const pathname = window.location.pathname;
     return (
-      <div style={{ padding: "80px 40px", textAlign: "center", fontFamily: "system-ui" }}>
+      <div
+        style={{
+          padding: "80px 40px",
+          textAlign: "center",
+          fontFamily: "system-ui",
+        }}
+      >
         <h1 style={{ fontSize: "4rem", margin: 0, color: "#E11D48" }}>404</h1>
         <p style={{ fontSize: "1.25rem", color: "#333", marginTop: 12 }}>
-          Page not found: <code style={{ background: "#f1f5f9", padding: "2px 8px", borderRadius: 4 }}>{pathname}</code>
+          Page not found:{" "}
+          <code
+            style={{
+              background: "#f1f5f9",
+              padding: "2px 8px",
+              borderRadius: 4,
+            }}
+          >
+            {pathname}
+          </code>
         </p>
         <p style={{ color: "#888", marginTop: 8 }}>Available pages:</p>
-        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 12 }}>
+        <div
+          style={{
+            display: "flex",
+            gap: 8,
+            justifyContent: "center",
+            marginTop: 12,
+          }}
+        >
           {pages.map((page) => {
             const pageSlug = page.key.replace("PageConfig", "").toLowerCase();
             const pagePath = pageSlug === "home" ? "/" : `/${pageSlug}`;
@@ -291,8 +362,13 @@ function PreviewApp() {
                 key={page.key}
                 href={pagePath}
                 style={{
-                  padding: "6px 16px", borderRadius: 6, background: "#E11D48",
-                  color: "white", textDecoration: "none", fontSize: 14, fontWeight: 500,
+                  padding: "6px 16px",
+                  borderRadius: 6,
+                  background: "#E11D48",
+                  color: "white",
+                  textDecoration: "none",
+                  fontSize: 14,
+                  fontWeight: 500,
                 }}
               >
                 {page.label}
@@ -308,10 +384,13 @@ function PreviewApp() {
 
   if (!currentPage) {
     return (
-      <div style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}>
+      <div
+        style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}
+      >
         <p>No page configs found in theme exports.</p>
         <p style={{ color: "#888", marginTop: 8 }}>
-          Ensure your bundle-entry.ts exports page configs (e.g., homePageConfig).
+          Ensure your bundle-entry.ts exports page configs (e.g.,
+          homePageConfig).
         </p>
       </div>
     );
@@ -428,8 +507,20 @@ function updateToolbar(status: string, label: string) {
   }
 }
 
-
 // ===== 7. MOUNT =====
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 const root = createRoot(document.getElementById("onex-preview-root")!);
-root.render(<PreviewApp />);
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <PreviewApp />
+  </QueryClientProvider>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,6 +48,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@onexapis/core": "workspace:*",
+    "@tanstack/react-query": "^5.90.16",
     "@aws-sdk/client-s3": "^3.470.0",
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",

package/templates/default/.env.example

@@ -0,0 +1,4 @@
+# API Configuration (optional — enables real data in preview)
+# Get your Company ID from the OneX dashboard
+NEXT_PUBLIC_API_URL=https://api-dev.onexeos.com
+NEXT_PUBLIC_COMPANY_ID=

package/templates/default/package.json.ejs

@@ -14,7 +14,8 @@
   "author": "<%= author %>",
   "license": "MIT",
   "dependencies": {
-    "@onexapis/core": "^1.0.0"
+    "@onexapis/core": "^1.0.2",
+    "@tanstack/react-query": "^5.90.16"
   },
   "devDependencies": {
     "@types/react": "^19",