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/action-buttons/ActionButton/ActionButton.stories.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ActionButton } from './ActionButton';
 
-export default {
+const meta = {
   title: 'owncast/Components/Action Buttons/Single button',
   component: ActionButton,
   parameters: {
@@ -13,38 +12,45 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ActionButton>;
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
 
 const itemSelected = a => {
   console.log('itemSelected', a);
   action(a.title);
 };
 
-const Template: ComponentStory<typeof ActionButton> = args => (
+const Template: StoryFn<typeof ActionButton> = args => (
   <ActionButton externalActionSelected={itemSelected} {...args} />
 );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example1 = Template.bind({});
-Example1.args = {
-  action: {
-    url: 'https://owncast.online/docs',
-    title: 'Documentation',
-    description: 'Owncast Documentation',
-    icon: 'https://owncast.online/images/logo.svg',
-    color: '#5232c8',
-    openExternally: false,
+export const Example1 = {
+  render: Template,
+
+  args: {
+    action: {
+      url: 'https://owncast.online/docs',
+      title: 'Documentation',
+      description: 'Owncast Documentation',
+      icon: 'https://owncast.online/images/logo.svg',
+      color: '#5232c8',
+      openExternally: false,
+    },
   },
 };
 
-export const Example2 = Template.bind({});
-Example2.args = {
-  action: {
-    url: 'https://opencollective.com/embed/owncast/donate',
-    title: 'Support Owncast',
-    description: 'Contribute to Owncast',
-    icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
-    color: '#2b4863',
-    openExternally: false,
+export const Example2 = {
+  render: Template,
+
+  args: {
+    action: {
+      url: 'https://opencollective.com/embed/owncast/donate',
+      title: 'Support Owncast',
+      description: 'Contribute to Owncast',
+      icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+      color: '#2b4863',
+      openExternally: false,
+    },
   },
 };

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.stories.tsx

@@ -1,20 +1,21 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ActionButtonMenu } from './ActionButtonMenu';
 
-export default {
+const meta = {
   title: 'owncast/Components/Action Buttons/Action Menu',
   component: ActionButtonMenu,
   parameters: {},
-} as ComponentMeta<typeof ActionButtonMenu>;
+} satisfies Meta<typeof ActionButtonMenu>;
+
+export default meta;
 
 const itemSelected = a => {
   console.log('itemSelected', a);
   action(a.title);
 };
 
-const Template: ComponentStory<typeof ActionButtonMenu> = args => (
+const Template: StoryFn<typeof ActionButtonMenu> = args => (
   <ActionButtonMenu {...args} externalActionSelected={a => itemSelected(a)} />
 );
 
@@ -37,26 +38,38 @@ const actions = [
   },
 ];
 
-export const Example = Template.bind({});
-Example.args = {
-  actions,
+export const Example = {
+  render: Template,
+
+  args: {
+    actions,
+  },
 };
 
-export const ShowFollowExample = Template.bind({});
-ShowFollowExample.args = {
-  actions,
-  showFollowItem: true,
+export const ShowFollowExample = {
+  render: Template,
+
+  args: {
+    actions,
+    showFollowItem: true,
+  },
 };
 
-export const ShowNotifyExample = Template.bind({});
-ShowNotifyExample.args = {
-  actions,
-  showNotifyItem: true,
+export const ShowNotifyExample = {
+  render: Template,
+
+  args: {
+    actions,
+    showNotifyItem: true,
+  },
 };
 
-export const ShowNotifyAndFollowExample = Template.bind({});
-ShowNotifyAndFollowExample.args = {
-  actions,
-  showNotifyItem: true,
-  showFollowItem: true,
+export const ShowNotifyAndFollowExample = {
+  render: Template,
+
+  args: {
+    actions,
+    showNotifyItem: true,
+    showFollowItem: true,
+  },
 };

web/components/action-buttons/ActionButtonRow/ActionButtonRow.stories.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ActionButtonRow } from './ActionButtonRow';
 import { ActionButton } from '../ActionButton/ActionButton';
 
-export default {
+const meta = {
   title: 'owncast/Components/Action Buttons/Buttons Row',
   component: ActionButtonRow,
   parameters: {
@@ -15,15 +14,15 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ActionButtonRow>;
+} satisfies Meta<typeof ActionButtonRow>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ActionButtonRow> = args => {
+export default meta;
+
+const Template: StoryFn<typeof ActionButtonRow> = args => {
   const { buttons } = args as any;
   return <ActionButtonRow>{buttons}</ActionButtonRow>;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const actions = [
   {
     url: 'https://owncast.online/docs',
@@ -49,7 +48,11 @@ const itemSelected = a => {
 };
 
 const buttons = actions.map(a => <ActionButton externalActionSelected={itemSelected} action={a} />);
-export const Example1 = Template.bind({});
-Example1.args = {
-  buttons,
+
+export const Example1 = {
+  render: Template,
+
+  args: {
+    buttons,
+  },
 };