feat: make calcom UI dumb again (#19658)

* remove create button for teams from calcom ui * migrate timezone select to features * remove trpc from phone and storybook provider * new-yarn.lock * fix imports + test file for select * fix platform timezone select to use Raw timezone select * fix timezone type import * use correct select in timezone-select.tsx - needs trpc version * fix lock and remove test-utils * fix log file * Updated yarn.lock * Fixed types * Fixed tests --------- Co-authored-by: Keith Williams <keithwillcode@gmail.com>
2025-03-05 11:58:52 -03:00
parent 1b111c8add
commit 4cdb8f3bae
30 changed files with 97 additions and 89 deletions
@@ -5,11 +5,12 @@ import { z } from "zod";

 import dayjs from "@calcom/dayjs";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, TimezoneSelect, Input } from "@calcom/ui";
+import { Button, Input } from "@calcom/ui";

 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";

@@ -3,6 +3,7 @@ import type { UseFormSetValue } from "react-hook-form";

 import dayjs from "@calcom/dayjs";
 import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences";
+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
  Dialog,
@@ -12,7 +13,6 @@ import {
  Button,
  Label,
  DateRangePicker,
-  TimezoneSelect,
  SettingsToggle,
  DatePicker,
 } from "@calcom/ui";
@@ -9,6 +9,7 @@ import { memo, useEffect, useState } from "react";
 import { z } from "zod";

 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { CreateButton } from "@calcom/features/ee/teams/components/createButton/CreateButton";
 import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed";
 import { EventTypeDescription } from "@calcom/features/eventtypes/components";
 import CreateEventTypeDialog from "@calcom/features/eventtypes/components/CreateEventTypeDialog";
