Chore: Convert VerticalBar component to typescript (#22542)

* improve: component to ts

* fix: review

* Merge branch 'develop' into improve/vertical-bar

* fix: types

Co-authored-by: gabriellsh <[email protected]>
Co-authored-by: Tasso Evangelista <[email protected]>

app/threads/client/components/ThreadComponent.tsx

@@ -70,7 +70,7 @@ const ThreadComponent: FC<{
 
 	const openUserInfo = useTabBarOpenUserInfo();
 
-	const ref = useRef<Element>(null);
+	const ref = useRef<HTMLElement>(null);
 	const uid = useUserId();
 
 	const headerTitle = useMemo(() => (threadMessage ? normalizeThreadTitle(threadMessage) : null), [threadMessage]);

app/threads/client/components/ThreadView.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useMemo, forwardRef } from 'react';
+import React, { ComponentProps, useCallback, useMemo, forwardRef } from 'react';
 import { Modal, Box } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useLayoutContextualBarExpanded } from '../../../../client/providers/LayoutProvider';
 import VerticalBar from '../../../../client/components/VerticalBar';
 
-type ThreadViewProps = {
+type ThreadViewProps = ComponentProps<typeof Box> & {
 	title: string;
 	expanded: boolean;
 	following: boolean;
@@ -15,7 +15,7 @@ type ThreadViewProps = {
 	onClickBack: (e: unknown) => void;
 };
 
-const ThreadView = forwardRef<Element, ThreadViewProps>(({
+const ThreadView = forwardRef<HTMLElement, ThreadViewProps>(({
 	title,
 	expanded,
 	following,

client/components/VerticalBar/VerticalBar.js → client/components/VerticalBar/VerticalBar.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { memo } from 'react';
+import React, { FC, ComponentProps, memo } from 'react';
 
 import { useLayoutContextualBarPosition, useLayoutSizes } from '../../providers/LayoutProvider';
 
-function VerticalBar({ children, ...props }) {
+const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, ...props }) => {
 	const sizes = useLayoutSizes();
 	const position = useLayoutContextualBarPosition();
 	return (
@@ -27,6 +27,6 @@ function VerticalBar({ children, ...props }) {
 			{children}
 		</Box>
 	);
-}
+};
 
 export default memo(VerticalBar);

client/components/VerticalBar/VerticalBarAction.tsx

@@ -0,0 +1,13 @@
+import { ActionButton } from '@rocket.chat/fuselage';
+import React, { ReactElement, memo, MouseEventHandler } from 'react';
+
+const VerticalBarAction = ({
+	name,
+	...props
+}: {
+	name: string;
+	title?: string;
+	onClick?: MouseEventHandler<HTMLOrSVGElement>;
+}): ReactElement => <ActionButton flexShrink={0} icon={name} ghost {...props} tiny />;
+
+export default memo(VerticalBarAction);

client/components/VerticalBar/VerticalBarActionBack.tsx

@@ -0,0 +1,9 @@
+import React, { ReactElement, memo, ComponentProps } from 'react';
+
+import VerticalBarAction from './VerticalBarAction';
+
+const VerticalBarActionBack = (props: ComponentProps<typeof VerticalBarAction>): ReactElement => (
+	<VerticalBarAction {...props} name='arrow-back' />
+);
+
+export default memo(VerticalBarActionBack);

client/components/VerticalBar/VerticalBarActions.tsx

@@ -0,0 +1,8 @@
+import { ButtonGroup } from '@rocket.chat/fuselage';
+import React, { memo, ReactElement, ComponentProps } from 'react';
+
+const VerticalBarActions = (props: ComponentProps<typeof ButtonGroup>): ReactElement => (
+	<ButtonGroup medium {...props} />
+);
+
+export default memo(VerticalBarActions);

client/components/VerticalBar/VerticalBarButton.tsx

@@ -0,0 +1,8 @@
+import { Button } from '@rocket.chat/fuselage';
+import React, { ComponentProps, memo, ReactElement } from 'react';
+
+const VerticalBarButton = (props: ComponentProps<typeof Button>): ReactElement => (
+	<Button small square flexShrink={0} ghost {...props} />
+);
+
+export default memo(VerticalBarButton);

client/components/VerticalBar/VerticalBarClose.js → client/components/VerticalBar/VerticalBarClose.tsx

@@ -1,11 +1,13 @@
-import React, { memo } from 'react';
+import React, { memo, ComponentProps, ReactElement } from 'react';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import VerticalBarAction from './VerticalBarAction';
 
-function VerticalBarClose(props) {
+type VerticalBarCloseProps = Partial<ComponentProps<typeof VerticalBarAction>>;
+
+const VerticalBarClose = (props: VerticalBarCloseProps): ReactElement => {
 	const t = useTranslation();
 	return <VerticalBarAction {...props} title={t('Close')} name='cross' />;
-}
+};
 
 export default memo(VerticalBarClose);

client/components/VerticalBar/VerticalBarContent.tsx

@@ -0,0 +1,11 @@
+import React, { ComponentProps, forwardRef, memo } from 'react';
+
+import Page from '../Page';
+
+const VerticalBarContent = forwardRef<HTMLElement, ComponentProps<typeof Page.Content>>(
+	function VerticalBarContent(props, ref) {
+		return <Page.Content rcx-vertical-bar__content display='flex' {...props} ref={ref} />;
+	},
+);
+
+export default memo(VerticalBarContent);

client/components/VerticalBar/VerticalBarFooter.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { forwardRef, ComponentProps, memo } from 'react';
+
+const VerticalBarFooter = forwardRef<HTMLElement, ComponentProps<typeof Box>>(
+	function VerticalBarFooter({ children, ...props }, ref) {
+		return (
+			<Box is='footer' p='x24' {...props} ref={ref}>
+				{children}
+			</Box>
+		);
+	},
+);
+
+export default memo(VerticalBarFooter);

client/components/VerticalBar/VerticalBarHeader.tsx

@@ -0,0 +1,34 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import React, { FC, memo, ReactNode, ComponentProps } from 'react';
+
+const VerticalBarHeader: FC<{ children: ReactNode; props?: ComponentProps<typeof Box> }> = ({
+	children,
+	...props
+}) => (
+	<Box
+		display='flex'
+		alignItems='center'
+		minHeight='56px'
+		maxHeight='56px'
+		is='h3'
+		pi='x24'
+		borderBlockEndWidth='x2'
+		borderBlockColor='neutral-200'
+		{...props}
+	>
+		<Box
+			marginInline='neg-x4'
+			display='flex'
+			alignItems='center'
+			justifyContent='space-between'
+			fontScale='s2'
+			flexGrow={1}
+			overflow='hidden'
+			color='neutral-800'
+		>
+			<Margins inline='x4'>{children}</Margins>
+		</Box>
+	</Box>
+);
+
+export default memo(VerticalBarHeader);

client/components/VerticalBar/VerticalBarIcon.tsx

@@ -0,0 +1,8 @@
+import { Icon } from '@rocket.chat/fuselage';
+import React, { ReactElement, ComponentProps, memo } from 'react';
+
+const VerticalBarIcon = (props: ComponentProps<typeof Icon>): ReactElement => (
+	<Icon {...props} pi='x2' size='x24' />
+);
+
+export default memo(VerticalBarIcon);

client/components/VerticalBar/VerticalBarInnerContent.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement, memo, ComponentProps } from 'react';
+
+const VerticalBarInnerContent = (props: ComponentProps<typeof Box>): ReactElement => (
+	<Box
+		rcx-vertical-bar--inner-content
+		position='absolute'
+		height='full'
+		display='flex'
+		insetInline={0}
+		{...props}
+	/>
+);
+
+export default memo(VerticalBarInnerContent);

client/components/VerticalBar/VerticalBarScrollableContent.js → client/components/VerticalBar/VerticalBarScrollableContent.tsx

@@ -1,12 +1,12 @@
 import { Margins } from '@rocket.chat/fuselage';
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, ComponentProps } from 'react';
 
 import Page from '../Page';
 
-const VerticalBarScrollableContent = forwardRef(function VerticalBarScrollableContent(
-	{ children, ...props },
-	ref,
-) {
+const VerticalBarScrollableContent = forwardRef<
+	HTMLElement,
+	ComponentProps<typeof Page.ScrollableContent>
+>(function VerticalBarScrollableContent({ children, ...props }, ref) {
 	return (
 		<Page.ScrollableContent p='x24' {...props} ref={ref}>
 			<Margins blockEnd='x16'>{children}</Margins>

client/components/VerticalBar/VerticalBarSkeleton.tsx

@@ -0,0 +1,23 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import React, { ReactElement, ComponentProps, memo } from 'react';
+
+import VerticalBar from './VerticalBar';
+import VerticalBarHeader from './VerticalBarHeader';
+
+const VerticalBarSkeleton = (props: ComponentProps<typeof Box>): ReactElement => (
+	<VerticalBar {...props} width='100%'>
+		<VerticalBarHeader>
+			<Skeleton width='100%' />
+		</VerticalBarHeader>
+		<Box p='x24'>
+			<Skeleton width='32px' height='32px' variant='rect' /> <Skeleton />
+			{Array(5)
+				.fill(5)
+				.map((_, index) => (
+					<Skeleton key={index} />
+				))}
+		</Box>
+	</VerticalBar>
+);
+
+export default memo(VerticalBarSkeleton);