Migrated Storybook notation from CSF2 to CSF3 (#3412)

* Migrate web action-buttons directory to CSF3 notation

* Migrate web chat directory to CSF3 notation

* Migrate web common directory to CSF3 notation

* Migrate web layout directory to CSF3 notation

* Migrate web modals directory to CSF3 notation

* Migrate web ui directory to CSF3 notation

* Migrate web video directory to CSF3 notation

* Migrate web stories directory to CSF3 notation
This commit is contained in:
kame
2023-11-07 12:35:05 +09:00
committed by GitHub
parent b08511b9d1
commit 4f078e1ee4
44 changed files with 975 additions and 789 deletions

View File

@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { useState } from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { ChatContainer } from './ChatContainer';
import { ChatMessage } from '../../../interfaces/chat-message.model';
export default {
const meta = {
title: 'owncast/Chat/Chat messages container',
component: ChatContainer,
parameters: {
@@ -19,7 +19,9 @@ export default {
},
},
},
} as ComponentMeta<typeof ChatContainer>;
} satisfies Meta<typeof ChatContainer>;
export default meta;
const testMessages = `[
{
@@ -586,37 +588,46 @@ const AddMessagesChatExample = args => {
);
};
const Template: ComponentStory<typeof ChatContainer> = args => <AddMessagesChatExample {...args} />;
const Template: StoryFn<typeof ChatContainer> = args => <AddMessagesChatExample {...args} />;
export const Example = Template.bind({});
Example.args = {
loading: false,
messages,
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: true,
export const Example = {
render: Template,
args: {
loading: false,
messages,
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: true,
},
};
export const ChatDisabled = Template.bind({});
ChatDisabled.args = {
loading: false,
messages,
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: false,
export const ChatDisabled = {
render: Template,
args: {
loading: false,
messages,
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: false,
},
};
export const SingleMessage = Template.bind({});
SingleMessage.args = {
loading: false,
messages: [messages[0]],
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: true,
export const SingleMessage = {
render: Template,
args: {
loading: false,
messages: [messages[0]],
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: true,
},
};