@clikvn/showroom-visualizer 0.4.1-dev-13 → 0.4.1-dev-14

package/SETUP_COMPLETE.md

@@ -1,149 +1,149 @@
-# ✅ Setup Hoàn Tất!
-
-## 🎉 Đã tạo Example App để Development
-
-### 📁 Cấu trúc đã tạo:
-
-```
-showroom-visualizer/
-├── example/                    # ⭐ Example app mới
-│   ├── src/
-│   │   ├── App.tsx            # Demo với custom layout toggle
-│   │   ├── main.tsx           # Entry point
-│   │   └── index.css          # Styles
-│   ├── index.html
-│   ├── vite.config.ts         # Alias đến ../src
-│   ├── tsconfig.json
-│   ├── package.json
-│   └── README.md
-│
-├── src/                        # Source code thư viện
-├── DEVELOPMENT.md              # ⭐ Hướng dẫn development
-└── package.json                # Đã thêm "dev:demo" script
-```
-
----
-
-## 🚀 Bắt đầu ngay:
-
-### Cách 1: Chạy Example App (Nhanh nhất)
-
-```bash
-# Từ root directory
-yarn dev:demo
-
-# Hoặc
-cd example
-yarn dev
-```
-
-**➡️ Mở browser:** http://localhost:3001
-
-### Ưu điểm:
-
-✅ **Import trực tiếp từ `src/`** - Không cần build  
-✅ **Hot reload siêu nhanh** - Thay đổi code → Tự động reload  
-✅ **Test custom layout dễ dàng** - Bật/tắt bằng checkbox  
-✅ **Debug source code** - Có source maps đầy đủ  
-✅ **Không cần yalc** - Độc lập hoàn toàn  
-
----
-
-### Cách 2: Test với Next.js (dùng yalc)
-
-Nếu cần test integration thật với Next.js:
-
-```bash
-# Terminal 1: Trong showroom-visualizer
-yarn dev:yalc
-
-# Terminal 2: Trong Next.js project
-yalc add @clikvn/showroom-visualizer
-yarn install
-yarn dev
-```
-
----
-
-## 📝 Workflow Khuyến Nghị:
-
-### 1. **Development hàng ngày → Dùng Example App**
-
-```bash
-cd example
-yarn dev
-```
-
-- Sửa code trong `../src/` → Tự động reload
-- Test features mới
-- Debug issues
-- Test custom layout components
-
-### 2. **Test Integration → Dùng yalc với Next.js**
-
-Chỉ khi cần:
-- Test build output thật
-- Test với Next.js SSR/RSC
-- Test production build
-
-### 3. **Test Web Component → Dùng `dist/index.html`**
-
-```bash
-yarn build
-cd dist
-npx serve
-```
-
----
-
-## 🎯 Các files quan trọng:
-
-| File | Mô tả |
-|------|-------|
-| `DEVELOPMENT.md` | Hướng dẫn development chi tiết |
-| `example/README.md` | Hướng dẫn example app |
-| `example/src/App.tsx` | Demo app với custom layout |
-| `package.json` | Đã thêm `dev:demo` script |
-
----
-
-## 💡 Tips:
-
-1. **Luôn dùng Example app khi develop** - Nhanh và tiện nhất
-2. **Code trong `src/`** → Tự động sync sang example
-3. **Test custom layout** bằng checkbox trong UI
-4. **Thay đổi API URL/Showroom ID** trong `example/src/App.tsx`
-
----
-
-## 🐛 Fix lỗi yalc trước đó:
-
-**Vấn đề cũ:**
-```
-ReactDOM__default.ReactDOM__default.findDOMNode
-```
-
-**Giải pháp:**
-➡️ Dùng Example app thay vì yalc để tránh hoàn toàn vấn đề này!
-
-Example app import trực tiếp từ source nên:
-- ✅ Không có build issues
-- ✅ Không có double prefix
-- ✅ Không cần fix Rollup plugins
-- ✅ React version luôn match (18.3.1)
-
----
-
-## ✨ Bắt đầu ngay:
-
-```bash
-cd /Users/tungthai/Desktop/Develop/showroom-visualizer/example
-yarn dev
-```
-
-**Server đang chạy tại:** http://localhost:3001 🚀
-
----
-
-Happy Coding! 🎉
-
+# ✅ Setup Hoàn Tất!
+
+## 🎉 Đã tạo Example App để Development
+
+### 📁 Cấu trúc đã tạo:
+
+```
+showroom-visualizer/
+├── example/                    # ⭐ Example app mới
+│   ├── src/
+│   │   ├── App.tsx            # Demo với custom layout toggle
+│   │   ├── main.tsx           # Entry point
+│   │   └── index.css          # Styles
+│   ├── index.html
+│   ├── vite.config.ts         # Alias đến ../src
+│   ├── tsconfig.json
+│   ├── package.json
+│   └── README.md
+│
+├── src/                        # Source code thư viện
+├── DEVELOPMENT.md              # ⭐ Hướng dẫn development
+└── package.json                # Đã thêm "dev:demo" script
+```
+
+---
+
+## 🚀 Bắt đầu ngay:
+
+### Cách 1: Chạy Example App (Nhanh nhất)
+
+```bash
+# Từ root directory
+yarn dev:demo
+
+# Hoặc
+cd example
+yarn dev
+```
+
+**➡️ Mở browser:** http://localhost:3001
+
+### Ưu điểm:
+
+✅ **Import trực tiếp từ `src/`** - Không cần build  
+✅ **Hot reload siêu nhanh** - Thay đổi code → Tự động reload  
+✅ **Test custom layout dễ dàng** - Bật/tắt bằng checkbox  
+✅ **Debug source code** - Có source maps đầy đủ  
+✅ **Không cần yalc** - Độc lập hoàn toàn  
+
+---
+
+### Cách 2: Test với Next.js (dùng yalc)
+
+Nếu cần test integration thật với Next.js:
+
+```bash
+# Terminal 1: Trong showroom-visualizer
+yarn dev:yalc
+
+# Terminal 2: Trong Next.js project
+yalc add @clikvn/showroom-visualizer
+yarn install
+yarn dev
+```
+
+---
+
+## 📝 Workflow Khuyến Nghị:
+
+### 1. **Development hàng ngày → Dùng Example App**
+
+```bash
+cd example
+yarn dev
+```
+
+- Sửa code trong `../src/` → Tự động reload
+- Test features mới
+- Debug issues
+- Test custom layout components
+
+### 2. **Test Integration → Dùng yalc với Next.js**
+
+Chỉ khi cần:
+- Test build output thật
+- Test với Next.js SSR/RSC
+- Test production build
+
+### 3. **Test Web Component → Dùng `dist/index.html`**
+
+```bash
+yarn build
+cd dist
+npx serve
+```
+
+---
+
+## 🎯 Các files quan trọng:
+
+| File | Mô tả |
+|------|-------|
+| `DEVELOPMENT.md` | Hướng dẫn development chi tiết |
+| `example/README.md` | Hướng dẫn example app |
+| `example/src/App.tsx` | Demo app với custom layout |
+| `package.json` | Đã thêm `dev:demo` script |
+
+---
+
+## 💡 Tips:
+
+1. **Luôn dùng Example app khi develop** - Nhanh và tiện nhất
+2. **Code trong `src/`** → Tự động sync sang example
+3. **Test custom layout** bằng checkbox trong UI
+4. **Thay đổi API URL/Showroom ID** trong `example/src/App.tsx`
+
+---
+
+## 🐛 Fix lỗi yalc trước đó:
+
+**Vấn đề cũ:**
+```
+ReactDOM__default.ReactDOM__default.findDOMNode
+```
+
+**Giải pháp:**
+➡️ Dùng Example app thay vì yalc để tránh hoàn toàn vấn đề này!
+
+Example app import trực tiếp từ source nên:
+- ✅ Không có build issues
+- ✅ Không có double prefix
+- ✅ Không cần fix Rollup plugins
+- ✅ React version luôn match (18.3.1)
+
+---
+
+## ✨ Bắt đầu ngay:
+
+```bash
+cd /Users/tungthai/Desktop/Develop/showroom-visualizer/example
+yarn dev
+```
+
+**Server đang chạy tại:** http://localhost:3001 🚀
+
+---
+
+Happy Coding! 🎉
+

