chore: update package dependencies

.prettierrc

@@ -8,6 +8,7 @@
   "trailingComma": "all",
   "bracketSpacing": true,
   "arrowParens": "always",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "importOrder": ["<THIRD_PARTY_MODULES>", "@sendbird[./]?", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,

docs-validation/3_core-components/Provider/PlatformServiceProvider.tsx

@@ -1,4 +1,5 @@
 import type { MediaServiceInterface } from '@sendbird/uikit-react-native';
+import type { ReactNode } from 'react';
 
 const isMediaFile = (_: string) => 0;
 const MyDocumentPickerModule = {
@@ -34,7 +35,7 @@ async function fileServiceInterface(service: FileServiceInterface) {
  * {@link }
  * */
 async function mediaServiceInterface(service: MediaServiceInterface) {
-  const jsx: JSX.Element = service.VideoComponent({
+  const jsx: ReactNode = service.VideoComponent({
     source: 0 as number | { uri: string },
     resizeMode: '' as 'cover' | 'stretch' | 'contain' | undefined,
     onLoad: () => 0,

docs-validation/package.json

@@ -31,9 +31,8 @@
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/jest": "^26.0.23",
-    "@types/react": "^18.0.15",
+    "@types/react": "*",
     "@types/react-native": "*",
-    "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "babel-jest": "^26.6.3",
@@ -44,6 +43,6 @@
     "react-dom": "17.0.2",
     "react-native-monorepo-tools": "^1.1.4",
     "react-test-renderer": "17.0.2",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   }
 }

package.json

@@ -39,31 +39,31 @@
   },
   "devDependencies": {
     "@testing-library/react-native": "11",
-    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.1",
     "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "babel-jest": "^29.4.3",
     "chalk": "^4",
     "concurrently": "^8.0.1",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "del-cli": "^4.0.1",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
     "jest": "^29.4.3",
     "lerna": "^5.1.6",
     "node-fetch": "2.x",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.8",
     "react": "17.0.2",
     "react-native": "0.67.5",
     "react-native-builder-bob": "^0.18.2",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
     "react-test-renderer": "^17.0.2",
-    "typedoc": "^0.23.7",
-    "typescript": "4.9.4"
+    "typedoc": "^0.25.3",
+    "typescript": "5.2.2"
   },
   "jest": {
     "preset": "react-native",
@@ -96,6 +96,8 @@
     ]
   },
   "resolutions": {
-    "@sendbird/chat": "4.9.8"
+    "@sendbird/chat": "4.9.8",
+    "@types/react": "^18",
+    "@types/react-native": "^0.67"
   }
 }

packages/uikit-chat-hooks/package.json

@@ -51,7 +51,7 @@
     "@types/react": "*",
     "react": "17.0.2",
     "react-native-builder-bob": "^0.18.0",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "@sendbird/chat": "^4.9.8",

packages/uikit-react-native-foundation/package.json

@@ -57,7 +57,7 @@
     "react-native-builder-bob": "^0.18.0",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "react": ">=17.0.2",

packages/uikit-react-native-foundation/src/components/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { FileType, convertFileTypeToMessageType, getFileIconFromMessageType } from '@sendbird/uikit-utils';
@@ -17,7 +17,7 @@ type Props = {
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Icon: ((props: Props) => JSX.Element) & {
+const Icon: ((props: Props) => ReactNode) & {
   Assets: typeof IconAssets;
   File: typeof FileIcon;
 } = ({ icon, color, size = 24, containerStyle, style }) => {

packages/uikit-react-native-foundation/src/components/Image/FastImageInternal.tsx

@@ -1,9 +1,10 @@
+import type { ReactNode } from 'react';
 import type { FastImageProps } from 'react-native-fast-image';
 
-let FastImageInternal: (props: FastImageProps) => JSX.Element | null = () => null;
+let FastImageInternal: (props: FastImageProps) => ReactNode | null = () => null;
 
 try {
-  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
+  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => ReactNode;
 } catch {}
 
 export default FastImageInternal;

packages/uikit-react-native-foundation/src/components/Image/index.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import type { ImageProps as NativeImageProps } from 'react-native';
 import { NativeModules } from 'react-native';
 
@@ -7,7 +8,7 @@ export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'o
   tintColor?: string;
 }
 
-export type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
+export type SendbirdImageComponent = (props: SendbirdImageProps) => ReactNode;
 
 function getImageModule(): SendbirdImageComponent {
   const hasFastImage = Boolean(NativeModules.FastImageView);

packages/uikit-react-native-foundation/src/components/RegexText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { replaceWithRegex } from '@sendbird/uikit-utils';
 
@@ -12,15 +12,15 @@ export interface RegexTextPattern {
     index: number;
     keyPrefix: string;
     parentProps?: TextProps;
-  }): string | JSX.Element;
+  }): string | ReactNode;
 }
 
 type Props = { patterns: RegexTextPattern[] } & TextProps;
 
 const RegexText = ({ children, patterns, ...props }: Props) => {
   if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;
 
-  const matchedTexts: Array<string | JSX.Element> = [children];
+  const matchedTexts: Array<string | ReactNode> = [children];
 
   patterns.forEach(({ regex, replacer }, patterIndex) => {
     const matchedTextsTemp = matchedTexts.concat();

packages/uikit-react-native-foundation/src/styles/HeaderStyleContext.tsx

@@ -6,7 +6,7 @@ import type { HeaderProps } from '../ui/Header';
 import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
-  HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
+  HeaderComponent: (props: HeaderProps) => React.ReactNode | null;
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;

packages/uikit-react-native-foundation/src/types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { TextStyle } from 'react-native';
 
 export interface UIKitTypography {
@@ -178,11 +178,11 @@ export interface UIKitColors {
   };
 }
 
-export type HeaderElement = string | ReactElement | null;
+export type HeaderElement = ReactNode;
 export type HeaderPartProps = {
-  title?: HeaderElement;
-  right?: HeaderElement;
-  left?: HeaderElement;
+  title?: ReactNode;
+  right?: ReactNode;
+  left?: ReactNode;
   onPressLeft?: (...params: any[]) => any;
   onPressRight?: (...params: any[]) => any;
 };

packages/uikit-react-native-foundation/src/ui/Avatar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
@@ -21,7 +21,7 @@ type Props = {
   muted?: boolean;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Avatar: ((props: Props) => JSX.Element) & SubComponents = ({
+const Avatar: ((props: Props) => ReactNode) & SubComponents = ({
   uri,
   square,
   muted = false,

packages/uikit-react-native-foundation/src/ui/BottomSheet/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -17,7 +17,7 @@ export type BottomSheetItem = {
     disabled?: boolean;
     onPress: () => void;
   }[];
-  HeaderComponent?: (props: HeaderProps) => JSX.Element;
+  HeaderComponent?: (props: HeaderProps) => ReactNode;
 };
 type Props = {
   visible: boolean;

packages/uikit-react-native-foundation/src/ui/Dialog/DialogSheet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import Icon from '../../components/Icon';
@@ -9,7 +9,7 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
 }>;
-const DialogSheet: ((props: Props) => JSX.Element) & { Item: typeof SheetItem } = ({ style, children }) => {
+const DialogSheet: ((props: Props) => ReactNode) & { Item: typeof SheetItem } = ({ style, children }) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>

packages/uikit-react-native-foundation/src/ui/GroupChannelPreview/index.tsx

@@ -11,13 +11,13 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import Badge from '../Badge';
 
 type Props = {
-  customCover?: React.ReactElement;
+  customCover?: React.ReactNode;
   coverUrl: string;
 
   title: string;
 
   titleCaption: string;
-  titleCaptionLeft?: React.ReactElement;
+  titleCaptionLeft?: React.ReactNode;
 
   bodyIcon?: keyof typeof Icon.Assets;
   body: string;

packages/uikit-react-native-foundation/src/ui/Header/index.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import Text, { TextProps } from '../../components/Text';
-import type { BaseHeaderProps } from '../../index';
+import type { BaseHeaderProps, HeaderElement } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
-type HeaderElement = string | React.ReactElement | null;
 export type HeaderProps = BaseHeaderProps<
   {
     title?: HeaderElement;
@@ -27,7 +26,7 @@ export type HeaderProps = BaseHeaderProps<
 >;
 
 const AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
-const Header: ((props: HeaderProps) => JSX.Element) & {
+const Header: ((props: HeaderProps) => ReactNode) & {
   Button: typeof HeaderButton;
   Title: typeof HeaderTitle;
   Subtitle: typeof HeaderSubtitle;

packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/MessageContainer.tsx

@@ -101,7 +101,7 @@ const MessageContainer = ({
   );
 };
 
-const SendingStatusContainer = ({ children }: { children: React.ReactElement }) => {
+const SendingStatusContainer = ({ children }: { children: React.ReactNode }) => {
   return (
     <Box flexDirection={'row'}>
       <Box marginTop={2}>{children}</Box>

packages/uikit-react-native-foundation/src/ui/OpenChannelPreview/index.tsx

@@ -10,7 +10,7 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
 type Props = {
-  customCover?: React.ReactElement;
+  customCover?: React.ReactNode;
   coverUrl: string;
   title: string;
   participantsCount?: number;

packages/uikit-react-native-foundation/src/ui/ProfileCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import Divider from '../../components/Divider';
@@ -11,7 +11,7 @@ type Props = {
   uri: string;
   username: string;
 
-  button?: JSX.Element;
+  button?: ReactNode;
 
   bodyLabel: string;
   body: string;

packages/uikit-react-native/package.json

@@ -97,7 +97,7 @@
     "react-native-permissions": "^3.6.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-video": "^5.2.0",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "@bam.tech/react-native-image-resizer": ">=3.0.0",

packages/uikit-react-native/src/components/ChannelInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -61,10 +61,10 @@ export type ChannelInputProps = {
   setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
 
   // mention
-  SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
+  SuggestedMentionList?: (props: SuggestedMentionListProps) => React.ReactNode | null;
 
   // sub-components
-  AttachmentsButton?: (props: AttachmentsButtonProps) => JSX.Element | null;
+  AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
@@ -181,7 +181,7 @@ const useTextClearOnDisabled = (setText: (val: string) => void, chatDisabled: bo
 };
 
 const useAutoFocusOnEditMode = (
-  textInputRef: MutableRefObject<TextInput | undefined>,
+  textInputRef: React.MutableRefObject<TextInput | undefined>,
   messageToEdit?: SendbirdBaseMessage,
 ) => {
   useEffect(() => {

packages/uikit-react-native/src/components/StatusComposition.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type Props = {
   loading?: boolean;
-  LoadingComponent?: JSX.Element;
+  LoadingComponent?: ReactNode;
   error?: boolean;
-  ErrorComponent?: JSX.Element;
+  ErrorComponent?: ReactNode;
   children: React.ReactNode;
 };
 const StatusComposition = ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => {

packages/uikit-react-native/src/containers/InternalErrorBoundaryContainer.tsx

@@ -14,7 +14,7 @@ const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
 
 class InternalErrorBoundaryContainer extends React.PureComponent<{
   onError?: (props: ErrorBoundaryProps) => void;
-  ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
   children?: React.ReactNode;
 }> {
   static defaultProps = {

packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx

@@ -98,7 +98,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   errorBoundary?: {
     disabled?: boolean;
     onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
   };
   toast?: {
     dismissTimeout?: number;