refactor(stories): co-locate stories with components (#2078)

* refactor: move ActionButton component

* refactor: move BanUserButton component

* refactor: move ChatActionMessage component

* refactor: move ChatContainer component

* refactor: move AuthModal component

* refactor: move BrowserNotifyModal component

* refactor: move ChatUserMessage component

* refactor: move ChatJoinMessage component

* refactor: move ChatTextField component

* refactor: move ChatUserBadge component

* refactor: move FollowerCollection and SingleFollower components

* fix: bad import path

* refactor: move FollowModal component

* refactor: move Modal component

* refactor: move ContentHeader component

* refactor: move ChatSystemMessage component

* refactor: move Header component

* refactor: move Footer component

* refactor: move StatusBar component

* refactor: move OfflineBanner component

* refactor: move OwncastPlayer component

* refactor: move IndieAuthModal component

* refactor: move SocialLinks component

* refactor: move VideoPoster component

* refactor: move FollowModal component

* refactor: move FediAuthModal.tsx component

* refactor: move UserDropdown component

* refactor: move ChatSocialMessage component

* refactor: move Logo component

* refactor: move NotifyReminderPopup component

* refactor: move NameChangeModal component

* refactor: move FatalErrorStateModal component

* refactor: move ChatModeratorNotification component

* refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components

* refactor: move CustomPageContent component

* refactor: move storybook Introduction file

* refactor: update storybook story import path

* refactor: move storybook preview styles

* refactor: move storybook doc pages

* refactor: move Color and ImageAsset components

* fix: bad import path

* fix: bad import path in story file

web/components/chat/ChatSystemMessage/ChatSystemMessage.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } 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 {
+  title: 'owncast/Chat/Messages/System',
+  component: ChatSystemMessage,
+  parameters: {
+    design: {
+      type: 'image',
+      url: Mock,
+    },
+    docs: {
+      description: {
+        component: `This is the message design used when the server sends a message to chat.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatSystemMessage>;
+
+const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage {...args} />;
+
+const message: ChatMessage = JSON.parse(`{
+  "type": "SYSTEM",
+  "id": "wY-MEXwnR",
+  "timestamp": "2022-04-28T20:30:27.001762726Z",
+  "user": {
+    "id": "h_5GQ6E7R",
+    "displayName": "Cool Server Name",
+    "createdAt": "2022-03-24T03:52:37.966584694Z",
+    "scopes": []
+  },
+  "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 HighlightExample = Template.bind({});
+HighlightExample.args = {
+  message,
+  highlightString: 'chat',
+};