refactor: split tRPC build into server and react phases

apps/api/v2/package.json

@@ -16,7 +16,7 @@
     "_dev:build:watch:enums": "yarn workspace @calcom/platform-enums build:watch",
     "_dev:build:watch:utils": "yarn workspace @calcom/platform-utils build:watch",
     "_dev:build:watch:types": "yarn workspace @calcom/platform-types build:watch",
-    "dev:build": "yarn workspace @calcom/platform-constants build && yarn workspace @calcom/platform-enums build && yarn workspace @calcom/platform-utils build && yarn workspace @calcom/platform-types build && yarn workspace @calcom/platform-libraries build",
+    "dev:build": "yarn workspace @calcom/platform-constants build && yarn workspace @calcom/platform-enums build && yarn workspace @calcom/platform-utils build && yarn workspace @calcom/platform-types build && yarn workspace @calcom/platform-libraries build && yarn workspace @calcom/trpc build:server",
     "dev": "yarn dev:build && ts-node scripts/docker-start.ts && yarn copy-swagger-module && yarn start --watch",
     "dev:no-docker": "yarn dev:build && yarn copy-swagger-module && yarn start --watch",
     "start:debug": "nest start --debug --watch",

apps/web/components/apps/alby/AlbyPaymentComponent.tsx

@@ -10,7 +10,7 @@ import type { PaymentPageProps } from "@calcom/features/ee/payments/pages/paymen
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Spinner } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";

apps/web/components/apps/alby/Setup.tsx

@@ -9,7 +9,7 @@ import { albyCredentialKeysSchema } from "@calcom/app-store/alby/lib/albyCredent
 import type { IAlbySetupProps } from "@calcom/app-store/alby/pages/setup/_getServerSideProps";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { Icon } from "@calcom/ui/components/icon";

apps/web/components/apps/btcpayserver/BtcpayPaymentComponent.tsx

@@ -8,7 +8,7 @@ import type { PaymentPageProps } from "@calcom/features/ee/payments/pages/paymen
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Spinner } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";

apps/web/components/apps/btcpayserver/Setup.tsx

@@ -14,7 +14,7 @@ import type { IBTCPaySetupProps } from "@calcom/app-store/btcpayserver/pages/set
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";

apps/web/components/apps/hitpay/Setup.tsx

@@ -13,7 +13,7 @@ import { hitpayCredentialKeysSchema } from "@calcom/app-store/hitpay/lib/hitpayC
 import type { IHitPaySetupProps } from "@calcom/app-store/hitpay/pages/setup/_getServerSideProps";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Switch } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";

apps/web/components/apps/paypal/Setup.tsx

@@ -4,7 +4,7 @@ import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { TextField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
@@ -101,7 +101,7 @@ export default function PayPalSetup() {
               <a
                 className="text-orange-600 underline"
                 target="_blank"
-                href="https://developer.paypal.com/api/rest/#link-getclientidandclientsecret">
+                href="https://developer.paypal.com/api/rest/#link-getclientidandclientsecret" rel="noreferrer">
                 Link to Paypal developer API REST Setup Guide:
                 https://developer.paypal.com/api/rest/#link-getclientidandclientsecret
               </a>
@@ -120,7 +120,7 @@ export default function PayPalSetup() {
                   <a
                     target="_blank"
                     href="https://developer.paypal.com/dashboard/applications/live"
-                    className="text-orange-600 underline">
+                    className="text-orange-600 underline" rel="noreferrer">
                     {t("here")}
                   </a>
                   .

apps/web/components/apps/routing-forms/TestForm.tsx

@@ -15,7 +15,7 @@ import { useOrgBranding } from "@calcom/features/ee/organizations/context/provid
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import type { Brand } from "@calcom/types/utils";
 import { Button } from "@calcom/ui/components/button";

apps/web/modules/auth/verify-email-view.tsx

@@ -8,7 +8,7 @@ import { useEffect } from "react";
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";

apps/web/modules/connect-and-join/connect-and-join-view.tsx

@@ -9,7 +9,7 @@ import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-para
 import ServerTrans from "@calcom/lib/components/ServerTrans";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";

apps/web/modules/insights/insights-call-history-view.tsx

@@ -19,7 +19,7 @@ import { CallDetailsSheet } from "@calcom/features/ee/workflows/components/CallD
 import type { CallDetailsState, CallDetailsAction } from "@calcom/features/ee/workflows/components/types";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Badge } from "@calcom/ui/components/badge";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";

apps/web/modules/insights/insights-virtual-queues-view.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 
 import type { RoutingForm } from "@calcom/app-store/routing-forms/types/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Label } from "@calcom/ui/components/form";
 import { Select } from "@calcom/ui/components/form";
 

apps/web/modules/settings/admin/locked-sms-view.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { TextField } from "@calcom/ui/components/form";
 import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/components/toast";

apps/web/modules/settings/admin/oauth-view.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { Form } from "@calcom/ui/components/form";

apps/web/modules/settings/organizations/new/_components/OnboardMembersView.tsx

@@ -8,8 +8,8 @@ import { z } from "zod";
 import { setShowNewOrgModalFlag } from "@calcom/features/ee/organizations/hooks/useWelcomeModal";
 import { useOnboarding } from "@calcom/features/ee/organizations/lib/onboardingStore";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { RouterOutputs } from "@calcom/trpc";
-import { trpc } from "@calcom/trpc";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/components/alert";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";

apps/web/modules/settings/organizations/new/_components/PaymentStatusView.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 
 import { useOnboarding } from "@calcom/features/ee/organizations/lib/onboardingStore";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Icon } from "@calcom/ui/components/icon";
 

apps/web/modules/settings/organizations/privacy/components/blocked-entries-table.tsx

@@ -7,7 +7,7 @@ import { useMemo, useState } from "react";
 import { DataTableWrapper, useDataTable } from "@calcom/features/data-table";
 import { IS_CALCOM } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { ConfirmationDialogContent, Dialog, DialogClose } from "@calcom/ui/components/dialog";

apps/web/modules/settings/organizations/privacy/components/pending-reports-table.tsx

@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
 
 import { DataTableWrapper, useDataTable } from "@calcom/features/data-table";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 

docs/developing/guides/insights/add-new-booking-charts.mdx

@@ -22,7 +22,7 @@ UI Component → tRPC Handler → Insights Service → Database Query → Respon
       import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Line, ResponsiveContainer } from "recharts";
 
       import { useLocale } from "@calcom/lib/hooks/useLocale";