@@ -35,7 +36,6 @@ import {
  Button,
  ButtonGroup,
  ConfirmationDialogContent,
-  CreateButton,
  Dialog,
  Dropdown,
  DropdownItem,
@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";

+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { formatLocalizedDateTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -20,7 +21,6 @@ import {
  SkeletonButton,
  SkeletonContainer,
  SkeletonText,
-  TimezoneSelect,
  SettingsToggle,
 } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
@@ -6,6 +6,7 @@ import { useFormContext } from "react-hook-form";

 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
+import { CreateButtonWithTeamsList } from "@calcom/features/ee/teams/components/createButton/CreateButtonWithTeamsList";
 import { FilterResults } from "@calcom/features/filters/components/FilterResults";
 import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
@@ -22,7 +23,6 @@ import {
  Badge,
  Button,
  ButtonGroup,
-  CreateButtonWithTeamsList,
  EmptyScreen,
  Icon,
  List,
@@ -23,7 +23,7 @@ import { FromToTime } from "../utils/dates";
 import { useBookerTime } from "./hooks/useBookerTime";

 const WebTimezoneSelect = dynamic(
-  () => import("@calcom/ui/components/form/timezone-select/TimezoneSelect").then((mod) => mod.TimezoneSelect),
+  () => import("@calcom/features/components/timezone-select").then((mod) => mod.TimezoneSelect),
  {
    ssr: false,
  }
@@ -8,11 +8,9 @@ import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { filterBySearchText, addTimezonesToDropdown, handleOptionLabel } from "@calcom/lib/timezone";
 import type { Timezones } from "@calcom/lib/timezone";
 import { trpc } from "@calcom/trpc/react";
+import { getReactSelectProps, inputStyles } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";

-import { inputStyles } from "../inputs/TextField";
-import { getReactSelectProps } from "../select";
-
 const SELECT_SEARCH_DATA: Timezones = [
  { label: "San Francisco", timezone: "America/Los_Angeles" },
  { label: "Sao Francisco do Sul", timezone: "America/Sao_Paulo" },
@@ -68,6 +66,7 @@ export type TimezoneSelectComponentProps = SelectProps & {
  grow?: boolean;
 };

+// TODO: I wonder if we move this to ui package, and keep the TRPC version in features
 export function TimezoneSelectComponent({
  className,
  classNames: timezoneClassNames,
@@ -81,7 +81,27 @@ describe("Test TimezoneSelect", () => {

  describe("Test TimezoneSelect with isPending = false", () => {
    beforeAll(async () => {
-      await runtimeMock(false);
+      // INFO: This needs to be here before the other calls to runtimeMock. For some reason,
+      // when we moved this file from @calcom/ui, the imports started breaking, resulting in
+      // errors of "Cannot set property 'trpc' of [object Module] which has only a getter"
+      // TODO: Update this pattern to be more consistent. Using this direct mocking in the
+      // functions below breaks some tests.
+      vi.mock("@calcom/trpc/react", () => ({
+        trpc: {
+          viewer: {
+            timezones: {
+              cityTimezones: {
+                useQuery() {
+                  return {
+                    data: cityTimezonesMock,
+                    isPending: false,
+                  };
+                },
+              },
+            },
+          },
+        },
+      }));
    });
    test("Should render with the correct CSS when provided with classNames prop", async () => {
      renderSelect({ value: timezoneMockValues[0], classNames });
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";

+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -21,7 +22,6 @@ import {
  SkeletonButton,
  SkeletonContainer,
  SkeletonText,
-  TimezoneSelect,
 } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";

@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react";

 import dayjs from "@calcom/dayjs";
+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
+import type { ITimezone } from "@calcom/features/components/timezone-select";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { WEBAPP_URL, CURRENT_TIMEZONE } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import type { ITimezone } from "@calcom/ui";
-import { Avatar, DatePicker, Label, Select, TimezoneSelect } from "@calcom/ui";
+import { Avatar, DatePicker, Label, Select } from "@calcom/ui";

 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";

@@ -29,14 +29,31 @@ const renderCreateButton = (
 describe("Create Button Tests", () => {
  describe("Create Button Tests With Valid Team", () => {
    beforeAll(async () => {
-      await runtimeMock([
-        {
-          teamId: 1,
-          name: "test",
-          slug: "create-button-test",
-          image: "image",
+      // INFO: This needs to be here before the other calls to runtimeMock. For some reason,
+      // when we moved this file from @calcom/ui, the imports started breaking, resulting in
+      // errors of "Cannot set property 'trpc' of [object Module] which has only a getter"
+      // TODO: Update this pattern to be more consistent. Using this direct mocking in the
+      // functions below breaks some tests.
+      vi.mock("@calcom/trpc/react", () => ({
+        trpc: {
+          viewer: {
+            teamsAndUserProfilesQuery: {
+              useQuery() {
+                return {
+                  data: [
+                    {
+                      teamId: 1,
+                      name: "test",
+                      slug: "create-button-test",
+                      image: "image",
+                    },
+                  ],
+                };
+              },
+            },
+          },
        },
-      ]);
+      }));
    });
    test("Should render the create-button-dropdown button", () => {
      const createFunction = vi.fn();
@@ -2,21 +2,12 @@
 import { noop } from "lodash";
 import { Controller, useForm } from "react-hook-form";

+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { defaultLocaleOption, localeOptions } from "@calcom/lib/i18n";
 import { nameOfDay } from "@calcom/lib/weekday";
-import {
-  Avatar,
-  Button,
-  EmailField,
-  Form,
-  ImageUploader,
-  Label,
-  Select,
-  TextField,
-  TimezoneSelect,
-} from "@calcom/ui";
+import { Avatar, Button, EmailField, Form, ImageUploader, Label, Select, TextField } from "@calcom/ui";

 import type { UserAdminRouterOutputs } from "../server/trpc-router";

@@ -1,10 +1,11 @@
 import { useRouter } from "next/navigation";

+import { CreateButtonWithTeamsList } from "@calcom/features/ee/teams/components/createButton/CreateButtonWithTeamsList";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import type { IconName } from "@calcom/ui";
-import { CreateButtonWithTeamsList, EmptyScreen as ClassicEmptyScreen, Icon, showToast } from "@calcom/ui";
+import { EmptyScreen as ClassicEmptyScreen, Icon, showToast } from "@calcom/ui";

 type WorkflowExampleType = {
  Icon: IconName;
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";

+import { CreateButtonWithTeamsList } from "@calcom/features/ee/teams/components/createButton/CreateButtonWithTeamsList";
 import Shell, { ShellMain } from "@calcom/features/shell/Shell";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -12,7 +13,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import type { WorkflowRepository } from "@calcom/lib/server/repository/workflow";
 import { trpc } from "@calcom/trpc/react";
-import { AnimatedPopover, Avatar, CreateButtonWithTeamsList, showToast } from "@calcom/ui";
+import { AnimatedPopover, Avatar, showToast } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";

 import { FilterResults } from "../../../filters/components/FilterResults";
@@ -14,6 +14,7 @@ import { AvailableTimes, AvailableTimesHeader } from "@calcom/features/bookings"
 import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
 import DatePicker from "@calcom/features/calendars/DatePicker";
+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import type { Slot } from "@calcom/features/schedules";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import { useSlotsForDate } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
@@ -38,7 +39,6 @@ import {
  showToast,
  Switch,
  TextField,
-  TimezoneSelect,
 } from "@calcom/ui";

 import { useBookerTime } from "../bookings/Booker/components/hooks/useBookerTime";
@@ -1,6 +1,7 @@
 import { useFieldArray, useForm, useFormContext } from "react-hook-form";

 import dayjs from "@calcom/dayjs";
+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
 import Schedule from "@calcom/features/schedules/components/Schedule";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -22,7 +23,6 @@ import {
  SheetHeader,
  SheetTitle,
  showToast,
-  TimezoneSelect,
 } from "@calcom/ui";

 import type { SliderUser } from "./AvailabilitySliderTable";
@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import { z } from "zod";

+import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { emailSchema } from "@calcom/lib/emailSchema";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
@@ -15,7 +16,6 @@ import {
  ToggleGroup,
  InputField,
  TextAreaField,
-  TimezoneSelect,
  Label,
  showToast,
  Avatar,
@@ -2,8 +2,8 @@

 import { useRouter } from "next/navigation";

+import { CreateButtonWithTeamsList } from "@calcom/features/ee/teams/components/createButton/CreateButtonWithTeamsList";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { CreateButtonWithTeamsList } from "@calcom/ui";

 export const CreateNewWebhookButton = ({ isAdmin }: { isAdmin: boolean }) => {
  const router = useRouter();
@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { Controller, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form";

 import dayjs from "@calcom/dayjs";
+import { TimezoneSelect as WebTimezoneSelect } from "@calcom/features/components/timezone-select";
 import type {
  BulkUpdatParams,
  EventTypes,
@@ -32,7 +33,6 @@ import {
  SelectSkeletonLoader,
  Skeleton,
  Switch,
-  TimezoneSelect as WebTimezoneSelect,
  Tooltip,
  VerticalDivider,
 } from "@calcom/ui";
@@ -1,5 +1,5 @@
-import type { TimezoneSelectProps } from "@calcom/ui";
-import { TimezoneSelectComponent } from "@calcom/ui";
+import { TimezoneSelectComponent as TimezoneSelect } from "@calcom/features/components/timezone-select";
+import type { TimezoneSelectProps } from "@calcom/features/components/timezone-select";

 import useGetCityTimezones from "../hooks/useGetCityTimezones";

@@ -7,7 +7,7 @@ export function Timezone(props: TimezoneSelectProps) {
  const { isLoading, data } = useGetCityTimezones();

  return (
-    <TimezoneSelectComponent
+    <TimezoneSelect
      {...props}
      data={
        Array.isArray(data)
@@ -16,18 +16,12 @@ export {

 export { InputFieldWithSelect } from "./inputs/InputFieldWithSelect";

-export { InputField, Input, TextField } from "./inputs/TextField";
+export { InputField, Input, TextField, inputStyles } from "./inputs/TextField";
 export { InputError } from "./inputs/InputError";
 export { Form } from "./inputs/Form";
 export { Label } from "./inputs/Label";
 export { Select, SelectField, SelectWithValidation, getReactSelectProps } from "./select";
-export { TimezoneSelect, TimezoneSelectComponent } from "./timezone-select";
-export type {
-  ITimezone,
-  ITimezoneOption,
-  TimezoneSelectComponentProps,
-  TimezoneSelectProps,
-} from "./timezone-select";
+
 export { DateRangePickerLazy as DateRangePicker } from "./date-range-picker";
 export { BooleanToggleGroup, BooleanToggleGroupField, ToggleGroup } from "./toggleGroup";
 export { DatePicker } from "./datepicker";
@@ -18,10 +18,6 @@ vi.mock("@calcom/features/ee/organizations/context/provider", () => ({
  },
 }));

-vi.mock("@calcom/trpc/react", () => ({
-  trpc: {},
-}));
-
 vi.mock("next/navigation", async () => ({
  ...((await vi.importActual("next/navigation")) as object),
  useRouter() {
@@ -1,12 +1,9 @@
 "use client";

-import { isSupportedCountry } from "libphonenumber-js";
-import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";

 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
-import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";

 export type PhoneInputProps = {
@@ -121,29 +118,30 @@ function BasePhoneInputWeb({
  );
 }

-const useDefaultCountry = () => {
-  const [defaultCountry, setDefaultCountry] = useState("us");
-  const query = trpc.viewer.public.countryCode.useQuery(undefined, {
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    retry: false,
-  });
+// Function not in use anywhere.
+// const useDefaultCountry = () => {
+//   const [defaultCountry, setDefaultCountry] = useState("us");
+//   const query = trpc.viewer.public.countryCode.useQuery(undefined, {
+//     refetchOnWindowFocus: false,
+//     refetchOnReconnect: false,
+//     retry: false,
+//   });

-  useEffect(
-    function refactorMeWithoutEffect() {
-      const data = query.data;
-      if (!data?.countryCode) {
-        return;
-      }
+//   useEffect(
+//     function refactorMeWithoutEffect() {
+//       const data = query.data;
+//       if (!data?.countryCode) {
+//         return;
+//       }

-      isSupportedCountry(data?.countryCode)
-        ? setDefaultCountry(data.countryCode.toLowerCase())
-        : setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
-    },
-    [query.data]
-  );
+//       isSupportedCountry(data?.countryCode)
+//         ? setDefaultCountry(data.countryCode.toLowerCase())
+//         : setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
+//     },
+//     [query.data]
+//   );

-  return defaultCountry;
-};
+//   return defaultCountry;
+// };

 export default BasePhoneInput;
@@ -37,8 +37,6 @@ export {
  Select,
  SelectField,
  SelectWithValidation,
-  TimezoneSelect,
-  TimezoneSelectComponent,
  BooleanToggleGroup,
  BooleanToggleGroupField,
  DatePicker,
@@ -56,14 +54,9 @@ export {
  Switch,
  NumberInput,
  InputError,
+  inputStyles,
 } from "./components/form";

-export type {
-  ITimezone,
-  ITimezoneOption,
-  TimezoneSelectProps,
-  TimezoneSelectComponentProps,
-} from "./components/form";
 export { Slider as RangeSlider } from "./components/form/slider";
 export { RangeSliderPopover } from "./components/form/slider/RangeSliderPopover";

@@ -149,7 +142,6 @@ export { default as ImageUploader } from "./components/image-uploader/ImageUploa
 export { default as BannerUploader } from "./components/image-uploader/BannerUploader";

 export type { ButtonColor } from "./components/button/Button";
-export { CreateButton, CreateButtonWithTeamsList } from "./components/createButton";

 export { useCalcomTheme } from "./styles/useCalcomTheme";
 export { ScrollableArea } from "./components/scrollable";
@@ -54,7 +54,6 @@
    "./components/icon/SatSymbol": "./components/icon/SatSymbol.tsx",
    "./components/icon/Spinner": "./components/icon/Spinner.tsx",
    "./components/unpublished-entity/UnpublishedEntity": "./components/unpublished-entity/index.ts",
-    "./components/form/timezone-select/TimezoneSelect": "./components/form/timezone-select/index.ts",
    "./components/table/TableNew": "./components/table/TableNew.tsx",
    "./__mocks__/ui": "./__mocks__/ui.tsx"
  },
@@ -69,7 +68,6 @@
  },
  "dependencies": {
    "@calcom/lib": "*",
-    "@calcom/trpc": "*",
    "@formkit/auto-animate": "1.0.0-beta.5",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
@@ -3712,7 +3712,6 @@ __metadata:
  dependencies:
    "@calcom/config": "*"
    "@calcom/lib": "*"
-    "@calcom/trpc": "*"
    "@calcom/tsconfig": "*"
    "@formkit/auto-animate": 1.0.0-beta.5
    "@radix-ui/react-checkbox": ^1.0.4