refactor: Break @calcom/app-store/components into individual component files (#23637)

* wip

* get rid of app-store/components

* create independent files

* update imports

apps/web/components/apps/AppPage.tsx

@@ -3,9 +3,10 @@ import { useRouter } from "next/navigation";
 import type { IframeHTMLAttributes } from "react";
 import React, { useEffect, useState } from "react";
 
+import { AppDependencyComponent } from "@calcom/app-store/AppDependencyComponent";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
 import { isRedirectApp } from "@calcom/app-store/_utils/redirectApps";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
 import { doesAppSupportTeamInstall, isConferencing } from "@calcom/app-store/utils";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps";

apps/web/components/apps/CalendarListContainer.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, Suspense } from "react";
 
-import { InstallAppButton } from "@calcom/app-store/components";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
 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";

apps/web/components/getting-started/components/AppConnectionItem.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
 import { useState } from "react";
 
+import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/InstallAppButtonWithoutPlanCheck";
 import type { TDependencyData } from "@calcom/app-store/_appRegistry";
-import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

packages/app-store/AppDependencyComponent.tsx

@@ -2,68 +2,12 @@
 
 import Link from "next/link";
 
-import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation";
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
 import classNames from "@calcom/ui/classNames";
 import { Icon } from "@calcom/ui/components/icon";
 
-import { InstallAppButtonMap } from "./apps.browser.generated";
-import type { InstallAppButtonProps } from "./types";
-
-export const InstallAppButtonWithoutPlanCheck = (
-  props: {
-    type: App["type"];
-    options?: UseAddAppMutationOptions;
-  } & InstallAppButtonProps
-) => {
-  const mutation = useAddAppMutation(null, props.options);
-  const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap);
-  const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap];
-  if (!InstallAppButtonComponent)
-    return (
-      <>
-        {props.render({
-          useDefaultComponent: true,
-          disabled: props.disableInstall,
-          onClick: () => {
-            mutation.mutate({ type: props.type });
-          },
-          loading: mutation.data?.setupPending,
-        })}
-      </>
-    );
-
-  return (
-    <InstallAppButtonComponent
-      render={props.render}
-      onChanged={props.onChanged}
-      disableInstall={props.disableInstall}
-    />
-  );
-};
-
-export const InstallAppButton = (
-  props: {
-    teamsPlanRequired?: App["teamsPlanRequired"];
-    type: App["type"];
-    wrapperClassName?: string;
-    disableInstall?: boolean;
-  } & InstallAppButtonProps
-) => {
-  return (
-    <div className={props.wrapperClassName}>
-      <InstallAppButtonWithoutPlanCheck {...props} />
-    </div>
-  );
-};
-
-export { AppConfiguration } from "./_components/AppConfiguration";
-
 export const AppDependencyComponent = ({
   appName,
   dependencyData,

packages/app-store/InstallAppButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type { App } from "@calcom/types/App";
+
+import { InstallAppButtonWithoutPlanCheck } from "./InstallAppButtonWithoutPlanCheck";
+import type { InstallAppButtonProps } from "./types";
+
+export const InstallAppButton = (
+  props: {
+    teamsPlanRequired?: App["teamsPlanRequired"];
+    type: App["type"];
+    wrapperClassName?: string;
+    disableInstall?: boolean;
+  } & InstallAppButtonProps
+) => {
+  return (
+    <div className={props.wrapperClassName}>
+      <InstallAppButtonWithoutPlanCheck {...props} />
+    </div>
+  );
+};

packages/app-store/InstallAppButtonWithoutPlanCheck.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation";
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
+import type { App } from "@calcom/types/App";
+
+import { InstallAppButtonMap } from "./apps.browser.generated";
+import type { InstallAppButtonProps } from "./types";
+
+export const InstallAppButtonWithoutPlanCheck = (
+  props: {
+    type: App["type"];
+    options?: UseAddAppMutationOptions;
+  } & InstallAppButtonProps
+) => {
+  const mutation = useAddAppMutation(null, props.options);
+  const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap);
+  const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap];
+  if (!InstallAppButtonComponent)
+    return (
+      <>
+        {props.render({
+          useDefaultComponent: true,
+          disabled: props.disableInstall,
+          onClick: () => {
+            mutation.mutate({ type: props.type });
+          },
+          loading: mutation.data?.setupPending,
+        })}
+      </>
+    );
+
+  return (
+    <InstallAppButtonComponent
+      render={props.render}
+      onChanged={props.onChanged}
+      disableInstall={props.disableInstall}
+    />
+  );
+};

packages/app-store/_components/AppConfiguration.tsx

@@ -1,19 +0,0 @@
-import dynamic from "next/dynamic";
-
-export const ConfigAppMap = {
-  vital: dynamic(() => import("../vital/components/AppConfiguration")),
-};
-
-export const AppConfiguration = (props: { type: string } & { credentialIds: number[] }) => {
-  let appName = props.type.replace(/_/g, "");
-  let ConfigAppComponent = ConfigAppMap[appName as keyof typeof ConfigAppMap];
-  /** So we can either call it by simple name (ex. `slack`, `giphy`) instead of
-   * `slackmessaging`, `giphyother` while maintaining retro-compatibility. */
-  if (!ConfigAppComponent) {
-    [appName] = props.type.split("_");
-    ConfigAppComponent = ConfigAppMap[appName as keyof typeof ConfigAppMap];
-  }
-  if (!ConfigAppComponent) return null;
-
-  return <ConfigAppComponent credentialIds={props.credentialIds} />;
-};

packages/app-store/_components/OmniInstallAppButton.tsx

@@ -1,12 +1,12 @@
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { showToast } from "@calcom/ui/components/toast";
-import { Button } from "@calcom/ui/components/button";
 import classNames from "@calcom/ui/classNames";
+import { Button } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
 
+import { InstallAppButton } from "../InstallAppButton";
 import useAddAppMutation from "../_utils/useAddAppMutation";
-import { InstallAppButton } from "../components";
 
 /**
  * Use this component to allow installing an app from anywhere on the app.

packages/features/apps/components/AppCard.tsx

@@ -3,9 +3,9 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
 import { isRedirectApp } from "@calcom/app-store/_utils/redirectApps";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
 import { doesAppSupportTeamInstall, isConferencing } from "@calcom/app-store/utils";
 import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps";
 import { getAppOnboardingUrl } from "@calcom/lib/apps/getAppOnboardingUrl";

packages/features/apps/components/AppList.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
 import { AppSettings } from "@calcom/app-store/_components/AppSettings";
-import { InstallAppButton } from "@calcom/app-store/components";
 import { getLocationFromApp, type EventLocationType } from "@calcom/app-store/locations";
 import type { CredentialOwner } from "@calcom/app-store/types";
 import AppListCard from "@calcom/features/apps/components/AppListCard";

packages/features/calendars/AdditionalCalendarSelector.tsx

@@ -1,6 +1,6 @@
 import type { FunctionComponent, SVGProps } from "react";
 
-import { InstallAppButton } from "@calcom/app-store/components";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";