Skip to content

feat: add hidden debugger #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Jun 2, 2025
Merged

feat: add hidden debugger #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
74ed042
fix: remove temporary printing output to screen
brettkolodny May 31, 2025
73ca72a
feat: add tabs component
brettkolodny Jun 1, 2025
f2d6955
chore: refactor Editor to use new tab component
brettkolodny Jun 1, 2025
8ff5971
chore: refactor preview to use new tabs component
brettkolodny Jun 1, 2025
47aa2bc
feat: log list and empty state
brettkolodny Jun 1, 2025
058b50e
chore: remove unused file
brettkolodny Jun 1, 2025
15b1310
feat: log table drawer
brettkolodny Jun 1, 2025
a411fa9
feat: animate log table drawer
brettkolodny Jun 1, 2025
72ff892
fix: handle log overlow
brettkolodny Jun 1, 2025
01b89b4
chore: install mono font used in figma
brettkolodny Jun 1, 2025
726a5ab
fix: build errors
brettkolodny Jun 1, 2025
a5e6663
feat: download output as json button
brettkolodny Jun 1, 2025
50b4568
feat: download output button
brettkolodny Jun 2, 2025
95e35ef
feat: JSON viewer of output
brettkolodny Jun 2, 2025
054a39e
fix: vite config
brettkolodny Jun 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@
},
"dependencies": {
"@fontsource-variable/inter": "^5.2.5",
"@fontsource/dm-mono": "^5.2.5",
"@microlink/react-json-view": "^1.26.2",
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-dropdown-menu": "^2.1.15",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-tabs": "^1.1.12",
"@radix-ui/react-tooltip": "^1.2.7",
"@tailwindcss/typography": "^0.5.16",
"class-variance-authority": "^0.7.1",
Expand All @@ -23,6 +27,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-resizable-panels": "^3.0.2",
"react-router": "^7.6.1",
"react-simple-code-editor": "^0.14.1",
"tailwind-merge": "^3.3.0",
"tailwindcss-animate": "^1.0.7",
Expand Down
275 changes: 275 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 0 additions & 42 deletions src/App.css
View file
Open in desktop

This file was deleted.

158 changes: 84 additions & 74 deletions src/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
DropdownMenuTrigger,
} from "@/components/DropdownMenu";
import { ResizablePanel } from "@/components/Resizable";
import * as Tabs from "@/components/Tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/Tooltip";
import { useStore } from "@/store";
import {
Expand All @@ -15,11 +16,11 @@ import {
ChevronDownIcon,
CopyIcon,
FileJsonIcon,
SettingsIcon,
ToggleLeftIcon,
RadioIcon,
SettingsIcon,
SquareMousePointerIcon,
TextCursorInputIcon,
ToggleLeftIcon,
} from "lucide-react";
import { type FC, useEffect, useRef, useState } from "react";
import CodeEditor from "react-simple-code-editor";
Expand All @@ -28,8 +29,8 @@ import CodeEditor from "react-simple-code-editor";
// @ts-expect-error TODO: create types for this
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-hcl";
// @ts-expect-error TODO: create types for this
import "prismjs/themes/prism.css";
import { cn } from "@/utils/cn";

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

const [tab, setTab] = useState(() => "code");

const onCopy = () => {
navigator.clipboard.writeText($code);
setCodeCopied(() => true);
Expand All @@ -70,81 +73,88 @@ export const Editor: FC = () => {
}, [codeCopied]);

return (
<ResizablePanel className="relative flex flex-col items-start">
{/* EDITOR TOP BAR */}
<div className="flex h-12 w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
<div className="flex">
<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">
<FileJsonIcon className="w-[18px] min-w-[18px]" />
<span className="w-full text-sm">Code</span>
</button>

<Tooltip>
<TooltipTrigger asChild={true}>
<button
disabled={true}
className="flex w-fit min-w-[120px] cursor-not-allowed items-center gap-1 px-4 py-3 text-content-secondary"
>
<SettingsIcon className="w-[18px] min-w-[18px]" />
<span className="w-full text-sm">Variables</span>
</button>
</TooltipTrigger>
<TooltipContent>Coming soon</TooltipContent>
</Tooltip>
</div>

<DropdownMenu>
<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">
<div className="flex items-center justify-center gap-2">
<BookIcon width={18} height={18} />
<p className="text-xs">Examples</p>
<Tabs.Root
asChild={true}
value={tab}
onValueChange={(tab) => setTab(() => tab)}
>
<ResizablePanel className="relative flex flex-col items-start">
{/* EDITOR TOP BAR */}
<Tabs.List asChild={true}>
<div className="flex h-12 w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
<div className="flex">
<Tabs.Trigger icon={FileJsonIcon} label="Code" value="code" />
<Tooltip>
<TooltipTrigger asChild={true}>
<Tabs.Trigger
icon={SettingsIcon}
label="Variables"
value="variables"
disabled={true}
/>
</TooltipTrigger>
<TooltipContent>Coming soon</TooltipContent>
</Tooltip>
</div>
<ChevronDownIcon width={18} height={18} />
</DropdownMenuTrigger>

<DropdownMenuPortal>
<DropdownMenuContent align="start">
<DropdownMenuItem>
<TextCursorInputIcon width={24} height={24} />
Text input
</DropdownMenuItem>
<DropdownMenuItem>
<SquareMousePointerIcon width={24} height={24} />
Multi-select
</DropdownMenuItem>
<DropdownMenuItem>
<RadioIcon width={24} height={24} />
Radio
</DropdownMenuItem>
<DropdownMenuItem>
<ToggleLeftIcon width={24} height={24} /> Switches
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu>
</div>
<DropdownMenu>
<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">
<div className="flex items-center justify-center gap-2">
<BookIcon width={18} height={18} />
<p className="text-xs">Examples</p>
</div>
<ChevronDownIcon width={18} height={18} />
</DropdownMenuTrigger>

{/* CODE EDITOR */}
<div className="absolute mt-12 flex h-full w-full justify-end p-3">
<Button
className="z-10"
variant="subtle"
size="sm"
onClick={onCopy}
<DropdownMenuPortal>
<DropdownMenuContent align="start">
<DropdownMenuItem>
<TextCursorInputIcon width={24} height={24} />
Text input
</DropdownMenuItem>
<DropdownMenuItem>
<SquareMousePointerIcon width={24} height={24} />
Multi-select
</DropdownMenuItem>
<DropdownMenuItem>
<RadioIcon width={24} height={24} />
Radio
</DropdownMenuItem>
<DropdownMenuItem>
<ToggleLeftIcon width={24} height={24} /> Switches
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu>
</div>
</Tabs.List>

{/* CODE EDITOR */}
<div
className={cn(
"absolute mt-12 flex h-full w-full justify-end p-3",
tab !== "code" && "hidden",
)}
>
{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
</Button>
</div>
<Button className="z-10" variant="subtle" size="sm" onClick={onCopy}>
{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
</Button>
</div>

<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
<CodeEditor
value={$code}
onValueChange={(code) => $setCode(code)}
highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
textareaId="codeArea"
className="editor pt-3"
/>
</div>
</ResizablePanel>
<Tabs.Content value="code" asChild={true}>
<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
<CodeEditor
value={$code}
onValueChange={(code) => $setCode(code)}
highlight={(code) =>
hightlightWithLineNumbers(code, languages.hcl)
}
textareaId="codeArea"
className="editor pt-3"
/>
</div>
</Tabs.Content>
</ResizablePanel>
</Tabs.Root>
);
};
Loading