Skip to content

Commit 626c202

Browse files
kkratterfclaude
kkratterf
and
claude
committed
fix(playground): use official COSS UI components and styling
- Add COSS UI toast for share button (replacing browser alert) - Fix select component to show selected value with controlled state - Replace all custom colors (emerald, amber, red) with COSS semantic tokens - Update Header, OutputPanel, StatusBar, LoadingOverlay to use COSS colors - Remove icons from Run/Share buttons - Use official COSS UI button, badge, and toast components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 84af232 commit 626c202

File tree

12 files changed

+629
-228
lines changed

12 files changed

+629
-228
lines changed

‎packages/playground/components.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/index.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"registries": {
22+
"@coss": "https://coss.com/ui/r/{name}.json"
23+
}
24+
}

‎packages/playground/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,21 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"react": "^18.3.1",
13-
"react-dom": "^18.3.1",
1412
"@base-ui/react": "^1.0.0-alpha.10",
15-
"clsx": "^2.1.1",
16-
"tailwind-merge": "^2.5.5",
1713
"class-variance-authority": "^0.7.1",
18-
"lucide-react": "^0.468.0"
14+
"clsx": "^2.1.1",
15+
"lucide-react": "^0.468.0",
16+
"react": "^18.3.1",
17+
"react-dom": "^18.3.1",
18+
"tailwind-merge": "^2.5.5"
1919
},
2020
"devDependencies": {
21+
"@tailwindcss/vite": "^4.0.0",
2122
"@types/react": "^18.3.12",
2223
"@types/react-dom": "^18.3.1",
2324
"@vitejs/plugin-react": "^4.3.4",
24-
"@tailwindcss/vite": "^4.0.0",
2525
"tailwindcss": "^4.0.0",
26+
"tw-animate-css": "^1.4.0",
2627
"typescript": "~5.6.2",
2728
"vite": "^6.0.3"
2829
}

‎packages/playground/pnpm-lock.yaml‎

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

‎packages/playground/src/App.tsx‎

Lines changed: 70 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import { StatusBar } from '@/components/StatusBar'
66
import { LoadingOverlay } from '@/components/LoadingOverlay'
77
import { NativeSelect } from '@/components/ui/select'
88
import { Badge } from '@/components/ui/badge'
9+
import { ToastProvider, toastManager } from '@/components/ui/toast'
910
import { useCompiler } from '@/hooks/useCompiler'
1011
import { examples, defaultCode } from '@/lib/examples'
1112

1213
function App() {
1314
const [code, setCode] = useState(defaultCode)
15+
const [selectedExample, setSelectedExample] = useState('')
1416
const compiler = useCompiler()
1517

1618
// Load code from URL on mount
@@ -35,79 +37,93 @@ function App() {
3537
const url = window.location.origin + window.location.pathname + '?code=' + encoded
3638

3739
navigator.clipboard.writeText(url).then(() => {
38-
alert('Link copied to clipboard!')
40+
toastManager.add({
41+
title: 'Link copied!',
42+
description: 'Share this link with others to share your code.',
43+
type: 'success',
44+
})
3945
}).catch(() => {
40-
prompt('Copy this link:', url)
46+
toastManager.add({
47+
title: 'Copy failed',
48+
description: url,
49+
type: 'error',
50+
})
4151
})
4252
}, [code])
4353

4454
const handleExampleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
4555
const name = e.target.value as keyof typeof examples
56+
setSelectedExample(e.target.value)
4657
if (examples[name]) {
4758
setCode(examples[name])
48-
e.target.value = ''
4959
}
5060
}, [])
5161

