perf: Remove app-store reference from @calcom/ui (#20188)

* perf: Remove app-store reference from @calcom/ui

* Fixing types

* Fixed casing

* fix type check

* refactor

* fix

* fix

* fix

* fix

* fix

* fix

---------

Co-authored-by: hbjORbj <sldisek783@gmail.com>

apps/web/components/apps/CalendarListContainer.tsx

@@ -6,16 +6,14 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import { DestinationCalendarSettingsWebWrapper } from "@calcom/atoms/destination-calendar/wrappers/DestinationCalendarSettingsWebWrapper";
 import { SelectedCalendarsSettingsWebWrapper } from "@calcom/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper";
 import AppListCard from "@calcom/features/apps/components/AppListCard";
+import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  EmptyScreen,
-  List,
-  ShellSubHeading,
-  AppSkeletonLoader as SkeletonLoader,
-  showToast,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { ShellSubHeading } from "@calcom/ui/components/layout";
+import { List } from "@calcom/ui/components/list";
+import { showToast } from "@calcom/ui/components/toast";
 
 import { QueryCell } from "@lib/QueryCell";
 import useRouterQuery from "@lib/hooks/useRouterQuery";

apps/web/modules/apps/apps-view.tsx

@@ -3,17 +3,14 @@
 import type { ChangeEventHandler } from "react";
 import { useState } from "react";
 
+import { AllApps } from "@calcom/features/apps/components/AllApps";
+import { AppStoreCategories } from "@calcom/features/apps/components/Categories";
+import { PopularAppsSlider } from "@calcom/features/apps/components/PopularAppsSlider";
+import { RecentAppsSlider } from "@calcom/features/apps/components/RecentAppsSlider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import type { HorizontalTabItemProps } from "@calcom/ui";
-import {
-  AllApps,
-  AppStoreCategories,
-  HorizontalTabs,
-  TextField,
-  PopularAppsSlider,
-  RecentAppsSlider,
-} from "@calcom/ui";
+import { HorizontalTabs, TextField } from "@calcom/ui";
 import { Icon } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
 

apps/web/modules/apps/categories/[category]/category-view.tsx

@@ -2,9 +2,10 @@
 
 import Link from "next/link";
 
+import { AppCard } from "@calcom/features/apps/components/AppCard";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { AppCard, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
 
 import type { CategoryDataProps } from "@lib/apps/categories/[category]/getStaticProps";
 

apps/web/modules/apps/installed/[category]/installed-category-view.tsx

@@ -7,18 +7,13 @@ import { AppList, type HandleDisconnect } from "@calcom/features/apps/components
 import type { UpdateUsersDefaultConferencingAppParams } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
 import type { RemoveAppParams } from "@calcom/features/apps/components/DisconnectIntegrationModal";
+import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader";
 import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppCategories } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { Icon } from "@calcom/ui";
-import {
-  AppSkeletonLoader as SkeletonLoader,
-  Button,
-  EmptyScreen,
-  ShellSubHeading,
-  showToast,
-} from "@calcom/ui";
+import { Button, EmptyScreen, ShellSubHeading, showToast } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 

packages/features/apps/components/AllApps.tsx

@@ -10,9 +10,9 @@ import type { UserAdminTeams } from "@calcom/lib/server/repository/user";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 import classNames from "@calcom/ui/classNames";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { Icon } from "@calcom/ui/components/icon";
 
-import { EmptyScreen } from "../empty-screen";
-import { Icon } from "../icon";
 import { AppCard } from "./AppCard";
 
 export function useShouldShowArrows() {

packages/features/apps/components/AppCard.tsx

@@ -14,11 +14,10 @@ import type { UserAdminTeams } from "@calcom/lib/server/repository/user";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 import classNames from "@calcom/ui/classNames";
-
-import { Badge } from "../badge/Badge";
-import type { ButtonProps } from "../button";
-import { Button } from "../button";
-import { showToast } from "../toast/showToast";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import type { ButtonProps } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
 
 interface AppCardProps {
   app: App;

packages/features/apps/components/Categories.tsx

@@ -2,9 +2,9 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/components/icon";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
-import { Icon } from "../icon";
-import { SkeletonText } from "../skeleton";
 import { Slider } from "./Slider";
 
 export function AppStoreCategories({

packages/features/apps/components/SkeletonLoader.tsx

@@ -1,5 +1,5 @@
-import { ShellSubHeading } from "../layout";
-import { SkeletonText } from "../skeleton";
+import { ShellSubHeading } from "@calcom/ui/components/layout";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
 export function SkeletonLoader({ className }: { className?: string }) {
   return (

packages/features/apps/components/Slider.tsx

@@ -8,9 +8,8 @@ import type { ComponentProps, FC } from "react";
 import { useEffect, useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { Icon } from "../icon";
-import { SkeletonText } from "../skeleton";
+import { Icon } from "@calcom/ui/components/icon";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
 const SliderButton: FC<ComponentProps<"button">> = (props) => {
   const { children, ...rest } = props;

packages/features/apps/components/index.ts

@@ -1,7 +1,6 @@
 export { useShouldShowArrows, AllApps } from "./AllApps";
 export { AppCard } from "./AppCard";
 export { Slider } from "./Slider";
-export { SkeletonLoader as AppSkeletonLoader } from "./SkeletonLoader";
 export { SkeletonLoader } from "./SkeletonLoader";
 export { PopularAppsSlider } from "./PopularAppsSlider";
 export { RecentAppsSlider } from "./RecentAppsSlider";

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

@@ -3,11 +3,12 @@ import { useEffect, useRef } from "react";
 
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { useShouldShowArrows } from "@calcom/features/apps/components/AllApps";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useShouldShowArrows, Icon } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
+import { Icon } from "@calcom/ui/components/icon";
 
 /** Render X mins as X hours or X hours Y mins instead of in minutes once >= 60 minutes */
 export const getDurationFormatted = (mins: number | undefined, t: TFunction) => {

packages/features/ee/dsync/components/ConfigureDirectorySync.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 
+import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
-  AppSkeletonLoader as SkeletonLoader,
   Button,
   Dialog,
   DialogClose,

packages/features/ee/dsync/page/team-dsync-view.tsx

@@ -3,10 +3,11 @@
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
+import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader";
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonLoader, showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
 
 import ConfigureDirectorySync from "../components/ConfigureDirectorySync";
 

packages/features/ee/sso/page/orgs-sso-view.tsx

@@ -2,9 +2,9 @@
 
 import { useSession } from "next-auth/react";
 
+import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
-import { AppSkeletonLoader as SkeletonLoader } from "@calcom/ui";
 
 import SSOConfiguration from "../components/SSOConfiguration";
 

packages/ui/index.ts

@@ -60,17 +60,6 @@ export {
 export { RangeSlider } from "./components/form/slider/RangeSlider";
 export { RangeSliderPopover } from "./components/form/slider/RangeSliderPopover";
 
-export {
-  AllApps,
-  AppCard,
-  AppSkeletonLoader,
-  SkeletonLoader,
-  Slider,
-  PopularAppsSlider,
-  RecentAppsSlider,
-  useShouldShowArrows,
-  AppStoreCategories,
-} from "./components/apps";
 export { TopBanner } from "./components/top-banner";
 export type { TopBannerProps } from "./components/top-banner";
 export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";

packages/ui/package.json

@@ -7,49 +7,47 @@
   "exports": {
     ".": "./index.ts",
     "./classNames": "./classNames.ts",
-    "./alert": "./components/alert/index.ts",
-    "./app-list-card": "./components/app-list-card/index.ts",
-    "./apps": "./components/apps/index.ts",
-    "./arrow-button": "./components/arrow-button/index.ts",
-    "./avatar": "./components/avatar/index.ts",
-    "./badge": "./components/badge/index.ts",
-    "./breadcrumb": "./components/breadcrumb/index.ts",
-    "./button": "./components/button/index.ts",
-    "./buttonGroup": "./components/buttonGroup/index.ts",
-    "./calendar-switch": "./components/calendar-switch/index.ts",
-    "./card": "./components/card/index.ts",
-    "./command": "./components/command/index.ts",
-    "./createButton": "./components/createButton/index.ts",
-    "./credits": "./components/credits/index.ts",
-    "./dialog": "./components/dialog/index.ts",
-    "./disconnect-calendar-integration": "./components/disconnect-calendar-integration/index.ts",
-    "./divider": "./components/divider/index.ts",
-    "./dropdown": "./components/dropdown/index.ts",
-    "./editable-heading": "./components/editable-heading/index.ts",
-    "./editor": "./components/editor/index.ts",
-    "./empty-screen": "./components/empty-screen/index.ts",
-    "./errorBoundary": "./components/errorBoundary/index.ts",
-    "./form": "./components/form/index.ts",
-    "./form/timezone-select": "./components/form/timezone-select/index.ts",
-    "./head-seo": "./components/head-seo/index.ts",
-    "./icon": "./components/icon/index.ts",
-    "./image-uploader": "./components/image-uploader/index.ts",
-    "./layout": "./components/layout/index.ts",
-    "./list": "./components/list/index.ts",
-    "./logo": "./components/logo/index.ts",
-    "./meta": "./components/meta/index.ts",
-    "./navigation": "./components/navigation/index.ts",
-    "./organization-banner": "./components/organization-banner/index.ts",
-    "./popover": "./components/popover/index.ts",
-    "./scrollable": "./components/scrollable/index.ts",
-    "./sheet": "./components/sheet/index.ts",
-    "./skeleton": "./components/skeleton/index.ts",
-    "./table": "./components/table/index.ts",
-    "./toast": "./components/toast/index.ts",
-    "./tooltip": "./components/tooltip/index.ts",
-    "./top-banner": "./components/top-banner/index.ts",
-    "./filter-select": "./components/filter-select/index.ts",
-    "./unpublished-entity/UnpublishedEntity": "./components/unpublished-entity/index.ts",
+    "./components/alert": "./components/alert/index.ts",
+    "./components/app-list-card": "./components/app-list-card/index.ts",
+    "./components/apps": "./components/apps/index.ts",
+    "./components/arrow-button": "./components/arrow-button/index.ts",
+    "./components/avatar": "./components/avatar/index.ts",
+    "./components/badge": "./components/badge/index.ts",
+    "./components/breadcrumb": "./components/breadcrumb/index.ts",
+    "./components/button": "./components/button/index.ts",
+    "./components/buttonGroup": "./components/buttonGroup/index.ts",
+    "./components/calendar-switch": "./components/calendar-switch/index.ts",
+    "./components/card": "./components/card/index.ts",
+    "./components/command": "./components/command/index.ts",
+    "./components/createButton": "./components/createButton/index.ts",
+    "./components/credits": "./components/credits/index.ts",
+    "./components/dialog": "./components/dialog/index.ts",
+    "./components/disconnect-calendar-integration": "./components/disconnect-calendar-integration/index.ts",
+    "./components/divider": "./components/divider/index.ts",
+    "./components/dropdown": "./components/dropdown/index.ts",
+    "./components/editable-heading": "./components/editable-heading/index.ts",
+    "./components/editor": "./components/editor/index.ts",
+    "./components/empty-screen": "./components/empty-screen/index.ts",
+    "./components/errorBoundary": "./components/errorBoundary/index.ts",
+    "./components/form": "./components/form/index.ts",
+    "./components/form/timezone-select": "./components/form/timezone-select/index.ts",
+    "./components/head-seo": "./components/head-seo/index.ts",
+    "./components/image-uploader": "./components/image-uploader/index.ts",
+    "./components/layout": "./components/layout/index.ts",
+    "./components/list": "./components/list/index.ts",
+    "./components/logo": "./components/logo/index.ts",
+    "./components/meta": "./components/meta/index.ts",
+    "./components/navigation": "./components/navigation/index.ts",
+    "./components/organization-banner": "./components/organization-banner/index.ts",
+    "./components/popover": "./components/popover/index.ts",
+    "./components/scrollable": "./components/scrollable/index.ts",
+    "./components/sheet": "./components/sheet/index.ts",
+    "./components/skeleton": "./components/skeleton/index.ts",
+    "./components/table": "./components/table/index.ts",
+    "./components/toast": "./components/toast/index.ts",
+    "./components/tooltip": "./components/tooltip/index.ts",
+    "./components/top-banner": "./components/top-banner/index.ts",
+    "./components/filter-select": "./components/filter-select/index.ts",
     "./components/icon": "./components/icon/index.ts",
     "./components/icon/SatSymbol": "./components/icon/SatSymbol.tsx",
     "./components/icon/Spinner": "./components/icon/Spinner.tsx",