refactor: vite for kv-components

.github/workflows/chromatic.yml

@@ -13,16 +13,16 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "18.x"
+          node-version: "22.x"
         # 👇 Version 2 of the action
       - name: Checkout repository
         uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
       - name: Install dependencies
         run: npm ci
-      - name: Build kv-tokens
-        run: npm run build -w @kiva/kv-tokens
+      - name: Prepare Storybook assets
+        run: npm run prepare-storybook
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/[email protected]

.github/workflows/npm-release.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Configure Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '18.x'
+          node-version: '22.x'
           registry-url: 'https://registry.npmjs.org'
 
       # Check that the NODE_AUTH_TOKEN is valid

.github/workflows/run-ui-tests.yml

@@ -17,7 +17,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: '18.x'
+        node-version: '22.x'
     - name: Install dependencies
       run: npm ci
     - name: Build

.gitignore

@@ -4,6 +4,7 @@ dist/
 .nuxt/
 npm-debug.log*
 .eslintcache
+@kiva/kv-components/src/vue/flags/
 
 # Editor directories and files
 .idea

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/jod

@kiva/kv-components/.eslintrc.cjs

@@ -1,3 +1,5 @@
+const path = require('node:path');
+
 module.exports = {
 	env: {
 		browser: true,
@@ -7,10 +9,25 @@ module.exports = {
 		'../../.eslintrc.cjs',
 		'plugin:vue/recommended',
 	],
-	ignorePatterns: ["dist/*"],
+	ignorePatterns: [
+		'dist/*',
+		'vite.config.js',
+	],
 	plugins: [
 		'vue',
 	],
+	settings: {
+		'import/resolver': {
+			alias: {
+				map: [
+					['#components', path.resolve(__dirname, 'src/vue')],
+					['#utils', path.resolve(__dirname, 'src/utils')],
+					['#fixtures', path.resolve(__dirname, 'tests/fixtures')],
+				],
+				extensions: ['.ts', '.js', '.json', '.vue'],
+			},
+		},
+	},
 	rules: {
 		'vue/html-indent': ['error', 'tab'],
 		// disallow non-void html elements to be self-closing

@kiva/kv-components/.npmignore

@@ -0,0 +1,10 @@
+/__mocks__/
+/src/
+/tests/
+/.eslintrc.cjs
+/babel.config.cjs
+/CHANGELOG.md
+/jest.config.cjs
+/postcss.config.cjs
+/tailwind.config.js
+/vite.config.js

@kiva/kv-components/build/copyFlags.js

@@ -0,0 +1,11 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+// Copy flag icons to the Vue component directory
+async function copyFlags() {
+	const flagIconPath = import.meta.resolve('flag-icons/flags');
+	const src = flagIconPath.replace('file://', '');
+	const dest = path.resolve(import.meta.dirname, '../src/vue/flags');
+	await fs.cp(src, dest, { recursive: true });
+}
+copyFlags();

@kiva/kv-components/jest.config.cjs

@@ -26,6 +26,11 @@ module.exports = {
 		'vue',
 	],
 
+	moduleNameMapper: {
+		'^#components/(.*)$': '<rootDir>/src/vue/$1',
+		'^#utils/(.*)$': '<rootDir>/src/utils/$1',
+	},
+
 	// The test environment that will be used for testing
 	testEnvironment: 'jsdom',
 

@kiva/kv-components/package.json

@@ -5,97 +5,105 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/utils/index.cjs",
-  "module": "dist/utils/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./utils/*": "./dist/utils/*.js",
+    "./utils/*.js": "./dist/utils/*.js",
+    "./vue/*": "./dist/vue/*.js",
+    "./vue/*.js": "./dist/vue/*.js"
+  },
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@babel/eslint-parser": "^7.13.14",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@storybook/addon-a11y": "8.0.9",
-    "@storybook/addon-essentials": "8.0.9",
-    "@storybook/addon-links": "8.0.9",
-    "@storybook/addon-storysource": "8.0.9",
+    "@kiva/kv-tokens": "^2.16.1",
+    "@laynezh/vite-plugin-lib-assets": "^0.6.1",
+    "@mdi/js": "^7.4.47",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-storysource": "^8.4.7",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-viewport": "8.0.9",
-    "@storybook/builder-webpack5": "8.0.9",
-    "@storybook/core-common": "8.0.9",
-    "@storybook/theming": "8.0.9",
-    "@storybook/vue3": "8.0.9",
-    "@storybook/vue3-webpack5": "8.0.9",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/builder-webpack5": "^8.4.7",
+    "@storybook/core-common": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-webpack5": "^8.4.7",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/reactivity": "3.2.37",
     "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "@vueuse/integrations": "^9.13.0",
+    "aria-hidden": "^1.2.4",
     "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
+    "change-case": "^4.1.2",
     "chromatic": "^5.9.2",
     "css-loader": "^6.0.0",
+    "date-fns": "^2.30.0",
+    "embla-carousel": "^8.5.2",
+    "embla-carousel-autoplay": "^8.5.2",
+    "embla-carousel-fade": "^8.5.2",
     "eslint": "^7.26.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-storybook": "^0.5.6",
     "eslint-plugin-vue": "^7.9.0",
+    "flag-icons": "^7.3.0",
+    "focus-trap": "^6.9.4",
+    "import-meta-loader": "^1.1.0",
     "jest": "^27.4.3",
     "jest-axe": "^5.0.1",
+    "nanoid": "^3.3.8",
+    "numeral": "^2.0.6",
+    "popper.js": "^1.16.1",
     "postcss": "^8.4.5",
     "postcss-loader": "^7.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "storybook": "8.0.9",
+    "storybook": "^8.4.7",
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.3",
-    "tsup": "^6.7.0",
+    "vite": "^6.0.7",
+    "vite-plugin-no-bundle": "^4.0.0",
     "vue": "^3.2.37",
     "vue-loader": "^15.9.6",
     "vue-router": "^4.5.0",
     "vue-template-compiler": "2.6.14"
   },
   "scripts": {
-    "storybook": "storybook dev -p 6006 -c vue/.storybook",
-    "build-storybook": "storybook build -c vue/.storybook",
+    "storybook": "storybook dev -p 6006 -c src/vue/.storybook",
+    "build-storybook": "storybook build -c src/vue/.storybook",
     "lint": "eslint --ext .js,.vue ./",
     "test": "npm run lint && jest",
-    "build": "tsup utils/*.js --outDir dist/utils --format cjs,esm --clean && cp -R vue/ dist/components/ && cp -R data/ dist/data/"
-  },
-  "dependencies": {
-    "@kiva/kv-tokens": "^2.16.1",
-    "@mdi/js": "^7.4.47",
-    "@vueuse/integrations": "^9.13.0",
-    "aria-hidden": "^1.1.3",
-    "change-case": "^4.1.2",
-    "date-fns": "^2.30.0",
-    "embla-carousel": "^8.5.1",
-    "embla-carousel-autoplay": "^8.5.1",
-    "embla-carousel-fade": "^8.5.1",
-    "flag-icons": "^7.2.3",
-    "focus-trap": "^6.7.2",
-    "moment": "^2.29.4",
-    "nanoid": "^3.1.23",
-    "numeral": "^2.0.6",
-    "popper.js": "^1.16.1",
-    "vue-demi": "^0.14.7"
-  },
-  "exports": {
-    ".": {
-      "require": "./dist/utils/index.cjs",
-      "import": "./dist/utils/index.js"
-    },
-    "./dist/components/*.vue": {
-      "import": "./dist/components/*.vue",
-      "require": "./dist/components/*.vue"
-    },
-    "./tailwind.config.cjs": {
-      "import": "./tailwind.config.cjs",
-      "require": "./tailwind.config.cjs"
-    }
+    "prebuild": "node build/copyFlags.js",
+    "build": "vite build",
+    "postbuild": "mkdir -p ../../dist/kvui && mv -v dist/kvui/* ../../dist/kvui/"
   },
   "peerDependencies": {
-    "vue": ">=3.0.0"
-  }
+	"@kiva/kv-tokens": "2.x",
+	"@mdi/js": "7.x",
+	"@vueuse/integrations": "9.x",
+	"change-case": "4.x",
+	"date-fns": "2.x",
+	"focus-trap": "6.x",
+	"nanoid": "3.x",
+	"numeral": "2.x",
+    "vue": "3.x"
+  },
+  "bundledDependencies": [
+	"aria-hidden",
+	"embla-carousel",
+	"embla-carousel-autoplay",
+	"embla-carousel-fade",
+	"popper.js"
+  ]
 }

