Update all Yarn dependencies (2022-05-16) (calcom#2769)

* Update all Yarn dependencies (2022-05-16) * Upgrade dependencies * Removes deprecated packages * Upgrades deps * Updates submodules * Update yarn.lock * Linting * Linting * Update website * Build fixes * TODO: fix this * Module resolving * Type fixes * Intercom fixes on SSG * Fixes infinite loop * Upgrades to React 18 * Type fixes * Locks node version to 14 * Upgrades daily-js * Readds missing types * Upgrades playwright * Noop when intercom is not installed * Update website * Removed yarn.lock in favor of monorepo Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com> Co-authored-by: zomars <[email protected]>
Denike-d · May 17, 2022 · db01f7b · db01f7b
1 parent 683e8c4
commit db01f7b
Show file tree

Hide file tree

Showing 60 changed files with 1,749 additions and 21,357 deletions.
diff --git a/apps/admin b/apps/admin
diff --git a/apps/api b/apps/api
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -16,14 +16,14 @@
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^12.1.0",
+    "next": "^12.1.6",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.10.0"
+    "eslint": "^8.15.0"
   }
 }
diff --git a/apps/docs/yarn.lock b/apps/docs/yarn.lock
diff --git a/apps/swagger/package.json b/apps/swagger/package.json
@@ -10,16 +10,16 @@
   "dependencies": {
     "highlight.js": "^11.5.1",
     "isarray": "2.0.5",
-    "next": "12.1.5",
+    "next": "12.1.6",
     "openapi-snippet": "^0.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "swagger-ui-react": "4.10.3"
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "swagger-ui-react": "4.11.1"
   },
   "devDependencies": {
-    "@types/node": "17.0.27",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "typescript": "4.6.3"
+    "@types/node": "14.17.6",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "typescript": "4.6.4"
   }
 }
diff --git a/apps/swagger/yarn.lock b/apps/swagger/yarn.lock
diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
@@ -2,7 +2,7 @@ import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
 import Button from "@calcom/ui/Button";
