@clikvn/showroom-visualizer 0.0.49-dev → 0.1.1-dev

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/showroom-visualizer",
   "description": "Showroom Visualizer",
-  "version": "0.0.49-dev",
+  "version": "0.1.1-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",
@@ -34,12 +34,15 @@
     "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",
@@ -52,6 +55,7 @@
     "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",

package/rollup.config.js

@@ -13,6 +13,8 @@ import tailwindcss from 'tailwindcss';
 import copy from '@rollup-extras/plugin-copy';
 
 const extensions = ['.ts', '.tsx', '.js'];
+const isDev =
+  process.env.NODE_ENV === 'development' || process.env.ROLLUP_WATCH === 'true';
 
 const indexConfig = {
   context: 'this',
@@ -34,13 +36,16 @@ const indexConfig = {
       dedupe: ['useTranslation', 'i18n', 'I18nextProvider'],
     }),
     commonjs(),
-    uglify(),
+    // Skip uglify in dev mode - tốn thời gian
+    !isDev && uglify(),
     json(),
-    babel({
-      babelHelpers: 'bundled',
-      exclude: 'node_modules/**',
-      extensions,
-    }),
+    // Skip babel in dev mode - giảm thời gian compile
+    !isDev &&
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        extensions,
+      }),
     copy({
       targets: [
         {
@@ -55,20 +60,26 @@ const indexConfig = {
       ],
     }),
     replace({
-      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.NODE_ENV': JSON.stringify(
+        isDev ? 'development' : 'production'
+      ),
     }),
     postcss({
       plugins: [autoprefixer(), tailwindcss()],
       extract: false,
       modules: false,
       autoModules: false,
-      minimize: true,
+      minimize: !isDev, // Skip minify CSS trong dev
       inject: false,
     }),
-    typescript(),
+    typescript({
+      sourceMap: isDev, // Source map chỉ trong dev
+      inlineSources: isDev,
+    }),
     typescriptPaths({ preserveExtensions: true }),
-    terser({ output: { comments: false } }),
-  ],
+    // Skip terser trong dev - tốn rất nhiều thời gian
+    !isDev && terser({ output: { comments: false } }),
+  ].filter(Boolean), // Remove false values
 };
 
 const configs = [

package/tailwind.config.cjs

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const defaultTheme = require('tailwindcss/defaultTheme');
-const plugin = require('tailwindcss/plugin')
+const plugin = require('tailwindcss/plugin');
 
 function rem2px(input, fontSize = 16) {
   if (input == null) {
@@ -82,56 +82,58 @@ module.exports = {
         sm: 'calc(var(--radius) - 4px)',
       },*/
       colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'var(--card)',
+          foreground: 'var(--card-foreground)',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'var(--popover)',
+          foreground: 'var(--popover-foreground)',
         },
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'var(--primary)',
+          foreground: 'var(--primary-foreground)',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'var(--secondary)',
+          foreground: 'var(--secondary-foreground)',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'var(--muted)',
+          foreground: 'var(--muted-foreground)',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'var(--accent)',
+          foreground: 'var(--accent-foreground)',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          DEFAULT: 'var(--destructive)',
+          foreground: 'var(--destructive-foreground)',
         },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
+        border: 'var(--border)',
+        input: 'var(--input)',
+        ring: 'var(--ring)',
+        rating: 'var(--rating)',
         chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
+          1: 'var(--chart-1)',
+          2: 'var(--chart-2)',
+          3: 'var(--chart-3)',
+          4: 'var(--chart-4)',
+          5: 'var(--chart-5)',
         },
         sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
+          DEFAULT: 'var(--sidebar)',
+          foreground: 'var(--sidebar-foreground)',
+          primary: 'var(--sidebar-primary)',
+          'primary-foreground': 'var(--sidebar-primary-foreground)',
+          accent: 'var(--sidebar-accent)',
+          'accent-foreground': 'var(--sidebar-accent-foreground)',
+          border: 'var(--sidebar-border)',
+          ring: 'var(--sidebar-ring)',
         },
+        base: 'var(--base)',
       },
     },
   },
@@ -140,10 +142,10 @@ module.exports = {
     require('@tailwindcss/typography'),
     plugin(function ({ addVariant }) {
       addVariant('wrapped', ({ container }) => {
-        container.walkRules(rule => {
-          rule.selector = `.clik-chatbot-wrapper ${rule.selector}`
-        })
-      })
+        container.walkRules((rule) => {
+          rule.selector = `.clik-chatbot-wrapper ${rule.selector}`;
+        });
+      });
     }),
   ],
 };