Add prettier and linter check to PRs (#57)

* Bump dependencies

* Run prettier

* Remove prettier from examples

* Update .eslintrc

* Setup eslint

* Update workflows

* Update package.json in example

* fix typo

* Fix react-refresh lint

.eslintignore

@@ -1,4 +1,3 @@
-node_modules
 dist
-.github
 docs
+.vscode

.eslintrc

@@ -1,17 +1,18 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react-hooks"],
+  "plugins": ["@typescript-eslint", "react-hooks", "react-refresh"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/no-empty-function": "off",
-    "no-unused-vars": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
@@ -20,6 +21,7 @@
         "caughtErrorsIgnorePattern": "^_"
       }
     ],
-    "@typescript-eslint/no-explicit-any": ["off"]
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "react-refresh/only-export-components": ["warn", { "allowConstantExport": true }]
   }
 }

.github/workflows/node.yaml

@@ -1,4 +1,4 @@
-name: Node.js CI
+name: Check Pull Request
 
 on:
   push:
@@ -12,50 +12,52 @@ jobs:
     runs-on: ubuntu-latest
 
     strategy:
-        matrix:
-            node-version: [18.x]
+      matrix:
+        node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }} 🛎️
         uses: actions/setup-node@v3
         with:
-            node-version: ${{ matrix.node-version }}
-            cache: "npm"
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
 
       - name: Install dependencies ⬇️
         run: npm ci
 
       - name: Check formatting 🎨
         run: npm run format:check
 
+      - name: Run linter
+        run: npm run lint:check
+
       - name: Build 📦
         run: npm run build --if-present
 
       - name: Test 🚀
         run: npm test --if-present
 
-
   build_and_test_examples:
     name: Build and test examples
     runs-on: ubuntu-latest
 
     strategy:
-        matrix:
-            node-version: [18.x]
-            root_folder: [ examples/minimal-react, examples/use-camera-and-microphone-example ]
+      matrix:
+        node-version: [18.x]
+        root_folder: [examples/minimal-react, examples/use-camera-and-microphone-example]
 
     defaults:
-        run:
-            working-directory: ${{ matrix.root_folder }}
+      run:
+        working-directory: ${{ matrix.root_folder }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }} 🛎️
         uses: actions/setup-node@v3
         with:
-            node-version: ${{ matrix.node-version }}
-            cache: "npm"
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
 
       - name: Install dependencies lib ⬇️
         run: npm ci
@@ -64,13 +66,8 @@ jobs:
       - name: Install dependencies ⬇️
         run: npm ci
 
-      - name: Check formatting 🎨
-        run: npm run format:check
-
       - name: Build 📦
         run: npm run build --if-present
 
       - name: Test 🚀
         run: npm test --if-present
-
-

.github/workflows/static.yml

@@ -35,14 +35,14 @@ jobs:
         uses: actions/configure-pages@v3
 
       - name: Run typedoc
-        run: | 
+        run: |
           npm ci
           npm run docs
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload entire repository
-          path: 'docs'
+          path: "docs"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2

.prettierrc