package/base.json

@@ -1,21 +1,21 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "Default",
-  "compilerOptions": {
-    "composite": false,
-    "declaration": true,
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "inlineSources": false,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "preserveWatchOutput": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "downlevelIteration": true
-  },
-  "exclude": ["node_modules"]
-}
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "downlevelIteration": true
+  },
+  "exclude": ["node_modules"]
+}

package/dist/components/SkinLayer/Drawer/PoiHeader/index.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+type PoiHeaderPropsTypes = {
+    title: string;
+    brand?: string;
+    rating?: number;
+    price?: number;
+    salePrice?: number;
+    currencyUnit?: string;
+    unit?: string;
+    onShare?: () => void;
+    onClose?: () => void;
+    onPlay?: () => void;
+};
+declare const PoiHeader: FC<PoiHeaderPropsTypes>;
+export default PoiHeader;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SkinLayer/Drawer/PoiHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/Drawer/PoiHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlC,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,mBAAmB,CAwGtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/SkinLayer/Drawer/index.d.ts

@@ -0,0 +1,29 @@
+import { DrawerProps } from 'antd/lib/drawer';
+import { CSSProperties, ReactNode } from 'react';
+export type CommandTypes = {
+    icon: string;
+    onClick: () => void;
+};
+/**
+ * commands is actions list on side-in header
+ */
+interface DrawerPropsType extends DrawerProps {
+    enableAutoPlay?: boolean;
+    enableShare?: boolean;
+    title?: string;
+    children?: ReactNode;
+    header?: ReactNode;
+    subHeader?: ReactNode;
+    loadingScenario?: boolean;
+    commands?: CommandTypes[] | null;
+    showHeader?: boolean;
+    closeStyle?: CSSProperties;
+    onBack?: () => void;
+    onClose?: () => void;
+    onClickAutoPlay?: () => void;
+    onClickShare?: () => void;
+    onClickContainer?: () => void;
+}
+declare const _default: import("react").NamedExoticComponent<DrawerPropsType>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SkinLayer/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/Drawer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAY,SAAS,EAAoB,MAAM,OAAO,CAAC;AAI7E,MAAM,MAAM,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEjE;;GAEG;AACH,UAAU,eAAgB,SAAQ,WAAW;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;;AA4ND,wBAAqC"}

