Skip to content

Commit c99dc59

Browse files
shairezshairez
committed
changed to qwik ui tooltip (for now it's 0.5.0, we'll upgrade later)
1 parent ecbcb28 commit c99dc59

8 files changed

Lines changed: 97 additions & 140 deletions

File tree

‎.changeset/tricky-squids-relax.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@builder.io/qwik': patch
3+
---
4+
5+
FIX: q-manifest upload to insights

‎packages/insights/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@builder.io/vite-plugin-macro": "0.0.7",
2020
"@eslint/js": "9.25.1",
2121
"@netlify/edge-functions": "2.10.0",
22+
"@qwik-ui/headless": "0.5.0",
2223
"@tailwindcss/vite": "4.0.12",
2324
"@types/density-clustering": "1.3.3",
2425
"@types/node": "20.14.11",

‎packages/insights/src/components/popup-manager/index.tsx‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎packages/insights/src/components/symbol-tile/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { server$, useLocation } from '@builder.io/qwik-city';
33
import { and, eq } from 'drizzle-orm';
44
import { getDB, symbolDetailTable } from '~/db';
55
import { SymbolIcon } from '../icons/symbol';
6-
import { type PopupEvent } from '../popup-manager';
6+
import { TooltipWrapper } from '../tooltip';
77

88
export const SymbolPopup = component$<{ symbolHash: string }>(({ symbolHash }) => (
99
<div class="min-w-[500px] max-w-[75vw]">
@@ -89,10 +89,12 @@ export const SymbolSource = component$<{ symbolHash: string }>(({ symbolHash })
8989

9090
export const SymbolTile = component$<{ symbol: string }>(({ symbol }) => {
9191
return (
92-
<code onPopup$={(e: PopupEvent) => e.detail.show(SymbolPopup, { symbolHash: symbol })}>
93-
<SymbolIcon />
94-
<span class="ml-1">{symbol}</span>
95-
</code>
92+
<TooltipWrapper content={SymbolPopup} contentProps={{ symbolHash: symbol }} placement="right">
93+
<code>
94+
<SymbolIcon />
95+
<span class="ml-1">{symbol}</span>
96+
</code>
97+
</TooltipWrapper>
9698
);
9799
});
98100

‎packages/insights/src/components/tooltip/index.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { component$, Slot, type Component } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
interface TooltipWrapperProps {
5+
content: Component<any>;
6+
contentProps?: any;
7+
placement?: 'top' | 'right' | 'bottom' | 'left';
8+
gutter?: number;
9+
}
10+
11+
export const TooltipWrapper = component$<TooltipWrapperProps>(
12+
({ content: ContentComponent, contentProps, placement = 'top', gutter = 8 }) => {
13+
return (
14+
<Tooltip.Root hover floating={placement} gutter={gutter} flip>
15+
<Tooltip.Trigger>
16+
<Slot />
17+
</Tooltip.Trigger>
18+
<Tooltip.Content class="tooltip-panel bg-white border border-slate-200 shadow-lg rounded-md p-0 z-50 max-w-[75vw] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95">
19+
<ContentComponent {...contentProps} />
20+
</Tooltip.Content>
21+
</Tooltip.Root>
22+
);
23+
}
24+
);

‎packages/insights/src/routes/app/[publicApiKey]/errors/index.tsx‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { type ReadonlySignal, component$ } from '@builder.io/qwik';
1+
import { component$, type ReadonlySignal } from '@builder.io/qwik';
22
import { routeLoader$ } from '@builder.io/qwik-city';
3-
import { getDB, errorTable, type ErrorRow } from '~/db';
43
import { eq, sql } from 'drizzle-orm';
54
import { ErrorIcon } from '~/components/icons/error';
6-
import { type PopupEvent } from '~/components/popup-manager';
5+
import { TooltipWrapper } from '~/components/tooltip';
6+
import { errorTable, getDB, type ErrorRow } from '~/db';
77

88
export const useErrors = routeLoader$(async ({ params }) => {
99
const db = getDB();
@@ -41,23 +41,21 @@ export default component$(() => {
4141
</thead>
4242
<tbody>
4343
{errors.value.map((error) => (
44-
<tr
45-
key={error.id}
46-
onPopup$={(e: PopupEvent) => e.detail.show(Popup, error)}
47-
class="border-b border-slate-200 text-xs"
48-
>
49-
<td scope="col" class="px-6 py-3 bg-slate-50 whitespace-nowrap">
50-
{new Date(error.timestamp).toLocaleString()}
51-
</td>
52-
<td scope="col" class="px-6 py-3 max-w-lg break-words">
53-
<a href={error.url} target="_blank">
54-
{error.url}
55-
</a>
56-
</td>
57-
<td scope="col" class="px-6 py-3 bg-slate-50">
58-
{error.message}
59-
</td>
60-
</tr>
44+
<TooltipWrapper key={error.id} content={Popup} contentProps={error} placement="left">
45+
<tr class="border-b border-slate-200 text-xs hover:bg-slate-50 cursor-pointer">
46+
<td scope="col" class="px-6 py-3 bg-slate-50 whitespace-nowrap">
47+
{new Date(error.timestamp).toLocaleString()}
48+
</td>
49+
<td scope="col" class="px-6 py-3 max-w-lg break-words">
50+
<a href={error.url} target="_blank">
51+
{error.url}
52+
</a>
53+
</td>
54+
<td scope="col" class="px-6 py-3 bg-slate-50">
55+
{error.message}
56+
</td>
57+
</tr>
58+
</TooltipWrapper>
6159
))}
6260
</tbody>
6361
</table>

‎packages/insights/src/routes/layout.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Slot, component$ } from '@builder.io/qwik';
22

3-
import { PopupManager } from '~/components/popup-manager';
4-
import { routeLoader$ } from '@builder.io/qwik-city';
53
import type { GetSessionResult } from '@auth/qwik';
4+
import { routeLoader$ } from '@builder.io/qwik-city';
65

76
export type SessionData = Awaited<GetSessionResult>['data'];
87

@@ -16,9 +15,5 @@ export const useUserSession = routeLoader$(({ sharedMap, redirect, url }) => {
1615
});
1716

1817
export default component$(() => {
19-
return (
20-
<PopupManager>
21-
<Slot />
22-
</PopupManager>
23-
);
18+
return <Slot />;
2419
});

‎pnpm-lock.yaml‎

Lines changed: 40 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)