@clikvn/showroom-visualizer 0.2.2-dev-11 → 0.2.2-dev-13

package/dist/types/custom-layout.d.ts

@@ -1,63 +0,0 @@
-import { ComponentType } from 'react';
-/**
- * Custom Layout Config - Cho phép override từng component thông qua cấu trúc object lồng nhau.
- *
- * @example
- * ```tsx
- * customLayout={{
- *   Floorplan: {
- *     Minimap: {
- *       Marker: CustomMarker,
- *       Polygon: CustomPolygon,
- *     },
- *   },
- * }}
- * ```
- *
- * @important Pass component functions, NOT React elements!
- */
-export type CustomLayoutComponent<T = any> = ComponentType<T>;
-export type CustomLayoutNode = CustomLayoutComponent | {
-    [key: string]: CustomLayoutNode;
-};
-export type CustomLayoutConfig = {
-    [key: string]: CustomLayoutNode;
-};
-/**
- * Resolve helper để tìm component theo path (ví dụ ['Floorplan', 'Minimap', 'Marker'])
- */
-export declare const resolveCustomLayoutComponent: (config: CustomLayoutConfig | undefined, path: string[]) => CustomLayoutComponent | undefined;
-/**
- * Registry document các component có thể custom layout
- */
-export declare const CUSTOM_LAYOUT_COMPONENTS: {
-    readonly Floorplan: {
-        readonly path: "src/components/SkinLayer/Floorplan/index.tsx";
-        readonly description: "Main Floorplan container with bottom sheet";
-        readonly children: {
-            readonly Map: {
-                readonly path: "src/components/SkinLayer/Floorplan/Map.tsx";
-                readonly description: "Floorplan map wrapper with controls";
-            };
-            readonly Minimap: {
-                readonly path: "src/components/SkinLayer/Floorplan/Minimap/index.tsx";
-                readonly description: "Interactive minimap with markers and polygons";
-                readonly children: {
-                    readonly Marker: {
-                        readonly path: "src/components/SkinLayer/Floorplan/Minimap/MiniMapMarker.tsx";
-                        readonly description: "Individual marker on minimap";
-                    };
-                    readonly Polygon: {
-                        readonly path: "src/components/SkinLayer/Floorplan/Minimap/MiniMapPolygons/index.tsx";
-                        readonly description: "Polygon areas on minimap";
-                    };
-                    readonly Radar: {
-                        readonly path: "src/components/SkinLayer/Floorplan/Minimap/index.tsx";
-                        readonly description: "Radar element inside minimap";
-                    };
-                };
-            };
-        };
-    };
-};
-//# sourceMappingURL=custom-layout.d.ts.map

package/dist/types/custom-layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-layout.d.ts","sourceRoot":"","sources":["../../src/types/custom-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GACxB,qBAAqB,GACrB;IACE,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACjC,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,4BAA4B,GACvC,QAAQ,kBAAkB,GAAG,SAAS,EACtC,MAAM,MAAM,EAAE,KACb,qBAAqB,GAAG,SAgD1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B3B,CAAC"}

package/example/CSS_HANDLING.md

