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
exceptionless · Oct 30, 2024 · 5e3ab1d · 5e3ab1d
1 parent b5f73ef
commit 5e3ab1d
Show file tree

Hide file tree

Showing 159 changed files with 2,403 additions and 2,390 deletions.
diff --git a/.github/workflows/build.yaml b/.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

diff --git a/src/Exceptionless.Web/ClientApp/.prettierignore b/src/Exceptionless.Web/ClientApp/.prettierignore
@@ -2,3 +2,4 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+src/lib/features/shared/components/ui
diff --git a/src/Exceptionless.Web/ClientApp/README.md b/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
 ```
diff --git a/src/Exceptionless.Web/ClientApp/components.json b/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"
 }
diff --git a/src/Exceptionless.Web/ClientApp/eslint.config.js b/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'

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.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"
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte
@@ -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>

diff --git a/...xceptionless.Web/ClientApp/src/lib/features/events/components/cards/pie-chart-card.svelte b/...xceptionless.Web/ClientApp/src/lib/features/events/components/cards/pie-chart-card.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">

diff --git a/...ceptionless.Web/ClientApp/src/lib/features/events/components/table/EventsDataTable.svelte b/...ceptionless.Web/ClientApp/src/lib/features/events/components/table/EventsDataTable.svelte
@@ -30,7 +30,7 @@
     let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
 
     $effect(() => {
-        limit = context.limit;
+        limit = Number(context.limit);
         loadData();
     });
 

diff --git a/...less.Web/ClientApp/src/lib/features/events/components/table/EventsTailLogDataTable.svelte b/...less.Web/ClientApp/src/lib/features/events/components/table/EventsTailLogDataTable.svelte
@@ -36,7 +36,7 @@
     let before: string | undefined;
 
     $effect(() => {
-        limit = context.limit;
+        limit = Number(context.limit);
         loadData(true);
     });
 

diff --git a/...b/ClientApp/src/lib/features/events/components/table/EventsUserIdentitySummaryCell.svelte b/...b/ClientApp/src/lib/features/events/components/table/EventsUserIdentitySummaryCell.svelte
@@ -16,7 +16,7 @@
         {name}
     </abbr>
 {:else if name || identity}
-    <span class="line-clamp-1">
+    <abbr class="line-clamp-1" title={name || identity}>
         {name || identity}
-    </span>
+    </abbr>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts
@@ -237,12 +237,12 @@ export function getTableContext<TSummaryModel extends SummaryModel<SummaryTempla
         set data(value) {
             data = value;
         },
-        get limit() {
-            return parameters.limit ?? DEFAULT_LIMIT;
+        get limit(): string {
+            return `${parameters.limit ?? DEFAULT_LIMIT}`;
         },
-        set limit(value) {
-            parameters.limit = value;
-            setPagination({ pageIndex: 0, pageSize: value });
+        set limit(value: string) {
+            parameters.limit = Number(value);
+            setPagination({ pageIndex: 0, pageSize: Number(value) });
         },
         get loading() {
             return loading;

diff --git a/...ceptionless.Web/ClientApp/src/lib/features/shared/components/CopyToClipboardButton.svelte b/...ceptionless.Web/ClientApp/src/lib/features/shared/components/CopyToClipboardButton.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <div>
-    <Button on:click={copyToClipboard} {size} {title}>
+    <Button onclick={copyToClipboard} {size} {title}>
         {#if children}
             {@render children()}
         {:else}

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DarkModeButton.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DarkModeButton.svelte
@@ -12,7 +12,7 @@
 
 <ContextMenu.Root>
     <ContextMenu.Trigger>
-        <Button on:click={toggleMode} size="icon" title="Toggle dark mode" variant="outline">
+        <Button onclick={toggleMode} size="icon" title="Toggle dark mode" variant="outline">
             <IconWhiteBalanceSunny class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <IconMoonWaningCrescent class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DateRangeDropdown.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DateRangeDropdown.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import type { Selected } from 'bits-ui';
-
     import * as Select from '$comp/ui/select';
 
     interface Props {
@@ -18,18 +16,11 @@
     ];
 
     let selected = $derived(items.find((item) => item.value === value) || items[items.length - 1]);
-
-    function onSelectedChange(selected: Selected<string> | undefined) {
-        const newValue = selected?.value ?? '';
-        if (newValue !== value) {
-            value = newValue;
-        }
-    }
 </script>
 
-<Select.Root {items} {onSelectedChange} {selected}>
+<Select.Root type="single" {items} bind:value>
     <Select.Trigger class="w-[135px]">
-        <Select.Value placeholder="" />
+        {selected.label}
     </Select.Trigger>
     <Select.Content>
         {#each items as item (item.label)}

diff --git a/...onless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte b/...onless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte
@@ -61,7 +61,7 @@
             {#each table.getRowModel().rows as row (row.id)}
                 <Table.Row>
                     {#each row.getVisibleCells() as cell (cell.id)}
-                        <Table.Cell class={getCellClass(cell)} on:click={() => onCellClick(cell)}>
+                        <Table.Cell class={getCellClass(cell)} onclick={() => onCellClick(cell)}>
                             <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
                         </Table.Cell>
                     {/each}

diff --git a/...b/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte b/...b/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte
@@ -39,23 +39,25 @@
 {#if column.getCanSort()}
     <div class={cn('flex items-center', className)}>
         <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild let:builder>
-                <Button builders={[builder]} class="-ml-3 h-8 data-[state=open]:bg-accent" variant="ghost">
-                    {#if children}
-                        {@render children()}
-                    {/if}
-                    {#if column.getIsSorted() === 'desc'}
-                        <IconArrowDownward class="ml-2 h-4 w-4" />
-                    {:else if column.getIsSorted() === 'asc'}
-                        <IconArrowUpward class="ml-2 h-4 w-4" />
-                    {:else}
-                        <IconUnfoldMore class="ml-2 h-4 w-4" />
-                    {/if}
-                </Button>
+            <DropdownMenu.Trigger>
+                {#snippet children()}
+                    <Button class="-ml-3 h-8 data-[state=open]:bg-accent" variant="ghost">
+                        {#if children}
+                            {@render children()}
+                        {/if}
+                        {#if column.getIsSorted() === 'desc'}
+                            <IconArrowDownward class="ml-2 h-4 w-4" />
+                        {:else if column.getIsSorted() === 'asc'}
+                            <IconArrowUpward class="ml-2 h-4 w-4" />
+                        {:else}
+                            <IconUnfoldMore class="ml-2 h-4 w-4" />
+                        {/if}
+                    </Button>
+                {/snippet}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
-                <DropdownMenu.Item on:click={handleAscSort}>Asc</DropdownMenu.Item>
-                <DropdownMenu.Item on:click={handleDescSort}>Desc</DropdownMenu.Item>
+                <DropdownMenu.Item onclick={handleAscSort}>Asc</DropdownMenu.Item>
+                <DropdownMenu.Item onclick={handleDescSort}>Desc</DropdownMenu.Item>
             </DropdownMenu.Content>
         </DropdownMenu.Root>
     </div>

diff --git a/...s.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-size.svelte b/...s.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-size.svelte
@@ -4,44 +4,36 @@
 
 <script generics="TData" lang="ts">
     import type { Table } from '@tanstack/svelte-table';
-    import type { Selected } from 'bits-ui';
 
     import * as Select from '$comp/ui/select';
 
     interface Props {
-        defaultValue?: number;
         table: Table<TData>;
-        value: number;
+        value: string;
     }
 
-    let { defaultValue = 10, table, value = $bindable() }: Props = $props();
+    let { table, value = $bindable() }: Props = $props();
 
     const items = [
-        { label: '5', value: 5 },
-        { label: '10', value: 10 },
-        { label: '20', value: 20 },
-        { label: '30', value: 30 },
-        { label: '40', value: 40 },
-        { label: '50', value: 50 }
+        { label: '5', value: '5' },
+        { label: '10', value: '10' },
+        { label: '20', value: '20' },
+        { label: '30', value: '30' },
+        { label: '40', value: '40' },
+        { label: '50', value: '50' }
     ];
 
-    let selected = $state(items.find((item) => item.value === value) || items[0]);
-    function onSelectedChange(selected: Selected<number> | undefined) {
-        const newValue = selected?.value ?? defaultValue;
-        if (newValue === value) {
-            return;
-        }
-
-        value = newValue;
-        table.setPageSize(newValue);
+    let selected = $derived(items.find((item) => item.value === value) || items[0]);
+    function onValueChange(newValue: string) {
+        table.setPageSize(Number(newValue));
     }
 </script>
 
 <div class="flex items-center space-x-2">
     <p class="text-sm font-medium">Rows per page</p>
-    <Select.Root bind:selected {items} {onSelectedChange}>
+    <Select.Root type="single" {items} bind:value {onValueChange}>
         <Select.Trigger class="h-8 w-[70px]">
-            <Select.Value placeholder="Select page size" />
+            {selected.label}
         </Select.Trigger>
         <Select.Content>
             {#each items as item (item.value)}

diff --git a/....Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte b/....Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
@@ -35,16 +35,16 @@
         </div>
         <div class="flex items-center space-x-2">
             {#if table.getState().pagination.pageIndex > 1}
-                <Button class="hidden h-8 w-8 p-0 lg:flex" on:click={() => table.resetPageIndex(true)} variant="outline">
+                <Button class="hidden h-8 w-8 p-0 lg:flex" onclick={() => table.resetPageIndex(true)} variant="outline">
                     <span class="sr-only">Go to first page</span>
                     <IconChevronDoubleLeft class="mr-2 h-4 w-4" />
                 </Button>
             {/if}
-            <Button class="h-8 w-8 p-0" disabled={!table.getCanPreviousPage()} on:click={() => table.previousPage()} variant="outline">
+            <Button class="h-8 w-8 p-0" disabled={!table.getCanPreviousPage()} onclick={() => table.previousPage()} variant="outline">
                 <span class="sr-only">Go to previous page</span>
                 <IconChevronLeft class="h-4 w-4" />
             </Button>
-            <Button class="h-8 w-8 p-0" disabled={!table.getCanNextPage()} on:click={() => table.nextPage()} variant="outline">
+            <Button class="h-8 w-8 p-0" disabled={!table.getCanNextPage()} onclick={() => table.nextPage()} variant="outline">
                 <span class="sr-only">Go to next page</span>
                 <IconChevronRight class="h-4 w-4" />
             </Button>

diff --git a/...eb/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte b/...eb/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte
@@ -17,18 +17,20 @@
 </script>
 
 <DropdownMenu.Root>
-    <DropdownMenu.Trigger asChild let:builder>
-        <Button builders={[builder]} class="h-8" size="sm" variant="outline">
-            <IconViewColumn class="mr-2 h-4 w-4" />
-            View
-        </Button>
+    <DropdownMenu.Trigger>
+        {#snippet children()}
+            <Button class="h-8" size="sm" variant="outline">
+                <IconViewColumn class="mr-2 h-4 w-4" />
+                View
+            </Button>
+        {/snippet}
     </DropdownMenu.Trigger>
     <DropdownMenu.Content>
         <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
         <DropdownMenu.Separator />
         {#each table.getAllLeafColumns() as column (column.id)}
             {#if column.getCanHide()}
-                <DropdownMenu.CheckboxItem checked={column.getIsVisible()} on:click={() => column.toggleVisibility()}>
+                <DropdownMenu.CheckboxItem checked={column.getIsVisible()} onclick={() => column.toggleVisibility()}>
                     {column.columnDef.header}
                 </DropdownMenu.CheckboxItem>
             {/if}
-Original file line number
+Diff line change
@@ Expand Up / @@ -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'
@@ Expand Down @@