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

@@ -1,8 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ComponentError } from './ComponentError';
 
-export default {
+const meta = {
   title: 'owncast/Components/Component Error',
   component: ComponentError,
   parameters: {
@@ -12,31 +11,35 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ComponentError>;
+} satisfies Meta<typeof ComponentError>;
 
-const Template: ComponentStory<typeof ComponentError> = args => <ComponentError {...args} />;
+export default meta;
 
-export const DefaultMessage = Template.bind({});
-DefaultMessage.args = {
-  componentName: 'Test Component',
-};
-
-export const Error1 = Template.bind({});
-Error1.args = { message: 'This is a test error message.', componentName: 'Test Component' };
-
-export const WithDetails = Template.bind({});
-WithDetails.args = {
-  message: 'This is a test error message.',
-  componentName: 'Test Component',
-  details: 'Here are some additional details about the error.',
-};
-
-export const CanRetry = Template.bind({});
-CanRetry.args = {
-  message: 'This is a test error message.',
-  componentName: 'Test Component',
-  details: 'Here are some additional details about the error.',
-  retryFunction: () => {
-    console.log('retrying');
+export const DefaultMessage = {
+  args: {
+    componentName: 'Test Component',
+  },
+};
+
+export const Error1 = {
+  args: { message: 'This is a test error message.', componentName: 'Test Component' },
+};
+
+export const WithDetails = {
+  args: {
+    message: 'This is a test error message.',
+    componentName: 'Test Component',
+    details: 'Here are some additional details about the error.',
+  },
+};
+
+export const CanRetry = {
+  args: {
+    message: 'This is a test error message.',
+    componentName: 'Test Component',
+    details: 'Here are some additional details about the error.',
+    retryFunction: () => {
+      console.log('retrying');
+    },
   },
 };

web/components/ui/Footer/Footer.stories.tsx

@@ -1,22 +1,25 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { Footer } from './Footer';
 
-export default {
+const meta = {
   title: 'owncast/Layout/Footer',
   component: Footer,
   parameters: {},
-} as ComponentMeta<typeof Footer>;
+} satisfies Meta<typeof Footer>;
 
-const Template: ComponentStory<typeof Footer> = args => (
+export default meta;
+
+const Template: StoryFn<typeof Footer> = args => (
   <RecoilRoot>
     <Footer {...args} />
   </RecoilRoot>
 );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example = Template.bind({});
-Example.args = {
-  version: 'v1.2.3',
+export const Example = {
+  render: Template,
+
+  args: {
+    version: 'v1.2.3',
+  },
 };

web/components/ui/Header/Header.stories.tsx

@@ -1,30 +1,37 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { Header } from './Header';
 
-export default {
+const meta = {
   title: 'owncast/Layout/Header',
   component: Header,
   parameters: {
     chromatic: { diffThreshold: 0.75 },
   },
-} as ComponentMeta<typeof Header>;
+} satisfies Meta<typeof Header>;
 
-const Template: ComponentStory<typeof Header> = args => (
+export default meta;
+
+const Template: StoryFn<typeof Header> = args => (
   <RecoilRoot>
     <Header {...args} />
   </RecoilRoot>
 );
 
-export const ChatAvailable = Template.bind({});
-ChatAvailable.args = {
-  name: 'Example Stream Name',
-  chatAvailable: true,
+export const ChatAvailable = {
+  render: Template,
+
+  args: {
+    name: 'Example Stream Name',
+    chatAvailable: true,
+  },
 };
 
-export const ChatNotAvailable = Template.bind({});
-ChatNotAvailable.args = {
-  name: 'Example Stream Name',
-  chatAvailable: false,
+export const ChatNotAvailable = {
+  render: Template,
+
+  args: {
+    name: 'Example Stream Name',
+    chatAvailable: false,
+  },
 };

web/components/ui/Modal/Modal.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Modal } from './Modal';
 
-export default {
+const meta = {
   title: 'owncast/Modals/Container',
   component: Modal,
   parameters: {
@@ -12,23 +11,31 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Modal>;
+} satisfies Meta<typeof Modal>;
 
-const Template: ComponentStory<typeof Modal> = args => {
+export default meta;
+
+const Template: StoryFn<typeof Modal> = args => {
   const { children } = args;
   return <Modal {...args}>{children}</Modal>;
 };
 
-export const Example = Template.bind({});
-Example.args = {
-  title: 'Modal example with content nodes',
-  visible: true,
-  children: <div>Test 123</div>,
+export const Example = {
+  render: Template,
+
+  args: {
+    title: 'Modal example with content nodes',
+    visible: true,
+    children: <div>Test 123</div>,
+  },
 };
 
-export const UrlExample = Template.bind({});
-UrlExample.args = {
-  title: 'Modal example with URL',
-  visible: true,
-  url: 'https://owncast.online',
+export const UrlExample = {
+  render: Template,
+
+  args: {
+    title: 'Modal example with URL',
+    visible: true,
+    url: 'https://owncast.online',
+  },
 };

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-alert */
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { NotifyReminderPopup } from './NotifyReminderPopup';
 import Mock from '../../../stories/assets/mocks/notify-popup.png';
 
@@ -12,7 +11,7 @@ const Example = args => (
   </div>
 );
 
-export default {
+const meta = {
   title: 'owncast/Components/Notify Reminder',
   component: NotifyReminderPopup,
   parameters: {
@@ -27,22 +26,30 @@ Clicking it will make the notification modal display. Clicking the "X" will hide
       },
     },
   },
-} as ComponentMeta<typeof NotifyReminderPopup>;
+} satisfies Meta<typeof NotifyReminderPopup>;
 
-const Template: ComponentStory<typeof NotifyReminderPopup> = args => <Example {...args} />;
+export default meta;
 
-export const Active = Template.bind({});
-Active.args = {
-  open: true,
-  notificationClicked: () => {
-    alert('notification clicked');
-  },
-  notificationClosed: () => {
-    alert('notification closed');
+const Template: StoryFn<typeof NotifyReminderPopup> = args => <Example {...args} />;
+
+export const Active = {
+  render: Template,
+
+  args: {
+    open: true,
+    notificationClicked: () => {
+      alert('notification clicked');
+    },
+    notificationClosed: () => {
+      alert('notification closed');
+    },
   },
 };
 
-export const InActive = Template.bind({});
-InActive.args = {
-  open: false,
+export const InActive = {
+  render: Template,
+
+  args: {
+    open: false,
+  },
 };

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

web/components/ui/SocialLinks/SocialLinks.stories.tsx

@@ -1,39 +1,38 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { SocialLinks } from './SocialLinks';
 
-export default {
+const meta = {
   title: 'owncast/Components/Social links',
   component: SocialLinks,
   parameters: {},
-} as ComponentMeta<typeof SocialLinks>;
+} satisfies Meta<typeof SocialLinks>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof SocialLinks> = args => <SocialLinks {...args} />;
+export default meta;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Populated = Template.bind({});
-Populated.args = {
-  links: [
-    {
-      platform: 'github',
-      url: 'https://github.com/owncast/owncast',
-      icon: '/img/platformlogos/github.svg',
-    },
-    {
-      platform: 'Documentation',
-      url: 'https://owncast.online',
-      icon: '/img/platformlogos/link.svg',
-    },
-    {
-      platform: 'mastodon',
-      url: 'https://fosstodon.org/users/owncast',
-      icon: '/img/platformlogos/mastodon.svg',
-    },
-  ],
+export const Populated = {
+  args: {
+    links: [
+      {
+        platform: 'github',
+        url: 'https://github.com/owncast/owncast',
+        icon: '/img/platformlogos/github.svg',
+      },
+      {
+        platform: 'Documentation',
+        url: 'https://owncast.online',
+        icon: '/img/platformlogos/link.svg',
+      },
+      {
+        platform: 'mastodon',
+        url: 'https://fosstodon.org/users/owncast',
+        icon: '/img/platformlogos/mastodon.svg',
+      },
+    ],
+  },
 };
 
-export const Empty = Template.bind({});
-Empty.args = {
-  links: [],
+export const Empty = {
+  args: {
+    links: [],
+  },
 };

web/components/ui/Statusbar/StatusBar.stories.tsx

@@ -1,25 +1,26 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { subHours } from 'date-fns';
 import { Statusbar } from './Statusbar';
 
-export default {
+const meta = {
   title: 'owncast/Player/Status bar',
   component: Statusbar,
   parameters: {},
-} as ComponentMeta<typeof Statusbar>;
+} satisfies Meta<typeof Statusbar>;
 
-const Template: ComponentStory<typeof Statusbar> = args => <Statusbar {...args} />;
+export default meta;
 
-export const Online = Template.bind({});
-Online.args = {
-  online: true,
-  viewerCount: 42,
-  lastConnectTime: subHours(new Date(), 3),
+export const Online = {
+  args: {
+    online: true,
+    viewerCount: 42,
+    lastConnectTime: subHours(new Date(), 3),
+  },
 };
 
-export const Offline = Template.bind({});
-Offline.args = {
-  online: false,
-  lastDisconnectTime: subHours(new Date(), 3),
+export const Offline = {
+  args: {
+    online: false,
+    lastDisconnectTime: subHours(new Date(), 3),
+  },
 };

web/components/ui/followers/FollowerCollection/FollowerCollection.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 { action } from '@storybook/addon-actions';
 import { FollowerCollection } from './FollowerCollection';
@@ -258,15 +257,17 @@ const noFollowersMock = {
   ],
 };
 
-export default {
+const meta = {
   title: 'owncast/Components/Followers/Followers collection',
   component: FollowerCollection,
   parameters: {
     chromatic: { diffThreshold: 0.86 },
   },
-} as ComponentMeta<typeof FollowerCollection>;
+} satisfies Meta<typeof FollowerCollection>;
 
-const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
+export default meta;
+
+const Template: StoryFn<typeof FollowerCollection> = (args: object) => (
   <RecoilRoot>
     <FollowerCollection
       onFollowButtonClick={() => {
@@ -278,12 +279,18 @@ const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
   </RecoilRoot>
 );
 
-export const NoFollowers = Template.bind({});
-NoFollowers.parameters = {
-  fetchMock: noFollowersMock,
+export const NoFollowers = {
+  render: Template,
+
+  parameters: {
+    fetchMock: noFollowersMock,
+  },
 };
 
-export const Example = Template.bind({});
-Example.parameters = {
-  fetchMock: mocks,
+export const Example = {
+  render: Template,
+
+  parameters: {
+    fetchMock: mocks,
+  },
 };

web/components/ui/followers/SingleFollower/SingleFollower.stories.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { SingleFollower } from './SingleFollower';
 import SingleFollowerMock from '../../../../stories/assets/mocks/single-follower.png';
 
-export default {
+const meta = {
   title: 'owncast/Components/Followers/Single Follower',
   component: SingleFollower,
   parameters: {
@@ -17,17 +16,18 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SingleFollower>;
+} satisfies Meta<typeof SingleFollower>;
 
-const Template: ComponentStory<typeof SingleFollower> = args => <SingleFollower {...args} />;
+export default meta;
 
-export const Example = Template.bind({});
-Example.args = {
-  follower: {
-    name: 'John Doe',
-    description: 'User',
-    username: '@account@domain.tld',
-    image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-    link: 'https://yahoo.com',
+export const Example = {
+  args: {
+    follower: {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
   },
 };