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

.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/app/(all)/installations/[provider]/layout.tsx

@@ -1,8 +0,0 @@
-import { Outlet } from "react-router";
-import type { Route } from "./+types/layout";
-
-export default function InstallationProviderLayout() {
-  return <Outlet />;
-}
-
-export const meta: Route.MetaFunction = () => [{ title: "Installations" }];

apps/web/app/(all)/installations/[provider]/page.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { useSearchParams } from "next/navigation";
-// ui
-import { LogoSpinner } from "@/components/common/logo-spinner";
-// services
-import { AppInstallationService } from "@/services/app_installation.service";
-import type { Route } from "./+types/page";
-
-// services
-const appInstallationService = new AppInstallationService();
-
-export default function AppPostInstallation({ params }: Route.ComponentProps) {
-  // params
-  const { provider } = params;
-  // query params
-  const searchParams = useSearchParams();
-  const installation_id = searchParams.get("installation_id");
-  const state = searchParams.get("state");
-  const code = searchParams.get("code");
-
-  useEffect(() => {
-    if (provider === "github" && state && installation_id) {
-      appInstallationService
-        .addInstallationApp(state.toString(), provider, { installation_id })
-        .then(() => {
-          window.opener = null;
-          window.open("", "_self");
-          window.close();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    } else if (provider === "slack" && state && code) {
-      const [workspaceSlug, projectId, integrationId] = state.toString().split(",");
-
-      if (!projectId) {
-        const payload = {
-          code,
-        };
-        appInstallationService
-          .addInstallationApp(state.toString(), provider, payload)
-          .then(() => {
-            window.opener = null;
-            window.open("", "_self");
-            window.close();
-          })
-          .catch((err) => {
-            throw err?.response;
-          });
-      } else {
-        const payload = {
-          code,
-        };
-        appInstallationService
-          .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
-          .then(() => {
-            window.opener = null;
-            window.open("", "_self");
-            window.close();
-          })
-          .catch((err) => {
-            throw err?.response;
-          });
-      }
-    }
-  }, [state, installation_id, provider, code]);
-
-  return (
-    <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
-      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
-      <LogoSpinner />
-    </div>
-  );
-}

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
+  <img src={DefaultFileIcon} width={width} height={height} alt="DefaultFileIcon" />
-    src={DefaultFileIcon}
-    width={width}
-    height={height}
-    className="h-full w-full object-contain"
-    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),

apps/web/core/layouts/auth-layout/project-wrapper.tsx

@@ -64,19 +64,15 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const { getProjectEstimates } = useProjectEstimates();
 
   // derived values
-  const projectExists = projectId ? getProjectById(projectId.toString()) : null;
+  const projectExists = projectId ? getProjectById(projectId) : null;
   const projectMemberInfo = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const hasPermissionToCurrentProject = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     EUserPermissionsLevel.PROJECT,
-    workspaceSlug.toString(),
+    workspaceSlug,
-    projectId?.toString()
+    projectId
-  );
-  const isWorkspaceAdmin = allowPermissions(
-    [EUserPermissions.ADMIN],
-    EUserPermissionsLevel.WORKSPACE,
-    workspaceSlug.toString()
   );
