Fix TypeScript errors

.github/workflows/build.yml

@@ -40,7 +40,7 @@ jobs:
       - name: Check code
         run: pnpm prettier
 
-  rubocop-test:
+  rubocop:
     name: Rubocop
     runs-on: ubuntu-latest
     timeout-minutes: 10
@@ -130,3 +130,17 @@ jobs:
           SOLR_HOST: localhost
           SOLR_PORT: 8983
         run: bundle exec rspec
+
+  typescript:
+    name: TypeScript
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+      - name: Check code
+        run: pnpm tsc --noEmit

app/javascript/@types/RichText.d.ts

@@ -0,0 +1,17 @@
+declare namespace RichText {
+  type Element = HTMLTextAreaElement & { richtext: boolean };
+  type Replacement = [string, string, string];
+  type Action = (str?: string) => Replacement | void;
+  type Decoration = (str: string) => Replacement;
+
+  interface Decorator {
+    blockquote: Decoration;
+    bold: Decoration;
+    emphasis: Decoration;
+    image: Decoration;
+    spoiler: Decoration;
+    code: (string: string, lang: string) => Replacement;
+    link: (string: string, name: string) => Replacement;
+    quote: (html: string, username: string, link: string) => Replacement;
+  }
+}

app/javascript/@types/UserLink.d.ts

