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

package/example/PATH_ALIASES.md

@@ -1,103 +1,102 @@
-# 📁 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.
-
+# 📁 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 +1,63 @@
-# 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';
-```
-
+# 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 +1,12 @@
-<!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>
-
+<!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 +1,25 @@
-{
-  "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"
-  }
-}
+{
+  "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 +1,6 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/example/tailwind.config.cjs

@@ -1,12 +1,12 @@
-/** @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,
-};
+/** @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 +1,11 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
-
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}