From 9d3dc72528e8994387c5d656450fc501de146041 Mon Sep 17 00:00:00 2001
From: Tanner Stirrat <tstirrat@gmail.com>
Date: Thu, 23 Jan 2025 10:41:24 -0700
Subject: [PATCH 1/3] Be explicit about available values

---
 src/playground-ui/ConfirmDialog.tsx         | 26 +++++----
 src/playground-ui/ConfirmDialogProvider.tsx | 59 ++++++++++++---------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/playground-ui/ConfirmDialog.tsx b/src/playground-ui/ConfirmDialog.tsx
index 5da9528..1057003 100644
--- a/src/playground-ui/ConfirmDialog.tsx
+++ b/src/playground-ui/ConfirmDialog.tsx
@@ -8,10 +8,12 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
 import React, { useState } from "react";
 
+export type ConfirmValue  = "undefined" | "load" | "replace"
+
 /**
  * ConfirmDialogButton is a button in the confirm dialog.
  */
-export interface ConfirmDialogButton<B extends string> {
+export interface ConfirmDialogButton {
     /**
      * title is the title of the button.
      */
@@ -20,7 +22,7 @@ export interface ConfirmDialogButton<B extends string> {
     /**
      * value is the value to given to the callback if the button is clicked.
      */
-    value: B
+    value?: ConfirmValue
 
     /**
      * color is the color of the button. Default is `default`.
@@ -38,12 +40,12 @@ export interface ConfirmDialogButton<B extends string> {
     isEnabled?: (promptValue?: string) => boolean
 }
 
-export type ConfirmCallback<B extends string> = (value: B, promptValue?: string) => void;
+export type ConfirmCallback = (value: ConfirmValue, promptValue?: string) => void;
 
 /**
  * ConfirmDialogProps are the props for the confirm dialog.
  */
-export interface ConfirmDialogProps<B extends string> {
+export interface ConfirmDialogProps {
     /**
      * isOpen indicates whether the ConfirmDialog is currently open.
      */
@@ -54,7 +56,7 @@ export interface ConfirmDialogProps<B extends string> {
      * returns the value clicked. If the [X] is clicked, the `value` will be
      * undefined.
      */
-    handleComplete: ConfirmCallback<B>
+    handleComplete: ConfirmCallback
 
     /**
      * title is the title of the confirm.
@@ -69,7 +71,7 @@ export interface ConfirmDialogProps<B extends string> {
     /**
      * buttons are the buttons on the confirm dialog.
      */
-    buttons: ConfirmDialogButton<B>[]
+    buttons: ConfirmDialogButton[]
 
 
     /**
@@ -97,13 +99,15 @@ const useStyles = makeStyles((theme: Theme) =>
  *                         title="My confirm" content="Hi there!"
  *                         buttons={[{"title": "Close", "value": undefined}]}/>
  */
-export function ConfirmDialog<B extends string>(props: ConfirmDialogProps<B>) {
+export function ConfirmDialog(props: ConfirmDialogProps) {
     const [promptValue, setPromptValue] = useState('');
     const classes = useStyles();
 
-    const handleComplete = (value: any) => {
-        props.handleComplete(value as B, promptValue);
-        setPromptValue('');
+    const handleComplete = (value: ConfirmValue | undefined) => {
+        if (value) {
+            props.handleComplete(value, promptValue);
+            setPromptValue('');
+        }
     };
 
     return <Dialog
@@ -124,7 +128,7 @@ export function ConfirmDialog<B extends string>(props: ConfirmDialogProps<B>) {
             </DialogContentText>
         </DialogContent>
         <DialogActions>
-            {props.buttons.map((button: ConfirmDialogButton<B>, index: number) => {
+            {props.buttons.map((button: ConfirmDialogButton, index: number) => {
                 return <Button key={index} variant={button.variant}
                     onClick={() => handleComplete(button.value)}
                     color={button.color}
diff --git a/src/playground-ui/ConfirmDialogProvider.tsx b/src/playground-ui/ConfirmDialogProvider.tsx
index 41de00d..54a5f84 100644
--- a/src/playground-ui/ConfirmDialogProvider.tsx
+++ b/src/playground-ui/ConfirmDialogProvider.tsx
@@ -1,78 +1,85 @@
-import React, {
-  PropsWithChildren,
+import {
   useCallback,
   useContext,
   useState,
+  createContext,
+  type ReactNode,
 } from "react";
 import {
   ConfirmCallback,
   ConfirmDialog,
   ConfirmDialogButton,
+  type ConfirmValue
 } from "./ConfirmDialog";
 
-export interface ConfirmProps<B extends string> {
+export interface ConfirmProps {
   /**
    * title is the title of the confirm.
    */
-  title: React.ReactNode;
+  title: ReactNode;
 
   /**
    * content is the content of the confirm.
    */
-  content: React.ReactNode;
+  content: ReactNode;
 
   /**
    * buttons are the buttons on the confirm dialog.
    */
-  buttons: ConfirmDialogButton<B>[];
+  buttons: ConfirmDialogButton[];
 
   /**
    * withPrompt, if specified, indicates a prompt should be displayed with
    * the given string as the placeholder.
    */
   withPrompt?: string;
+
+  children?: ReactNode;
 }
 
-export type ShowConfirm = <B extends string>(
-  props: ConfirmProps<B>,
-  callback: ShowConfirmCallback<B>
-) => any;
-export type ShowConfirmCallback<B extends string> = (
-  result: [B, string | undefined]
+export type ShowConfirm = (
+  props: ConfirmProps,
+  callback: ShowConfirmCallback
+) => void;
+export type ShowConfirmCallback = (
+  result: [ConfirmValue, string | undefined]
 ) => void;
 
-const ConfirmDialogContext = React.createContext<ShowConfirm | undefined>(
+const ConfirmDialogContext = createContext<ShowConfirm | undefined>(
   undefined
 );
 
 /**
  * ConfirmDialogProvider provides the confirm dialog UI.
  */
-export function ConfirmDialogProvider(props: PropsWithChildren<any>) {
-  const [confirmProps, setConfirmProps] = useState<ConfirmProps<string>>({
+export function ConfirmDialogProvider(props: { children: ReactNode }) {
+    // TODO: this is likely derived state and should be passed through.
+  const [confirmProps, setConfirmProps] = useState<ConfirmProps>({
     title: "",
     content: "",
     buttons: [],
   });
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  // TODO: this should be a useCallback, probably
   const [confirmCallback, setConfirmCallback] = useState<{
-    callback: ConfirmCallback<string> | undefined;
+    callback: ConfirmCallback | undefined;
   }>({ callback: undefined });
 
-  const showConfirm = <B extends string>(
-    props: ConfirmProps<B>,
-    callback: ShowConfirmCallback<B>
+  // TODO: this should be memoized.
+  const showConfirm = (
+    props: ConfirmProps,
+    callback: ShowConfirmCallback
   ) => {
     setConfirmProps(props);
     setConfirmCallback({
-      callback: (value: string, promptValue?: string) => {
-        callback([value as B, promptValue]);
+      callback: (value: ConfirmValue, promptValue?: string) => {
+        callback([value, promptValue]);
       },
     });
     setIsConfirmOpen(true);
   };
 
-  const handleCompleted = (value: string, promptValue?: string) => {
+  const handleCompleted = (value: ConfirmValue, promptValue?: string) => {
     if (confirmCallback.callback !== undefined) {
       confirmCallback.callback(value, promptValue);
     }
@@ -81,7 +88,7 @@ export function ConfirmDialogProvider(props: PropsWithChildren<any>) {
 
   return (
     <>
-      <ConfirmDialog<string>
+      <ConfirmDialog
         isOpen={isConfirmOpen}
         handleComplete={handleCompleted}
         {...confirmProps}
@@ -111,10 +118,10 @@ export function useConfirmDialog() {
   }
 
   const showConfirm = useCallback(
-    <B extends string>(props: ConfirmProps<B>) => {
-      const promise = new Promise<[B, string?]>(
+    (props: ConfirmProps) => {
+      const promise = new Promise<[ConfirmValue, string?]>(
         (
-          resolve: (value: [B, string?] | PromiseLike<[B, string?]>) => void
+          resolve: (value: [ConfirmValue, string?] | PromiseLike<[ConfirmValue, string?]>) => void
         ) => {
           showConfirmCallback(props, resolve);
         }

From b96077d507de04b3849c833159224fb2aeada0e3 Mon Sep 17 00:00:00 2001
From: Tanner Stirrat <tstirrat@gmail.com>
Date: Thu, 23 Jan 2025 10:44:52 -0700
Subject: [PATCH 2/3] Add slightly better typing to types.d.ts

---
 src/types.d.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/types.d.ts b/src/types.d.ts
index ae702a4..ae35f8e 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -3,12 +3,12 @@
 export {}
 
 declare module '*.yaml' {
-    const data: any
+    const data: object
     export default data
 }
 
 declare module '*.md' {
-    const data: any
+    const data: object
     export default data
 }
 
@@ -18,13 +18,17 @@ declare module 'string.prototype.replaceall' {
 }
 
 declare module 'visjs-network' {
-    const data: any
+    const data: object
     export default data
 }
 
 declare global {
     interface Window {
         // TODO: type this based on what's in wasm_exec.js
-        Go: any;
+        Go: new () => {
+            importObject: WebAssembly.Imports;
+            run: (instance: object) => void;
+        };
+        Crate: new (options: Options) => Crate;
     }
 }

From 51749ff8dc00c6d74aad35e6920f85a274a8ae72 Mon Sep 17 00:00:00 2001
From: Tanner Stirrat <tstirrat@gmail.com>
Date: Thu, 23 Jan 2025 10:45:12 -0700
Subject: [PATCH 3/3] Lint fixes

---
 src/components/FullPlayground.tsx         |  2 +-
 src/playground-ui/ConfirmDialog.tsx       |  2 +-
 src/playground-ui/DiscordChatCrate.tsx    |  2 +-
 src/playground-ui/GoogleAnalyticsHook.tsx | 15 +++++++++------
 src/playground-ui/TabPanel.tsx            |  4 ++--
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/FullPlayground.tsx b/src/components/FullPlayground.tsx
index 6364620..f7bd447 100644
--- a/src/components/FullPlayground.tsx
+++ b/src/components/FullPlayground.tsx
@@ -602,7 +602,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
   >(undefined);
 
   const conductValidation = () => {
-    validationService.conductValidation((validated: boolean) => {
+    validationService.conductValidation(() => {
       return false;
     });
   };
diff --git a/src/playground-ui/ConfirmDialog.tsx b/src/playground-ui/ConfirmDialog.tsx
index 1057003..b541d3f 100644
--- a/src/playground-ui/ConfirmDialog.tsx
+++ b/src/playground-ui/ConfirmDialog.tsx
@@ -8,7 +8,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
 import React, { useState } from "react";
 
-export type ConfirmValue  = "undefined" | "load" | "replace"
+export type ConfirmValue  = "undefined" | "load" | "replace" | "nevermind"
 
 /**
  * ConfirmDialogButton is a button in the confirm dialog.
diff --git a/src/playground-ui/DiscordChatCrate.tsx b/src/playground-ui/DiscordChatCrate.tsx
index 98ecdf5..47de5d6 100644
--- a/src/playground-ui/DiscordChatCrate.tsx
+++ b/src/playground-ui/DiscordChatCrate.tsx
@@ -58,7 +58,7 @@ const loadFromCDN = () =>
     script.src = CDN_URL;
     document.head.appendChild(script);
 
-    script.onload = () => resolve((window as any).Crate);
+    script.onload = () => resolve(window.Crate);
     script.onerror = () => reject('Failed to load Crate!');
   });
 
diff --git a/src/playground-ui/GoogleAnalyticsHook.tsx b/src/playground-ui/GoogleAnalyticsHook.tsx
index 793998a..85a5e53 100644
--- a/src/playground-ui/GoogleAnalyticsHook.tsx
+++ b/src/playground-ui/GoogleAnalyticsHook.tsx
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 declare global {
     interface Window {
-        gtag: (kind: string, subkind: any, data?: Record<string, any>) => any
-        dataLayer: any[];
+        gtag: (kind: string, subkind: object | string, data?: Record<string, object | string | boolean>) => object
+        dataLayer: object[];
     }
 }
 
@@ -36,6 +36,9 @@ export const useGoogleAnalytics = (measurementId?: string) => {
         if (measurementId && !tagInjected) {
             // Configure Tags Manager.
             window.dataLayer = window.dataLayer || [];
+            // As of 2025-01 we're probably going to get rid of this file soon in favor
+            // of GTM.
+            // eslint-disable-next-line prefer-rest-params
             window.gtag = window.gtag || function () { window.dataLayer.push(arguments) };
             window.gtag('js', new Date());
             window.gtag('config', measurementId);
@@ -54,25 +57,25 @@ export const useGoogleAnalytics = (measurementId?: string) => {
         }
     });
 
-    const pushEvent = (eventName: string, eventParams: Record<string, any>) => {
+    const pushEvent = (eventName: string, eventParams: Record<string, object | string | boolean>) => {
         if (!tagInjected) {
             return
         }
         window.gtag('event', eventName, eventParams);
     };
 
-    const setValue = (valueKey: string, value: Record<string, any>) => {
+    const setValue = (valueKey: string, value: Record<string, object>) => {
         if (!tagInjected) {
             return
         }
         window.gtag('set', valueKey, value);
     };
 
-    const setUser = (userData: Record<string, any>) => {
+    const setUser = (userData: Record<string, object>) => {
         if (userSet) { return; }
         setValue('user', userData);
         userSet = true;
     };
 
     return { initialized: !!measurementId, setValue: setValue, pushEvent: pushEvent, setUser: setUser };
-};
\ No newline at end of file
+};
diff --git a/src/playground-ui/TabPanel.tsx b/src/playground-ui/TabPanel.tsx
index 38bf117..6188164 100644
--- a/src/playground-ui/TabPanel.tsx
+++ b/src/playground-ui/TabPanel.tsx
@@ -12,12 +12,12 @@ export interface TabPanelProps {
     /**
      * index is the index for which, if the value matches, the tab is displayed.
      */
-    index: any;
+    index: string;
 
     /**
      * value is the current tab value.
      */
-    value: any;
+    value: string;
 
     /**
      * className is the custom classname for the TabPanel.