Upgrade Storybook

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/components/AddUserToAnotherGroupModal.stories.tsx

@@ -1,8 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
-import type { Meta, Story } from '@storybook/react';
+import React, { useContext } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 import type { Props } from './AddUserToAnotherGroupModal';
 import enMessages from '../../_locales/en/messages.json';
@@ -19,28 +20,25 @@ const i18n = setupI18n('en', enMessages);
 export default {
   title: 'Components/AddUserToAnotherGroupModal',
   component: AddUserToAnotherGroupModal,
-  argTypes: {
-    candidateConversations: {
-      defaultValue: Array.from(Array(100), () => getDefaultGroup()),
-    },
-    contact: {
-      defaultValue: getDefaultConversation(),
-    },
-    i18n: {
-      defaultValue: i18n,
-    },
-    addMembersToGroup: { action: true },
-    toggleAddUserToAnotherGroupModal: { action: true },
+  args: {
+    i18n,
+    candidateConversations: Array.from(Array(100), () => getDefaultGroup()),
+    contact: getDefaultConversation(),
   },
-} as Meta;
+} satisfies Meta<Props>;
 
 // eslint-disable-next-line react/function-component-definition
-const Template: Story<Props> = args => (
-  <AddUserToAnotherGroupModal
-    {...args}
-    theme={React.useContext(StorybookThemeContext)}
-  />
-);
+const Template: StoryFn<Props> = args => {
+  return (
+    <AddUserToAnotherGroupModal
+      {...args}
+      addMembersToGroup={action('addMembersToGroup')}
+      toggleAddUserToAnotherGroupModal={action(
+        'toggleAddUserToAnotherGroupModal'
+      )}
+      theme={useContext(StorybookThemeContext)}
+    />
+  );
+};
 
 export const Modal = Template.bind({});
-Modal.args = {};