@@ -1,5 +1,4 @@
 {
-  "semi": true,
-  "tabWidth": 2,
-  "printWidth": 120
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

examples/minimal-react/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/minimal-react/package.json

@@ -8,9 +8,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "watch": "tsc --noEmit --watch",
-    "preview": "vite preview",
-    "format": "prettier --write . --ignore-path ./.eslintignore",
-    "format:check": "prettier --check . --ignore-path ./.eslintignore"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@jellyfish-dev/react-client-sdk": "file:../..",
@@ -20,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
     "typescript": "^4.9.3",
     "vite": "^4.1.0",
     "vite-plugin-checker": "^0.5.6"

examples/minimal-react/src/components/App.tsx

@@ -1,7 +1,7 @@
 import VideoPlayer from "./VideoPlayer";
 import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@jellyfish-dev/react-client-sdk";
-import { create } from "@jellyfish-dev/react-client-sdk";
 import { useState } from "react";
+import { useConnect, useDisconnect, useApi, useStatus, useTracks } from "./client";
 
 // Example metadata types for peer and track
 // You can define your own metadata types just make sure they are serializable
@@ -13,13 +13,6 @@ export type TrackMetadata = {
   type: "camera" | "screen";
 };
 
-// Create a Membrane client instance
-// remember to use JellyfishContextProvider
-export const { useApi, useTracks, useStatus, useConnect, useDisconnect, JellyfishContextProvider } = create<
-  PeerMetadata,
-  TrackMetadata
->();
-
 export const App = () => {
   const [token, setToken] = useState("");
 

examples/minimal-react/src/components/client.ts

@@ -0,0 +1,9 @@
+import { create } from "@jellyfish-dev/react-client-sdk";
+import { PeerMetadata, TrackMetadata } from "./App";
+
+// Create a Membrane client instance
+// remember to use JellyfishContextProvider
+export const { useApi, useTracks, useStatus, useConnect, useDisconnect, JellyfishContextProvider } = create<
+  PeerMetadata,
+  TrackMetadata
+>();

examples/minimal-react/src/main.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App, JellyfishContextProvider } from "./components/App";
+import { App } from "./components/App";
+import { JellyfishContextProvider } from "./components/client";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <JellyfishContextProvider>
       <App />
     </JellyfishContextProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

examples/use-camera-and-microphone-example/.eslintignore

@@ -0,0 +1 @@
+dist

examples/use-camera-and-microphone-example/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/use-camera-and-microphone-example/package.json

@@ -6,10 +6,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx",
-    "format": "prettier --write . --ignore-path ./.eslintignore",
-    "format:check": "prettier --check . --ignore-path ./.eslintignore"
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "@jellyfish-dev/react-client-sdk": "file:../..",
@@ -21,17 +18,9 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.15",
     "daisyui": "^3.6.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.4",
     "postcss": "^8.4.28",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",

examples/use-camera-and-microphone-example/src/AdditionalControls.tsx

@@ -34,7 +34,7 @@ export const AdditionalControls = () => {
         </button>
       </div>
       {show && (
-        <div className="flex flex-row flex-wrap md:grid md:grid-cols-2 gap-2 p-2">
+        <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} />

examples/use-camera-and-microphone-example/src/DeviceSelector.tsx

@@ -16,7 +16,7 @@ export const DeviceSelector = ({ name, devices, setInput, defaultOptionText }: P
   };
 
   return (
-    <div className="flex flex-row gap-2 items-center">
+    <div className="flex flex-row items-center gap-2">
       <span>{name}</span>
       <select className="select w-full max-w-xs" onChange={onOptionChangeHandler} defaultValue={defaultOptionText}>
         <option disabled>{defaultOptionText}</option>

examples/use-camera-and-microphone-example/src/MainControls.tsx

@@ -88,7 +88,7 @@ export const MainControls = () => {
   const status = useStatus();
 
   return (
-    <div className="flex flex-row flex-wrap md:grid md:grid-cols-2 gap-2 p-2">
+    <div className="flex flex-row flex-wrap gap-2 p-2 md:grid md:grid-cols-2">
       <div className="flex flex-col gap-2">
         <input
           type="text"
@@ -99,7 +99,7 @@ export const MainControls = () => {
         />
         <div className="flex flex-row">
           <div className="form-control">
-            <label className="flex flex-row gap-2 label cursor-pointer">
+            <label className="label flex cursor-pointer flex-row gap-2">
               <span className="label-text">Autostart</span>
               <input
                 type="checkbox"
@@ -110,7 +110,7 @@ export const MainControls = () => {
             </label>
           </div>
         </div>
-        <div className="flex flex-col w-full">
+        <div className="flex w-full flex-col">
           <ThreeStateRadio
             name="Video Auto Streaming (default false)"
             value={videoAutoStreaming}
@@ -151,7 +151,7 @@ export const MainControls = () => {
             radioClass="radio-secondary"
           />
         </div>
-        <div className="flex flex-row flex-wrap w-full gap-2">
+        <div className="flex w-full flex-row flex-wrap gap-2">
           <button
             className="btn btn-info btn-sm"
             onClick={() => {
@@ -218,7 +218,7 @@ export const MainControls = () => {
         </div>
       </div>
       <div>
-        <div className="grid grid-rows-2 prose">
+        <div className="prose grid grid-rows-2">
           <div>
             <h3>Local:</h3>
             <div className="max-w-[500px]">