From 4f5e3062e65bb4d50c9e1abdf7666bb6f0d02dab Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Tue, 5 Dec 2023 15:22:00 +0100 Subject: [PATCH 1/6] migrate HeaderGap to TS --- src/components/HeaderGap/index.desktop.js | 25 ---------------------- src/components/HeaderGap/index.desktop.tsx | 15 +++++++++++++ 2 files changed, 15 insertions(+), 25 deletions(-) delete mode 100644 src/components/HeaderGap/index.desktop.js create mode 100644 src/components/HeaderGap/index.desktop.tsx diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js deleted file mode 100644 index 07ea1ea6f48d..000000000000 --- a/src/components/HeaderGap/index.desktop.js +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {memo} from 'react'; -import {View} from 'react-native'; -import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; -import compose from '@libs/compose'; - -const propTypes = { - /** Styles to apply to the HeaderGap */ - // eslint-disable-next-line react/forbid-prop-types - styles: PropTypes.arrayOf(PropTypes.object), - ...withThemeStylesPropTypes, -}; - -const defaultProps = { - styles: [], -}; - -function HeaderGap(props) { - return ; -} - -HeaderGap.displayName = 'HeaderGap'; -HeaderGap.propTypes = propTypes; -HeaderGap.defaultProps = defaultProps; -export default compose(memo, withThemeStyles)(HeaderGap); diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx new file mode 100644 index 000000000000..5b02d3cf1fbc --- /dev/null +++ b/src/components/HeaderGap/index.desktop.tsx @@ -0,0 +1,15 @@ +import React, {memo} from 'react'; +import {StyleProp, View, ViewStyle} from 'react-native'; +import useThemeStyles from '@styles/useThemeStyles'; + +type HeaderGapProps = { + style: StyleProp; +}; + +function HeaderGap({style}: HeaderGapProps) { + const themeStyles = useThemeStyles(); + return ; +} + +HeaderGap.displayName = 'HeaderGap'; +export default memo(HeaderGap); From e311ced6b81fa25b998b5ebcceba76602d46fb40 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 6 Dec 2023 15:23:04 +0100 Subject: [PATCH 2/6] fix PR comments --- src/components/HeaderGap/index.desktop.tsx | 12 +++++------- src/components/HeaderGap/{index.js => index.tsx} | 0 src/components/HeaderGap/types.ts | 7 +++++++ 3 files changed, 12 insertions(+), 7 deletions(-) rename src/components/HeaderGap/{index.js => index.tsx} (100%) create mode 100644 src/components/HeaderGap/types.ts diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx index 5b02d3cf1fbc..84f42142942e 100644 --- a/src/components/HeaderGap/index.desktop.tsx +++ b/src/components/HeaderGap/index.desktop.tsx @@ -1,15 +1,13 @@ import React, {memo} from 'react'; -import {StyleProp, View, ViewStyle} from 'react-native'; +import {View} from 'react-native'; import useThemeStyles from '@styles/useThemeStyles'; +import HeaderGapProps from './types'; -type HeaderGapProps = { - style: StyleProp; -}; - -function HeaderGap({style}: HeaderGapProps) { +function HeaderGap({styles}: HeaderGapProps) { const themeStyles = useThemeStyles(); - return ; + return ; } HeaderGap.displayName = 'HeaderGap'; + export default memo(HeaderGap); diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.tsx similarity index 100% rename from src/components/HeaderGap/index.js rename to src/components/HeaderGap/index.tsx diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts new file mode 100644 index 000000000000..6ed527b1c1f2 --- /dev/null +++ b/src/components/HeaderGap/types.ts @@ -0,0 +1,7 @@ +import {StyleProp, ViewStyle} from 'react-native'; + +type HeaderGapProps = { + styles?: StyleProp; +}; + +export default HeaderGapProps; From 9e6366a10d465c30452e5a4d7c6dabf8ac8a5a26 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Thu, 7 Dec 2023 13:52:52 +0100 Subject: [PATCH 3/6] fix typing --- src/components/HeaderGap/index.desktop.tsx | 7 ++++--- src/components/HeaderGap/index.tsx | 7 ++++--- src/components/HeaderGap/types.ts | 5 ++++- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx index 84f42142942e..6f0ca35996e7 100644 --- a/src/components/HeaderGap/index.desktop.tsx +++ b/src/components/HeaderGap/index.desktop.tsx @@ -1,12 +1,13 @@ import React, {memo} from 'react'; import {View} from 'react-native'; import useThemeStyles from '@styles/useThemeStyles'; -import HeaderGapProps from './types'; +import HeaderGapComponent from './types'; -function HeaderGap({styles}: HeaderGapProps) { +// eslint-disable-next-line react/function-component-definition, react/prop-types +const HeaderGap: HeaderGapComponent = ({styles}) => { const themeStyles = useThemeStyles(); return ; -} +}; HeaderGap.displayName = 'HeaderGap'; diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx index 35e6bf92fb5d..decb634b5e8e 100644 --- a/src/components/HeaderGap/index.tsx +++ b/src/components/HeaderGap/index.tsx @@ -1,6 +1,7 @@ -function HeaderGap() { - return null; -} +import HeaderGapComponent from './types'; + +// eslint-disable-next-line react/function-component-definition +const HeaderGap: HeaderGapComponent = () => null; HeaderGap.displayName = 'HeaderGap'; export default HeaderGap; diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts index 6ed527b1c1f2..55ff1fe6eef6 100644 --- a/src/components/HeaderGap/types.ts +++ b/src/components/HeaderGap/types.ts @@ -1,7 +1,10 @@ +import React from 'react'; import {StyleProp, ViewStyle} from 'react-native'; type HeaderGapProps = { styles?: StyleProp; }; -export default HeaderGapProps; +type HeaderGapComponent = React.FunctionComponent; + +export default HeaderGapComponent; From 442d966cc430a61ef4e6082df65b04c84a9abe57 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Mon, 11 Dec 2023 11:11:12 +0100 Subject: [PATCH 4/6] disable prop-types globally --- .eslintrc.js | 1 + src/components/HeaderGap/index.desktop.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index b71338d0c1a5..85a4e86797b6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -174,6 +174,7 @@ module.exports = { 'rulesdir/prefer-underscore-method': 'off', 'rulesdir/prefer-import-module-contents': 'off', 'react/require-default-props': 'off', + 'react/prop-types': 'off', 'no-restricted-syntax': [ 'error', { diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx index 6f0ca35996e7..15c1f20cf8e2 100644 --- a/src/components/HeaderGap/index.desktop.tsx +++ b/src/components/HeaderGap/index.desktop.tsx @@ -3,7 +3,7 @@ import {View} from 'react-native'; import useThemeStyles from '@styles/useThemeStyles'; import HeaderGapComponent from './types'; -// eslint-disable-next-line react/function-component-definition, react/prop-types +// eslint-disable-next-line react/function-component-definition const HeaderGap: HeaderGapComponent = ({styles}) => { const themeStyles = useThemeStyles(); return ; From 47a827d2690750b450cd9ce53c35a81400c27032 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Mon, 11 Dec 2023 16:26:05 +0100 Subject: [PATCH 5/6] fix PR comments --- src/components/HeaderGap/index.desktop.tsx | 7 +++---- src/components/HeaderGap/index.tsx | 10 +++++++--- src/components/HeaderGap/types.ts | 5 +---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx index 15c1f20cf8e2..84f42142942e 100644 --- a/src/components/HeaderGap/index.desktop.tsx +++ b/src/components/HeaderGap/index.desktop.tsx @@ -1,13 +1,12 @@ import React, {memo} from 'react'; import {View} from 'react-native'; import useThemeStyles from '@styles/useThemeStyles'; -import HeaderGapComponent from './types'; +import HeaderGapProps from './types'; -// eslint-disable-next-line react/function-component-definition -const HeaderGap: HeaderGapComponent = ({styles}) => { +function HeaderGap({styles}: HeaderGapProps) { const themeStyles = useThemeStyles(); return ; -}; +} HeaderGap.displayName = 'HeaderGap'; diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx index decb634b5e8e..c17ba58b470c 100644 --- a/src/components/HeaderGap/index.tsx +++ b/src/components/HeaderGap/index.tsx @@ -1,7 +1,11 @@ -import HeaderGapComponent from './types'; +import {ReactNode} from 'react'; +import HeaderGapProps from './types'; -// eslint-disable-next-line react/function-component-definition -const HeaderGap: HeaderGapComponent = () => null; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function HeaderGap({styles}: HeaderGapProps): ReactNode { + return null; +} HeaderGap.displayName = 'HeaderGap'; + export default HeaderGap; diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts index 55ff1fe6eef6..6ed527b1c1f2 100644 --- a/src/components/HeaderGap/types.ts +++ b/src/components/HeaderGap/types.ts @@ -1,10 +1,7 @@ -import React from 'react'; import {StyleProp, ViewStyle} from 'react-native'; type HeaderGapProps = { styles?: StyleProp; }; -type HeaderGapComponent = React.FunctionComponent; - -export default HeaderGapComponent; +export default HeaderGapProps; From d2090767e48851ca46d24597c0f42918be798987 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 13 Dec 2023 11:12:06 +0100 Subject: [PATCH 6/6] fix PR comments --- src/components/HeaderGap/index.desktop.tsx | 4 ++-- src/components/HeaderGap/index.tsx | 5 ++--- src/components/HeaderGap/types.ts | 5 ++++- src/components/SplashScreenHider/index.native.tsx | 4 ++-- src/components/SplashScreenHider/index.tsx | 4 ++-- src/components/SplashScreenHider/types.ts | 6 +++++- 6 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx index 84f42142942e..4ee252c0772d 100644 --- a/src/components/HeaderGap/index.desktop.tsx +++ b/src/components/HeaderGap/index.desktop.tsx @@ -1,9 +1,9 @@ import React, {memo} from 'react'; import {View} from 'react-native'; import useThemeStyles from '@styles/useThemeStyles'; -import HeaderGapProps from './types'; +import type {HeaderGapProps, HeaderGapReturnType} from './types'; -function HeaderGap({styles}: HeaderGapProps) { +function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType { const themeStyles = useThemeStyles(); return ; } diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx index c17ba58b470c..191923efd7c8 100644 --- a/src/components/HeaderGap/index.tsx +++ b/src/components/HeaderGap/index.tsx @@ -1,8 +1,7 @@ -import {ReactNode} from 'react'; -import HeaderGapProps from './types'; +import type {HeaderGapProps, HeaderGapReturnType} from './types'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -function HeaderGap({styles}: HeaderGapProps): ReactNode { +function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType { return null; } diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts index 6ed527b1c1f2..55a202c2e48c 100644 --- a/src/components/HeaderGap/types.ts +++ b/src/components/HeaderGap/types.ts @@ -1,7 +1,10 @@ +import {ReactNode} from 'react'; import {StyleProp, ViewStyle} from 'react-native'; type HeaderGapProps = { styles?: StyleProp; }; -export default HeaderGapProps; +type HeaderGapReturnType = ReactNode; + +export type {HeaderGapProps, HeaderGapReturnType}; diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx index 29b5ae710dda..fcedbc67dbf9 100644 --- a/src/components/SplashScreenHider/index.native.tsx +++ b/src/components/SplashScreenHider/index.native.tsx @@ -4,9 +4,9 @@ import Reanimated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTimin import Logo from '@assets/images/new-expensify-dark.svg'; import BootSplash from '@libs/BootSplash'; import useThemeStyles from '@styles/useThemeStyles'; -import type SplashScreenHiderProps from './types'; +import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types'; -function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) { +function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType { const styles = useThemeStyles(); const logoSizeRatio = BootSplash.logoSizeRatio || 1; const navigationBarHeight = BootSplash.navigationBarHeight || 0; diff --git a/src/components/SplashScreenHider/index.tsx b/src/components/SplashScreenHider/index.tsx index d3f5c52c1e3e..5710055b80ed 100644 --- a/src/components/SplashScreenHider/index.tsx +++ b/src/components/SplashScreenHider/index.tsx @@ -1,8 +1,8 @@ import {useEffect} from 'react'; import BootSplash from '@libs/BootSplash'; -import type SplashScreenHiderProps from './types'; +import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types'; -function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) { +function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType { useEffect(() => { BootSplash.hide().then(() => onHide()); }, [onHide]); diff --git a/src/components/SplashScreenHider/types.ts b/src/components/SplashScreenHider/types.ts index 4ea25da93290..ff7b2beb1520 100644 --- a/src/components/SplashScreenHider/types.ts +++ b/src/components/SplashScreenHider/types.ts @@ -1,6 +1,10 @@ +import {ReactNode} from 'react'; + type SplashScreenHiderProps = { /** Splash screen has been hidden */ onHide: () => void; }; -export default SplashScreenHiderProps; +type SplashScreenHiderReturnType = ReactNode; + +export type {SplashScreenHiderProps, SplashScreenHiderReturnType};