Fix storybook (#34127)

I intentionally left storybook broken while getting dashboard refactored for self-hosting, and now im fixing it

GitOrigin-RevId: 7dc65b343a259e86b524ee02dadab97fdd196448

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

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
+    "storybook-addon-next-router",
     {
       name: "@storybook/addon-styling",
       options: {

npm-packages/dashboard-common/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import "../src/styles/globals.css";
 import { Preview } from "@storybook/react";
 import themeDecorator from "./themeDecorator";
+import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
 
 const preview: Preview = {
   parameters: {
@@ -11,6 +12,9 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    nextRouter: {
+      Provider: RouterContext.Provider, // next 13 (using next/router) / next < 12
+    },
   },
 
   decorators: [

npm-packages/dashboard-common/.storybook/themeDecorator.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode } from "react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import type { DecoratorFunction, Renderer } from "@storybook/types";
 import { ThemeProvider } from "next-themes";
-import { ReactRenderer } from "@storybook/react";
 const { initializeThemeState, pluckThemeFromContext, useThemeParameters } =
   DecoratorHelpers;
 

npm-packages/dashboard-common/package.json

@@ -10,11 +10,14 @@
     "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",
+    "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'"
   },
+  "peerDependencies": {
+    "next-themes": "~0.4.0"
+  },
   "dependencies": {
     "@floating-ui/react": "^0.27.0",
     "@fontsource-variable/inter": "5.0.3",
@@ -39,7 +42,6 @@
     "lodash": "~4.17.21",
     "monaco-editor": "0.40.0",
     "next": "14.2.21",
-    "next-themes": "~0.4.0",
     "object-sizeof": "~2.6.3",
     "prettier-old-sync": "npm:[email protected]",
     "react": "^18.0.0",
@@ -124,6 +126,7 @@
     "storybook": "^7.6.16",
     "tailwindcss": "^3.2.4",
     "tailwind-scrollbar": "3.0.3",
-    "typescript": "~5.0.3"
+    "typescript": "~5.0.3",
+    "storybook-addon-next-router": "~4.0.2"
   }
 }

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

@@ -3,8 +3,19 @@
 import { StoryObj } from "@storybook/react";
 import { Id } from "system-udfs/convex/_generated/dataModel";
 import { DeploymentEventContent } from "@common/elements/DeploymentEventContent";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
-export default { component: DeploymentEventContent };
+export default {
+  component: DeploymentEventContent,
+  decorators: [
+    (Story) => (
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <Story />
+      </DeploymentInfoContext.Provider>
+    ),
+  ],
+};
 
 export const CreateEnvironmentVariable: StoryObj<
   typeof DeploymentEventContent

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

@@ -4,10 +4,10 @@ import udfs from "udfs";
 import { ObjectEditor } from "@common/elements/ObjectEditor/ObjectEditor";
 import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
 
-const mockClient = mockConvexReactClient().registerQueryFake(
-  udfs.listById.default,
-  ({ ids }) => ids.map(() => null),
-);
+const mockClient = mockConvexReactClient()
+  .registerQueryFake(udfs.listById.default, ({ ids }) => ids.map(() => null))
+  .registerQueryFake(udfs.components.list, () => [])
+  .registerQueryFake(udfs.getTableMapping.default, () => null);
 
 export default {
   component: ObjectEditor,

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

@@ -1,8 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { useTheme } from "next-themes";
 
-export { ThemeProvider, useTheme } from "next-themes";
-
 export function ThemeConsumer() {
   const { setTheme, theme } = useTheme();
 

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

@@ -1,5 +1,5 @@
 import { Toaster } from "sonner";
-import { useTheme } from "@common/elements/ThemeConsumer";
+import { useTheme } from "next-themes";
 
 export function ToastContainer() {
   const { resolvedTheme } = useTheme();

npm-packages/dashboard-common/src/index.ts

@@ -104,7 +104,6 @@ export * from "@common/features/files/components/FileStorageView";
 export * from "@common/features/logs/components/LogsView";
 export * from "@common/features/history/components/HistoryView";
 export * from "@common/features/schedules/components/ScheduledFunctionsView";
-export * from "@common/features/schedules/components/crons/CronsView";
 export * from "@common/features/settings/components/EnvironmentVariablesView";
 export * from "@common/features/settings/components/AuthenticationView";
 export * from "@common/features/settings/components/ComponentsView";

npm-packages/dashboard-common/src/lib/mockDeploymentInfo.tsx

@@ -2,9 +2,9 @@ import { DeploymentInfo } from "@common/lib/deploymentContext";
 
 export const mockDeploymentInfo: DeploymentInfo = {
   ok: true,
-  reportHttpError: jest.fn(),
-  captureException: jest.fn(),
-  captureMessage: jest.fn(),
+  reportHttpError: () => {},
+  captureException: () => {},
+  captureMessage: () => {},
   deploymentUrl: process.env.NEXT_PUBLIC_DEPLOYMENT_URL!,
   adminKey: process.env.NEXT_PUBLIC_ADMIN_KEY!,
   useCurrentTeam: () => ({

npm-packages/dashboard-common/tsconfig.json

@@ -24,5 +24,5 @@
     }
   },
   "include": ["src/**/*", "src/*", "next-env.d.ts"],
-  "exclude": ["node_modules", "src/**/*.stories.tsx"]
+  "exclude": ["node_modules"]
 }

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

@@ -15,6 +15,7 @@
     "convex": "workspace:*",
     "dashboard-common": "workspace:*",
     "next": "14.2.21",
+    "next-themes": "~0.4.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "system-udfs": "workspace:*",

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

@@ -22,13 +22,13 @@ import {
   DeploymentDashboardLayout,
   ThemeConsumer,
   Favicon,
-  ThemeProvider,
   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";
 

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { StorybookConfig } from "@storybook/types";
+import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -10,15 +11,33 @@ const config: StorybookConfig = {
     {
       name: "@storybook/addon-styling",
       options: {
-        postCss: {
-          implementation: require("postcss"),
-        },
+        postCss: true,
       },
     },
   ],
   framework: {
     name: "@storybook/nextjs",
-    options: {},
+    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"),
+        };
+
+        return config;
+      },
+    },
   },
 };
 

npm-packages/dashboard/.storybook/themeDecorator.tsx

@@ -1,8 +1,7 @@
 import React, { ReactNode } from "react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import type { DecoratorFunction, Renderer } from "@storybook/types";
-import { ThemeProvider } from "dashboard-common";
-import { ReactRenderer } from "@storybook/react";
+import { ThemeProvider } from "next-themes";
 const { initializeThemeState, pluckThemeFromContext, useThemeParameters } =
   DecoratorHelpers;
 

npm-packages/dashboard/package.json

@@ -11,7 +11,7 @@
     "lint": "next lint --max-warnings 0 --dir src/ && tsc",
     "lint:fix": "next lint --fix --max-warnings 0 --dir src/",
     "export": "next export",
-    "storybook": "storybook dev -s ./public -p 6006",
+    "storybook": "storybook dev -s ./public -p 6006 --no-open",
     "build-storybook": "storybook build",
     "test": "npm run checkApiSpec && npm run build:generated && jest",
     "clean": "shx rm -rf .next",
@@ -110,6 +110,7 @@
     "jest": "^29.6.0",
     "jest-environment-jsdom": "^29.5.0",
     "next-router-mock": "~0.9.11",
+    "next-themes": "~0.4.0",
     "postcss": "^8.4.19",
     "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "~0.3.0",
@@ -123,6 +124,7 @@
     "openapi-typescript": "~7.4.2",
     "openapi-typescript-helpers": "~0.0.15",
     "@types/react-sparklines": "~1.7.5",
-    "eslint-plugin-boundaries": "~5.0.1"
+    "eslint-plugin-boundaries": "~5.0.1",
+    "@storybook/addon-postcss": "~2.0.0"
   }
 }