5262
return (
53-
<div className="min-h-screen flex flex-col">
54-
<LoadingOverlay isVisible={compiler.isLoading} />
63+
<ToastProvider position="bottom-right">
64+
<div className="min-h-screen flex flex-col bg-background">
65+
<LoadingOverlay isVisible={compiler.isLoading} />
5566

56-
<Header
57-
onRun={handleRun}
58-
onShare={handleShare}
59-
isCompiling={compiler.status === 'compiling'}
60-
/>
67+
<Header
68+
onRun={handleRun}
69+
onShare={handleShare}
70+
isCompiling={compiler.status === 'compiling'}
71+
/>
6172

62-
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 min-h-0">
63-
{/* Editor Panel */}
64-
<div className="flex flex-col border-r border-border min-h-0">
65-
<div className="px-4 py-2 bg-secondary flex justify-between items-center border-b border-white/10">
66-
<span className="font-semibold text-sm">FratmScript</span>
67-
<Badge variant="secondary">v{compiler.version}</Badge>
73+
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 min-h-0">
74+
{/* Editor Panel */}
75+
<div className="flex flex-col border-r border-border min-h-0">
76+
<div className="px-4 py-2.5 bg-card flex justify-between items-center border-b border-border">
77+
<span className="font-medium text-sm text-foreground">FratmScript</span>
78+
<Badge variant="outline">v{compiler.version}</Badge>
79+
</div>
80+
<div className="flex-1 min-h-0 bg-background">
81+
<Editor
82+
value={code}
83+
onChange={setCode}
84+
onRun={handleRun}
85+
/>
86+
</div>
87+
<div className="px-4 py-2.5 bg-card border-t border-border flex items-center gap-3">
88+
<label className="text-xs text-muted-foreground">Examples:</label>
89+
<NativeSelect
90+
value={selectedExample}
91+
onChange={handleExampleChange}
92+
className="w-52"
93+
>
94+
<option value="">-- Choose an example --</option>
95+
<option value="hello">Hello World</option>
96+
<option value="fibonacci">Fibonacci</option>
97+
<option value="classe">Pizzaiolo Class</option>
98+
<option value="async">Async/Await</option>
99+
<option value="operatori">Logical Operators</option>
100+
<option value="array">Arrays and Objects</option>
101+
</NativeSelect>
102+
</div>
68103
</div>
69-
<div className="flex-1 min-h-0 bg-card">
70-
<Editor
71-
value={code}
72-
onChange={setCode}
73-
onRun={handleRun}
74-
/>
75-
</div>
76-
<div className="px-4 py-2 bg-black/20 flex items-center gap-3">
77-
<label className="text-xs text-muted-foreground">Examples:</label>
78-
<NativeSelect onChange={handleExampleChange} className="w-48">
79-
<option value="">-- Choose an example --</option>
80-
<option value="hello">Hello World</option>
81-
<option value="fibonacci">Fibonacci</option>
82-
<option value="classe">Pizzaiolo Class</option>
83-
<option value="async">Async/Await</option>
84-
<option value="operatori">Logical Operators</option>
85-
<option value="array">Arrays and Objects</option>
86-
</NativeSelect>
87-
</div>
88-
</div>
89104

90-
{/* Output Panel */}
91-
<div className="flex flex-col min-h-0">
92-
<div className="px-4 py-2 bg-secondary flex items-center border-b border-white/10">
93-
<span className="font-semibold text-sm">Output</span>
94-
</div>
95-
<div className="flex-1 min-h-0 bg-card overflow-auto">
96-
<OutputPanel
97-
jsOutput={compiler.jsOutput}
98-
consoleLogs={compiler.consoleLogs}
99-
error={compiler.error}
100-
/>
105+
{/* Output Panel */}
106+
<div className="flex flex-col min-h-0">
107+
<div className="px-4 py-2.5 bg-card flex items-center border-b border-border">
108+
<span className="font-medium text-sm text-foreground">Output</span>
109+
</div>
110+
<div className="flex-1 min-h-0 bg-background overflow-auto">
111+
<OutputPanel
112+
jsOutput={compiler.jsOutput}
113+
consoleLogs={compiler.consoleLogs}
114+
error={compiler.error}
115+
/>
116+
</div>
101117
</div>
102118
</div>
103-
</div>
104119

105-
<StatusBar
106-
status={compiler.status}
107-
statusText={compiler.statusText}
108-
compileTime={compiler.compileTime}
109-
/>
110-
</div>
120+
<StatusBar
121+
status={compiler.status}
122+
statusText={compiler.statusText}
123+
compileTime={compiler.compileTime}
124+
/>
125+
</div>
126+
</ToastProvider>
111127
)
112128
}
113129

‎packages/playground/src/components/Header.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Button } from '@/components/ui/button'
2-
import { Play, Share2 } from 'lucide-react'
32

