chore: NO-JIRA upgrade vite to version 8

.github/actions/setup-environment/action.yml

@@ -19,4 +19,6 @@ runs:
 
     - name: Install dependencies
       shell: bash
-      run: pnpm install --frozen-lockfile
+      run: |
+        pnpm install --frozen-lockfile || \
+        (npm config delete @dialpad:registry && pnpm install --frozen-lockfile)

package.json

@@ -17,7 +17,7 @@
         "postcss": "^7.0.39 || ^8.3.3",
         "react": "^18.3.1",
         "typescript": "^5.2",
-        "vite": "^5.0.0 || ^7.0.7",
+        "vite": "^8.0.0",
         "vue": "^3.2",
         "vuepress": "^2.0.0-rc.24"
       }
@@ -35,6 +35,9 @@
       "test-exclude": "^7.0.1",
       "trim": ">=0.0.3",
       "trim-newlines": ">=3.0.1"
+    },
+    "patchedDependencies": {
+      "@tiptap/vue-3@3.19.0": "patches/@tiptap__vue-3@3.19.0.patch"
     }
   },
   "files": [
@@ -86,7 +89,7 @@
     "@dialpad/dialtone-cli": "workspace:*",
     "@dialpad/dialtone-mcp-server": "workspace:*",
     "@dialpad/dialtone-tokens": "workspace:*",
-    "@dialpad/i18n": "1.22.3",
+    "@dialpad/i18n": "1.25.0",
     "@floating-ui/dom": "^1.6.0",
     "@tiptap/core": "3.19.0",
     "@tiptap/extension-blockquote": "3.19.0",
@@ -122,7 +125,8 @@
     "linkifyjs": "4.3.2",
     "overlayscrollbars": "2.10.0",
     "regex-combined-emojis": "1.6.0",
-    "tippy.js": "6.3.7"
+    "tippy.js": "6.3.7",
+    "vue-tsc": "3.2.6"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
@@ -136,8 +140,8 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^20.4.5",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^1.0.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.0",
     "@vue/tsconfig": "^0.4.0",
     "axe-core": "^4.7.2",
     "axe-playwright": "^2.0.3",
@@ -149,7 +153,7 @@
     "eslint-plugin-eslint-plugin": "6.3.1",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-json": "4.0.1",
-    "eslint-plugin-storybook": "10.2.6",
+    "eslint-plugin-storybook": "10.3.0",
     "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vue": "^10.4.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
@@ -180,10 +184,10 @@
     "typedoc": "^0.28.2",
     "typedoc-plugin-markdown": "^4.6.1",
     "typescript": "^5.2",
-    "vite": "^5.4.2",
+    "vite": "^8.0.0",
     "vite-bundle-visualizer": "^1.2.1",
-    "vite-plugin-dts": "^4.0.3",
-    "vitest": "^1.6.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.0",
     "vue-docgen-api": "^4.75.0",
     "vue-template-compiler": "^2.7.16",
     "wait-on": "^7.2.0",

packages/combinator/package.json

@@ -25,7 +25,7 @@
   ],
   "exports": {
     ".": "./dist/dialtone-combinator.js",
-    "./css": "./dist/style.css",
+    "./css": "./dist/dialtone-combinator.css",
     "./*": "./dist/src/lib/*.js"
   },
   "dependencies": {

packages/combinator/vite.config.js

@@ -4,9 +4,10 @@ import { fileURLToPath } from 'url';
 
 export default defineConfig({
   build: {
+    target: 'es2020',
     sourcemap: true,
     minify: false,
-    rollupOptions: {
+    rolldownOptions: {
       external: [
         /^@dialpad/,
         'change-case',
@@ -18,9 +19,6 @@ export default defineConfig({
       output: {
         preserveModules: true,
         minifyInternalExports: false,
-        globals: {
-          vue: 'Vue',
-        },
       },
     },
     lib: {

packages/dialtone-docs/package.json

@@ -11,7 +11,7 @@
     "glob": "^11.0.3",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.8",
-    "vitest": "^1.6.1"
+    "vitest": "^4.1.0"
   },
   "keywords": ["documentation", "ai", "dialtone"],
   "license": "MIT"

packages/dialtone-icons/gulpfile.cjs

@@ -14,6 +14,7 @@ const settings = {
 //  ================================================================================
 //  @@ GENERAL
 const { src, dest, series } = require('gulp');
+const merge = require('merge-stream');
 const del = require('del');
 const rename = require('gulp-rename');
 const fs = require('fs');
@@ -177,7 +178,7 @@ const transformSVGtoVue = function (done) {
 //  Reads previous keywords-icons.json file to extract keywords and add any new icon
 //  into the respective category.
 //  ================================================================================
-const updateIconsJSON = function (done) {
+const updateIconsJSON = function () {
   const rawData = fs.readFileSync(paths.exports.keywordsIcons);
   const keywordsJSON = JSON.parse(rawData).categories;
   const iconsList = [];
@@ -199,18 +200,18 @@ const updateIconsJSON = function (done) {
   fs.writeFileSync(paths.exports.iconsList, `export default ${JSON.stringify(iconsList)}`);
 
   // Copies the icons.js and keywords-icons.json to dist/
-  src([paths.exports.keywordsIcons, paths.exports.iconsList])
+  const copyStream = src([paths.exports.keywordsIcons, paths.exports.iconsList])
     .pipe(dest('./dist/'));
 
   // Prettifies the JSON to improve readability and easier keyword adding.
-  src(paths.exports.keywordsIcons)
+  const prettifyStream = src(paths.exports.keywordsIcons)
     .pipe(jsonFormat(2))
     .pipe(dest('./src/'));
 
-  return done();
+  return merge(copyStream, prettifyStream);
 };
 
-const updateIllustrationsJSON = function (done) {
+const updateIllustrationsJSON = function () {
   const rawData = fs.readFileSync(paths.exports.keywordsIllustrations);
   const keywordsJSON = JSON.parse(rawData).categories;
   const illustrationsList = [];
@@ -232,15 +233,15 @@ const updateIllustrationsJSON = function (done) {
   fs.writeFileSync(paths.exports.illustrationsList, `export default ${JSON.stringify(illustrationsList)}`);
 
   // Copies the illustrations.js and keywords-illustrations.json to dist/
-  src([paths.exports.keywordsIllustrations, paths.exports.illustrationsList])
+  const copyStream = src([paths.exports.keywordsIllustrations, paths.exports.illustrationsList])
     .pipe(dest('./dist/'));
 
   // Prettifies the JSON to improve readability and easier keyword adding.
-  src(paths.exports.keywordsIllustrations)
+  const prettifyStream = src(paths.exports.keywordsIllustrations)
     .pipe(jsonFormat(2))
     .pipe(dest('./src/'));
 
-  return done();
+  return merge(copyStream, prettifyStream);
 };
 
 const updateExports = function (done) {

packages/dialtone-icons/project.json

@@ -8,7 +8,9 @@
         "command": "pnpm exec gulp"
       },
       "inputs": [
-        "{projectRoot}/src/**/*",
+        "{projectRoot}/src/svg/**/*",
+        "{projectRoot}/src/keywords-icons.json",
+        "{projectRoot}/src/keywords-illustrations.json",
         "{projectRoot}/transformSVGtoVue.cjs",
         "{projectRoot}/gulpfile.cjs"
       ],

packages/dialtone-icons/vue2/vite.config.js

@@ -27,7 +27,7 @@ export default defineConfig({
       },
       formats: ['es', 'cjs'],
     },
-    rollupOptions: {
+    rolldownOptions: {
       external: ['vue'],
       output: {
         minifyInternalExports: true,

packages/dialtone-icons/vue3/vite.config.js

@@ -18,6 +18,7 @@ const illustrationEntries = glob.sync('../src/illustrations/*.vue').reduce((entr
 }, {});
 export default defineConfig({
   build: {
+    target: 'es2020',
     sourcemap: true,
     lib: {
       entry: {
@@ -27,7 +28,7 @@ export default defineConfig({
       },
       formats: ['es', 'cjs'],
     },
-    rollupOptions: {
+    rolldownOptions: {
       external: ['vue'],
       output: {
         minifyInternalExports: true,
@@ -37,7 +38,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
-    dts({ outDir: 'dist/types' }),
+    dts({ outDir: 'dist/types', vue: true, parallel: true }),
   ],
   resolve: {
     alias: {

packages/dialtone-tokens/vite.config.js

@@ -15,6 +15,7 @@ const postcssEntries = glob.sync('./postcss/*.js').reduce((entries, path) => {
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
+    target: 'es2020',
     emptyOutDir: false,
     lib: {
       entry: {
@@ -23,7 +24,7 @@ export default defineConfig({
       },
       formats: ['es', 'cjs'],
     },
-    rollupOptions: {
+    rolldownOptions: {
       output: {
         minifyInternalExports: true,
         chunkFileNames: () => 'themes/chunks/[name]-[hash].js',

packages/dialtone-vue/components/combobox/combobox.test.js

@@ -63,6 +63,7 @@ describe('DtCombobox Tests', () => {
     mockAttrs = {};
     mockProps = {};
     mockSlots = {};
+    vi.clearAllMocks();
     vi.restoreAllMocks();
   });
 

packages/dialtone-vue/components/rich_text_editor/extensions/utils/suggestion_utils.test.js

@@ -23,12 +23,14 @@ vi.mock('@floating-ui/dom', () => ({
 }));
 
 vi.mock('@tiptap/vue-3', () => ({
-  VueRenderer: vi.fn().mockImplementation(() => ({
-    element: document.createElement('div'),
-    destroy: vi.fn(),
-    updateProps: vi.fn(),
-    ref: { onKeyDown: vi.fn() },
-  })),
+  VueRenderer: vi.fn().mockImplementation(function () {
+    return {
+      element: document.createElement('div'),
+      destroy: vi.fn(),
+      updateProps: vi.fn(),
+      ref: { onKeyDown: vi.fn() },
+    };
+  }),
 }));
 
 vi.mock('vue', () => ({

packages/dialtone-vue/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@dialpad/dialtone-emojis": "workspace:*",
     "@dialpad/dialtone-icons": "workspace:*",
-    "@dialpad/i18n": "1.22.3",
+    "@dialpad/i18n": "1.25.0",
     "@tiptap/core": "3.19.0",
     "@tiptap/static-renderer": "3.19.0",
     "@tiptap/extension-blockquote": "3.19.0",
@@ -60,15 +60,15 @@
   "devDependencies": {
     "@dialpad/dialtone-css": "workspace:*",
     "@dialpad/generator-dialtone": "workspace:*",
-    "@storybook/addon-a11y": "10.2.6",
-    "@storybook/addon-docs": "10.2.6",
-    "@storybook/addon-links": "10.2.6",
+    "@storybook/addon-a11y": "10.3.0",
+    "@storybook/addon-docs": "10.3.0",
+    "@storybook/addon-links": "10.3.0",
     "@storybook/test-runner": "^0.24.2",
-    "@storybook/vue3-vite": "10.2.6",
+    "@storybook/vue3-vite": "10.3.0",
     "@vue/test-utils": "^2.4.0",
     "@vueless/storybook-dark-mode": "^10.0.7",
     "react": "19.2.4",
-    "storybook": "10.2.6",
+    "storybook": "10.3.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {

packages/dialtone-vue/recipes/conversation_view/feed_item_row/feed_item_row_variants.story.vue

@@ -286,6 +286,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import DtRecipeFeedItemRow from './feed_item_row.vue';
 
 import { DtRecipeEmojiRow } from '../emoji_row';
@@ -299,7 +300,7 @@ import { DtButton } from '@/components/button';
 import { useMockReactions } from '@/recipes/conversation_view/emoji_row/composables/useMockReactions.js';
 import fryImage from '@/common/assets/fry.gif';
 
-const fadeState = 'SEARCHED';
+const fadeState = ref('SEARCHED');
 const hoverButtons = ['bell', 'living-thing', 'map-pin'];
 const persons = ['Jim Halpert', 'Michael Scott', 'Pam'];
 const { mockReactions } = useMockReactions();

packages/dialtone-vue/vite.config.js

@@ -40,9 +40,10 @@ const recipeEntries = _getEntries('lib', 'recipes/**/*.{js,vue}');
 export default defineConfig({
   assetsInclude: ['**/*.ftl'],
   build: {
+    target: 'es2020',
     sourcemap: true,
     minify: true,
-    rollupOptions: {
+    rolldownOptions: {
       external: [
         /^@dialpad/,
         /^@tiptap\/(?!vue-3)/,
@@ -59,7 +60,7 @@ export default defineConfig({
         minifyInternalExports: true,
         exports: 'named',
       },
-      treeshake: 'smallest',
+      treeshake: true,
     },
     lib: {
       entry: {
@@ -92,7 +93,7 @@ export default defineConfig({
       formats: ['es', 'cjs'],
     },
   },
-  plugins: [vue(), dts({ outDir: 'dist/types' })],
+  plugins: [vue(), dts({ vue: true, parallel: true, compilerOptions: { skipLibCheck: true } })],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('.', import.meta.url)),
@@ -132,7 +133,6 @@ export default defineConfig({
         '.storybook/**',
         'storybook-static/**',
       ],
-      all: true, // include all files in coverage report
       clean: true, // clean coverage directory before running tests
       skipFull: true, // skip full coverage report
       thresholds: { // will fail the build if coverage is below these thresholds

patches/@tiptap__vue-3@3.19.0.patch

@@ -0,0 +1,26 @@
+diff --git a/dist/menus/index.d.cts b/dist/menus/index.d.cts
+index 25d74222ae587d4611bdcfd6f047330114dab7b8..a2c5e802f60966b55583fcc27b3e6e19be1a6fd4 100644
+--- a/dist/menus/index.d.cts
++++ b/dist/menus/index.d.cts
+@@ -9,7 +9,7 @@ import { PropType } from 'vue';
+ import { PluginKey, EditorState } from '@tiptap/pm/state';
+ import { EditorView } from '@tiptap/pm/view';
+
+-interface BubbleMenuPluginProps {
++export interface BubbleMenuPluginProps {
+     /**
+      * The plugin key.
+      * @type {PluginKey | string}
+diff --git a/dist/menus/index.d.ts b/dist/menus/index.d.ts
+index 25d74222ae587d4611bdcfd6f047330114dab7b8..a2c5e802f60966b55583fcc27b3e6e19be1a6fd4 100644
+--- a/dist/menus/index.d.ts
++++ b/dist/menus/index.d.ts
+@@ -9,7 +9,7 @@ import { PropType } from 'vue';
+ import { PluginKey, EditorState } from '@tiptap/pm/state';
+ import { EditorView } from '@tiptap/pm/view';
+
+-interface BubbleMenuPluginProps {
++export interface BubbleMenuPluginProps {
+     /**
+      * The plugin key.
+      * @type {PluginKey | string}