Merge pull request #34 from coder/brett/add-all-snippets-and-docs

feat: add snippets for all form types and add docs links

Author: brettkolodny

src/client/App.tsx

@@ -186,14 +186,16 @@ export const App = () => {
 						rel="noreferrer"
 						className="font-light text-content-secondary text-sm hover:text-content-primary"
 					>
+						<span className="sr-only"> (link opens in new tab)</span>
 						Coder
 					</a>
 					<a
-						href="https://coder.com"
+						href="https://coder.com/docs/admin/templates/extending-templates/parameters"
 						target="_blank"
 						rel="noreferrer"
 						className="font-light text-content-secondary text-sm hover:text-content-primary"
 					>
+						<span className="sr-only"> (link opens in new tab)</span>
 						Docs
 					</a>
 					<ExampleSelector />
@@ -203,7 +205,7 @@ export const App = () => {
 
 			<ResizablePanelGroup direction={"horizontal"}>
 				{/* EDITOR */}
-				<Editor code={code} setCode={setCode} />
+				<Editor code={code} setCode={setCode} parameters={parameters} />
 
 				<ResizableHandle className="bg-surface-quaternary" />
 
@@ -333,6 +335,7 @@ const ExampleSelector: FC = () => {
 						return (
 							<DropdownMenuItem key={slug} asChild={true}>
 								<a href={href} target="_blank" rel="noreferrer">
+									<span className="sr-only"> (link opens in new tab)</span>
 									<ExternalLinkIcon />
 									{title}
 								</a>

src/client/Editor.tsx

@@ -1,3 +1,13 @@
+import { Editor as MonacoEditor } from "@monaco-editor/react";
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	CopyIcon,
+	FileJsonIcon,
+	SettingsIcon,
+	ZapIcon,
+} from "lucide-react";
+import { type FC, useEffect, useState } from "react";
 import { Button } from "@/client/components/Button";
 import {
 	DropdownMenu,
@@ -13,71 +23,50 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/client/components/Tooltip";
+import { useEditor } from "@/client/contexts/editor";
 import { useTheme } from "@/client/contexts/theme";
-import { multiSelect, radio, switchInput, textInput } from "@/client/snippets";
-import type { ParameterFormType } from "@/gen/types";
+import { type SnippetFunc, snippets } from "@/client/snippets";
+import type { ParameterWithSource } from "@/gen/types";
 import { cn } from "@/utils/cn";
-import { Editor as MonacoEditor } from "@monaco-editor/react";
-import {
-	CheckIcon,
-	ChevronDownIcon,
-	CopyIcon,
-	FileJsonIcon,
-	RadioIcon,
-	SettingsIcon,
-	SquareMousePointerIcon,
-	TextCursorInputIcon,
-	ToggleLeftIcon,
-	ZapIcon,
-} from "lucide-react";
-import { type FC, useEffect, useRef, useState } from "react";
-import { useEditor } from "@/client/contexts/editor";
 
 type EditorProps = {
 	code: string;
 	setCode: React.Dispatch<React.SetStateAction<string>>;
+	parameters: ParameterWithSource[];
 };
 
-export const Editor: FC<EditorProps> = ({ code, setCode }) => {
+export const Editor: FC<EditorProps> = ({ code, setCode, parameters }) => {
 	const { appliedTheme } = useTheme();
 	const editorRef = useEditor();
 
-	const [codeCopied, setCodeCopied] = useState(() => false);
-	const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
-		undefined,
-	);
-
 	const [tab, setTab] = useState(() => "code");
 
+	const [codeCopied, setCodeCopied] = useState(() => false);
+
 	const onCopy = () => {
 		navigator.clipboard.writeText(code);
 		setCodeCopied(() => true);
 	};
 
-	const onAddSnippet = (formType: ParameterFormType) => {
-		if (formType === "input") {
-			setCode(`${code.trimEnd()}\n\n${textInput}\n`);
-		} else if (formType === "radio") {
-			setCode(`${code.trimEnd()}\n\n${radio}\n`);
-		} else if (formType === "multi-select") {
-			setCode(`${code.trimEnd()}\n\n${multiSelect}\n`);
-		} else if (formType === "switch") {
-			setCode(`${code.trimEnd()}\n\n${switchInput}\n`);
-		}
+	const onAddSnippet = (name: string, snippet: SnippetFunc) => {
+		const nameCount = parameters.filter((p) => p.name.startsWith(name)).length;
+
+		const nextInOrder = 1 + Math.max(0, ...parameters.map((p) => p.order));
+		const newName = nameCount > 0 ? `${name}-${nameCount}` : name;
+		const newSnippet = snippet(newName, nextInOrder);
+		setCode(`${code.trimEnd()}\n\n${newSnippet}\n`);
 	};
 
 	useEffect(() => {
 		if (!codeCopied) {
 			return;
 		}
 
-		clearTimeout(copyTimeoutId.current);
-
-		copyTimeoutId.current = setTimeout(() => {
+		const copyTimeoutId = setTimeout(() => {
 			setCodeCopied(() => false);
 		}, 1000);
 
-		return () => clearTimeout(copyTimeoutId.current);
+		return () => clearTimeout(copyTimeoutId);
 	}, [codeCopied]);
 
 	return (
@@ -116,23 +105,17 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {
 
 							<DropdownMenuPortal>
 								<DropdownMenuContent align="start">
-									<DropdownMenuItem onClick={() => onAddSnippet("input")}>
-										<TextCursorInputIcon width={24} height={24} />
-										Text input
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => onAddSnippet("multi-select")}
-									>
-										<SquareMousePointerIcon width={24} height={24} />
-										Multi-select
-									</DropdownMenuItem>
-									<DropdownMenuItem onClick={() => onAddSnippet("radio")}>
-										<RadioIcon width={24} height={24} />
-										Radio
-									</DropdownMenuItem>
-									<DropdownMenuItem onClick={() => onAddSnippet("switch")}>
-										<ToggleLeftIcon width={24} height={24} /> Switches
-									</DropdownMenuItem>
+									{snippets.map(
+										({ name, label, icon: Icon, snippet }, index) => (
+											<DropdownMenuItem
+												key={index}
+												onClick={() => onAddSnippet(name, snippet)}
+											>
+												<Icon size={24} />
+												{label}
+											</DropdownMenuItem>
+										),
+									)}
 								</DropdownMenuContent>
 							</DropdownMenuPortal>
 						</DropdownMenu>

src/client/Preview.tsx

@@ -239,9 +239,12 @@ const PreviewEmptyState = () => {
 					</p>
 				</div>
 				<a
-					href="#todo"
+					href="https://coder.com/docs/admin/templates/extending-templates/parameters"
+					target="_blank"
+					rel="noreferrer"
 					className="flex items-center gap-0.5 text-content-link text-sm"
 				>
+					<span className="sr-only"> (link opens in new tab)</span>
 					Read the docs
 					<span className="inline">
 						<ExternalLinkIcon width={16} />