@kiva/kv-components/src/index.js

@@ -0,0 +1,5 @@
+// components
+export * from './vue';
+
+// utils
+export * from './utils';

@kiva/kv-components/utils/carousels.js → @kiva/kv-components/src/utils/carousels.js

@@ -6,7 +6,7 @@ import {
 	ref,
 	toRefs,
 	nextTick,
-} from 'vue-demi';
+} from 'vue';
 import EmblaCarousel from 'embla-carousel';
 import Autoplay from 'embla-carousel-autoplay';
 import Fade from 'embla-carousel-fade';

@kiva/kv-components/utils/index.js → @kiva/kv-components/src/utils/index.js

@@ -1,4 +1,5 @@
 export * from './Alea';
+export { default as Alea } from './Alea';
 export * from './attrs';
 export * from './carousels';
 export * from './expander';
@@ -8,7 +9,7 @@ export * from './loanUtils';
 export * from './mapUtils';
 export * from './printing';
 export * from './scrollLock';
-export * from './themeUtils.cjs';
+export * from './themeUtils';
 export * from './throttle';
 export * from './touchEvents';
 export * from './treemap';

@kiva/kv-components/utils/loanCard.js → @kiva/kv-components/src/utils/loanCard.js

@@ -1,7 +1,7 @@
 import {
 	computed,
 	toRefs,
-} from 'vue-demi';
+} from 'vue';
 
 import { mdiMapMarker } from '@mdi/js';
 

