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

package/example/vite.config.ts

@@ -1,142 +1,142 @@
-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,
-    host: true,
-    allowedHosts: [
-      'localhost',
-      '.localhost',
-      // Cho phép tất cả ngrok-free.app và ngrok.io hosts
-      '.ngrok-free.app',
-      '.ngrok.io',
-    ],
-  },
-  optimizeDeps: {
-    // Force prebundle để tránh conflict React versions
-    include: ['react', 'react-dom'],
-    // Ensure all React references use the same instance
-    dedupe: ['react', 'react-dom'],
-  },
-});
+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,
+    host: true,
+    allowedHosts: [
+      'localhost',
+      '.localhost',
+      // Cho phép tất cả ngrok-free.app và ngrok.io hosts
+      '.ngrok-free.app',
+      '.ngrok.io',
+    ],
+  },
+  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,133 +1,133 @@
-{
-  "name": "@clikvn/showroom-visualizer",
-  "description": "Showroom Visualizer",
-  "version": "0.4.1-dev-13",
-  "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",
-    "lint": "eslint src --format=compact",
-    "lint:fix": "eslint --fix src --format=compact",
-    "prettier": "prettier --write .",
-    "pub": "npm publish --access public",
-    "deploy": "npm login && yarn build && npm publish --access public"
-  },
-  "dependencies": {
-    "@clikvn/react-bottom-sheet": "^1.0.3",
-    "@clikvn/react-gallery-viewer": "^1.2.3-dev",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@react-spring/web": "^10.0.3",
-    "@ts-stack/markdown": "1.4.0",
-    "@types/moment": "^2.13.0",
-    "antd": "^5.27.2",
-    "axios": "^1.11.0",
-    "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "device-detector-js": "^3.0.3",
-    "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.12",
-    "howler": "^2.2.4",
-    "i18next": "^25.5.1",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.544.0",
-    "moment": "^2.30.1",
-    "node-fetch": "^3.3.2",
-    "qrcode.react": "^4.2.0",
-    "rc-progress": "^4.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.7.3",
-    "react-intersection-image": "^2.1.2",
-    "react-markdown": "^9.0.3",
-    "react-planet": "^1.0.1-ie11",
-    "react-slick": "^0.31.0",
-    "react-truncate-markup": "^5.1.2",
-    "react-zoom-pan-pinch": "^3.7.0",
-    "remark-gfm": "^4.0.0",
-    "signals": "^1.0.0",
-    "sonner": "^2.0.7",
-    "swr": "^2.3.0",
-    "usehooks-ts": "^3.1.0",
-    "vtt.js": "^0.13.0",
-    "web-vitals": "^2.1.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@rollup-extras/plugin-copy": "^1.11.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@tailwindcss/typography": "^0.5.15",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/howler": "^2.2.12",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^22.9.0",
-    "@types/node-fetch": "^2.6.13",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/signals": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.2",
-    "prettier": "^3.4.2",
-    "react-scripts": "5.0.1",
-    "rollup": "^4.26.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript-paths": "^1.5.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.15",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.6.3"
-  },
-  "engines": {
-    "node": ">=18.18.0"
-  }
-}
+{
+  "name": "@clikvn/showroom-visualizer",
+  "description": "Showroom Visualizer",
+  "version": "0.4.1-dev-14",
+  "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",
+    "lint": "eslint src --format=compact",
+    "lint:fix": "eslint --fix src --format=compact",
+    "prettier": "prettier --write .",
+    "pub": "npm publish --access public",
+    "deploy": "npm login && yarn build && npm publish --access public"
+  },
+  "dependencies": {
+    "@clikvn/react-bottom-sheet": "^1.0.3",
+    "@clikvn/react-gallery-viewer": "^1.2.3-dev",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@react-spring/web": "^10.0.3",
+    "@ts-stack/markdown": "1.4.0",
+    "@types/moment": "^2.13.0",
+    "antd": "^5.27.2",
+    "axios": "^1.11.0",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "device-detector-js": "^3.0.3",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.12",
+    "howler": "^2.2.4",
+    "i18next": "^25.5.1",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.544.0",
+    "moment": "^2.30.1",
+    "node-fetch": "^3.3.2",
+    "qrcode.react": "^4.2.0",
+    "rc-progress": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.7.3",
+    "react-intersection-image": "^2.1.2",
+    "react-markdown": "^9.0.3",
+    "react-planet": "^1.0.1-ie11",
+    "react-slick": "^0.31.0",
+    "react-truncate-markup": "^5.1.2",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "remark-gfm": "^4.0.0",
+    "signals": "^1.0.0",
+    "sonner": "^2.0.7",
+    "swr": "^2.3.0",
+    "usehooks-ts": "^3.1.0",
+    "vtt.js": "^0.13.0",
+    "web-vitals": "^2.1.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rollup-extras/plugin-copy": "^1.11.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/howler": "^2.2.12",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^22.9.0",
+    "@types/node-fetch": "^2.6.13",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/signals": "^1.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "prettier": "^3.4.2",
+    "react-scripts": "5.0.1",
+    "rollup": "^4.26.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript-paths": "^1.5.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.15",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18.18.0"
+  }
+}