@onexapis/cli 1.1.31 → 1.1.34

package/dist/preview/preview-app.tsx

@@ -20,27 +20,20 @@ import * as coreProducts from "@onexapis/core/products";
 import * as coreOrders from "@onexapis/core/orders";
 import * as coreBlog from "@onexapis/core/blog";
 import * as coreFinance from "@onexapis/core/finance";
+import { initializeOnex } from "@onexapis/core";
+import * as coreHooksAll from "@onexapis/core/hooks";
 import * as coreInternal from "@onexapis/core/internal";
 import * as coreTypes from "@onexapis/core/types";
-import { CartProvider, FlyToCartProvider } from "@onexapis/core/contexts";
+import {
+  CartProvider,
+  FlyToCartProvider,
+  PageDataProvider,
+} from "@onexapis/core/contexts";
 import { LocaleProvider } from "@onexapis/core/contexts";
 
-// Compose @onexapis/core/hooks from published subpaths
-// Only include use* hook functions — spreading entire modules includes
-// Zustand stores and React providers that cause "selector is not a function" errors.
-const coreHooks = {
-  ...coreCommerceHooks,
-};
-// Add context/state hooks individually (avoid spreading full modules)
-for (const mod of [coreContexts, coreAuth, coreOrders, coreCart] as any[]) {
-  if (mod && typeof mod === "object") {
-    for (const [k, v] of Object.entries(mod)) {
-      if (typeof v === "function" && k.startsWith("use") && !(k in coreHooks)) {
-        (coreHooks as any)[k] = v;
-      }
-    }
-  }
-}
+// @onexapis/core/hooks is the single source of truth — no manual composition.
+// coreHooksAll re-exports all hooks (commerce, cart, auth, checkout, payment, etc.)
+const coreHooks = coreHooksAll;
 
 // Set React globals
 (globalThis as any).__ONEX_REACT__ = React;