@kiva/kv-components/utils/themeUtils.cjs → @kiva/kv-components/src/utils/themeUtils.js

@@ -1,29 +1,22 @@
-const headerNumberCase = (str) => str
+export const headerNumberCase = (str) => str
 	.replace('h-1', 'h1')
 	.replace('h-2', 'h2')
 	.replace('h-3', 'h3')
 	.replace('h-4', 'h4')
 	.replace('h-5', 'h5');
 
-const buildTailwindClassName = (prefix, value) => {
+export const buildTailwindClassName = (prefix, value) => {
 	let name = `${prefix}-${value}`;
 	name = name.replace('-DEFAULT', '');
 	return name;
 };
 
-const kebabCase = (str) => str.split('').map((letter, idx) => (letter.toUpperCase() === letter
+export const kebabCase = (str) => str.split('').map((letter, idx) => (letter.toUpperCase() === letter
 	? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`
 	: letter)).join('');
 
-const removeObjectProperty = (object, key) => {
+export const removeObjectProperty = (object, key) => {
 	const ret = { ...object };
 	delete ret[key];
 	return ret;
 };
-
-module.exports = {
-	buildTailwindClassName,
-	headerNumberCase,
-	kebabCase,
-	removeObjectProperty,
-};

@kiva/kv-components/vue/.storybook/main.js → @kiva/kv-components/src/vue/.storybook/main.js

@@ -1,13 +1,13 @@
-const path = require('path');
-module.exports = {
+import path from 'node:path';
+
+export default {
 	stories: [
-		'../stories/Styleguide.stories.js', // show the base styleguide first
-		'../stories/**/*.stories.mdx',
+		'../stories/StyleguidePrimitives.stories.js', // show the base styleguide first
 		'../stories/**/*.stories.@(js|jsx|ts|tsx)'
 	],
 
 	staticDirs: [
-		'../../../../dist',
+		'../../../../../dist',
 	],
 
 	addons: [
@@ -46,6 +46,10 @@ module.exports = {
 			include: /node_modules/,
 			type: 'javascript/auto'
 		});
+		config.module.rules.push({
+			test: /\.js$/,
+			loader: 'import-meta-loader',
+		});
 		config.module.rules.push({
 			test: /\.postcss$/,
 			use: [
@@ -70,6 +74,9 @@ module.exports = {
 		config.resolve.alias = {
 			...config.resolve.alias,
 			'~/node_modules': path.resolve(__dirname, '../../../../node_modules/'),
+			'#components': path.resolve(__dirname, '../../vue'),
+			'#utils': path.resolve(__dirname, '../../utils'),
+			'#fixtures': path.resolve(__dirname, '../../../tests/fixtures'),
 		};
 		return config;
 	},

@kiva/kv-components/vue/.storybook/preview.js → @kiva/kv-components/src/vue/.storybook/preview.js

@@ -3,8 +3,8 @@ import {
 	setup
 } from '@storybook/vue3';
 import { addons } from '@storybook/preview-api';
-import KvThemeProvider from '../KvThemeProvider.vue';
-import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
+import KvThemeProvider from '#components/KvThemeProvider';
+import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors';
 
 setup((app) => {
 	// Mock analytics