+
+ 
+
+
+ 
+
+
+
+
+ +[Coder Repo](https://github.com/coder/coder) | +[Docs](https://coder.com/docs) | +[Why Coder](https://coder.com/why) | +[Premium](https://coder.com/pricing#compare-plans) + +[](https://discord.gg/coder) +[](https://www.bestpractices.dev/projects/9511) +[](./LICENSE) + +
+
+
+
+
+
+
+
+
++ Interactive Template Editor +
+ ++
+ +[Coder Repo](https://github.com/coder/coder) | +[Docs](https://coder.com/docs) | +[Why Coder](https://coder.com/why) | +[Premium](https://coder.com/pricing#compare-plans) + +[](https://discord.gg/coder) +[](https://www.bestpractices.dev/projects/9511) +[](./LICENSE) + +
+ 
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* CODE EDITOR */}
-
-
-
-
-
-
-
- Coming soon
-
-
-
-
-
- Examples
-
-
-
-
- $setCode(code)}
- highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
- textareaId="codeArea"
- className="editor pt-3"
- />
-
-
- {$wasmState === "loading" ?
- ) : null}
-
-
-
-
-
-
-
- - Parameters -
- -
-
-
-
-
-
-
-
-
-
-
-
- Read the docs
-
- - Parameters Playground -
-- Create dynamic parameters here, I need to figure out a better - copy. -
-
- {/* OVERLAY */}
-
-
-
-
- );
-};
-
-const WasmError: FC = () => {
- return (
-
-
- - Loading assets -
-- Add some copy here to explain that this will only take a few moments -
-
-
- );
-};
diff --git a/src/client/App.tsx b/src/client/App.tsx
new file mode 100644
index 0000000..967c3e8
--- /dev/null
+++ b/src/client/App.tsx
@@ -0,0 +1,265 @@
+import { Editor } from "@/client/Editor";
+import { Preview } from "@/client/Preview";
+import { Logo } from "@/client/components/Logo";
+import {
+ ResizableHandle,
+ ResizablePanelGroup,
+} from "@/client/components/Resizable";
+import { useStore } from "@/client/store";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+} from "@/client/components/DropdownMenu";
+import {
+ type FC,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import { useTheme } from "@/client/contexts/theme";
+import { MoonIcon, ShareIcon, SunIcon, SunMoonIcon } from "lucide-react";
+import { Button } from "@/client/components/Button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/client/components/Tooltip";
+import { rpc } from "@/utils/rpc";
+import { useLoaderData, type LoaderFunctionArgs } from "react-router";
+import type {WorkspaceOwner} from "@/gen/types.ts";
+
+type GoPreviewDef = (
+ v: Record- Unable to load assets{" "} -
-- Add some copy here to explain that this will only take a few moments -
-
+
+
+
+
+
+
+ onAddSnippet("input")}>
+
+ onAddSnippet("multi-select")}
+ >
+
+ onAddSnippet("radio")}>
+
+ onAddSnippet("switch")}>
+
+
+
+
+
+
+
+
+
+ Coming soon
+
+
+
+
+
+ Snippets
+
+
+
+
+
+ $setEditor(editor)}
+ onChange={(code) => {
+ if (code !== undefined) {
+ $setCode(code);
+ }
+ }}
+ theme={appliedTheme === "dark" ? "vs-dark" : "vs-light"}
+ defaultLanguage="hcl"
+ loading=""
+ options={{
+ minimap: {
+ enabled: false,
+ },
+ automaticLayout: true,
+ fontFamily: "DM Mono",
+ fontSize: 14,
+ wordWrap: "on",
+ padding: {
+ top: 16,
+ bottom: 16,
+ },
+ }}
+ />
+
+
+ {$wasmState === "loading" ?
+ ) : null}
+
+
+ (
+
+
+ 0)
+ }
+ className={cn(
+ "flex h-full w-full flex-col items-start gap-4 p-5 ",
+ ($wasmState !== "loaded" ||
+ ($errors.show && $errors.diagnostics.length > 0)) &&
+ "pointer-events-none",
+ isDebug && "max-h-[calc(100%-48px)]",
+ )}
+ >
+ {
+
+
+
+ }
+ {$parameters.length === 0 ? (
+
+
+ {isDebouncing && $wasmState === "loaded" ? (
+
+
+ ) : null}
+
+
+ + Parameters +
+ +
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+const ErrorPane = () => {
+ const $errors = useStore((state) => state.errors);
+ const $toggleShowError = useStore((state) => state.toggleShowError);
+
+ const hasErrors = useMemo(() => $errors.diagnostics.length > 0, [$errors]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ Read the docs
+
+ + Parameters Playground +
++ Create dynamic parameters here, I need to figure out a better copy. +
+
+ {$errors.diagnostics.map((diagnostic, index) => (
+
+
+
+ );
+};
+
+const WasmLoading: FC = () => {
+ return (
+ + + {diagnostic.severity} + + {diagnostic.kind === "parameter" + ? ` (${diagnostic.parameterName})` + : null} + : {diagnostic.summary} +
+{diagnostic.detail}
+
+
+ );
+};
+
+const WasmError: FC = () => {
+ return (
+
+
+ + Loading assets +
++ Add some copy here to explain that this will only take a few moments +
+
+
+ );
+};
+
+type DebuggerProps = {
+ output: PreviewOutput | null;
+};
+const Debugger: FC+ Unable to load assets{" "} +
++ Add some copy here to explain that this will only take a few moments +
+
+
+
+ {parserLogs.map((log, index) => (
+
+ )}
+
+
+ );
+};
+
+type LogProps = { log: ParserLog };
+const Log: FC
+
+
+
+ No logs yet
++ Make changes to the template and view the output logs here +
+
+
+ Parameter Values
+
+
+
+
+
+
+
+
+
+ {Object.entries(data).map(([key, value], index) => {
+ const displayValue = JSON.stringify(value);
+
+ return (
+
+
+ {headers[0]}
+
+
+ {headers[1]}
+
+
+ );
+ })}
+
+
+ {key}
+
+
+
+ {value === ""
+ ? "
+ {(props.checked === true || props.defaultChecked === true) && (
+
+
+
+));
+
+export const CommandList = forwardRef<
+ React.ElementRef
+
+ );
+};
+
+interface ParameterLabelProps {
+ parameter: Parameter;
+ isPreset?: boolean;
+ autofill: boolean;
+ id: string;
+}
+
+const ParameterLabel: FC
+ {parameter.form_type === "input" ||
+ parameter.form_type === "textarea" ? (
+
+ {parameter.form_type !== "error" && (
+
+
+ );
+};
+
+interface DebouncedParameterFieldProps {
+ parameter: Parameter;
+ value?: string;
+ onChange: (value: string) => void;
+ disabled?: boolean;
+ id: string;
+ isPreset?: boolean;
+}
+
+const DebouncedParameterField: FC
+
+
+ {Boolean(parameter.description) && (
+
+
+
+ {parameter.description}
+
+
+ )}
+