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

@@ -1,10 +1,9 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { OfflineBanner } from './OfflineBanner';
 import OfflineState from '../../../stories/assets/mocks/offline-state.png';
 
-export default {
+const meta = {
   title: 'owncast/Layout/Offline Banner',
   component: OfflineBanner,
   parameters: {
@@ -19,56 +18,76 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof OfflineBanner>;
+} satisfies Meta<typeof OfflineBanner>;
 
-const Template: ComponentStory<typeof OfflineBanner> = args => (
+export default meta;
+
+const Template: StoryFn<typeof OfflineBanner> = args => (
   <RecoilRoot>
     <OfflineBanner {...args} />
   </RecoilRoot>
 );
 
-export const ExampleDefaultWithNotifications = Template.bind({});
-ExampleDefaultWithNotifications.args = {
-  streamName: 'Cool stream 42',
-  notificationsEnabled: true,
-  lastLive: new Date(),
+export const ExampleDefaultWithNotifications = {
+  render: Template,
+
+  args: {
+    streamName: 'Cool stream 42',
+    notificationsEnabled: true,
+    lastLive: new Date(),
+  },
 };
 
-export const ExampleDefaultWithDateAndFediverse = Template.bind({});
-ExampleDefaultWithDateAndFediverse.args = {
-  streamName: 'Dull stream 31337',
-  lastLive: new Date(),
-  notificationsEnabled: false,
-  fediverseAccount: 'streamer@coolstream.biz',
+export const ExampleDefaultWithDateAndFediverse = {
+  render: Template,
+
+  args: {
+    streamName: 'Dull stream 31337',
+    lastLive: new Date(),
+    notificationsEnabled: false,
+    fediverseAccount: 'streamer@coolstream.biz',
+  },
 };
 
-export const ExampleCustomWithDateAndNotifications = Template.bind({});
-ExampleCustomWithDateAndNotifications.args = {
-  streamName: 'Dull stream 31337',
-  customText:
-    'This is some example offline text that a streamer can leave for a visitor of the page.',
-  lastLive: new Date(),
-  notificationsEnabled: true,
+export const ExampleCustomWithDateAndNotifications = {
+  render: Template,
+
+  args: {
+    streamName: 'Dull stream 31337',
+    customText:
+      'This is some example offline text that a streamer can leave for a visitor of the page.',
+    lastLive: new Date(),
+    notificationsEnabled: true,
+  },
 };
 
-export const ExampleDefaultWithNotificationsAndFediverse = Template.bind({});
-ExampleDefaultWithNotificationsAndFediverse.args = {
-  streamName: 'Cool stream 42',
-  notificationsEnabled: true,
-  fediverseAccount: 'streamer@coolstream.biz',
-  lastLive: new Date(),
+export const ExampleDefaultWithNotificationsAndFediverse = {
+  render: Template,
+
+  args: {
+    streamName: 'Cool stream 42',
+    notificationsEnabled: true,
+    fediverseAccount: 'streamer@coolstream.biz',
+    lastLive: new Date(),
+  },
 };
 
-export const ExampleDefaultWithoutNotifications = Template.bind({});
-ExampleDefaultWithoutNotifications.args = {
-  streamName: 'Cool stream 42',
-  notificationsEnabled: false,
-  lastLive: new Date(),
+export const ExampleDefaultWithoutNotifications = {
+  render: Template,
+
+  args: {
+    streamName: 'Cool stream 42',
+    notificationsEnabled: false,
+    lastLive: new Date(),
+  },
 };
 
-export const ExampleCustomTextWithoutNotifications = Template.bind({});
-ExampleCustomTextWithoutNotifications.args = {
-  streamName: 'Dull stream 31337',
-  customText:
-    'This is some example offline text that a streamer can leave for a visitor of the page.',
+export const ExampleCustomTextWithoutNotifications = {
+  render: Template,
+
+  args: {
+    streamName: 'Dull stream 31337',
+    customText:
+      'This is some example offline text that a streamer can leave for a visitor of the page.',
+  },
 };