From ebf2e6683d3f019a8549984c72befd534c553401 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Tue, 12 Sep 2023 20:24:16 +0200 Subject: [PATCH] Improved script find objects and fields with arrow function on different moments, removed unused styles --- .github/scripts/findUnusedKeys.sh | 83 ++++++-- src/styles/styles.js | 336 +----------------------------- 2 files changed, 67 insertions(+), 352 deletions(-) diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh index 0dbd5c033d5f..85d8112e8f13 100755 --- a/.github/scripts/findUnusedKeys.sh +++ b/.github/scripts/findUnusedKeys.sh @@ -15,12 +15,6 @@ readonly AMOUNT_LINES_TO_SHOW=3 readonly FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts' '-o' '-name' '*.tsx') -# Regex -readonly OBJ_PROP_DECLARATION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\}" -readonly OBJ_DEFINITION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{" -readonly CAPTURE_ARROW_FUNC_REGEX="^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{" -readonly CAPTURE_OBJ_ARROW_FUNC_REGEX="^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{" - source scripts/shellUtils.sh # trap ctrl-c and call ctrl_c() @@ -38,7 +32,11 @@ ctrl_c() { count_lines() { local file=$1 - wc -l < "$file" + if [[ -e "$file" ]]; then + wc -l < "$file" + else + echo "File not found: $file" + fi } # Read the style file with unused keys @@ -109,24 +107,39 @@ lookfor_unused_keywords() { # Function to find and store keys from a file -find_styles_and_store_keys() { +find_styles_object_and_store_keys() { local file="$1" local base_name="${2:-styles}" # Set styles as default local parent_keys=() local root_key="" local line_number=0 + local inside_arrow_function=false while IFS= read -r line; do ((line_number++)) + # Check if we are inside an arrow function and we find a closing curly brace + if [[ "$inside_arrow_function" == true ]]; then + if [[ "$line" =~ ^[[:space:]]*\}\) ]]; then + inside_arrow_function=false + fi + continue + fi + + # Check if we are inside an arrow function + if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then + inside_arrow_function=true + continue + fi + # Skip lines that are not key-related - if [[ ! "$line" =~ $OBJ_PROP_DECLARATION_REGEX && ! "$line" =~ $CAPTURE_ARROW_FUNC_REGEX ]]; then + if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then continue fi - if [[ "$line" =~ $OBJ_DEFINITION_REGEX ]]; then + if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then root_key="${BASH_REMATCH[2]%%:*{*)}" - elif [[ "$line" =~ $CAPTURE_OBJ_ARROW_FUNC_REGEX ]]; then + elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then # Removing all the extra lines after the ":" local key="${line%%:*}" key="${key// /}" # Trim spaces @@ -150,6 +163,42 @@ find_styles_and_store_keys() { done < "$file" } +find_styles_functions_and_store_keys() { + local file="$1" + local line_number=0 + local inside_object=false + local inside_arrow_function=false + local key="" + + while IFS= read -r line; do + ((line_number++)) + + # Check if we are inside an arrow function + if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then + inside_arrow_function=true + key="${line%%:*}" + key="${key// /}" # Trim spaces + echo "styles.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE" + fi + + # If we are inside an arrow function and we find an opening curly brace, + # then set inside_object to true, indicating we are inside an object. + if [[ "$inside_arrow_function" == true && "$line" =~ ^[[:space:]]*\{ ]]; then + inside_object=true + fi + + # If we are inside an object, continue to the next line. + if [[ "$inside_object" == true ]]; then + continue + fi + + # If we find a closing curly brace, reset the inside_object flag. + if [[ "$line" =~ ^[[:space:]]*\},?$ ]]; then + inside_object=false + fi + done < "$file" +} + find_utility_styles_store_prefix() { # Loop through all files in the src folder while read -r file; do @@ -179,7 +228,7 @@ find_utility_usage_as_styles() { continue fi - find_styles_and_store_keys "${file}" "${root_key}" + find_styles_object_and_store_keys "${file}" "${root_key}" done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \)) } @@ -203,19 +252,19 @@ lookfor_unused_utilities() { done < "$UTILITY_STYLES_KEYS_FILE" } +echo "🔍 Looking for styles." # Find and store the name of the utility files as keys find_utility_styles_store_prefix +find_utility_usage_as_styles # Find and store keys from styles.js -find_styles_and_store_keys "$STYLES_FILE" +find_styles_object_and_store_keys "$STYLES_FILE" +find_styles_functions_and_store_keys "$STYLES_FILE" -find_utility_usage_as_styles +echo "🗄️ Now going through the codebase and looking for unused keys." # Look for usages of utilities into src/styles lookfor_unused_utilities - -echo "⏱️ Now going through the list and looking for unused keys." - lookfor_unused_keywords final_styles_line_count=$(count_lines "$STYLES_KEYS_FILE") diff --git a/src/styles/styles.js b/src/styles/styles.js index 1c1340600a51..2fd346bed64c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -174,12 +174,6 @@ const styles = { ...themeColors, ...textUnderline, - rateCol: { - margin: 0, - padding: 0, - flexBasis: '48%', - }, - autoCompleteSuggestionsContainer: { backgroundColor: themeColors.appBG, borderRadius: 8, @@ -236,13 +230,6 @@ const styles = { borderRadius: 12, }, - unitCol: { - margin: 0, - padding: 0, - marginLeft: '4%', - flexBasis: '48%', - }, - webViewStyles, link, @@ -265,19 +252,6 @@ const styles = { backgroundColor: themeColors.appBG, }, - h1: { - color: themeColors.heading, - fontFamily: fontFamily.EXP_NEUE_BOLD, - fontSize: variables.fontSizeh1, - fontWeight: fontWeightBold, - }, - - h3: { - fontFamily: fontFamily.EXP_NEUE_BOLD, - fontSize: variables.fontSizeNormal, - fontWeight: fontWeightBold, - }, - h4: { fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeLabel, @@ -428,10 +402,6 @@ const styles = { color: themeColors.textSupporting, }, - colorHeading: { - color: themeColors.heading, - }, - bgTransparent: { backgroundColor: 'transparent', }, @@ -632,10 +602,6 @@ const styles = { backgroundColor: themeColors.activeComponentBG, }, - fontWeightBold: { - fontWeight: fontWeightBold, - }, - touchableButtonImage: { alignItems: 'center', height: variables.componentSizeNormal, @@ -829,10 +795,6 @@ const styles = { height: CONST.DESKTOP_HEADER_PADDING, }, - pushTextRight: { - left: 100000, - }, - reportOptions: { marginLeft: 8, }, @@ -1104,10 +1066,6 @@ const styles = { noOutline: addOutlineWidth({}, 0), - errorOutline: { - borderColor: themeColors.danger, - }, - textLabelSupporting: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeLabel, @@ -1173,13 +1131,6 @@ const styles = { marginBottom: 4, }, - desktopRedirectPage: { - backgroundColor: themeColors.appBG, - minHeight: '100%', - flex: 1, - alignItems: 'center', - }, - signInPage: { backgroundColor: themeColors.highlightBG, minHeight: '100%', @@ -1559,11 +1510,6 @@ const styles = { width: 18, }, - chatContent: { - flex: 4, - justifyContent: 'flex-end', - }, - chatContentScrollView: { flexGrow: 1, justifyContent: 'flex-start', @@ -1718,11 +1664,6 @@ const styles = { textAlignVertical: 'top', }, - editInputComposeSpacing: { - backgroundColor: themeColors.transparent, - marginVertical: 8, - }, - // composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669 textInputComposeSpacing: { paddingVertical: 5, @@ -1844,23 +1785,6 @@ const styles = { width: 200, }, - chatSwticherPillWrapper: { - marginTop: 5, - marginRight: 4, - }, - - navigationModalOverlay: { - ...userSelect.userSelectNone, - position: 'absolute', - width: '100%', - height: '100%', - transform: [ - { - translateX: -variables.sideBarWidth, - }, - ], - }, - sidebarVisible: { borderRightWidth: 1, }, @@ -1885,14 +1809,6 @@ const styles = { borderRadius: 24, }, - singleSubscript: { - height: variables.iconSizeNormal, - width: variables.iconSizeNormal, - backgroundColor: themeColors.icon, - borderRadius: 20, - zIndex: 1, - }, - singleAvatarSmall: { height: 18, width: 18, @@ -1936,17 +1852,6 @@ const styles = { right: 0, }, - leftSideLargeAvatar: { - left: 15, - }, - - rightSideLargeAvatar: { - right: 15, - zIndex: 2, - borderWidth: 4, - borderRadius: 100, - }, - secondAvatarInline: { bottom: -3, right: -25, @@ -1961,18 +1866,6 @@ const styles = { height: variables.avatarSizeLarge, }, - avatarNormal: { - height: variables.componentSizeNormal, - width: variables.componentSizeNormal, - borderRadius: variables.componentSizeNormal, - }, - - avatarSmall: { - height: variables.avatarSizeSmall, - width: variables.avatarSizeSmall, - borderRadius: variables.avatarSizeSmall, - }, - avatarInnerText: { color: themeColors.textLight, fontSize: variables.fontSizeSmall, @@ -1989,21 +1882,6 @@ const styles = { textAlign: 'center', }, - avatarSpace: { - top: 3, - left: 3, - }, - - avatar: { - backgroundColor: themeColors.sidebar, - borderColor: themeColors.sidebar, - }, - - focusedAvatar: { - backgroundColor: themeColors.border, - borderColor: themeColors.border, - }, - emptyAvatar: { height: variables.avatarSizeNormal, width: variables.avatarSizeNormal, @@ -2050,11 +1928,6 @@ const styles = { marginRight: variables.avatarChatSpacing - 4, }, - modalViewContainer: { - alignItems: 'center', - flex: 1, - }, - borderTop: { borderTopWidth: variables.borderTopWidth, borderColor: themeColors.border, @@ -2144,14 +2017,6 @@ const styles = { ...(isSmallScreenWidth && flex.flex1), }), - modalCenterContentContainer: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: themeColors.modalBackdrop, - }, - centeredModalStyles: (isSmallScreenWidth, isFullScreenWhenSmall) => ({ borderWidth: isSmallScreenWidth && !isFullScreenWhenSmall ? 1 : 0, marginHorizontal: isSmallScreenWidth ? 0 : 20, @@ -2174,28 +2039,6 @@ const styles = { alignItems: 'center', }, - notFoundSafeArea: { - flex: 1, - backgroundColor: themeColors.heading, - }, - - notFoundView: { - flex: 1, - alignItems: 'center', - paddingTop: 40, - paddingBottom: 40, - justifyContent: 'space-between', - }, - - notFoundLogo: { - width: 202, - height: 63, - }, - - notFoundContent: { - alignItems: 'center', - }, - notFoundTextHeader: { ...headlineFont, color: themeColors.heading, @@ -2206,20 +2049,6 @@ const styles = { textAlign: 'center', }, - notFoundTextBody: { - color: themeColors.componentBG, - fontFamily: fontFamily.EXP_NEUE_BOLD, - fontWeight: fontWeightBold, - fontSize: 15, - }, - - notFoundButtonText: { - color: themeColors.link, - fontFamily: fontFamily.EXP_NEUE_BOLD, - fontWeight: fontWeightBold, - fontSize: 15, - }, - blockingViewContainer: { paddingBottom: variables.contentHeaderHeight, }, @@ -2270,18 +2099,6 @@ const styles = { justifyContent: 'space-around', }, - settingsPageColumn: { - width: '100%', - alignItems: 'center', - justifyContent: 'space-around', - }, - - settingsPageContainer: { - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - }, - twoFactorAuthSection: { backgroundColor: themeColors.appBG, padding: 0, @@ -2419,18 +2236,6 @@ const styles = { left: -16, }, - svgAvatarBorder: { - borderRadius: 100, - overflow: 'hidden', - }, - - displayName: { - fontSize: variables.fontSizeLarge, - fontFamily: fontFamily.EXP_NEUE_BOLD, - fontWeight: fontWeightBold, - color: themeColors.heading, - }, - pageWrapper: { width: '100%', alignItems: 'center', @@ -2502,21 +2307,11 @@ const styles = { transform: [{rotate: '180deg'}], }, - navigationSceneContainer: { - backgroundColor: themeColors.appBG, - }, - navigationScreenCardStyle: { backgroundColor: themeColors.appBG, height: '100%', }, - navigationSceneFullScreenWrapper: { - borderRadius: variables.componentBorderRadiusCard, - overflow: 'hidden', - height: '100%', - }, - invisible: { position: 'absolute', opacity: 0, @@ -2554,14 +2349,6 @@ const styles = { paddingBottom: 0, }, - detailsPageSectionVersion: { - alignSelf: 'center', - color: themeColors.textSupporting, - fontSize: variables.fontSizeSmall, - height: 24, - lineHeight: 20, - }, - switchTrack: { width: 50, height: 28, @@ -2711,12 +2498,6 @@ const styles = { alignSelf: 'center', }, - iouDetailsContainer: { - flexGrow: 1, - paddingStart: 20, - paddingEnd: 20, - }, - codeWordWrapper: { ...codeStyles.codeWordWrapper, }, @@ -2756,11 +2537,6 @@ const styles = { zIndex: 10, }, - navigatorFullScreenLoading: { - backgroundColor: themeColors.highlightBG, - opacity: 1, - }, - reimbursementAccountFullScreenLoading: { backgroundColor: themeColors.componentBG, opacity: 0.8, @@ -2845,40 +2621,6 @@ const styles = { height: '100%', }, - fullscreenCard: { - position: 'absolute', - left: 0, - top: 0, - width: '100%', - height: '100%', - }, - - fullscreenCardWeb: { - left: 'auto', - right: '-24%', - top: '-18%', - height: '120%', - }, - - fullscreenCardWebCentered: { - left: '0', - right: '0', - top: '0', - height: '60%', - }, - - fullscreenCardMobile: { - left: '-20%', - top: '-30%', - width: '150%', - }, - - fullscreenCardMediumScreen: { - left: '-15%', - top: '-30%', - width: '145%', - }, - smallEditIcon: { alignItems: 'center', backgroundColor: themeColors.buttonHoveredBG, @@ -2897,41 +2639,6 @@ const styles = { bottom: -4, }, - workspaceCard: { - width: '100%', - height: 400, - borderRadius: variables.componentBorderRadiusCard, - overflow: 'hidden', - backgroundColor: themeColors.heroCard, - }, - - workspaceCardMobile: { - height: 475, - }, - - workspaceCardMediumScreen: { - height: 540, - }, - - workspaceCardMainText: { - fontSize: variables.fontSizeXXXLarge, - fontWeight: 'bold', - lineHeight: variables.fontSizeXXXLarge, - }, - - workspaceCardContent: { - zIndex: 1, - padding: 50, - }, - - workspaceCardContentMediumScreen: { - padding: 25, - }, - - workspaceCardCTA: { - width: 250, - }, - autoGrowHeightMultilineInput: { maxHeight: 115, }, @@ -3011,12 +2718,6 @@ const styles = { opacity: variables.overlayOpacity, }, - communicationsLinkIcon: { - right: -36, - top: 0, - bottom: 0, - }, - shortTermsBorder: { borderWidth: 1, borderColor: themeColors.border, @@ -3202,10 +2903,6 @@ const styles = { fontSize: 48, }, - closeAccountMessageInput: { - height: 153, - }, - imageCropContainer: { overflow: 'hidden', alignItems: 'center', @@ -3302,24 +2999,11 @@ const styles = { alignItems: 'center', }, - callRequestSection: { - backgroundColor: themeColors.appBG, - paddingHorizontal: 0, - paddingBottom: 0, - marginHorizontal: 0, - marginBottom: 0, - }, - archivedReportFooter: { borderRadius: variables.componentBorderRadius, ...wordBreak.breakWord, }, - saveButtonPadding: { - paddingLeft: 18, - paddingRight: 18, - }, - deeplinkWrapperContainer: { padding: 20, flex: 1, @@ -3365,11 +3049,7 @@ const styles = { alignSelf: 'flex-start', marginRight: 4, }, - reactionListItem: { - flexDirection: 'row', - paddingVertical: 12, - paddingHorizontal: 20, - }, + reactionListHeaderText: { color: themeColors.textSupporting, marginLeft: 8, @@ -3461,11 +3141,6 @@ const styles = { width: '100%', }, - listPickerSeparator: { - height: 1, - backgroundColor: themeColors.buttonDefaultBG, - }, - datePickerRoot: { position: 'relative', zIndex: 99, @@ -3518,15 +3193,6 @@ const styles = { width: 16, }, - validateCodeMessage: { - width: variables.modalContentMaxWidth, - textAlign: 'center', - }, - - whisper: { - backgroundColor: themeColors.cardBG, - }, - contextMenuItemPopoverMaxWidth: { maxWidth: 375, },