Add lint rule to protect against this access on unbound methods (#32578)

* Add Actions to ViewModel utility types and specify `this: void` signature

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add https://typescript-eslint.io/rules/unbound-method/ linter to shared-components

also fix stray lint config which doesn't apply to SC

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add https://typescript-eslint.io/rules/unbound-method/ linter to element-web

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix genuine issues identified by the linter

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Specify this:void on i18napi

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Module API

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment for MapToVoidThis

Added utility type to map VM actions to unbound functions.

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

packages/shared-components/src/utils/Box/Box.tsx

@@ -55,7 +55,7 @@ export function Box({
     ...props
 }: React.PropsWithChildren<BoxProps>): JSX.Element {
     const style = useMemo(() => {
-        const style: Record<string, any> = {};
+        const style: Record<string, string> = {};
         if (flex) style["--mx-box-flex"] = flex;
         if (shrink) style["--mx-box-shrink"] = shrink;
         if (grow) style["--mx-box-grow"] = grow;

packages/shared-components/src/utils/Flex/Flex.tsx

@@ -11,6 +11,7 @@ import React, { type JSX, type ComponentProps, type JSXElementConstructor, useMe
 
 import styles from "./Flex.module.css";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
     /**
      * The type of the HTML element
@@ -60,6 +61,7 @@ type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any
 /**
  * A flexbox container helper
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">({
     as = "div",
     display = "flex",

packages/shared-components/src/utils/I18nApi.ts

@@ -21,7 +21,7 @@ export class I18nApi implements II18nApi {
     /**
      * Register translations for the module, may override app's existing translations
      */
-    public register(translations: Partial<Translations>): void {
+    public register(this: void, translations: Partial<Translations>): void {
         const langs: Record<string, Record<string, string>> = {};
 
         for (const key in translations) {
@@ -42,11 +42,9 @@ export class I18nApi implements II18nApi {
      * @param key - The key to translate
      * @param variables - Optional variables to interpolate into the translation
      */
-    public translate(key: TranslationKey, variables?: Variables): string {
+    public translate(this: void, key: TranslationKey, variables?: Variables): string {
         return _t(key, variables);
     }
 
-    public humanizeTime(timeMillis: number): string {
-        return humanizeTime(timeMillis, this);
-    }
+    public humanizeTime = (timeMillis: number): string => humanizeTime(timeMillis, this);
 }

packages/shared-components/src/utils/VirtualizedList/VirtualizedList.tsx

@@ -113,7 +113,7 @@ export interface IVirtualizedListProps<Item, Context> extends Omit<
 /**
  * Utility type for the prop scrollIntoViewOnChange allowing it to be memoised by a caller without repeating types
  */
-export type ScrollIntoViewOnChange<Item, Context = any> = NonNullable<
+export type ScrollIntoViewOnChange<Item, Context> = NonNullable<
     VirtuosoProps<Item, VirtualizedListContext<Context>>["scrollIntoViewOnChange"]
 >;
 
@@ -124,7 +124,7 @@ export type ScrollIntoViewOnChange<Item, Context = any> = NonNullable<
  * @template Item - The type of data items in the list
  * @template Context - The type of additional context data passed to items
  */
-export function VirtualizedList<Item, Context = any>(props: IVirtualizedListProps<Item, Context>): React.ReactElement {
+export function VirtualizedList<Item, Context>(props: IVirtualizedListProps<Item, Context>): React.ReactElement {
     // Extract our custom props to avoid conflicts with Virtuoso props
     const {
         items,