@@ -1,141 +0,0 @@
-# 🎨 CSS Handling in Example App
-
-## Vấn đề
-
-```
-Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css' does not provide an export named 'default'
-```
-
-## Nguyên nhân
-
-### Thư viện (Rollup Build)
-
-Thư viện sử dụng Rollup với PostCSS plugin config:
-
-```javascript
-postcss({
-  inject: false,  // ← Không inject CSS vào DOM
-  extract: false, // ← Export CSS as string
-})
-```
-
-Điều này cho phép import CSS như strings:
-
-```typescript
-import styles from './styles.css';
-// styles = "css content as string"
-```
-
-Và render trong component `CssStyles.tsx`:
-
-```tsx
-<style>{styles}</style>
-```
-
-### Vite (Development)
-
-Vite mặc định **inject CSS trực tiếp vào DOM** và không export CSS as strings.
-
-```typescript
-import styles from './styles.css';
-// Vite inject CSS → styles = undefined
-// ❌ Error: does not provide an export named 'default'
-```
-
-## Giải pháp
-
-### Custom Vite Plugin: `cssAsStringPlugin`
-
-Tạo plugin trong `vite.config.ts` để xử lý CSS từ thư viện như strings:
-
-```typescript
-const cssAsStringPlugin = () => ({
-  name: 'css-as-string',
-  enforce: 'pre', // ⭐ Run BEFORE other plugins (critical!)
-  load(id: string) {
-    // Chỉ xử lý CSS từ thư viện
-    if (
-      id.endsWith('.css') &&
-      (id.includes('/src/assets/') || id.includes('/@clikvn/'))
-    ) {
-      const cssContent = fs.readFileSync(id, 'utf-8');
-      return `export default ${JSON.stringify(cssContent)}`;
-    }
-    return null;
-  },
-});
-
-// Plugin order matters!
-plugins: [cssAsStringPlugin(), react()]
-```
-
-**Key Points:**
-- ⭐ **`enforce: 'pre'`**: Chạy trước Vite's built-in CSS plugin
-- ⭐ **`load` hook**: Intercept file loading, không dùng `transform`
-- ⭐ **Plugin order**: `cssAsStringPlugin()` phải đứng TRƯỚC `react()`
-
-### Cách hoạt động
-
-1. **CSS từ thư viện** (`/src/assets/`) → Export as string
-2. **CSS từ @clikvn packages** → Export as string
-3. **CSS khác** (antd, example app CSS) → Vite xử lý bình thường
-
-### Files được xử lý
-
-Plugin chỉ xử lý CSS files trong:
-
-- ✅ `/Users/tungthai/Desktop/Develop/showroom-visualizer/src/assets/*.css`
-- ✅ `node_modules/@clikvn/*/dist/**/*.css`
-- ❌ `node_modules/antd/**/*.css` (Vite xử lý bình thường)
-- ❌ `example/src/**/*.css` (Vite xử lý bình thường)
-
-## Kết quả
-
-### ✅ Trước (Rollup Build):
-
-```typescript
-import styles from './styles.css';
-<style>{styles}</style> // ✅ Works
-```
-
-### ✅ Sau (Vite Dev with Plugin):
-
-```typescript
-import styles from './styles.css';
-<style>{styles}</style> // ✅ Works (plugin export CSS as string)
-```
-
-### ✅ CSS từ example app:
-
-```typescript
-// example/src/App.css
-import './App.css'; // ✅ Vite inject vào DOM bình thường
-```
-
-## 🔍 Debug
-
-Nếu vẫn có lỗi CSS, kiểm tra:
-
-```bash
-# 1. Restart dev server
-cd example
-yarn dev
-
-# 2. Clear Vite cache
-rm -rf node_modules/.vite
-yarn dev
-
-# 3. Kiểm tra plugin đang hoạt động
-# Trong browser console, check xem CSS đã được inject chưa
-```
-
-## 📚 Related Files
-
-- `example/vite.config.ts` - Chứa `cssAsStringPlugin`
-- `src/features/ShowroomVisualizer/CssStyles.tsx` - Render CSS as `<style>` tags
-- `rollup.config.js` - PostCSS config của thư viện
-
----
-
-✅ **Fixed!** CSS từ thư viện giờ được export as strings trong Vite dev mode.
-

package/example/FIXES_SUMMARY.md

