From b0bf2748963c3c2acf027be34bb02723e36c9961 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 20 Mar 2025 06:26:12 -0400 Subject: [PATCH] perf: Remove `packages/ui/index.ts` barrel file (#20243) * remove packages/ui/index.ts * Update tests --- .../dialog/__tests__/RerouteDialog.test.tsx | 12 +- apps/web/modules/test-setup.ts | 14 +- .../users/views/users-public-view.test.tsx | 2 +- .../__tests__/TestFormDialog.test.tsx | 4 - .../routing-forms/__tests__/config.test.ts | 1 - .../routing-forms/__tests__/uiConfig.test.ts | 4 - .../BookEventForm/BookingFields.test.tsx | 10 +- packages/lib/raqb/evaluateRaqbLogic.test.ts | 1 - ...dTeamMembersMatchingAttributeLogic.test.ts | 2 +- packages/lib/server/getLuckyUser.test.ts | 1 - packages/ui/__mocks__/ui.tsx | 12 -- packages/ui/components/address/index.ts | 1 + packages/ui/index.ts | 160 ------------------ packages/ui/package.json | 1 - 14 files changed, 27 insertions(+), 198 deletions(-) delete mode 100644 packages/ui/__mocks__/ui.tsx delete mode 100644 packages/ui/index.ts diff --git a/apps/web/components/dialog/__tests__/RerouteDialog.test.tsx b/apps/web/components/dialog/__tests__/RerouteDialog.test.tsx index 38e5bf0fa0..b3c59d7595 100644 --- a/apps/web/components/dialog/__tests__/RerouteDialog.test.tsx +++ b/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("@calcom/ui"); - return { - ...actual, - Tooltip: vi.fn(({ children }) =>
{children}
), - }; -}); +vi.mock("@calcom/ui/components/tooltip", () => ({ + Tooltip: vi.fn(({ children }) =>
{children}
), +})); vi.mock("@calcom/trpc/react", () => ({ trpc: { diff --git a/apps/web/modules/test-setup.ts b/apps/web/modules/test-setup.ts index 3027d7e0b8..600f495cd8 100644 --- a/apps/web/modules/test-setup.ts +++ b/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(), })); diff --git a/apps/web/modules/users/views/users-public-view.test.tsx b/apps/web/modules/users/views/users-public-view.test.tsx index 338d2fe200..b815921128 100644 --- a/apps/web/modules/users/views/users-public-view.test.tsx +++ b/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"; diff --git a/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx b/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx index 3ef1e1975e..0ecab21e9d 100644 --- a/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx +++ b/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>()), -})); - vi.mock("@calcom/features/shell/Shell", () => ({ ShellMain: vi.fn(), })); diff --git a/packages/app-store/routing-forms/__tests__/config.test.ts b/packages/app-store/routing-forms/__tests__/config.test.ts index 8958ffe891..13b814e434 100644 --- a/packages/app-store/routing-forms/__tests__/config.test.ts +++ b/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"); diff --git a/packages/app-store/routing-forms/__tests__/uiConfig.test.ts b/packages/app-store/routing-forms/__tests__/uiConfig.test.ts index 1589307bba..2eac86afc6 100644 --- a/packages/app-store/routing-forms/__tests__/uiConfig.test.ts +++ b/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: { diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx index ca05ea12e8..5757304ad3 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx +++ b/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; + // 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; diff --git a/packages/lib/raqb/evaluateRaqbLogic.test.ts b/packages/lib/raqb/evaluateRaqbLogic.test.ts index cc5401f7ff..55202ad9b6 100644 --- a/packages/lib/raqb/evaluateRaqbLogic.test.ts +++ b/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", () => { diff --git a/packages/lib/raqb/findTeamMembersMatchingAttributeLogic.test.ts b/packages/lib/raqb/findTeamMembersMatchingAttributeLogic.test.ts index bdfcf8c865..667a638945 100644 --- a/packages/lib/raqb/findTeamMembersMatchingAttributeLogic.test.ts +++ b/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, diff --git a/packages/lib/server/getLuckyUser.test.ts b/packages/lib/server/getLuckyUser.test.ts index dc703bf7c3..e28351fed7 100644 --- a/packages/lib/server/getLuckyUser.test.ts +++ b/packages/lib/server/getLuckyUser.test.ts @@ -16,7 +16,6 @@ type GetLuckyUserAvailableUsersType = NonEmptyArray 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")); diff --git a/packages/ui/__mocks__/ui.tsx b/packages/ui/__mocks__/ui.tsx deleted file mode 100644 index 6834bf2a05..0000000000 --- a/packages/ui/__mocks__/ui.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { vi } from "vitest"; - -vi.mock("@calcom/ui", async (originalImport) => { - const original = (await originalImport()) as Record; - // 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 {}; diff --git a/packages/ui/components/address/index.ts b/packages/ui/components/address/index.ts index 03d621d09f..09ecbf71f8 100644 --- a/packages/ui/components/address/index.ts +++ b/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"; diff --git a/packages/ui/index.ts b/packages/ui/index.ts deleted file mode 100644 index 18883069ce..0000000000 --- a/packages/ui/index.ts +++ /dev/null @@ -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"; diff --git a/packages/ui/package.json b/packages/ui/package.json index 71c21d44a6..6e75fb71f8 100644 --- a/packages/ui/package.json +++ b/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",