Fill out some more components + add application state enums
This commit is contained in:
Gabe Kangas
File diff suppressed because one or more lines are too long
@@ -2,12 +2,6 @@ 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,
|
||||
@@ -15,7 +9,7 @@ export default {
|
||||
} as ComponentMeta<typeof ChatTextField>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatTextField> = args => <Example />;
|
||||
const Template: ComponentStory<typeof ChatTextField> = args => <ChatTextField />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
||||
export const Example = Template.bind({});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import UserChatMessage from '../components/chat/ChatUserMessage';
|
||||
import { ChatMessage } from '../interfaces/chat-message.model';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Messages/Standard user',
|
||||
@@ -8,8 +9,74 @@ export default {
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof UserChatMessage>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage />;
|
||||
const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage {...args} />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
||||
const standardMessage: ChatMessage = JSON.parse(`{
|
||||
"type": "CHAT",
|
||||
"id": "wY-MEXwnR",
|
||||
"timestamp": "2022-04-28T20:30:27.001762726Z",
|
||||
"user": {
|
||||
"id": "h_5GQ6E7R",
|
||||
"displayName": "EliteMooseTaskForce",
|
||||
"displayColor": 329,
|
||||
"createdAt": "2022-03-24T03:52:37.966584694Z",
|
||||
"previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
|
||||
"nameChangedAt": "2022-04-26T23:56:05.531287897Z",
|
||||
"scopes": []
|
||||
},
|
||||
"body": "Test message from a regular user."}`);
|
||||
|
||||
const moderatorMessage: ChatMessage = JSON.parse(`{
|
||||
"type": "CHAT",
|
||||
"id": "wY-MEXwnR",
|
||||
"timestamp": "2022-04-28T20:30:27.001762726Z",
|
||||
"user": {
|
||||
"id": "h_5GQ6E7R",
|
||||
"displayName": "EliteMooseTaskForce",
|
||||
"displayColor": 329,
|
||||
"createdAt": "2022-03-24T03:52:37.966584694Z",
|
||||
"previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
|
||||
"nameChangedAt": "2022-04-26T23:56:05.531287897Z",
|
||||
"scopes": ["moderator"]
|
||||
},
|
||||
"body": "I am a moderator user."}`);
|
||||
|
||||
const authenticatedUserMessage: ChatMessage = JSON.parse(`{
|
||||
"type": "CHAT",
|
||||
"id": "wY-MEXwnR",
|
||||
"timestamp": "2022-04-28T20:30:27.001762726Z",
|
||||
"user": {
|
||||
"id": "h_5GQ6E7R",
|
||||
"displayName": "EliteMooseTaskForce",
|
||||
"displayColor": 329,
|
||||
"createdAt": "2022-03-24T03:52:37.966584694Z",
|
||||
"previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
|
||||
"nameChangedAt": "2022-04-26T23:56:05.531287897Z",
|
||||
"authenticated": true,
|
||||
"scopes": []
|
||||
},
|
||||
"body": "I am an authenticated user."}`);
|
||||
|
||||
export const WithoutModeratorMenu = Template.bind({});
|
||||
WithoutModeratorMenu.args = {
|
||||
message: standardMessage,
|
||||
showModeratorMenu: false,
|
||||
};
|
||||
|
||||
export const WithModeratorMenu = Template.bind({});
|
||||
WithModeratorMenu.args = {
|
||||
message: standardMessage,
|
||||
showModeratorMenu: true,
|
||||
};
|
||||
|
||||
export const FromModeratorUser = Template.bind({});
|
||||
FromModeratorUser.args = {
|
||||
message: moderatorMessage,
|
||||
showModeratorMenu: false,
|
||||
};
|
||||
|
||||
export const FromAuthenticatedUser = Template.bind({});
|
||||
FromAuthenticatedUser.args = {
|
||||
message: authenticatedUserMessage,
|
||||
showModeratorMenu: false,
|
||||
};
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="0">
|
||||
<a href="https://owncast.online">1st menu item</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="1">
|
||||
<a href="https://directory.owncast.online">2nd menu item</a>
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item key="3">3rd menu item</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const DropdownExample = () => (
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<button type="button" className="ant-dropdown-link" onClick={e => e.preventDefault()}>
|
||||
Click me <DownOutlined />
|
||||
</button>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'example/Dropdown',
|
||||
component: Dropdown,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Dropdown>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof Dropdown> = args => <DropdownExample />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
||||
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import FollowerCollection from '../components/FollowersCollection';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Follower collection',
|
||||
title: 'owncast/Followers collection',
|
||||
component: FollowerCollection,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof FollowerCollection>;
|
||||
@@ -16,46 +16,215 @@ export const Example = Template.bind({});
|
||||
Example.args = {
|
||||
followers: [
|
||||
{
|
||||
name: 'John Doe',
|
||||
description: 'User',
|
||||
username: '@account@domain.tld',
|
||||
image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
|
||||
link: 'https://yahoo.com',
|
||||
link: 'https://sun.minuscule.space/users/mardijker',
|
||||
name: 'mardijker',
|
||||
username: 'mardijker@sun.minuscule.space',
|
||||
image:
|
||||
'https://sun.minuscule.space/media/336af7ae5a2bcb508308eddb30b661ee2b2e15004a50795ee3ba0653ab190a93.jpg',
|
||||
timestamp: '2022-04-27T12:12:50Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
description: 'User',
|
||||
username: '@account@domain.tld',
|
||||
image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
|
||||
link: 'https://yahoo.com',
|
||||
link: 'https://mastodon.online/users/Kallegro',
|
||||
name: '',
|
||||
username: 'Kallegro@mastodon.online',
|
||||
image: '',
|
||||
timestamp: '2022-04-26T15:24:09Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
description: 'User',
|
||||
username: '@account@domain.tld',
|
||||
image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
|
||||
link: 'https://yahoo.com',
|
||||
link: 'https://mastodon.online/users/kerfuffle',
|
||||
name: 'Kerfuffle',
|
||||
username: 'kerfuffle@mastodon.online',
|
||||
image:
|
||||
'https://files.mastodon.online/accounts/avatars/000/133/698/original/6aa73caa898b2d36.gif',
|
||||
timestamp: '2022-04-25T21:32:41Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
description: 'User',
|
||||
username: '@account@domain.tld',
|
||||
image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
|
||||
link: 'https://yahoo.com',
|
||||
link: 'https://mastodon.uno/users/informapirata',
|
||||
name: 'informapirata :privacypride:',
|
||||
username: 'informapirata@mastodon.uno',
|
||||
image:
|
||||
'https://cdn.masto.host/mastodonuno/accounts/avatars/000/060/227/original/da4c44c716a339b8.png',
|
||||
timestamp: '2022-04-25T11:38:23Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
description: 'User',
|
||||
username: '@account@domain.tld',
|
||||
image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
|
||||
link: 'https://yahoo.com',
|
||||
link: 'https://gamethattune.club/users/Raeanus',
|
||||
name: 'Raeanus',
|
||||
username: 'Raeanus@gamethattune.club',
|
||||
image:
|
||||
'https://gamethattune.club/media/a6e6ccea-34f8-4c2e-b9dc-ad8cca7fafd3/DD14E3BF-1358-4961-A900-42F3495F6BE2.jpeg',
|
||||
timestamp: '2022-04-23T00:46:56Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
description: 'User',
|
||||
username: '@account@domain.tld',
|
||||
image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
|
||||
link: 'https://yahoo.com',
|
||||
link: 'https://mastodon.ml/users/latte',
|
||||
name: 'Даниил',
|
||||
username: 'latte@mastodon.ml',
|
||||
image:
|
||||
'https://mastodon.ml/system/accounts/avatars/107/837/409/059/601/386/original/c45ec2676489e363.png',
|
||||
timestamp: '2022-04-19T13:06:09Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://wienermobile.rentals/users/jprjr',
|
||||
name: 'Johnny',
|
||||
username: 'jprjr@wienermobile.rentals',
|
||||
image: '',
|
||||
timestamp: '2022-04-14T14:48:11Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/johnny',
|
||||
name: 'John Regan',
|
||||
username: 'johnny@gamethattune.club',
|
||||
image:
|
||||
'https://gamethattune.club/media/3c10cd89-866b-4604-ae40-39387fe17061/profile_large.jpg',
|
||||
timestamp: '2022-04-14T14:42:48Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://mastodon.social/users/MightyOwlbear',
|
||||
name: 'Haunted Owlbear',
|
||||
username: 'MightyOwlbear@mastodon.social',
|
||||
image:
|
||||
'https://files.mastodon.social/accounts/avatars/107/246/961/007/605/352/original/a86fc3db97a6de04.jpg',
|
||||
timestamp: '2022-04-14T13:33:03Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/thelinkfloyd',
|
||||
name: 'thelinkfloyd',
|
||||
username: 'thelinkfloyd@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-04-05T12:23:32Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/TheBaffler',
|
||||
name: 'TheBaffler',
|
||||
username: 'TheBaffler@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-04-04T19:50:08Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/Gttjessie',
|
||||
name: 'Gttjessie',
|
||||
username: 'Gttjessie@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-03-30T20:18:47Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://cybre.space/users/fractal',
|
||||
name: 'Le fractal',
|
||||
username: 'fractal@cybre.space',
|
||||
image:
|
||||
'https://cybre.ams3.digitaloceanspaces.com/accounts/avatars/000/405/126/original/f1f2832a7bf1a967.png',
|
||||
timestamp: '2022-03-30T19:46:17Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://fosstodon.org/users/jumboshrimp',
|
||||
name: 'alex 👑🦐',
|
||||
username: 'jumboshrimp@fosstodon.org',
|
||||
image: 'https://cdn.fosstodon.org/accounts/avatars/000/320/316/original/de43cda8653ade7f.jpg',
|
||||
timestamp: '2022-03-30T18:09:54Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/nvrslep303',
|
||||
name: 'Tay',
|
||||
username: 'nvrslep303@gamethattune.club',
|
||||
image: 'https://gamethattune.club/media/5cf9bc27-8821-445a-86ce-8aa3704acf2d/pfp.jpg',
|
||||
timestamp: '2022-03-30T15:27:49Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/anKerrigan',
|
||||
name: 'anKerrigan',
|
||||
username: 'anKerrigan@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-03-30T14:47:04Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/jgangsta187',
|
||||
name: 'jgangsta187',
|
||||
username: 'jgangsta187@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-03-30T14:42:52Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/aekre',
|
||||
name: 'aekre',
|
||||
username: 'aekre@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-03-30T14:41:32Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://gamethattune.club/users/mork',
|
||||
name: 'mork',
|
||||
username: 'mork@gamethattune.club',
|
||||
image: '',
|
||||
timestamp: '2022-03-30T14:37:10Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://fosstodon.org/users/owncast',
|
||||
name: 'Owncast',
|
||||
username: 'owncast@fosstodon.org',
|
||||
image:
|
||||
'https://cdn.fosstodon.org/accounts/avatars/107/017/218/425/829/465/original/f98ba4cd61f483ab.png',
|
||||
timestamp: '2022-03-29T21:38:02Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://cybre.space/users/wklew',
|
||||
name: 'wally',
|
||||
username: 'wklew@cybre.space',
|
||||
image:
|
||||
'https://cybre.ams3.digitaloceanspaces.com/accounts/avatars/000/308/727/original/7453e74f3e09b27b.jpg',
|
||||
timestamp: '2022-03-29T18:24:29Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://mastodon.social/users/nvrslep303',
|
||||
name: 'Tay',
|
||||
username: 'nvrslep303@mastodon.social',
|
||||
image:
|
||||
'https://files.mastodon.social/accounts/avatars/108/041/196/166/285/851/original/fc444dd6096381af.jpg',
|
||||
timestamp: '2022-03-29T18:19:31Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://mastodon.social/users/morky',
|
||||
name: '',
|
||||
username: 'morky@mastodon.social',
|
||||
image: '',
|
||||
timestamp: '2022-03-29T18:17:59Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://mastodon.social/users/jgangsta187',
|
||||
name: 'John H.',
|
||||
username: 'jgangsta187@mastodon.social',
|
||||
image: '',
|
||||
timestamp: '2022-03-29T18:15:48Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
{
|
||||
link: 'https://fosstodon.org/users/meisam',
|
||||
name: 'Meisam 🇪🇺:archlinux:',
|
||||
username: 'meisam@fosstodon.org',
|
||||
image: 'https://cdn.fosstodon.org/accounts/avatars/000/264/096/original/54b4e6db97206bda.jpg',
|
||||
timestamp: '2022-03-29T18:12:21Z',
|
||||
disabledAt: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,15 +1,32 @@
|
||||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import UserDropdownMenu from '../components/UserDropdownMenu';
|
||||
import { ChatState } from '../interfaces/application-state';
|
||||
|
||||
export default {
|
||||
title: 'owncast/User settings dropdown menu',
|
||||
title: 'owncast/User settings menu',
|
||||
component: UserDropdownMenu,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof UserDropdownMenu>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof UserDropdownMenu> = args => <UserDropdownMenu />;
|
||||
// This component uses Recoil internally so wrap it in a RecoilRoot.
|
||||
const Example = args => (
|
||||
<RecoilRoot>
|
||||
<UserDropdownMenu {...args} />
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Example = Template.bind({});
|
||||
const Template: ComponentStory<typeof UserDropdownMenu> = args => <Example {...args} />;
|
||||
|
||||
export const ChatEnabled = Template.bind({});
|
||||
ChatEnabled.args = {
|
||||
username: 'test-user',
|
||||
chatState: ChatState.Available,
|
||||
};
|
||||
|
||||
export const ChatDisabled = Template.bind({});
|
||||
ChatDisabled.args = {
|
||||
username: 'test-user',
|
||||
chatState: ChatState.NotAvailable,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user