-import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
@@ -71,15 +71,15 @@ export default function ImageUploader({
   ...props
 }: ImageUploaderProps) {
   const { t } = useLocale();
-  const [imageSrc, setImageSrc] = useState<string | null>();
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>();
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
 
   const [{ result }, setFile] = useFileReader({
     method: "readAsDataURL",
   });
 
   useEffect(() => {
-    setImageSrc(props.imageSrc);
+    if (props.imageSrc) setImageSrc(props.imageSrc);
   }, [props.imageSrc]);
 
   const onInputFile = (e: FileEvent<HTMLInputElement>) => {
@@ -90,8 +90,9 @@ export default function ImageUploader({
   };
 
   const showCroppedImage = useCallback(
-    async (croppedAreaPixels) => {
+    async (croppedAreaPixels: Area | null) => {
       try {
+        if (!croppedAreaPixels) return;
         const croppedImage = await getCroppedImg(
           result as string /* result is always string when using readAsDataUrl */,
           croppedAreaPixels

diff --git a/apps/web/components/NavTabs.tsx b/apps/web/components/NavTabs.tsx
@@ -1,9 +1,10 @@
 import { AdminRequired } from "components/ui/AdminRequired";
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React, { ElementType, FC, Fragment, MouseEventHandler } from "react";
+import { FC, Fragment, MouseEventHandler } from "react";
 
 import classNames from "@lib/classNames";
+import { SVGComponent } from "@lib/types/SVGComponent";
 
 export interface NavTabProps {
   tabs: {
@@ -12,7 +13,7 @@ export interface NavTabProps {
     href?: string;
     /** If you want to change query param tabName as per current tab */
     tabName?: string;
-    icon?: ElementType;
+    icon?: SVGComponent;
     adminRequired?: boolean;
   }[];
   linkProps?: Omit<LinkProps, "href">;

diff --git a/apps/web/components/booking/DatePicker.tsx b/apps/web/components/booking/DatePicker.tsx
@@ -1,7 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
 import { EventType, PeriodType } from "@prisma/client";
 import dayjs, { Dayjs } from "dayjs";
-import dayjsBusinessTime from "dayjs-business-time";
+import dayjsBusinessTime from "dayjs-business-days2";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { memoize } from "lodash";
@@ -56,7 +56,7 @@ function isOutOfBounds(
     case PeriodType.ROLLING: {
       const periodRollingEndDay = periodCountCalendarDays
         ? dayjs().utcOffset(date.utcOffset()).add(periodDays!, "days").endOf("day")
-        : dayjs().utcOffset(date.utcOffset()).addBusinessTime(periodDays!, "days").endOf("day");
+        : dayjs().utcOffset(date.utcOffset()).businessDaysAdd(periodDays!).endOf("day");
       return date.endOf("day").isAfter(periodRollingEndDay);
     }
 

diff --git a/apps/web/components/team/TeamSettingsRightSidebar.tsx b/apps/web/components/team/TeamSettingsRightSidebar.tsx
@@ -118,7 +118,6 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
         )}
       </div>
       {props.team?.id && props.role !== MembershipRole.MEMBER && (
-        // eslint-disable-next-line @next/next/link-passhref
         <Link href={`/settings/teams/${props.team.id}/availability`}>
           <div className="mt-5 hidden space-y-1 sm:block">
             <LinkIconButton Icon={ClockIcon}>{"View Availability"}</LinkIconButton>

diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
@@ -37,7 +37,6 @@ const Team = ({ team }: TeamPageProps) => {
     );
 
     return (
-      // eslint-disable-next-line @next/next/link-passhref
       <Link key={member.id} href={`/${member.username}`}>
         <div className={classes}>
           <ArrowRightIcon

diff --git a/apps/web/components/ui/AdminRequired.tsx b/apps/web/components/ui/AdminRequired.tsx
@@ -3,6 +3,7 @@ import { FC, Fragment } from "react";
 
 type AdminRequiredProps = {
   as?: keyof JSX.IntrinsicElements;
+  children?: React.ReactNode;
 };
 
 export const AdminRequired: FC<AdminRequiredProps> = ({ children, as, ...rest }) => {

diff --git a/apps/web/components/ui/form/radio-area/RadioAreaGroup.tsx b/apps/web/components/ui/form/radio-area/RadioAreaGroup.tsx
@@ -36,7 +36,7 @@ type ChildrenProps = {
   props: RadioAreaProps;
   children?: ReactNode;
 };
-interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
+interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
   children: ChildrenProps | ChildrenProps[];
   name?: string;
   onChange?: (value: string) => void;

diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
@@ -100,8 +100,10 @@ export default function TeamAvailabilityScreen(props: Props) {
         </div>
       </div>
       <div className="flex h-full flex-1">
+        {/* @ts-ignore */}
         <AutoSizer>
           {({ height, width }) => (
+            // @ts-ignore
             <List
               itemSize={240}
               itemCount={props.team?.members?.length ?? 0}

diff --git a/apps/web/ee/components/web3/CryptoSection.tsx b/apps/web/ee/components/web3/CryptoSection.tsx
@@ -93,7 +93,7 @@ const CryptoSection = (props: CryptoSectionProps) => {
 
   const verifyButton = useMemo(() => {
     return (
-      <Button color="secondary" onClick={verifyWallet} type="button" id="hasToken" name="hasToken">
+      <Button color="secondary" onClick={verifyWallet} type="button" id="hasToken">
         {
           // eslint-disable-next-line @next/next/no-img-element
           <img className="mr-1 h-5" src="/apps/metamask.svg" alt="MetaMask" />

diff --git a/apps/web/ee/lib/helpscout/provider.tsx b/apps/web/ee/lib/helpscout/provider.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { LiveChatLoaderProvider } from "react-live-chat-loader";
 
-const Provider: FC = ({ children }) => (
+const Provider: FC<{ children: React.ReactNode }> = ({ children }) => (
   <LiveChatLoaderProvider providerKey={process.env.NEXT_PUBLIC_HELPSCOUT_KEY!} provider="helpScout">
     <>{children}</>
   </LiveChatLoaderProvider>

diff --git a/apps/web/ee/lib/intercom/IntercomMenuItem.tsx b/apps/web/ee/lib/intercom/IntercomMenuItem.tsx
@@ -1,11 +1,12 @@
 import { ChatAltIcon } from "@heroicons/react/solid";
-import { useIntercom } from "react-use-intercom";
 
 import { DropdownMenuItem } from "@calcom/ui/Dropdown";
 
 import classNames from "@lib/classNames";
 import { useLocale } from "@lib/hooks/useLocale";
 
+import { useIntercom } from "./useIntercom";
+
 export default function IntercomMenuItem() {
   const { t } = useLocale();
   const { boot, show } = useIntercom();

diff --git a/apps/web/ee/lib/intercom/provider.tsx b/apps/web/ee/lib/intercom/provider.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { IntercomProvider } from "react-use-intercom";
 
-const Provider: FC = ({ children }) => (
+const Provider: FC<{ children: React.ReactNode }> = ({ children }) => (
   <IntercomProvider appId={process.env.NEXT_PUBLIC_INTERCOM_APP_ID!}>{children}</IntercomProvider>
 );
 

diff --git a/apps/web/ee/lib/intercom/useIntercom.ts b/apps/web/ee/lib/intercom/useIntercom.ts
@@ -0,0 +1,11 @@
+import { useIntercom as _useIntercom } from "react-use-intercom";
+
+export const useIntercom =
+  typeof window !== "undefined" && !!process.env.NEXT_PUBLIC_INTERCOM_APP_ID
+    ? _useIntercom
+    : () => ({
+        boot: () => {},
+        show: () => {},
+      });
+
+export default useIntercom;
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
@@ -1,6 +1,6 @@
 import { SessionProvider } from "next-auth/react";
 import { appWithTranslation } from "next-i18next";
-import type { AppProps as NextAppProps } from "next/app";
+import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
 import { ComponentProps, ReactNode, useMemo } from "react";
 
 import DynamicHelpscoutProvider from "@ee/lib/helpscout/providerDynamic";
@@ -11,7 +11,9 @@ import { createTelemetryClient, TelemetryProvider } from "@lib/telemetry";
 
 import { trpc } from "./trpc";
 
-const I18nextAdapter = appWithTranslation(({ children }: { children?: ReactNode }) => <>{children}</>);
+const I18nextAdapter = appWithTranslation<NextJsAppProps & { children: React.ReactNode }>(({ children }) => (
+  <>{children}</>
+));
 
 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = NextAppProps & {