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/action-buttons/ActionButton/ActionButton.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ActionButton from './ActionButton';
+
+export default {
+  title: 'owncast/Components/Action Buttons/Single button',
+  component: ActionButton,
+  parameters: {
+    docs: {
+      description: {
+        component: `An **Action Button** or **External Action Button** is a button that is used to trigger either an internal or external action. Many will show a modal, but they can also open a new tab to allow navigating to external pages. They are rendered horizontally within the Action Button Row.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ActionButton>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ActionButton> = args => <ActionButton {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example1 = Template.bind({});
+Example1.args = {
+  action: {
+    url: 'https://owncast.online/docs',
+    title: 'Documentation',
+    description: 'Owncast Documentation',
+    icon: 'https://owncast.online/images/logo.svg',
+    color: '#5232c8',
+    openExternally: false,
+  },
+};
+
+export const Example2 = Template.bind({});
+Example2.args = {
+  action: {
+    url: 'https://opencollective.com/embed/owncast/donate',
+    title: 'Support Owncast',
+    description: 'Contribute to Owncast',
+    icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+    color: '#2b4863',
+    openExternally: false,
+  },
+};

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 { ExternalAction } from '../../interfaces/external-action';
+import Modal from '../../ui/Modal/Modal';
+import { ExternalAction } from '../../../interfaces/external-action';
 import s from './ActionButton.module.scss';
 
 interface Props {

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ActionButtonRow from './ActionButtonRow';
+import ActionButton from '../ActionButton/ActionButton';
+
+export default {
+  title: 'owncast/Components/Action Buttons/Buttons Row',
+  component: ActionButtonRow,
+  parameters: {
+    docs: {
+      description: {
+        component: `This is a horizontal row of buttons that could be statically created by the Owncast application (such as Notify, Follow) or are user-generated external actions (Donate, Learn more, etc).
+        There can be any number of buttons, including zero. They should wrap if needed and handle resizing.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ActionButtonRow>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ActionButtonRow> = args => {
+  const { buttons } = args as any;
+  return <ActionButtonRow>{buttons}</ActionButtonRow>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const actions = [
+  {
+    url: 'https://owncast.online/docs',
+    title: 'Documentation',
+    description: 'Owncast Documentation',
+    icon: 'https://owncast.online/images/logo.svg',
+    color: '#5232c8',
+    openExternally: false,
+  },
+  {
+    url: 'https://opencollective.com/embed/owncast/donate',
+    title: 'Support Owncast',
+    description: 'Contribute to Owncast',
+    icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+    color: '#2b4863',
+    openExternally: false,
+  },
+];
+
+const buttons = actions.map(action => <ActionButton action={action} />);
+export const Example1 = Template.bind({});
+Example1.args = {
+  buttons,
+};

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 s from './ActionButton.module.scss';
+import FollowModal from '../modals/FollowModal/FollowModal';
+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;