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.module.scss

@@ -0,0 +1,9 @@
+.button {
+  margin: 3px;
+  font-weight: 400;
+  font-family: var(--theme-text-display-font-family);
+  .icon {
+    width: 20px;
+    margin-right: 3px;
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Button } from 'antd';
+import { useState } from 'react';
+import Modal from '../../ui/Modal/Modal';
+import { ExternalAction } from '../../../interfaces/external-action';
+import s from './ActionButton.module.scss';
+
+interface Props {
+  action: ExternalAction;
+  primary?: boolean;
+}
+ActionButton.defaultProps = {
+  primary: true,
+};
+
+export default function ActionButton({
+  action: { url, title, description, icon, color, openExternally },
+  primary = false,
+}: Props) {
+  const [showModal, setShowModal] = useState(false);
+
+  const buttonClicked = () => {
+    if (openExternally) {
+      window.open(url, '_blank');
+    } else {
+      setShowModal(true);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        type={primary ? 'primary' : 'default'}
+        className={`${s.button}`}
+        onClick={buttonClicked}
+        style={{ backgroundColor: color }}
+      >
+        <img src={icon} className={`${s.icon}`} alt={description} />
+        {title}
+      </Button>
+      <Modal
+        title={description || title}
+        url={url}
+        visible={showModal}
+        height="80vh"
+        handleCancel={() => setShowModal(false)}
+      />
+    </>
+  );
+}