@@ -1,121 +0,0 @@
-# 🎯 Example App - Fixes Summary
-
-## 2 vấn đề đã được fix:
-
----
-
-## 1️⃣ Path Aliases Resolution ✅
-
-### Lỗi:
-```
-[plugin:vite:import-analysis] Failed to resolve import "commons/SkinLayer/components/Drawer"
-```
-
-### Root Cause:
-Thư viện sử dụng `baseUrl: "./src"` cho phép imports:
-```typescript
-import Drawer from 'commons/SkinLayer/components/Drawer';
-```
-
-Example app không biết về aliases này.
-
-### Fix:
-Thêm 10 path aliases vào `vite.config.ts` và `tsconfig.json`:
-- `commons/*`, `components/*`, `constants/*`, `context/*`, `features/*`
-- `hooks/*`, `models/*`, `services/*`, `types/*`, `utils/*`
-
-### Status: ✅ Fixed
-
----
-
-## 2️⃣ CSS Imports as Strings ✅
-
-### Lỗi:
-```
-Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css' 
-does not provide an export named 'default'
-```
-
-### Root Cause:
-- **Thư viện (Rollup)**: CSS exported as strings với `postcss({ inject: false })`
-- **Vite**: Mặc định inject CSS, không export strings
-- **CssStyles.tsx**: Cần CSS as strings để render `<style>{css}</style>`
-
-### Fix:
-Tạo custom Vite plugin `cssAsStringPlugin` với 3 key points:
-
-```typescript
-const cssAsStringPlugin = () => ({
-  name: 'css-as-string',
-  enforce: 'pre', // ⭐ Critical: Run BEFORE other plugins
-  load(id: string) { // ⭐ Use 'load' hook, not 'transform'
-    if (
-      id.endsWith('.css') &&
-      (id.includes('/src/assets/') || id.includes('/@clikvn/'))
-    ) {
-      const cssContent = fs.readFileSync(id, 'utf-8');
-      return `export default ${JSON.stringify(cssContent)}`;
-    }
-  },
-});
-
-// ⭐ Plugin order matters!
-plugins: [cssAsStringPlugin(), react()]
-```
-
-**3 điều quan trọng:**
-1. `enforce: 'pre'` - Chạy trước Vite CSS plugin
-2. `load()` hook - Intercept file loading sớm
-3. Plugin order - Đặt TRƯỚC `react()`
-
-Plugin chỉ xử lý:
-- ✅ CSS từ `/src/assets/` → Export as string
-- ✅ CSS từ `@clikvn/*` packages → Export as string
-- ❌ CSS khác (antd, example CSS) → Vite xử lý bình thường
-
-### Status: ✅ Fixed
-
----
-
-## 📊 Tổng kết
-
-| Issue | Status | Files Changed |
-|-------|--------|---------------|
-| Path Aliases | ✅ Fixed | `vite.config.ts`, `tsconfig.json` |
-| CSS Imports | ✅ Fixed | `vite.config.ts` (plugin) |
-
----
-
-## 🚀 Kết quả
-
-**Example app giờ hoạt động 100%!**
-
-✅ Dev server: http://localhost:3001  
-✅ Import từ `src/` trực tiếp  
-✅ Hot reload  
-✅ Path aliases  
-✅ CSS handling  
-✅ Test custom layout  
-
----
-
-## 📚 Documents
-
-- [PATH_ALIASES.md](./PATH_ALIASES.md) - Chi tiết về path aliases
-- [CSS_HANDLING.md](./CSS_HANDLING.md) - Chi tiết về CSS plugin
-- [CHANGELOG.md](./CHANGELOG.md) - Lịch sử thay đổi
-- [README.md](./README.md) - Hướng dẫn sử dụng
-
----
-
-## 🎉 Ready to Use!
-
-```bash
-cd example
-yarn dev
-
-# Open: http://localhost:3001
-```
-
-Thay đổi code trong `../src/` → Tự động reload! 🔥
-

package/example/PATH_ALIASES.md

