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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { OwncastPlayer } from './OwncastPlayer';
 
@@ -9,7 +8,7 @@ const streams = {
   localhost: `http://localhost:8080/hls/stream.m3u8`,
 };
 
-export default {
+const meta = {
   title: 'owncast/Player/Player',
   component: OwncastPlayer,
   argTypes: {
@@ -22,17 +21,22 @@ export default {
     },
   },
   parameters: {},
-} as ComponentMeta<typeof OwncastPlayer>;
+} satisfies Meta<typeof OwncastPlayer>;
 
-const Template: ComponentStory<typeof OwncastPlayer> = args => (
+export default meta;
+
+const Template: StoryFn<typeof OwncastPlayer> = args => (
   <RecoilRoot>
     <OwncastPlayer {...args} />
   </RecoilRoot>
 );
 
-export const LiveDemo = Template.bind({});
-LiveDemo.args = {
-  online: true,
-  source: 'https://watch.owncast.online/hls/stream.m3u8',
-  title: 'Stream title',
+export const LiveDemo = {
+  render: Template,
+
+  args: {
+    online: true,
+    source: 'https://watch.owncast.online/hls/stream.m3u8',
+    title: 'Stream title',
+  },
 };

web/components/video/VideoPoster/VideoPoster.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { VideoPoster } from './VideoPoster';
 
-export default {
+const meta = {
   title: 'owncast/Player/Video poster',
   component: VideoPoster,
   parameters: {
@@ -17,29 +16,30 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof VideoPoster>;
+} satisfies Meta<typeof VideoPoster>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof VideoPoster> = args => <VideoPoster {...args} />;
+export default meta;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example1 = Template.bind({});
-Example1.args = {
-  initialSrc: 'https://watch.owncast.online/logo',
-  src: 'https://watch.owncast.online/thumbnail.jpg',
-  online: true,
+export const Example1 = {
+  args: {
+    initialSrc: 'https://watch.owncast.online/logo',
+    src: 'https://watch.owncast.online/thumbnail.jpg',
+    online: true,
+  },
 };
 
-export const Example2 = Template.bind({});
-Example2.args = {
-  initialSrc: 'https://listen.batstationrad.io/logo',
-  src: 'https://listen.batstationrad.io//thumbnail.jpg',
-  online: true,
+export const Example2 = {
+  args: {
+    initialSrc: 'https://listen.batstationrad.io/logo',
+    src: 'https://listen.batstationrad.io//thumbnail.jpg',
+    online: true,
+  },
 };
 
-export const Offline = Template.bind({});
-Offline.args = {
-  initialSrc: 'https://watch.owncast.online/logo',
-  src: 'https://watch.owncast.online/thumbnail.jpg',
-  online: false,
+export const Offline = {
+  args: {
+    initialSrc: 'https://watch.owncast.online/logo',
+    src: 'https://watch.owncast.online/thumbnail.jpg',
+    online: false,
+  },
 };