Eslint fixes (#1898)

* Eslint fixes

* Docs build fixes

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require("./packages/config/eslint-preset");

apps/docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/docs/next.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.js",

apps/docs/package.json

@@ -4,7 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4000 next",
+    "lint": "next lint",
     "start": "PORT=4000 next start",
     "build": "next build"
   },
@@ -16,5 +18,9 @@
     "nextra-theme-docs": "^1.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@calcom/config": "*",
+    "eslint": "^8.9.0"
   }
 }

apps/docs/pages/_app.js → apps/docs/pages/_app.tsx

@@ -1,4 +1,5 @@
 import "nextra-theme-docs/style.css";
+
 import "./style.css";
 
 export default function Nextra({ Component, pageProps }) {

apps/docs/pages/self-hosting/install.mdx

@@ -52,50 +52,51 @@ yarn dx
 
 1.  Configure database in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
-    ```text
-    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
-    ```
+        ```text
+        DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
+        ```
+
+        <details>
 
-          <details>
+            <summary>
+            If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB
+            using Heroku
+            </summary>
 
-    <summary>
-      If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB
-      using Heroku
-    </summary>
+            1. Create a free account with [Heroku](https://www.heroku.com/).
 
-    1. Create a free account with [Heroku](https://www.heroku.com/).
+            2. Create a new app.
 
-    2. Create a new app.
+            <img
+                width="306"
+                alt="Create an App"
+                src="https://user-images.githubusercontent.com/16905768/115322780-b3d58c00-a17e-11eb-8a52-b758fb0ea942.png"
+            />
 
-       <img
-         width="306"
-         alt="Create an App"
-         src="https://user-images.githubusercontent.com/16905768/115322780-b3d58c00-a17e-11eb-8a52-b758fb0ea942.png"
-       />
+            3. In your new app, go to `Overview` and next to `Installed add-ons`, click `Configure Add-ons`. We need this to set up our database.
+            ![image](https://user-images.githubusercontent.com/16905768/115323232-a53ba480-a17f-11eb-98db-58e2f8c52426.png)
 
-    3. In your new app, go to `Overview` and next to `Installed add-ons`, click `Configure Add-ons`. We need this to set up our database.
-       ![image](https://user-images.githubusercontent.com/16905768/115323232-a53ba480-a17f-11eb-98db-58e2f8c52426.png)
+            4. Once you clicked on `Configure Add-ons`, click on `Find more add-ons` and search for `postgres`. One of the options will be `Heroku Postgres` - click on that option.
+            ![image](https://user-images.githubusercontent.com/16905768/115323126-5beb5500-a17f-11eb-8030-7380310807a9.png)
 
-    4. Once you clicked on `Configure Add-ons`, click on `Find more add-ons` and search for `postgres`. One of the options will be `Heroku Postgres` - click on that option.
-       ![image](https://user-images.githubusercontent.com/16905768/115323126-5beb5500-a17f-11eb-8030-7380310807a9.png)
+            5. Once the pop-up appears, click `Submit Order Form` - plan name should be `Hobby Dev - Free`.
 
-    5. Once the pop-up appears, click `Submit Order Form` - plan name should be `Hobby Dev - Free`.
+            <img
+                width="512"
+                alt="Submit Order Form"
+                src="https://user-images.githubusercontent.com/16905768/115323265-b4baed80-a17f-11eb-99f0-d67f019aa6df.png"
+            />
 
-       <img
-         width="512"
-         alt="Submit Order Form"
-         src="https://user-images.githubusercontent.com/16905768/115323265-b4baed80-a17f-11eb-99f0-d67f019aa6df.png"
-       />
+            6. Once you completed the above steps, click on your newly created `Heroku Postgres` and go to its `Settings`.
+            ![image](https://user-images.githubusercontent.com/16905768/115323367-e92ea980-a17f-11eb-9ff4-dec95f2ec349.png)
 
-    6. Once you completed the above steps, click on your newly created `Heroku Postgres` and go to its `Settings`.
-       ![image](https://user-images.githubusercontent.com/16905768/115323367-e92ea980-a17f-11eb-9ff4-dec95f2ec349.png)
+            7. In `Settings`, copy your URI to your Cal.com .env file and replace the `postgresql://<user>:<pass>@<db-host>:<db-port>` with it.
+            ![image](https://user-images.githubusercontent.com/16905768/115323556-4591c900-a180-11eb-9808-2f55d2aa3995.png)
+            ![image](https://user-images.githubusercontent.com/16905768/115323697-7a9e1b80-a180-11eb-9f08-a742b1037f90.png)
 
-    7. In `Settings`, copy your URI to your Cal.com .env file and replace the `postgresql://<user>:<pass>@<db-host>:<db-port>` with it.
-       ![image](https://user-images.githubusercontent.com/16905768/115323556-4591c900-a180-11eb-9808-2f55d2aa3995.png)
-       ![image](https://user-images.githubusercontent.com/16905768/115323697-7a9e1b80-a180-11eb-9f08-a742b1037f90.png)
+            8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com/).
 
-    8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com/).
-       </details>
+        </details>
 
 1.  Set a 32 character random string in your `apps/web/.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
 1.  Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)

apps/docs/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

apps/web/components/booking/DatePicker.tsx

@@ -51,10 +51,8 @@ function isOutOfBounds(
   switch (periodType) {
     case PeriodType.ROLLING: {
       const periodRollingEndDay = periodCountCalendarDays
-        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          dayjs().utcOffset(date.utcOffset()).add(periodDays!, "days").endOf("day")
-        : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          dayjs().utcOffset(date.utcOffset()).addBusinessTime(periodDays!, "days").endOf("day");
+        ? dayjs().utcOffset(date.utcOffset()).add(periodDays!, "days").endOf("day")
+        : dayjs().utcOffset(date.utcOffset()).addBusinessTime(periodDays!, "days").endOf("day");
       return date.endOf("day").isAfter(periodRollingEndDay);
     }
 

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

@@ -61,14 +61,14 @@ const BookingPage = (props: BookingPageProps) => {
       const eventOwner = eventType.users[0];
 
       if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         /* @ts-ignore */
         router.replace(`/${eventOwner.username}`);
     }
   }, [contracts, eventType.metadata.smartContractAddress, router]);
 
   const mutation = useMutation(createBooking, {
-    onSuccess: async ({ attendees, paymentUid, ...responseData }) => {
+    onSuccess: async (responseData) => {
+      const { attendees, paymentUid } = responseData;
       if (paymentUid) {
         return await router.push(
           createPaymentLink({
@@ -239,7 +239,6 @@ const BookingPage = (props: BookingPageProps) => {
     let web3Details;
     if (eventTypeDetail.metadata.smartContractAddress) {
       web3Details = {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         userWallet: window.web3.currentProvider.selectedAddress,
         userSignature: contracts[(eventTypeDetail.metadata.smartContractAddress || null) as number],
@@ -259,9 +258,7 @@ const BookingPage = (props: BookingPageProps) => {
       location: getLocationValue(booking.locationType ? booking : { locationType: selectedLocation }),
       metadata,
       customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         label: props.eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         value: booking.customInputs![inputId],
       })),
     });
@@ -397,7 +394,6 @@ const BookingPage = (props: BookingPageProps) => {
                         {t("phone_number")}
                       </label>
                       <div className="mt-1">
-                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                         {/* @ts-ignore */}
                         <PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required />
                       </div>

apps/web/contexts/contractsContext.tsx

@@ -38,7 +38,6 @@ export function ContractsProvider({ children }: Props) {
 
   return (
     <>
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
       {/* @ts-ignore */}
       <ContractsContext.Provider value={value}>{children}</ContractsContext.Provider>
     </>

apps/web/ee/components/web3/CryptoSection.tsx

@@ -65,10 +65,8 @@ const CryptoSection = (props: CryptoSectionProps) => {
       } else {
         const account = (await window.web3.eth.getAccounts())[0];
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         const signature = await window.web3.eth.personal.sign(AUTH_MESSAGE, account);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         addContract({ address: props.smartContractAddress, signature });
 

apps/web/lib/QueryCell.tsx

@@ -53,7 +53,6 @@ export function QueryCell<TData, TError extends ErrorLike>(
     if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
       return opts.empty(query);
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return opts.success(query as any);
   }
   if (query.status === "error") {

apps/web/lib/jackson.ts

@@ -19,7 +19,6 @@ const opts: JacksonOption = {
 let apiController: IAPIController;
 let oauthController: IOAuthController;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const g = global as any;
 
 export default async function init() {

apps/web/lib/slots.ts

@@ -24,7 +24,6 @@ const getMinuteOffset = (date: Dayjs, frequency: number) => {
   return Math.ceil(minuteOffset / frequency) * frequency;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getSlots = ({ inviteeDate, frequency, minimumBookingNotice, workingHours }: GetSlots) => {
   // current date in invitee tz
   const startDate = dayjs().add(minimumBookingNotice, "minute");

apps/web/lib/telemetry.ts

@@ -76,12 +76,10 @@ function createTelemetryClient(): TelemetryClient {
           return;
         } else if (
           // FIXME
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           !window["jitsu"]
         ) {
           // FIXME
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           window["jitsu"] = jitsuClient({
             log_level: "ERROR",
@@ -92,7 +90,6 @@ function createTelemetryClient(): TelemetryClient {
           });
         }
         // FIXME
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         const res = callback(window["jitsu"]);
         if (res && typeof res["catch"] === "function") {

apps/web/lib/types/inferSSRProps.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 type GetSSRResult<TProps> =
   //
   { props: TProps } | { redirect: any } | { notFound: boolean };

apps/web/next-i18next.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 module.exports = {

apps/web/next.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const withTM = require("@vercel/edge-functions-ui/transpile")(["@calcom/lib", "@calcom/prisma"]);
 const { i18n } = require("./next-i18next.config");
 

apps/web/package.json

@@ -16,8 +16,8 @@
     "type-check": "tsc --pretty --noEmit",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint . --ext .ts,.js,.tsx,.jsx",
-    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "lint": "next lint",
+    "lint:fix": "next lint . --ext .ts,.js,.tsx,.jsx --fix",
     "check-changed-files": "ts-node scripts/ts-check-changed-files.ts"
   },
   "engines": {
@@ -103,10 +103,10 @@
     "zod": "^3.8.2"
   },
   "devDependencies": {
+    "@calcom/config": "*",
     "@microsoft/microsoft-graph-types-beta": "0.15.0-preview",
     "@playwright/test": "^1.18.1",
     "@tailwindcss/forms": "^0.4.0",
-    "@trivago/prettier-plugin-sort-imports": "2.0.4",
     "@types/accept-language-parser": "1.5.2",
     "@types/async": "^3.2.10",
     "@types/bcryptjs": "^2.4.2",
@@ -123,24 +123,15 @@
     "@types/react-window": "^1.8.5",
     "@types/stripe": "^8.0.417",
     "@types/uuid": "8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
     "autoprefixer": "^10.4.0",
     "babel-jest": "^27.3.1",
     "env-cmd": "10.1.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-playwright": "^0.7.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^26.0.0",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.4",
-    "prettier": "^2.5.1",
-    "prettier-plugin-tailwindcss": "^0.1.6",
+    "eslint": "^8.9.0",
     "tailwindcss": "^3.0.0",
     "ts-jest": "^26.0.0",
     "ts-node": "^10.2.1",

apps/web/pages/_error.tsx

@@ -33,7 +33,7 @@ const CustomError: NextPage<CustomErrorProps> = (props) => {
     // getInitialProps is not called in case of
     // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
     // err via _app.tsx so it can be captured
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // eslint-disable-next-line no-unused-vars
     const e = getErrorFromUnknown(err);
     // can be captured here
     // e.g. Sentry.captureException(e);

apps/web/pages/api/book/event.ts

@@ -104,7 +104,6 @@ function isAvailable(busyTimes: BufferedBusyTimes, time: string, length: number)
 
 function isOutOfBounds(
   time: dayjs.ConfigType,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   { periodType, periodDays, periodCountCalendarDays, periodStartDate, periodEndDate, timeZone }: any // FIXME types
 ): boolean {
   const date = dayjs(time);

apps/web/pages/getting-started.tsx

@@ -188,7 +188,6 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
         steps[currentStep].onComplete &&
         typeof steps[currentStep].onComplete === "function"
       ) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         await steps[currentStep].onComplete!();
       }
       incrementStep();

apps/web/pages/settings/profile.tsx

@@ -137,7 +137,6 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
     return (router.locales || []).map((locale) => ({
       value: locale,
       // FIXME
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       label: new Intl.DisplayNames(props.localeProp, { type: "language" }).of(locale),
     }));

apps/web/pages/video/meeting-ended/[uid].tsx

@@ -16,7 +16,6 @@ import Button from "@components/ui/Button";
 export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
   const router = useRouter();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [is24h, setIs24h] = useState(false);
 
   //if no booking redirectis to the 404 page

apps/web/pages/video/meeting-not-started/[uid].tsx

@@ -23,7 +23,6 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
       router.push("/video/no-meeting-found");
     }
   });
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [is24h, setIs24h] = useState(false);
   if (!emptyBooking) {
     return (

apps/web/playwright/lib/testUtils.ts

@@ -2,7 +2,6 @@ import { test } from "@playwright/test";
 import { createServer, IncomingMessage, ServerResponse } from "http";
 
 export function todo(title: string) {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   test.skip(title, () => {});
 }
 

apps/web/scripts/ts-check-changed-files.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { execSync } from "child_process";
 
 const diff = execSync(`git diff --name-only origin/main HEAD`).toString();

apps/web/types/next-auth.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import NextAuth, { DefaultSession } from "next-auth";
 
 declare module "next-auth" {