Merge pull request #27660 from fabioh8010/ts/style/styles-refactor

[No QA] [TS migration] Review and clean up Styles files

Author: Hayata Suenaga

.github/scripts/findUnusedKeys.sh

@@ -6,7 +6,7 @@ LIB_PATH="$(cd "$(dirname "${BASH_SOURCE[0]}")" && cd ../../ && pwd)"
 
 readonly SRC_DIR="${LIB_PATH}/src"
 readonly STYLES_DIR="${LIB_PATH}/src/styles"
-readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.js"
+readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.ts"
 readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities"
 readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt"
 readonly UTILITY_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt"
@@ -210,7 +210,12 @@ find_theme_style_and_store_keys() {
     fi
 
     # Check if we are inside an arrow function
-    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ || "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Zgv 0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ || "$line" =~ ^[[:space:]]*([a-zA-Zgv 0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
+      inside_arrow_function=true
+      continue
+    fi
+
+    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
       inside_arrow_function=true
       continue
     fi
@@ -348,7 +353,7 @@ echo "🔍 Looking for styles."
 find_utility_styles_store_prefix
 find_utility_usage_as_styles
 
-# Find and store keys from styles.js
+# Find and store keys from styles.ts
 find_styles_object_and_store_keys "$STYLES_FILE"
 find_styles_functions_and_store_keys "$STYLES_FILE"
 collect_theme_keys_from_styles "$STYLES_FILE"

src/components/SelectionList/BaseSelectionList.js

@@ -22,8 +22,8 @@ import Log from '../../libs/Log';
 import OptionsListSkeletonView from '../OptionsListSkeletonView';
 import useActiveElement from '../../hooks/useActiveElement';
 import BaseListItem from './BaseListItem';
-import themeColors from '../../styles/themes/default';
 import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
+import themeColors from '../../styles/themes/default';
 
 const propTypes = {
     ...keyboardStatePropTypes,
@@ -426,7 +426,7 @@ function BaseSelectionList({
                                     onScrollBeginDrag={onScrollBeginDrag}
                                     keyExtractor={(item) => item.keyForList}
                                     extraData={focusedIndex}
-                                    indicatorStyle={themeColors.selectionListIndicatorColor}
+                                    indicatorStyle={themeColors.white}
                                     keyboardShouldPersistTaps="always"
                                     showsVerticalScrollIndicator={showScrollIndicator}
                                     initialNumToRender={12}

src/libs/ComposerUtils/updateNumberOfLines/index.native.ts

@@ -8,7 +8,7 @@ import UpdateNumberOfLines from './types';
  * divide by line height to get the total number of rows for the textarea.
  */
 const updateNumberOfLines: UpdateNumberOfLines = (props, event) => {
-    const lineHeight = styles.textInputCompose.lineHeight;
+    const lineHeight = styles.textInputCompose.lineHeight ?? 0;
     const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2;
     const inputHeight = event?.nativeEvent?.contentSize?.height ?? null;
     if (!inputHeight) {

src/styles/StyleUtils.ts

@@ -5,7 +5,7 @@ import ThemeStylesContext from './ThemeStylesContext';
 // TODO: Rename this to "styles" once the app is migrated to theme switching hooks and HOCs
 import {stylesGenerator as stylesUntyped} from './styles';
 
-const styles = stylesUntyped as (theme: Record<string, string>) => Record<string, unknown>;
+const styles = stylesUntyped;
 
 type ThemeStylesProviderProps = {
     children: React.ReactNode;

src/styles/ThemeStylesProvider.tsx

@@ -9,11 +9,11 @@ import AddOutlineWidth from './types';
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  */
-const addOutlineWidth: AddOutlineWidth = (obj, val, error = false) => ({
+const addOutlineWidth: AddOutlineWidth = (obj, val, hasError = false) => ({
     ...obj,
     outlineWidth: val,
     outlineStyle: val ? 'auto' : 'none',
-    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${error ? themeDefault.danger : themeDefault.borderFocus}` : 'none',
+    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? themeDefault.danger : themeDefault.borderFocus}` : 'none',
 });
 
 export default addOutlineWidth;

src/styles/addOutlineWidth/index.ts

@@ -1,6 +1,5 @@
-import {CSSProperties} from 'react';
 import {TextStyle} from 'react-native';
 
-type AddOutlineWidth = (obj: TextStyle | CSSProperties, val?: number, error?: boolean) => TextStyle | CSSProperties;
+type AddOutlineWidth = (obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
 
 export default AddOutlineWidth;

src/styles/addOutlineWidth/types.ts

@@ -1,10 +1,11 @@
+import positioning from '../utilities/positioning';
 import GetCardStyles from './types';
 
 /**
  * Get card style for cardStyleInterpolator
  */
 const getCardStyles: GetCardStyles = (screenWidth) => ({
-    position: 'fixed',
+    ...positioning.pFixed,
     width: screenWidth,
     height: '100%',
 });

src/styles/cardStyles/index.ts

@@ -1,6 +1,5 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 
-type GetCardStyles = (screenWidth: number) => Partial<Pick<CSSProperties | ViewStyle, 'position' | 'width' | 'height'>>;
+type GetCardStyles = (screenWidth: number) => ViewStyle;
 
 export default GetCardStyles;

src/styles/cardStyles/types.ts

@@ -1,8 +1,7 @@
-import {CSSProperties} from 'react';
 import {TextStyle, ViewStyle} from 'react-native';
 
-type CodeWordWrapperStyles = ViewStyle | CSSProperties;
-type CodeWordStyles = TextStyle | CSSProperties;
-type CodeTextStyles = TextStyle | CSSProperties;
+type CodeWordWrapperStyles = ViewStyle;
+type CodeWordStyles = TextStyle;
+type CodeTextStyles = TextStyle;
 
-export type {CodeWordWrapperStyles, CodeWordStyles, CodeTextStyles};
+export type {CodeTextStyles, CodeWordStyles, CodeWordWrapperStyles};

src/styles/codeStyles/types.ts

@@ -1,6 +1,6 @@
-import {StyleProp, ViewStyle} from 'react-native';
 import styles from '../styles';
+import ContainerComposeStyles from './types';
 
-const containerComposeStyles: StyleProp<ViewStyle> = [styles.textInputComposeSpacing];
+const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing];
 
 export default containerComposeStyles;

src/styles/containerComposeStyles/index.native.ts

@@ -1,7 +1,7 @@
-import {StyleProp, ViewStyle} from 'react-native';
 import styles from '../styles';
+import ContainerComposeStyles from './types';
 
 // We need to set paddingVertical = 0 on web to avoid displaying a normal pointer on some parts of compose box when not in focus
-const containerComposeStyles: StyleProp<ViewStyle> = [styles.textInputComposeSpacing, {paddingVertical: 0}];
+const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing, {paddingVertical: 0}];
 
 export default containerComposeStyles;

src/styles/containerComposeStyles/index.ts

@@ -0,0 +1,5 @@
+import {ViewStyle} from 'react-native';
+
+type ContainerComposeStyles = ViewStyle[];
+
+export default ContainerComposeStyles;

src/styles/containerComposeStyles/types.ts

@@ -1,7 +1,10 @@
-import EditedLabelStyles from './types';
 import display from '../utilities/display';
 import flex from '../utilities/flex';
+import EditedLabelStyles from './types';
 
-const editedLabelStyles: EditedLabelStyles = {...display.dInlineFlex, ...flex.alignItemsBaseline};
+const editedLabelStyles: EditedLabelStyles = {
+    ...display.dInlineFlex,
+    ...flex.alignItemsBaseline,
+};
 
 export default editedLabelStyles;

src/styles/editedLabelStyles/index.ts

@@ -1,6 +1,5 @@
-import {CSSProperties} from 'react';
 import {TextStyle} from 'react-native';
 
-type EditedLabelStyles = CSSProperties | TextStyle;
+type EditedLabelStyles = TextStyle;
 
 export default EditedLabelStyles;

src/styles/editedLabelStyles/types.ts

@@ -0,0 +1,6 @@
+import FontFamilyBoldStyles from './types';
+
+const singleBold: FontFamilyBoldStyles = 'ExpensifyNeue-Bold';
+const multiBold: FontFamilyBoldStyles = 'ExpensifyNeue-Bold';
+
+export {singleBold, multiBold};

src/styles/fontFamily/bold/index.android.js

@@ -0,0 +1,6 @@
+import FontFamilyBoldStyles from './types';
+
+const singleBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular';
+const multiBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular';
+
+export {singleBold, multiBold};

src/styles/fontFamily/bold/index.android.ts

@@ -0,0 +1,6 @@
+import FontFamilyBoldStyles from './types';
+
+const singleBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular';
+const multiBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
+
+export {singleBold, multiBold};

src/styles/fontFamily/bold/index.ios.js

@@ -0,0 +1,5 @@
+import {TextStyle} from 'react-native';
+
+type FontFamilyBoldStyles = NonNullable<TextStyle['fontFamily']>;
+
+export default FontFamilyBoldStyles;

src/styles/fontFamily/bold/index.ios.ts

@@ -1,3 +1,5 @@
+import {TextStyle} from 'react-native';
+
 type FontFamilyKeys =
     | 'EXP_NEUE_ITALIC'
     | 'EXP_NEUE_BOLD'
@@ -10,6 +12,6 @@ type FontFamilyKeys =
     | 'MONOSPACE_BOLD'
     | 'MONOSPACE_BOLD_ITALIC';
 
-type FontFamilyStyles = Record<FontFamilyKeys, string>;
+type FontFamilyStyles = Record<FontFamilyKeys, NonNullable<TextStyle['fontFamily']>>;
 
 export default FontFamilyStyles;

src/styles/fontFamily/bold/index.js

@@ -1,6 +1,5 @@
-import {CSSProperties} from 'react';
 import {TextStyle} from 'react-native';
 
-type FontWeightBoldStyles = (TextStyle | CSSProperties)['fontWeight'];
+type FontWeightBoldStyles = NonNullable<TextStyle['fontWeight']>;
 
 export default FontWeightBoldStyles;

src/styles/fontFamily/bold/index.ts

@@ -1,16 +1,17 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
-import {ValueOf} from 'type-fest';
 import {ModalProps} from 'react-native-modal';
+import {ValueOf} from 'type-fest';
 import CONST from '../CONST';
-import variables from './variables';
-import themeColors from './themes/default';
 import styles from './styles';
+import themeColors from './themes/default';
+import variables from './variables';
 
 function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
+    const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
+
     return {
-        borderWidth: styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall).borderWidth,
-        width: isSmallScreenWidth ? '100%' : windowWidth - styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall).marginHorizontal * 2,
+        borderWidth: modalStyles.borderWidth,
+        width: isSmallScreenWidth ? '100%' : windowWidth - modalStyles.marginHorizontal * 2,
     };
 }
 
@@ -26,7 +27,7 @@ type WindowDimensions = {
 
 type GetModalStyles = {
     modalStyle: ViewStyle;
-    modalContainerStyle: ViewStyle | Pick<CSSProperties, 'boxShadow'>;
+    modalContainerStyle: ViewStyle;
     swipeDirection: ModalProps['swipeDirection'];
     animationIn: ModalProps['animationIn'];
     animationOut: ModalProps['animationOut'];

src/styles/fontFamily/bold/types.ts

@@ -1,10 +1,16 @@
-export default () => ({
+import positioning from '../utilities/positioning';
+import GetNavigationModalCardStyles from './types';
+
+const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
     // position: fixed is set instead of position absolute to workaround Safari known issues of updating heights in DOM.
     // Safari issues:
     // https://github.com/Expensify/App/issues/12005
     // https://github.com/Expensify/App/issues/17824
     // https://github.com/Expensify/App/issues/20709
     width: '100%',
     height: '100%',
-    position: 'fixed',
+
+    ...positioning.pFixed,
 });
+
+export default getNavigationModalCardStyles;

src/styles/fontFamily/types.ts

@@ -1,3 +1,7 @@
-export default () => ({
+import GetNavigationModalCardStyles from './types';
+
+const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
     height: '100%',
 });
+
+export default getNavigationModalCardStyles;

src/styles/fontWeight/bold/types.ts

@@ -1,3 +1,4 @@
+import positioning from '../utilities/positioning';
 import GetNavigationModalCardStyles from './types';
 
 const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
@@ -8,7 +9,8 @@ const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
     // https://github.com/Expensify/App/issues/20709
     width: '100%',
     height: '100%',
-    position: 'fixed',
+
+    ...positioning.pFixed,
 });
 
 export default getNavigationModalCardStyles;

src/styles/getModalStyles.ts

@@ -1,9 +1,7 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
-import {Merge} from 'type-fest';
 
 type GetNavigationModalCardStylesParams = {isSmallScreenWidth: number};
 
-type GetNavigationModalCardStyles = (params: GetNavigationModalCardStylesParams) => Merge<ViewStyle, Pick<CSSProperties, 'position'>>;
+type GetNavigationModalCardStyles = (params: GetNavigationModalCardStylesParams) => ViewStyle;
 
 export default GetNavigationModalCardStyles;

src/styles/getNavigationModalCardStyles/index.desktop.js src/styles/getNavigationModalCardStyles/index.desktop.ts

@@ -1,36 +1,34 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 import styles from './styles';
-import variables from './variables';
 import themeColors from './themes/default';
+import variables from './variables';
 
-type StylesArray = Array<ViewStyle | CSSProperties>;
-
-const defaultWrapperStyle: ViewStyle | CSSProperties = {
+const defaultWrapperStyle: ViewStyle = {
     backgroundColor: themeColors.componentBG,
 };
 
-const miniWrapperStyle: StylesArray = [
+const miniWrapperStyle: ViewStyle[] = [
     styles.flexRow,
     defaultWrapperStyle,
     {
         borderRadius: variables.buttonBorderRadius,
         borderWidth: 1,
         borderColor: themeColors.border,
         // In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
-        transform: 'translateZ(0)',
+        // NOTE: asserting "transform" to a valid type, because it isn't possible to augment "transform".
+        transform: 'translateZ(0)' as unknown as ViewStyle['transform'],
     },
 ];
 
-const bigWrapperStyle: StylesArray = [styles.flexColumn, defaultWrapperStyle];
+const bigWrapperStyle: ViewStyle[] = [styles.flexColumn, defaultWrapperStyle];
 
 /**
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
  * @param isMini
  * @param isSmallScreenWidth
  */
-function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean): StylesArray {
+function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean): ViewStyle[] {
     if (isMini) {
         return miniWrapperStyle;
     }