upstream-rocketchat/apps/meteor/client/sidebar/Item/Extended.stories.tsx

import { Box, IconButton, Badge } from '@rocket.chat/fuselage';
import { UserAvatar } from '@rocket.chat/ui-avatar';
import type { Meta, StoryFn } from '@storybook/react';
import { action } from 'storybook/actions';

import Extended from './Extended';
import * as Status from '../../components/UserStatus';

export default {
	component: Extended,
	decorators: [
		(fn) => (
			<Box maxWidth='x300' backgroundColor='dark' borderRadius='x4'>
				{fn()}
			</Box>
		),
	],
} satisfies Meta<typeof Extended>;

const Template: StoryFn<typeof Extended> = (args) => (
	<Extended
		{...args}
		title='John Doe'
		subtitle={
			<Box display='flex' flexDirection='row' width='full' alignItems='center'>
				<Box flexGrow='1' withTruncatedText>
					John Doe: test 123
				</Box>
				<Badge
					{...({
						style: {
							backgroundColor: '#6c727a',
							color: 'var(--rcx-color-surface, white)',
							flexShrink: 0,
						},
					} as any)}
				>
					99
				</Badge>
			</Box>
		}
		titleIcon={
			<Box marginInline={4}>
				<Status.Online />
			</Box>
		}
		avatar={<UserAvatar username='john.doe' size='x16' url='https://via.placeholder.com/16' />}
	/>
);

export const Normal = {
	render: Template,
};

export const Selected = {
	render: Template,

	args: {
		selected: true,
	},
};

export const Menu = {
	render: Template,

	args: {
		menuOptions: {
			hide: {
				label: { label: 'Hide', icon: 'eye-off' },
				action: action('action'),
			},
			read: {
				label: { label: 'Mark_read', icon: 'flag' },
				action: action('action'),
			},
			favorite: {
				label: { label: 'Favorite', icon: 'star' },
				action: action('action'),
			},
		},
	},
};

export const Actions = {
	render: Template,

	args: {
		actions: (
			<>
				<IconButton secondary success icon='phone' />
				<IconButton secondary danger icon='circle-cross' />
				<IconButton secondary info icon='trash' />
				<IconButton secondary icon='phone' />
			</>
		),
	},
};