[WEB-5423] fix: typescript errors and add types check step to pull request workflow

.github/workflows/pull-request-build-lint-web-apps.yml

@@ -49,5 +49,8 @@ jobs:
       - name: Check Affected format
         run: pnpm turbo run check:format --affected
 
+      - name: Check Affected types
+        run: pnpm turbo run check:types --affected
+
       - name: Build Affected
         run: pnpm turbo run build --affected

apps/admin/.eslintignore

@@ -1,4 +1,6 @@
 .next/*
+.react-router/*
+.vite/*
 out/*
 public/*
 dist/*

apps/admin/.prettierignore

@@ -1,4 +1,6 @@
 .next
+.react-router
+.vite
 .vercel
 .tubro
 out/

apps/space/.eslintignore

@@ -1,4 +1,6 @@
 .next/*
+.react-router/*
+.vite/*
 out/*
 public/*
 dist/*

apps/space/.prettierignore

@@ -1,4 +1,6 @@
 .next
+.react-router
+.vite
 .vercel
 .tubro
 out/

apps/web/ce/components/command-palette/power-k/context-detector.ts

@@ -1,4 +1,4 @@
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import type { Params } from "react-router";
 // local imports
 import type { TPowerKContextTypeExtended } from "./types";
 

apps/web/ce/components/cycles/analytics-sidebar/base.tsx

@@ -1,5 +1,5 @@
 "use client";
-import type { FC } from "react";
+
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -19,7 +19,7 @@ type ProgressChartProps = {
   projectId: string;
   cycleId: string;
 };
-export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
+export const SidebarChart = observer((props: ProgressChartProps) => {
   const { workspaceSlug, projectId, cycleId } = props;
 
   // hooks

apps/web/ce/store/user/permission.store.ts

@@ -18,7 +18,7 @@ export class UserPermissionStore extends BaseUserPermissionStore implements IUse
    * @returns { EUserPermissions | undefined }
    */
   getProjectRoleByWorkspaceSlugAndProjectId = computedFn(
-    (workspaceSlug: string, projectId: string): EUserPermissions | undefined =>
+    (workspaceSlug: string, projectId?: string): EUserPermissions | undefined =>
       this.getProjectRole(workspaceSlug, projectId)
   );
 }

apps/web/core/components/cycles/cycle-peek-overview.tsx

@@ -31,7 +31,7 @@ export const CyclePeekOverview: React.FC<Props> = observer((props) => {
 
   const handleClose = () => {
     const query = generateQueryParams(searchParams, ["peekCycle"]);
-    router.push(`${pathname}?${query}`, { showProgress: false });
+    router.push(`${pathname}?${query}`);
   };
 
   useEffect(() => {

apps/web/core/components/cycles/list/cycle-list-item-action.tsx

@@ -196,9 +196,9 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
 
     const query = generateQueryParams(searchParams, ["peekCycle"]);
     if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
-      router.push(`${pathname}?${query}`, { showProgress: false });
+      router.push(`${pathname}?${query}`);
     } else {
-      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`, { showProgress: false });
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
     }
   };
 

apps/web/core/components/cycles/list/cycles-list-item.tsx

@@ -59,9 +59,9 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
     const query = generateQueryParams(searchParams, ["peekCycle"]);
     if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
-      router.push(`${pathname}?${query}`, { showProgress: false });
+      router.push(`${pathname}?${query}`);
     } else {
-      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`, { showProgress: false });
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
     }
   };
 

apps/web/core/components/icons/attachment/audio-file-icon.tsx

@@ -8,5 +8,5 @@ export type AudioIconProps = {
 };
 
 export const AudioIcon: React.FC<AudioIconProps> = ({ width, height }) => (
-  <img src={AudioFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="AudioFileIcon" />
+  <img src={AudioFileIcon} width={width} height={height} alt="AudioFileIcon" />
 );

apps/web/core/components/icons/attachment/css-file-icon.tsx

@@ -5,5 +5,5 @@ import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const CssIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={CssFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CssFileIcon" />
+  <img src={CssFileIcon} width={width} height={height} alt="CssFileIcon" />
 );

apps/web/core/components/icons/attachment/csv-file-icon.tsx

@@ -5,5 +5,5 @@ import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const CsvIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={CSVFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CSVFileIcon" />
+  <img src={CSVFileIcon} width={width} height={height} alt="CSVFileIcon" />
 );

apps/web/core/components/icons/attachment/default-file-icon.tsx

@@ -5,11 +5,5 @@ import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const DefaultIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img
-    src={DefaultFileIcon}
-    width={width}
-    height={height}
-    className="h-full w-full object-contain"
-    alt="DefaultFileIcon"
-  />
+  <img src={DefaultFileIcon} width={width} height={height} alt="DefaultFileIcon" />
 );

apps/web/core/components/icons/attachment/doc-file-icon.tsx

@@ -5,5 +5,5 @@ import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const DocIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={DocFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="DocFileIcon" />
+  <img src={DocFileIcon} width={width} height={height} alt="DocFileIcon" />
 );

apps/web/core/components/icons/attachment/figma-file-icon.tsx

@@ -5,5 +5,5 @@ import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const FigmaIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={FigmaFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="FigmaFileIcon" />
+  <img src={FigmaFileIcon} width={width} height={height} alt="FigmaFileIcon" />
 );

apps/web/core/components/icons/attachment/html-file-icon.tsx

@@ -5,5 +5,5 @@ import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const HtmlIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={HtmlFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="HtmlFileIcon" />
+  <img src={HtmlFileIcon} width={width} height={height} alt="HtmlFileIcon" />
 );

apps/web/core/components/icons/attachment/img-file-icon.tsx

@@ -5,5 +5,5 @@ import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const ImgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={ImgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ImgFileIcon" />
+  <img src={ImgFileIcon} width={width} height={height} alt="ImgFileIcon" />
 );

apps/web/core/components/icons/attachment/jpg-file-icon.tsx

@@ -5,5 +5,5 @@ import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const JpgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={JpgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JpgFileIcon" />
+  <img src={JpgFileIcon} width={width} height={height} alt="JpgFileIcon" />
 );

apps/web/core/components/icons/attachment/js-file-icon.tsx

@@ -5,5 +5,5 @@ import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
+  <img src={JsFileIcon} width={width} height={height} alt="JsFileIcon" />
 );

