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/modals/AuthModal/AuthModal.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import AuthModal from './AuthModal';
+
+const Example = () => (
+  <div>
+    <AuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Auth',
+  component: AuthModal,
+  parameters: {},
+} as ComponentMeta<typeof AuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof AuthModal> = args => (
+  <RecoilRoot>
+    <Example />
+  </RecoilRoot>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/components/modals/AuthModal/AuthModal.tsx

@@ -1,7 +1,7 @@
 import { Tabs } from 'antd';
 import { useRecoilValue } from 'recoil';
-import IndieAuthModal from '../IndieAuthModal';
-import FediAuthModal from '../FediAuthModal';
+import IndieAuthModal from '../IndieAuthModal/IndieAuthModal';
+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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import BrowserNotifyModal from './BrowserNotifyModal';
+import BrowserNotifyModalMock from '../../../stories/assets/mocks/notify-modal.png';
+
+const Example = () => (
+  <div>
+    <BrowserNotifyModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Browser Notifications',
+  component: BrowserNotifyModal,
+  parameters: {
+    design: {
+      type: 'image',
+      url: BrowserNotifyModalMock,
+      scale: 0.5,
+    },
+    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.
+`,
+      },
+    },
+  },
+} as ComponentMeta<typeof BrowserNotifyModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof BrowserNotifyModal> = args => (
+  <RecoilRoot>
+    <Example />
+  </RecoilRoot>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FatalErrorStateModal from './FatalErrorStateModal';
+
+export default {
+  title: 'owncast/Modals/Global error state',
+  component: FatalErrorStateModal,
+  parameters: {},
+} as ComponentMeta<typeof FatalErrorStateModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof FatalErrorStateModal> = args => (
+  <FatalErrorStateModal {...args} />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example = Template.bind({});
+Example.args = {
+  title: 'Example error title',
+  message: 'Example error message',
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FediAuthModal from './FediAuthModal';
+import FediAuthModalMock from '../../../stories/assets/mocks/fediauth-modal.png';
+
+const Example = () => (
+  <div>
+    <FediAuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/FediAuth',
+  component: FediAuthModal,
+  parameters: {
+    design: {
+      type: 'image',
+      url: FediAuthModalMock,
+      scale: 0.5,
+    },
+  },
+} as ComponentMeta<typeof FediAuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof FediAuthModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FollowModal from './FollowModal';
+import FollowModalMock from '../../../stories/assets/mocks/follow-modal.png';
+
+const Example = () => (
+  <div>
+    <FollowModal handleClose={null} account="@fake@server.name" name="Fake Owncast Server" />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Follow',
+  component: FollowModal,
+  parameters: {
+    design: {
+      type: 'image',
+      url: FollowModalMock,
+      scale: 0.5,
+    },
+    docs: {
+      description: {
+        component: `The Follow modal allows an end user to type in their Fediverse account information to follow this Owncast instance. It must:
+
+- Validate the input to make sure it's a valid looking account.
+- Handle errors that come back from the server.
+- Perform the redirect to the remote server when the backend response is received.
+`,
+      },
+    },
+  },
+} as ComponentMeta<typeof FollowModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof FollowModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import IndieAuthModal from './IndieAuthModal';
+import Mock from '../../../stories/assets/mocks/indieauth-modal.png';
+
+const Example = () => (
+  <div>
+    <IndieAuthModal authenticated displayName="fakeChatName" accessToken="fakeaccesstoken" />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/IndieAuth',
+  component: IndieAuthModal,
+  parameters: {
+    design: {
+      type: 'image',
+      url: Mock,
+      scale: 0.5,
+    },
+  },
+} as ComponentMeta<typeof IndieAuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof IndieAuthModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import NameChangeModal from './NameChangeModal';
+
+export default {
+  title: 'owncast/Modals/Name change',
+  component: NameChangeModal,
+  parameters: {},
+} as ComponentMeta<typeof NameChangeModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof NameChangeModal> = args => (
+  <RecoilRoot>
+    <NameChangeModal />
+  </RecoilRoot>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

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 WebsocketService from '../../services/websocket-service';
+import { MessageType } from '../../../interfaces/socket-events';
+import WebsocketService from '../../../services/websocket-service';
 import {
   websocketServiceAtom,
   chatDisplayNameAtom,
   chatDisplayColorAtom,
-} from '../stores/ClientConfigStore';
+} from '../../stores/ClientConfigStore';
 
 const { Option } = Select;