refactor: remove React.FC

Author: bang9

.eslintrc.js

@@ -24,5 +24,12 @@ module.exports = {
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        'argsIgnorePattern': '^_',
+        'varsIgnorePattern': '^_',
+      },
+    ],
   },
 };

package.json

@@ -65,9 +65,6 @@
     "typedoc": "^0.23.7",
     "typescript": "^4.5.4"
   },
-  "resolutions": {
-    "@types/react": "^17"
-  },
   "jest": {
     "testEnvironment": "node",
     "moduleFileExtensions": [

packages/uikit-chat-hooks/package.json

@@ -41,7 +41,7 @@
     "@sendbird/uikit-utils": "1.0.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
+    "@types/react": "*",
     "react": "^16.13.1",
     "react-native-builder-bob": "^0.18.0",
     "typescript": "^4.1.3"

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

@@ -41,8 +41,8 @@
     "@sendbird/uikit-utils": "1.0.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-native": "^0.66.15",
+    "@types/react": "*",
+    "@types/react-native": "*",
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.0",

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

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

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

@@ -29,12 +29,12 @@ export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
 });
 
 type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
-export const HeaderStyleProvider: React.FC<Props> = ({
+export const HeaderStyleProvider = ({
   children,
   HeaderComponent = () => null,
   defaultTitleAlign,
   statusBarTranslucent,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const { top } = useSafeAreaInsets();
 
   return (

packages/uikit-react-native-foundation/src/theme/UIKitThemeProvider.tsx

@@ -4,8 +4,10 @@ import type { UIKitTheme } from '../types';
 import LightUIKitTheme from './LightUIKitTheme';
 import UIKitThemeContext from './UIKitThemeContext';
 
-type Props = { theme?: UIKitTheme };
-const UIKitThemeProvider: React.FC<Props> = ({ children, theme = LightUIKitTheme }) => {
+type Props = React.PropsWithChildren<{
+  theme?: UIKitTheme;
+}>;
+const UIKitThemeProvider = ({ children, theme = LightUIKitTheme }: Props) => {
   return <UIKitThemeContext.Provider value={theme}>{children}</UIKitThemeContext.Provider>;
 };
 

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

@@ -26,7 +26,7 @@ type Props = {
   onError?: (error: unknown) => void;
   onDismiss?: () => void;
 } & ActionMenuItem;
-const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, menuItems }) => {
+const ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const [pending, setPending] = useState(false);

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

@@ -20,14 +20,7 @@ type Props = {
   onHide: () => void;
   onDismiss?: () => void;
 } & AlertItem;
-const Alert: React.FC<Props> = ({
-  onDismiss,
-  visible,
-  onHide,
-  title = '',
-  message = '',
-  buttons = [{ text: 'OK' }],
-}) => {
+const Alert = ({ onDismiss, visible, onHide, title = '', message = '', buttons = [{ text: 'OK' }] }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
 

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

@@ -3,8 +3,11 @@ import { StyleProp, View, ViewStyle } from 'react-native';
 
 const MAX = 4;
 
-type Props = { size?: number; containerStyle?: StyleProp<ViewStyle> };
-const AvatarGroup: React.FC<Props> = ({ children, containerStyle, size = 56 }) => {
+type Props = React.PropsWithChildren<{
+  size?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}>;
+const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
   const childAmount = React.Children.count(children);
 
   if (childAmount === 0) {