@onexapis/cli 1.1.32 → 1.1.36

package/dist/preview/preview-app.tsx

@@ -24,7 +24,11 @@ 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";
 
 // @onexapis/core/hooks is the single source of truth — no manual composition.
@@ -744,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.32",
+  "version": "1.1.36",
   "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.5",
+    "@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
@@ -469,44 +464,36 @@ Without these, the editor cannot select sections/blocks for editing.
 
 34 built-in components from `@onexapis/core` that render inside sections via `ComponentRenderer`:
 
-| Component          | Description        | Key Settings                                                          |
-| ------------------ | ------------------ | --------------------------------------------------------------------- |
-| `heading`          | H1-H6 text         | text, tag, fontSize, fontWeight, colorToken, textAlign                |
-| `paragraph`        | Body text          | text, fontSize, color, lineHeight, textAlign                          |
-| `button`           | Clickable button   | text, url, target, variant (default/outline/ghost/link), size         |
-| `icon`             | Lucide icon        | iconName, size (xs-2xl), color, strokeWidth, rotation                 |
-| `badge`            | Label/tag          | text, variant (default/primary/success/warning/danger), size, rounded |
-| `image`            | Image display      | src, alt, width, height, objectFit, borderRadius, aspectRatio         |
-| `video`            | Video embed        | videoType (youtube/vimeo/hosted), videoUrl, autoplay, loop            |
-| `divider`          | Separator line     | color, width, style (solid/dashed/dotted)                             |
-| `quote`            | Block quote        | text, author, color, fontStyle                                        |
-| `alert`            | Alert box          | title, message, type (info/success/warning/error), dismissible        |
-| `progress`         | Progress bar       | value (0-100), label, color                                           |
-| `rating`           | Star rating        | value (1-5), readOnly, size                                           |
-| `social-links`     | Social media links | Reads from WebsiteSettings context                                    |
-| `hotline-contacts` | Contact info       | Reads from WebsiteSettings context                                    |
-| `company-info`     | Company details    | Reads from WebsiteSettings context                                    |
-| `product-card`     | Product display    | product (Product), showQuickAdd                                       |
-| `blog-card`        | Blog post card     | blog (Blog)                                                           |
+| Component | Description | Key Settings |
+| --------- | ----------- | ------------ |
+
+**Text:** `heading` (H1-H6), `paragraph`, `quote`
+**Interactive:** `button` (default/outline/ghost/link), `link`, `input`, `textarea`, `checkbox`, `select`
+**Media:** `image`, `video` (youtube/vimeo/hosted), `icon` (Lucide icons), `gallery`
+**Layout:** `divider`, `spacer`, `container`, `grid`, `columns`, `card`
+**Display:** `badge`, `alert`, `progress`, `rating`, `timer`, `list`, `table`, `accordion`, `tabs`, `code`, `map`
+**Special:** `product-card`, `blog-card`, `social-links`, `hotline-contacts`, `company-info`
+**Decorative:** `torn-separator`
+
+Use `onexthm://components` MCP resource for full details (content/style fields, slots, examples).
 
 Components are rendered via `ComponentRenderer` — you don't import them directly.
 
 ## Component Slots
 
-Components use `slot` to semantically identify their role in a section:
+Components use `slot` to identify their role:
 
 ```tsx
-// In section component
 const titleComp = components.find((c) => c.slot === "section-title");
 const ctaButton = components.find((c) => c.slot === "cta-button");
-const subtitle = components.find((c) => c.slot === "description");
 ```
 
-Common slot names: `section-title`, `section-subtitle`, `description`, `cta-button`, `secondary-cta`, `badge`, `icon`, `image`
+Common slots: `section-title`, `section-subtitle`, `description`, `cta-button`, `secondary-cta`, `badge`, `icon`, `image`, `block-title`, `block-description`, `feature-icon`
 
 ## Block System
 
-Blocks are nested containers inside sections. They can contain components AND other blocks (recursive):
+Blocks are nested containers inside sections. They hold components and can nest other blocks.
+Use `onexthm://blocks` MCP resource for full block patterns (features, testimonials, pricing, FAQ, team).
 
 ```tsx
 // Section → Blocks → Components
@@ -526,6 +513,68 @@ Blocks are nested containers inside sections. They can contain components AND ot
 
 Use `BlockRenderer` to render blocks — it handles recursive nesting automatically.
 
+### Defining Blocks in Schema
+
+```tsx
+// In your-section.schema.ts
+export const mySchema: SectionSchema = {
+  type: "features",
+  // ...settings, defaults...
+  blocks: [
+    {
+      type: "feature-item",
+      name: "Feature Item",
+      limit: 6, // Max 6 blocks of this type
+      settings: [
+        {
+          id: "backgroundColor",
+          type: "color",
+          label: "Background",
+          default: "#FFFFFF",
+        },
+      ],
+      components: [
+        { type: "icon", slot: "feature-icon", label: "Icon" },
+        { type: "heading", slot: "block-title", label: "Title" },
+        { type: "paragraph", slot: "block-description", label: "Description" },
+      ],
+    },
+  ],
+};
+```
+
+### Rendering Blocks
+
+```tsx
+const blocks = (section.blocks || []).filter((b) => b.enabled !== false);
+
+{
+  blocks.map((block) => (
+    <div
+      key={block.id}
+      data-section-id={section.id} // REQUIRED
+      data-block-id={block.id} // REQUIRED
+      data-block-type={block.type} // REQUIRED
+      className="p-6 rounded-xl border"
+    >
+      <BlockRenderer
+        block={block}
+        sectionId={section.id}
+        isEditing={isEditing}
+      />
+    </div>
+  ));
+}
+
+{
+  blocks.length === 0 && isEditing && (
+    <div className="text-center py-12 border-2 border-dashed border-gray-300 rounded-lg">
+      <p className="text-gray-500">Add blocks to populate this section</p>
+    </div>
+  );
+}
+```
+
 ## Animation System
 
 Sections, blocks, and components support animations via framer-motion: