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
2023-11-07 12:35:05 +09:00
parent b08511b9d1
commit 4f078e1ee4
44 changed files with 975 additions and 789 deletions
--- a/web/components/chat/ChatActionMessage/ChatActionMessage.stories.tsx
+++ b/web/components/chat/ChatActionMessage/ChatActionMessage.stories.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatActionMessage } from './ChatActionMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Chat action',
  component: ChatActionMessage,
  parameters: {
@@ -17,11 +16,12 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatActionMessage>;
+} satisfies Meta<typeof ChatActionMessage>;

-const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage {...args} />;
+export default meta;

-export const Basic = Template.bind({});
-Basic.args = {
-  body: 'This is a basic action message.',
+export const Basic = {
+  args: {
+    body: 'This is a basic action message.',
+  },
 };
--- a/web/components/chat/ChatContainer/ChatContainer.stories.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.stories.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { ChatContainer } from './ChatContainer';
 import { ChatMessage } from '../../../interfaces/chat-message.model';

-export default {
+const meta = {
  title: 'owncast/Chat/Chat messages container',
  component: ChatContainer,
  parameters: {
@@ -19,7 +19,9 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatContainer>;
+} satisfies Meta<typeof ChatContainer>;
+
+export default meta;

 const testMessages = `[
 		{
@@ -586,37 +588,46 @@ const AddMessagesChatExample = args => {
  );
 };

-const Template: ComponentStory<typeof ChatContainer> = args => <AddMessagesChatExample {...args} />;
+const Template: StoryFn<typeof ChatContainer> = args => <AddMessagesChatExample {...args} />;

-export const Example = Template.bind({});
-Example.args = {
-  loading: false,
-  messages,
-  usernameToHighlight: 'testuser',
-  chatUserId: 'testuser',
-  isModerator: true,
-  showInput: true,
-  chatAvailable: true,
+export const Example = {
+  render: Template,
+
+  args: {
+    loading: false,
+    messages,
+    usernameToHighlight: 'testuser',
+    chatUserId: 'testuser',
+    isModerator: true,
+    showInput: true,
+    chatAvailable: true,
+  },
 };

-export const ChatDisabled = Template.bind({});
-ChatDisabled.args = {
-  loading: false,
-  messages,
-  usernameToHighlight: 'testuser',
-  chatUserId: 'testuser',
-  isModerator: true,
-  showInput: true,
-  chatAvailable: false,
+export const ChatDisabled = {
+  render: Template,
+
+  args: {
+    loading: false,
+    messages,
+    usernameToHighlight: 'testuser',
+    chatUserId: 'testuser',
+    isModerator: true,
+    showInput: true,
+    chatAvailable: false,
+  },
 };

-export const SingleMessage = Template.bind({});
-SingleMessage.args = {
-  loading: false,
-  messages: [messages[0]],
-  usernameToHighlight: 'testuser',
-  chatUserId: 'testuser',
-  isModerator: true,
-  showInput: true,
-  chatAvailable: true,
+export const SingleMessage = {
+  render: Template,
+
+  args: {
+    loading: false,
+    messages: [messages[0]],
+    usernameToHighlight: 'testuser',
+    chatUserId: 'testuser',
+    isModerator: true,
+    showInput: true,
+    chatAvailable: true,
+  },
 };
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.stories.tsx
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.stories.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatJoinMessage } from './ChatJoinMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Chat Join',
  component: ChatJoinMessage,
  argTypes: {
@@ -23,20 +22,22 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatJoinMessage>;
+} satisfies Meta<typeof ChatJoinMessage>;

-const Template: ComponentStory<typeof ChatJoinMessage> = args => <ChatJoinMessage {...args} />;
+export default meta;

-export const Regular = Template.bind({});
-Regular.args = {
-  displayName: 'RandomChatter',
-  isAuthorModerator: false,
-  userColor: 3,
+export const Regular = {
+  args: {
+    displayName: 'RandomChatter',
+    isAuthorModerator: false,
+    userColor: 3,
+  },
 };

-export const Moderator = Template.bind({});
-Moderator.args = {
-  displayName: 'RandomChatter',
-  isAuthorModerator: true,
-  userColor: 2,
+export const Moderator = {
+  args: {
+    displayName: 'RandomChatter',
+    isAuthorModerator: true,
+    userColor: 2,
+  },
 };
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.stories.tsx
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.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 { ChatModerationActionMenu } from './ChatModerationActionMenu';

@@ -64,7 +63,7 @@ const mocks = {
  ],
 };

-export default {
+const meta = {
  title: 'owncast/Chat/Moderation menu',
  component: ChatModerationActionMenu,
  parameters: {
@@ -79,10 +78,11 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatModerationActionMenu>;
+} satisfies Meta<typeof ChatModerationActionMenu>;

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatModerationActionMenu> = () => (
+export default meta;
+
+const Template: StoryFn<typeof ChatModerationActionMenu> = () => (
  <RecoilRoot>
    <ChatModerationActionMenu
      accessToken="abc123"
@@ -93,5 +93,6 @@ const Template: ComponentStory<typeof ChatModerationActionMenu> = () => (
  </RecoilRoot>
 );

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const Basic = {
+  render: Template,
+};
--- a/web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.stories.tsx
+++ b/web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.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 { ChatModerationDetailsModal } from './ChatModerationDetailsModal';

@@ -64,7 +63,7 @@ const mocks = {
  ],
 };

-export default {
+const meta = {
  title: 'owncast/Chat/Moderation modal',
  component: ChatModerationDetailsModal,
  parameters: {
@@ -79,14 +78,16 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatModerationDetailsModal>;
+} satisfies Meta<typeof ChatModerationDetailsModal>;

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatModerationDetailsModal> = () => (
+export default meta;
+
+const Template: StoryFn<typeof ChatModerationDetailsModal> = () => (
  <RecoilRoot>
    <ChatModerationDetailsModal userId="testuser123" accessToken="fakeaccesstoken4839" />
  </RecoilRoot>
 );

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example = Template.bind({});
+export const Example = {
+  render: Template,
+};
--- a/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.stories.tsx
+++ b/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.stories.tsx
@@ -1,17 +1,12 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatModeratorNotification } from './ChatModeratorNotification';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Moderation Role Notification',
  component: ChatModeratorNotification,
  parameters: {},
-} as ComponentMeta<typeof ChatModeratorNotification>;
+} satisfies Meta<typeof ChatModeratorNotification>;

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatModeratorNotification> = (args: object) => (
-  <ChatModeratorNotification {...args} />
-);
+export default meta;

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const Basic = {};
--- a/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.stories.tsx
+++ b/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.stories.tsx
@@ -1,23 +1,21 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatNameChangeMessage } from './ChatNameChangeMessage';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Chat name change',
  component: ChatNameChangeMessage,
-} as ComponentMeta<typeof ChatNameChangeMessage>;
+} satisfies Meta<typeof ChatNameChangeMessage>;

-const Template: ComponentStory<typeof ChatNameChangeMessage> = args => (
-  <ChatNameChangeMessage {...args} />
-);
+export default meta;

-export const Basic = Template.bind({});
-Basic.args = {
-  message: {
-    oldName: 'JohnnyOldName',
-    user: {
-      displayName: 'JohnnyNewName',
-      displayColor: '3',
+export const Basic = {
+  args: {
+    message: {
+      oldName: 'JohnnyOldName',
+      user: {
+        displayName: 'JohnnyNewName',
+        displayColor: '3',
+      },
    },
  },
 };
--- a/web/components/chat/ChatPartMessage/ChatPartMessage.stories.tsx
+++ b/web/components/chat/ChatPartMessage/ChatPartMessage.stories.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatPartMessage } from './ChatPartMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Chat Part',
  component: ChatPartMessage,
  argTypes: {
@@ -23,20 +22,22 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatPartMessage>;
+} satisfies Meta<typeof ChatPartMessage>;

-const Template: ComponentStory<typeof ChatPartMessage> = args => <ChatPartMessage {...args} />;
+export default meta;

-export const Regular = Template.bind({});
-Regular.args = {
-  displayName: 'RandomChatter',
-  isAuthorModerator: false,
-  userColor: 3,
+export const Regular = {
+  args: {
+    displayName: 'RandomChatter',
+    isAuthorModerator: false,
+    userColor: 3,
+  },
 };

-export const Moderator = Template.bind({});
-Moderator.args = {
-  displayName: 'RandomChatter',
-  isAuthorModerator: true,
-  userColor: 2,
+export const Moderator = {
+  args: {
+    displayName: 'RandomChatter',
+    isAuthorModerator: true,
+    userColor: 2,
+  },
 };
--- a/web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx
+++ b/web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx
@@ -1,66 +1,70 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatSocialMessage } from './ChatSocialMessage';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Social-fediverse event',
  component: ChatSocialMessage,
  parameters: {},
-} as ComponentMeta<typeof ChatSocialMessage>;
+} satisfies Meta<typeof ChatSocialMessage>;

-const Template: ComponentStory<typeof ChatSocialMessage> = args => <ChatSocialMessage {...args} />;
+export default meta;

-export const Follow = Template.bind({});
-Follow.args = {
-  message: {
-    type: 'FEDIVERSE_ENGAGEMENT_FOLLOW',
-    body: '<p>james followed this live stream.</p>',
-    title: 'james@mastodon.social',
-    image: 'https://mastodon.social/avatars/original/missing.png',
-    link: 'https://mastodon.social/@james',
+export const Follow = {
+  args: {
+    message: {
+      type: 'FEDIVERSE_ENGAGEMENT_FOLLOW',
+      body: '<p>james followed this live stream.</p>',
+      title: 'james@mastodon.social',
+      image: 'https://mastodon.social/avatars/original/missing.png',
+      link: 'https://mastodon.social/@james',
+    },
  },
 };

-export const Like = Template.bind({});
-Like.args = {
-  message: {
-    type: 'FEDIVERSE_ENGAGEMENT_LIKE',
-    body: '<p>james liked that this stream went live.</p>',
-    title: 'james@mastodon.social',
-    image: 'https://mastodon.social/avatars/original/missing.png',
-    link: 'https://mastodon.social/@james',
+export const Like = {
+  args: {
+    message: {
+      type: 'FEDIVERSE_ENGAGEMENT_LIKE',
+      body: '<p>james liked that this stream went live.</p>',
+      title: 'james@mastodon.social',
+      image: 'https://mastodon.social/avatars/original/missing.png',
+      link: 'https://mastodon.social/@james',
+    },
  },
 };

-export const Repost = Template.bind({});
-Repost.args = {
-  message: {
-    type: 'FEDIVERSE_ENGAGEMENT_REPOST',
-    body: '<p>james shared this stream with their followers.</p>',
-    title: 'james@mastodon.social',
-    image: 'https://mastodon.social/avatars/original/missing.png',
-    link: 'https://mastodon.social/@james',
+export const Repost = {
+  args: {
+    message: {
+      type: 'FEDIVERSE_ENGAGEMENT_REPOST',
+      body: '<p>james shared this stream with their followers.</p>',
+      title: 'james@mastodon.social',
+      image: 'https://mastodon.social/avatars/original/missing.png',
+      link: 'https://mastodon.social/@james',
+    },
  },
 };

-export const LongAccountName = Template.bind({});
-LongAccountName.args = {
-  message: {
-    type: 'FEDIVERSE_ENGAGEMENT_REPOST',
-    body: '<p>james shared this stream with their followers.</p>',
-    title: 'littlejimmywilliams@technology.biz.net.org.technology.gov',
-    image: 'https://mastodon.social/avatars/original/missing.png',
-    link: 'https://mastodon.social/@james',
+export const LongAccountName = {
+  args: {
+    message: {
+      type: 'FEDIVERSE_ENGAGEMENT_REPOST',
+      body: '<p>james shared this stream with their followers.</p>',
+      title: 'littlejimmywilliams@technology.biz.net.org.technology.gov',
+      image: 'https://mastodon.social/avatars/original/missing.png',
+      link: 'https://mastodon.social/@james',
+    },
  },
 };

-export const InvalidAvatarImage = Template.bind({});
-InvalidAvatarImage.args = {
-  message: {
-    type: 'FEDIVERSE_ENGAGEMENT_REPOST',
-    body: '<p>james shared this stream with their followers.</p>',
-    title: 'james@mastodon.social',
-    image: 'https://xx.xx/avatars/original/missing.png',
-    link: 'https://mastodon.social/@james',
+export const InvalidAvatarImage = {
+  args: {
+    message: {
+      type: 'FEDIVERSE_ENGAGEMENT_REPOST',
+      body: '<p>james shared this stream with their followers.</p>',
+      title: 'james@mastodon.social',
+      image: 'https://xx.xx/avatars/original/missing.png',
+      link: 'https://mastodon.social/@james',
+    },
  },
 };
--- a/web/components/chat/ChatSystemMessage/ChatSystemMessage.stories.tsx
+++ b/web/components/chat/ChatSystemMessage/ChatSystemMessage.stories.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ChatSystemMessage } from './ChatSystemMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-system.png';
 import { ChatMessage } from '../../../interfaces/chat-message.model';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/System',
  component: ChatSystemMessage,
  parameters: {
@@ -18,9 +17,9 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatSystemMessage>;
+} satisfies Meta<typeof ChatSystemMessage>;

-const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage {...args} />;
+export default meta;

 const message: ChatMessage = JSON.parse(`{
  "type": "SYSTEM",
@@ -34,14 +33,15 @@ const message: ChatMessage = JSON.parse(`{
  },
  "body": "Test system message from the chat server."}`);

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
-Basic.args = {
-  message,
+export const Basic = {
+  args: {
+    message,
+  },
 };

-export const HighlightExample = Template.bind({});
-HighlightExample.args = {
-  message,
-  highlightString: 'chat',
+export const HighlightExample = {
+  args: {
+    message,
+    highlightString: 'chat',
+  },
 };
--- a/web/components/chat/ChatTextField/ChatTextField.stories.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.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 { ChatTextField } from './ChatTextField';
 import Mockup from '../../../stories/assets/mocks/chatinput-mock.png';
@@ -28,7 +27,7 @@ const mocks = {
  ],
 };

-export default {
+const meta = {
  title: 'owncast/Chat/Input text field',
  component: ChatTextField,
  parameters: {
@@ -48,43 +47,54 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatTextField>;
+} satisfies Meta<typeof ChatTextField>;

-const Template: ComponentStory<typeof ChatTextField> = args => (
+export default meta;
+
+const Template: StoryFn<typeof ChatTextField> = args => (
  <RecoilRoot>
    <ChatTextField {...args} />
  </RecoilRoot>
 );

-export const Example = Template.bind({});
-Example.args = {
-  enabled: true,
+export const Example = {
+  render: Template,
+
+  args: {
+    enabled: true,
+  },
 };

-export const LongerMessage = Template.bind({});
-LongerMessage.args = {
-  enabled: true,
-  defaultText:
-    'Lorem ipsum dolor sit amet,  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-};
+export const LongerMessage = {
+  render: Template,

-LongerMessage.parameters = {
-  docs: {
-    description: {
-      story: 'Should display two lines of text and scroll to display more.',
+  args: {
+    enabled: true,
+    defaultText:
+      'Lorem ipsum dolor sit amet,  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: 'Should display two lines of text and scroll to display more.',
+      },
    },
  },
 };

-export const DisabledChat = Template.bind({});
-DisabledChat.args = {
-  enabled: false,
-};
+export const DisabledChat = {
+  render: Template,

-DisabledChat.parameters = {
-  docs: {
-    description: {
-      story: 'Should not allow you to type anything and should state that chat is disabled.',
+  args: {
+    enabled: false,
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: 'Should not allow you to type anything and should state that chat is disabled.',
+      },
    },
  },
 };
--- a/web/components/chat/ChatUserBadge/ChatUserBadge.stories.tsx
+++ b/web/components/chat/ChatUserBadge/ChatUserBadge.stories.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { ChatUserBadge } from './ChatUserBadge';
 import { ModerationBadge } from './ModerationBadge';
 import { AuthedUserBadge } from './AuthedUserBadge';
 import { BotUserBadge } from './BotUserBadge';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/User Flag',
  component: ChatUserBadge,
  argTypes: {
@@ -14,36 +13,43 @@ export default {
      control: { type: 'select' },
    },
  },
-} as ComponentMeta<typeof ChatUserBadge>;
+} satisfies Meta<typeof ChatUserBadge>;

-const Template: ComponentStory<typeof ChatUserBadge> = args => <ChatUserBadge {...args} />;
-const ModerationTemplate: ComponentStory<typeof ModerationBadge> = args => (
-  <ModerationBadge {...args} />
-);
+export default meta;

-const AuthedTemplate: ComponentStory<typeof ModerationBadge> = args => (
-  <AuthedUserBadge {...args} />
-);
+const ModerationTemplate: StoryFn<typeof ModerationBadge> = args => <ModerationBadge {...args} />;

-const BotTemplate: ComponentStory<typeof BotUserBadge> = args => <BotUserBadge {...args} />;
+const AuthedTemplate: StoryFn<typeof ModerationBadge> = args => <AuthedUserBadge {...args} />;

-export const Authenticated = AuthedTemplate.bind({});
-Authenticated.args = {
-  userColor: '3',
+const BotTemplate: StoryFn<typeof BotUserBadge> = args => <BotUserBadge {...args} />;
+
+export const Authenticated = {
+  render: AuthedTemplate,
+
+  args: {
+    userColor: '3',
+  },
 };

-export const Moderator = ModerationTemplate.bind({});
-Moderator.args = {
-  userColor: '5',
+export const Moderator = {
+  render: ModerationTemplate,
+
+  args: {
+    userColor: '5',
+  },
 };

-export const Bot = BotTemplate.bind({});
-Bot.args = {
-  userColor: '7',
+export const Bot = {
+  render: BotTemplate,
+
+  args: {
+    userColor: '7',
+  },
 };

-export const Generic = Template.bind({});
-Generic.args = {
-  badge: '?',
-  userColor: '6',
+export const Generic = {
+  args: {
+    badge: '?',
+    userColor: '6',
+  },
 };
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.stories.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.stories.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { ChatUserMessage } from './ChatUserMessage';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import Mock from '../../../stories/assets/mocks/chatmessage-user.png';

-export default {
+const meta = {
  title: 'owncast/Chat/Messages/Standard user',
  component: ChatUserMessage,
  parameters: {
@@ -20,9 +19,11 @@ export default {
      },
    },
  },
-} as ComponentMeta<typeof ChatUserMessage>;
+} satisfies Meta<typeof ChatUserMessage>;

-const Template: ComponentStory<typeof ChatUserMessage> = args => (
+export default meta;
+
+const Template: StoryFn<typeof ChatUserMessage> = args => (
  <RecoilRoot>
    <ChatUserMessage {...args} />
  </RecoilRoot>
@@ -105,48 +106,69 @@ const botUserMessage: ChatMessage = JSON.parse(`{
 				},
 				"body": "I am a bot."}`);

-export const WithoutModeratorMenu = Template.bind({});
-WithoutModeratorMenu.args = {
-  message: standardMessage,
-  showModeratorMenu: false,
+export const WithoutModeratorMenu = {
+  render: Template,
+
+  args: {
+    message: standardMessage,
+    showModeratorMenu: false,
+  },
 };

-export const WithLinkAndCustomEmoji = Template.bind({});
-WithLinkAndCustomEmoji.args = {
-  message: messageWithLinkAndCustomEmoji,
-  showModeratorMenu: false,
+export const WithLinkAndCustomEmoji = {
+  render: Template,
+
+  args: {
+    message: messageWithLinkAndCustomEmoji,
+    showModeratorMenu: false,
+  },
 };

-export const WithModeratorMenu = Template.bind({});
-WithModeratorMenu.args = {
-  message: standardMessage,
-  showModeratorMenu: true,
+export const WithModeratorMenu = {
+  render: Template,
+
+  args: {
+    message: standardMessage,
+    showModeratorMenu: true,
+  },
 };

-export const FromModeratorUser = Template.bind({});
-FromModeratorUser.args = {
-  message: moderatorMessage,
-  showModeratorMenu: false,
-  isAuthorModerator: true,
+export const FromModeratorUser = {
+  render: Template,
+
+  args: {
+    message: moderatorMessage,
+    showModeratorMenu: false,
+    isAuthorModerator: true,
+  },
 };

-export const FromAuthenticatedUser = Template.bind({});
-FromAuthenticatedUser.args = {
-  message: authenticatedUserMessage,
-  showModeratorMenu: false,
-  isAuthorAuthenticated: true,
+export const FromAuthenticatedUser = {
+  render: Template,
+
+  args: {
+    message: authenticatedUserMessage,
+    showModeratorMenu: false,
+    isAuthorAuthenticated: true,
+  },
 };

-export const FromBotUser = Template.bind({});
-FromBotUser.args = {
-  message: botUserMessage,
-  showModeratorMenu: false,
-  isAuthorBot: true,
+export const FromBotUser = {
+  render: Template,
+
+  args: {
+    message: botUserMessage,
+    showModeratorMenu: false,
+    isAuthorBot: true,
+  },
 };

-export const WithStringHighlighted = Template.bind({});
-WithStringHighlighted.args = {
-  message: standardMessage,
-  showModeratorMenu: false,
-  highlightString: 'message',
+export const WithStringHighlighted = {
+  render: Template,
+
+  args: {
+    message: standardMessage,
+    showModeratorMenu: false,
+    highlightString: 'message',
+  },
 };