Enforces explicit type imports (#7158)

* Enforces explicit type imports

* Upgrades typescript-eslint

* Upgrades eslint related dependencies

* Update config

* Sync packages mismatches

* Syncs prettier version

* Linting

* Relocks node version

* Fixes

* Locks @vitejs/plugin-react to 1.3.2

* Linting

README.md

@@ -339,18 +339,18 @@ Please see our [contributing guide](/CONTRIBUTING.md).
 ### Good First Issues
 
 We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22) that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
-  
+
 <!-- BOUNTIES -->
 
 ### Bounties
-  
+
 <a href="https://console.algora.io/org/cal/bounties?status=open">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=dark">
     <img alt="Bounties of cal" src="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=light">
   </picture>
 </a>  
-  
+
 
 <!-- TRANSLATIONS -->
 

apps/docs/README.md

@@ -1 +0,0 @@
-

apps/docs/package.json

@@ -25,6 +25,6 @@
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.22.0"
+    "eslint": "^8.34.0"
   }
 }

apps/docs/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { AppProps } from "next/app";
+import type { AppProps } from "next/app";
 import "nextra-theme-docs/style.css";
 
 import "./style.css";

apps/storybook/package.json

@@ -15,7 +15,7 @@
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^1.0.0",
     "@radix-ui/react-id": "^1.0.0",
-    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
@@ -36,8 +36,8 @@
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "^2.1.0",
     "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",

apps/swagger/package.json

@@ -22,8 +22,8 @@
   },
   "devDependencies": {
     "@types/node": "16.9.1",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "typescript": "^4.9.4"
   }
 }

apps/swagger/pages/index.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import { SwaggerUI } from "swagger-ui-react";
+import type { SwaggerUI } from "swagger-ui-react";
 
 import { SnippedGenerator, requestSnippets } from "@lib/snippets";
 

