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/ui/followers/SingleFollower/SingleFollower.module.scss

@@ -0,0 +1,33 @@
+.follower {
+  border-color: rgba(0, 0, 0, 0.3);
+  border-width: 1px;
+  border-style: solid;
+  padding: 10px 10px;
+  border-radius: 15px;
+  height: 75px;
+  width: 250px;
+  font-size: 0.8rem;
+  overflow: hidden;
+
+  &:hover {
+    border-color: var(--theme-text-link);
+  }
+
+  .avatar {
+    height: 50px;
+    width: 50px;
+    border-color: rgba(0, 0, 0, 0.3);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .account {
+    color: var(--theme-text-secondary);
+    text-overflow: ellipsis;
+  }
+
+  .placeholder {
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import SingleFollower from './SingleFollower';
+import SingleFollowerMock from '../../../../stories/assets/mocks/single-follower.png';
+
+export default {
+  title: 'owncast/Components/Followers/Single Follower',
+  component: SingleFollower,
+  parameters: {
+    design: {
+      type: 'image',
+      url: SingleFollowerMock,
+    },
+    docs: {
+      description: {
+        component: `Represents a single follower.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof SingleFollower>;
+
+const Template: ComponentStory<typeof SingleFollower> = args => <SingleFollower {...args} />;
+
+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',
+  },
+};

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

@@ -0,0 +1,30 @@
+import { Avatar, Col, Row } from 'antd';
+import React from 'react';
+import { Follower } from '../../../../interfaces/follower';
+import s from './SingleFollower.module.scss';
+
+interface Props {
+  follower: Follower;
+}
+
+export default function SingleFollower(props: Props) {
+  const { follower } = props;
+
+  return (
+    <div className={s.follower}>
+      <a href={follower.link} target="_blank" rel="noreferrer">
+        <Row wrap={false}>
+          <Col span={6}>
+            <Avatar src={follower.image} alt="Avatar" className={s.avatar}>
+              <img src="/logo" alt="Logo" className={s.placeholder} />
+            </Avatar>
+          </Col>
+          <Col>
+            <Row>{follower.name}</Row>
+            <Row className={s.account}>{follower.username}</Row>
+          </Col>
+        </Row>
+      </a>
+    </div>
+  );
+}