Skip to content

Commit 2a72e6f

Browse files
nedtwiggnedtwigg
committed
Add a playground for the table with hotreload.
1 parent 1274c11 commit 2a72e6f

File tree

10 files changed

+238
-4
lines changed

10 files changed

+238
-4
lines changed

‎browser-extension/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"dev:firefox": "wxt -b firefox",
6060
"postinstall": "wxt prepare",
6161
"test": "vitest run",
62+
"playground": "vite --config vite.playground.config.ts",
6263
"har:record": "tsx tests/har-record.ts",
6364
"har:view": "tsx tests/har-view.ts"
6465
},

‎browser-extension/src/lib/enhancers/github/githubIssueAddComment.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { logger } from '@/lib/logger'
55
import { modifyDOM } from '../modifyDOM'
66
import { githubHighlighter } from './githubHighlighter'
77

8-
interface GitHubIssueAddCommentSpot extends CommentSpot {
8+
export interface GitHubIssueAddCommentSpot extends CommentSpot {
99
type: 'GH_ISSUE_ADD_COMMENT'
1010
domain: string
1111
slug: string // owner/repo

‎browser-extension/src/lib/enhancers/github/githubPRAddComment.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { logger } from '@/lib/logger'
55
import { modifyDOM } from '../modifyDOM'
66
import { githubHighlighter } from './githubHighlighter'
77

8-
interface GitHubPRAddCommentSpot extends CommentSpot {
8+
export interface GitHubPRAddCommentSpot extends CommentSpot {
99
type: 'GH_PR_ADD_COMMENT' // Override to narrow from string to specific union
1010
domain: string
1111
slug: string // owner/repo

‎browser-extension/tests/lib/enhancers/github.test.ts‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ describe('github', () => {
1111
const textareas = document.querySelectorAll('textarea')
1212
expect(textareas.length).toBe(2)
1313
expect(enhancers.tryToEnhance(textareas[0]!)).toBeNull()
14-
expect(enhancers.tryToEnhance(textareas[1]!)?.spot).toMatchInlineSnapshot(`
14+
const enhancedTextarea = enhancers.tryToEnhance(textareas[1]!)
15+
expect(enhancedTextarea?.spot).toMatchInlineSnapshot(`
1516
{
1617
"domain": "github.com",
1718
"number": 517,
@@ -20,12 +21,28 @@ describe('github', () => {
2021
"unique_key": "github.com:diffplug/selfie:517",
2122
}
2223
`)
24+
expect(enhancedTextarea?.enhancer.tableRow(enhancedTextarea.spot)).toMatchInlineSnapshot(`
25+
<span>
26+
<span
27+
className="font-mono text-sm text-muted-foreground"
28+
>
29+
diffplug/selfie
30+
</span>
31+
<span
32+
className="ml-2 font-medium"
33+
>
34+
PR #
35+
517
36+
</span>
37+
</span>
38+
`)
2339
})
2440
usingHar('gh_issue').it('should create the correct spot object', async () => {
2541
const enhancers = new EnhancerRegistry()
2642
const textareas = document.querySelectorAll('textarea')
2743
expect(textareas.length).toBe(1)
28-
expect(enhancers.tryToEnhance(textareas[0]!)?.spot).toMatchInlineSnapshot(`
44+
const enhancedTextarea = enhancers.tryToEnhance(textareas[0]!)
45+
expect(enhancedTextarea?.spot).toMatchInlineSnapshot(`
2946
{
3047
"domain": "github.com",
3148
"number": 523,
@@ -34,5 +51,21 @@ describe('github', () => {
3451
"unique_key": "github.com:diffplug/selfie:523",
3552
}
3653
`)
54+
// Test the tableRow method
55+
expect(enhancedTextarea?.enhancer.tableRow(enhancedTextarea.spot)).toMatchInlineSnapshot(`
56+
<span>
57+
<span
58+
className="font-mono text-sm text-muted-foreground"
59+
>
60+
diffplug/selfie
61+
</span>
62+
<span
63+
className="ml-2 font-medium"
64+
>
65+
Issue #
66+
523
67+
</span>
68+
</span>
69+
`)
3770
})
3871
})

‎browser-extension/tests/playground/TablePlayground.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {
2+
Table,
3+
TableBody,
4+
TableCell,
5+
TableHead,
6+
TableHeader,
7+
TableRow,
8+
} from '@/components/ui/table'
9+
import type { CommentState } from '@/entrypoints/background'
10+
import { cn } from '@/lib/utils'
11+
import { enhancerRegistry, sampleSpots } from './mockData'
12+
13+
interface SpotRowProps {
14+
commentState: CommentState
15+
onClick: () => void
16+
}
17+
18+
function SpotRow({ commentState, onClick }: SpotRowProps) {
19+
const enhancer = enhancerRegistry.enhancerFor(commentState.spot)
20+
21+
if (!enhancer) {
22+
return (
23+
<TableRow className='cursor-pointer' onClick={onClick}>
24+
<TableCell className='p-3'>
25+
<div className='text-red-500'>Unknown spot type: {commentState.spot.type}</div>
26+
</TableCell>
27+
</TableRow>
28+
)
29+
}
30+
31+
return (
32+
<TableRow
33+
className={cn(
34+
'cursor-pointer transition-colors hover:bg-slate-50',
35+
'border-b border-slate-200',
36+
)}
37+
onClick={onClick}
38+
>
39+
<TableCell className='p-4'>{enhancer.tableRow(commentState.spot)}</TableCell>
40+
</TableRow>
41+
)
42+
}
43+
44+
export function TablePlayground() {
45+
const handleSpotClick = (spot: CommentState) => {
46+
alert(`Clicked: ${spot.spot.type}\nTab: ${spot.tab.tabId}`)
47+
}
48+
49+
return (
50+
<div className='bg-white rounded-lg shadow-sm border border-slate-200'>
51+
<div className='p-6 border-b border-slate-200'>
52+
<h2 className='text-xl font-semibold text-slate-900'>Comment Spots</h2>
53+
<p className='text-slate-600 text-sm mt-1'>Click on any row to simulate tab switching</p>
54+
</div>
55+
56+
<Table>
57+
<TableHeader>
58+
<TableRow>
59+
<TableHead className='p-4 font-medium text-slate-700'>Spot Details</TableHead>
60+
</TableRow>
61+
</TableHeader>
62+
<TableBody>
63+
{sampleSpots.map((spot) => (
64+
<SpotRow
65+
key={spot.spot.unique_key}
66+
commentState={spot}
67+
onClick={() => handleSpotClick(spot)}
68+
/>
69+
))}
70+
</TableBody>
71+
</Table>
72+
</div>
73+
)
74+
}

‎browser-extension/tests/playground/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Table Playground</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="./main.tsx"></script>
12+
</body>
13+
</html>

‎browser-extension/tests/playground/main.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { createRoot } from 'react-dom/client'
2+
import './style.css'
3+
import { TablePlayground } from './TablePlayground'
4+
5+
const root = createRoot(document.getElementById('root')!)
6+
root.render(
7+
<div className='min-h-screen bg-slate-100'>
8+
<div className='container mx-auto px-6 py-8 max-w-4xl'>
9+
<div className='bg-white p-6 rounded-lg shadow-sm border border-slate-200 mb-6'>
10+
<h1 className='text-3xl font-bold text-slate-900 mb-2'>Table Playground</h1>
11+
<p className='text-slate-600'>
12+
Testing table rendering with real enhancers and sample data.
13+
</p>
14+
</div>
15+
16+
<TablePlayground />
17+
18+
<div className='bg-slate-50 p-4 rounded-lg border border-slate-200 mt-6'>
19+
<h3 className='font-medium text-slate-900 mb-2'>Development Notes</h3>
20+
<ul className='text-sm text-slate-600 space-y-1'>
21+
<li>• Hot reload is active - changes to components update instantly</li>
22+
<li>• Uses real enhancers from the browser extension</li>
23+
<li>• Click rows to test interaction behavior</li>
24+
</ul>
25+
</div>
26+
</div>
27+
</div>,
28+
)

‎browser-extension/tests/playground/mockData.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import type { CommentState } from '@/entrypoints/background'
2+
import type { CommentSpot } from '@/lib/enhancer'
3+
import type { GitHubIssueAddCommentSpot } from '@/lib/enhancers/github/githubIssueAddComment'
4+
import type { GitHubPRAddCommentSpot } from '@/lib/enhancers/github/githubPRAddComment'
5+
import { EnhancerRegistry } from '@/lib/registries'
6+
7+
const gh_pr: GitHubPRAddCommentSpot = {
8+
domain: 'github.com',
9+
number: 517,
10+
slug: 'diffplug/selfie',
11+
type: 'GH_PR_ADD_COMMENT',
12+
unique_key: 'github.com:diffplug/selfie:517',
13+
}
14+
const gh_issue: GitHubIssueAddCommentSpot = {
15+
domain: 'github.com',
16+
number: 523,
17+
slug: 'diffplug/selfie',
18+
type: 'GH_ISSUE_ADD_COMMENT',
19+
unique_key: 'github.com:diffplug/selfie:523',
20+
}
21+
22+
const spots: CommentSpot[] = [gh_pr, gh_issue]
23+
24+
export const sampleSpots: CommentState[] = spots.map((spot) => {
25+
const state: CommentState = {
26+
drafts: [
27+
[
28+
0,
29+
{
30+
body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
31+
},
32+
],
33+
],
34+
spot,
35+
tab: {
36+
tabId: 123,
37+
windowId: 456,
38+
},
39+
}
40+
return state
41+
})
42+
43+
export const enhancerRegistry = new EnhancerRegistry()

‎browser-extension/tests/playground/style.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
body {
6+
margin: 0;
7+
padding: 2rem;
8+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
9+
background: #f8fafc;
10+
min-height: 100vh;
11+
}
12+
13+
#root {
14+
max-width: 1200px;
15+
margin: 0 auto;
16+
}

‎browser-extension/vite.playground.config.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
import tailwindcss from '@tailwindcss/vite'
4+
import path from 'path'
5+
6+
export default defineConfig({
7+
plugins: [
8+
react(),
9+
tailwindcss() as any
10+
],
11+
resolve: {
12+
alias: {
13+
'@': path.resolve('./src')
14+
}
15+
},
16+
root: 'tests/playground',
17+
server: {
18+
port: 3002,
19+
open: true,
20+
host: true
21+
},
22+
build: {
23+
outDir: '../../dist-playground',
24+
emptyOutDir: true
25+
}
26+
})

0 commit comments

Comments
 (0)