[FCE-235] Add lint/prettier to all packages (#11)

* Remove :xxx suffix from library package.json * Unify rules across packages * Fix ts-client eslint issues * Add format/lint to each package * Format all the files * Add ignore files
fishjam-cloud · Jul 3, 2024 · 95e59d4 · 95e59d4
1 parent bcf7ac1
commit 95e59d4
Show file tree

Hide file tree

Showing 54 changed files with 624 additions and 417 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react-hooks", "react-refresh"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+    "no-console": ["error", { allow: ["warn", "error"] }],
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+  },
+};
diff --git a/.github/workflows/node.yaml b/.github/workflows/node.yaml
@@ -29,7 +29,7 @@ jobs:
         run: yarn
 
       - name: Build 📦
-        run: npm run build
+        run: yarn build
 
       - name: Run types 👮
         run: yarn tsc

diff --git a/examples/react-client/minimal-react/.eslintignore copy b/examples/react-client/minimal-react/.eslintignore copy
@@ -0,0 +1,2 @@
+dist
+
diff --git a/examples/react-client/minimal-react/.eslintrc b/examples/react-client/minimal-react/.eslintrc
@@ -0,0 +1,4 @@
+{
+  "extends": ["../../../.eslintrc.js"],
+  "ignorePatterns": ["lib"],
+}
diff --git a/examples/react-client/minimal-react/package.json b/examples/react-client/minimal-react/package.json
@@ -8,7 +8,11 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "watch": "tsc --noEmit --watch",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write . --ignore-path ./.eslintignore",
+    "format:check": "prettier --check . --ignore-path ./.eslintignore",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
     "@fishjam-dev/react-client": "*",

diff --git a/examples/react-client/minimal-react/src/components/App.tsx b/examples/react-client/minimal-react/src/components/App.tsx
@@ -2,7 +2,13 @@ import VideoPlayer from "./VideoPlayer";
 import type { Client } from "@fishjam-dev/react-client";
 import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@fishjam-dev/react-client";
 import { useState } from "react";
-import { useConnect, useDisconnect, useClient, useStatus, useTracks } from "./client";
+import {
+  useConnect,
+  useDisconnect,
+  useClient,
+  useStatus,
+  useTracks,
+} from "./client";
 
 // Example metadata types for peer and track
 // You can define your own metadata types just make sure they are serializable
@@ -26,12 +32,18 @@ export const App = () => {
   {
     // for e2e test
     const client = useClient();
-    (window as unknown as { client: Client<PeerMetadata, TrackMetadata> }).client = client!;
+    (
+      window as unknown as { client: Client<PeerMetadata, TrackMetadata> }
+    ).client = client!;
   }
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-      <input value={token} onChange={(e) => setToken(() => e?.target?.value)} placeholder="token" />
+      <input
+        value={token}
+        onChange={(e) => setToken(() => e?.target?.value)}
+        placeholder="token"
+      />
       <div style={{ display: "flex", flexDirection: "row", gap: "8px" }}>
         <button
           disabled={token === "" || status === "joined"}
@@ -57,10 +69,16 @@ export const App = () => {
           disabled={status !== "joined"}
           onClick={() => {
             // Get screen sharing MediaStream
-            navigator.mediaDevices.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS).then((screenStream) => {
-              // Add local MediaStream to webrtc
-              screenStream.getTracks().forEach((track) => client.addTrack(track, { type: "screen" }));
-            });
+            navigator.mediaDevices
+              .getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS)
+              .then((screenStream) => {
+                // Add local MediaStream to webrtc
+                screenStream
+                  .getTracks()
+                  .forEach((track) =>
+                    client.addTrack(track, { type: "screen" }),
+                  );
+              });
           }}
         >
           Start screen share

diff --git a/examples/react-client/minimal-react/src/components/VideoPlayer.tsx b/examples/react-client/minimal-react/src/components/VideoPlayer.tsx
@@ -14,7 +14,9 @@ const VideoPlayer = ({ stream, peerId }: Props) => {
     videoRef.current.srcObject = stream || null;
   }, [stream]);
 
