refactor: remove AlertDialog from playground

Author: joshunrau

apps/playground/src/components/Editor/DeleteFileDialog.tsx

@@ -1,4 +1,4 @@
-import { AlertDialog, Button } from '@douglasneuroinformatics/libui/components';
+import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
 
 import { useAppStore } from '@/store';
 
@@ -11,13 +11,13 @@ export type DeleteFileDialogProps = {
 export const DeleteFileDialog = ({ filename, isOpen, setIsOpen }: DeleteFileDialogProps) => {
   const deleteFile = useAppStore((store) => store.deleteFile);
   return filename ? (
-    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-      <AlertDialog.Content>
-        <AlertDialog.Header>
-          <AlertDialog.Title>{`Are you sure you want to delete "${filename}"?`}</AlertDialog.Title>
-          <AlertDialog.Description>Once deleted, this file cannot be restored</AlertDialog.Description>
-        </AlertDialog.Header>
-        <AlertDialog.Footer>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>{`Are you sure you want to delete "${filename}"?`}</Dialog.Title>
+          <Dialog.Description>Once deleted, this file cannot be restored</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
           <Button
             variant="danger"
             onClick={() => {
@@ -27,9 +27,11 @@ export const DeleteFileDialog = ({ filename, isOpen, setIsOpen }: DeleteFileDial
           >
             Delete
           </Button>
-          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-        </AlertDialog.Footer>
-      </AlertDialog.Content>
-    </AlertDialog>
+          <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   ) : null;
 };

apps/playground/src/components/Header/ActionsDropdown/DeleteInstrumentDialog.tsx

@@ -1,4 +1,4 @@
-import { AlertDialog, Button } from '@douglasneuroinformatics/libui/components';
+import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
 
 import { useAppStore } from '@/store';
@@ -14,13 +14,13 @@ export const DeleteInstrumentDialog = ({ isOpen, setIsOpen }: DeleteInstrumentDi
   const selectedInstrument = useAppStore((store) => store.selectedInstrument);
 
   return (
-    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-      <AlertDialog.Content>
-        <AlertDialog.Header>
-          <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-          <AlertDialog.Description>This instrument will be deleted from local storage.</AlertDialog.Description>
-        </AlertDialog.Header>
-        <AlertDialog.Footer>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
+          <Dialog.Description>This instrument will be deleted from local storage.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
           <Button
             variant="danger"
             onClick={() => {
@@ -31,9 +31,11 @@ export const DeleteInstrumentDialog = ({ isOpen, setIsOpen }: DeleteInstrumentDi
           >
             Delete
           </Button>
-          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-        </AlertDialog.Footer>
-      </AlertDialog.Content>
-    </AlertDialog>
+          <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   );
 };

apps/playground/src/components/Header/ActionsDropdown/RestoreDefaultsDialog.tsx

@@ -1,4 +1,4 @@
-import { AlertDialog, Button } from '@douglasneuroinformatics/libui/components';
+import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
 
 import { useAppStore } from '@/store';
@@ -14,16 +14,16 @@ export const RestoreDefaultsDialog = ({ isOpen, setIsOpen }: RestoreDefaultsDial
   const resetSettings = useAppStore((store) => store.resetSettings);
 
   return (
-    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-      <AlertDialog.Content>
-        <AlertDialog.Header>
-          <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-          <AlertDialog.Description>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
+          <Dialog.Description>
             This action will <span className="font-bold uppercase">delete all user-defined instruments</span> in local
             storage and restore the default configuration.
-          </AlertDialog.Description>
-        </AlertDialog.Header>
-        <AlertDialog.Footer>
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
           <Button
             variant="danger"
             onClick={() => {
@@ -35,9 +35,11 @@ export const RestoreDefaultsDialog = ({ isOpen, setIsOpen }: RestoreDefaultsDial
           >
             Reset
           </Button>
-          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-        </AlertDialog.Footer>
-      </AlertDialog.Content>
-    </AlertDialog>
+          <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   );
 };