Use fn to handle component events in Storybook (#42066)

GitOrigin-RevId: 4d8b2ab7421ba19b2c6117fc8c8ca2a9f3d999ad

Author: Nicolapps

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

@@ -1,13 +1,14 @@
 import { Meta, StoryObj } from "@storybook/nextjs";
 import { DateRangePicker } from "@common/elements/DateRangePicker";
+import { fn } from "storybook/test";
 
 export const Primary: Story = {
   args: {
     date: {
       from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
       to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
     },
-    setDate: () => {},
+    setDate: fn(),
   },
 };
 

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

@@ -5,6 +5,7 @@ import { ObjectEditor } from "@common/elements/ObjectEditor/ObjectEditor";
 import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
+import { fn } from "storybook/test";
 
 const mockClient = mockConvexReactClient()
   .registerQueryFake(udfs.listById.default, ({ ids }) => ids.map(() => null))
@@ -30,8 +31,8 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     defaultValue: null,
-    onChange: () => {},
-    onError: () => {},
+    onChange: fn(),
+    onError: fn(),
     path: "document",
     mode: "editField",
   },

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

@@ -8,6 +8,7 @@ import {
   Cross1Icon,
 } from "@radix-ui/react-icons";
 import { Sidebar } from "@common/elements/Sidebar";
+import { fn } from "storybook/test";
 
 const meta = {
   component: Sidebar,
@@ -17,7 +18,7 @@ const meta = {
     </div>
   ),
   args: {
-    setCollapsed: () => {},
+    setCollapsed: fn(),
   },
 } satisfies Meta<typeof Sidebar>;
 

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

@@ -3,12 +3,13 @@ import { useRef, useState } from "react";
 import { ExternalLinkIcon, StarIcon, TrashIcon } from "@radix-ui/react-icons";
 import { ContextMenu } from "@common/features/data/components/ContextMenu";
 import { useContextMenuTrigger } from "@common/features/data/lib/useContextMenuTrigger";
+import { fn } from "storybook/test";
 
 const meta = {
   component: ContextMenu,
   args: {
     target: null,
-    onClose: () => {},
+    onClose: fn(),
   },
   argTypes: {
     target: {

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

@@ -9,6 +9,7 @@ import {
   DeploymentInfoContext,
 } from "@common/lib/deploymentContext";
 import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
+import { fn } from "storybook/test";
 
 // @ts-expect-error
 const deployment: ConnectedDeployment = {};
@@ -51,12 +52,9 @@ export const Default: Story = {
     tableName: "myTable",
     defaultDocument: { myColumn: 0 },
     filters: { clauses: [] },
-    onFiltersChange: () => {
-      // eslint-disable-next-line no-alert
-      alert("Filters applied");
-    },
-    setDraftFilters: () => {},
-    setShowFilters: () => {},
+    onFiltersChange: fn(),
+    setDraftFilters: fn(),
+    setShowFilters: fn(),
     tableFields: ["myColumn"],
     componentId: "myComponent",
     activeSchema: null,

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

@@ -5,6 +5,7 @@ import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
 import { ConvexProvider } from "convex/react";
 import udfs from "@common/udfs";
 import { SearchIndexFilter } from "system-udfs/convex/_system/frontend/lib/filters";
+import { fn } from "storybook/test";
 import { IndexFilters } from "./IndexFilters";
 
 const mockClient = mockConvexReactClient()
@@ -109,12 +110,12 @@ const meta: Meta<typeof IndexFilters> = {
       ],
     },
     getValidatorForField: () => ({ type: "string" }),
-    onFiltersChange: () => {},
-    applyFiltersWithHistory: async () => {},
-    setDraftFilters: () => {},
-    onChangeOrder: () => {},
-    onChangeIndexFilter: () => {},
-    onError: () => {},
+    onFiltersChange: fn(),
+    applyFiltersWithHistory: fn(),
+    setDraftFilters: fn(),
+    onChangeOrder: fn(),
+    onChangeIndexFilter: fn(),
+    onError: fn(),
     hasInvalidFilters: false,
     invalidFilters: {},
   },

npm-packages/dashboard-common/src/features/data/components/DataFilters/IndexFilters.stories.tsx

@@ -1,10 +1,11 @@
 import { Meta, StoryObj } from "@storybook/nextjs";
 import { DateTimePicker } from "@common/features/data/components/FilterEditor/DateTimePicker";
+import { fn } from "storybook/test";
 
 export const Primary: Story = {
   args: {
     date: new Date(),
-    onChange: () => {},
+    onChange: fn(),
   },
 };
 

npm-packages/dashboard-common/src/features/data/components/FilterEditor/DateTimePicker.stories.tsx

@@ -5,6 +5,7 @@ import { FilterEditor } from "@common/features/data/components/FilterEditor/Filt
 import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
+import { fn } from "storybook/test";
 
 const mockClient = mockConvexReactClient()
   .registerQueryFake(udfs.listById.default, ({ ids }) => ids.map(() => null))
@@ -30,9 +31,9 @@ export const Editor: Story = {
   args: {
     fields: ["_id", "_creationTime", "myColumn"],
     defaultDocument: { myColumn: 0 },
-    onChange: () => {},
-    onDelete: () => {},
-    onApplyFilters: () => {},
-    onError: () => {},
+    onChange: fn(),
+    onDelete: fn(),
+    onApplyFilters: fn(),
+    onError: fn(),
   },
 };

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

@@ -7,6 +7,7 @@ import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
 import { Panel, PanelGroup } from "react-resizable-panels";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
+import { fn } from "storybook/test";
 
 const mockClient = mockConvexReactClient()
   .registerQueryFake(udfs.listById.default, ({ ids }) => ids.map(() => null))
@@ -17,8 +18,8 @@ const meta = {
   component: EditDocumentPanel,
   args: {
     tableName: "users",
-    onClose: () => {},
-    onSave: async () => {},
+    onClose: fn(),
+    onSave: fn(),
   },
   render: (args) => (
     <ConvexProvider client={mockClient}>