-  return <video autoPlay playsInline muted data-peer-id={peerId} ref={videoRef} />;
+  return (
+    <video autoPlay playsInline muted data-peer-id={peerId} ref={videoRef} />
+  );
 };
 
 export default VideoPlayer;
diff --git a/examples/react-client/minimal-react/src/components/client.ts b/examples/react-client/minimal-react/src/components/client.ts
@@ -3,5 +3,12 @@ import type { PeerMetadata, TrackMetadata } from "./App";
 
 // Create a Fishjam client instance
 // remember to use FishjamContextProvider
-export const { useClient, useTracks, useStatus, useConnect, useDisconnect, useSelector, FishjamContextProvider } =
-  create<PeerMetadata, TrackMetadata>();
+export const {
+  useClient,
+  useTracks,
+  useStatus,
+  useConnect,
+  useDisconnect,
+  useSelector,
+  FishjamContextProvider,
+} = create<PeerMetadata, TrackMetadata>();
diff --git a/examples/react-client/use-camera-and-microphone/.eslintignore copy b/examples/react-client/use-camera-and-microphone/.eslintignore copy
@@ -0,0 +1,2 @@
+dist
+
diff --git a/examples/react-client/use-camera-and-microphone/.eslintrc b/examples/react-client/use-camera-and-microphone/.eslintrc
@@ -0,0 +1,4 @@
+{
+  "extends": ["../../../.eslintrc.js"],
+  "ignorePatterns": ["lib"],
+}
diff --git a/examples/react-client/use-camera-and-microphone/package.json b/examples/react-client/use-camera-and-microphone/package.json
@@ -6,7 +6,11 @@
   "license": "Apache-2.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "format": "prettier --write . --ignore-path ./.eslintignore",
+    "format:check": "prettier --check . --ignore-path ./.eslintignore",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
     "@fishjam-dev/react-client": "*",

diff --git a/examples/react-client/use-camera-and-microphone/src/AdditionalControls.tsx b/examples/react-client/use-camera-and-microphone/src/AdditionalControls.tsx
@@ -11,7 +11,10 @@ import { useAtom } from "jotai";
 import VideoPlayer from "./VideoPlayer";
 import AudioVisualizer from "./AudioVisualizer";
 