npm-packages/dashboard/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: { config: "../dashboard-common/tailwind.config.ts" },
+    tailwindcss: { config: "./tailwind.config.ts" },
     autoprefixer: {},
   },
 };

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

@@ -1,7 +1,8 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { Button, Sheet } from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
+import { Sheet } from "dashboard-common/elements/Sheet";
+import { cn } from "dashboard-common/lib/cn";
 import { InvoiceResponse } from "generatedApi";
-import { cn } from "lib/cn";
 
 const headerClass = "text-left text-xs text-content-secondary font-normal py-2";
 

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

@@ -1,15 +1,12 @@
-import {
-  Loading,
-  Tooltip,
-  formatBytes,
-  formatNumberCompact,
-  Sheet,
-} from "dashboard-common";
+import { Sheet } from "dashboard-common/elements/Sheet";
+import { Tooltip } from "dashboard-common/elements/Tooltip";
+import { Loading } from "dashboard-common/elements/Loading";
+import { formatBytes, formatNumberCompact } from "dashboard-common/lib/format";
 import { UsageSummary } from "hooks/usageMetrics";
 import { ReactNode } from "react";
 import { TeamEntitlementsResponse } from "generatedApi";
 import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
-import { cn } from "lib/cn";
+import { cn } from "dashboard-common/lib/cn";
 import Link from "next/link";
 
 export function PlanSummary({

npm-packages/dashboard/src/components/billing/UpgradePlanContent.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
-import { Callout } from "dashboard-common";
+import { Callout } from "dashboard-common/elements/Callout";
 import { UpgradePlanContent } from "./UpgradePlanContent";
 
 export default {

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

@@ -1,4 +1,7 @@
-import { Button, Tooltip, Spinner, TextInput } from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
+import { Tooltip } from "dashboard-common/elements/Tooltip";
+import { Spinner } from "dashboard-common/elements/Spinner";
+import { TextInput } from "dashboard-common/elements/TextInput";
 import React, { useCallback, useEffect, useState } from "react";
 import { useDebounce } from "react-use";
 import { Elements } from "@stripe/react-stripe-js";

npm-packages/dashboard/src/components/billing/UsageBarChart.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { DailyMetric } from "hooks/usageMetrics";
-import { Sheet } from "dashboard-common";
+import { Sheet } from "dashboard-common/elements/Sheet";
 import { UsageBarChart } from "./UsageBarChart";
 
 const meta: Meta<typeof UsageBarChart> = {

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

@@ -11,7 +11,6 @@ import {
   YAxis,
 } from "recharts";
 import { useMemo } from "react";
-import { ChartTooltip, toNumericUTC } from "dashboard-common";
 import groupBy from "lodash/groupBy";
 import sumBy from "lodash/sumBy";
 import {
@@ -20,6 +19,8 @@ import {
   formatQuantityCompact,
 } from "data/Charts/formatQuantity";
 import { useMeasure } from "react-use";
+import { ChartTooltip } from "dashboard-common/elements/ChartTooltip";
+import { toNumericUTC } from "dashboard-common/lib/format";
 import { UsageNoDataError } from "./TeamUsageError";
 
 // To avoid having a bar displayed too wide, we set a minimum amount of days for the chart’s x-axis span.

npm-packages/dashboard/src/components/billing/UsageStackedBarChart.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { DailyPerTagMetrics } from "hooks/usageMetrics";
-import { Sheet } from "dashboard-common";
+import { Sheet } from "dashboard-common/elements/Sheet";
 import { UsageStackedBarChart } from "./UsageBarChart";
 
 const meta: Meta<typeof UsageStackedBarChart> = {

npm-packages/dashboard/src/components/deploymentSettings/BackupListItem.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { DeploymentResponse, Team } from "generatedApi";
-import { Sheet } from "dashboard-common";
+import { Sheet } from "dashboard-common/elements/Sheet";
 import { useAccessToken } from "hooks/useServerSideData";
 import { Id } from "system-udfs/convex/_generated/dataModel";
 import { BackupResponse } from "api/backups";

npm-packages/dashboard/src/components/deploymentSettings/BackupRestoreStatus.tsx

@@ -1,10 +1,8 @@
-import {
-  Button,
-  TimestampDistance,
-  formatNumberCompact,
-  Callout,
-  Modal,
-} from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
+import { TimestampDistance } from "dashboard-common/elements/TimestampDistance";
+import { Callout } from "dashboard-common/elements/Callout";
+import { Modal } from "dashboard-common/elements/Modal";
+import { formatNumberCompact } from "dashboard-common/lib/format";
 import { useQuery } from "convex/react";
 import { useConfirmImport } from "hooks/deploymentApi";
 import { useEffect, useState } from "react";

npm-packages/dashboard/src/components/header/Header/Header.tsx

@@ -5,7 +5,7 @@ import Image from "next/legacy/image";
 import Link from "next/link";
 import { SupportWidget, useSupportFormOpen } from "elements/SupportWidget";
 import { Portal } from "@headlessui/react";
-import { Button } from "dashboard-common";
+import { Button } from "dashboard-common/elements/Button";
 import { useReducer } from "react";
 import { AskAI } from "elements/AskAI";
 import { useLaunchDarkly } from "hooks/useLaunchDarkly";

npm-packages/dashboard/src/components/header/UsageBanner.tsx

@@ -4,7 +4,7 @@ import {
   InfoCircledIcon,
 } from "@radix-ui/react-icons";
 import classNames from "classnames";
-import { Button, buttonClasses } from "dashboard-common";
+import { Button, buttonClasses } from "dashboard-common/elements/Button";
 import { useUnpauseTeam } from "api/teams";
 import { useTeamUsageState } from "hooks/useTeamUsageState";
 import Link from "next/link";