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
2025-11-03 04:27:18 +08:00 · 2022-09-03 20:38:52 +02:00
parent 9f550a87d2
commit 5ebbbb8bf2
82 changed files with 120 additions and 121 deletions
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.stories.tsx
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.stories.tsx
@ -0,0 +1,97 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import ChatModerationActionMenu from './ChatModerationActionMenu';
+
+const mocks = {
+  mocks: [
+    {
+      // The "matcher" determines if this
+      // mock should respond to the current
+      // call to fetch().
+      matcher: {
+        name: 'response',
+        url: 'glob:/api/moderation/chat/user/*',
+      },
+      // If the "matcher" matches the current
+      // fetch() call, the fetch response is
+      // built using this "response".
+      response: {
+        status: 200,
+        body: {
+          user: {
+            id: 'hjFPU967R',
+            displayName: 'focused-snyder',
+            displayColor: 2,
+            createdAt: '2022-07-12T13:08:31.406505322-07:00',
+            previousNames: ['focused-snyder'],
+            scopes: ['MODERATOR'],
+            isBot: false,
+            authenticated: false,
+          },
+          connectedClients: [
+            {
+              messageCount: 3,
+              userAgent:
+                'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36',
+              connectedAt: '2022-07-20T16:45:07.796685618-07:00',
+              geo: 'N/A',
+            },
+          ],
+          messages: [
+            {
+              id: 'bQp8UJR4R',
+              timestamp: '2022-07-20T16:53:41.938083228-07:00',
+              user: null,
+              body: 'test message 3',
+            },
+            {
+              id: 'ubK88Jg4R',
+              timestamp: '2022-07-20T16:53:39.675531279-07:00',
+              user: null,
+              body: 'test message 2',
+            },
+            {
+              id: '20v8UJRVR',
+              timestamp: '2022-07-20T16:53:37.551084121-07:00',
+              user: null,
+              body: 'test message 1',
+            },
+          ],
+        },
+      },
+    },
+  ],
+};
+
+export default {
+  title: 'owncast/Chat/Moderation menu',
+  component: ChatModerationActionMenu,
+  parameters: {
+    fetchMock: mocks,
+    docs: {
+      description: {
+        component: `This should be a popup that is activated from a user's chat message. It should have actions to:
+- Remove single message
+- Ban user completely
+- Open modal to see user details
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatModerationActionMenu>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatModerationActionMenu> = args => (
+  <RecoilRoot>
+    <ChatModerationActionMenu
+      accessToken="abc123"
+      messageID="xxx"
+      userDisplayName="Fake-User"
+      userID="abc123"
+    />
+  </RecoilRoot>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});