-const showAdditionalComponentAtom = atomWithStorage("show-additional-component", false);
+const showAdditionalComponentAtom = atomWithStorage(
+  "show-additional-component",
+  false,
+);
 
 export const AdditionalControls = () => {
   const camera = useCamera();
@@ -36,15 +39,30 @@ export const AdditionalControls = () => {
       {show && (
         <div className="flex flex-row flex-wrap gap-2 p-2 md:grid md:grid-cols-2">
           <div className="grid grid-cols-2 gap-2">
-            <DeviceControls device={camera} type={"video"} status={status} metadata={MANUAL_VIDEO_TRACK_METADATA} />
-            <DeviceControls device={microphone} type={"audio"} status={status} metadata={MANUAL_AUDIO_TRACK_METADATA} />
+            <DeviceControls
+              device={camera}
+              type={"video"}
+              status={status}
+              metadata={MANUAL_VIDEO_TRACK_METADATA}
+            />
+            <DeviceControls
+              device={microphone}
+              type={"audio"}
+              status={status}
+              metadata={MANUAL_AUDIO_TRACK_METADATA}
+            />
           </div>
           <div>
             <h3>Local:</h3>
             <div className="max-w-[500px]">
-              {camera?.track?.kind === "video" && <VideoPlayer stream={camera?.stream} />}
+              {camera?.track?.kind === "video" && (
+                <VideoPlayer stream={camera?.stream} />
+              )}
               {microphone?.track?.kind === "audio" && (
-                <AudioVisualizer stream={microphone?.stream} trackId={microphone?.track.id} />
+                <AudioVisualizer
+                  stream={microphone?.stream}
+                  trackId={microphone?.track.id}
+                />
               )}
             </div>
           </div>

diff --git a/examples/react-client/use-camera-and-microphone/src/AudioVisualizer.tsx b/examples/react-client/use-camera-and-microphone/src/AudioVisualizer.tsx
@@ -54,7 +54,12 @@ export const AudioVisualizer = ({ stream, trackId }: Props) => {
       for (let i = 0; i < bufferLength; i++) {
         const barHeight = (dataArray[i] * 50) / 256;
         canvasContext.fillStyle = "#000000";
-        canvasContext.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+        canvasContext.fillRect(
+          x,
+          canvas.height - barHeight,
+          barWidth,
+          barHeight,
+        );
 
         x += barWidth + 1;
       }
@@ -68,7 +73,10 @@ export const AudioVisualizer = ({ stream, trackId }: Props) => {
   }, [stream, trackId]);
 
   return (
-    <div ref={canvasParentRef} className="flex flex-row flex-nowrap justify-center border-4">
+    <div
+      ref={canvasParentRef}
+      className="flex flex-row flex-nowrap justify-center border-4"
+    >
       <canvas ref={canvasRef} width={canvasWidth} height={100} />
     </div>
   );

diff --git a/examples/react-client/use-camera-and-microphone/src/DeviceControls.tsx b/examples/react-client/use-camera-and-microphone/src/DeviceControls.tsx
@@ -1,4 +1,9 @@
-import type { PeerStatus, CameraAPI, MicrophoneAPI, ScreenShareAPI } from "@fishjam-dev/react-client";
+import type {
+  PeerStatus,
+  CameraAPI,
+  MicrophoneAPI,
+  ScreenShareAPI,
+} from "@fishjam-dev/react-client";
 import type { TrackMetadata } from "./fishjamSetup";
 
 type DeviceControlsProps = {
@@ -19,7 +24,12 @@ type DeviceControlsProps = {
     }
 );
 
-export const DeviceControls = ({ device, type, status, metadata }: DeviceControlsProps) => {
+export const DeviceControls = ({
+  device,
+  type,
+  status,
+  metadata,
+}: DeviceControlsProps) => {
   return (
     <div className="flex flex-col gap-2">
       <button
@@ -60,7 +70,9 @@ export const DeviceControls = ({ device, type, status, metadata }: DeviceControl
       </button>
       <button
         className="btn btn-success btn-sm"
-        disabled={status !== "joined" || !device?.stream || !!device?.broadcast?.trackId}
+        disabled={
+          status !== "joined" || !device?.stream || !!device?.broadcast?.trackId
+        }
         onClick={() => {
           device?.addTrack(metadata);
         }}
@@ -69,7 +81,9 @@ export const DeviceControls = ({ device, type, status, metadata }: DeviceControl
       </button>
       <button
         className="btn btn-error btn-sm"
-        disabled={status !== "joined" || !device?.stream || !device?.broadcast?.trackId}
+        disabled={
+          status !== "joined" || !device?.stream || !device?.broadcast?.trackId
+        }
         onClick={() => {
           device?.removeTrack();
         }}

diff --git a/examples/react-client/use-camera-and-microphone/src/DeviceSelector.tsx b/examples/react-client/use-camera-and-microphone/src/DeviceSelector.tsx
@@ -10,7 +10,14 @@ type Props = {
   activeDevice: string | null;
 };
 
-export const DeviceSelector = ({ name, devices, setInput, defaultOptionText, activeDevice, stop }: Props) => {
+export const DeviceSelector = ({
+  name,
+  devices,
+  setInput,
+  defaultOptionText,
+  activeDevice,
+  stop,
+}: Props) => {
   const [selectedDevice, setSelectedDevice] = useState<string | null>(null);
 
   const onOptionChangeHandler = (event: ChangeEvent<HTMLSelectElement>) => {
@@ -24,7 +31,11 @@ export const DeviceSelector = ({ name, devices, setInput, defaultOptionText, act
       </div>
       <div className="flex flex-row items-center gap-2">
         <span>{name}</span>
-        <select className="select w-full max-w-xs" onChange={onOptionChangeHandler} defaultValue={defaultOptionText}>
+        <select
+          className="select w-full max-w-xs"
+          onChange={onOptionChangeHandler}
+          defaultValue={defaultOptionText}
+        >
           <option disabled>{defaultOptionText}</option>
           {(devices || []).map(({ deviceId, label }) => (
             <option key={deviceId} value={deviceId}>