gjoseph · gjoseph · Dec 9, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -52,6 +52,7 @@ jobs:
       fail-fast: false # continue other jobs if one in matrix fails
       matrix:
         npm-command: [
+            "lint",
             "build",
             "test", # while tichu-client-ts-lib and tichu-term-client use ava and run tests after compiling main code, that's not the case for tichu-web, so running test additionally here
             "prettier-check-all",

diff --git a/tichu-clients/.gitignore b/tichu-clients/.gitignore
@@ -5,3 +5,4 @@ build/
 storybook-static/
 *.local
 *.log
+*.tsbuildinfo
diff --git a/tichu-clients/package-lock.json b/tichu-clients/package-lock.json
diff --git a/tichu-clients/package.json b/tichu-clients/package.json
@@ -15,6 +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",
     "term-client": "npm run start -w tichu-term-client",
     "web": "npm run start -w tichu-web",
     "web-storybook": "npm run storybook -w tichu-web",
@@ -26,8 +27,5 @@
     "packages/tichu-client-ts-lib",
     "packages/tichu-term-client",
     "packages/tichu-web"
-  ],
-  "overrides": {
-    "react-refresh": "0.14.2"
-  }
+  ]
 }
diff --git a/tichu-clients/packages/tichu-client-ts-lib/package.json b/tichu-clients/packages/tichu-client-ts-lib/package.json
@@ -16,7 +16,8 @@
     "tscov:d": "tscov --details",
     "publish-package": "npm run build && npm publish",
     "docs": "typedoc --out docs ./src",
-    "test": "npm run build"
+    "test": "npm run build",
+    "lint": "eslint src/"
   },
   "keywords": [],
   "author": "",
@@ -51,5 +52,10 @@
       },
       "compile": false
     }
+  },
+  "eslintConfig": {
+    "extends": [
+      "eslint:recommended"
+    ]
   }
 }
diff --git a/tichu-clients/packages/tichu-term-client/package.json b/tichu-clients/packages/tichu-term-client/package.json
@@ -19,7 +19,8 @@
     "tscov:d": "tscov --details",
     "publish-package": "npm run build && npm publish",
     "docs": "typedoc --out docs ./src",
-    "test": "npm run build"
+    "test": "npm run build",
+    "lint": "eslint src/"
   },
   "keywords": [],
   "author": "",
@@ -55,5 +56,10 @@
       },
       "compile": false
     }
+  },
+  "eslintConfig": {
+    "extends": [
+      "eslint:recommended"
+    ]
   }
 }
diff --git a/tichu-clients/packages/tichu-web/.storybook/main.js b/tichu-clients/packages/tichu-web/.storybook/main.js
diff --git a/tichu-clients/packages/tichu-web/.storybook/main.ts b/tichu-clients/packages/tichu-web/.storybook/main.ts
@@ -0,0 +1,31 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  stories: ["../src/**/*.@(mdx|stories.@(ts|tsx|js|jsx))"],
+
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-storysource",
+    "@chromatic-com/storybook",
+  ],
+  staticDirs: ["../public"],
+  typescript: {
+    // type-check stories during Storybook build
+    check: true,
+    reactDocgen: "react-docgen-typescript",
+  },
+
+  docs: {},
+
+  async viteFinal(config, options) {
+    //  we'll likely need a way to exclude websocket ("ws") like we did with webpack/craco!?
+    return config;
+  },
+};
+
+export default config;
diff --git a/tichu-clients/packages/tichu-web/craco.config.js b/tichu-clients/packages/tichu-web/craco.config.js
diff --git a/tichu-clients/packages/tichu-web/index.html b/tichu-clients/packages/tichu-web/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app but then migrated to Vite. I should really rewrite this file."
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/tichu-clients/packages/tichu-web/package.json b/tichu-clients/packages/tichu-web/package.json
@@ -11,14 +11,12 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.14",
     "@types/node": "22.10.1",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "notistack": "3.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-scripts": "5.0.1",
     "tichu-client-ts-lib": "1.0.0",
     "ts-enum-util": "4.1.0",
     "typescript": "5.7.2"
@@ -27,19 +25,45 @@
     "@emotion/styled": "11.13.5"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "lint": "eslint src/",
     "storybook": "storybook dev -p 9009",
     "build-storybook": "storybook build"
   },
   "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": true
