chore: add zustand store

Author: brettkolodny

package.json

@@ -23,7 +23,8 @@
     "react-resizable-panels": "^3.0.2",
     "react-simple-code-editor": "^0.14.1",
     "tailwind-merge": "^3.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

pnpm-lock.yaml

@@ -1,13 +1,15 @@
-import { ResizablePanel } from "@/components/Resizable";
 import { Button } from "@/components/Button";
+import { ResizablePanel } from "@/components/Resizable";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/Tooltip";
-// @ts-expect-error TODO: figure this out and fix
-import { highlight, languages } from "prismjs/components/prism-core";
 import { type FC, useEffect, useRef, useState } from "react";
 import CodeEditor from "react-simple-code-editor";
+import { useStore } from "@/store";
+import { CheckIcon, CopyIcon, FileJsonIcon, SettingsIcon } from "lucide-react";
+
+// The following imports can't be re-ordered otherwise things break
+import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-hcl";
 import "prismjs/themes/prism.css";
-import { CheckIcon, CopyIcon, FileJsonIcon, SettingsIcon } from "lucide-react";
 
 // Adds line numbers to the highlight.
 const hightlightWithLineNumbers = (input: string, language: unknown) =>
@@ -20,15 +22,16 @@ const hightlightWithLineNumbers = (input: string, language: unknown) =>
 		.join("\n");
 
 export const Editor: FC = () => {
-	const [code, setCode] = useState(() => defaultCode);
+	const $code = useStore((state) => state.code);
+	const $setCode = useStore((state) => state.setCode);
 
 	const [codeCopied, setCodeCopied] = useState(() => false);
 	const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
 		undefined,
 	);
 
 	const onCopy = () => {
-		navigator.clipboard.writeText(code);
+		navigator.clipboard.writeText($code);
 		setCodeCopied(() => true);
 	};
 
@@ -78,8 +81,8 @@ export const Editor: FC = () => {
 			{/* CODE EDITOR */}
 			<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
 				<CodeEditor
-					value={code}
-					onValueChange={(code) => setCode(() => code)}
+					value={$code}
+					onValueChange={(code) => $setCode(code)}
 					highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
 					textareaId="codeArea"
 					className="editor pt-3"
@@ -88,11 +91,3 @@ export const Editor: FC = () => {
 		</ResizablePanel>
 	);
 };
-
-const defaultCode = `terraform {
-  required_providers {
-    coder = {
-      source = "coder/coder"
-    }
-  }
-}`;

public/build/preview.wasm

@@ -7,24 +7,11 @@ import {
 import { ActivityIcon, ExternalLinkIcon } from "lucide-react";
 import { useRef, useState, type FC } from "react";
 import type { ImperativePanelHandle } from "react-resizable-panels";
+import { useStore } from "@/store";
 
 export const Preview: FC = () => {
-	const [errorPanelSize, setErrorPanelSize] = useState(() => 50);
-	const errorPanelRef = useRef<ImperativePanelHandle>(null);
-
-	const onCollapseError = () => {
-		errorPanelRef.current?.collapse();
-	};
-
 	return (
 		<ResizablePanel className="relative flex flex-col items-start gap-6 p-8">
-			<div
-				className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black"
-				style={{ opacity: errorPanelSize / 100 }}
-			>
-				{/* OVERLAY */}
-			</div>
-
 			<div className="flex w-full items-center justify-between">
 				<p className="font-semibold text-3xl text-content-primary">
 					Parameters
@@ -65,6 +52,34 @@ export const Preview: FC = () => {
 				</div>
 			</div>
 
+			<ErrorPane />
+		</ResizablePanel>
+	);
+};
+
+const ErrorPane = () => {
+	const $error = useStore((state) => state.error);
+
+	const [errorPanelSize, setErrorPanelSize] = useState(() => 50);
+	const errorPanelRef = useRef<ImperativePanelHandle>(null);
+
+	const onCollapseError = () => {
+		errorPanelRef.current?.collapse();
+	};
+
+	if (!$error) {
+		return null;
+	}
+
+	return (
+		<>
+			<div
+				className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black"
+				style={{ opacity: errorPanelSize / 100 }}
+			>
+				{/* OVERLAY */}
+			</div>
+
 			<ResizablePanelGroup
 				direction="vertical"
 				className="pointer-events-none absolute top-0 left-0"
@@ -87,6 +102,6 @@ export const Preview: FC = () => {
 					}}
 				></ResizablePanel>
 			</ResizablePanelGroup>
-		</ResizablePanel>
+		</>
 	);
 };

src/Editor.tsx

@@ -1,5 +1,4 @@
 import "@fontsource-variable/inter";
-
 import { TooltipProvider } from "@/components/Tooltip";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";

src/Preview.tsx

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+const defaultCode = `terraform {
+  required_providers {
+    coder = {
+      source = "coder/coder"
+    }
+  }
+}`;
+
+type State = {
+	code: string;
+	error?: string;
+	setCode: (code: string) => void;
+	setError: (error: string) => void;
+};
+
+export const useStore = create<State>()((set) => ({
+	code: defaultCode,
+	setCode: (code) => set((_) => ({ code })),
+	setError: (error) => set((_) => ({ error })),
+}));
+