@@ -1,24 +1,20 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-namespace UserLink {
-  interface Link {
+declare namespace UserLink {
+  type Link = {
     id: number | null;
     label: string;
     name: string;
     url: string;
     deleted: boolean;
     handle: string;
-  }
+  };
 
-  interface State {
-    editing: boolean;
+  type State = {
+    editing: Link | null;
     userLinks: Link[];
-  }
+  };
 
-  interface Action {
-    type: string;
-    payload?: Link[] | Link;
-  }
+  type Action =
+    | { type: "add" | "cancel" }
+    | { type: "delete" | "edit" | "save" | "update"; payload: Link }
+    | { type: "reorder"; payload: Link[] };
 }
-
-/* eslint-enable @typescript-eslint/no-unused-vars */

app/javascript/@types/index.d.ts

@@ -1,29 +1,29 @@
-interface PostAttributes {
+type PostAttributes = {
   id: number;
   user_id: number;
   exchange_type: string;
   exchange_id?: number;
-}
+};
 
-interface UserAttributes {
+type UserAttributes = {
   id: number;
   username: string;
   admin: boolean;
   moderator: boolean;
-}
+};
 
-interface PostingStatusEvent extends CustomEvent {
+type PostingStatusEvent = CustomEvent & {
   detail: string;
-}
+};
 
-interface PostsLoadedEvent extends CustomEvent {
+type PostsLoadedEvent = CustomEvent & {
   detail: HTMLElement[];
-}
+};
 
-interface QuoteEvent extends CustomEvent {
+type QuoteEvent = CustomEvent & {
   detail: {
     username: string;
     permalink: string;
     html: string;
   };
-}
+};

app/javascript/application.ts

@@ -5,6 +5,9 @@ import Rails from "@rails/ujs";
 Rails.start();
 
 import Sugar from "./sugar";
+declare const window: Window & {
+  Sugar: typeof Sugar;
+};
 window.Sugar = Sugar;
 
 import readyHandler from "./lib/readyHandler";

app/javascript/components/EditUserLinks.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 
 import useUserLinks from "./EditUserLinks/useUserLinks";
 import Editor from "./EditUserLinks/Editor";
@@ -15,7 +15,7 @@ export default function EditUserLinks(props: EditUserLinksProps) {
 
   const enabledLinks = state.userLinks.filter((ul) => !ul.deleted);
 
-  const handleAdd = (evt: Event) => {
+  const handleAdd = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch({ type: "add" });
   };
@@ -31,14 +31,14 @@ export default function EditUserLinks(props: EditUserLinksProps) {
         />
       )}
       {!state.editing && (
-        <React.Fragment>
+        <Fragment>
           <List dispatch={dispatch} userLinks={enabledLinks} />
           <div className="buttons">
             <button type="button" onClick={handleAdd}>
               Add link
             </button>
           </div>
-        </React.Fragment>
+        </Fragment>
       )}
       {state.userLinks.map((ul, i) => (
         <Param key={ul.handle} userLink={ul} position={i + 1} />

app/javascript/components/EditUserLinks/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from "react";
+import { useState, ChangeEvent } from "react";
 
 import TypeaheadTextField from "../Input/TypeaheadTextField";
 
@@ -9,7 +9,7 @@ interface EditorProps {
   userLink: UserLink.Link;
 }
 
-function preventSubmit(evt: Event) {
+function preventSubmit(evt: React.KeyboardEvent) {
   if (evt.key === "Enter") {
     evt.preventDefault();
   }
@@ -29,12 +29,12 @@ export default function Editor(props: EditorProps) {
       updateAttribute(attr)(evt.target.value);
     };
 
-  const handleCancel = (evt: Event) => {
+  const handleCancel = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch({ type: "cancel" });
   };
 
-  const handleSave = (evt: Event) => {
+  const handleSave = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch({ type: "save", payload: userLink });
   };

app/javascript/components/EditUserLinks/List.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   DndContext,
   closestCenter,
@@ -30,8 +29,8 @@ export default function List(props: ListProps) {
 
     if (active.id !== over.id) {
       const ids = userLinks.map((o) => o.handle);
-      const oldIndex = ids.indexOf(active.id);
-      const newIndex = ids.indexOf(over.id);
+      const oldIndex = ids.indexOf(active.id as string);
+      const newIndex = ids.indexOf(over.id as string);
       props.dispatch({
         type: "reorder",
         payload: arrayMove(userLinks, oldIndex, newIndex)

app/javascript/components/EditUserLinks/Param.tsx

@@ -26,7 +26,7 @@ export default function Param(props: ParamProps) {
     return (
       <React.Fragment>
         <input name={name("id")} type="hidden" value={userLink.id} />
-        <input name={name("_destroy")} type="hidden" value={true} />
+        <input name={name("_destroy")} type="hidden" value={"true"} />
       </React.Fragment>
     );
   }

app/javascript/components/EditUserLinks/UserLink.tsx

@@ -1,19 +1,17 @@
-import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
-interface UserLinkProps {
+type Props = {
   dispatch: (action: UserLink.Action) => void;
-  labels: string[];
   position: number;
   userLink: UserLink.Link;
-}
+};
 
 function label(userLink: UserLink.Link) {
   return userLink.name || userLink.url.replace(/^(f|ht)tps?:\/\//, "");
 }
 
-export default function UserLink(props: UserLinkProps) {
+export default function UserLink(props: Props) {
   const { dispatch, userLink } = props;
 
   const {
@@ -27,12 +25,12 @@ export default function UserLink(props: UserLinkProps) {
 
   const style = { transform: CSS.Transform.toString(transform), transition };
 
-  const handleEdit = (evt: Event) => {
+  const handleEdit = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch({ type: "edit", payload: userLink });
   };
 
-  const handleDelete = (evt: Event) => {
+  const handleDelete = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch({ type: "delete", payload: userLink });
   };

app/javascript/components/EditUserLinks/useUserLinks.ts

@@ -36,7 +36,7 @@ function saveUserLink(state: UserLink.State, userLink: UserLink.Link) {
       }
     });
   } else {
-    userLinks = userLinks.concat({ ...userLink, new: false });
+    userLinks = userLinks.concat({ ...userLink });
   }
   return { ...state, userLinks: userLinks, editing: null };
 }
@@ -69,8 +69,6 @@ function reducer(
       return saveUserLink(state, action.payload);
     case "update":
       return updateLink(state, action.payload);
-    default:
-      return state;
   }
 }
 

app/javascript/components/Input/Menu.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 
-export default function Menu(props: { children: JSX.Element }) {
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function Menu(props: Props) {
   return (
     <ul className="dropdown-menu" {...props}>
       {props.children}

app/javascript/components/Input/MenuItem.tsx

@@ -1,14 +1,10 @@
-import React from "react";
-
-interface MenuItemProps {
-  item: string;
-  index: number;
+interface Props {
   isActive: boolean;
   isSelected: boolean;
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
-export default function MenuItem(props: MenuItemProps) {
+export default function MenuItem(props: Props) {
   const classNames = [];
   if (props.isActive) {
     classNames.push("active");

app/javascript/components/Input/TypeaheadTextField.tsx

@@ -1,32 +1,31 @@
-import React from "react";
-import Downshift, { DownshiftState } from "downshift";
+import Downshift, { StateChangeOptions } from "downshift";
 import { matchSorter } from "match-sorter";
 
 import Menu from "./Menu";
 import MenuItem from "./MenuItem";
 
-interface TypeaheadTextFieldProps {
-  autoFocus: boolean;
+interface Props {
   label: string;
   name: string;
   onChange: (value: string) => void;
-  onKeyDown: (evt: KeyboardEvent) => void | Promise<void>;
+  onKeyDown: (evt: React.KeyboardEvent) => void | Promise<void>;
   options: string[];
-  size: number;
   value: string;
-  onFocus?: (evt: FocusEvent) => void | Promise<void>;
+  size?: number;
+  autoFocus?: boolean;
+  onFocus?: (evt: React.FocusEvent) => void | Promise<void>;
 }
 
-export default function TypeaheadTextField(props: TypeaheadTextFieldProps) {
+export default function TypeaheadTextField(props: Props) {
   const { label, name, onChange, options, size, value } = props;
 
-  const handleKeyDown = (evt: KeyboardEvent) => {
+  const handleKeyDown = (evt: React.KeyboardEvent) => {
     if (props.onKeyDown) {
       void props.onKeyDown(evt);
     }
   };
 
-  const handleStateChange = (changes: DownshiftState<string>) => {
+  const handleStateChange = (changes: StateChangeOptions<string>) => {
     if ("selectedItem" in changes) {
       onChange(changes.selectedItem);
     } else if (changes.inputValue) {
@@ -58,15 +57,15 @@ export default function TypeaheadTextField(props: TypeaheadTextFieldProps) {
               autoFocus={props.autoFocus}
               type="text"
               name={name}
-              size={size}
+              size={size || 20}
               {...getInputProps({
                 isOpen,
                 onFocus: props.onFocus,
                 onKeyDown: handleKeyDown
               })}
             />
             {selectedItem ? (
-              <button onClick={clearSelection}>
+              <button onClick={() => clearSelection()}>
                 <i className="fa-solid fa-xmark" />
               </button>
             ) : (

app/javascript/components/InviteParticipant.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import TypeaheadTextField from "./Input/TypeaheadTextField";