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/.storybook/main.js

@@ -3,9 +3,9 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: [
-    '../stories/Introduction.stories.mdx',
+    '../.storybook/stories-category-doc-pages/**/*.stories.mdx',
-    '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+		'../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',

web/.storybook/preview.js

@@ -1,7 +1,7 @@
 import '../styles/variables.css';
 import '../styles/global.less';
 import '../styles/theme.less';
-import '../stories/preview.scss';
+import './preview.scss';
 import { themes } from '@storybook/theming';
 import { DocsContainer } from './storybook-theme';
 

web/.storybook/preview.scss

@@ -0,0 +1,2 @@
+@import '../styles/globals';
+@import '../styles/ant-overrides';

web/.storybook/stories-category-doc-pages/Chat.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import { Typography } from 'antd';
-import UserChatMessage from '../components/chat/ChatUserMessage';
+import UserChatMessage from '../../components/chat/ChatUserMessage';
-import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatMessage } from '../../interfaces/chat-message.model';
 
 <Meta title="Owncast/Documentation/Chat" />
 
@@ -73,4 +73,4 @@ It is used for:
 
 - User "liked" that the steam went live.
 - User followed the instance.
-- User shared the instance to their followers.
+- User shared the instance to their followers.

web/.storybook/stories-category-doc-pages/Colors.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Color, ColorRow } from './Color';
+import { Color, ColorRow } from '../../components/Color';
 
 <Meta title="owncast/Style Guide/Default Theme" />
 

web/.storybook/stories-category-doc-pages/Images.stories.mdx

@@ -1,12 +1,12 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Image, ImageRow } from './ImageAsset';
+import { Image, ImageRow } from '../../components/ImageAsset';
 