43
interface HeaderProps {
54
onRun: () => void
@@ -9,24 +8,16 @@ interface HeaderProps {
98

109
export function Header({ onRun, onShare, isCompiling }: HeaderProps) {
1110
return (
12-
<header className="bg-gradient-to-r from-primary to-secondary px-4 py-3 flex justify-between items-center flex-wrap gap-4">
11+
<header className="flex flex-wrap justify-between items-center gap-4 bg-card px-4 py-3 border-border border-b">
1312
<div className="flex items-center gap-3">
14-
<h1 className="text-xl font-bold">FratmScript</h1>
15-
<p className="text-sm opacity-85">JavaScript, ma comme si deve</p>
13+
<h1 className="font-bold text-primary text-xl">FratmScript</h1>
14+
<p className="text-muted-foreground text-sm">JavaScript, ma comme si deve</p>
1615
</div>
17-
<div className="flex items-center gap-3">
18-
<span className="text-xs text-foreground/70">
19-
<kbd className="bg-secondary/50 px-1.5 py-0.5 rounded text-xs">Ctrl</kbd>
20-
+
21-
<kbd className="bg-secondary/50 px-1.5 py-0.5 rounded text-xs">Enter</kbd>
22-
{' '}to run
23-
</span>
16+
<div className="flex items-center gap-1.5">
2417
<Button onClick={onRun} disabled={isCompiling}>
25-
<Play className="w-4 h-4" />
2618
Run
2719
</Button>
28-
<Button variant="secondary" onClick={onShare}>
29-
<Share2 className="w-4 h-4" />
20+
<Button variant="outline" onClick={onShare}>
3021
Share
3122
</Button>
3223
</div>

‎packages/playground/src/components/LoadingOverlay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function LoadingOverlay({ isVisible }: LoadingOverlayProps) {
1212
isVisible ? "opacity-100" : "opacity-0 pointer-events-none"
1313
)}
1414
>
15-
<div className="w-10 h-10 border-3 border-secondary border-t-primary rounded-full animate-spin" />
15+
<div className="w-10 h-10 border-3 border-muted border-t-primary rounded-full animate-spin" />
1616
<p className="text-muted-foreground">Loading FratmScript...</p>
1717
</div>
1818
)

‎packages/playground/src/components/OutputPanel.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function OutputPanel({ jsOutput, consoleLogs, error }: OutputPanelProps)
2929
<h3 className="text-xs text-muted-foreground uppercase tracking-wider mb-2">
3030
Generated JavaScript
3131
</h3>
32-
<pre className="font-mono text-sm leading-relaxed text-emerald-400 whitespace-pre-wrap break-words">
32+
<pre className="font-mono text-sm leading-relaxed text-success whitespace-pre-wrap break-words">
3333
{jsOutput}
3434
</pre>
3535
</section>
@@ -47,9 +47,9 @@ export function OutputPanel({ jsOutput, consoleLogs, error }: OutputPanelProps)
4747
<span
4848
key={i}
4949
className={cn(
50-
log.type === 'warn' && 'text-amber-400',
51-
log.type === 'error' && 'text-red-400',
52-
log.type === 'log' && 'text-amber-300'
50+
log.type === 'warn' && 'text-warning',
51+
log.type === 'error' && 'text-destructive',
52+
log.type === 'log' && 'text-foreground'
5353
)}
5454
>
5555
{escapeHtml(text)}
@@ -69,8 +69,8 @@ export function OutputPanel({ jsOutput, consoleLogs, error }: OutputPanelProps)
6969
<h3 className="text-xs text-muted-foreground uppercase tracking-wider mb-2">
7070
Error
7171
</h3>
72-
<div className="bg-red-500/10 border border-red-500 rounded-md p-3">
73-
<div className="font-semibold text-red-400 mb-1">
72+
<div className="bg-destructive/10 border border-destructive rounded-md p-3">
73+
<div className="font-semibold text-destructive mb-1">
7474
{error.error}
7575
</div>
7676
{error.line && (
@@ -79,7 +79,7 @@ export function OutputPanel({ jsOutput, consoleLogs, error }: OutputPanelProps)
7979
</div>
8080
)}
8181
{error.suggestion && (
82-
<div className="mt-2 pt-2 border-t border-white/10 text-amber-400 text-sm">
82+
<div className="mt-2 pt-2 border-t border-border text-warning text-sm">
8383
{error.suggestion}
8484
</div>
8585
)}

‎packages/playground/src/components/StatusBar.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ interface StatusBarProps {
88

99
export function StatusBar({ status, statusText, compileTime }: StatusBarProps) {
1010
return (
11-
<div className="px-4 py-1.5 bg-black/30 text-xs text-muted-foreground flex justify-between">
11+
<div className="px-4 py-1.5 bg-card border-t border-border text-xs text-muted-foreground flex justify-between">
1212
<div className="flex items-center gap-2">
1313
<div
1414
className={cn(
1515
"w-2 h-2 rounded-full",
16-
status === 'ready' && "bg-emerald-400",
17-
status === 'loading' && "bg-amber-400 animate-pulse",
18-
status === 'compiling' && "bg-amber-400 animate-pulse",
19-
status === 'error' && "bg-red-400"
16+
status === 'ready' && "bg-success",
17+
status === 'loading' && "bg-warning animate-pulse",
18+
status === 'compiling' && "bg-warning animate-pulse",
19+
status === 'error' && "bg-destructive"
2020
)}
2121
/>
2222
<span>{statusText}</span>

0 commit comments

Comments
 (0)