refactor: remove @calcom/features dependency to @calcom/web (#13365)

* refactor: remove @calcom/features dependency to @calcom/web

* refactor: remove IS_VISUAL_REGRESSION_TESTING from web

* fix: wrong imports

---------

Co-authored-by: Omar López <zomars@me.com>

apps/ai/tsconfig.json

@@ -13,6 +13,12 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "../../packages/types/window.d.ts"
+  ],
   "exclude": ["node_modules"]
 }

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -21,6 +21,7 @@ import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
@@ -35,7 +36,6 @@ import {
   Tooltip,
 } from "@calcom/ui";
 import { Copy, Edit, Info } from "@calcom/ui/components/icon";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 

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

@@ -2,8 +2,7 @@ import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
-
-import InfoBadge from "@components/ui/InfoBadge";
+import { InfoBadge } from "@calcom/ui";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;

apps/web/constants.ts

@@ -1 +0,0 @@
-export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);

apps/web/pages/api/auth/oauth/refreshToken.ts

@@ -1,9 +1,9 @@
 import jwt from "jsonwebtoken";
 import type { NextApiRequest, NextApiResponse } from "next";
-import type { OAuthTokenPayload } from "pages/api/auth/oauth/token";
 
 import prisma from "@calcom/prisma";
 import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
+import type { OAuthTokenPayload } from "@calcom/types/oauth";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {

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

@@ -3,14 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 
 import prisma from "@calcom/prisma";
 import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
-
-export type OAuthTokenPayload = {
-  userId?: number | null;
-  teamId?: number | null;
-  token_type: string;
-  scope: string[];
-  clientId: string;
-};
+import type { OAuthTokenPayload } from "@calcom/types/oauth";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {

apps/web/pages/event-types/index.tsx

@@ -54,6 +54,7 @@ import {
   Switch,
   Tooltip,
   ArrowButton,
+  UserAvatarGroup,
 } from "@calcom/ui";
 import {
   Clipboard,
@@ -74,7 +75,6 @@ import useMeQuery from "@lib/hooks/useMeQuery";
 
 import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/eventtype/SkeletonLoader";
-import { UserAvatarGroup } from "@components/ui/avatar/UserAvatarGroup";
 
 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];

apps/web/pages/team/[slug].tsx

@@ -19,7 +19,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
-import { Avatar, Button, HeadSeo, UnpublishedEntity } from "@calcom/ui";
+import { Avatar, Button, HeadSeo, UnpublishedEntity, UserAvatarGroup } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
@@ -28,7 +28,6 @@ import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import PageWrapper from "@components/PageWrapper";
 import Team from "@components/team/screens/Team";
-import { UserAvatarGroup } from "@components/ui/avatar/UserAvatarGroup";
 
 export { getServerSideProps };
 

packages/features/auth/lib/oAuthAuthorization.ts

@@ -2,7 +2,7 @@ import jwt from "jsonwebtoken";
 import type { NextApiRequest } from "next";
 
 import prisma from "@calcom/prisma";
-import type { OAuthTokenPayload } from "@calcom/web/pages/api/auth/oauth/token";
+import type { OAuthTokenPayload } from "@calcom/types/oauth";
 
 export default async function isAuthorized(req: NextApiRequest, requiredScopes: string[] = []) {
   const token = req.headers.authorization?.split(" ")[1] || "";

packages/features/bookings/Booker/components/InstantBooking.tsx

@@ -1,8 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { type RouterOutputs } from "@calcom/trpc";
-import { Button } from "@calcom/ui";
-import { UserAvatarGroupWithOrg } from "@calcom/web/components/ui/avatar/UserAvatarGroupWithOrg";
+import { Button, UserAvatarGroupWithOrg } from "@calcom/ui";
 
 interface IInstantBookingProps {
   onConnectNow: () => void;

packages/features/bookings/components/event-meta/Members.tsx

@@ -1,6 +1,5 @@
 import { SchedulingType } from "@calcom/prisma/enums";
-import { UserAvatarGroup } from "@calcom/web/components/ui/avatar/UserAvatarGroup";
-import { UserAvatarGroupWithOrg } from "@calcom/web/components/ui/avatar/UserAvatarGroupWithOrg";
+import { UserAvatarGroup, UserAvatarGroupWithOrg } from "@calcom/ui";
 
 import type { PublicEvent } from "../../types";
 

packages/features/form-builder/Components.tsx

@@ -19,8 +19,8 @@ import {
   InputField,
   CheckboxField,
 } from "@calcom/ui";
+import { InfoBadge } from "@calcom/ui";
 import { UserPlus, X } from "@calcom/ui/components/icon";
-import InfoBadge from "@calcom/web/components/ui/InfoBadge";
 
 import { ComponentForField } from "./FormBuilderField";
 import { propsTypes } from "./propsTypes";

packages/features/form-builder/FormBuilderField.tsx

@@ -5,9 +5,8 @@ import type { z } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label } from "@calcom/ui";
+import { Label, InfoBadge } from "@calcom/ui";
 import { Info } from "@calcom/ui/components/icon";
-import InfoBadge from "@calcom/web/components/ui/InfoBadge";
 
 import { Components, isValidValueProp } from "./Components";
 import { fieldTypesConfigMap } from "./fieldTypes";

packages/features/settings/TimezoneChangeDialog.tsx

@@ -2,10 +2,10 @@ import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, showToast } from "@calcom/ui";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();

packages/features/shell/Shell.tsx

@@ -33,8 +33,15 @@ import VerifyEmailBanner, {
   type VerifyEmailBannerProps,
 } from "@calcom/features/users/components/VerifyEmailBanner";
 import classNames from "@calcom/lib/classNames";
-import { TOP_BANNER_HEIGHT } from "@calcom/lib/constants";
-import { APP_NAME, DESKTOP_APP_LINK, JOIN_DISCORD, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
+import {
+  APP_NAME,
+  DESKTOP_APP_LINK,
+  JOIN_DISCORD,
+  ROADMAP,
+  WEBAPP_URL,
+  IS_VISUAL_REGRESSION_TESTING,
+  TOP_BANNER_HEIGHT,
+} from "@calcom/lib/constants";
 import getBrandColours from "@calcom/lib/getBrandColours";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -88,7 +95,6 @@ import {
   Zap,
 } from "@calcom/ui/components/icon";
 import { Discord } from "@calcom/ui/components/icon/Discord";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";

packages/lib/constants.ts

@@ -126,3 +126,5 @@ export const IS_PREMIUM_USERNAME_ENABLED =
 export const MAX_NB_INVITES = 100;
 
 export const URL_PROTOCOL_REGEX = /(^\w+:|^)\/\//;
+
+export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);

packages/lib/tsconfig.json

@@ -5,6 +5,6 @@
     "jsx": "preserve",
     "resolveJsonModule": true
   },
-  "include": [".", "../types/next-auth.d.ts"],
+  "include": [".", "../types/next-auth.d.ts", "../types/window.d.ts"],
   "exclude": ["dist", "build", "node_modules"]
 }