apps/web/components/AdditionalCalendarSelector.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Select from "react-select";
-import { OptionProps } from "react-select";
+import type { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/AppListCard.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
-import { ReactNode, useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/DestinationCalendarSelector.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { DestinationCalendar } from "@calcom/prisma/client";
+import type { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 
 interface Props {

apps/web/components/Embed.tsx

@@ -1,8 +1,11 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { NextRouter, useRouter } from "next/router";
-import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
-import { components, ControlProps } from "react-select";
+import type { NextRouter } from "next/router";
+import { useRouter } from "next/router";
+import type { MutableRefObject, RefObject } from "react";
+import { createRef, forwardRef, useRef, useState } from "react";
+import type { ControlProps } from "react-select";
+import { components } from "react-select";
 
 import { APP_NAME, EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -675,7 +678,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
   };
   const parsedTabs = tabs.map((t) => ({ ...t, href: s(t.href) }));
-  const embedCodeRefs: Record<typeof tabs[0]["name"], RefObject<HTMLTextAreaElement>> = {};
+  const embedCodeRefs: Record<(typeof tabs)[0]["name"], RefObject<HTMLTextAreaElement>> = {};
   tabs
     .filter((tab) => tab.type === "code")
     .forEach((codeTab) => {
@@ -719,7 +722,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
 
   const calLink = decodeURIComponent(embedUrl);
 
-  const addToPalette = (update: typeof previewState["palette"]) => {
+  const addToPalette = (update: (typeof previewState)["palette"]) => {
     setPreviewState((previewState) => {
       return {
         ...previewState,
@@ -1060,7 +1063,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                             defaultValue="#000000"
                             onChange={(color) => {
                               addToPalette({
-                                [palette.name as keyof typeof previewState["palette"]]: color,
+                                [palette.name as keyof (typeof previewState)["palette"]]: color,
                               });
                             }}
                           />

apps/web/components/Gates.tsx

@@ -1,6 +1,7 @@
 import dynamic from "next/dynamic";
-import { Dispatch, useState, useEffect } from "react";
-import { JSONObject } from "superjson/dist/types";
+import type { Dispatch } from "react";
+import { useState, useEffect } from "react";
+import type { JSONObject } from "superjson/dist/types";
 
 export type Gate = undefined | "rainbow"; // Add more like ` | "geolocation" | "payment"`
 

apps/web/components/ImageUploader.tsx

@@ -1,10 +1,12 @@
-import { FormEvent, useCallback, useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
 
-import { Area, getCroppedImg } from "@lib/cropImage";
+import type { Area } from "@lib/cropImage";
+import { getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
 
 import Slider from "@components/Slider";

apps/web/components/NavTabs.tsx

@@ -1,13 +1,15 @@
 import { AdminRequired } from "components/ui/AdminRequired";
 import noop from "lodash/noop";
-import Link, { LinkProps } from "next/link";
+import type { LinkProps } from "next/link";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { FC, Fragment, MouseEventHandler } from "react";
+import type { FC, MouseEventHandler } from "react";
+import { Fragment } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
-import { SVGComponent } from "@lib/types/SVGComponent";
+import type { SVGComponent } from "@lib/types/SVGComponent";
 
 export interface NavTabProps {
   tabs: {

apps/web/components/SettingsShell.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,4 +1,4 @@
-import { OptionProps } from "react-select";
+import type { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/apps/App.tsx

@@ -11,7 +11,7 @@ import classNames from "@calcom/lib/classNames";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { App as AppType } from "@calcom/types/App";
+import type { App as AppType } from "@calcom/types/App";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
 import {
   FiBookOpen,

apps/web/components/apps/DestinationCalendarSelector.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { DestinationCalendar } from "@calcom/prisma/client";
+import type { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 
 interface Props {

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -1,6 +1,7 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -1,7 +1,8 @@
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import React from "react";
 
 import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
-import { InstalledAppVariants } from "@calcom/app-store/utils";
+import type { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
@@ -44,7 +45,7 @@ export default function InstalledAppsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  const variant: typeof InstalledAppVariants[number] = "payment";
+  const variant: (typeof InstalledAppVariants)[number] = "payment";
 
   const query = trpc.viewer.integrations.useQuery({
     variant,

apps/web/components/auth/layouts/AdminLayout.tsx

@@ -1,13 +1,13 @@
+import { UserPermissionRole } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import React, { ComponentProps, useEffect } from "react";
+import type { ComponentProps } from "react";
+import React, { useEffect } from "react";
 
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
-import Shell from "@calcom/features/shell/Shell";
+import type Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";
 
-import { UserPermissionRole } from ".prisma/client";
-
 export default function AdminLayout({
   children,
 

apps/web/components/booking/AvailableEventLocations.tsx

@@ -4,7 +4,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
 import { FiLink } from "@calcom/ui/components/icon";
 
-import { Props } from "./pages/AvailabilityPage";
+import type { Props } from "./pages/AvailabilityPage";
 
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   const { t } = useLocale();

apps/web/components/booking/AvailableTimes.tsx

@@ -1,8 +1,10 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import { useEffect, useState } from "react";
 
-import dayjs, { Dayjs } from "@calcom/dayjs";
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";

apps/web/components/booking/BookingDescription.tsx

@@ -1,5 +1,6 @@
 import { SchedulingType } from "@prisma/client";
-import { FC, ReactNode, useEffect } from "react";
+import type { FC, ReactNode } from "react";
+import { useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";

apps/web/components/booking/BookingListItem.tsx

@@ -2,14 +2,17 @@ import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
-import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
+import type { EventLocationType } from "@calcom/app-store/locations";
+import { getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import type { ActionType } from "@calcom/ui";
 import {
   Badge,
   Button,
@@ -20,7 +23,6 @@ import {
   MeetingTimeInTimezones,
   showToast,
   Tooltip,
-  ActionType,
   TableActions,
   TextAreaField,
 } from "@calcom/ui";

apps/web/components/booking/TimeOptions.tsx

@@ -1,7 +1,9 @@
-import { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import { useEffect, useState } from "react";
 
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { ITimezoneOption, TimezoneSelect } from "@calcom/ui";
+import type { ITimezoneOption } from "@calcom/ui";
+import { TimezoneSelect } from "@calcom/ui";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 

apps/web/components/booking/UserAvatars.tsx

@@ -1,5 +1,6 @@
 import { CAL_URL } from "@calcom/lib/constants";
-import { AvatarGroup, AvatarGroupProps } from "@calcom/ui";
+import type { AvatarGroupProps } from "@calcom/ui";
+import { AvatarGroup } from "@calcom/ui";
 
 export const UserAvatars = ({
   profile,

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { EventType } from "@prisma/client";
+import type { EventType } from "@prisma/client";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useReducer, useState } from "react";
@@ -9,7 +9,8 @@ import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
-import dayjs, { Dayjs } from "@calcom/dayjs";
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
   useEmbedStyles,
@@ -27,7 +28,7 @@ import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import { HeadSeo } from "@calcom/ui";
 import { FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon";
@@ -35,7 +36,8 @@ import { FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon"
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
-import Gates, { Gate, GateState } from "@components/Gates";
+import type { Gate, GateState } from "@components/Gates";
+import Gates from "@components/Gates";
 import BookingDescription from "@components/booking/BookingDescription";
 import TimeOptions from "@components/booking/TimeOptions";
 

apps/web/components/booking/pages/BookingPage.tsx

@@ -12,8 +12,8 @@ import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
+import type { EventLocationType } from "@calcom/app-store/locations";
 import {
-  EventLocationType,
   getEventLocationType,
   getEventLocationValue,
   getHumanReadableLocationValue,
@@ -21,7 +21,8 @@ import {
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
-import { LocationObject, LocationType } from "@calcom/core/location";
+import type { LocationObject } from "@calcom/core/location";
+import { LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
@@ -69,12 +70,13 @@ import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 
-import Gates, { Gate, GateState } from "@components/Gates";
+import type { Gate, GateState } from "@components/Gates";
+import Gates from "@components/Gates";
 import BookingDescription from "@components/booking/BookingDescription";
 
-import { BookPageProps } from "../../../pages/[user]/book";
-import { HashLinkPageProps } from "../../../pages/d/[link]/book";
-import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
+import type { BookPageProps } from "../../../pages/[user]/book";
+import type { HashLinkPageProps } from "../../../pages/d/[link]/book";
+import type { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
 type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
 

apps/web/components/dialog/EditLocationDialog.tsx

@@ -7,23 +7,24 @@ import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
+import type { EventLocationType, LocationObject } from "@calcom/app-store/locations";
 import {
-  EventLocationType,
   getEventLocationType,
   getHumanReadableLocationValue,
   getMessageForOrganizer,
-  LocationObject,
   LocationType,
 } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
 import { FiMapPin } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
-import LocationSelect, { LocationOption } from "@components/ui/form/LocationSelect";
+import type { LocationOption } from "@components/ui/form/LocationSelect";
+import LocationSelect from "@components/ui/form/LocationSelect";
 
 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,4 +1,5 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -1,6 +1,7 @@
-import { FormValues } from "pages/event-types/[type]";
+import type { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";
-import { components, OptionProps, SingleValueProps } from "react-select";
+import type { OptionProps, SingleValueProps } from "react-select";
+import { components } from "react-select";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,8 +1,9 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventTypeCustomInputType } from "@prisma/client";
 import type { CustomInputParsed } from "pages/event-types/[type]";
-import { FC } from "react";
-import { Control, Controller, useFieldArray, useForm, UseFormRegister, useWatch } from "react-hook-form";
+import type { FC } from "react";
+import type { Control, UseFormRegister } from "react-hook-form";
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Label, Select, TextField } from "@calcom/ui";

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,10 +1,10 @@
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
-import { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
+import type { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
 import { EventTypeAppCard } from "@calcom/app-store/_components/EventTypeAppCardInterface";
-import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
-import { EventTypeAppsList } from "@calcom/app-store/utils";
+import type { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
+import type { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen } from "@calcom/ui";

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,14 +1,16 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import React, { useEffect, useState } from "react";
-import { Controller, useFormContext, UseFormRegisterReturn, useWatch } from "react-hook-form";
+import type { UseFormRegisterReturn } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
-import convertToNewDurationType, { DurationType } from "@calcom/lib/convertToNewDurationType";
+import type { DurationType } from "@calcom/lib/convertToNewDurationType";
+import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { PeriodType } from "@calcom/prisma/client";
+import type { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
 import { FiPlus, FiTrash } from "@calcom/ui/components/icon";

apps/web/components/eventtype/EventRecurringTab.tsx

@@ -1,4 +1,4 @@
-import { EventTypeSetupProps } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 

apps/web/components/eventtype/EventSetupTab.tsx

@@ -6,15 +6,11 @@ import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
-import { MultiValue } from "react-select";
+import type { MultiValue } from "react-select";
 import { z } from "zod";
 
-import {
-  EventLocationType,
-  getEventLocationType,
-  MeetLocationType,
-  LocationType,
-} from "@calcom/app-store/locations";
+import type { EventLocationType } from "@calcom/app-store/locations";
+import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { slugify } from "@calcom/lib/slugify";
@@ -22,10 +18,8 @@ import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@cal
 import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
-import LocationSelect, {
-  SingleValueLocationOption,
-  LocationOption,
-} from "@components/ui/form/LocationSelect";
+import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
+import LocationSelect from "@components/ui/form/LocationSelect";
 
 const getLocationFromType = (
   type: EventLocationType["type"],
@@ -81,7 +75,7 @@ export const EventSetupTab = (
     setShowLocationModal(true);
   };
 
-  const removeLocation = (selectedLocation: typeof eventType.locations[number]) => {
+  const removeLocation = (selectedLocation: (typeof eventType.locations)[number]) => {
     formMethods.setValue(
       "locations",
       formMethods.getValues("locations").filter((location) => {

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,12 +1,12 @@
 import { SchedulingType } from "@prisma/client";
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { ComponentProps } from "react";
-import { Controller, useFormContext, useWatch, Control } from "react-hook-form";
-import { Options } from "react-select";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { ComponentProps } from "react";
+import type { Control } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import type { Options } from "react-select";
 
-import CheckedTeamSelect, {
-  CheckedSelectOption,
-} from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import type { CheckedSelectOption } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, Select } from "@calcom/ui";

apps/web/components/eventtype/EventTeamWebhooksTab.tsx

@@ -1,13 +1,13 @@
-import { EventTypeSetupProps } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
 import { TbWebhook } from "react-icons/tb";
 
 import { WebhookForm } from "@calcom/features/webhooks/components";
-import { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
+import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Webhook } from "@calcom/prisma/client";
+import type { Webhook } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -1,8 +1,8 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
-import { UseFormReturn } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
 import { TbWebhook } from "react-icons/tb";
 
 import Shell from "@calcom/features/shell/Shell";

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -1,13 +1,14 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { UnitTypeLongPlural } from "dayjs";
+import type { UnitTypeLongPlural } from "dayjs";
 import { Trans } from "next-i18next";
 import type { FormValues } from "pages/event-types/[type]";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import z from "zod";
+import type z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Alert, Input, Label, SettingsToggle } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {

apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx

@@ -1,5 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterInputs, trpc } from "@calcom/trpc/react";
+import type { RouterInputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
 

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -5,8 +5,9 @@ import { useForm } from "react-hook-form";
 import { Schedule } from "@calcom/features/schedules";
 import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
-import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import type { TRPCClientErrorLike } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Form } from "@calcom/ui";
 
 interface ISetupAvailabilityProps {

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -1,7 +1,8 @@
 import { ArrowRightIcon } from "@heroicons/react/solid";
 import MarkdownIt from "markdown-it";
 import { useRouter } from "next/router";
-import { FormEvent, useRef, useState } from "react";
+import type { FormEvent } from "react";
+import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/integrations/SubHeadingTitleWithConnections.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Badge } from "@calcom/ui";
 

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,4 +1,5 @@
-import { SyntheticEvent, useState } from "react";
+import type { SyntheticEvent } from "react";
+import { useState } from "react";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, useState } from "react";
+import type { BaseSyntheticEvent } from "react";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, useState } from "react";
+import type { BaseSyntheticEvent } from "react";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";

apps/web/components/setup/EnterpriseLicense.tsx

@@ -7,7 +7,8 @@ import * as z from "zod";
 import { classNames } from "@calcom/lib";
 import { CONSOLE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Button, TextField } from "@calcom/ui";
 import { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
 

apps/web/components/setup/StepDone.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { FiCheck } from "@calcom/ui/components/icon";

apps/web/components/team/screens/Team.tsx

@@ -1,6 +1,6 @@
 import MarkdownIt from "markdown-it";
 import Link from "next/link";
-import { TeamPageProps } from "pages/team/[slug]";
+import type { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/ui/AdminRequired.tsx

@@ -1,5 +1,6 @@
 import { useSession } from "next-auth/react";
-import { FC, Fragment } from "react";
+import type { FC } from "react";
+import { Fragment } from "react";
 
 type AdminRequiredProps = {
   as?: keyof JSX.IntrinsicElements;

apps/web/components/ui/EditableHeading.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { useState } from "react";
-import { ControllerRenderProps } from "react-hook-form";
+import type { ControllerRenderProps } from "react-hook-form";
 
 import { FiEdit2 } from "@calcom/ui/components/icon";
 

apps/web/components/ui/LinkIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SVGComponent } from "@lib/types/SVGComponent";
+import type { SVGComponent } from "@lib/types/SVGComponent";
 
 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   Icon: SVGComponent;

apps/web/components/ui/ModalContainer.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 
 import { Dialog, DialogContent } from "@calcom/ui";
 

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -1,15 +1,17 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
-import { RefCallback, useEffect, useMemo, useState } from "react";
+import type { RefCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { User } from "@calcom/prisma/client";
-import { TRPCClientErrorLike } from "@calcom/trpc/client";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { User } from "@calcom/prisma/client";
+import type { TRPCClientErrorLike } from "@calcom/trpc/client";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
 import { FiCheck, FiEdit2, FiExternalLink, StarIconSolid } from "@calcom/ui/components/icon";

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -1,12 +1,13 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
-import { RefCallback, useEffect, useMemo, useState } from "react";
+import type { RefCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { TRPCClientErrorLike } from "@calcom/trpc/client";
+import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
-import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, DialogHeader, TextField } from "@calcom/ui";
 import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
 

apps/web/components/ui/UsernameAvailability/index.tsx

@@ -3,9 +3,9 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
-import { User } from "@calcom/prisma/client";
-import { TRPCClientErrorLike } from "@calcom/trpc/client";
-import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import type { User } from "@calcom/prisma/client";
+import type { TRPCClientErrorLike } from "@calcom/trpc/client";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 

apps/web/components/ui/form/CheckboxField.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
 

apps/web/components/ui/form/CheckedSelect.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "react-select";
+import type { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui";

apps/web/components/ui/form/LocationSelect.tsx

@@ -1,4 +1,5 @@
-import { components, GroupBase, Props, SingleValue } from "react-select";
+import type { GroupBase, Props, SingleValue } from "react-select";
+import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";

apps/web/components/ui/form/MinutesField.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
-import React, { forwardRef, InputHTMLAttributes, ReactNode } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import React, { forwardRef } from "react";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: ReactNode;

apps/web/components/ui/form/Select.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
-import ReactSelect, { components, GroupBase, Props, InputProps, SingleValue, MultiValue } from "react-select";
+import type { GroupBase, Props, InputProps, SingleValue, MultiValue } from "react-select";
+import ReactSelect, { components } from "react-select";
 
 import classNames from "@calcom/lib/classNames";
 import useTheme from "@calcom/lib/hooks/useTheme";

apps/web/lib/QueryCell.tsx

@@ -1,11 +1,11 @@
-import {
+import type {
   QueryObserverLoadingErrorResult,
   QueryObserverLoadingResult,
   QueryObserverRefetchErrorResult,
   QueryObserverSuccessResult,
   UseQueryResult,
 } from "@tanstack/react-query";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";

apps/web/lib/app-providers.tsx

@@ -1,11 +1,12 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { SessionProvider } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
-import { appWithTranslation, SSRConfig } from "next-i18next";
+import type { SSRConfig } from "next-i18next";
+import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
-import { NextRouter } from "next/router";
-import { ComponentProps, ReactNode } from "react";
+import type { NextRouter } from "next/router";
+import type { ComponentProps, ReactNode } from "react";
 
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
@@ -13,7 +14,7 @@ import { trpc } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui";
 
 import usePublicPage from "@lib/hooks/usePublicPage";
-import { WithNonceProps } from "@lib/withNonce";
+import type { WithNonceProps } from "@lib/withNonce";
 
 const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children: React.ReactNode }>(
   ({ children }) => <>{children}</>

apps/web/lib/auth.ts

@@ -1,7 +1,8 @@
 import { IdentityProvider } from "@prisma/client";
 import { compare, hash } from "bcryptjs";
-import { Session } from "next-auth";
-import { getSession as getSessionInner, GetSessionParams } from "next-auth/react";
+import type { Session } from "next-auth";
+import type { GetSessionParams } from "next-auth/react";
+import { getSession as getSessionInner } from "next-auth/react";
 
 /** @deprecated use the one from `@calcom/lib/auth` */
 export async function hashPassword(password: string) {

apps/web/lib/auth/next-auth-custom-adapter.ts

@@ -1,4 +1,11 @@
-import { Account, IdentityProvider, Prisma, PrismaClient, User, VerificationToken } from "@prisma/client";
+import type {
+  Account,
+  IdentityProvider,
+  Prisma,
+  PrismaClient,
+  User,
+  VerificationToken,
+} from "@prisma/client";
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
 
 import { identityProviderNameMap } from "@lib/auth";

apps/web/lib/config/next-seo.config.ts

@@ -1,4 +1,4 @@
-import { DefaultSeoProps, NextSeoProps } from "next-seo";
+import type { DefaultSeoProps, NextSeoProps } from "next-seo";
 
 import { APP_NAME, SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
 

apps/web/lib/core/i18n/i18n.utils.ts

@@ -1,7 +1,7 @@
 import parser from "accept-language-parser";
-import { IncomingMessage } from "http";
+import type { IncomingMessage } from "http";
 
-import { Maybe } from "@calcom/trpc/server";
+import type { Maybe } from "@calcom/trpc/server";
 
 import { getSession } from "@lib/auth";
 

apps/web/lib/csp.ts

@@ -1,5 +1,5 @@
 import crypto from "crypto";
-import { IncomingMessage, OutgoingMessage } from "http";
+import type { IncomingMessage, OutgoingMessage } from "http";
 import { z } from "zod";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";

apps/web/lib/getBooking.tsx

@@ -1,4 +1,4 @@
-import { Prisma, PrismaClient } from "@prisma/client";
+import type { Prisma, PrismaClient } from "@prisma/client";
 
 async function getBooking(prisma: PrismaClient, uid: string) {
   const booking = await prisma.booking.findFirst({

apps/web/lib/mutations/bookings/create-booking.ts

@@ -1,5 +1,5 @@
 import * as fetch from "@lib/core/http/fetch-wrapper";
-import { BookingCreateBody, BookingResponse } from "@lib/types/booking";
+import type { BookingCreateBody, BookingResponse } from "@lib/types/booking";
 
 const createBooking = async (data: BookingCreateBody) => {
   const response = await fetch.post<BookingCreateBody, BookingResponse>("/api/book/event", data);

apps/web/lib/mutations/bookings/create-recurring-booking.ts

@@ -1,7 +1,7 @@
-import { AppsStatus } from "@calcom/types/Calendar";
+import type { AppsStatus } from "@calcom/types/Calendar";
 
 import * as fetch from "@lib/core/http/fetch-wrapper";
-import { BookingCreateBody, BookingResponse } from "@lib/types/booking";
+import type { BookingCreateBody, BookingResponse } from "@lib/types/booking";
 
 type ExtendedBookingCreateBody = BookingCreateBody & {
   noEmail?: boolean;

apps/web/lib/parseDate.ts

@@ -1,7 +1,8 @@
-import { I18n } from "next-i18next";
+import type { I18n } from "next-i18next";
 import { RRule } from "rrule";
 
-import dayjs, { Dayjs } from "@calcom/dayjs";
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 

apps/web/lib/types/booking.ts

@@ -1,6 +1,6 @@
-import { Attendee, Booking } from "@prisma/client";
+import type { Attendee, Booking } from "@prisma/client";
 
-import { AppsStatus } from "@calcom/types/Calendar";
+import type { AppsStatus } from "@calcom/types/Calendar";
 
 export type BookingCreateBody = {
   email: string;

apps/web/lib/withEmbedSsr.tsx

@@ -1,4 +1,4 @@
-import { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+import type { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from "next";
 
 export type EmbedProps = {
   isEmbed?: boolean;

apps/web/lib/withNonce.tsx

@@ -1,4 +1,4 @@
-import { GetServerSideProps, GetServerSidePropsContext } from "next";
+import type { GetServerSideProps, GetServerSidePropsContext } from "next";
 
 import { csp } from "@lib/csp";
 

apps/web/middleware.ts

@@ -1,6 +1,7 @@
 import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
-import { NextMiddleware, NextResponse, userAgent } from "next/server";
+import type { NextMiddleware } from "next/server";
+import { NextResponse, userAgent } from "next/server";
 
 import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { isIpInBanlist } from "@calcom/lib/getIP";

apps/web/package.json

@@ -50,7 +50,7 @@
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^1.0.0",
     "@radix-ui/react-id": "^1.0.0",
-    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
@@ -69,7 +69,7 @@
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
-    "eslint-config-next": "^13.1.1",
+    "eslint-config-next": "^13.1.6",
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
@@ -81,10 +81,10 @@
     "lottie-react": "^2.3.1",
     "markdown-it": "^13.0.1",
     "memory-cache": "^0.2.0",
-    "micro": "^9.4.1",
+    "micro": "^10.0.1",
     "mime-types": "^2.1.35",
     "next": "^13.1.1",
-    "next-auth": "^4.10.3",
+    "next-auth": "^4.18.8",
     "next-axiom": "^0.16.0",
     "next-collect": "^0.2.1",
     "next-i18next": "^11.3.0",
@@ -146,7 +146,7 @@
     "@types/node": "16.9.1",
     "@types/nodemailer": "^6.4.5",
     "@types/qrcode": "^1.4.3",
-    "@types/react": "^18.0.17",
+    "@types/react": "18.0.26",
     "@types/react-phone-number-input": "^3.0.14",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -157,7 +157,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "detect-port": "^1.3.0",
     "env-cmd": "^10.1.0",
-    "eslint": "^8.22.0",
+    "eslint": "^8.34.0",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.2",
     "msw": "^0.42.3",

apps/web/pages/404.tsx

@@ -1,4 +1,4 @@
-import { GetStaticPropsContext } from "next";
+import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";

apps/web/pages/[user].tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import MarkdownIt from "markdown-it";
-import { GetServerSidePropsContext } from "next";
+import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -30,8 +30,8 @@ import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { HeadSeo, AvatarGroup, Avatar } from "@calcom/ui";
 import { BadgeCheckIcon, FiArrowRight } from "@calcom/ui/components/icon";
 
-import { inferSSRProps } from "@lib/types/inferSSRProps";
-import { EmbedProps } from "@lib/withEmbedSsr";
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/[user]/[type].tsx

@@ -1,15 +1,16 @@
 import MarkdownIt from "markdown-it";
-import { GetStaticPaths, GetStaticPropsContext } from "next";
+import type { GetStaticPaths, GetStaticPropsContext } from "next";
 import { z } from "zod";
 
-import { privacyFilteredLocations, LocationObject } from "@calcom/app-store/locations";
+import type { LocationObject } from "@calcom/app-store/locations";
+import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
 import prisma from "@calcom/prisma";
-import { User } from "@calcom/prisma/client";
+import type { User } from "@calcom/prisma/client";
 import {
   EventTypeMetaDataSchema,
   teamMetadataSchema,
@@ -17,8 +18,8 @@ import {
 } from "@calcom/prisma/zod-utils";
 
 import { isBrandingHidden } from "@lib/isBrandingHidden";
-import { inferSSRProps } from "@lib/types/inferSSRProps";
-import { EmbedProps } from "@lib/withEmbedSsr";
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";
 
@@ -132,7 +133,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
 
   if (!user || !user.eventTypes.length) return { notFound: true };
 
-  const [eventType]: (typeof user.eventTypes[number] & {
+  const [eventType]: ((typeof user.eventTypes)[number] & {
     users: Pick<User, "name" | "username" | "hideBranding" | "timeZone">[];
   })[] = [
     {

apps/web/pages/[user]/[type]/embed.tsx

@@ -1,4 +1,4 @@
-import { GetStaticPropsContext } from "next";
+import type { GetStaticPropsContext } from "next";
 
 import { getStaticProps as _getStaticProps } from "../[type]";
 

apps/web/pages/[user]/book.tsx

@@ -1,6 +1,7 @@
-import { GetServerSidePropsContext } from "next";
+import type { GetServerSidePropsContext } from "next";
 
-import { LocationObject, privacyFilteredLocations } from "@calcom/app-store/locations";
+import type { LocationObject } from "@calcom/app-store/locations";
+import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
 import { parseRecurringEvent } from "@calcom/lib";
 import {
@@ -19,8 +20,9 @@ import {
 } from "@calcom/prisma/zod-utils";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
-import getBooking, { GetBookingType } from "@lib/getBooking";
-import { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { GetBookingType } from "@lib/getBooking";
+import getBooking from "@lib/getBooking";
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import BookingPage from "@components/booking/pages/BookingPage";
 

apps/web/pages/[user]/calendar-cache/[month].tsx

@@ -3,7 +3,7 @@
  * caching system that NextJS uses SSG pages.
  * TODO: Redirect to user profile on browser
  */
-import { GetStaticPaths, GetStaticProps } from "next";
+import type { GetStaticPaths, GetStaticProps } from "next";
 import { z } from "zod";
 
 import { getCachedResults } from "@calcom/core";

apps/web/pages/_app.tsx

@@ -6,7 +6,8 @@ import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { trpc } from "@calcom/trpc/react";
 
-import AppProviders, { AppProps } from "@lib/app-providers";
+import type { AppProps } from "@lib/app-providers";
+import AppProviders from "@lib/app-providers";
 import { seoConfig } from "@lib/config/next-seo.config";
 
 import I18nLanguageHandler from "@components/I18nLanguageHandler";

apps/web/pages/_document.tsx

@@ -1,4 +1,5 @@
-import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps } from "next/document";
+import type { DocumentContext, DocumentProps } from "next/document";
+import Document, { Head, Html, Main, NextScript } from "next/document";
 import Script from "next/script";
 import { z } from "zod";
 

apps/web/pages/_error.tsx

@@ -3,8 +3,9 @@
  * @link https://nextjs.org/docs/advanced-features/custom-error-page
  */
 import * as Sentry from "@sentry/nextjs";
-import { NextPage, NextPageContext } from "next";
-import NextError, { ErrorProps } from "next/error";
+import type { NextPage, NextPageContext } from "next";
+import type { ErrorProps } from "next/error";
+import NextError from "next/error";
 import React from "react";
 
 import { getErrorFromUnknown } from "@calcom/lib/errors";

apps/web/pages/api/auth/[...nextauth].tsx

@@ -1,13 +1,16 @@
-import { IdentityProvider, UserPermissionRole } from "@prisma/client";
+import type { UserPermissionRole } from "@prisma/client";
+import { IdentityProvider } from "@prisma/client";
 import { readFileSync } from "fs";
 import Handlebars from "handlebars";
-import NextAuth, { Session } from "next-auth";
+import type { Session } from "next-auth";
+import NextAuth from "next-auth";
 import { encode } from "next-auth/jwt";
-import { Provider } from "next-auth/providers";
+import type { Provider } from "next-auth/providers";
 import CredentialsProvider from "next-auth/providers/credentials";
 import EmailProvider from "next-auth/providers/email";
 import GoogleProvider from "next-auth/providers/google";
-import nodemailer, { TransportOptions } from "nodemailer";
+import type { TransportOptions } from "nodemailer";
+import nodemailer from "nodemailer";
 import { authenticator } from "otplib";
 import path from "path";
 

apps/web/pages/api/auth/forgot-password.ts

@@ -1,5 +1,5 @@
-import { ResetPasswordRequest } from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
+import type { ResetPasswordRequest } from "@prisma/client";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 import dayjs from "@calcom/dayjs";
 import { sendPasswordResetEmail } from "@calcom/emails";

apps/web/pages/api/auth/oidc.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";
 

apps/web/pages/api/auth/reset-password.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 import prisma from "@calcom/prisma";
 

apps/web/pages/api/auth/saml/authorize.ts

@@ -1,9 +1,9 @@
-import { OAuthReq } from "@boxyhq/saml-jackson";
-import { NextApiRequest, NextApiResponse } from "next";
+import type { OAuthReq } from "@boxyhq/saml-jackson";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";
 
-import { HttpError } from "@lib/core/http/error";
+import type { HttpError } from "@lib/core/http/error";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { oauthController } = await jackson();

apps/web/pages/api/auth/saml/callback.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";

apps/web/pages/api/auth/saml/token.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest } from "next";
+import type { NextApiRequest } from "next";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";

apps/web/pages/api/auth/saml/userinfo.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest } from "next";
+import type { NextApiRequest } from "next";
 import z from "zod";
 
 import jackson from "@calcom/features/ee/sso/lib/jackson";

apps/web/pages/api/auth/setup.ts

@@ -1,5 +1,5 @@
 import { IdentityProvider } from "@prisma/client";
-import { NextApiRequest } from "next";
+import type { NextApiRequest } from "next";
 import z from "zod";
 
 import { isPasswordValid } from "@calcom/lib/auth";

apps/web/pages/api/auth/signup.ts

@@ -1,5 +1,5 @@
 import { IdentityProvider } from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 import { hashPassword } from "@calcom/lib/auth";
 import slugify from "@calcom/lib/slugify";

apps/web/pages/api/auth/two-factor/totp/disable.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 
 import { symmetricDecrypt } from "@calcom/lib/crypto";

apps/web/pages/api/auth/two-factor/totp/enable.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 
 import { symmetricDecrypt } from "@calcom/lib/crypto";