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

package/example/CSS_HANDLING.md

@@ -0,0 +1,141 @@
+# 🎨 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

@@ -0,0 +1,121 @@
+# 🎯 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

@@ -0,0 +1,103 @@
+# 📁 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

@@ -0,0 +1,64 @@
+# 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

@@ -0,0 +1,13 @@
+<!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

@@ -0,0 +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"
+  }
+}

package/example/postcss.config.cjs

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

package/example/tailwind.config.cjs

@@ -0,0 +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,
+};

package/example/tsconfig.node.json

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

package/example/vite.config.ts

@@ -0,0 +1,126 @@
+import { defineConfig, Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import fs from 'fs';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+// Custom plugin to handle CSS imports as strings (matching Rollup's postcss behavior)
+const cssAsStringPlugin = (): Plugin => {
+  let postcssProcessor: any;
+  
+  return {
+    name: 'css-as-string',
+    enforce: 'pre',
+    
+    async configResolved(config) {
+      // Initialize PostCSS processor with Tailwind
+      postcssProcessor = postcss([
+        tailwindcss({
+          config: path.resolve(__dirname, 'tailwind.config.cjs'),
+        }),
+        autoprefixer(),
+      ]);
+    },
+    
+    async resolveId(source, importer) {
+      // Handle CSS imports from the library
+      if (source.endsWith('.css') && importer) {
+        // Check if this is from our library (any src folder) or @clikvn packages
+        const isLibraryCSS = 
+          importer.includes('/showroom-visualizer/src/') || 
+          source.includes('@clikvn/');
+        
+        if (isLibraryCSS) {
+          // Resolve the full path
+          let resolvedPath: string;
+          
+          if (source.startsWith('.') || source.startsWith('/')) {
+            resolvedPath = path.resolve(path.dirname(importer), source);
+          } else if (source.startsWith('@clikvn/')) {
+            // Handle @clikvn packages - look in parent node_modules
+            const packagePath = source.replace('@clikvn/', '../node_modules/@clikvn/');
+            resolvedPath = path.resolve(__dirname, packagePath);
+          } else {
+            return null;
+          }
+          
+          // Add a virtual marker to bypass Vite's CSS processing
+          return '\0' + resolvedPath + '.string';
+        }
+      }
+      return null;
+    },
+    
+    async load(id) {
+      // Handle our virtual CSS string modules
+      if (id.startsWith('\0') && id.endsWith('.css.string')) {
+        const realPath = id.slice(1, -7); // Remove \0 prefix and .string suffix
+        
+        try {
+          const content = await fs.promises.readFile(realPath, 'utf-8');
+          
+          // Process all CSS through PostCSS/Tailwind to ensure Tailwind utilities work
+          let processedContent = content;
+          try {
+            const result = await postcssProcessor.process(content, { from: realPath });
+            processedContent = result.css;
+          } catch (error) {
+            console.warn(`PostCSS processing failed for ${realPath}:`, error);
+            // Fall back to original content if processing fails
+            processedContent = content;
+          }
+          
+          return {
+            code: `export default ${JSON.stringify(processedContent)};`,
+            map: null,
+          };
+        } catch (error) {
+          console.error(`Failed to load CSS file: ${realPath}`, error);
+          return {
+            code: `export default "";`,
+            map: null,
+          };
+        }
+      }
+      return null;
+    },
+  };
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [cssAsStringPlugin(), react()],
+  resolve: {
+    alias: {
+      // Force use of example's React to avoid duplicate instances
+      'react': path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+      'react/jsx-runtime': path.resolve(__dirname, 'node_modules/react/jsx-runtime'),
+      // Alias để import trực tiếp từ source code thay vì build
+      '@clikvn/showroom-visualizer': path.resolve(__dirname, '../src'),
+      // Thư viện sử dụng baseUrl: "./src" nên tất cả imports cần aliases
+      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'),
+    },
+  },
+  server: {
+    port: 3001,
+    open: true,
+  },
+  optimizeDeps: {
+    // Force prebundle để tránh conflict React versions
+    include: ['react', 'react-dom'],
+    // Ensure all React references use the same instance
+    dedupe: ['react', 'react-dom'],
+  },
+});

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@clikvn/showroom-visualizer",
   "description": "Showroom Visualizer",
-  "version": "0.3.0-dev-08",
+  "version": "0.3.0-dev-10",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/web": "./dist/web.js",
+    "./dist/web.js": "./dist/web.js"
+  },
   "scripts": {
     "dev": "rollup --watch --config rollup.config.js",
     "build": "rollup --config rollup.config.js",