Skip to content

Commit c890515

Browse files
brettkolodnybrettkolodny
authored
Merge pull request #8 from coder/brett/add-debugger
feat: add hidden debugger
2 parents 549b50b + 054a39e commit c890515

File tree

10 files changed

+731
-208
lines changed

10 files changed

+731
-208
lines changed

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,12 @@
1111
},
1212
"dependencies": {
1313
"@fontsource-variable/inter": "^5.2.5",
14+
"@fontsource/dm-mono": "^5.2.5",
15+
"@microlink/react-json-view": "^1.26.2",
16+
"@radix-ui/react-dialog": "^1.1.14",
1417
"@radix-ui/react-dropdown-menu": "^2.1.15",
1518
"@radix-ui/react-slot": "^1.2.3",
19+
"@radix-ui/react-tabs": "^1.1.12",
1620
"@radix-ui/react-tooltip": "^1.2.7",
1721
"@tailwindcss/typography": "^0.5.16",
1822
"class-variance-authority": "^0.7.1",
@@ -23,6 +27,7 @@
2327
"react": "^19.1.0",
2428
"react-dom": "^19.1.0",
2529
"react-resizable-panels": "^3.0.2",
30+
"react-router": "^7.6.1",
2631
"react-simple-code-editor": "^0.14.1",
2732
"tailwind-merge": "^3.3.0",
2833
"tailwindcss-animate": "^1.0.7",

‎pnpm-lock.yaml‎

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

‎src/App.css‎

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

‎src/Editor.tsx‎

Lines changed: 84 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
DropdownMenuTrigger,
88
} from "@/components/DropdownMenu";
99
import { ResizablePanel } from "@/components/Resizable";
10+
import * as Tabs from "@/components/Tabs";
1011
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/Tooltip";
1112
import { useStore } from "@/store";
1213
import {
@@ -15,11 +16,11 @@ import {
1516
ChevronDownIcon,
1617
CopyIcon,
1718
FileJsonIcon,
18-
SettingsIcon,
19-
ToggleLeftIcon,
2019
RadioIcon,
20+
SettingsIcon,
2121
SquareMousePointerIcon,
2222
TextCursorInputIcon,
23+
ToggleLeftIcon,
2324
} from "lucide-react";
2425
import { type FC, useEffect, useRef, useState } from "react";
2526
import CodeEditor from "react-simple-code-editor";
@@ -28,8 +29,8 @@ import CodeEditor from "react-simple-code-editor";
2829
// @ts-expect-error TODO: create types for this
2930
import { highlight, languages } from "prismjs/components/prism-core";
3031
import "prismjs/components/prism-hcl";
31-
// @ts-expect-error TODO: create types for this
3232
import "prismjs/themes/prism.css";
33+
import { cn } from "@/utils/cn";
3334

3435
// Adds line numbers to the highlight.
3536
const hightlightWithLineNumbers = (input: string, language: unknown) =>
@@ -50,6 +51,8 @@ export const Editor: FC = () => {
5051
undefined,
5152
);
5253

54+
const [tab, setTab] = useState(() => "code");
55+
5356
const onCopy = () => {
5457
navigator.clipboard.writeText($code);
5558
setCodeCopied(() => true);
@@ -70,81 +73,88 @@ export const Editor: FC = () => {
7073
}, [codeCopied]);
7174

7275
return (
73-
<ResizablePanel className="relative flex flex-col items-start">
74-
{/* EDITOR TOP BAR */}
75-
<div className="flex h-12 w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
76-
<div className="flex">
77-
<button className="flex w-fit min-w-[120px] items-center gap-1 border-x bg-surface-secondary px-4 py-3 text-content-primary transition-colors hover:bg-surface-tertiary">
78-
<FileJsonIcon className="w-[18px] min-w-[18px]" />
79-
<span className="w-full text-sm">Code</span>
80-
</button>
81-
82-
<Tooltip>
83-
<TooltipTrigger asChild={true}>
84-
<button
85-
disabled={true}
86-
className="flex w-fit min-w-[120px] cursor-not-allowed items-center gap-1 px-4 py-3 text-content-secondary"
87-
>
88-
<SettingsIcon className="w-[18px] min-w-[18px]" />
89-
<span className="w-full text-sm">Variables</span>
90-
</button>
91-
</TooltipTrigger>
92-
<TooltipContent>Coming soon</TooltipContent>
93-
</Tooltip>
94-
</div>
95-
96-
<DropdownMenu>
97-
<DropdownMenuTrigger className="flex w-fit min-w-[140px] cursor-pointer items-center justify-between rounded-md border bg-surface-primary px-2 py-1.5 text-content-secondary transition-colors hover:text-content-primary data-[state=open]:text-content-primary">
98-
<div className="flex items-center justify-center gap-2">
99-
<BookIcon width={18} height={18} />
100-
<p className="text-xs">Examples</p>
76+
<Tabs.Root
77+
asChild={true}
78+
value={tab}
79+
onValueChange={(tab) => setTab(() => tab)}
80+
>
81+
<ResizablePanel className="relative flex flex-col items-start">
82+
{/* EDITOR TOP BAR */}
83+
<Tabs.List asChild={true}>
84+
<div className="flex h-12 w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
85+
<div className="flex">
86+
<Tabs.Trigger icon={FileJsonIcon} label="Code" value="code" />
87+
<Tooltip>
88+
<TooltipTrigger asChild={true}>
89+
<Tabs.Trigger
90+
icon={SettingsIcon}
91+
label="Variables"
92+
value="variables"
93+
disabled={true}
94+
/>
95+
</TooltipTrigger>
96+
<TooltipContent>Coming soon</TooltipContent>
97+
</Tooltip>
10198
</div>
102-
<ChevronDownIcon width={18} height={18} />
103-
</DropdownMenuTrigger>
10499

105-
<DropdownMenuPortal>
106-
<DropdownMenuContent align="start">
107-
<DropdownMenuItem>
108-
<TextCursorInputIcon width={24} height={24} />
109-
Text input
110-
</DropdownMenuItem>
111-
<DropdownMenuItem>
112-
<SquareMousePointerIcon width={24} height={24} />
113-
Multi-select
114-
</DropdownMenuItem>
115-
<DropdownMenuItem>
116-
<RadioIcon width={24} height={24} />
117-
Radio
118-
</DropdownMenuItem>
119-
<DropdownMenuItem>
120-
<ToggleLeftIcon width={24} height={24} /> Switches
121-
</DropdownMenuItem>
122-
</DropdownMenuContent>
123-
</DropdownMenuPortal>
124-
</DropdownMenu>
125-
</div>
100+
<DropdownMenu>
101+
<DropdownMenuTrigger className="flex w-fit min-w-[140px] cursor-pointer items-center justify-between rounded-md border bg-surface-primary px-2 py-1.5 text-content-secondary transition-colors hover:text-content-primary data-[state=open]:text-content-primary">
102+
<div className="flex items-center justify-center gap-2">
103+
<BookIcon width={18} height={18} />
104+
<p className="text-xs">Examples</p>
105+
</div>
106+
<ChevronDownIcon width={18} height={18} />
107+
</DropdownMenuTrigger>
126108

127-
{/* CODE EDITOR */}
128-
<div className="absolute mt-12 flex h-full w-full justify-end p-3">
129-
<Button
130-
className="z-10"
131-
variant="subtle"
132-
size="sm"
133-
onClick={onCopy}
109+
<DropdownMenuPortal>
110+
<DropdownMenuContent align="start">
111+
<DropdownMenuItem>
112+
<TextCursorInputIcon width={24} height={24} />
113+
Text input
114+
</DropdownMenuItem>
115+
<DropdownMenuItem>
116+
<SquareMousePointerIcon width={24} height={24} />
117+
Multi-select
118+
</DropdownMenuItem>
119+
<DropdownMenuItem>
120+
<RadioIcon width={24} height={24} />
121+
Radio
122+
</DropdownMenuItem>
123+
<DropdownMenuItem>
124+
<ToggleLeftIcon width={24} height={24} /> Switches
125+
</DropdownMenuItem>
126+
</DropdownMenuContent>
127+
</DropdownMenuPortal>
128+
</DropdownMenu>
129+
</div>
130+
</Tabs.List>
131+
132+
{/* CODE EDITOR */}
133+
<div
134+
className={cn(
135+
"absolute mt-12 flex h-full w-full justify-end p-3",
136+
tab !== "code" && "hidden",
137+
)}
134138
>
135-
{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
136-
</Button>
137-
</div>
139+
<Button className="z-10" variant="subtle" size="sm" onClick={onCopy}>
140+
{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
141+
</Button>
142+
</div>
138143

139-
<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
140-
<CodeEditor
141-
value={$code}
142-
onValueChange={(code) => $setCode(code)}
143-
highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
144-
textareaId="codeArea"
145-
className="editor pt-3"
146-
/>
147-
</div>
148-
</ResizablePanel>
144+
<Tabs.Content value="code" asChild={true}>
145+
<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
146+
<CodeEditor
147+
value={$code}
148+
onValueChange={(code) => $setCode(code)}
149+
highlight={(code) =>
150+
hightlightWithLineNumbers(code, languages.hcl)
151+
}
152+
textareaId="codeArea"
153+
className="editor pt-3"
154+
/>
155+
</div>
156+
</Tabs.Content>
157+
</ResizablePanel>
158+
</Tabs.Root>
149159
);
150160
};

0 commit comments

Comments
 (0)