-import Logo from '../assets/images/logo.svg';
+import Logo from '../../assets/images/logo.svg';
-import FediverseColor from '../assets/images/fediverse-color.png';
+import FediverseColor from '../../assets/images/fediverse-color.png';
-import FediverseBlack from '../assets/images/fediverse-black.png';
+import FediverseBlack from '../../assets/images/fediverse-black.png';
-import Moderator from '../assets/images/moderator.svg';
+import Moderator from '../../assets/images/moderator.svg';
-import IndieAuth from '../assets/images/indieauth.png';
+import IndieAuth from '../../assets/images/indieauth.png';
-import IsBot from '../assets/images/bot.svg';
+import IsBot from '../../assets/images/bot.svg';
 
 <Meta title="owncast/Style Guide/Images+Icons" />
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ActionButton from '../components/action-buttons/ActionButton';
+import ActionButton from './ActionButton';
 
 export default {
   title: 'owncast/Components/Action Buttons/Single button',

web/components/action-buttons/ActionButton/ActionButton.tsx

@@ -1,7 +1,7 @@
 import { Button } from 'antd';
 import { useState } from 'react';
-import Modal from '../ui/Modal/Modal';
+import Modal from '../../ui/Modal/Modal';
-import { ExternalAction } from '../../interfaces/external-action';
+import { ExternalAction } from '../../../interfaces/external-action';
 import s from './ActionButton.module.scss';
 
 interface Props {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ActionButtonRow from '../components/action-buttons/ActionButtonRow';
+import ActionButtonRow from './ActionButtonRow';
-import ActionButton from '../components/action-buttons/ActionButton';
+import ActionButton from '../ActionButton/ActionButton';
 
 export default {
   title: 'owncast/Components/Action Buttons/Buttons Row',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import s from './ActionButtons.module.scss';
+import s from './ActionButtonRow.module.scss';
 
 interface Props {
   children: React.ReactNode[];

web/components/action-buttons/FollowButton.tsx

@@ -3,8 +3,8 @@ import { HeartFilled } from '@ant-design/icons';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import Modal from '../ui/Modal/Modal';
-import FollowModal from '../modals/Follow/FollowModal';
+import FollowModal from '../modals/FollowModal/FollowModal';
-import s from './ActionButton.module.scss';
+import s from './ActionButton/ActionButton.module.scss';
 import { clientConfigStateAtom } from '../stores/ClientConfigStore';
 import { ClientConfig } from '../../interfaces/client-config.model';
 

web/components/action-buttons/NotifyButton.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
 import { BellFilled } from '@ant-design/icons';
-import s from './ActionButton.module.scss';
+import s from './ActionButton/ActionButton.module.scss';
 
 interface Props {
   onClick: () => void;

web/components/chat/ChatActionMessage/ChatActionMessage.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatActionMessage from '../components/chat/ChatAction/ChatActionMessage';
+import ChatActionMessage from './ChatActionMessage';
-import Mock from './assets/mocks/chatmessage-action.png';
+import Mock from '../../../stories/assets/mocks/chatmessage-action.png';
 
 export default {
   title: 'owncast/Chat/Messages/Chat action',

web/components/chat/ChatContainer/ChatContainer.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import ChatContainer from '../components/chat/ChatContainer';
+import ChatContainer from './index';
-import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 
 export default {
   title: 'owncast/Chat/Chat messages container',

web/components/chat/ChatJoinMessage/ChatJoinMessage.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatJoinMessage from '../components/chat/ChatJoinMessage/ChatJoinMessage';
+import ChatJoinMessage from './ChatJoinMessage';
-import Mock from './assets/mocks/chatmessage-action.png';
+import Mock from '../../../stories/assets/mocks/chatmessage-action.png';
 
 export default {
   title: 'owncast/Chat/Messages/Chat Join',

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import ChatModerationActionMenu from '../components/chat/ChatModerationActionMenu/ChatModerationActionMenu';
+import ChatModerationActionMenu from './ChatModerationActionMenu';
 
 const mocks = {
   mocks: [

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx

@@ -6,7 +6,7 @@ import {
 } from '@ant-design/icons';
 import { Dropdown, Menu, MenuProps, Space, Modal, message } from 'antd';
 import { useState } from 'react';
-import ChatModerationDetailsModal from './ChatModerationDetailsModal';
+import ChatModerationDetailsModal from '../ChatModerationDetailsModal/ChatModerationDetailsModal';
 import s from './ChatModerationActionMenu.module.scss';
 import ChatModeration from '../../../services/moderation-service';
 

web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import ChatModerationDetailsModal from '../components/chat/ChatModerationActionMenu/ChatModerationDetailsModal';
+import ChatModerationDetailsModal from './ChatModerationDetailsModal';
 
 const mocks = {
   mocks: [

web/components/chat/ChatModeratorNotification/ChatModeratorNotification.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatModeratorNotification from '../components/chat/ChatModeratorNotification/ChatModeratorNotification';
+import ChatModeratorNotification from './ChatModeratorNotification';
 
 export default {
   title: 'owncast/Chat/Messages/Moderation Role Notification',

web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatSocialMessage from '../components/chat/ChatSocialMessage';
+import ChatSocialMessage from './ChatSocialMessage';
 
 export default {
   title: 'owncast/Chat/Messages/Social-fediverse event',

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { ChatMessage } from '../../interfaces/chat-message.model';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 
 interface Props {
   message: ChatMessage;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatSystemMessage from '../components/chat/ChatSystemMessage/ChatSystemMessage';
+import ChatSystemMessage from './ChatSystemMessage';
-import Mock from './assets/mocks/chatmessage-system.png';
+import Mock from '../../../stories/assets/mocks/chatmessage-system.png';
-import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 
 export default {
   title: 'owncast/Chat/Messages/System',

web/components/chat/ChatTextField/ChatTextField.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import ChatTextField from '../components/chat/ChatTextField/ChatTextField';
+import ChatTextField from './ChatTextField';
-import Mock from './assets/mocks/chatinput-mock.png';
+import Mock from '../../../stories/assets/mocks/chatinput-mock.png';
 
 export default {
   title: 'owncast/Chat/Input text field',

web/components/chat/ChatUserBadge/ChatUserBadge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatUserBadge from '../components/chat/ChatUserBadge/ChatUserBadge';
+import ChatUserBadge from './ChatUserBadge';
 
 export default {
   title: 'owncast/Chat/Messages/User Flag',

web/components/chat/ChatUserMessage/ChatUserMessage.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import UserChatMessage from '../components/chat/ChatUserMessage';
+import ChatUserMessage from './index';
-import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
-import Mock from './assets/mocks/chatmessage-user.png';
+import Mock from '../../../stories/assets/mocks/chatmessage-user.png';
 
 export default {
   title: 'owncast/Chat/Messages/Standard user',
-  component: UserChatMessage,
+  component: ChatUserMessage,
   parameters: {
     design: {
       type: 'image',
@@ -19,9 +19,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof UserChatMessage>;
+} as ComponentMeta<typeof ChatUserMessage>;
 
-const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage {...args} />;
+const Template: ComponentStory<typeof ChatUserMessage> = args => <ChatUserMessage {...args} />;
 
 const standardMessage: ChatMessage = JSON.parse(`{
   "type": "CHAT",

web/components/client-table.tsx

@@ -5,7 +5,7 @@ import { SearchOutlined } from '@ant-design/icons';
 import { formatDistanceToNow } from 'date-fns';
 import { Client } from '../types/chat';
 import UserPopover from './user-popover';
-import BanUserButton from './ban-user-button';
+import BanUserButton from './other/ban-user-button/ban-user-button';
 import { formatUAstring } from '../utils/format';
 
 export default function ClientTable({ data }: ClientTableProps) {

web/components/common/ContentHeader/ContentHeader.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ContentHeader from '../components/common/ContentHeader/ContentHeader';
+import ContentHeader from './ContentHeader';
 
 export default {
   title: 'owncast/Components/Content Header',

web/components/common/Logo/Logo.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { OwncastLogo } from '../components/common';
+import OwncastLogo from './Logo';
 
 export default {
   title: 'owncast/Components/Header Logo',

web/components/common/UserDropdown/UserDropdown.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import { UserDropdown } from '../components/common';
+import UserDropdown from './UserDropdown';
 
 export default {
   title: 'owncast/Components/User settings menu',

web/components/common/UserDropdown/UserDropdown.tsx

@@ -16,7 +16,7 @@ import {
   appStateAtom,
 } from '../../stores/ClientConfigStore';
 import s from './UserDropdown.module.scss';
-import NameChangeModal from '../../modals/NameChangeModal';
+import NameChangeModal from '../../modals/NameChangeModal/NameChangeModal';
 import { AppStateOptions } from '../../stores/application-state';
 import AuthModal from '../../modals/AuthModal/AuthModal';
 

web/components/layouts/Main.tsx

@@ -11,7 +11,7 @@ import {
 import { Content, Header } from '../ui';
 import { ClientConfig } from '../../interfaces/client-config.model';
 import { DisplayableError } from '../../types/displayable-error';
-import FatalErrorStateModal from '../modals/FatalErrorModal';
+import FatalErrorStateModal from '../modals/FatalErrorStateModal/FatalErrorStateModal';
 import setupNoLinkReferrer from '../../utils/no-link-referrer';
 
 function Main() {

web/components/modals/AuthModal/AuthModal.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import AuthModal from '../components/modals/AuthModal/AuthModal';
+import AuthModal from './AuthModal';
 
 const Example = () => (
   <div>

web/components/modals/AuthModal/AuthModal.tsx

@@ -1,7 +1,7 @@
 import { Tabs } from 'antd';
 import { useRecoilValue } from 'recoil';
-import IndieAuthModal from '../IndieAuthModal';
+import IndieAuthModal from '../IndieAuthModal/IndieAuthModal';
-import FediAuthModal from '../FediAuthModal';
+import FediAuthModal from '../FediAuthModal/FediAuthModal';
 
 import FediverseIcon from '../../../assets/images/fediverse-black.png';
 import IndieAuthIcon from '../../../assets/images/indieauth.png';

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import BrowserNotifyModal from '../components/modals/BrowserNotify/BrowserNotifyModal';
+import BrowserNotifyModal from './BrowserNotifyModal';
-import BrowserNotifyModalMock from './assets/mocks/notify-modal.png';
+import BrowserNotifyModalMock from '../../../stories/assets/mocks/notify-modal.png';
 
 const Example = () => (
   <div>
@@ -22,7 +22,7 @@ export default {
     docs: {
       description: {
         component: `The notify modal allows an end user to get notified when the stream goes live via [Browser Push Notifications](https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications) It must:
-        
+
 - Verify the browser supports notifications.
 - Handle errors that come back from the server.
 - Have an enabled and disabled state with accurate information about each.

web/components/modals/FatalErrorStateModal/FatalErrorStateModal.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import FatalErrorStateModal from '../components/modals/FatalErrorModal';
+import FatalErrorStateModal from './FatalErrorStateModal';
 
 export default {
   title: 'owncast/Modals/Global error state',

web/components/modals/FediAuthModal/FediAuthModal.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import FediAuthModal from '../components/modals/FediAuthModal';
+import FediAuthModal from './FediAuthModal';
-import FediAuthModalMock from './assets/mocks/fediauth-modal.png';
+import FediAuthModalMock from '../../../stories/assets/mocks/fediauth-modal.png';
 
 const Example = () => (
   <div>

web/components/modals/FollowModal/FollowModal.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import FollowModal from '../components/modals/Follow/FollowModal';
+import FollowModal from './FollowModal';
-import FollowModalMock from './assets/mocks/follow-modal.png';
+import FollowModalMock from '../../../stories/assets/mocks/follow-modal.png';
 
 const Example = () => (
   <div>

web/components/modals/IndieAuthModal/IndieAuthModal.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import IndieAuthModal from '../components/modals/IndieAuthModal';
+import IndieAuthModal from './IndieAuthModal';
-import Mock from './assets/mocks/indieauth-modal.png';
+import Mock from '../../../stories/assets/mocks/indieauth-modal.png';
 
 const Example = () => (
   <div>

web/components/modals/IndieAuthModal/IndieAuthModal.tsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Input, Space, Spin, Collapse, Typography } from 'antd';
 import React, { useState } from 'react';
-import isValidURL from '../../utils/urls';
+import isValidURL from '../../../utils/urls';
 
 const { Panel } = Collapse;
 const { Link } = Typography;

web/components/modals/NameChangeModal/NameChangeModal.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import NameChangeModal from '../components/modals/NameChangeModal';
+import NameChangeModal from './NameChangeModal';
 
 export default {
   title: 'owncast/Modals/Name change',

web/components/modals/NameChangeModal/NameChangeModal.tsx

@@ -1,13 +1,13 @@
 import React, { CSSProperties, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Input, Button, Select } from 'antd';
-import { MessageType } from '../../interfaces/socket-events';
+import { MessageType } from '../../../interfaces/socket-events';
-import WebsocketService from '../../services/websocket-service';
+import WebsocketService from '../../../services/websocket-service';
 import {
   websocketServiceAtom,
   chatDisplayNameAtom,
   chatDisplayColorAtom,
-} from '../stores/ClientConfigStore';
+} from '../../stores/ClientConfigStore';
 
 const { Option } = Select;
 

web/components/other/ban-user-button/ban-user-button.tsx

@@ -1,7 +1,7 @@
 import { Modal, Button } from 'antd';
 import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
-import { USER_ENABLED_TOGGLE, fetchData } from '../utils/apis';
+import { USER_ENABLED_TOGGLE, fetchData } from '../../../utils/apis';
-import { User } from '../types/chat';
+import { User } from '../../../types/chat';
 
 interface BanUserButtonProps {
   user: User;

web/components/ui/Content/Content.tsx

@@ -18,23 +18,23 @@ import {
 } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import CustomPageContent from '../CustomPageContent/CustomPageContent';
-import OwncastPlayer from '../../video/OwncastPlayer';
+import OwncastPlayer from '../../video/OwncastPlayer/OwncastPlayer';
-import FollowerCollection from '../Followers/FollowersCollection';
+import FollowerCollection from '../followers/FollowerCollection/FollowerCollection';
 import s from './Content.module.scss';
 import Sidebar from '../Sidebar';
 import Footer from '../Footer';
 // import ChatContainer from '../../chat/ChatContainer';
 // import { ChatMessage } from '../../../interfaces/chat-message.model';
 // import ChatTextField from '../../chat/ChatTextField/ChatTextField';
-import ActionButtonRow from '../../action-buttons/ActionButtonRow';
+import ActionButtonRow from '../../action-buttons/ActionButtonRow/ActionButtonRow';
-import ActionButton from '../../action-buttons/ActionButton';
+import ActionButton from '../../action-buttons/ActionButton/ActionButton';
 import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
 import OfflineBanner from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
 import FollowButton from '../../action-buttons/FollowButton';
 import NotifyButton from '../../action-buttons/NotifyButton';
 import Modal from '../Modal/Modal';
-import BrowserNotifyModal from '../../modals/BrowserNotify/BrowserNotifyModal';
+import BrowserNotifyModal from '../../modals/BrowserNotifyModal/BrowserNotifyModal';
 import ContentHeader from '../../common/ContentHeader';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { StatusBar } from '..';

web/components/ui/CustomPageContent/CustomPageContent.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import CustomPageContent from '../components/ui/CustomPageContent/CustomPageContent';
+import CustomPageContent from './CustomPageContent';
 
 export default {
   title: 'owncast/Components/Custom page content',

web/components/ui/Footer/Footer.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Footer from '../components/ui/Footer/Footer';
+import Footer from './Footer';
 
 export default {
   title: 'owncast/Layout/Footer',

web/components/ui/Header/Header.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import Header from '../components/ui/Header/Header';
+import Header from './Header';
 
 export default {
   title: 'owncast/Layout/Header',

web/components/ui/Modal/Modal.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Modal from '../components/ui/Modal/Modal';
+import Modal from './Modal';
 
 export default {
   title: 'owncast/Modals/Container',

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.stories.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable no-alert */
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import NotifyReminder from '../components/ui/NotifyReminderPopup/NotifyReminderPopup';
+import NotifyReminderPopup from './NotifyReminderPopup';
-import Mock from './assets/mocks/notify-popup.png';
+import Mock from '../../../stories/assets/mocks/notify-popup.png';
 
 const Example = args => (
   <div style={{ margin: '20px', marginTop: '130px' }}>
-    <NotifyReminder {...args}>
+    <NotifyReminderPopup {...args}>
       <button type="button">notify button</button>
-    </NotifyReminder>
+    </NotifyReminderPopup>
   </div>
 );
 
 export default {
   title: 'owncast/Components/Notify Reminder',
-  component: NotifyReminder,
+  component: NotifyReminderPopup,
   parameters: {
     design: {
       type: 'image',
@@ -27,9 +27,9 @@ Clicking it will make the notification modal display. Clicking the "X" will hide
       },
     },
   },
-} as ComponentMeta<typeof NotifyReminder>;
+} as ComponentMeta<typeof NotifyReminderPopup>;
 
-const Template: ComponentStory<typeof NotifyReminder> = args => <Example {...args} />;
+const Template: ComponentStory<typeof NotifyReminderPopup> = args => <Example {...args} />;
 
 export const Active = Template.bind({});
 Active.args = {

web/components/ui/OfflineBanner/OfflineBanner.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import OfflineBanner from '../components/ui/OfflineBanner/OfflineBanner';
+import OfflineBanner from './OfflineBanner';
-import OfflineState from './assets/mocks/offline-state.png';
+import OfflineState from '../../../stories/assets/mocks/offline-state.png';
 
 export default {
   title: 'owncast/Layout/Offline Banner',

web/components/ui/SocialLinks/SocialLinks.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import SocialLinks from '../components/ui/SocialLinks/SocialLinks';
+import SocialLinks from './SocialLinks';
 
 export default {
   title: 'owncast/Components/Social links',

web/components/ui/Statusbar/StatusBar.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { subHours } from 'date-fns';
-import Statusbar from '../components/ui/Statusbar/Statusbar';
+import Statusbar from './Statusbar';
 
 export default {
   title: 'owncast/Player/Status bar',

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -0,0 +1,3 @@
+.followers {
+	width: 100%;
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import FollowerCollection from '../components/ui/Followers/FollowersCollection';
+import FollowerCollection from './FollowerCollection';
 
 export default {
   title: 'owncast/Components/Followers/Followers collection',

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Col, Pagination, Row } from 'antd';
-import { Follower } from '../../../interfaces/follower';
+import { Follower } from '../../../../interfaces/follower';
-import SingleFollower from './Follower';
+import SingleFollower from '../SingleFollower/SingleFollower';
-import s from './Followers.module.scss';
+import s from '../SingleFollower/SingleFollower.module.scss';
 
 export default function FollowerCollection() {
   const ENDPOINT = '/api/followers';

web/components/ui/followers/SingleFollower/SingleFollower.module.scss

@@ -31,7 +31,3 @@
     height: 100%;
   }
 }
-
-.followers {
-  width: 100%;
-}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import SingleFollower from '../components/ui/Followers/Follower';
+import SingleFollower from './SingleFollower';
-import SingleFollowerMock from './assets/mocks/single-follower.png';
+import SingleFollowerMock from '../../../../stories/assets/mocks/single-follower.png';
 
 export default {
   title: 'owncast/Components/Followers/Single Follower',

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

@@ -1,7 +1,7 @@
 import { Avatar, Col, Row } from 'antd';
 import React from 'react';
-import { Follower } from '../../../interfaces/follower';
+import { Follower } from '../../../../interfaces/follower';
-import s from './Followers.module.scss';
+import s from './SingleFollower.module.scss';
 
 interface Props {
   follower: Follower;

web/components/user-popover.tsx

@@ -6,7 +6,7 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import format from 'date-fns/format';
 import { uniq } from 'lodash';
 
-import BlockUserbutton from './ban-user-button';
+import BlockUserbutton from './other/ban-user-button/ban-user-button';
 import ModeratorUserbutton from './moderator-user-button';
 
 import { User, UserConnectionInfo } from '../types/chat';

web/components/user-table.tsx

@@ -3,7 +3,7 @@ import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import { User } from '../types/chat';
 import UserPopover from './user-popover';
-import BanUserButton from './ban-user-button';
+import BanUserButton from './other/ban-user-button/ban-user-button';
 
 export function formatDisplayDate(date: string | Date) {
   return format(new Date(date), 'MMM d H:mma');

web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import OwncastPlayer from '../components/video/OwncastPlayer';
+import OwncastPlayer from './OwncastPlayer';
 
 const streams = {
   DemoServer: `https://watch.owncast.online/hls/stream.m3u8`,

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHotkeys } from 'react-hotkeys-hook';
-import VideoJS from './player';
+import VideoJS from '../player';
-import ViewerPing from './viewer-ping';
+import ViewerPing from '../viewer-ping';
-import VideoPoster from './VideoPoster';
+import VideoPoster from '../VideoPoster/VideoPoster';
-import { getLocalStorage, setLocalStorage } from '../../utils/localStorage';
+import { getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
-import { isVideoPlayingAtom, clockSkewAtom } from '../stores/ClientConfigStore';
+import { isVideoPlayingAtom, clockSkewAtom } from '../../stores/ClientConfigStore';
-import PlaybackMetrics from './metrics/playback';
+import PlaybackMetrics from '../metrics/playback';
-import createVideoSettingsMenuButton from './settings-menu';
+import createVideoSettingsMenuButton from '../settings-menu';
-import LatencyCompensator from './latencyCompensator';
+import LatencyCompensator from '../latencyCompensator';
 
 const VIDEO_CONFIG_URL = '/api/video/variants';
 const PLAYER_VOLUME = 'owncast_volume';

web/components/video/VideoPoster/VideoPoster.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import VideoPoster from '../components/video/VideoPoster';
+import VideoPoster from './VideoPoster';
 
 export default {
   title: 'owncast/Player/Video poster',

web/components/video/VideoPoster/VideoPoster.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import CrossfadeImage from '../ui/CrossfadeImage/CrossfadeImage';
+import CrossfadeImage from '../../ui/CrossfadeImage/CrossfadeImage';
 import s from './VideoPoster.module.scss';
 
 const REFRESH_INTERVAL = 20_000;

web/pages/embed/video/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../components/stores/ClientConfigStore';
 import OfflineBanner from '../../../components/ui/OfflineBanner/OfflineBanner';
 import Statusbar from '../../../components/ui/Statusbar/Statusbar';
-import OwncastPlayer from '../../../components/video/OwncastPlayer';
+import OwncastPlayer from '../../../components/video/OwncastPlayer/OwncastPlayer';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 

web/stories/preview.scss

@@ -1,2 +0,0 @@
-@import '../styles/globals.scss';
-@import '../styles/ant-overrides.scss';