From 6be9344136cd6bcf276017f06ee7a7673d277d75 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 17 Nov 2023 09:51:36 +0100
Subject: [PATCH 1/3] [TS migration] Migrate 'ExpensifyWordmark.js' component

---
 ...nsifyWordmark.js => ExpensifyWordmark.tsx} | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)
 rename src/components/{ExpensifyWordmark.js => ExpensifyWordmark.tsx} (58%)

diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.tsx
similarity index 58%
rename from src/components/ExpensifyWordmark.js
rename to src/components/ExpensifyWordmark.tsx
index efb3b20dbe87..02a6033b6d8e 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.tsx
@@ -1,7 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import {StyleProp, View, ViewStyle} from 'react-native';
 import AdHocLogo from '@assets/images/expensify-logo--adhoc.svg';
 import DevLogo from '@assets/images/expensify-logo--dev.svg';
 import StagingLogo from '@assets/images/expensify-logo--staging.svg';
@@ -12,40 +10,36 @@ import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import withWindowDimensions from './withWindowDimensions';
+import type {WindowDimensionsProps} from './withWindowDimensions/types';
 
-const propTypes = {
+type ExpensifyWordmarkProps = WindowDimensionsProps & {
     /** Additional styles to add to the component */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    ...windowDimensionsPropTypes,
-};
-
-const defaultProps = {
-    style: {},
+    style?: StyleProp<ViewStyle>;
 };
 
 const logoComponents = {
     [CONST.ENVIRONMENT.DEV]: DevLogo,
     [CONST.ENVIRONMENT.STAGING]: StagingLogo,
     [CONST.ENVIRONMENT.PRODUCTION]: ProductionLogo,
+    [CONST.ENVIRONMENT.ADHOC]: AdHocLogo,
 };
 
-function ExpensifyWordmark(props) {
+function ExpensifyWordmark({isSmallScreenWidth, style = {}}: ExpensifyWordmarkProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
+    const LogoComponent = (environment && logoComponents[environment]) ?? AdHocLogo;
 
-    const LogoComponent = logoComponents[environment] || AdHocLogo;
     return (
         <>
             <View
                 style={[
-                    StyleUtils.getSignInWordmarkWidthStyle(environment, props.isSmallScreenWidth),
-                    StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
-                    props.isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
-                    ...(_.isArray(props.style) ? props.style : [props.style]),
+                    StyleUtils.getSignInWordmarkWidthStyle(environment ?? '', isSmallScreenWidth),
+                    StyleUtils.getHeight(isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
+                    isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
+                    style,
                 ]}
             >
                 <LogoComponent fill={theme.success} />
@@ -55,6 +49,5 @@ function ExpensifyWordmark(props) {
 }
 
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
-ExpensifyWordmark.defaultProps = defaultProps;
-ExpensifyWordmark.propTypes = propTypes;
+
 export default withWindowDimensions(ExpensifyWordmark);

From 9dbe3650420e4e9a7f9e95238be2ffe3ab6236c2 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 17 Nov 2023 11:07:42 +0100
Subject: [PATCH 2/3] Code improvements

---
 src/components/ExpensifyWordmark.tsx | 6 +++---
 src/styles/StyleUtils.ts             | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index 02a6033b6d8e..ab67e2f3ec70 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -25,18 +25,18 @@ const logoComponents = {
     [CONST.ENVIRONMENT.ADHOC]: AdHocLogo,
 };
 
-function ExpensifyWordmark({isSmallScreenWidth, style = {}}: ExpensifyWordmarkProps) {
+function ExpensifyWordmark({isSmallScreenWidth, style}: ExpensifyWordmarkProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
-    const LogoComponent = (environment && logoComponents[environment]) ?? AdHocLogo;
+    const LogoComponent = environment ? logoComponents[environment] : AdHocLogo;
 
     return (
         <>
             <View
                 style={[
-                    StyleUtils.getSignInWordmarkWidthStyle(environment ?? '', isSmallScreenWidth),
+                    StyleUtils.getSignInWordmarkWidthStyle(environment, isSmallScreenWidth),
                     StyleUtils.getHeight(isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
                     isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
                     style,
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index a99d292e9dc6..c3a1e0e619d7 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -462,7 +462,7 @@ function getBorderColorStyle(borderColor: string): ViewStyle {
 /**
  * Returns the width style for the wordmark logo on the sign in page
  */
-function getSignInWordmarkWidthStyle(environment: string, isSmallScreenWidth: boolean): ViewStyle {
+function getSignInWordmarkWidthStyle(environment: ValueOf<typeof CONST.ENVIRONMENT> | undefined, isSmallScreenWidth: boolean): ViewStyle {
     if (environment === CONST.ENVIRONMENT.DEV) {
         return isSmallScreenWidth ? {width: variables.signInLogoWidthPill} : {width: variables.signInLogoWidthLargeScreenPill};
     }

From 594056b79c2529f6ae22123177f9f735c07e6642 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 20 Nov 2023 11:53:33 +0100
Subject: [PATCH 3/3] Minor TS improvement

---
 src/components/ExpensifyWordmark.tsx | 2 +-
 src/styles/StyleUtils.ts             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index ab67e2f3ec70..45c0c9bcef1e 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -36,7 +36,7 @@ function ExpensifyWordmark({isSmallScreenWidth, style}: ExpensifyWordmarkProps)
         <>
             <View
                 style={[
-                    StyleUtils.getSignInWordmarkWidthStyle(environment, isSmallScreenWidth),
+                    StyleUtils.getSignInWordmarkWidthStyle(isSmallScreenWidth, environment),
                     StyleUtils.getHeight(isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
                     isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
                     style,
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index c3a1e0e619d7..e93d88c3eb53 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -462,7 +462,7 @@ function getBorderColorStyle(borderColor: string): ViewStyle {
 /**
  * Returns the width style for the wordmark logo on the sign in page
  */
-function getSignInWordmarkWidthStyle(environment: ValueOf<typeof CONST.ENVIRONMENT> | undefined, isSmallScreenWidth: boolean): ViewStyle {
+function getSignInWordmarkWidthStyle(isSmallScreenWidth: boolean, environment?: ValueOf<typeof CONST.ENVIRONMENT>): ViewStyle {
     if (environment === CONST.ENVIRONMENT.DEV) {
         return isSmallScreenWidth ? {width: variables.signInLogoWidthPill} : {width: variables.signInLogoWidthLargeScreenPill};
     }