Fill out some more components + add application state enums

web/stories/ChatUserMessage.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import UserChatMessage from '../components/chat/ChatUserMessage';
+import { ChatMessage } from '../interfaces/chat-message.model';
 
 export default {
   title: 'owncast/Chat/Messages/Standard user',
@@ -8,8 +9,74 @@ export default {
   parameters: {},
 } as ComponentMeta<typeof UserChatMessage>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage />;
+const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+const standardMessage: ChatMessage = JSON.parse(`{
+  "type": "CHAT",
+  "id": "wY-MEXwnR",
+  "timestamp": "2022-04-28T20:30:27.001762726Z",
+  "user": {
+    "id": "h_5GQ6E7R",
+    "displayName": "EliteMooseTaskForce",
+    "displayColor": 329,
+    "createdAt": "2022-03-24T03:52:37.966584694Z",
+    "previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+    "nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+    "scopes": []
+  },
+  "body": "Test message from a regular user."}`);
+
+const moderatorMessage: ChatMessage = JSON.parse(`{
+    "type": "CHAT",
+    "id": "wY-MEXwnR",
+    "timestamp": "2022-04-28T20:30:27.001762726Z",
+    "user": {
+      "id": "h_5GQ6E7R",
+      "displayName": "EliteMooseTaskForce",
+      "displayColor": 329,
+      "createdAt": "2022-03-24T03:52:37.966584694Z",
+      "previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+      "nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+      "scopes": ["moderator"]
+    },
+    "body": "I am a moderator user."}`);
+
+const authenticatedUserMessage: ChatMessage = JSON.parse(`{
+      "type": "CHAT",
+      "id": "wY-MEXwnR",
+      "timestamp": "2022-04-28T20:30:27.001762726Z",
+      "user": {
+        "id": "h_5GQ6E7R",
+        "displayName": "EliteMooseTaskForce",
+        "displayColor": 329,
+        "createdAt": "2022-03-24T03:52:37.966584694Z",
+        "previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+        "nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+        "authenticated": true,
+        "scopes": []
+      },
+      "body": "I am an authenticated user."}`);
+
+export const WithoutModeratorMenu = Template.bind({});
+WithoutModeratorMenu.args = {
+  message: standardMessage,
+  showModeratorMenu: false,
+};
+
+export const WithModeratorMenu = Template.bind({});
+WithModeratorMenu.args = {
+  message: standardMessage,
+  showModeratorMenu: true,
+};
+
+export const FromModeratorUser = Template.bind({});
+FromModeratorUser.args = {
+  message: moderatorMessage,
+  showModeratorMenu: false,
+};
+
+export const FromAuthenticatedUser = Template.bind({});
+FromAuthenticatedUser.args = {
+  message: authenticatedUserMessage,
+  showModeratorMenu: false,
+};