refactor: uninstall primevue, use radix-vue instead (#8)

* chore: bump deps

* refactor: uninstall primevue, use radix-vue instead

* fix: lint and test

.vscode/settings.json

@@ -78,4 +78,5 @@
   "i18n-ally.localesPaths": "./src/i18n",
   "i18n-ally.enabledFrameworks": ["vue"],
   "veco.packager.versionTarget": "latest",
+  "typescript.tsdk": "node_modules/typescript/lib",
 }

README.md

@@ -22,7 +22,7 @@ Feel free to explore the codebase to get the most value out of the repo.
 
 ## Table of Contents
 
-- [Application Overview](https://github.com/rifandani/vue-app/tree/main/docs/application-verview.md)
+- [Application Overview](https://github.com/rifandani/vue-app/tree/main/docs/application-overview.md)
 - [](https://github.com/rifandani/vue-app/tree/main/docs/.md)
 
 ## License

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "src/main.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "#shared/components",
+    "utils": "./utils"
+  }
+}

docs/application-overview.md

@@ -2,20 +2,20 @@
 
 The application built with:
 
-- `vite` + `typescript` + `eslint` + `prettier` -> development productivity
+- `vite` + `typescript` + `eslint` -> development productivity
 - `vitest` + `@testing-library/vue` -> unit test, integration test, coverage
 - `msw` -> browser and server mocking
-- `tailwindcss` + `tailwind-merge` -> easy styling
+- `tailwindcss` + `tailwind-merge` + `class-variance-authority` -> easy styling
+- `radix-vue` + `vue-sonner` + `vaul-vue` + `v-calendar` + `@tanstack/vue-table` -> UI component library
 - `axios` + `@tanstack/vue-query` -> server state management + data fetching
 - `zod` -> runtime schema validation
 - `@iconify/vue` -> icon on demand
-- `primevue` -> styled/unstyled, responsive, accessible, and feature-rich UI component library
 - `vee-validate` + `@vee-validate/zod` -> form management
 - `pinia` -> performant global state management
 - `type-fest` -> useful type helpers
 - `vue-router` -> client routing
 - `@vueuse/core` -> useful composables
-- `typesafe-i18n` -> typesafe i18n
+- `vue-i18n` -> i18n
 
 [Demo App](https://vue-app-rifandani.vercel.app)
 
@@ -76,18 +76,3 @@ $ pnpm build
 
 For now only supports deployment to Vercel.
 Check out `vercel.json` file fo further details.
-
-## Type Support for `.vue` Imports in TS (from the `create-vue` template)
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

env.d.ts

@@ -5,7 +5,6 @@
 /// <reference lib="webworker" />
 
 import type { SetupWorker } from 'msw'
-import type { RippleOptions } from 'primevue/ripple'
 import type DarkModeSwitch from './src/lib/wc/dark-mode-switch.ce.vue'
 import type MyCounter from './src/lib/wc/my-counter.ce.vue'
 
@@ -38,10 +37,10 @@ declare module 'vue' {
   // }
 }
 
-declare module '@vue/runtime-core' {
-  export interface ComponentCustomProperties {
-    vRipple: RippleOptions
-    // vRipple: typeof Ripple
-    // vStyleclass: StyleClassOptions
-  }
-}
+// declare module '@vue/runtime-core' {
+//   export interface ComponentCustomProperties {
+//     vRipple: RippleOptions
+//     vRipple: typeof Ripple
+//     vStyleclass: StyleClassOptions
+//   }
+// }

eslint.config.js

@@ -21,6 +21,7 @@ export default antfu(
       'src/i18n/*.ts',
       'commitlint.config.js',
       'commitlint.config.cjs',
+      'tailwind.config.cjs',
     ],
     // typescript: {
     //   overrides: {

index.html

@@ -4,11 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue Template</title>
-    <link
-      id="theme-link"
-      rel="stylesheet"
-      href="/themes/lara-light-teal/theme.css"
-    />
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
     <link
@@ -41,7 +36,7 @@
       </defs>
     </svg>
 
-    <div id="app"></div>
+    <div id="app" class="min-h-screen"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -2,7 +2,7 @@
   "name": "vue-app",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].4",
   "description": "Bulletproof Vue 3 SPA Template",
   "author": "Tri Rizeki Rifandani",
   "license": "MIT",
@@ -51,68 +51,72 @@
   },
   "dependencies": {
     "@rifandani/nxact-yutiriti": "^1.2.2",
-    "@tanstack/vue-query": "^5.18.1",
-    "@tanstack/vue-query-devtools": "^5.18.1",
+    "@tanstack/vue-query": "^5.25.0",
+    "@tanstack/vue-query-devtools": "^5.25.0",
+    "@tanstack/vue-table": "^8.13.2",
     "@vee-validate/zod": "^4.12.5",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.9.0",
     "axios": "^1.6.7",
+    "class-variance-authority": "^0.7.0",
     "pinia": "^2.1.7",
-    "primevue": "^3.47.2",
+    "radix-vue": "^1.5.0",
     "tailwind-merge": "^2.2.1",
-    "type-fest": "^4.10.2",
+    "type-fest": "^4.11.1",
+    "v-calendar": "^3.1.2",
+    "vaul-vue": "^0.1.0",
     "vee-validate": "^4.12.5",
-    "vue": "^3.4.15",
-    "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.10.1",
+    "vue-router": "^4.3.0",
+    "vue-sonner": "^1.1.2",
     "zod": "^3.22.4",
-    "zod-validation-error": "^3.0.0"
+    "zod-validation-error": "^3.0.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.4",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@antfu/eslint-config": "^2.8.0",
+    "@commitlint/cli": "^19.0.3",
+    "@commitlint/config-conventional": "^19.0.3",
     "@iconify/vue": "^4.1.1",
     "@rollup/plugin-replace": "^5.0.5",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/eslint-plugin-query": "^5.18.1",
-    "@testing-library/jest-dom": "^6.4.1",
+    "@tanstack/eslint-plugin-query": "^5.20.1",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/user-event": "^14.5.2",
-    "@testing-library/vue": "^8.0.1",
+    "@testing-library/vue": "^8.0.2",
     "@tsconfig/node18": "^18.2.2",
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.11.16",
-    "@vite-pwa/assets-generator": "^0.2.3",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitest/coverage-istanbul": "^1.2.2",
-    "@vitest/ui": "^1.2.2",
+    "@types/node": "^20.11.25",
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-istanbul": "^1.3.1",
+    "@vitest/ui": "^1.3.1",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
     "eslint-plugin-format": "^0.1.0",
     "eslint-plugin-jest-dom": "^5.1.0",
-    "eslint-plugin-tailwindcss": "^3.14.1",
+    "eslint-plugin-tailwindcss": "^3.14.3",
     "eslint-plugin-testing-library": "^6.2.0",
     "eslint-plugin-vuejs-accessibility": "^2.2.1",
     "https-localhost": "^4.7.1",
-    "husky": "^9.0.10",
+    "husky": "^9.0.11",
     "jsdom": "^24.0.0",
-    "msw": "^2.1.5",
+    "msw": "^2.2.2",
     "npm-run-all2": "^6.1.2",
-    "pnpm": "^8.15.1",
-    "postcss": "^8.4.33",
+    "pnpm": "^8.15.4",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.12.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",
-    "typescript": " ~5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-pwa": "^0.17.5",
+    "typescript": "~5.4.2",
+    "vite": "^5.1.5",
+    "vite-plugin-pwa": "^0.19.2",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2",
-    "vue-tsc": "^1.8.27",
+    "vitest": "^1.3.1",
+    "vue-tsc": "^2.0.5",
     "workbox-core": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-routing": "^7.0.0",