Migrated Storybook notation from CSF2 to CSF3 (#3412)

* Migrate web action-buttons directory to CSF3 notation

* Migrate web chat directory to CSF3 notation

* Migrate web common directory to CSF3 notation

* Migrate web layout directory to CSF3 notation

* Migrate web modals directory to CSF3 notation

* Migrate web ui directory to CSF3 notation

* Migrate web video directory to CSF3 notation

* Migrate web stories directory to CSF3 notation

web/components/common/UserDropdown/UserDropdown.stories.tsx

@@ -1,15 +1,17 @@
-import React, { useEffect } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useEffect } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { UserDropdown } from './UserDropdown';
 import { CurrentUser } from '../../../interfaces/current-user';
 import { currentUserAtom } from '../../stores/ClientConfigStore';
 
-export default {
+const meta = {
   title: 'owncast/Components/User settings menu',
   component: UserDropdown,
   parameters: {},
-} as ComponentMeta<typeof UserDropdown>;
+} satisfies Meta<typeof UserDropdown>;
+
+export default meta;
 
 // This component uses Recoil internally so wrap it in a RecoilRoot.
 const Example = args => {
@@ -29,13 +31,16 @@ const Example = args => {
   return <UserDropdown id="user-menu" {...args} />;
 };
 
-const Template: ComponentStory<typeof UserDropdown> = args => (
+const Template: StoryFn<typeof UserDropdown> = args => (
   <RecoilRoot>
     <Example {...args} />
   </RecoilRoot>
 );
 
-export const ChatEnabled = Template.bind({});
-ChatEnabled.args = {
-  username: 'test-user',
+export const ChatEnabled = {
+  render: Template,
+
+  args: {
+    username: 'test-user',
+  },
 };