Add placeholder components to be worked on

web/stories/AuthModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AuthModal from '../components/modals/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 => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/BrowserNotifyModal.stories.tsx

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

web/stories/ChatActionMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatActionMessage from '../components/chat/ChatActionMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Chat action',
+  component: ChatActionMessage,
+  parameters: {},
+} as ComponentMeta<typeof ChatActionMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatContainer.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatContainer from '../components/chat/ChatContainer';
+
+const Example = () => (
+  <div>
+    <ChatContainer />
+  </div>
+);
+
+export default {
+  title: 'owncast/Chat/Chat messages container',
+  component: ChatContainer,
+  parameters: {},
+} as ComponentMeta<typeof ChatContainer>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatContainer> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatModerationNotification.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatModeratorNotification from '../components/chat/ChatModeratorNotification';
+
+export default {
+  title: 'owncast/Chat/Messages/Moderator notification',
+  component: ChatModeratorNotification,
+  parameters: {},
+} as ComponentMeta<typeof ChatModeratorNotification>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatModeratorNotification> = args => (
+  <ChatModeratorNotification />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatSocialMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatSocialMessage from '../components/chat/ChatSocialMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Social-fediverse event',
+  component: ChatSocialMessage,
+  parameters: {},
+} as ComponentMeta<typeof ChatSocialMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatSocialMessage> = args => <ExamChatSocialMessageple />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatSystemMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatSystemMessage from '../components/chat/ChatSystemMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/System',
+  component: ChatSystemMessage,
+  parameters: {},
+} as ComponentMeta<typeof ChatSystemMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatTextField.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatTextField from '../components/chat/ChatTextField';
+
+const Example = () => (
+  <div>
+    <ChatTextField />
+  </div>
+);
+
+export default {
+  title: 'owncast/Chat/Input text field',
+  component: ChatTextField,
+  parameters: {},
+} as ComponentMeta<typeof ChatTextField>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatTextField> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatUserMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import UserChatMessage from '../components/chat/ChatUserMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Standard user',
+  component: UserChatMessage,
+  parameters: {},
+} as ComponentMeta<typeof UserChatMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ExternalActionButton.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ExternalActionButton from '../components/ExternalActionButton';
+
+export default {
+  title: 'owncast/External action button',
+  component: ExternalActionButton,
+  parameters: {},
+} as ComponentMeta<typeof ExternalActionButton>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ExternalActionButton> = args => (
+  <ExternalActionButton {...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/stories/FediAuthModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FediAuthModal from '../components/modals/FediAuthModal';
+
+const Example = () => (
+  <div>
+    <FediAuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/FediAuth',
+  component: FediAuthModal,
+  parameters: {},
+} 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/stories/FollowModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FollowModal from '../components/modals/FollowModal';
+
+const Example = () => (
+  <div>
+    <FollowModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Follow',
+  component: FollowModal,
+  parameters: {},
+} 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/stories/Form.stories.tsx

@@ -99,7 +99,7 @@ const FormExample = () => {
 };
 
 export default {
-  title: 'owncast/Form',
+  title: 'example/Form',
   component: Form,
   // parameters: {},
 } as ComponentMeta<typeof Form>;

web/stories/IndieAuthModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import IndieAuthModal from '../components/modals/IndieAuthModal';
+
+const Example = () => (
+  <div>
+    <IndieAuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/IndieAuth',
+  component: IndieAuthModal,
+  parameters: {},
+} 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/stories/Modal.stories.tsx

@@ -2,37 +2,16 @@ import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Modal, Button } from 'antd';
 
-const Usage = () => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const showModal = () => {
-    setIsModalVisible(true);
-  };
-
-  const handleOk = () => {
-    setIsModalVisible(false);
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
-
-  return (
-    <>
-      <Button type="primary" onClick={showModal}>
-        Test Modal
-      </Button>
-      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal>
-    </>
-  );
-};
+const Usage = () => (
+  <Modal title="Basic Modal" visible>
+    <p>Some contents...</p>
+    <p>Some contents...</p>
+    <p>Some contents...</p>
+  </Modal>
+);
 
 export default {
-  title: 'owncast/Modal',
+  title: 'owncast/Modal container',
   component: Modal,
   parameters: {},
 } as ComponentMeta<typeof Modal>;
@@ -40,8 +19,4 @@ export default {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof Modal> = args => <Usage />;
 
-export const Basic = Template.bind({});
-
-Usage.propTypes = {};
-
-Usage.defaultProps = {};
+export const Example = Template.bind({});

web/stories/PageLogo.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import PageLogo from '../components/PageLogo';
+
+export default {
+  title: 'owncast/Page Logo',
+  component: PageLogo,
+  parameters: {},
+} as ComponentMeta<typeof PageLogo>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof PageLogo> = args => <PageLogo {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Logo = Template.bind({});
+Logo.args = {
+  url: '/logo',
+};
+
+export const DemoServer = Template.bind({});
+DemoServer.args = {
+  url: 'https://watch.owncast.online/logo',
+};

web/stories/SocialLinks.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import SocialLinks from '../components/SocialLinks';
+
+export default {
+  title: 'owncast/Social links',
+  component: SocialLinks,
+  parameters: {},
+} as ComponentMeta<typeof SocialLinks>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof SocialLinks> = args => <SocialLinks {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Populated = Template.bind({});
+Populated.args = {
+  links: [
+    {
+      platform: 'github',
+      url: 'https://github.com/owncast/owncast',
+      icon: '/img/platformlogos/github.svg',
+    },
+    { platform: 'Documentation', url: 'https://owncast.online' },
+    {
+      platform: 'mastodon',
+      url: 'https://fosstodon.org/users/owncast',
+      icon: '/img/platformlogos/mastodon.svg',
+    },
+  ],
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  links: [],
+};

web/stories/StatusBar.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import StatusBar from '../components/video/StatusBar';
+
+export default {
+  title: 'owncast/Status bar',
+  component: StatusBar,
+  parameters: {},
+} as ComponentMeta<typeof StatusBar>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof StatusBar> = args => <StatusBar {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Online = Template.bind({});
+Online.args = {
+  online: true,
+  viewers: 42,
+  timer: '10:42',
+};
+
+export const Offline = Template.bind({});
+Offline.args = {
+  online: false,
+};

web/stories/UserDropdownMenu.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import UserDropdownMenu from '../components/UserDropdownMenu';
+
+export default {
+  title: 'owncast/User settings dropdown menu',
+  component: UserDropdownMenu,
+  parameters: {},
+} as ComponentMeta<typeof UserDropdownMenu>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof UserDropdownMenu> = args => <UserDropdownMenu />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example = Template.bind({});

web/stories/Video.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import OwncastPlayer from '../components/video/owncastplayer';
+import OwncastPlayer from '../components/video/OwncastPlayer';
 
 const streams = {
   DemoServer: `https://watch.owncast.online`,