Replace dashboard-common barrel file with direct imports (#34132)

With all the latest work on the build setup for dashboard-common, we can get rid of the barrel file and replace all the imports with direct imports

GitOrigin-RevId: bc63d4ab7fb7eaaf249b196fdb6dcee55e8cab43

npm-packages/dashboard-common/package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "main": "./src/index.js",
-  "types": "./src/index.ts",
   "sideEffects": false,
   "scripts": {
     "build": "npm run build:generated && tsc --noEmit",

npm-packages/dashboard-self-hosted/src/pages/404.tsx

@@ -1,4 +1,4 @@
-import { Button } from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
 
 export default function Custom404() {
   return (

npm-packages/dashboard-self-hosted/src/pages/500.tsx

@@ -1,4 +1,4 @@
-import { Callout } from "dashboard-common";
+import { Callout } from "dashboard-common/elements/Callout";
 
 export default function Custom500() {
   return <Fallback error={null} />;

npm-packages/dashboard-self-hosted/src/pages/_app.tsx

@@ -12,25 +12,24 @@ import {
   EyeOpenIcon,
   GearIcon,
 } from "@radix-ui/react-icons";
+import { ConvexLogo } from "dashboard-common/elements/ConvexLogo";
+import { ToastContainer } from "dashboard-common/elements/ToastContainer";
+import { ThemeConsumer } from "dashboard-common/elements/ThemeConsumer";
+import { Favicon } from "dashboard-common/elements/Favicon";
+import { ToggleTheme } from "dashboard-common/elements/ToggleTheme";
+import { Menu, MenuItem } from "dashboard-common/elements/Menu";
+import { TextInput } from "dashboard-common/elements/TextInput";
+import { Button } from "dashboard-common/elements/Button";
+import { ThemeProvider } from "next-themes";
+import React, { useEffect, useMemo, useState } from "react";
+import { ErrorBoundary } from "components/ErrorBoundary";
+import { DeploymentDashboardLayout } from "dashboard-common/layouts/DeploymentDashboardLayout";
 import {
-  ConvexLogo,
   DeploymentApiProvider,
+  WaitForDeploymentApi,
   DeploymentInfo,
   DeploymentInfoContext,
-  WaitForDeploymentApi,
-  ToastContainer,
-  DeploymentDashboardLayout,
-  ThemeConsumer,
-  Favicon,
-  ToggleTheme,
-  Menu,
-  MenuItem,
-  TextInput,
-  Button,
-} from "dashboard-common";
-import { ThemeProvider } from "next-themes";
-import React, { useEffect, useMemo, useState } from "react";
-import { ErrorBoundary } from "components/ErrorBoundary";
+} from "dashboard-common/lib/deploymentContext";
 
 function App({
   Component,

npm-packages/dashboard-self-hosted/src/pages/data.tsx

@@ -1,3 +1,3 @@
-import { DataView } from "dashboard-common";
+import { DataView } from "dashboard-common/features/data/components/DataView";
 
 export default DataView;

npm-packages/dashboard-self-hosted/src/pages/files.tsx

@@ -1,3 +1,3 @@
-import { FileStorageView } from "dashboard-common";
+import { FileStorageView } from "dashboard-common/features/files/components/FileStorageView";
 
 export default FileStorageView;

npm-packages/dashboard-self-hosted/src/pages/functions.tsx

@@ -1,3 +1,3 @@
-import { FunctionsView } from "dashboard-common";
+import { FunctionsView } from "dashboard-common/features/functions/components/FunctionsView";
 
 export default FunctionsView;

npm-packages/dashboard-self-hosted/src/pages/history.tsx

@@ -1,3 +1,3 @@
-import { HistoryView } from "dashboard-common";
+import { HistoryView } from "dashboard-common/features/history/components/HistoryView";
 
 export default HistoryView;

npm-packages/dashboard-self-hosted/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { HealthView } from "dashboard-common";
+import { HealthView } from "dashboard-common/features/health/components/HealthView";
 
 export default function Page() {
   return (

npm-packages/dashboard-self-hosted/src/pages/logs.tsx

@@ -1,3 +1,3 @@
-import { LogsView } from "dashboard-common";
+import { LogsView } from "dashboard-common/features/logs/components/LogsView";
 
 export default LogsView;

npm-packages/dashboard-self-hosted/src/pages/schedules/functions.tsx

@@ -1,3 +1,3 @@
-import { ScheduledFunctionsView } from "dashboard-common";
+import { ScheduledFunctionsView } from "dashboard-common/features/schedules/components/ScheduledFunctionsView";
 
 export default ScheduledFunctionsView;

npm-packages/dashboard-self-hosted/src/pages/settings/authentication.tsx

@@ -1,3 +1,3 @@
-import { AuthenticationView } from "dashboard-common";
+import { AuthenticationView } from "dashboard-common/features/settings/components/AuthenticationView";
 
 export default AuthenticationView;

npm-packages/dashboard-self-hosted/src/pages/settings/components.tsx

@@ -1,3 +1,3 @@
-import { ComponentsView } from "dashboard-common";
+import { ComponentsView } from "dashboard-common/features/settings/components/ComponentsView";
 
 export default ComponentsView;

npm-packages/dashboard-self-hosted/src/pages/settings/environment-variables.tsx

@@ -1,3 +1,3 @@
-import { EnvironmentVariablesView } from "dashboard-common";
+import { EnvironmentVariablesView } from "dashboard-common/features/settings/components/EnvironmentVariablesView";
 
 export default EnvironmentVariablesView;

npm-packages/dashboard-self-hosted/src/pages/settings/index.tsx

@@ -1,9 +1,9 @@
+import { Sheet } from "dashboard-common/elements/Sheet";
 import {
-  Sheet,
   DeploymentUrl,
   HttpActionsUrl,
-  DeploymentSettingsLayout,
-} from "dashboard-common";
+} from "dashboard-common/features/settings/components/DeploymentUrl";
+import { DeploymentSettingsLayout } from "dashboard-common/layouts/DeploymentSettingsLayout";
 
 export default function Settings() {
   return (

npm-packages/dashboard-self-hosted/tsconfig.json

@@ -18,7 +18,6 @@
     "baseUrl": "src",
     "customConditions": ["convex-internal-types"],
     "paths": {
-      "dashboard-common": ["../../dashboard-common/src"],
       "dashboard-common/*": ["../../dashboard-common/src/*"],
       "@common/*": ["../../dashboard-common/src/*"]
     }

npm-packages/dashboard/.storybook/main.ts

@@ -20,19 +20,16 @@ const config: StorybookConfig = {
     options: {
       webpackFinal: async (config) => {
         // Configure aliases
-        if (!config.resolve) {
-          config.resolve = {};
-        }
-        if (!config.resolve.alias) {
-          config.resolve.alias = {};
-        }
-        config.resolve.alias = {
-          ...config.resolve.alias,
-          "dashboard-common": path.resolve(
-            __dirname,
-            "../../dashboard-common/src",
-          ),
-          "@common": path.resolve(__dirname, "../../dashboard-common/src"),
+        config.resolve = {
+          ...config.resolve,
+          alias: {
+            ...config.resolve?.alias,
+            "dashboard-common": path.resolve(
+              __dirname,
+              "../../dashboard-common/src",
+            ),
+            "@common": path.resolve(__dirname, "../../dashboard-common/src"),
+          },
         };
 
         return config;

npm-packages/dashboard/jest.config.ts

@@ -11,7 +11,7 @@ const customJestConfig = {
   moduleNameMapper: {
     "react-dnd": "<rootDir>/__mocks__/fileMock.js",
     "react-dnd-scrolling": "<rootDir>/__mocks__/fileMock.js",
-    "dashboard-common": "<rootDir>/../dashboard-common/src/$1",
+    "^dashboard-common/(.*)$": "<rootDir>/../dashboard-common/src/$1",
   },
 };
 

npm-packages/dashboard/src/api/api.ts

@@ -8,7 +8,7 @@ import { PathsWithMethod } from "openapi-typescript-helpers";
 import { createMutateHook, createQueryHook } from "swr-openapi";
 import isMatch from "lodash/isMatch";
 import { fireGoogleAnalyticsEvent } from "elements/GoogleAnalytics";
-import { toast } from "dashboard-common";
+import { toast } from "dashboard-common/lib/utils";
 import type { paths as BigBrainPaths } from "generatedApi";
 import { SWRConfiguration } from "swr";
 import { useAccessToken } from "hooks/useServerSideData";

npm-packages/dashboard/src/api/insights.ts

@@ -1,14 +1,15 @@
 import { useCurrentDeployment } from "api/deployments";
 import { useCurrentTeam } from "api/teams";
-import {
-  functionIdentifierValue,
-  itemIdentifier,
-  useModuleFunctions,
-} from "dashboard-common";
+
 import { rootComponentPath, useUsageQuery } from "hooks/usageMetrics";
 import omit from "lodash/omit";
 import { useMemo } from "react";
 import { useRouter } from "next/router";
+import {
+  itemIdentifier,
+  useModuleFunctions,
+} from "dashboard-common/lib/functions/FunctionsProvider";
+import { functionIdentifierValue } from "dashboard-common/lib/functions/generateFileTree";
 
 const queryIds = {
   bytesRead: "5bebdf6d-921a-42dc-9ee6-2d5c577111b6",

npm-packages/dashboard/src/components/billing/BillingContactInputs.tsx

@@ -1,4 +1,4 @@
-import { TextInput } from "dashboard-common";
+import { TextInput } from "dashboard-common/elements/TextInput";
 import { useFormik } from "formik";
 import { BillingContactResponse, CreateSubscriptionArgs } from "generatedApi";
 

npm-packages/dashboard/src/components/billing/PaymentDetailsForm.tsx

@@ -9,7 +9,8 @@ import {
   StripeElements,
   SetupIntent,
 } from "@stripe/stripe-js";
-import { Button, Spinner } from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
+import { Spinner } from "dashboard-common/elements/Spinner";
 
 export function PaymentDetailsForm({
   retrieveSetupIntent,

npm-packages/dashboard/src/components/billing/Plans.tsx

@@ -1,5 +1,5 @@
 import { useListPlans } from "api/billing";
-import { Loading } from "dashboard-common";
+import { Loading } from "dashboard-common/elements/Loading";
 import { OrbSubscriptionResponse, Team } from "generatedApi";
 import { BusinessPlan } from "./planCards/BusinessPlan";
 import { OrbSelfServePlan } from "./planCards/OrbSelfServePlan";

npm-packages/dashboard/src/components/billing/SubscriptionOverview.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
-import { formatDate } from "dashboard-common";
+import { formatDate } from "dashboard-common/lib/format";
 import { OrbSubscriptionResponse, Team } from "generatedApi";
 import { SubscriptionOverview } from "./SubscriptionOverview";
 

npm-packages/dashboard/src/components/billing/SubscriptionOverview.tsx

@@ -5,7 +5,11 @@ import {
   useUpdatePaymentMethod,
   useResumeSubscription,
 } from "api/billing";
-import { Loading, Button, Spinner, formatDate, Sheet } from "dashboard-common";
+import { Loading } from "dashboard-common/elements/Loading";
+import { Button } from "dashboard-common/elements/Button";
+import { Spinner } from "dashboard-common/elements/Spinner";
+import { formatDate } from "dashboard-common/lib/format";
+import { Sheet } from "dashboard-common/elements/Sheet";
 import { useFormik } from "formik";
 import { useStripeAddressSetup, useStripePaymentSetup } from "hooks/useStripe";
 import { Elements } from "@stripe/react-stripe-js";

npm-packages/dashboard/src/components/billing/TeamUsage.tsx

@@ -1,12 +1,9 @@
 import { PlanSummary, UsageOverview } from "components/billing/PlanSummary";
-import {
-  Sheet,
-  Loading,
-  sidebarLinkClassNames,
-  Button,
-  formatBytes,
-  formatNumberCompact,
-} from "dashboard-common";
+import { Sheet } from "dashboard-common/elements/Sheet";
+import { Loading } from "dashboard-common/elements/Loading";
+import { Button } from "dashboard-common/elements/Button";
+import { formatBytes, formatNumberCompact } from "dashboard-common/lib/format";
+import { sidebarLinkClassNames } from "dashboard-common/elements/Sidebar";
 import {
   AggregatedFunctionMetrics,
   DateRange,

npm-packages/dashboard/src/components/billing/TeamUsageByFunctionChart.tsx

@@ -1,6 +1,7 @@
 import { ChevronDownIcon, DesktopIcon } from "@radix-ui/react-icons";
 import classNames from "classnames";
-import { Button, PuzzlePieceIcon, Tooltip } from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
+import { Tooltip } from "dashboard-common/elements/Tooltip";
 import {
   QuantityType,
   formatQuantity,
@@ -20,6 +21,7 @@ import {
   Team,
   ProjectDetails,
 } from "generatedApi";
+import { PuzzlePieceIcon } from "dashboard-common/elements/icons";
 
 const ITEMS_SHOWN_INITIALLY = 6;