package/dist/components/SkinLayer/PlayAll/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type PlayAllPropsType = {
+    onClickAutoPlay?: () => void;
+    loading?: boolean;
+};
+declare const PlayAll: FC<PlayAllPropsType>;
+export default PlayAll;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SkinLayer/PlayAll/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PlayAll/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,gBAAgB,CAoCjC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/features/VirtualTourVisualizer/index.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import Poi from '../../models/Visualizer/Poi/Poi';
+import Tour from '../../models/Visualizer/Tour';
+type VirtualTourVisualizerProps = {
+    elementId?: string;
+    apiHost?: string;
+    config?: {
+        tourCode?: string;
+        language?: string;
+        startScene?: string;
+        hLookAt?: number;
+        vLookAt?: number;
+    } & Record<string, unknown>;
+    onTourLoaded?: (tour: Tour) => void;
+    onPoiClicked?: (poi?: Poi) => void;
+    onPinActionClicked?: (key: string) => void;
+};
+declare const VirtualTourVisualizer: FC<VirtualTourVisualizerProps>;
+export default VirtualTourVisualizer;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/VirtualTourVisualizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/features/VirtualTourVisualizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,GAAG,MAAM,iCAAiC,CAAC;AAClD,OAAO,IAAI,MAAM,8BAA8B,CAAC;AAEhD,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AACF,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAmBzD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/features/VirtualTourVisualizerUI/index.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+type VirtualTourVisualizerProps = {
+    elementId?: string;
+    apiHost?: string;
+    mobile: boolean;
+    config?: {
+        tourCode?: string;
+        language?: string;
+        startScene?: string;
+        hLookAt?: number;
+        vLookAt?: number;
+    } & Record<string, unknown>;
+    tourLoaded?: boolean;
+};
+declare const VirtualTourVisualizerUI: FC<VirtualTourVisualizerProps>;
+export default VirtualTourVisualizerUI;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/VirtualTourVisualizerUI/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/features/VirtualTourVisualizerUI/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,0BAA0B,CAoB3D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}