dashboard: import dashboard-common with relative imports and path ali…

…ases (#34072)

Unlike using a `dist` build, this allows HMR to work

GitOrigin-RevId: 462145fc3d5423cdd31d8518c47510acfbd9ee42

npm-packages/dashboard-common/jest.config.ts

@@ -6,7 +6,6 @@ const createJestConfig = nextJest({
 
 const customJestConfig = {
   moduleDirectories: ["node_modules", "src"],
-  testPathIgnorePatterns: ["dist"],
   testEnvironment: "jest-environment-jsdom",
   setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
   moduleNameMapper: {

npm-packages/dashboard-common/package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.js",
+  "types": "./src/index.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "npm run build:generated && tsc && tsc-alias",
+    "build": "npm run build:generated && tsc --noEmit",
     "build:generated": "python3 scripts/build-convexServerTypes.py",
     "test": "npm run build:generated && jest",
     "storybook": "storybook dev -s ./public -p 6006",
@@ -124,7 +124,7 @@
     "prettier-plugin-tailwindcss": "~0.3.0",
     "storybook": "^7.6.16",
     "tailwindcss": "^3.2.4",
-    "tsc-alias": "~1.8.10",
+    "tailwind-scrollbar": "3.0.3",
     "typescript": "~5.0.3"
   }
 }

npm-packages/dashboard-common/src/elements/BigChart.tsx

@@ -10,10 +10,10 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { LoadingTransition } from "elements/Loading";
-import { ChartData, ChartDataSource } from "lib/charts/types";
-import { Callout } from "elements/Callout";
-import { ChartTooltip } from "elements/ChartTooltip";
+import { LoadingTransition } from "@common/elements/Loading";
+import { ChartData, ChartDataSource } from "@common/lib/charts/types";
+import { Callout } from "@common/elements/Callout";
+import { ChartTooltip } from "@common/elements/ChartTooltip";
 
 export function BigChart({
   dataSources,

npm-packages/dashboard-common/src/elements/BigMetric.tsx

@@ -1,4 +1,4 @@
-import { cn } from "lib/cn";
+import { cn } from "@common/lib/cn";
 import { ReactNode } from "react";
 
 export type MetricHealth = "healthy" | "warning" | "error";

npm-packages/dashboard-common/src/elements/Button.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { PlusIcon } from "@radix-ui/react-icons";
-import { Button } from "elements/Button";
+import { Button } from "@common/elements/Button";
 
 export default {
   component: Button,

npm-packages/dashboard-common/src/elements/Button.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import Link, { LinkProps } from "next/link";
 import { tv } from "tailwind-variants";
 import { forwardRef } from "react";
-import { Tooltip, TooltipSide } from "elements/Tooltip";
+import { Tooltip, TooltipSide } from "@common/elements/Tooltip";
 
 export type ButtonProps = {
   children?: React.ReactNode;

npm-packages/dashboard-common/src/elements/Calendar.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryFn, StoryObj } from "@storybook/react";
-import { Calendar } from "elements/Calendar";
+import { Calendar } from "@common/elements/Calendar";
 
 export const Single: StoryObj<typeof Calendar> = {
   args: {

npm-packages/dashboard-common/src/elements/Calendar.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { DayPicker } from "react-day-picker";
 
-import { cn } from "lib/cn";
+import { cn } from "@common/lib/cn";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

npm-packages/dashboard-common/src/elements/Callout.tsx

@@ -1,5 +1,5 @@
-import { cn } from "lib/cn";
-import { Snippet } from "elements/Snippet";
+import { cn } from "@common/lib/cn";
+import { Snippet } from "@common/elements/Snippet";
 
 type CalloutVariant = "instructions" | "error" | "localDev" | "upsell";
 

npm-packages/dashboard-common/src/elements/ChartModal.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Modal } from "elements/Modal";
-import { BigChart } from "elements/BigChart";
-import { ChartDataSource } from "lib/charts/types";
+import { Modal } from "@common/elements/Modal";
+import { BigChart } from "@common/elements/BigChart";
+import { ChartDataSource } from "@common/lib/charts/types";
 
 export function ChartModal({
   onClose,

npm-packages/dashboard-common/src/elements/ClosePanelButton.tsx

@@ -1,6 +1,6 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { forwardRef } from "react";
-import { Button } from "elements/Button";
+import { Button } from "@common/elements/Button";
 
 export const ClosePanelButton = forwardRef<
   HTMLElement,

npm-packages/dashboard-common/src/elements/Combobox.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { ComponentProps, useState } from "react";
-import { Combobox } from "elements/Combobox";
+import { Combobox } from "@common/elements/Combobox";
 
 export default {
   component: Combobox,

npm-packages/dashboard-common/src/elements/Combobox.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import { CaretSortIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { cn } from "lib/cn";
+import { cn } from "@common/lib/cn";
 import isEqual from "lodash/isEqual";
 import { test } from "fuzzy";
-import { Button, ButtonProps } from "elements/Button";
+import { Button, ButtonProps } from "@common/elements/Button";
 
 export type Option<T> = { label: string; value: T };
 

npm-packages/dashboard-common/src/elements/ConfirmationDialog.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, useState } from "react";
-import { TextInput } from "elements/TextInput";
-import { Button } from "elements/Button";
-import { Spinner } from "elements/Spinner";
-import { Modal } from "elements/Modal";
+import { TextInput } from "@common/elements/TextInput";
+import { Button } from "@common/elements/Button";
+import { Spinner } from "@common/elements/Spinner";
+import { Modal } from "@common/elements/Modal";
 
 export function ConfirmationDialog({
   onClose,

npm-packages/dashboard-common/src/elements/CopyButton.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryObj } from "@storybook/react";
-import { CopyButton } from "elements/CopyButton";
+import { CopyButton } from "@common/elements/CopyButton";
 
 export default { component: CopyButton };
 

npm-packages/dashboard-common/src/elements/CopyButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { CopyIcon } from "@radix-ui/react-icons";
-import { copyTextToClipboard } from "lib/utils";
-import { Button } from "elements/Button";
+import { copyTextToClipboard } from "@common/lib/utils";
+import { Button } from "@common/elements/Button";
 
 export function CopyButton({
   text,

npm-packages/dashboard-common/src/elements/CopyTextButton.tsx

@@ -1,8 +1,8 @@
 import { CopyIcon } from "@radix-ui/react-icons";
 import classNames from "classnames";
 import { useState } from "react";
-import { copyTextToClipboard } from "lib/utils";
-import { Button } from "elements/Button";
+import { copyTextToClipboard } from "@common/lib/utils";
+import { Button } from "@common/elements/Button";
 
 export function CopyTextButton({
   text,

npm-packages/dashboard-common/src/elements/DateRangePicker.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryObj } from "@storybook/react";
-import { DateRangePicker } from "elements/DateRangePicker";
+import { DateRangePicker } from "@common/elements/DateRangePicker";
 
 export const Primary: StoryObj<typeof DateRangePicker> = {
   args: {

npm-packages/dashboard-common/src/elements/DateRangePicker.tsx

@@ -5,9 +5,9 @@ import { endOfToday, parse, startOfDay, format } from "date-fns";
 import { NextRouter } from "next/router";
 import * as React from "react";
 import { DateRange } from "react-day-picker";
-import { Popover } from "elements/Popover";
-import { Button } from "elements/Button";
-import { Calendar } from "elements/Calendar";
+import { Popover } from "@common/elements/Popover";
+import { Button } from "@common/elements/Button";
+import { Calendar } from "@common/elements/Calendar";
 
 export function DateRangePicker({
   minDate,

npm-packages/dashboard-common/src/elements/DeploymentEventContent.stories.tsx

@@ -2,7 +2,7 @@
 // TODO: CX-4916 fix the types in this file.
 import { StoryObj } from "@storybook/react";
 import { Id } from "system-udfs/convex/_generated/dataModel";
-import { DeploymentEventContent } from "elements/DeploymentEventContent";
+import { DeploymentEventContent } from "@common/elements/DeploymentEventContent";
 
 export default { component: DeploymentEventContent };
 

npm-packages/dashboard-common/src/elements/DeploymentEventContent.tsx

@@ -14,14 +14,14 @@ import {
   cronDiffType,
   schemaDiffType,
 } from "system-udfs/convex/tableDefs/deploymentAuditLogTable";
-import { SchemaJson, displaySchema } from "lib/format";
-import { DeploymentAuditLogEvent } from "lib/useDeploymentAuditLog";
-import { DeploymentInfoContext } from "lib/deploymentContext";
-import { TimestampDistance } from "elements/TimestampDistance";
-import { Button } from "elements/Button";
-import { ReadonlyCodeDiff } from "elements/ReadonlyCode";
-import { NentNameOption } from "elements/NentSwitcher";
-import { NENT_APP_PLACEHOLDER } from "lib/useNents";
+import { SchemaJson, displaySchema } from "@common/lib/format";
+import { DeploymentAuditLogEvent } from "@common/lib/useDeploymentAuditLog";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { TimestampDistance } from "@common/elements/TimestampDistance";
+import { Button } from "@common/elements/Button";
+import { ReadonlyCodeDiff } from "@common/elements/ReadonlyCode";
+import { NentNameOption } from "@common/elements/NentSwitcher";
+import { NENT_APP_PLACEHOLDER } from "@common/lib/useNents";
 
 function useSchemaCode(schema: null | string): string {
   return useMemo(() => {

npm-packages/dashboard-common/src/elements/DeploymentPageTitle.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import { useContext } from "react";
-import { DeploymentInfoContext } from "lib/deploymentContext";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 
 export function DeploymentPageTitle({
   title,

npm-packages/dashboard-common/src/elements/DetailPanel.tsx

@@ -1,9 +1,9 @@
 /* This example requires Tailwind CSS v2.0+ */
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, ReactNode, useState } from "react";
-import { Loading } from "elements/Loading";
-import { Callout } from "elements/Callout";
-import { ClosePanelButton } from "elements/ClosePanelButton";
+import { Loading } from "@common/elements/Loading";
+import { Callout } from "@common/elements/Callout";
+import { ClosePanelButton } from "@common/elements/ClosePanelButton";
 
 export function DetailPanel({
   onClose,