apps/web/core/components/icons/attachment/pdf-file-icon.tsx

@@ -5,5 +5,5 @@ import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const PdfIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={PDFFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PDFFileIcon" />
+  <img src={PDFFileIcon} width={width} height={height} alt="PDFFileIcon" />
 );

apps/web/core/components/icons/attachment/png-file-icon.tsx

@@ -5,5 +5,5 @@ import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const PngIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={PngFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PngFileIcon" />
+  <img src={PngFileIcon} width={width} height={height} alt="PngFileIcon" />
 );

apps/web/core/components/icons/attachment/rar-file-icon.tsx

@@ -5,5 +5,5 @@ import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={RarFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="RarFileIcon" />
+  <img src={RarFileIcon} width={width} height={height} alt="RarFileIcon" />
 );

apps/web/core/components/icons/attachment/sheet-file-icon.tsx

@@ -5,5 +5,5 @@ import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const SheetIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={SheetFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SheetFileIcon" />
+  <img src={SheetFileIcon} width={width} height={height} alt="SheetFileIcon" />
 );

apps/web/core/components/icons/attachment/svg-file-icon.tsx

@@ -5,5 +5,5 @@ import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const SvgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={SvgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SvgFileIcon" />
+  <img src={SvgFileIcon} width={width} height={height} alt="SvgFileIcon" />
 );

apps/web/core/components/icons/attachment/txt-file-icon.tsx

@@ -5,5 +5,5 @@ import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const TxtIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={TxtFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="TxtFileIcon" />
+  <img src={TxtFileIcon} width={width} height={height} alt="TxtFileIcon" />
 );

apps/web/core/components/icons/attachment/video-file-icon.tsx

@@ -5,5 +5,5 @@ import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const VideoIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={VideoFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="VideoFileIcon" />
+  <img src={VideoFileIcon} width={width} height={height} alt="VideoFileIcon" />
 );

apps/web/core/components/icons/attachment/zip-file-icon.tsx

@@ -5,5 +5,5 @@ import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={ZipFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ZipFileIcon" />
+  <img src={ZipFileIcon} width={width} height={height} alt="ZipFileIcon" />
 );

apps/web/core/components/power-k/core/context-detector.ts

@@ -1,4 +1,4 @@
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import type { Params } from "react-router";
 // plane web imports
 import { detectExtendedContextFromURL } from "@/plane-web/components/command-palette/power-k/context-detector";
 // local imports

apps/web/core/components/power-k/core/types.ts

@@ -1,4 +1,4 @@
-import type { AppRouterProgressInstance } from "@bprogress/next";
+import type { useRouter } from "next/navigation";
 // plane web imports
 import type {
   TPowerKContextTypeExtended,
@@ -19,7 +19,7 @@ export type TPowerKContext = {
   shouldShowContextBasedActions: boolean;
   setShouldShowContextBasedActions: (shouldShowContextBasedActions: boolean) => void;
   // Router for navigation
-  router: AppRouterProgressInstance;
+  router: ReturnType<typeof useRouter>;
   // UI control
   closePalette: () => void;
   setActiveCommand: (command: TPowerKCommandConfig | null) => void;

apps/web/core/components/project/card.tsx

@@ -119,7 +119,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "settings",
-      action: () => router.push(`/${workspaceSlug}/settings/projects/${project.id}`, { showProgress: false }),
+      action: () => router.push(`/${workspaceSlug}/settings/projects/${project.id}`),
       title: "Settings",
       icon: Settings,
       shouldRender: !isArchived && (hasAdminRole || hasMemberRole),