Merge pull request #32 from sendbird/fix/types-react

refactor: removed React.FC (UIKIT-2042)

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': '^_',
+      },
+    ],
   },
 };

lerna.json

@@ -14,6 +14,76 @@
     },
     "version": {
       "conventionalCommits": true,
+      "changelogPreset": {
+        "name": "conventional-changelog-conventionalcommits",
+        "types": [
+          {
+            "type": "feat",
+            "section": "Features"
+          },
+          {
+            "type": "feature",
+            "section": "Features"
+          },
+          {
+            "type": "fix",
+            "section": "Bug Fixes"
+          },
+          {
+            "type": "refactor",
+            "section": "Improvements"
+          },
+          {
+            "type": "enhancement",
+            "section": "Improvements"
+          },
+          {
+            "type": "perf",
+            "section": "Improvements"
+          },
+          {
+            "type": "docs",
+            "section": "Documentation"
+          },
+          {
+            "type": "revert",
+            "section": "Reverts",
+            "hidden": true
+          },
+          {
+            "type": "style",
+            "section": "Styles",
+            "hidden": true
+          },
+          {
+            "type": "chore",
+            "section": "Miscellaneous Chores",
+            "hidden": true
+          },
+          {
+            "type": "test",
+            "section": "Tests",
+            "hidden": true
+          },
+          {
+            "type": "build",
+            "section": "Build System",
+            "hidden": true
+          },
+          {
+            "type": "ci",
+            "section": "Continuous Integration",
+            "hidden": true
+          }
+        ],
+        "issuePrefixes": [
+          "#"
+        ],
+        "issueUrlFormat": "{{host}}/{{owner}}/{{repository}}/issues/{{id}}",
+        "commitUrlFormat": "{{host}}/{{owner}}/{{repository}}/commit/{{hash}}",
+        "compareUrlFormat": "{{host}}/{{owner}}/{{repository}}/compare/{{previousTag}}...{{currentTag}}",
+        "userUrlFormat": "{{host}}/{{user}}"
+      },
       "exact": true,
       "gitRemote": "origin",
       "message": "chore(release): release packages %s"

package.json

@@ -48,6 +48,7 @@
     "@typescript-eslint/parser": "^5.9.1",
     "babel-jest": "^27.4.6",
     "chalk": "^4",
+    "conventional-changelog-conventionalcommits": "^5.0.0",
     "del-cli": "^4.0.1",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.5.0",
@@ -65,9 +66,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();