@clikvn/showroom-visualizer 0.3.0-dev-08 → 0.3.0-dev-10

package/.claude/settings.local.json

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(npm run build:*)",
+      "Bash(grep:*)",
+      "Bash(rm:*)",
+      "Bash(ls:*)",
+      "Bash(sed:*)",
+      "Bash(yarn build)",
+      "Bash(yalc push:*)",
+      "Bash(yarn dev)",
+      "Bash(yarn list:*)",
+      "Bash(mv:*)",
+      "Bash(rg:*)"
+    ],
+    "deny": []
+  }
+}

package/DEVELOPMENT.md

@@ -0,0 +1,120 @@
+# 🛠️ Development Guide
+
+Hướng dẫn phát triển thư viện `@clikvn/showroom-visualizer`.
+
+## 📦 Cấu trúc Project
+
+```
+showroom-visualizer/
+├── src/                    # Source code của thư viện
+├── dist/                   # Build output (NPM package & Web Component)
+├── example/                # Example app để test local (Vite + React)
+├── rollup.config.js        # Build configuration
+└── package.json
+```
+
+## 🚀 Development Workflows
+
+### Workflow 1: Test trong Example App (Khuyến nghị ⭐)
+
+**Ưu điểm:**
+- ✅ Import trực tiếp từ source (`src/`) - không cần build
+- ✅ Hot reload cực nhanh
+- ✅ Debug dễ dàng với source maps
+- ✅ Test custom layout overrides và tất cả features
+- ✅ Không cần publish hoặc yalc
+
+**Cách dùng:**
+
+```bash
+# Bước 1: Cài đặt dependencies cho example (chỉ lần đầu)
+cd example
+yarn install
+
+# Bước 2: Chạy example app
+yarn dev
+# hoặc từ root: yarn dev:demo
+
+# App sẽ chạy tại: http://localhost:3001
+```
+
+**Modify và test:**
+- Thay đổi code trong `src/` → Auto reload
+- Thay đổi code trong `example/src/App.tsx` → Auto reload
+- Test custom layout bằng checkbox trong UI
+
+### Workflow 2: Build và Test Web Component
+
+**Test Web Component:**
+
+```bash
+# Build
+yarn build
+
+# Serve dist folder
+cd dist
+npx serve
+# hoặc: python3 -m http.server 8080
+
+# Mở browser: http://localhost:8080
+```
+
+Xem file `dist/index.html` để biết cách dùng Web Component.
+
+---
+
+## 🏗️ Build Strategy
+
+Thư viện này có **2 build outputs**:
+
+### 1. NPM Package (`dist/index.js`)
+- **Dùng cho:** React/Next.js apps
+- **React:** External (dùng React của project)
+- **Hỗ trợ:** Custom layout overrides, custom components
+- **Import:** 
+  ```tsx
+  import { ShowroomVisualizer } from '@clikvn/showroom-visualizer';
+  ```
+
+### 2. Web Component (`dist/web.js`)
+- **Dùng cho:** Vanilla HTML/JS
+- **React:** Bundled (React 18 đã được bundle sẵn)
+- **Không hỗ trợ:** Custom layout overrides
+- **Import:**
+  ```html
+  <script type="module" src="web.js"></script>
+  <showroom-visualizer api-url="..." showroom-id="..."></showroom-visualizer>
+  ```
+
+---
+
+## 📝 Common Tasks
+
+### Thêm feature mới
+
+1. Code trong `src/`
+2. Test trong `example/` app
+3. Build: `yarn build`
+
+
+## 🐛 Troubleshooting
+
+### Build errors
+
+```bash
+# Clean và rebuild
+rm -rf dist
+yarn build
+```
+---
+
+## ✨ Tips
+
+1. **Luôn dùng Example app khi develop** - Nhanh và tiện nhất
+2. **Commit example app vào git** để team members cùng dùng
+3. **Không commit `dist/` vào git** - Chỉ build khi deploy
+
+---
+
+Happy coding! 🚀
+