Chore: Storybook organization and errors

.storybook/decorators.js

@@ -31,11 +31,20 @@ export const rocketChatDecorator = (fn) => {
 };
 
 export const fullHeightDecorator = (storyFn) =>
-	<div style={{ display: 'flex', flexDirection: 'column', maxHeight: '100vh' }}>
+	<div style={{
+		display: 'flex',
+		flexDirection: 'column',
+		maxHeight: '100vh',
+	}}>
 		{storyFn()}
 	</div>;
 
 export const centeredDecorator = (storyFn) =>
-	<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+	<div style={{
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		minHeight: '100vh',
+	}}>
 		{storyFn()}
 	</div>;

.storybook/mocks/providers.js

@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import React from 'react';
 
 import { TranslationContext } from '../../client/contexts/TranslationContext';
+import ServerProvider from '../../client/providers/ServerProvider';
 
 let contextValue;
 
@@ -61,7 +62,9 @@ function TranslationProviderMock({ children }) {
 }
 
 export function MeteorProviderMock({ children }) {
-	return <TranslationProviderMock>
-		{children}
-	</TranslationProviderMock>;
+	return <ServerProvider>
+		<TranslationProviderMock>
+			{children}
+		</TranslationProviderMock>
+	</ServerProvider>;
 }

client/components/Card/Body.js → client/components/Card/Body.tsx

@@ -1,7 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC, CSSProperties } from 'react';
 
