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/ContentHeader/ContentHeader.stories.tsx

@@ -1,76 +1,77 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ContentHeader } from './ContentHeader';
 
-export default {
+const meta = {
   title: 'owncast/Components/Content Header',
   component: ContentHeader,
   parameters: {},
-} as ComponentMeta<typeof ContentHeader>;
+} satisfies Meta<typeof ContentHeader>;
 
-const Template: ComponentStory<typeof ContentHeader> = args => <ContentHeader {...args} />;
+export default meta;
 
-export const Example = Template.bind({});
-Example.args = {
-  name: 'My Awesome Owncast Stream',
-  summary: 'A calvacade of glorious sights and sounds',
-  tags: ['word', 'tag with spaces', 'music'],
-  logo: 'https://watch.owncast.online/logo',
-  links: [
-    {
-      platform: 'github',
-      url: 'https://github.com/owncast/owncast',
-      icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
-    },
-    {
-      platform: 'Documentation',
-      url: 'https://owncast.online',
-      icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
-    },
-    {
-      platform: 'mastodon',
-      url: 'https://fosstodon.org/users/owncast',
-      icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
-    },
-  ],
+export const Example = {
+  args: {
+    name: 'My Awesome Owncast Stream',
+    summary: 'A calvacade of glorious sights and sounds',
+    tags: ['word', 'tag with spaces', 'music'],
+    logo: 'https://watch.owncast.online/logo',
+    links: [
+      {
+        platform: 'github',
+        url: 'https://github.com/owncast/owncast',
+        icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
+      },
+      {
+        platform: 'Documentation',
+        url: 'https://owncast.online',
+        icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
+      },
+      {
+        platform: 'mastodon',
+        url: 'https://fosstodon.org/users/owncast',
+        icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
+      },
+    ],
+  },
 };
 
-export const LongContent = Template.bind({});
-LongContent.args = {
-  name: 'My Awesome Owncast Stream, streaming the best of streams and some lorem ipsum too',
-  summary:
-    'A calvacade of glorious sights and sounds. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  tags: [
-    'word',
-    'tag with spaces',
-    'music',
-    'more tags',
-    'a bunch',
-    'keep going',
-    'and more',
-    'just a few more',
-    'video games',
-    'things',
-    'stuff',
-    'ok some more',
-    'this should do it',
-  ],
-  logo: 'https://watch.owncast.online/logo',
-  links: [
-    {
-      platform: 'github',
-      url: 'https://github.com/owncast/owncast',
-      icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
-    },
-    {
-      platform: 'Documentation',
-      url: 'https://owncast.online',
-      icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
-    },
-    {
-      platform: 'mastodon',
-      url: 'https://fosstodon.org/users/owncast',
-      icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
-    },
-  ],
+export const LongContent = {
+  args: {
+    name: 'My Awesome Owncast Stream, streaming the best of streams and some lorem ipsum too',
+    summary:
+      'A calvacade of glorious sights and sounds. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    tags: [
+      'word',
+      'tag with spaces',
+      'music',
+      'more tags',
+      'a bunch',
+      'keep going',
+      'and more',
+      'just a few more',
+      'video games',
+      'things',
+      'stuff',
+      'ok some more',
+      'this should do it',
+    ],
+    logo: 'https://watch.owncast.online/logo',
+    links: [
+      {
+        platform: 'github',
+        url: 'https://github.com/owncast/owncast',
+        icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
+      },
+      {
+        platform: 'Documentation',
+        url: 'https://owncast.online',
+        icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
+      },
+      {
+        platform: 'mastodon',
+        url: 'https://fosstodon.org/users/owncast',
+        icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
+      },
+    ],
+  },
 };

web/components/common/OwncastLogo/OwncastLogo.stories.tsx

@@ -1,25 +1,24 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { OwncastLogo } from './OwncastLogo';
 
-export default {
+const meta = {
   title: 'owncast/Components/Header Logo',
   component: OwncastLogo,
   parameters: {
     chromatic: { diffThreshold: 0.8 },
   },
-} as ComponentMeta<typeof OwncastLogo>;
+} satisfies Meta<typeof OwncastLogo>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof OwncastLogo> = args => <OwncastLogo {...args} />;
+export default meta;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Logo = Template.bind({});
-Logo.args = {
-  url: '/logo',
+export const Logo = {
+  args: {
+    url: '/logo',
+  },
 };
 
-export const DemoServer = Template.bind({});
-DemoServer.args = {
-  url: 'https://watch.owncast.online/logo',
+export const DemoServer = {
+  args: {
+    url: 'https://watch.owncast.online/logo',
+  },
 };

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',
+  },
 };