packages/types/oauth.d.ts

@@ -0,0 +1,7 @@
+export type OAuthTokenPayload = {
+  userId?: number | null;
+  teamId?: number | null;
+  token_type: string;
+  scope: string[];
+  clientId: string;
+};

packages/ui/components/avatar/index.ts

@@ -2,4 +2,6 @@ export { Avatar } from "./Avatar";
 export { UserAvatar } from "./UserAvatar";
 export type { AvatarProps } from "./Avatar";
 export { AvatarGroup } from "./AvatarGroup";
+export { UserAvatarGroup } from "./UserAvatarGroup";
+export { UserAvatarGroupWithOrg } from "./UserAvatarGroupWithOrg";
 export type { AvatarGroupProps } from "./AvatarGroup";

packages/ui/components/badge/InfoBadge.tsx

@@ -1,7 +1,7 @@
-import { Tooltip } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
+import { Info } from "../icon";
+import { Tooltip } from "../tooltip/Tooltip";
 
-export default function InfoBadge({ content }: { content: string }) {
+export function InfoBadge({ content }: { content: string }) {
   return (
     <>
       <Tooltip side="top" content={content}>

packages/ui/components/badge/index.ts

@@ -1,5 +1,5 @@
 export { Badge } from "./Badge";
 export { UpgradeTeamsBadge } from "./UpgradeTeamsBadge";
 export { UpgradeOrgsBadge } from "./UpgradeOrgsBadge";
-
+export { InfoBadge } from "./InfoBadge";
 export type { BadgeProps } from "./Badge";

packages/ui/index.tsx

@@ -1,8 +1,14 @@
-export { Avatar, AvatarGroup, UserAvatar } from "./components/avatar";
+export {
+  Avatar,
+  AvatarGroup,
+  UserAvatar,
+  UserAvatarGroup,
+  UserAvatarGroupWithOrg,
+} from "./components/avatar";
 export type { AvatarProps, AvatarGroupProps } from "./components/avatar";
 export { ArrowButton } from "./components/arrow-button";
 export type { ArrowButtonProps } from "./components/arrow-button";
-export { Badge, UpgradeTeamsBadge } from "./components/badge";
+export { Badge, UpgradeTeamsBadge, InfoBadge } from "./components/badge";
 export type { BadgeProps } from "./components/badge";
 export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./components/breadcrumb";
 export { Button, LinkIconButton } from "./components/button";