-const Body = ({ children, flexDirection = 'row' }) => (
+const Body: FC<{ flexDirection: CSSProperties['flexDirection'] }> = ({
+	children,
+	flexDirection = 'row',
+}) => (
 	<Box mb='x8' display='flex' flexDirection={flexDirection} flexGrow={1}>
 		{children}
 	</Box>

client/components/Card/Card.stories.js

@@ -1,10 +1,10 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import Card from './Card';
+import Card from '.';
 
 export default {
-	title: 'components/basic/Card',
+	title: 'components/Card',
 	component: Card,
 };
 
@@ -74,7 +74,7 @@ export const Double = () => (
 							<Card.Icon name='cross' />A bunch of stuff
 						</Box>
 						<Box display='flex' flexDirection='row' alignItems='center'>
-							<Card.Icon name='num-pad' />A bunch of stuff
+							<Card.Icon name='dialpad' />A bunch of stuff
 						</Box>
 					</Box>
 					<Box>

client/components/Card/Card.js → client/components/Card/Card.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Card = ({ children, ...props }) => (
+const Card: FC = ({ children, ...props }) => (
 	<Box
 		display='flex'
 		flexDirection='column'

client/components/Card/CardDivider.tsx

@@ -0,0 +1,6 @@
+import { Divider } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const CardDivider: FC = () => <Divider width='x1' mi='x24' mb='none' alignSelf='stretch' />;
+
+export default CardDivider;

client/components/Card/CardIcon.js → client/components/Card/CardIcon.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const CardIcon = ({ name, children, ...props }) => (
+const CardIcon: FC<{ name: string }> = ({ name, children, ...props }) => (
 	<Box
 		minWidth='x16'
 		display='inline-flex'

client/components/Card/Col.js → client/components/Card/Col.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Col = ({ children }) => (
+const Col: FC = ({ children }) => (
 	<Box display='flex' alignSelf='stretch' w='x228' flexDirection='column' fontScale='c1'>
 		{children}
 	</Box>

client/components/Card/ColSection.js → client/components/Card/ColSection.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const ColSection = ({ children }) => (
+const ColSection: FC = ({ children }) => (
 	<Box mb='x8' color='info'>
 		{children}
 	</Box>

client/components/Card/ColTitle.js → client/components/Card/ColTitle.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const ColTitle = ({ children }) => (
+const ColTitle: FC = ({ children }) => (
 	<Box fontScale='c2' m='none'>
 		{children}
 	</Box>

client/components/Card/Footer.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const Footer: FC = ({ children }) => <Box mb='x8'>{children}</Box>;
+
+export default Footer;

client/components/Card/Title.js → client/components/Card/Title.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Title = ({ children }) => (
+const Title: FC = ({ children }) => (
 	<Box mb='x8' fontScale='p2'>
 		{children}
 	</Box>

client/components/Card/index.ts

@@ -8,6 +8,8 @@ import ColTitle from './ColTitle';
 import Footer from './Footer';
 import Title from './Title';
 
+export const DOUBLE_COLUMN_CARD_WIDTH = 552;
+
 export default Object.assign(Card, {
 	Title,
 	Body,
@@ -19,5 +21,3 @@ export default Object.assign(Card, {
 	Divider: CardDivider,
 	Icon: CardIcon,
 });
-
-export const DOUBLE_COLUMN_CARD_WIDTH = 552;

client/components/DotLeader.stories.js

@@ -4,7 +4,7 @@ import React from 'react';
 import DotLeader from './DotLeader';
 
 export default {
-	title: 'components/basic/DotLeader',
+	title: 'components/DotLeader',
 	component: DotLeader,
 };
 

client/components/Header/Header.stories.js

@@ -9,7 +9,7 @@ import RoomAvatar from '../avatar/RoomAvatar';
 import Header from './Header';
 
 export default {
-	title: 'Chat Header',
+	title: 'room/Header',
 	component: Header,
 };
 

client/components/Message/Attachments/components/Image.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Retry from './Retry';
 
 export default {
-	title: 'Image',
+	title: 'components/Image',
 	component: Image,
 };
 

client/components/Message/Metrics/Metrics.stories.js

@@ -5,7 +5,7 @@ import Reply from './Reply';
 import Metrics from './index';
 
 export default {
-	title: 'components/Message/Metrics',
+	title: 'message/Metrics',
 	component: Metrics,
 };
 

client/components/Page/PageScrollableContent.tsx

@@ -10,7 +10,14 @@ type PageScrollableContentProps = {
 const PageScrollableContent = forwardRef<HTMLElement, PageScrollableContentProps>(
 	function PageScrollableContent({ onScrollContent, ...props }, ref) {
 		return (
-			<Box display='flex' flexShrink={1} flexDirection='column' flexGrow={1} overflow='hidden'>
+			<Box
+				height='50vh'
+				display='flex'
+				flexShrink={1}
+				flexDirection='column'
+				flexGrow={1}
+				overflow='hidden'
+			>
 				<ScrollableContentWrapper
 					onScroll={onScrollContent as CustomScrollbarsProps['onScroll']}
 					ref={ref as any}

client/components/data/Counter.js

@@ -8,7 +8,15 @@ function Counter({ count, variation = 0, description }) {
 		<>
 			<Flex.Container alignItems='end'>
 				<Box>
-					<Box is='span' color='default' fontScale='h1' style={{ fontSize: '3em', lineHeight: 1 }}>
+					<Box
+						is='span'
+						color='default'
+						fontScale='h1'
+						style={{
+							fontSize: '3em',
+							lineHeight: 1,
+						}}
+					>
 						{count}
 					</Box>
 					<Growth fontScale='s1'>{variation}</Growth>

client/lib/asyncState/AsyncStatePhase.ts

@@ -1,4 +1,4 @@
-export const enum AsyncStatePhase {
+export enum AsyncStatePhase {
 	LOADING = 'loading',
 	RESOLVED = 'resolved',
 	REJECTED = 'rejected',

client/sidebar/Item/Condensed.js

@@ -5,6 +5,7 @@ import React, { memo, useState } from 'react';
 const Condensed = ({
 	icon,
 	title = '',
+	titleIcon,
 	avatar,
 	actions,
 	href,

client/sidebar/Item/Condensed.stories.js

@@ -6,7 +6,7 @@ import UserAvatar from '../../components/avatar/UserAvatar';
 import Condensed from './Condensed';
 
 export default {
-	title: 'Sidebar/condensed',
+	title: 'Sidebar/Condensed',
 	component: Condensed,
 };
 

client/sidebar/Item/Extended.js

@@ -14,6 +14,7 @@ const Extended = ({
 	menu,
 	menuOptions,
 	subtitle = '',
+	titleIcon,
 	badges,
 	threadUnread,
 	unread,

client/sidebar/Item/Extended.stories.js

@@ -78,7 +78,6 @@ export const Menu = () => (
 			clickable
 			title={title}
 			subtitle={subtitle}
-			w
 			titleIcon={<Box mi='x4'>{<Status.Online />}</Box>}
 			avatar={avatar}
 			menuOptions={{

client/sidebar/Item/Medium.js

@@ -5,6 +5,7 @@ import React, { memo, useState } from 'react';
 const Medium = ({
 	icon,
 	title = '',
+	titleIcon,
 	avatar,
 	actions,
 	href,

client/sidebar/Item/Medium.stories.js

@@ -6,7 +6,7 @@ import UserAvatar from '../../components/avatar/UserAvatar';
 import Medium from './Medium';
 
 export default {
-	title: 'Sidebar/medium',
+	title: 'Sidebar/Medium',
 	component: Medium,
 };
 

client/sidebar/Sidebar.stories.js

@@ -149,9 +149,9 @@ const Sidebar = () => (
 	<>
 		<SettingsContext.Provider value={settingContextValue}>
 			<UserContext.Provider value={userContextValue}>
-				<aside class='sidebar sidebar--main' role='navigation'>
+				<aside className='sidebar sidebar--main' role='navigation'>
 					<Header />
-					<div class='rooms-list sidebar--custom-colors' aria-label='Channels' role='region'>
+					<div className='rooms-list sidebar--custom-colors' aria-label='Channels' role='region'>
 						<RoomList />
 					</div>
 				</aside>

client/sidebar/hooks/useSidebarPaletteColor.js

@@ -138,7 +138,8 @@ const useTheme = () => {
 	return result;
 };
 
-const toVar = (color) => (color[0] === '#' ? color : oldPallet[color] || `var(--${color})`);
+const toVar = (color) =>
+	color && color[0] === '#' ? color : oldPallet[color] || `var(--${color})`;
 
 const getStyle = ((selector) => (colors) => `
 		${selector} {

client/views/admin/settings/inputs/MultiSelectSettingInput.stories.js

@@ -41,8 +41,10 @@ export const withValue = () => (
 		_id='setting_id'
 		label='Label'
 		placeholder='Placeholder'
-		value='1'
-		values={options}
+		value={[
+			[1, 'Lorem Ipsum'],
+			[2, 'Lorem Ipsum'],
+		]}
 	/>
 );
 

client/views/notFound/NotFoundPage.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import NotFoundPage from './NotFoundPage';
 
 export default {
-	title: 'views/notFound/NotFoundPage',
+	title: 'components/NotFoundPage',
 	component: NotFoundPage,
 };
 

client/views/omnichannel/analytics/DateRangePicker.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import DateRangePicker from './DateRangePicker';
 
 export default {
-	title: 'DateRange',
+	title: 'components/DateRangePicker',
 	component: DateRangePicker,
 };
 

client/views/omnichannel/installation/Installation.js

@@ -11,7 +11,7 @@ import Wrapper from './Wrapper';
 const Installation = () => {
 	const t = useTranslation();
 
-	const siteUrl = useSetting('Site_Url').replace(/\/$/, '');
+	const siteUrl = useSetting('Site_Url')?.replace(/\/$/, '');
 
 	const installString = `<!-- Start of Rocket.Chat Livechat Script -->
 	<script type="text/javascript">

client/views/room/Announcement/Announcement.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Announcement from '.';
 
 export default {
-	title: 'components/Announcement',
+	title: 'room/Announcement',
 	component: Announcement,
 };
 

client/views/room/Room.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { RoomTemplate } from './components/RoomTemplate/RoomTemplate';
 
 export default {
-	title: 'views/Room',
+	title: 'room',
 	component: RoomTemplate,
 };
 

client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.js

@@ -5,7 +5,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import AutoTranslate from './AutoTranslate';
 
 export default {
-	title: 'components/basic/AutoTranslate',
+	title: 'room/contextualBar/AutoTranslate',
 	component: AutoTranslate,
 };