-      import { trpc } from "@calcom/trpc";
+      import { trpc } from "@calcom/trpc/react";
 
       import { useInsightsBookingParameters } from "../../hooks/useInsightsBookingParameters";
       import { ChartCard } from "../ChartCard";

packages/app-store/_utils/getEventTypeAppData.ts

@@ -1,15 +1,15 @@
 import type { z } from "zod";
 
 import type { eventTypeMetaDataSchemaWithTypedApps } from "@calcom/app-store/zod-utils";
-import type { BookerEvent } from "@calcom/features/bookings/types";
+import type { BookerEventForAppData } from "@calcom/features/bookings/types.server";
 
 export type EventTypeApps = NonNullable<
   NonNullable<z.infer<typeof eventTypeMetaDataSchemaWithTypedApps>>["apps"]
 >;
 export type EventTypeAppsList = keyof EventTypeApps;
 
 export const getEventTypeAppData = <T extends EventTypeAppsList>(
-  eventType: Pick<BookerEvent, "price" | "currency" | "metadata">,
+  eventType: BookerEventForAppData,
   appId: T,
   forcedGet?: boolean
 ): EventTypeApps[T] => {

packages/app-store/_utils/payments/getPaymentAppData.ts

@@ -1,6 +1,5 @@
 import type { z } from "zod";
 
-import type { BookerEvent } from "@calcom/features/bookings/types";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
 import type { appDataSchemas } from "../../apps.schemas.generated";
@@ -10,7 +9,9 @@ import { eventTypeMetaDataSchemaWithTypedApps } from "../../zod-utils";
 import { getEventTypeAppData } from "../getEventTypeAppData";
 
 export function getPaymentAppData(
-  _eventType: Pick<BookerEvent, "price" | "currency"> & {
+  _eventType: {
+    price: number;
+    currency: string;
     metadata: z.infer<typeof EventTypeMetaDataSchema>;
   },
   forcedGet?: boolean

packages/features/Segment.test.tsx

@@ -6,7 +6,7 @@ import type { Mock } from "vitest";
 import { Segment } from "@calcom/features/Segment";
 import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
 import { AttributeType } from "@calcom/prisma/enums";
-import { trpc, type RouterOutputs } from "@calcom/trpc";
+import { trpc, type RouterOutputs } from "@calcom/trpc/react";
 
 type Attributes = RouterOutputs["viewer"]["appRoutingForms"]["getAttributesForTeam"];
 type MatchingTeamMembersData = RouterOutputs["viewer"]["attributes"]["findTeamMembersMatchingAttributeLogic"];
@@ -62,7 +62,7 @@ const mockAttributesWithSingleSelect = () => {
 };
 
 // Mock the TRPC hooks
-vi.mock("@calcom/trpc", () => ({
+vi.mock("@calcom/trpc/react", () => ({
   trpc: {
     viewer: {
       appRoutingForms: {

packages/features/Segment.tsx

@@ -14,7 +14,7 @@ import { getQueryBuilderConfigForAttributes } from "@calcom/app-store/routing-fo
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isEqual } from "@calcom/lib/isEqual";
 import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
-import { trpc, type RouterOutputs } from "@calcom/trpc";
+import { trpc, type RouterOutputs } from "@calcom/trpc/react";
 import cn from "@calcom/ui/classNames";
 
 export type Attributes = RouterOutputs["viewer"]["appRoutingForms"]["getAttributesForTeam"];

packages/features/apps/components/AppList.tsx

@@ -15,7 +15,7 @@ import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/compo
 import { isDelegationCredential } from "@calcom/lib/delegationCredential";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/enums";
-import { type RouterOutputs } from "@calcom/trpc";
+import { type RouterOutputs } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";

packages/features/bookings/Booker/components/hooks/useBookings.ts

@@ -23,7 +23,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
 import { BookingStatus } from "@calcom/prisma/enums";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { useBookingSuccessRedirect } from "../../../lib/bookingSuccessRedirect";

packages/features/bookings/Booker/components/hooks/useSlots.ts

@@ -11,7 +11,7 @@ import {
   PUBLIC_QUERY_RESERVATION_STALE_TIME_SECONDS,
 } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import type { TIsAvailableOutputSchema } from "@calcom/trpc/server/routers/viewer/slots/isAvailable.schema";
 
 import { useIsQuickAvailabilityCheckFeatureEnabled } from "./useIsQuickAvailabilityCheckFeatureEnabled";
@@ -51,7 +51,7 @@ const useQuickAvailabilityChecks = ({
     {
       slots: slotsToCheck,
       // enabled flag can't be true if eventTypeId is nullish
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+       
       eventTypeId: eventTypeId!,
     },
     {

packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { showToast } from "@calcom/ui/components/toast";
 
 export interface IUseVerifyEmailProps {

packages/features/bookings/types.server.ts

@@ -0,0 +1,14 @@
+import type { z } from "zod";
+
+import type { eventTypeMetaDataSchemaWithTypedApps } from "@calcom/app-store/zod-utils";
+
+/**
+ * Server-safe subset of BookerEvent type.
+ * This type is used by server code that needs to access event type metadata
+ * without pulling in React/TRPC client dependencies.
+ */
+export type BookerEventForAppData = {
+  price: number;
+  currency: string;
+  metadata: z.infer<typeof eventTypeMetaDataSchemaWithTypedApps> | null;
+};

packages/features/bookings/types.ts

@@ -1,11 +1,11 @@
 import type { ErrorOption, FieldPath } from "react-hook-form";
 
 import type { RegularBookingCreateResult } from "@calcom/features/bookings/lib/dto/types";
+import type { Slots } from "@calcom/features/calendars/lib/types";
 import type { SchedulingType } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { AppsStatus } from "@calcom/types/Calendar";
 
-import type { DatePickerProps } from "../calendars/DatePicker";
 import type { BookingCreateBody } from "./lib/bookingCreateBodySchema";
 
 export type PublicEvent = NonNullable<RouterOutputs["viewer"]["public"]["event"]>;
@@ -29,8 +29,8 @@ type BookerEventUser = Pick<
 
 type BookerEventProfile = Pick<PublicEvent["profile"], "name" | "image" | "bookerLayouts">;
 
-// marked as required to keep responsibility on consumers to handle the case where slots is undefined
-export type Slots = Required<NonNullable<DatePickerProps["slots"]>>;
+// Re-export Slots from the server-safe location
+export type { Slots };
 
 export type BookerEvent = Pick<
   PublicEvent,

packages/features/calendars/DatePicker.tsx

@@ -4,9 +4,9 @@ import { shallow } from "zustand/shallow";
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
-import type { IFromUser, IToUser } from "@calcom/features/availability/lib/getUserAvailability";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import { getAvailableDatesInMonth } from "@calcom/features/calendars/lib/getAvailableDatesInMonth";
+import type { Slots } from "@calcom/features/calendars/lib/types";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
@@ -44,19 +44,7 @@ export type DatePickerProps = {
   /** used to query the multiple selected dates */
   eventSlug?: string;
   /** To identify days that are not available and should display OOO and redirect if toUser exists */
-  slots?: Record<
-    string,
-    {
-      time: string;
-      userIds?: number[];
-      away?: boolean;
-      fromUser?: IFromUser;
-      toUser?: IToUser;
-      reason?: string;
-      emoji?: string;
-      showNotePublicly?: boolean;
-    }[]
-  >;
+  slots?: Slots;
   periodData?: PeriodData;
   // Whether this is a compact sidebar view or main monthly view
   isCompact?: boolean;

packages/features/calendars/lib/types.ts

@@ -0,0 +1,14 @@
+import type { IFromUser, IToUser } from "@calcom/features/availability/lib/getUserAvailability";
+
+export type SlotInfo = {
+  time: string;
+  userIds?: number[];
+  away?: boolean;
+  fromUser?: IFromUser;
+  toUser?: IToUser;
+  reason?: string;
+  emoji?: string;
+  showNotePublicly?: boolean;
+};
+
+export type Slots = Record<string, SlotInfo[]>;

packages/features/data-table/components/segment/DeleteSegmentDialog.tsx

@@ -1,5 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc/react";
 import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { showToast } from "@calcom/ui/components/toast";