Refactor UI components to a new package (#36366)

Adds the UI package to make it easier to reuse UI that doesn't have any dependencies on convex

GitOrigin-RevId: 23008a347cde234ad227073f3becd41fe3028890

Author: atrakh

npm-packages/common/config/rush/pnpm-lock.yaml

@@ -17,7 +17,7 @@ module.exports = {
   plugins: ["prettier", "tailwindcss"],
   settings: {
     tailwindcss: {
-      config: path.join(__dirname, "./tailwind.config.ts"),
+      config: path.join(__dirname, "../ui/tailwind.config.ts"),
     },
   },
   rules: {
@@ -132,7 +132,7 @@ module.exports = {
           {
             element: "button",
             message:
-              "use elements/Button instead. If you really need a custom button, disable this rule and leave a comment explaining why.",
+              "use @ui/Button instead. If you really need a custom button, disable this rule and leave a comment explaining why.",
           },
           {
             element: "details",

npm-packages/dashboard-common/.eslintrc.cjs

@@ -7,8 +7,6 @@
   "scripts": {
     "build": "npm run build:generated && tsc --noEmit",
     "build:generated": "python3 scripts/build-convexServerTypes.py",
-    "storybook": "storybook dev -s ./public -p 6006 --no-open",
-    "build-storybook": "storybook build",
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx --ignore-pattern '**/*.stories.tsx'",
     "lint:fix": "eslint --fix ./src --ext .js,.jsx,.ts,.tsx --ignore-pattern '**/*.stories.tsx'"
   },
@@ -32,8 +30,8 @@
     "acorn": "~8.8.1",
     "base64-js": "^1.5.1",
     "classnames": "^2.3.2",
-    "clsx": "2.1.1",
     "date-fns": "^2.29.3",
+    "ui": "workspace:*",
     "formik": "^2.4.6",
     "fuzzy": "~0.1.3",
     "id-encoding": "workspace:*",
@@ -70,15 +68,7 @@
   },
   "devDependencies": {
     "@jest/types": "^29.6.0",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-themes": "^7.6.16",
-    "@storybook/cli": "^7.6.16",
-    "@storybook/nextjs": "^7.6.16",
     "@storybook/react": "^7.6.16",
-    "@storybook/types": "^7.6.16",
     "@tailwindcss/forms": "^0.5.6",
     "@testing-library/dom": "~10.4.0",
     "@testing-library/jest-dom": "~6.6.0",
@@ -117,10 +107,8 @@
     "postcss": "^8.4.19",
     "prettier": "3.5.2",
     "prettier-plugin-tailwindcss": "~0.3.0",
-    "storybook": "^7.6.16",
     "tailwindcss": "^3.2.4",
     "tailwind-scrollbar": "3.0.3",
-    "typescript": "~5.0.3",
-    "storybook-addon-next-router": "~4.0.2"
+    "typescript": "~5.0.3"
   }
 }

npm-packages/dashboard-common/package.json

@@ -9,9 +9,9 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { LoadingTransition } from "@common/elements/Loading";
+import { LoadingTransition } from "@ui/Loading";
 import { ChartData, ChartDataSource } from "@common/lib/charts/types";
-import { Callout } from "@common/elements/Callout";
+import { Callout } from "@ui/Callout";
 import { ChartTooltip } from "@common/elements/ChartTooltip";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 

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

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

npm-packages/dashboard-common/src/elements/BigMetric.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 "@common/lib/cn";
+import { cn } from "@ui/cn";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Modal } from "@common/elements/Modal";
+import { Modal } from "@ui/Modal";
 import { BigChart } from "@common/elements/BigChart";
 import { ChartDataSource } from "@common/lib/charts/types";
 

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

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

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

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

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

@@ -5,8 +5,8 @@ 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 "@common/elements/Popover";
-import { Button } from "@common/elements/Button";
+import { Popover } from "@ui/Popover";
+import { Button } from "@ui/Button";
 import { Calendar } from "@common/elements/Calendar";
 
 export function DateRangePicker({

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

@@ -18,7 +18,7 @@ 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 { Button } from "@ui/Button";
 import { ReadonlyCodeDiff } from "@common/elements/ReadonlyCode";
 import { NentNameOption } from "@common/elements/NentSwitcher";
 import { NENT_APP_PLACEHOLDER } from "@common/lib/useNents";

npm-packages/dashboard-common/src/elements/DeploymentEventContent.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 "@common/elements/Loading";
-import { Callout } from "@common/elements/Callout";
-import { ClosePanelButton } from "@common/elements/ClosePanelButton";
+import { Loading } from "@ui/Loading";
+import { Callout } from "@ui/Callout";
+import { ClosePanelButton } from "@ui/ClosePanelButton";
 
 export function DetailPanel({
   onClose,

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { Button, ButtonProps } from "@common/elements/Button";
-import { Sheet } from "@common/elements/Sheet";
+import { Button, ButtonProps } from "@ui/Button";
+import { Sheet } from "@ui/Sheet";
 
 export function EmptySection({
   Icon,

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

@@ -1,12 +1,12 @@
 import { ROUTABLE_HTTP_METHODS } from "convex/server";
 import { useHoverDirty } from "react-use";
 import { useRef } from "react";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import {
   displayName,
   functionIdentifierFromValue,
 } from "@common/lib/functions/generateFileTree";
-import { Tooltip } from "@common/elements/Tooltip";
+import { Tooltip } from "@ui/Tooltip";
 import { PuzzlePieceIcon } from "@common/elements/icons";
 
 function splitFunctionName(functionName: string) {

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

@@ -3,11 +3,11 @@ import {
   ExclamationTriangleIcon,
   InfoCircledIcon,
 } from "@radix-ui/react-icons";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import React from "react";
-import { Sheet } from "@common/elements/Sheet";
-import { Tooltip } from "@common/elements/Tooltip";
-import { LoadingTransition } from "@common/elements/Loading";
+import { Sheet } from "@ui/Sheet";
+import { Tooltip } from "@ui/Tooltip";
+import { LoadingTransition } from "@ui/Loading";
 
 export function HealthCard({
   title,

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

@@ -0,0 +1,34 @@
+import { Snippet } from "@common/elements/Snippet";
+import { Callout } from "@ui/Callout";
+
+export function LocalDevCallout({
+  children,
+  tipText,
+  command,
+  ...props
+}: {
+  tipText: string;
+  command?: string;
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>) {
+  const isDev = process.env.NEXT_PUBLIC_ENVIRONMENT === "development";
+  if (!isDev) {
+    return null;
+  }
+  return (
+    <Callout variant="localDev" {...props}>
+      <div className="grow flex-col text-xs">
+        {tipText}
+        {command && (
+          <Snippet
+            value={command}
+            monospace
+            copying="Command"
+            className="grow"
+          />
+        )}
+      </div>
+      {children}
+    </Callout>
+  );
+}

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

@@ -1,7 +1,7 @@
-import { cn } from "@common/lib/cn";
-import { Combobox } from "@common/elements/Combobox";
+import { cn } from "@ui/cn";
+import { Combobox } from "@ui/Combobox";
 import { PuzzlePieceIcon } from "@common/elements/icons";
-import { Tooltip } from "@common/elements/Tooltip";
+import { Tooltip } from "@ui/Tooltip";
 import { NENT_APP_PLACEHOLDER, Nent, useNents } from "@common/lib/useNents";
 
 export function NentSwitcher({

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

@@ -18,7 +18,7 @@ import isArray from "lodash/isArray";
 import isPlainObject from "lodash/isPlainObject";
 import { UNDEFINED_PLACEHOLDER } from "system-udfs/convex/_system/frontend/patchDocumentsFields";
 import { stringifyValue } from "@common/lib/stringifyValue";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import {
   ConvexSchemaValidationError,

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

@@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
 import { useState, useEffect } from "react";
 import udfs from "@common/udfs";
 import { useRouter } from "next/router";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import { GenericDocument } from "convex/server";
 import { SourceLocation } from "acorn";
 import type { editor } from "monaco-editor/esm/vs/editor/editor.api";

npm-packages/dashboard-common/src/elements/ObjectEditor/useIdDecorations.tsx

@@ -1,4 +1,4 @@
-import { ConfirmationDialog } from "@common/elements/ConfirmationDialog";
+import { ConfirmationDialog } from "@ui/ConfirmationDialog";
 
 export function ProductionEditsConfirmationDialog({
   onClose,

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

@@ -1,12 +1,12 @@
 import { formatDistance } from "date-fns";
 import { useContext, useState } from "react";
 import { BarChartIcon, ResetIcon } from "@radix-ui/react-icons";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import { HealthCard } from "@common/elements/HealthCard";
 import { useSchedulerLag } from "@common/lib/appMetrics";
 import { ChartForFunctionRate } from "@common/features/health/components/ChartForFunctionRate";
 import { BigMetric } from "@common/elements/BigMetric";
-import { Button } from "@common/elements/Button";
+import { Button } from "@ui/Button";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 
 export function SchedulerStatus({ small = false }: { small?: boolean }) {

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

@@ -7,8 +7,8 @@ import {
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
 } from "@radix-ui/react-icons";
-import { Tooltip } from "@common/elements/Tooltip";
-import { Button } from "@common/elements/Button";
+import { Tooltip } from "@ui/Tooltip";
+import { Button } from "@ui/Button";
 
 export type SidebarItem = {
   key: string | null;
@@ -143,7 +143,6 @@ export function SidebarLink({
                 : query,
             }
       }
-      passHref
       aria-disabled={disabled}
       className={sidebarLinkClassNames({
         isActive,

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

@@ -1,7 +1,7 @@
 import { CopyIcon } from "@radix-ui/react-icons";
 import classNames from "classnames";
 import { useCallback } from "react";
-import { Button } from "@common/elements/Button";
+import { Button } from "@ui/Button";
 import { useCopy } from "@common/lib/useCopy";
 
 type Props = {

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

@@ -1,7 +1,7 @@
 import { formatDistanceToNow } from "date-fns";
 import { useRefresh } from "@common/lib/useRefresh";
-import { cn } from "@common/lib/cn";
-import { Tooltip } from "@common/elements/Tooltip";
+import { cn } from "@ui/cn";
+import { Tooltip } from "@ui/Tooltip";
 
 export function TimestampDistance({
   prefix = "",

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

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { ToastContainer } from "@common/elements/ToastContainer";
 import { toast } from "@common/lib/utils";
-import { Sheet } from "@common/elements/Sheet";
-import { TextInput } from "@common/elements/TextInput";
-import { Button } from "@common/elements/Button";
+import { Sheet } from "@ui/Sheet";
+import { TextInput } from "@ui/TextInput";
+import { Button } from "@ui/Button";
 
 export default {
   component: ToastContainer,

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

@@ -1,8 +1,8 @@
 import { SunIcon, MoonIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import startCase from "lodash/startCase";
 import { useTheme } from "next-themes";
-import { cn } from "@common/lib/cn";
-import { Tooltip } from "./Tooltip";
+import { cn } from "@ui/cn";
+import { Tooltip } from "@ui/Tooltip";
 
 export function ToggleTheme() {
   const { theme: currentTheme, setTheme } = useTheme();

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

@@ -37,9 +37,9 @@ import {
 import classNames from "classnames";
 import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { UrlObject } from "url";
-import { Button } from "@common/elements/Button";
-import { TooltipSide } from "@common/elements/Tooltip";
-import { Key, KeyboardShortcut } from "@common/elements/KeyboardShortcut";
+import { Button } from "@ui/Button";
+import { TooltipSide } from "@ui/Tooltip";
+import { Key, KeyboardShortcut } from "@ui/KeyboardShortcut";
 
 const ContextMenuContext = React.createContext<{
   getItemProps: (

npm-packages/dashboard-common/src/features/data/components/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 
 export function ConvexSchemaFilePath({ className }: { className?: string }) {
   return (

npm-packages/dashboard-common/src/features/data/components/ConvexSchemaFilePath.tsx

@@ -19,9 +19,9 @@ import {
   SchemaJson,
 } from "system-udfs/convex/_system/frontend/lib/filters";
 import { Shape } from "shapes";
-import { LoadingLogo, LoadingTransition } from "@common/elements/Loading";
-import { Sheet } from "@common/elements/Sheet";
-import { Button } from "@common/elements/Button";
+import { LoadingLogo, LoadingTransition } from "@ui/Loading";
+import { Sheet } from "@ui/Sheet";
+import { Button } from "@ui/Button";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { useSelectionState } from "@common/features/data/lib/useSelectionState";
 import { useDataToolbarActions } from "@common/features/data/lib/useDataToolbarActions";
@@ -49,7 +49,7 @@ import {
   Panel,
   PanelGroup,
 } from "react-resizable-panels";
-import { cn } from "@common/lib/cn";
+import { cn } from "@ui/cn";
 import { useTableIndexes } from "@common/features/data/lib/api";
 import { getDefaultIndex } from "@common/features/data/components/DataFilters/IndexFilters";