owncast/web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.stories.tsx
James Young d1f3fffe2f
reafctor: normalize component formatting (#2082)
* refactor: move/rename BanUserButton file

* refactor: move/rename Chart file

* refactor: update generic component filenames to PascalCase

* refactor: update config component filenames to PascalCase

* refactor: update AdminLayout component filename to PascalCase

* refactor: update/move VideoJS component

* chore(eslint): disable bad react/require-default-props rule

* refactor: normalize ActionButton component

* refactor: normalize ActionButtonRow component

* refactor: normalize FollowButton component

* refactor: normalize NotifyButton component

* refactor: normalize ChatActionMessage component

* refactor: normalize ChatContainer component

* refactor: normalize ChatJoinMessage component

* refactor: normalize ChatModerationActionMenu component

* refactor: normalize ChatModerationDetailsModal component

* refactor: normalize ChatModeratorNotification component

* refactor: normalize ChatSocialMessage component

* refactor: normalize ChatSystemMessage component

* refactor: normalize ChatTextField component

* refactor: normalize ChatUserBadge component

* refactor: normalize ChatUserMessage component

* refactor: normalize ContentHeader component

* refactor: normalize OwncastLogo component

* refactor: normalize UserDropdown component

* chore(eslint): modify react/function-component-definition rule

* refactor: normalize CodecSelector component

* refactor: update a bunch of functional components using eslint

* refactor: update a bunch of functional components using eslint, pt2

* refactor: update a bunch of functional components using eslint, pt3

* refactor: replace all component->component default imports with named imports

* refactor: replace all component-stories->component default imports with named imports

* refactor: remove default exports from most components

* chore(eslint): add eslint config files for the components and pages dirs

* fix: use-before-define error in ChatContainer

* Fix ChatContainer import

* Only process .tsx files in Next builds

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2022-09-07 00:00:28 -07:00

92 lines
2.7 KiB
TypeScript

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { ChatModerationDetailsModal } from './ChatModerationDetailsModal';
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 modal',
component: ChatModerationDetailsModal,
parameters: {
fetchMock: mocks,
docs: {
description: {
component: `This should be a modal that gives the moderator more details about the user such as:
- When the user was created
- Other names they've used
- If they're authenticated, and using what method (IndieAuth, FediAuth)
`,
},
},
},
} as ComponentMeta<typeof ChatModerationDetailsModal>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof ChatModerationDetailsModal> = () => (
<RecoilRoot>
<ChatModerationDetailsModal userId="testuser123" accessToken="fakeaccesstoken4839" />
</RecoilRoot>
);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Example = Template.bind({});