Fix eslint (#189)

* Fix eslint

* fix some lint issues

* fix remaining lint issues

* add test workflow

* enable remote cache

.github/workflows/test.yaml

@@ -0,0 +1,39 @@
+name: Test
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          cache: 'yarn'
+
+      - name: Install Yarn
+        run: |
+          npm install -g yarn
+          yarn install
+
+      - name: Build Packages
+        run: yarn build
+
+      - name: ESLint
+        run: yarn lint
+
+      - name: Prettier
+        run: yarn format
+
+      - name: Run Tests
+        run: yarn test

package.json

@@ -17,7 +17,8 @@
     "start:next": "turbo run start --filter=@livekit/component-example-next...",
     "lint": "turbo run lint",
     "test": "turbo run test",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "format": "prettier --check \"**/src/**/*.{ts,tsx,md}\"",
+    "format:write": "prettier --write \"**/src/**/*.{ts,tsx,md}\"",
     "clean:all": "turbo run clean:all",
     "release": "turbo run build --filter=./packages/* && changeset publish",
     "tooling:update-readme-nav": "node tooling/readme-manager/update-nav-in-readmes.js",

packages/core/.eslintrc.js

@@ -4,5 +4,5 @@
  */
 module.exports = {
   root: true,
-  extends: ['custom'],
+  extends: ['lk-custom'],
 };

packages/core/package.json

@@ -39,7 +39,7 @@
   "author": "LiveKit",
   "devDependencies": {
     "@livekit/components-styles": "0.1.4",
-    "eslint-config-custom": "*",
+    "eslint-config-lk-custom": "0.1.0",
     "tsup": "^6.5.0",
     "typescript": "^4.7.4",
     "vitest": "^0.26.2"

packages/core/src/components/chat.ts

@@ -2,6 +2,7 @@
 import { DataPacket_Kind, Participant, Room } from 'livekit-client';
 import { Observable, Subscriber } from 'rxjs';
 import { createDataObserver } from '../observables/room';
+
 export const enum MessageType {
   CHAT,
 }

packages/core/src/observables/room.ts

@@ -117,12 +117,12 @@ export function screenShareObserver(room: Room) {
     screenShareSubscriber.next(screenShareTracks);
   };
   observers.push(
-    roomEventSelector(room, RoomEvent.TrackSubscribed).subscribe(([_, ...args]) =>
+    roomEventSelector(room, RoomEvent.TrackSubscribed).subscribe(([, ...args]) =>
       handleSub(...args),
     ),
   );
   observers.push(
-    roomEventSelector(room, RoomEvent.TrackUnsubscribed).subscribe(([_, ...args]) =>
+    roomEventSelector(room, RoomEvent.TrackUnsubscribed).subscribe(([, ...args]) =>
       handleSub(...args),
     ),
   );

packages/core/src/observables/track.ts

@@ -29,13 +29,13 @@ export function observeTrackEvents(track: TrackPublication, ...events: TrackEven
     };
 
     events.forEach((evt) => {
-      // @ts-ignore
+      // @ts-expect-error type of `TrackEvent` and `PublicationCallbacks` are congruent
       track.on(evt, onTrackUpdate);
     });
 
     const unsubscribe = () => {
       events.forEach((evt) => {
-        // @ts-ignore
+        // @ts-expect-error type of `TrackEvent` and `PublicationCallbacks` are congruent
         track.off(evt, onTrackUpdate);
       });
     };

packages/eslint-config-custom/index.js

@@ -1,7 +1,6 @@
 module.exports = {
   plugins: ['@typescript-eslint/eslint-plugin', 'eslint-plugin-tsdoc', 'svelte3', 'react-hooks'],
   extends: [
-    'standard',
     'next',
     'turbo',
     'prettier',
@@ -32,8 +31,10 @@ module.exports = {
     'react/jsx-handler-names': 0,
     'react/jsx-fragments': 0,
     'react/no-unused-prop-types': 0,
-    'no-unused-vars': 0,
+    '@typescript-eslint/no-unused-vars': 'error',
     'import/export': 0,
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    '@typescript-eslint/no-empty-interface': 'warn',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
   },

packages/eslint-config-custom/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "eslint-config-custom",
+  "name": "eslint-config-lk-custom",
   "main": "index.js",
   "private": true,
+  "version": "0.1.0",
   "devDependencies": {
     "@changesets/cli": "^2.25.0",
     "@typescript-eslint/eslint-plugin": "^5.22.0",

packages/react/.eslintrc.js

@@ -4,5 +4,5 @@
  */
 module.exports = {
   root: true,
-  extends: ['custom'],
+  extends: ['lk-custom'],
 };

packages/react/package.json

@@ -49,8 +49,8 @@
     "@svgr/cli": "^6.5.1",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "eslint-config-custom": "*",
+    "eslint-config-lk-custom": "0.1.0",
     "livekit-client": "^1.6.2",
     "tsup": "^6.5.0"
   }
-}
+}

packages/react/src/layout/FocusLayout.tsx

@@ -2,21 +2,19 @@ import { Participant, Track } from 'livekit-client';
 import * as React from 'react';
 import { useMaybeLayoutContext, useLayoutContext } from '../context';
 import { mergeProps } from '../utils';
-import { TrackLoop } from '../components/TrackLoop';
 import { TrackParticipantPair } from '@livekit/components-core';
 import { TileLoop } from '../components/TileLoop';
 import { ParticipantTile } from '../prefabs/ParticipantTile';
 import { ParticipantClickEvent } from '@livekit/components-core';
+import { ParticipantFilter } from '../hooks/participant-hooks';
 
 export interface FocusLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   trackParticipantPair?: TrackParticipantPair;
   participants?: Array<Participant>;
-  onParticipantClick?: (evt: ParticipantClickEvent) => void;
 }
 
 export function FocusLayoutContainer({
   trackParticipantPair,
-  onParticipantClick,
   ...props
 }: FocusLayoutContainerProps) {
   const elementProps = mergeProps(props, { className: 'lk-focus-layout' });
@@ -48,11 +46,7 @@ export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement> {
   onParticipantClick?: (evt: ParticipantClickEvent) => void;
 }
 
-export function FocusLayout({
-  trackParticipantPair,
-  onParticipantClick,
-  ...props
-}: FocusLayoutProps) {
+export function FocusLayout({ trackParticipantPair, ...props }: FocusLayoutProps) {
   const { state } = useMaybeLayoutContext().pin;
 
   const pair: TrackParticipantPair | null = React.useMemo(() => {
@@ -79,14 +73,21 @@ export function FocusLayout({
 }
 
 export interface CarouselViewProps extends React.HTMLAttributes<HTMLMediaElement> {
-  // participants: Participant[];
-  // onParticipantClick?: (evt: ParticipantClickEvent) => void;
+  filter?: ParticipantFilter;
+  filterDependencies?: [];
 }
 
-export function CarouselView({ ...props }: CarouselViewProps) {
+export function CarouselView({ filter, filterDependencies, ...props }: CarouselViewProps) {
   return (
     <aside {...props}>
-      {props.children ?? <TrackLoop sources={[Track.Source.Camera]} excludePinnedTracks={true} />}
+      {props.children ?? (
+        <TileLoop
+          sources={[Track.Source.Camera, Track.Source.ScreenShare]}
+          filter={filter}
+          filterDependencies={filterDependencies}
+          excludePinnedTracks={true}
+        />
+      )}
     </aside>
   );
 }