+    },
+    "plugins": [
+      "@typescript-eslint"
+    ],
     "extends": [
+      "eslint:recommended",
       "react-app",
-      "react-app/jest"
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "prettier"
+    ],
+    "ignorePatterns": [
+      "build",
+      "lib",
+      "node_modules"
     ],
     "overrides": [
+      {
+        "files": [
+          "**/*"
+        ],
+        "rules": {
+          "@typescript-eslint/no-empty-function": "warn",
+          "@typescript-eslint/no-inferrable-types": "off"
+        }
+      },
       {
         "files": [
           "**/*.stories.tsx"
@@ -71,17 +95,27 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.2",
-    "@craco/craco": "7.1.0",
     "@storybook/addon-actions": "8.4.5",
     "@storybook/addon-docs": "8.4.5",
     "@storybook/addon-essentials": "8.4.5",
     "@storybook/addon-links": "8.4.5",
     "@storybook/addon-storysource": "8.4.5",
-    "@storybook/preset-create-react-app": "8.4.5",
     "@storybook/react": "8.4.5",
-    "@storybook/react-webpack5": "8.4.5"
+    "@storybook/react-vite": "8.4.7",
+    "@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-react-compiler": "19.0.0-beta-df7b47d-20241124",
+    "jsdom": "25.0.1",
+    "vite": "6.0.1",
+    "vite-plugin-eslint": "1.8.1",
+    "vite-plugin-svgr": "4.3.0",
+    "vitest": "2.1.8"
   },
+  "/*": "these overrides only exist because we still unfortunately indirectly depend on CRA for eslint-config-react-app",
   "overrides": {
-    "react-refresh": "0.14.2"
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0"
   }
 }
diff --git a/tichu-clients/packages/tichu-web/public/index.html b/tichu-clients/packages/tichu-web/public/index.html
diff --git a/tichu-clients/packages/tichu-web/src/components/CardSet.tsx b/tichu-clients/packages/tichu-web/src/components/CardSet.tsx
@@ -60,10 +60,12 @@ const withPosition =
   <P extends object>(
     Component: React.ComponentType<P>,
   ): React.FC<P & WithPositionProps> =>
+  // eslint-disable-next-line react/display-name
   ({ idx, totalCount, size, layout, ...props }: WithPositionProps) => {
     const { tx, ty, rot } = calcTransform(layout, size, idx, totalCount);
+    type Position = "absolute"; // typescript bug ? https://github.com/microsoft/TypeScript/issues/11465 -- this type should be Property.Position but it's not available here, so just faking it
     const styles = {
-      position: "absolute" as "absolute", // typescript bug ? https://github.com/microsoft/TypeScript/issues/11465
+      position: "absolute" as Position,
       transformOrigin: "center",
       transform: `translate(${tx}em, ${ty}em) rotate(${rot}deg)`,
     };

diff --git a/tichu-clients/packages/tichu-web/src/components/CardView.test.tsx b/tichu-clients/packages/tichu-web/src/components/CardView.test.tsx
@@ -2,10 +2,12 @@
 import { render } from "@testing-library/react";
 import { CardView } from "./CardView";
 import { cardFromName } from "tichu-client-ts-lib";
+import { test, expect } from "vitest";
+import "@testing-library/jest-dom/vitest";
 
 test("renders the card name", () => {
   const { getByText } = render(
    <CardView card={cardFromName("*P")} onClick={() => {}} selected={false} />,
  );
  expect(getByText(/Phoenix/)).toBeInTheDocument();
 });
diff --git a/tichu-clients/packages/tichu-web/src/components/Game.tsx b/tichu-clients/packages/tichu-web/src/components/Game.tsx
@@ -60,7 +60,7 @@ export const Game: FC<{ sendMessage: SendFunction; gameState: GameState }> = ({
           />
         ))}
       </div>
-      <p>It's {gameState.currentPlayer}'s turn</p>
+      <p>It&apos;s {gameState.currentPlayer}&apos;s turn</p>
       <Player>
         {gameState.hand ? (
           <Hand sendCards={sendCards} cardsInHand={gameState.hand} />

diff --git a/tichu-clients/packages/tichu-web/src/components/Room.tsx b/tichu-clients/packages/tichu-web/src/components/Room.tsx
@@ -34,7 +34,7 @@ export const Room: FC<{ user: User; websocketUrl: string }> = (props) => {
     setChatMessages((currentMessages) => [...currentMessages, newMessage]);
   };
   const sentChatMessage = (text: string, onResponse: OnResponse) => {
-    wsClient!.send(new OutgoingChatMessage(text), onResponse);
+    wsClient?.send(new OutgoingChatMessage(text), onResponse);
   };
 
   const [activityLog, setActivityLog] = useState(
@@ -68,17 +68,20 @@ export const Room: FC<{ user: User; websocketUrl: string }> = (props) => {
 
   useEffect(() => {
     connect();
-    // Return a cleanup function
-    return () => {};
+    return () => {
+      /* nothing to do on cleanup */
+    };
   }, [connect]);
 
-  const justWatch = () => {};
+  const justWatch = () => {
+    /* do nothing */
+  };
   // TODO also better deal with absent wsClient
   const join = (teamId: number) => () => {
-    wsClient!.send(new OutgoingGameMessage(new JoinParam(teamId)));
+    wsClient?.send(new OutgoingGameMessage(new JoinParam(teamId)));
   };
   const ready = () => {
-    wsClient!.send(new OutgoingGameMessage(new PlayerIsReadyParam()));
+    wsClient?.send(new OutgoingGameMessage(new PlayerIsReadyParam()));
   };
   const game = visitEnumValue(roomState.status).with<JSX.Element>({
     [RoomStatus.OPEN]: () => <p>Trying to connect</p>,
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ build/ @@
     storybook-static/
     *.local
     *.log
+    *.tsbuildinfo