@@ -100,6 +93,12 @@ try {
   if (apiUrl && companyId && CommerceClient && setCommerceClient) {
     // Real API connection — preview will show actual products/blogs
     setCommerceClient(new CommerceClient({ apiUrl, companyId }));
+    // Initialize all services (orders, finance, auth, etc.) so checkout/payment hooks work
+    try {
+      initializeOnex({ apiUrl, companyId });
+    } catch {
+      // May fail if already initialized — safe to ignore
+    }
   } else if (setCommerceClient) {
     // No API config — use stub that returns empty data
     const emptyPagination = {
@@ -342,9 +341,12 @@ function discoverPageConfigs(
   }
 
   // Sort: "home" page first
+  // Sort: home page first (by handle, not type — multiple pages can have type "home")
   pages.sort((a, b) => {
-    if (a.config.type === "home") return -1;
-    if (b.config.type === "home") return 1;
+    const aIsHome = a.config.handle === "home" || a.key === "homePageConfig";
+    const bIsHome = b.config.handle === "home" || b.key === "homePageConfig";
+    if (aIsHome && !bIsHome) return -1;
+    if (bIsHome && !aIsHome) return 1;
     return a.label.localeCompare(b.label);
   });
 
@@ -384,7 +386,10 @@ const PREVIEW_SUPPORTED_LOCALES = ["vi", "en"];
  * "/vi/san-pham/slug" → { locale: "vi", rest: "/san-pham/slug" }
  * "/products/slug" → { locale: "en", rest: "/products/slug" }
  */
-function extractLocaleFromUrl(pathname: string): { locale: string; rest: string } {
+function extractLocaleFromUrl(pathname: string): {
+  locale: string;
+  rest: string;
+} {
   const parts = pathname.replace(/^\/+/, "").split("/");
   if (parts[0] && PREVIEW_SUPPORTED_LOCALES.includes(parts[0])) {
     return { locale: parts[0], rest: "/" + parts.slice(1).join("/") };
@@ -427,7 +432,9 @@ function getInitialPageFromURL(
     if (!effectivePath) continue;
 
     // Static locale path match (e.g., /gioi-thieu matches localizedPaths.vi: "/gioi-thieu")
-    const normalizedEffective = effectivePath.replace(/^\/+|\/+$/g, "").toLowerCase();
+    const normalizedEffective = effectivePath
+      .replace(/^\/+|\/+$/g, "")
+      .toLowerCase();
     if (normalizedEffective === pathname) return i;
 
     // Dynamic locale path match (e.g., /san-pham/my-slug matches localizedPaths.vi: "/san-pham/[slug]")
@@ -741,7 +748,9 @@ root.render(
     <LocaleProvider locale={_rootLocale as any}>
       <CartProvider>
         <FlyToCartProvider>
-          <PreviewApp />
+          <PageDataProvider data={{}}>
+            <PreviewApp />
+          </PageDataProvider>
         </FlyToCartProvider>
       </CartProvider>
     </LocaleProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.31",
+  "version": "1.1.34",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.470.0",
-    "@onexapis/core": "^1.0.3",
+    "@onexapis/core": "^1.0.6",
     "@tanstack/react-query": "^5.90.16",
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",

package/templates/default/CLAUDE.md

@@ -348,69 +348,64 @@ export const mySchema: SectionSchema = {
 | `url`                    | URL input                                         | Link href                     |
 | `array` / `repeater`     | List of repeating items                           | Feature list, social links    |
 
-## Available Hooks
+## Available Hooks (44 hooks)
 
-Import from `@onexapis/core/hooks`:
+All hooks import from `@onexapis/core/hooks`. Use `onexthm_list_hooks` MCP tool for full API details.
 
 ```tsx
 import {
   useProducts,
   useCart,
-  useAuth,
+  useCheckout,
   useDesignSystem,
 } from "@onexapis/core/hooks";
 ```
 
-### Commerce Data (React Query)
+### Quick Reference
+
+| Category          | Hooks                                                                                                                                                                                              |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Commerce** (11) | `useProducts`, `useProductBySlug`, `useProductById`, `useProductCategories`, `useBlogs`, `useBlogBySlug`, `useBlogById`, `useBlogCategories`, `useSettings`, `useProductListing`, `useBlogListing` |
+| **State** (3)     | `useCart`, `useAuth`, `useOrders`                                                                                                                                                                  |
+| **Checkout** (8)  | `useCheckout`, `usePayment`, `useOrderLookup`, `useOrderStatus`, `useOrderSuccess`, `useOrderSummary`, `useFinance`, `saveBuyNowItem`                                                              |
+| **Products** (3)  | `useSearchProducts`, `useAddToCart`, `useProductDetail`                                                                                                                                            |
+| **Theme** (8)     | `useDesignSystem`, `useCommerceData`, `useThemeMode`, `useLocale`, `useViewport`, `usePageData`, `useWebsiteSettings`, `useMotion`                                                                 |
+| **Utilities** (7) | `useDebounce`, `useMediaQuery`, `useIsMobile`, `useIsTablet`, `useIsDesktop`, `useContactForm`, `useCopyToClipboard`, `useFormatPrice`, `formatVndPrice`                                           |
+| **Animation** (1) | `useFlyToCart`                                                                                                                                                                                     |
+| **Server** (4)    | `fetchProducts`, `fetchBlogs`, `fetchSettings`, `prefetchSectionData`                                                                                                                              |
+
+### Most Used Patterns
 
 ```tsx
-// Products
-const { data, isLoading } = useProducts({ limit: 8, page: 0 });
+// Fetch products
+const { data, isLoading } = useProducts({ limit: 8 });
 const products = data?.data ?? [];
 
-// Single product
-const { data: product } = useProductBySlug("blue-t-shirt");
+// Cart
+const { items, addItem, itemCount, subtotal } = useCart();
 
-// Blogs
-const { data, isLoading } = useBlogs({ limit: 6 });
-const blogs = data?.data ?? [];
+// Auth
+const { user, isAuthenticated, login, logout } = useAuth();
 
-// Website settings
-const { data: settings } = useSettings();
-```
+// Checkout (full form)
+const checkout = useCheckout({ paymentRedirectUrl: "/payment" });
+// checkout.fullName, checkout.handleCheckout, checkout.errors
 
-### State Management
+// Product detail with buy now
+const detail = useProductDetail({ slug: routeParams.slug });
+// detail.product, detail.handleAddToCart, detail.handleBuyNow
 
-```tsx
-// Shopping cart
-const { items, addItem, removeItem, totalPrice, clearCart } = useCart();
-
-// Authentication
-const auth = useAuth();
-await auth.login(email, password);
-await auth.signup({ username, email, password, name });
-auth.logout();
-await auth.forgotPassword(email);
-
-// Orders
-const { createOrder, getOrders } = useOrders();
-```
+// Search with debounce
+const search = useSearchProducts({ debounceMs: 300 });
+// search.query, search.setQuery, search.results
 
-### Theme & Context
+// Responsive
+const isMobile = useIsMobile();
+const isDesktop = useIsDesktop();
 
-```tsx
-// Design system tokens
-const { colors, typography, colorMode } = useDesignSystem();
-// colors.primary, colors.secondary, colors.background, etc.
-
-// Server-side data from SectionComponentProps.data
-const { products, blogs, settings, company } = useCommerceData(data);
-
-// Other contexts
-const { mode, isDark } = useThemeMode();
-const { locale, setLocale } = useLocale();
-const { isMobile, isDesktop } = useViewport();
-const motionTokens = useMotion();
+// Price formatting
+const { formatPrice } = useFormatPrice();
+formatPrice(1250000); // "1.250.000đ"
 ```
 
 ## Color System
@@ -605,12 +600,15 @@ Dynamic pages use URL parameters like `/products/[slug]` to render detail views.
 // pages/product-detail.ts
 import type { PageConfig } from "@onexapis/core/types";
 
-export const productDetailPageConfig: Omit<PageConfig, "id" | "createdAt" | "updatedAt"> = {
+export const productDetailPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
   title: "Product Detail",
   handle: "product-detail",
-  path: "/products/[slug]",       // Dynamic segment in brackets
-  isDynamic: true,                // Flag as dynamic
-  dynamicSegments: ["slug"],      // Parameter names
+  path: "/products/[slug]", // Dynamic segment in brackets
+  isDynamic: true, // Flag as dynamic
+  dynamicSegments: ["slug"], // Parameter names
   type: "product",
   renderMode: "sections",
   themeId: "my-theme",
@@ -633,6 +631,7 @@ export default productDetailPageConfig;
 ```
 
 Export in `bundle-entry.ts`:
+
 ```typescript
 export { default as productDetailPageConfig } from "./pages/product-detail";
 ```
@@ -642,9 +641,14 @@ export { default as productDetailPageConfig } from "./pages/product-detail";
 Sections receive `data.routeParams` with the extracted URL parameters:
 
 ```tsx
-export function ProductDetail({ section, schema, isEditing, data }: SectionComponentProps) {
+export function ProductDetail({
+  section,
+  schema,
+  isEditing,
+  data,
+}: SectionComponentProps) {
   const routeParams = (data?.routeParams || {}) as Record<string, string>;
-  const slug = routeParams.slug || "";  // "blue-shirt" from /products/blue-shirt
+  const slug = routeParams.slug || ""; // "blue-shirt" from /products/blue-shirt
 
   const { data: product, isLoading } = useProductBySlug(slug, !!slug);
   // ...
@@ -658,12 +662,13 @@ Use `localizedPaths` to define different URL slugs per locale:
 ```typescript
 export const productDetailPageConfig = {
   handle: "product-detail",
-  path: "/products/[slug]",           // Default/fallback
+  path: "/products/[slug]", // Default/fallback
   isDynamic: true,
   dynamicSegments: ["slug"],
-  localizedPaths: {                    // Locale-specific paths (typed by Locale enum)
-    vi: "/san-pham/[slug]",            // /vi/san-pham/blue-shirt
-    en: "/products/[slug]",            // /en/products/blue-shirt
+  localizedPaths: {
+    // Locale-specific paths (typed by Locale enum)
+    vi: "/san-pham/[slug]", // /vi/san-pham/blue-shirt
+    en: "/products/[slug]", // /en/products/blue-shirt
   },
   type: "product",
   // ...
@@ -673,8 +678,9 @@ export const productDetailPageConfig = {
 The `Locale` type (`"vi" | "en"`) is from `@onexapis/core/types` — gives autocomplete.
 
 Sections also receive `data.locale` to know the current locale:
+
 ```tsx
-const locale = data?.locale as string;  // "vi" or "en"
+const locale = data?.locale as string; // "vi" or "en"
 ```
 
 ### Key conventions
@@ -1010,7 +1016,15 @@ The cart system uses `useCart()` for state and a flexible fly-to-cart animation
 ```tsx
 import { useCart } from "@onexapis/core/hooks";
 
-const { items, addItem, removeItem, updateQuantity, clearCart, itemCount, subtotal } = useCart();
+const {
+  items,
+  addItem,
+  removeItem,
+  updateQuantity,
+  clearCart,
+  itemCount,
+  subtotal,
+} = useCart();
 
 // Add to cart
 addItem({
@@ -1033,11 +1047,11 @@ When a user clicks "Add to Cart", the product thumbnail flies from the button to
 <div data-fly-to-cart-target className="my-cart-icon">
   <ShoppingCartIcon />
   <span>{itemCount}</span>
-</div>
+</div>;
 
 // Option B: Use CartIcon convenience component (auto-adds data-fly-to-cart-target)
 import { CartIcon } from "@onexapis/core/components";
-<CartIcon count={itemCount} onClick={() => openCartDrawer()} />
+<CartIcon count={itemCount} onClick={() => openCartDrawer()} />;
 ```
 
 **Step 2: ProductCard triggers animation automatically** — just pass `onAddToCart`:
@@ -1045,7 +1059,14 @@ import { CartIcon } from "@onexapis/core/components";
 ```tsx
 <ProductCard
   product={product}
-  onAddToCart={(p) => addItem({ productId: p.id, name: p.title, image: p.image, price: p.salePrice })}
+  onAddToCart={(p) =>
+    addItem({
+      productId: p.id,
+      name: p.title,
+      image: p.image,
+      price: p.salePrice,
+    })
+  }
 />
 ```
 
@@ -1087,7 +1108,9 @@ import {
 } from "@onexapis/core/server";
 
 // Fetch products (server-side with ISR caching)
-const { data: products, pagination } = await fetchProducts(companyId, { limit: 12 });
+const { data: products, pagination } = await fetchProducts(companyId, {
+  limit: 12,
+});
 
 // Fetch website settings
 const settings = await fetchSettings(companyId);