@janbox/storefront-builder 2.0.9 → 2.0.11

package/README.md

@@ -60,6 +60,9 @@ export default function BuilderPage() {
           await savePage(data);
         },
         close: () => navigateBack(),
+        saveTheme: async (theme) => {
+          await api.saveTheme(theme); // optional: enables theme editing
+        },
       }}
       insert={{
         groups: [HERO_SECTION_GROUP, FAQS_SECTION_GROUP],
@@ -79,9 +82,16 @@ export default function BuilderPage() {
 
 Dùng `Composer` + `Canvas` để render một trang đã lưu, không cần giao diện editor. Đây là cách dùng cho phía storefront hiển thị cho người mua.
 
+`Canvas` hỗ trợ hai chế độ render:
+
+1. **Truyền `data`** — ưu tiên render từ serialized data (JSON từ editor)
+2. **Truyền `children`** — nếu không truyền `data`, Canvas sẽ render children như JSX thông thường
+
+### Render từ serialized data
+
 ```tsx
 import '@janbox/storefront-builder/style.css';
-import { Composer, Canvas, RootNode } from '@janbox/storefront-builder';
+import { Composer, Canvas } from '@janbox/storefront-builder';
 import type { SerializedNodes } from '@janbox/storefront-builder';
 
 const savedData: SerializedNodes = { /* JSON từ editor */ };
@@ -89,14 +99,37 @@ const savedData: SerializedNodes = { /* JSON từ editor */ };
 export default function StorefrontPage() {
   return (
     <Composer>
-      <Canvas data={savedData}>
-        <RootNode />
+      <Canvas data={savedData} />
+    </Composer>
+  );
+}
+```
+
+`data` nhận `SerializedNodes` object hoặc JSON string. Khi truyền `data`, Canvas sẽ bỏ qua children và render hoàn toàn từ dữ liệu đã serialize.
+
+### Render từ children (không có data)
+
+```tsx
+import '@janbox/storefront-builder/style.css';
+import { Composer, Canvas, RootNode, BoxNode, HeadingNode } from '@janbox/storefront-builder';
+
+export default function StorefrontPage() {
+  return (
+    <Composer>
+      <Canvas>
+        <RootNode>
+          <BoxNode>
+            <HeadingNode text="Hello World" />
+          </BoxNode>
+        </RootNode>
       </Canvas>
     </Composer>
   );
 }
 ```
 
+Khi không truyền `data`, Canvas sử dụng children làm cây node mặc định để render.
+
 ---
 
 ## Khái niệm cơ bản
@@ -314,6 +347,29 @@ const { id, connectors, actions } = useNode();
 
 ---
 
+## Theme Editor
+
+Sidebar tích hợp sẵn tab Theme cho phép xem và chỉnh sửa palette. Tính năng chỉnh sửa được kích hoạt khi truyền `handlers.saveTheme`:
+
+```tsx
+<Editor
+  theme={myTheme}
+  handlers={{
+    // ...
+    saveTheme: async (theme) => {
+      await api.updateTheme(theme);
+    },
+  }}
+/>
+```
+
+- Không truyền `saveTheme` → tab Theme chỉ hiển thị palette (view only)
+- Truyền `saveTheme` → hiện color picker cho primary/secondary + nút Save/Cancel
+- Cancel hoặc rời tab → reset về theme ban đầu
+- Save → gọi `saveTheme(theme)` async, có loading state
+
+---
+
 ## Stylesheet
 
 Import stylesheet một lần ở entry của app:
@@ -358,7 +414,6 @@ import type {
   NodeTree,          // cây node
   Resolver,          // map resolvedName → component
   NodeConfig,        // config truyền vào defineNode()
-  DisplayOnValue,    // responsive visibility: Partial<Record<Screen, boolean>>
 } from '@janbox/storefront-builder';
 ```