@@ -1,103 +0,0 @@
-# 📁 Path Aliases Configuration
-
-## Vấn đề
-
-Thư viện `showroom-visualizer` sử dụng `baseUrl: "./src"` trong `tsconfig.json`, cho phép import trực tiếp từ root của `src/`:
-
-```typescript
-// Thay vì:
-import Drawer from '../../commons/SkinLayer/components/Drawer';
-
-// Có thể viết:
-import Drawer from 'commons/SkinLayer/components/Drawer';
-```
-
-## Giải pháp
-
-Example app cần cấu hình tương ứng để Vite và TypeScript có thể resolve các imports này.
-
-### 1. Vite Config (`vite.config.ts`)
-
-```typescript
-resolve: {
-  alias: {
-    '@clikvn/showroom-visualizer': path.resolve(__dirname, '../src'),
-    'commons': path.resolve(__dirname, '../src/commons'),
-    'components': path.resolve(__dirname, '../src/components'),
-    'constants': path.resolve(__dirname, '../src/constants'),
-    'context': path.resolve(__dirname, '../src/context'),
-    'features': path.resolve(__dirname, '../src/features'),
-    'hooks': path.resolve(__dirname, '../src/hooks'),
-    'models': path.resolve(__dirname, '../src/models'),
-    'services': path.resolve(__dirname, '../src/services'),
-    'types': path.resolve(__dirname, '../src/types'),
-    'utils': path.resolve(__dirname, '../src/utils'),
-  },
-}
-```
-
-### 2. TypeScript Config (`tsconfig.json`)
-
-```json
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "commons": ["../src/commons"],
-      "commons/*": ["../src/commons/*"],
-      "components": ["../src/components"],
-      "components/*": ["../src/components/*"],
-      // ... các aliases khác
-    }
-  }
-}
-```
-
-## Các Aliases Được Hỗ Trợ
-
-| Alias | Trỏ đến | Ví dụ |
-|-------|---------|-------|
-| `commons/*` | `../src/commons/*` | `import Drawer from 'commons/SkinLayer/components/Drawer'` |
-| `components/*` | `../src/components/*` | `import Layout from 'components/SkinLayer/Layout'` |
-| `constants/*` | `../src/constants/*` | `import { WIDTH_SLIDE_IN } from 'constants/SkinLayer'` |
-| `context/*` | `../src/context/*` | `import { useCustomLayout } from 'context/CustomLayoutContext'` |
-| `features/*` | `../src/features/*` | `import Visualizer from 'features/ShowroomVisualizer'` |
-| `hooks/*` | `../src/hooks/*` | `import { useStore } from 'hooks/useStore'` |
-| `models/*` | `../src/models/*` | `import PoiItemInfo from 'models/Visualizer/Poi/PoiItemInfo'` |
-| `services/*` | `../src/services/*` | `import ApiService from 'services/Visualizer/ApiService'` |
-| `types/*` | `../src/types/*` | `import { CustomLayoutConfig } from 'types/custom-layout'` |
-| `utils/*` | `../src/utils/*` | `import { formatDate } from 'utils/Visualizer/date'` |
-
-## ⚠️ Lưu ý
-
-1. **Restart dev server** sau khi thay đổi `vite.config.ts` hoặc `tsconfig.json`
-2. **Không cần** thêm aliases này vào thư viện chính - chỉ cần trong example app
-3. Nếu thêm folder mới trong `src/`, cần thêm alias tương ứng
-
-## 🐛 Troubleshooting
-
-### Lỗi: "Failed to resolve import"
-
-```bash
-# Kiểm tra alias có đúng không
-cat example/vite.config.ts
-
-# Restart dev server
-cd example
-yarn dev
-```
-
-### TypeScript không tìm thấy types
-
-```bash
-# Kiểm tra paths trong tsconfig.json
-cat example/tsconfig.json
-
-# Restart TypeScript server trong VSCode
-# Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"
-```
-
----
-
-✅ Đã cấu hình xong! Example app giờ có thể import từ source code giống như thư viện chính.
-

package/example/README.md

@@ -1,64 +0,0 @@
-# Showroom Visualizer - Example App
-
-Đây là example app để test và develop thư viện `@clikvn/showroom-visualizer` trong môi trường local.
-
-## 🚀 Cách sử dụng
-
-### 1. Cài đặt dependencies
-
-```bash
-cd example
-yarn install
-# hoặc
-npm install
-```
-
-### 2. Chạy dev server
-
-```bash
-yarn dev
-# hoặc
-npm run dev
-```
-
-App sẽ chạy tại: http://localhost:3001
-
-### 3. Test thư viện
-
-- **Import trực tiếp từ source**: Example app sẽ import trực tiếp từ `../src/` thay vì build
-- **Hot reload**: Mọi thay đổi trong `../src/` hoặc `example/src/` đều tự động reload
-- **Test custom layout**: Bật/tắt custom components bằng checkbox trong UI
-- **Test props**: Thay đổi language, API URL, etc.
-
-## 📝 Lưu ý
-
-1. **Không cần build**: Example app import trực tiếp từ TypeScript source
-2. **React version**: Đảm bảo cùng version (18.3.1) với thư viện chính
-3. **Không publish**: Folder này chỉ dùng cho development, không publish lên npm
-
-## 🎯 Use Cases
-
-- ✅ Test features mới
-- ✅ Debug issues
-- ✅ Test custom layout components
-- ✅ Kiểm tra performance
-- ✅ Preview trước khi publish
-
-## 🔗 Import từ source
-
-Trong `vite.config.ts`, chúng ta đã setup alias:
-
-```typescript
-resolve: {
-  alias: {
-    '@clikvn/showroom-visualizer': path.resolve(__dirname, '../src'),
-  },
-}
-```
-
-Nên bạn có thể import như thật:
-
-```typescript
-import { ShowroomVisualizer } from '@clikvn/showroom-visualizer';
-```
-

package/example/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Showroom Visualizer - Example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-

package/example/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "showroom-visualizer-example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^5.0.0",
-    "autoprefixer": "^10.4.22",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.6.3",
-    "vite": "^6.0.0"
-  }
-}

package/example/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/example/tailwind.config.cjs

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  // Extend the parent tailwind config
-  presets: [require('../tailwind.config.cjs')],
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    // Include parent library source files
-    '../src/**/*.{js,ts,jsx,tsx}',
-  ],
-  important: true,
-};

package/example/tsconfig.node.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
-