81 create a general purpose sentence creator form (#91)

* Initial work
Add global store for dialog
Start to create form
Need to work out UX

* Mostly working version with settings

* Generations form in good shape
Time to integrate into the other areas

* Wire up the sentence form to the plans

package.json

@@ -13,11 +13,13 @@
     "@hookform/resolvers": "^3.3.1",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.1.1",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@t3-oss/env-nextjs": "^0.3.1",
@@ -44,7 +46,8 @@
     "tailwindcss-animate": "^1.0.6",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.1",
-    "zod": "^3.22.2"
+    "zod": "^3.22.2",
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@types/eslint": "^8.37.0",

src/app/SentenceCreatorDialog.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+
+import { useSentenceCreatorStore } from "./_stores/sentenceCreatorStore";
+import { SentenceCreatorForm } from "./SentenceCreatorForm";
+
+export function SentenceCreatorDialog() {
+  const isModalOpen = useSentenceCreatorStore((state) => state.isModalOpen);
+
+  const toggleModal = useSentenceCreatorStore((state) => state.toggleModal);
+  const setModalOpen = useSentenceCreatorStore((state) => state.setModalOpen);
+
+  const targetWords = useSentenceCreatorStore((state) => state.targetWords);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        toggleModal();
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div>
+      <Dialog open={isModalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>Sentence Creator Helper</DialogTitle>
+            <DialogDescription>
+              <SentenceCreatorForm initialWordTargets={targetWords} />
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}