Merge pull request #825 from gjoseph/eslint-replace-eslint-config-rea…

…ct-app

Replace eslint-config-react-app

tichu-clients/package.json

@@ -15,7 +15,7 @@
     "prepare": "cd .. && husky tichu-clients/.husky",
     "build": "npm run build -ws",
     "test": "npm run test -ws # ⚠️ tichu-web will run tests in watch mode when not on CI",
-    "lint": "npm run lint -w tichu-web # ⚠️ eslint not currently setup for other packages",
+    "lint": "npm run build -ws &&  npm run lint -w tichu-web # ⚠️ eslint not currently setup for other packages ⚠️pre-build as a workaround while we figure out module stuff (See #829)",
     "term-client": "npm run start -w tichu-term-client",
     "web": "npm run start -w tichu-web",
     "web-storybook": "npm run storybook -w tichu-web",

tichu-clients/packages/tichu-client-ts-lib/src/messages.ts

@@ -1,5 +1,6 @@
 import { Card, CardShortName } from "./cards";
 import { UserId } from "./model";
+// @ts-expect-error moduleResolution:nodenext issue 54523
 import { nanoid } from "nanoid";
 
 export type MessageType =

tichu-clients/packages/tichu-client-ts-lib/src/ws-handler.ts

@@ -58,5 +58,5 @@ export interface TichuWebSocketHandler {
   ) => EnumValueVisitorCore<PlayResult, void>;
 
   // ==== Varia
-  debug: (...msg: any[]) => void;
+  debug: (...msg: unknown[]) => void;
 }

tichu-clients/packages/tichu-client-ts-lib/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2023", // when we had es2019, we left a comment to say that: Node doesn't understand nullish coalescing or optional chaining, so instruct ts to transpile
-    "module": "commonjs",
+    "module": "nodenext",
     "lib": ["es2023", "dom"],
     "declaration": true,
     "declarationMap": true,
@@ -10,8 +10,8 @@
     "rootDir": "./src",
     "strict": true,
     "types": ["node", "fs-extra"],
-    "esModuleInterop": true,
-    "moduleResolution": "node",
+    "esModuleInterop": false,
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "importHelpers": true
   },

tichu-clients/packages/tichu-web/package.json

@@ -39,16 +39,25 @@
       "project": true
     },
     "plugins": [
+      "jsx-a11y",
+      "import",
+      "react",
+      "react-hooks",
       "@typescript-eslint"
     ],
     "extends": [
       "eslint:recommended",
-      "react-app",
-      "plugin:@typescript-eslint/recommended",
+      "plugin:@typescript-eslint/recommended-type-checked",
+      "plugin:@typescript-eslint/stylistic-type-checked",
       "plugin:react/recommended",
       "plugin:react-hooks/recommended",
       "prettier"
     ],
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
     "ignorePatterns": [
       "build",
       "lib",
@@ -69,7 +78,8 @@
           "**/*.stories.tsx"
         ],
         "rules": {
-          "import/no-anonymous-default-export": "off"
+          "import/no-anonymous-default-export": "off",
+          "@typescript-eslint/no-unsafe-assignment": "off"
         }
       }
     ]
@@ -102,10 +112,12 @@
     "@storybook/addon-storysource": "8.4.7",
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
+    "@typescript-eslint/eslint-plugin": "8.18.0",
     "@vitejs/plugin-react": "4.3.4",
     "eslint": "8.57.1",
     "eslint-config-prettier": "9.1.0",
-    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "5.0.0",

tichu-clients/packages/tichu-web/src/Log.ts

@@ -6,15 +6,15 @@ export class Log {
     readonly newActivityLog: (newMessage: ActivityLogMessage) => void,
   ) {}
 
