ci: add pre-commit hook and fix linting issues (#545)

* style: deactivate PLC0415 only on part that it's ok + re-run pre-commit run --all * ci: add pre-commit hook * build: move from yarn to pnpm * build: move from yarn to pnpm * build: fix node-version * ci: install pnpm prior node (?) * build: update deps and pnpm trying to fix vercel build * feat: docker www corepack * style: pre-commit --------- Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>
2025-12-20 12:19:06 +00:00 · 2025-08-14 20:59:54 -06:00
parent b9d891d342
commit 1311714451
26 changed files with 13070 additions and 7803 deletions
--- a/www/.gitignore
+++ b/www/.gitignore
@@ -44,3 +44,6 @@ config.ts

 # openapi logs
 openapi-ts-error-*.log
+
+# pnpm
+.pnpm-store
--- a/www/Dockerfile
+++ b/www/Dockerfile
@@ -1,21 +1,16 @@
 #syntax=docker/dockerfile:1.4
-FROM node:18-alpine AS base
+FROM node:22-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable

 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-
-# Install dependencies based on the preferred package manager
-COPY --link package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
-
+COPY --link package.json pnpm-lock.yaml* ./
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile

 # Rebuild the source code only when needed
 FROM base AS builder
@@ -29,7 +24,7 @@ COPY --link  . .
 ENV NEXT_TELEMETRY_DISABLED 1

 # If using npm comment out above and use below instead
-RUN yarn build
+RUN pnpm build
 # RUN npm run build

 # Production image, copy all the files and run next
@@ -41,8 +36,8 @@ ENV NODE_ENV production
 # ENV NEXT_TELEMETRY_DISABLED 1

 RUN \
-  addgroup --system --gid 1001 nodejs; \
-  adduser --system --uid 1001 nextjs
+    addgroup --system --gid 1001 nodejs; \
+    adduser --system --uid 1001 nextjs

 COPY --from=builder --link /app/public ./public

--- a/www/app/(app)/browse/page.tsx
+++ b/www/app/(app)/browse/page.tsx
@@ -26,7 +26,7 @@ export default function TranscriptBrowser() {
    page,
    selectedSourceKind,
    selectedRoomId,
-    searchTerm
+    searchTerm,
  );
  const userName = useSessionUser().name;
  const [deletionLoading, setDeletionLoading] = useState(false);
@@ -51,7 +51,7 @@ export default function TranscriptBrowser() {

  const handleFilterTranscripts = (
    sourceKind: SourceKind | null,
-    roomId: string
+    roomId: string,
  ) => {
    setSelectedSourceKind(sourceKind);
    setSelectedRoomId(roomId);
@@ -107,7 +107,7 @@ export default function TranscriptBrowser() {
        setDeletionLoading(false);
        onCloseDeletion();
        setDeletedItemIds((prev) =>
-          prev ? [...prev, transcriptId] : [transcriptId]
+          prev ? [...prev, transcriptId] : [transcriptId],
        );
      })
      .catch((err) => {
@@ -130,7 +130,7 @@ export default function TranscriptBrowser() {
          if (status === "already running") {
            setError(
              new Error("Processing is already running, please wait"),
-              "Processing is already running, please wait"
+              "Processing is already running, please wait",
            );
          }
        })
@@ -141,7 +141,7 @@ export default function TranscriptBrowser() {
  };

  const transcriptToDelete = response?.items?.find(
-    (i) => i.id === transcriptToDeleteId
+    (i) => i.id === transcriptToDeleteId,
  );
  const dialogTitle = transcriptToDelete?.title || "Unnamed Transcript";
  const dialogDate = transcriptToDelete?.created_at
--- a/www/app/(app)/transcripts/new/page.tsx
+++ b/www/app/(app)/transcripts/new/page.tsx
@@ -165,6 +165,8 @@ const TranscriptCreate = () => {
                    options={supportedLanguages}
                    value={targetLanguage}
                    onChange={onLanguageChange}
+                    onBlur={() => {}}
+                    onFocus={() => {}}
                    placeholder="Choose your language"
                  />
                </Box>
--- a/www/app/(app)/transcripts/player.tsx
+++ b/www/app/(app)/transcripts/player.tsx
@@ -136,7 +136,6 @@ export default function Player(props: PlayerProps) {
        content,
        drag: false,
        resize: false,
-        top: 0,
      });
      region.on("click", (e) => {
        e.stopPropagation();
--- a/www/app/(app)/transcripts/recorder.tsx
+++ b/www/app/(app)/transcripts/recorder.tsx
@@ -10,7 +10,7 @@ import FileUploadButton from "./fileUploadButton";
 import useWebRTC from "./useWebRTC";
 import useAudioDevice from "./useAudioDevice";
 import { Box, Flex, IconButton, Menu, RadioGroup } from "@chakra-ui/react";
-import { LuScreenShare, LuMic, LuPlay, LuStopCircle } from "react-icons/lu";
+import { LuScreenShare, LuMic, LuPlay, LuCircleStop } from "react-icons/lu";

 type RecorderProps = {
  transcriptId: string;
@@ -253,7 +253,7 @@ export default function Recorder(props: RecorderProps) {
        mr={2}
        onClick={handleRecClick}
      >
-        {isRecording ? <LuStopCircle /> : <LuPlay />}
+        {isRecording ? <LuCircleStop /> : <LuPlay />}
      </IconButton>
      {!isRecording && (window as any).chrome && (
        <IconButton
--- a/www/app/(app)/transcripts/shareAndPrivacy.tsx
+++ b/www/app/(app)/transcripts/shareAndPrivacy.tsx
@@ -127,7 +127,7 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
                  {isOwner && api && (
                    <Select.Root
                      key={shareMode.value}
-                      value={[shareMode.value]}
+                      value={[shareMode.value || ""]}
                      onValueChange={(e) => updateShareMode(e.value[0])}
                      disabled={shareLoading}
                      collection={shareOptions}
@@ -145,11 +145,7 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
                      <Select.Positioner>
                        <Select.Content>
                          {shareOptions.items.map((option) => (
-                            <Select.Item
-                              key={option.value}
-                              item={option}
-                              label={option.label}
-                            >
+                            <Select.Item key={option.value} item={option}>
                              {option.label}
                              <Select.ItemIndicator />
                            </Select.Item>
--- a/www/app/(app)/transcripts/shareZulip.tsx
+++ b/www/app/(app)/transcripts/shareZulip.tsx
@@ -50,7 +50,7 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
    filter: streamItemsFilter,
    set: streamItemsSet,
  } = useListCollection({
-    items: [],
+    initialItems: [] as { label: string; value: string }[],
    filter: contains,
  });

@@ -59,7 +59,7 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
    filter: topicItemsFilter,
    set: topicItemsSet,
  } = useListCollection({
-    items: [],
+    initialItems: [] as { label: string; value: string }[],
    filter: contains,
  });

--- a/www/app/(errors)/errorMessage.tsx
+++ b/www/app/(errors)/errorMessage.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useError } from "./errorContext";
 import { useEffect, useState } from "react";
-import * as Sentry from "@sentry/react";
+import * as Sentry from "@sentry/nextjs";

 const ErrorMessage: React.FC = () => {
  const { error, setError, humanMessage } = useError();
--- a/www/package.json
+++ b/www/package.json
@@ -11,7 +11,7 @@
    "openapi": "openapi-ts"
  },
  "dependencies": {
-    "@chakra-ui/react": "^3.22.0",
+    "@chakra-ui/react": "^3.24.2",
    "@emotion/react": "^11.14.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -22,9 +22,8 @@
    "@whereby.com/browser-sdk": "^3.3.4",
    "autoprefixer": "10.4.20",
    "axios": "^1.8.2",
-    "chakra-react-select": "^4.9.1",
-    "eslint": "^9.9.1",
-    "eslint-config-next": "^14.2.7",
+    "eslint": "^9.33.0",
+    "eslint-config-next": "^14.2.31",
    "fontawesome": "^5.6.3",
    "ioredis": "^5.4.1",
    "jest-worker": "^29.6.2",
@@ -44,8 +43,6 @@
    "redlock": "^5.0.0-beta.2",
    "sass": "^1.63.6",
    "simple-peer": "^9.11.1",
-    "superagent": "^8.0.9",
-    "supports-color": "^9.4.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.6",
    "wavesurfer.js": "^7.4.2"
@@ -59,5 +56,6 @@
    "@types/react": "18.2.20",
    "prettier": "^3.0.0",
    "vercel": "^37.3.0"
-  }
+  },
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
 }
--- a/www/pnpm-lock.yaml
+++ b/www/pnpm-lock.yaml
--- a/www/tsconfig.json
+++ b/www/tsconfig.json
@@ -9,8 +9,8 @@
    "incremental": true,
    "esModuleInterop": true,
    "target": "esnext",
-    "module": "CommonJS",
-    "moduleResolution": "node",
+    "module": "esnext",
+    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
--- a/www/yarn.lock
+++ b/www/yarn.lock