feat: add InputAlertModal

this is just a modal primitive that has one text input, and a text validation function

Author: beebls

components/CreatePresetModal.tsx

@@ -1,105 +1,58 @@
 import { useContext, useMemo, useState } from "react";
 import { themeContext } from "@contexts/themeContext";
 import { checkIfThemeExists, generatePreset, toast } from "../backend";
-import { BiPlus } from "react-icons/bi";
-import { AlertDialog, LabelledInput, Modal } from "./Primitives";
-import { twMerge } from "tailwind-merge";
+import { InputAlertDialog } from "./Primitives/InputAlertDialog";
 
 export function CreatePresetModal({ closeModal }: { closeModal: () => void }) {
   const { themes: localThemeList, refreshThemes } = useContext(themeContext);
-  const enabledThemes = useMemo(
-    () => localThemeList.filter((e) => e.enabled).length,
-    [localThemeList]
-  );
 
-  const [presetName, setPresetName] = useState<string>("");
-  const nameContainsInvalidCharacters = useMemo(
-    () => !!presetName.match(/[\\/:*?\"<>|]/g),
-    [presetName]
-  );
-  const invalidName = useMemo(() => {
+  const nameContainsInvalidCharacters = (presetName: string) =>
+    !!presetName.match(/[\\/:*?\"<>|]/g);
+
+  const invalidName = (presetName: string) => {
     return (
       (presetName.length === 3 || presetName.length === 4) &&
       !!presetName.match(/(LPT\d)|(CO(M\d|N))|(NUL)|(AUX)|(PRN)/g)
     );
-  }, [presetName]);
+  };
 
-  async function createPreset() {
-    if (presetName) {
-      const alreadyExists = await checkIfThemeExists(presetName);
+  async function createPreset(input: string) {
+    if (input) {
+      const alreadyExists = await checkIfThemeExists(input);
       if (alreadyExists) {
         toast("Theme Already Exists!");
-        setPresetName("");
         return;
       }
-      generatePreset(presetName).then(() => {
+      generatePreset(input).then(() => {
         toast("Preset Created Successfully");
         refreshThemes(true);
-        setPresetName("");
+        closeModal();
       });
     }
   }
   return (
     <>
-      <AlertDialog
+      <InputAlertDialog
         defaultOpen
+        dontCloseOnAction
         onOpenChange={(open) => {
           if (!open) closeModal();
         }}
-        actionDisabled={
-          presetName.length === 0 ||
-          presetName === "New Profile" ||
-          nameContainsInvalidCharacters ||
-          invalidName
-        }
+        validateInput={(text: string) => {
+          return !(
+            text.length === 0 ||
+            text === "New Profile" ||
+            nameContainsInvalidCharacters(text) ||
+            invalidName(text)
+          );
+        }}
         actionText="Create"
         onAction={createPreset}
         title="Create Profile"
         description={`A profile saves the current state of your themes so that you can quickly re-apply it.`}
-        Content={
-          <div className="flex w-full items-end gap-2 px-4 pb-4">
-            <LabelledInput
-              inputClass="bg-base-5.5-light dark:bg-base-5.5-dark"
-              label="Profile Name"
-              value={presetName}
-              onValueChange={setPresetName}
-            />
-          </div>
-        }
+        labelText="Profile Name"
+        inputClass="bg-base-5.5-light dark:bg-base-5.5-dark"
       />
-      {/* <Modal
-        defaultOpen
-        Content={
-          <div className="flex w-full items-end gap-2 px-4 pb-4">
-            <LabelledInput
-              inputClass="bg-base-5.5-light dark:bg-base-5.5-dark"
-              label="Preset Name"
-              value={presetName}
-              onValueChange={setPresetName}
-            />
-          </div>
-        }
-        actionDisabled={presetName.length === 0}
-        actionText="Create"
-        onAction={createPreset}
-        title="Create Preset"
-        description={`This preset will combine ${
-          enabledThemes === 1 ? "the " : "all "
-        }${enabledThemes} theme${
-          enabledThemes === 1 ? "" : "s"
-        } you currently have enabled. Enabling/disabling it will toggle them all at once.`}
-        // triggerDisabled={enabledThemes === 0}
-        // Trigger={
-        //   <div
-        //     className={`flex h-8 w-fit items-center justify-center gap-2 whitespace-nowrap rounded-full border-2 border-[#2e2e2e] px-4 py-2 text-sm font-bold ring-brandBlue transition duration-100 focus:ring-2 ${
-        //       enabledThemes > 0 ? "bg-[#2563eb]" : "pointer-events-none opacity-50"
-        //     }`}
-        //   >
-        //     <BiPlus />
-        //     <span>New Preset</span>
-        //   </div>
-        // }
-      /> */}
     </>
   );
 }

components/Presets/AddThemeToPresetButton.tsx

@@ -1,4 +1,2 @@
 export * from "./PresetSelectionDropdown";
-export * from "./PresetFolderView";
-export * from "./AddThemeToPresetButton";
 export * from "./PresetThemeNameDisplayCard";

components/Presets/PresetFolderView.tsx

@@ -1,7 +1,8 @@
 import * as AD from "@radix-ui/react-alert-dialog";
 import { fontContext } from "@contexts/FontContext";
-import { ReactNode, useContext, useState, useEffect } from "react";
+import { ReactNode, useContext, useState, useEffect, ReactElement } from "react";
 import { twMerge } from "tailwind-merge";
+
 export function AlertDialog({
   Trigger = null,
   title,
@@ -17,7 +18,7 @@ export function AlertDialog({
   actionDisabled = false,
   dontClose = false,
   onAction = () => {},
-  customAction = null,
+  CustomAction = null,
   actionClass = "",
 }: {
   Trigger?: ReactNode;
@@ -33,7 +34,7 @@ export function AlertDialog({
   onOpenChange?: (open: boolean) => void;
   actionText?: string | ReactNode;
   actionDisabled?: boolean;
-  customAction?: ReactNode;
+  CustomAction?: ReactNode | null;
   onAction?: () => void;
   actionClass?: string;
 }) {
@@ -74,7 +75,7 @@ export function AlertDialog({
                 </AD.Cancel>
               )}
               {Footer}
-              {customAction || (
+              {CustomAction || (
                 <AD.Action
                   onClick={(event) => {
                     dontCloseOnAction && event.preventDefault();

components/Presets/index.ts

@@ -0,0 +1,54 @@
+import { AlertDialog } from "./AlertDialog";
+import { ReactNode, useState } from "react";
+import { LabelledInput } from "./LabelledField";
+
+export function InputAlertDialog(props: {
+  Trigger?: ReactNode;
+  title: string;
+  triggerDisabled?: boolean;
+  description?: string;
+  Content?: ReactNode;
+  dontClose?: boolean;
+  Footer?: ReactNode;
+  dontCloseOnAction?: boolean;
+  cancelText?: string;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  actionText?: string | ReactNode;
+  actionDisabled?: boolean;
+  customAction?: ReactNode;
+  onAction: (input: string) => void;
+  actionClass?: string;
+  labelText: string;
+  inputClass?: string;
+  labelClass?: string;
+  rootClass?: string;
+  validateInput: (e: string) => boolean;
+}) {
+  const [inputValue, setInputValue] = useState("");
+
+  return (
+    <AlertDialog
+      {...props}
+      onAction={() => {
+        props.onAction(inputValue);
+      }}
+      actionDisabled={!props.validateInput(inputValue)}
+      Content={
+        <div className="flex w-full items-end gap-2 px-4 pb-4">
+          <LabelledInput
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && props.validateInput(inputValue)) {
+                props.onAction(inputValue);
+              }
+            }}
+            inputClass="bg-base-5.5-light dark:bg-base-5.5-dark"
+            label={props.labelText}
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+        </div>
+      }
+    />
+  );
+}

components/Primitives/AlertDialog.tsx

@@ -1,5 +1,5 @@
 import * as Label from "@radix-ui/react-label";
-import { useState, ReactNode } from "react";
+import { useState, ReactNode, KeyboardEventHandler } from "react";
 import { twMerge } from "tailwind-merge";
 
 export function LabelledInput({
@@ -11,6 +11,7 @@ export function LabelledInput({
   placeholder = "",
   inputClass = "",
   password = false,
+  onKeyDown = () => {},
 }: {
   label: ReactNode | string;
   value: string;
@@ -20,6 +21,7 @@ export function LabelledInput({
   placeholder?: string;
   inputClass?: string;
   password?: boolean;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 }) {
   const [type, setType] = useState<"text" | "password">(password ? "password" : "text");
   return (
@@ -28,6 +30,7 @@ export function LabelledInput({
         {label}
       </Label.Root>
       <input
+        onKeyDown={onKeyDown}
         onFocus={() => password && setType("text")}
         onBlur={() => password && setType("password")}
         placeholder={placeholder}