-  error(...msg: any[]) {
+  error(...msg: unknown[]) {
     console.error(...msg);
     this.newActivityLog({
       debug: true,
       message: [...msg].join(" ➡️ "),
     });
   }
 
-  debug(...msg: any[]) {
+  debug(...msg: unknown[]) {
     if (this.isDebug) {
       console.debug(...msg);
       this.newActivityLog({

tichu-clients/packages/tichu-web/src/components/ActivityLog.tsx

@@ -3,13 +3,16 @@ import styles from "./ActivityLog.module.css";
 
 // The component's model will likely be different from the actual websocket messages:
 // I expect we'll have a richer type for activity logs rather than a boolean for debug messages
-export type ActivityLogMessage = { message: string; debug: boolean };
+export interface ActivityLogMessage {
+  message: string;
+  debug: boolean;
+}
 
 export const ActivityLog: FC<{
   log: ActivityLogMessage[];
   showDebug?: boolean;
 }> = (props) => {
-  const [showDebug, setShowDebug] = useState(props.showDebug || false);
+  const [showDebug, setShowDebug] = useState(props.showDebug ?? false);
   return (
     <div>
       <h3>Activity log</h3>

tichu-clients/packages/tichu-web/src/components/CardView.tsx

@@ -1,11 +1,5 @@
 import React, { FC } from "react";
-import {
-  Card,
-  CardSuit,
-  NormalCard,
-  SpecialCard,
-  SpecialCards,
-} from "tichu-client-ts-lib";
+import { Card, CardSuit, SpecialCards } from "tichu-client-ts-lib";
 import { mapEnumValue } from "ts-enum-util";
 import { classes } from "../util";
 import styles from "./Card.module.css";
@@ -23,7 +17,7 @@ interface CardViewProps {
 
 const colorFor = (card: Card) => {
   if (card.type === "normal") {
-    return mapEnumValue((card as NormalCard).suit).with({
+    return mapEnumValue(card.suit).with({
       [CardSuit.Jade]: "#060",
       [CardSuit.Sword]: "#000",
       [CardSuit.Pagoda]: "#359",
@@ -36,14 +30,13 @@ const colorFor = (card: Card) => {
 
 const symbolFor = (card: Card): string => {
   if (card.type === "normal") {
-    const nCard = card as NormalCard;
-    if (nCard.number > 10) {
-      return ["J", "Q", "K", "A"][nCard.number - 11]; // wooh untested magic
+    if (card.number > 10) {
+      return ["J", "Q", "K", "A"][card.number - 11]; // wooh untested magic
     } else {
-      return nCard.number.toString();
+      return card.number.toString();
     }
   } else {
-    return mapEnumValue((card as SpecialCard).special).with({
+    return mapEnumValue(card.special).with({
       [SpecialCards.MahJong]: "1",
       [SpecialCards.Dog]: "🐶",
       [SpecialCards.Phoenix]: "🦚",

tichu-clients/packages/tichu-web/src/components/Hand.tsx

@@ -16,12 +16,13 @@ const SendButton: FC<{
 };
 
 export type SelectableCard = Card & { selected: boolean };
+type CardsToSelectableCards = (cards: Card[]) => SelectableCard[];
 type SendCardsFunction = (cards: Card[]) => void;
 
 export const Hand: FC<{ sendCards: SendCardsFunction; cardsInHand: Card[] }> = (
   props,
 ) => {
-  const allUnselected = (cards: Card[]) => {
+  const allUnselected: CardsToSelectableCards = (cards: Card[]) => {
     return cards.map((c) => {
       return { ...c, selected: false };
     });
@@ -34,7 +35,7 @@ export const Hand: FC<{ sendCards: SendCardsFunction; cardsInHand: Card[] }> = (
   }, [props.cardsInHand]);
 
   const handleSelect = (card: Card) => {
-    setCards((oldList) => {
+    setCards(() => {
       return cards.map((c) => {
         if (c.shortName === card.shortName) {
           c.selected = !c.selected;

tichu-clients/packages/tichu-web/src/model/GameState.ts

@@ -11,7 +11,7 @@ export class GameState {
     // currentPlayer only comes through net.incongru.tichu.action.impl.PlayerPlaysResponse#nextPlayer currently
 
     readonly currentPlayer: UserId | undefined,
-    readonly hand: Array<Card>,
+    readonly hand: Card[],
     readonly otherPlayers: {
       id: UserId;
       cardsInHand: number;

tichu-clients/packages/tichu-web/src/react-utils.ts

@@ -8,32 +8,33 @@ import React from "react";
  * Copied and adapted from https://joshwcomeau.com/react/persisting-react-state-in-localstorage/
  *
  * @param key the key used to store this state in localStorage against.
- * @param defaultValue can be a value of type T, a function that returns T or undefined, or undefined.
+ * @param defaultValue is an optional function that returns T or undefined.
  * @return an array of [current value, dispatcher to set the value to a new value, a function to unset and remove the value from the store]
  */
 export function useStoredState<T>(
   key: string,
-  defaultValue?: T | (() => T | undefined) | undefined,
+  defaultValue?: () => T | undefined,
 ): [
   T | undefined,
   React.Dispatch<React.SetStateAction<T | undefined>>,
   () => void,
 ] {
-  const [value, setValue] = React.useState<T | undefined>(() => {
+  const [value, setValue] = React.useState<T | undefined>((): T | undefined => {
     const stickyValue = window.localStorage.getItem(key);
     // localStorage returns an explicit null rather than undefined here. We could != undefined, but I'd rather stick
     // to the correct equality check than approximate consistency.
     if (stickyValue !== null) {
       try {
-        return JSON.parse(stickyValue);
-      } catch (e) {
+        return JSON.parse(stickyValue) as T;
+      } catch (e: unknown) {
         console.error(
-          `Could not parse value for ${key}: ${stickyValue}: ${e}, restoring defaults.`,
+          `Could not parse value for ${key}: ${stickyValue}, restoring defaults.`,
+          e,
         );
         window.localStorage.removeItem(key);
       }
     }
-    return defaultValue;
+    return defaultValue ? defaultValue() : undefined;
   });
   React.useEffect(() => {
     if (value === undefined) {

tichu-clients/packages/tichu-web/src/stories/ActivityLog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ActivityLog } from "../components/ActivityLog";
 import { disableControls, makeStory } from "./stories";
-import { Args, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 export default {
   title: "Activity Log",
@@ -16,10 +16,10 @@ const sampleMessages = [
   { message: "This is another message", debug: false },
 ];
 
-export const MessageStylesWithDebugOn = makeStory((args: Args) => {
+export const MessageStylesWithDebugOn = makeStory(() => {
   return <ActivityLog showDebug log={sampleMessages} />;
 });
 
-export const MessageStylesWithDebugOff = makeStory((args: Args) => {
+export const MessageStylesWithDebugOff = makeStory(() => {
   return <ActivityLog log={sampleMessages} />;
 });

tichu-clients/packages/tichu-web/src/stories/Card.stories.tsx

@@ -59,7 +59,7 @@ export const Card_Front = makeStory(
   (args: Args) => {
     return (
       <CardView
-        card={cardFromName(args.cardName)}
+        card={cardFromName(args.cardName as string)}
         selected={args.selected}
         size={args.size}
         {...events}

tichu-clients/packages/tichu-web/src/stories/CardSet.stories.tsx

@@ -30,7 +30,7 @@ const events = actions("onCardClick");
 export const Card_Set: StoryFn = makeStory((args: Args) => {
   const cards = [...AllCards]
     .sort(() => Math.random() - 0.5)
-    .slice(0, args.cardCount)
+    .slice(0, args.cardCount as number)
     .map((c) => ({ ...c, selected: false }));
   return (
     <CardSet

tichu-clients/packages/tichu-web/src/stories/Chat.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Chat, ChatMessage } from "../components/Chat";
 import { actions } from "@storybook/addon-actions";
 import { disableControls, makeStory } from "./stories";
-import { Args, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 export default {
   title: "Chat",
@@ -34,27 +34,27 @@ const sampleMessages: ChatMessage[] = [
   },
 ];
 
-const dup = (a: any[]) => {
+function dup<T>(a: T[]) {
   return [...a, ...a];
-};
+}
 
 const longSampleChat: ChatMessage[] = dup(
   dup(dup(dup(dup(dup(dup(dup(dup(dup(sampleMessages))))))))),
 );
 
-export const ChatOpenEmpty = makeStory((args: Args) => {
+export const ChatOpenEmpty = makeStory(() => {
   return <Chat chatMessages={[]} {...events} />;
 });
 
-export const ChatOpen = makeStory((args: Args) => {
+export const ChatOpen = makeStory(() => {
   return <Chat chatMessages={sampleMessages} {...events} />;
 });
 
-export const ChatOpenLong = makeStory((args: Args) => {
+export const ChatOpenLong = makeStory(() => {
   return <Chat chatMessages={longSampleChat} {...events} />;
 });
 
-export const SendNewMessage = makeStory((args: Args) => {
+export const SendNewMessage = makeStory(() => {
   const [chatMessages, setChatMessages] = useState(
     new Array<ChatMessage>({
       from: "Storybook",

tichu-clients/packages/tichu-web/src/stories/ConnectivityIndicator.stories.tsx

@@ -3,7 +3,7 @@ import {
   ConnectivityColors,
   ConnectivityIndicator,
 } from "../components/ConnectivityIndicator";
-import { Args, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { disableControls, makeStory } from "./stories";
 
 export default {
@@ -12,7 +12,7 @@ export default {
   parameters: disableControls,
 } as Meta;
 
-export const SimpleStates = makeStory((args: Args) => (
+export const SimpleStates = makeStory(() => (
   <div style={{ width: "100px" }}>
     <ConnectivityIndicator wsConnected={false} networkConnected={false} />
     <hr />

tichu-clients/packages/tichu-web/src/stories/Game.stories.tsx

@@ -4,7 +4,7 @@ import { actions } from "@storybook/addon-actions";
 import { cardFromName } from "tichu-client-ts-lib";
 import { GameState } from "../model/GameState";
 import { disableControls, makeStory } from "./stories";
-import { Args, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 export default {
   title: "Game",
@@ -14,7 +14,7 @@ export default {
 
 const events = actions("sendMessage");
 
-export const sample_Game = makeStory((args: Args) => {
+export const sample_Game = makeStory(() => {
   const hand = [cardFromName("*P"), cardFromName("GJ"), cardFromName("K6")];
   return (
     <Game
@@ -30,7 +30,7 @@ export const sample_Game = makeStory((args: Args) => {
   );
 });
 
-export const simulate_room = makeStory((args: Args) => {
+export const simulate_room = makeStory(() => {
   return <SimuRoom />;
 });
 

tichu-clients/packages/tichu-web/src/stories/Hand.stories.tsx

@@ -2,7 +2,7 @@ import { actions } from "@storybook/addon-actions";
 import React from "react";
 import { cardFromName } from "tichu-client-ts-lib";
 import { Hand } from "../components/Hand";
-import { Args, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { disableControls, makeStory } from "./stories";
 
 export default {
@@ -12,7 +12,7 @@ export default {
 } as Meta;
 const events = actions("sendCards");
 
-export const sample_Hand = makeStory((args: Args) => {
+export const sample_Hand = makeStory(() => {
   const hand = [cardFromName("*P"), cardFromName("GJ"), cardFromName("K6")];
   return <Hand cardsInHand={hand} {...events} />;
 });