perf: Remove packages/ui/index.ts barrel file (#20243)

* remove packages/ui/index.ts

* Update tests

apps/web/components/dialog/__tests__/RerouteDialog.test.tsx

@@ -82,15 +82,9 @@ vi.mock("@calcom/web/lib/hooks/useRouterQuery", () => ({
   }),
 }));
 
-vi.mock("@calcom/ui", async (importOriginal) => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const actual = await importOriginal<any>("@calcom/ui");
-  return {
-    ...actual,
-    Tooltip: vi.fn(({ children }) => <div data-testid="mock-tooltip">{children}</div>),
-  };
-});
+vi.mock("@calcom/ui/components/tooltip", () => ({
+  Tooltip: vi.fn(({ children }) => <div data-testid="mock-tooltip">{children}</div>),
+}));
 
 vi.mock("@calcom/trpc/react", () => ({
   trpc: {

apps/web/modules/test-setup.ts

@@ -151,11 +151,23 @@ vi.mock("@calcom/trpc/react", () => ({
   },
 }));
 
-vi.mock("@calcom/ui", () => ({
+vi.mock("@calcom/ui/components/head-seo", () => ({
   HeadSeo: vi.fn(),
+}));
+
+vi.mock("@calcom/ui/styles", () => ({
   useCalcomTheme: vi.fn(),
+}));
+
+vi.mock("@calcom/ui/components/icon", () => ({
   Icon: vi.fn(),
+}));
+
+vi.mock("@calcom/ui/components/unpublished-entity", () => ({
   UnpublishedEntity: vi.fn(),
+}));
+
+vi.mock("@calcom/ui/components/avatar", () => ({
   UserAvatar: vi.fn(),
 }));
 

apps/web/modules/users/views/users-public-view.test.tsx

@@ -3,7 +3,7 @@ import { describe, it, vi } from "vitest";
 
 import { getOrgFullOrigin } from "@calcom/ee/organizations/lib/orgDomains";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
-import { HeadSeo } from "@calcom/ui";
+import { HeadSeo } from "@calcom/ui/components/head-seo";
 
 import UserPage from "./users-public-view";
 

packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx

@@ -37,10 +37,6 @@ function mockEventTypeRedirectUrlMatchingRoute() {
 /**
  * fixes the error due to Formbricks
  */
-vi.mock("@calcom/ui", async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-}));
-
 vi.mock("@calcom/features/shell/Shell", () => ({
   ShellMain: vi.fn(),
 }));

packages/app-store/routing-forms/__tests__/config.test.ts

@@ -8,7 +8,6 @@ import {
 vi.mock("../components/react-awesome-query-builder/widgets", () => ({
   default: {},
 }));
-vi.mock("@calcom/ui", () => ({}));
 
 const assertCommonStructure = (config: any) => {
   expect(config).toHaveProperty("conjunctions");

packages/app-store/routing-forms/__tests__/uiConfig.test.ts

@@ -22,10 +22,6 @@ vi.mock("../components/react-awesome-query-builder/widgets", () => ({
   },
 }));
 
-vi.mock("@calcom/ui", () => ({
-  EmailField: vi.fn(),
-}));
-
 describe("uiConfig", () => {
   const mockConfig = {
     widgets: {

packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx

@@ -1,5 +1,3 @@
-import "@calcom/ui/__mocks__/ui";
-
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { render, fireEvent, screen } from "@testing-library/react";
 import * as React from "react";
@@ -20,6 +18,14 @@ vi.mock("@calcom/features/components/phone-input", () => {
   };
 });
 
+vi.mock("@calcom/ui/components/address", async (originalImport) => {
+  const { AddressInputNonLazy } = (await originalImport()) as Record<string, unknown>;
+  // Dynamic imports of Components are not supported in Vitest. So, we use the non-lazy version of the components
+  return {
+    AddressInput: AddressInputNonLazy,
+  };
+});
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FormMethods = UseFormReturn<any>;
 

packages/lib/raqb/evaluateRaqbLogic.test.ts

@@ -7,7 +7,6 @@ import { evaluateRaqbLogic, RaqbLogicResult } from "./evaluateRaqbLogic";
 vi.mock("../components/react-awesome-query-builder/widgets", () => ({
   default: {},
 }));
-vi.mock("@calcom/ui", () => ({}));
 
 describe("evaluateRaqbLogic", () => {
   it("should return a match for multiselect_equals", () => {

packages/lib/raqb/findTeamMembersMatchingAttributeLogic.test.ts

@@ -16,7 +16,7 @@ vi.mock("@calcom/lib/service/attribute/server/getAttributes");
 vi.mock("../../components/react-awesome-query-builder/widgets", () => ({
   default: {},
 }));
-vi.mock("@calcom/ui", () => ({}));
+
 const orgId = 1001;
 function mockAttributesScenario({
   attributes,

packages/lib/server/getLuckyUser.test.ts

@@ -16,7 +16,6 @@ type GetLuckyUserAvailableUsersType = NonEmptyArray<ReturnType<typeof buildUser>
 vi.mock("@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets", () => ({
   default: {},
 }));
-vi.mock("@calcom/ui", () => ({}));
 
 beforeAll(() => {
   vi.setSystemTime(new Date("2021-06-20T11:59:59Z"));

packages/ui/__mocks__/ui.tsx

@@ -1,12 +0,0 @@
-import { vi } from "vitest";
-
-vi.mock("@calcom/ui", async (originalImport) => {
-  const original = (await originalImport()) as Record<string, unknown>;
-  // Dynamic imports of Components are not supported in Vitest. So, we use the non-lazy version of the components
-  return {
-    ...original,
-    AddressInput: original.AddressInputNonLazy,
-  };
-});
-
-export {};

packages/ui/components/address/index.ts

@@ -1,2 +1,3 @@
 export { default as AddressInput } from "./AddressInputLazy";
 export { default as MultiEmail } from "./MultiEmailLazy";
+export { default as AddressInputNonLazy } from "./AddressInput";

packages/ui/index.ts

@@ -1,160 +0,0 @@
-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, InfoBadge } from "./components/badge";
-export type { BadgeProps } from "./components/badge";
-export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./components/breadcrumb";
-export { Button, LinkIconButton, buttonClasses, SplitButton } from "./components/button";
-export type { ButtonBaseProps, ButtonProps } from "./components/button";
-export { ButtonGroup } from "./components/buttonGroup";
-export { EditableHeading } from "./components/editable-heading";
-export { FilterSelect } from "./components/filter-select";
-export {
-  Checkbox,
-  CheckboxField,
-  EmailField,
-  EmailInput,
-  FieldsetLegend,
-  Form,
-  HintsOrErrors,
-  Input,
-  InputField,
-  InputGroupBox,
-  InputLeading,
-  Label,
-  PasswordField,
-  TextArea,
-  TextAreaField,
-  TextField,
-  InputFieldWithSelect,
-  Select,
-  SelectField,
-  SelectWithValidation,
-  BooleanToggleGroup,
-  BooleanToggleGroupField,
-  DatePicker,
-  DateRangePicker,
-  MultiSelectCheckbox,
-  ToggleGroup,
-  getReactSelectProps,
-  ColorPicker,
-  FormStep,
-  FilterSearchField,
-  Steps,
-  WizardForm,
-  SettingsToggle,
-  Stepper,
-  Switch,
-  NumberInput,
-  InputError,
-  inputStyles,
-} from "./components/form";
-
-export { RangeSlider } from "./components/form/slider/RangeSlider";
-export { RangeSliderPopover } from "./components/form/slider/RangeSliderPopover";
-
-export { TopBanner } from "./components/top-banner";
-export type { TopBannerProps } from "./components/top-banner";
-export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";
-export { TableActions, DropdownActions } from "./components/table/TableActions";
-export type { ActionType } from "./components/table/TableActions";
-export { ErrorBoundary } from "./components/errorBoundary";
-export { Logo } from "./components/logo";
-export { Alert } from "./components/alert";
-export type { AlertProps } from "./components/alert";
-export { Credits } from "./components/credits";
-export { Divider, VerticalDivider } from "./components/divider";
-export { EmptyScreen } from "./components/empty-screen";
-export { UnpublishedEntity } from "./components/unpublished-entity";
-export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./components/list";
-export type { ListItemProps, ListProps } from "./components/list";
-export { HeadSeo } from "./components/head-seo";
-export {
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonButton,
-  SkeletonContainer,
-  SkeletonText,
-  SelectSkeletonLoader,
-  Loader,
-} from "./components/skeleton";
-export { HorizontalTabs, HorizontalTabItem, VerticalTabs, VerticalTabItem } from "./components/navigation";
-export type { HorizontalTabItemProps, NavTabProps, VerticalTabItemProps } from "./components/navigation";
-export { Card, StepCard, FormCard } from "./components/card";
-export type { BaseCardProps } from "./components/card";
-export { Tooltip } from "./components/tooltip";
-export { Editor, AddVariablesDropdown } from "./components/editor";
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTrigger,
-  ConfirmationDialogContent,
-  ConfirmationContent,
-} from "./components/dialog";
-export type { DialogProps, ConfirmationDialogContentProps } from "./components/dialog";
-export { AppListCard } from "./components/app-list-card/AppListCard";
-export { DisconnectIntegrationComponent } from "./components/disconnect-calendar-integration";
-export { CalendarSwitchComponent } from "./components/calendar-switch";
-export { showToast, ErrorToast, SuccessToast, WarningToast } from "./components/toast"; // We don't export the toast components as they are only used in local storybook file
-export { ShellSubHeading, WizardLayout } from "./components/layout";
-
-/** ⬇️ TODO - Move these to components */
-export { default as AddressInput } from "./components/address/AddressInputLazy";
-export { default as MultiEmail } from "./components/address/MultiEmailLazy";
-export { default as AddressInputNonLazy } from "./components/address/AddressInput";
-
-export { UnstyledSelect } from "./components/address/Select";
-
-export {
-  RadioGroup,
-  RadioIndicator,
-  RadioLabel,
-  Radio,
-  RadioField,
-  RadioAreaGroup,
-} from "./components/radio";
-
-export type { Option as MultiSelectCheckboxesOptionType } from "./components/form/checkbox/MultiSelectCheckboxes";
-export { default as ImageUploader } from "./components/image-uploader/ImageUploader";
-export { default as BannerUploader } from "./components/image-uploader/BannerUploader";
-
-export type { ButtonColor } from "./components/button/Button";
-
-export { useCalcomTheme } from "./styles/useCalcomTheme";
-export { ScrollableArea } from "./components/scrollable";
-export * from "./components/sheet";
-export * from "./components/table";
-export * from "./components/popover";
-export * from "./components/dropdown";
-export * from "./components/icon";
-export {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-  CommandInput,
-  CommandSeparator,
-  CommandShortcut,
-} from "./components/command/Command";
-
-export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardPortal } from "./components/hover-card";
-
-export { OrgBanner } from "./components/organization-banner";
-export type { OrgBannerProps } from "./components/organization-banner";
-
-export { NavigationItem } from "./components/navigation/NavigationItem";
-
-export { Pagination } from "./components/pagination";
-export type { PaginationProps } from "./components/pagination";

packages/ui/package.json

@@ -5,7 +5,6 @@
   "version": "0.0.0",
   "main": "./index.ts",
   "exports": {
-    ".": "./index.ts",
     "./classNames": "./classNames.ts",
     "./styles": "./styles/index.ts",
     "./components/address": "./components/address/index.ts",