upgrade to shadcn@next (#1730)

* Updated deps

* Updated deps

* Updated shadui to next

* Ran npx svelte-migrate svelte-5

* Updated config

* Ran formatting

* More svelte 5 changes

* Fixed shadcn next issues

* fix build

* Set the full path to the package lock as the working directory doesn't seem to be picked up

Author: niemyjski

.github/workflows/build.yaml

@@ -137,11 +137,11 @@ jobs:
         id: cache-node-modules
         with:
           path: src/Exceptionless.Web/ClientApp/node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          key: node-modules-${{ hashFiles('src/Exceptionless.Web/ClientApp/package-lock.json') }}
 
       - name: Install Npm Packages
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm ci --force
+        run: npm ci
 
       - name: Lint Client
         run: npm run lint

src/Exceptionless.Web/ClientApp/.prettierignore

@@ -2,3 +2,4 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+src/lib/features/shared/components/ui

src/Exceptionless.Web/ClientApp/README.md

@@ -42,5 +42,5 @@ You can preview the production build with `npm run preview`.
 You can upgrade [shadcn-svelte components](https://www.shadcn-svelte.com/) by running the following command
 
 ```bash
-npx shadcn-svelte@latest update
+npx shadcn-svelte@next update
 ```

src/Exceptionless.Web/ClientApp/components.json

@@ -8,6 +8,10 @@
     },
     "aliases": {
         "components": "$comp",
-        "utils": "$lib/utils"
-    }
+        "utils": "$lib/utils",
+        "ui": "$lib/features/shared/components/ui",
+        "hooks": "$lib/hooks"
+    },
+    "typescript": true,
+    "registry": "https://next.shadcn-svelte.com/registry"
 }

src/Exceptionless.Web/ClientApp/eslint.config.js

@@ -32,7 +32,6 @@ export default tseslint.config(
     {
         ignores: ['build/', '.svelte-kit/', 'dist/', 'src/lib/generated/api.ts', 'src/lib/features/shared/components/ui/']
     },
-
     {
         rules: {
             'perfectionist/sort-svelte-attributes': 'off'

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -23,12 +23,12 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@playwright/test": "^1.48.1",
-        "@sveltejs/adapter-static": "^3.0.5",
-        "@sveltejs/kit": "^2.7.2",
+        "@playwright/test": "^1.48.2",
+        "@sveltejs/adapter-static": "^3.0.6",
+        "@sveltejs/kit": "^2.7.3",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^22.7.9",
+        "@types/node": "^22.8.2",
         "@types/throttle-debounce": "^5.0.2",
         "autoprefixer": "^10.4.20",
         "cross-env": "^7.0.3",
@@ -41,14 +41,14 @@
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.7",
         "prettier-plugin-tailwindcss": "^0.6.8",
-        "svelte": "^5.1.0",
+        "svelte": "^5.1.4",
         "svelte-check": "^4.0.5",
         "swagger-typescript-api": "^13.0.22",
         "tslib": "^2.8.0",
         "typescript": "^5.6.3",
-        "typescript-eslint": "^8.11.0",
+        "typescript-eslint": "^8.12.2",
         "vite": "^5.4.10",
-        "vitest": "^2.1.3"
+        "vitest": "^2.1.4"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
@@ -58,16 +58,14 @@
         "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@ccce0b8",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^0.21.16",
+        "bits-ui": "^1.0.0-next.32",
         "class-validator": "^0.14.1",
         "clsx": "^2.1.1",
-        "cmdk-sv": "^0.0.18",
-        "formsnap": "^1.0.1",
+        "formsnap": "^2.0.0-next.0",
         "mode-watcher": "^0.4.1",
         "oidc-client-ts": "^3.1.0",
         "pretty-ms": "^9.1.0",
         "runed": "^0.15.3",
-        "svelte-persisted-store": "^0.11.0",
         "svelte-sonner": "^0.3.28",
         "svelte-time": "^0.9.0",
         "sveltekit-superforms": "^2.20.0",
@@ -77,8 +75,5 @@
         "throttle-debounce": "^5.0.2",
         "unplugin-icons": "^0.19.3"
     },
-    "overrides": {
-        "@typeschema/class-validator": "^0.3.0"
-    },
     "type": "module"
 }

src/Exceptionless.Web/ClientApp/package.json

@@ -63,15 +63,15 @@
     <div class="flex justify-between">
         <H4 class="mb-2">{title}</H4>
         <div class="flex justify-end gap-x-1">
-            <Button on:click={onToggleView} variant="outline">Toggle View</Button>
+            <Button onclick={onToggleView} variant="outline">Toggle View</Button>
 
             <CopyToClipboardButton value={json}></CopyToClipboardButton>
 
             {#if canPromote}
                 {#if !isPromoted}
-                    <Button on:click={async () => await promote(title)} size="icon" title="Promote to Tab"><ArrowUpIcon /></Button>
+                    <Button onclick={async () => await promote(title)} size="icon" title="Promote to Tab"><ArrowUpIcon /></Button>
                 {:else}
-                    <Button on:click={async () => await demote(title)} size="icon" title="Demote Tab"><ArrowDownIcon /></Button>
+                    <Button onclick={async () => await demote(title)} size="icon" title="Demote Tab"><ArrowDownIcon /></Button>
                 {/if}
             {/if}
         </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <Card.Root>
-    <Card.Title class="p-6 pb-4 text-2xl" tag="h2">{title}</Card.Title>
+    <Card.Title class="p-6 pb-0 text-2xl" level={2}>{title}</Card.Title>
     <Card.Content>
         <div class="w-[200px] border">
             <svg viewBox="0 0 20 20">

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/cards/pie-chart-card.svelte

@@ -30,7 +30,7 @@
     let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
 
     $effect(() => {
-        limit = context.limit;
+        limit = Number(context.limit);
         loadData();
     });