+  const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE, workspaceSlug);
 
   // Initialize module timeline chart
   useEffect(() => {
@@ -86,60 +82,60 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
 
   // fetching project details
   useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug, projectId) : null
   );
 
   // fetching user project member information
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ME_INFORMATION(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_ME_INFORMATION(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug, projectId) : null
   );
   // fetching project labels
   useSWR(
-    workspaceSlug && projectId ? PROJECT_LABELS(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_LABELS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project members
   useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project states
   useSWR(
-    workspaceSlug && projectId ? PROJECT_STATES(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_STATES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project estimates
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ESTIMATES(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_ESTIMATES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project cycles
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ALL_CYCLES(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_ALL_CYCLES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project modules
   useSWR(
-    workspaceSlug && projectId ? PROJECT_MODULES(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_MODULES(workspaceSlug, projectId) : null,
     workspaceSlug && projectId
       ? async () => {
-          await fetchModulesSlim(workspaceSlug.toString(), projectId.toString());
+          await fetchModulesSlim(workspaceSlug, projectId);
-          await fetchModules(workspaceSlug.toString(), projectId.toString());
+          await fetchModules(workspaceSlug, projectId);
         }
       : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project views
   useSWR(
-    workspaceSlug && projectId ? PROJECT_VIEWS(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_VIEWS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? () => fetchViews(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 

apps/web/core/store/user/base-permissions.store.ts

@@ -112,7 +112,7 @@ export abstract class BaseUserPermissionStore implements IBaseUserPermissionStor
    * @param { string } projectId
    * @returns { EUserPermissions | undefined }
    */
-  protected getProjectRole = computedFn((workspaceSlug: string, projectId: string): EUserPermissions | undefined => {
+  protected getProjectRole = computedFn((workspaceSlug: string, projectId?: string): EUserPermissions | undefined => {
     if (!workspaceSlug || !projectId) return undefined;
     const projectRole = this.workspaceProjectsPermissions?.[workspaceSlug]?.[projectId];
     if (!projectRole) return undefined;

packages/propel/src/calendar/calendar.stories.tsx

@@ -184,10 +184,10 @@ export const TwoMonths: Story = {
 };
 
 export const Uncontrolled: Story = {
-  render(args) {
+  render() {
     return (
       <div className="p-4">
-        <Calendar {...args} mode="single" defaultMonth={new Date(2024, 0)} className="rounded-md border" />
+        <Calendar mode="single" defaultMonth={new Date(2024, 0)} showOutsideDays className="rounded-md border" />
       </div>
     );
   },

packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx

@@ -17,6 +17,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Default",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -43,6 +49,12 @@ export const Default: Story = {
 };
 
 export const OpenToEmojiTab: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Emoji Tab",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -66,6 +78,12 @@ export const OpenToEmojiTab: Story = {
 };
 
 export const OpenToIconTab: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Icon Tab",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -94,6 +112,12 @@ export const OpenToIconTab: Story = {
 };
 
 export const LucideIcons: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Lucide Icons",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -121,6 +145,12 @@ export const LucideIcons: Story = {
 };
 
 export const MaterialIcons: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Material Icons",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -148,6 +178,12 @@ export const MaterialIcons: Story = {
 };
 
 export const CloseOnSelectDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Close On Select Disabled",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValues, setSelectedValues] = useState<TChangeHandlerProps[]>([]);
@@ -192,6 +228,12 @@ export const CloseOnSelectDisabled: Story = {
 };
 
 export const CustomSearchPlaceholder: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Search",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -214,6 +256,12 @@ export const CustomSearchPlaceholder: Story = {
 };
 
 export const SearchDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Search Disabled",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -236,6 +284,12 @@ export const SearchDisabled: Story = {
 };
 
 export const CustomIconColor: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Icon Color",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -262,6 +316,12 @@ export const CustomIconColor: Story = {
 };
 
 export const DifferentPlacements: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Different Placements",
+  },
   render() {
     const [isOpen1, setIsOpen1] = useState(false);
     const [isOpen2, setIsOpen2] = useState(false);
@@ -316,6 +376,12 @@ export const DifferentPlacements: Story = {
 };
 
 export const InFormContext: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "In Form Context",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [formData, setFormData] = useState({

packages/propel/src/spinners/circular-bar-spinner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
+export interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
   height?: string;
   width?: string;
   className?: string | undefined;

packages/ui/src/sortable/draggable.tsx

@@ -1,12 +1,6 @@
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import {
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-  draggable,
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-  dropTargetForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
-import {
-  attachClosestEdge,
-  extractClosestEdge,
-} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
 import { isEqual } from "lodash-es";
 import React, { useEffect, useRef, useState } from "react";
 import { DropIndicator } from "../drop-indicator";

packages/ui/src/sortable/sortable.tsx

@@ -1,4 +1,4 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import React, { Fragment, useEffect, useMemo } from "react";
 import { Draggable } from "./draggable";