Merge pull request #32679 from margelo/@chrispader/restructure-styles…

…-and-theme-switching

Re-structure styles and theme switching components

.github/scripts/findUnusedKeys.sh

@@ -6,10 +6,10 @@ 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.ts"
-readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities"
+readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts"
+readonly UTILS_STYLES_FILE="${LIB_PATH}/src/styles/utils"
 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"
+readonly UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/util_keys_list_temp.txt"
 readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
 readonly AMOUNT_LINES_TO_SHOW=3
 
@@ -29,7 +29,7 @@ ctrl_c() {
   delete_temp_files
   exit 1
 }
-  
+
 count_lines() {
   local file=$1
   if [[ -e "$file" ]]; then
@@ -43,11 +43,11 @@ count_lines() {
 show_unused_style_keywords() {
   while IFS=: read -r key file line_number; do
     title "File: $file:$line_number"
-    
+
     # Get lines before and after the error line
     local lines_before=$((line_number - AMOUNT_LINES_TO_SHOW))
     local lines_after=$((line_number + AMOUNT_LINES_TO_SHOW))
-    
+
     # Read the lines into an array
     local lines=()
     while IFS= read -r line; do
@@ -84,22 +84,22 @@ lookfor_unused_keywords() {
 
     # Search for keywords starting with "styles"
     while IFS= read -r keyword; do
-        
+
         # Remove any [ ] characters from the keyword
         local clean_keyword="${keyword//[\[\]]/}"
         # skip styles. keyword that might be used in comments
         if [[ "$clean_keyword" == "styles." ]]; then
           continue
         fi
-        
+
         if ! remove_keyword "$clean_keyword" ; then
           # In case of a leaf of the styles object is being used, it means the parent objects is being used
           # we need to mark it as used.
           if [[ "$clean_keyword" =~ ^styles\.[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$ ]]; then
             # Keyword has more than two words, remove words after the second word
             local keyword_prefix="${clean_keyword%.*}"
             remove_keyword "$keyword_prefix"
-          fi        
+          fi
         fi
     done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   done < <(find "${SRC_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
@@ -134,10 +134,10 @@ find_styles_object_and_store_keys() {
     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" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
       key="${BASH_REMATCH[2]%%:*{*)}"
-      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"    
+      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
     fi
   done < "$file"
 }
@@ -225,7 +225,7 @@ find_theme_style_and_store_keys() {
 
       continue
     fi
-    
+
     if [[ "$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%%:*}"
@@ -295,63 +295,63 @@ lookfor_unused_spread_keywords() {
   done < "$STYLES_FILE"
 }
 
-find_utility_styles_store_prefix() {
+find_util_styles_store_prefix() {
   # Loop through all files in the src folder
   while read -r file; do
     # Search for keywords starting with "styles"
     while IFS= read -r keyword; do
         local variable="${keyword##*/}"
         local variable_trimmed="${variable// /}"  # Trim spaces
-          
-        echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
-    done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
+
+        echo "$variable_trimmed" >> "$UTIL_STYLES_KEYS_FILE"
+    done < <(grep -E -o './utils/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
-  sort -u -o "${UTILITY_STYLES_KEYS_FILE}" "${UTILITY_STYLES_KEYS_FILE}"
+  sort -u -o "${UTIL_STYLES_KEYS_FILE}" "${UTIL_STYLES_KEYS_FILE}"
 }
 
-find_utility_usage_as_styles() {
+find_util_usage_as_styles() {
   while read -r file; do
     local root_key
     local parent_dir
 
-    # Get the folder name, given this utility files are index.js
+    # Get the folder name, given this util files are index.js
     parent_dir=$(dirname "$file")
     root_key=$(basename "${parent_dir}")
 
-    if [[ "${root_key}" == "utilities" ]]; then
+    if [[ "${root_key}" == "utils" ]]; then
       continue
     fi
 
     find_theme_style_and_store_keys "${file}" 0 "${root_key}"
-  done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${UTILS_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
-lookfor_unused_utilities() {
-  # Read each utility keyword from the file
+lookfor_unused_utils() {
+  # Read each util keyword from the file
   while read -r keyword; do
-    # Creating a copy so later the replacement can reference it  
+    # Creating a copy so later the replacement can reference it
     local original_keyword="${keyword}"
 
     # Iterate through all files in "src/styles"
     while read -r file; do
       # Find all words that match "$keyword.[a-zA-Z0-9_-]+"
       while IFS= read -r match; do
-        # Replace the utility prefix with "styles"
+        # Replace the util prefix with "styles"
         local variable="${match/#$original_keyword/styles}"
         # Call the remove_keyword function with the variable
         remove_keyword "${variable}"
         remove_keyword "${match}"
       done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
     done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
-  done < "$UTILITY_STYLES_KEYS_FILE"
+  done < "$UTIL_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 the name of the util files as keys
+find_util_styles_store_prefix
+find_util_usage_as_styles
 
 # Find and store keys from styles.ts
 find_styles_object_and_store_keys "$STYLES_FILE"
@@ -360,8 +360,8 @@ collect_theme_keys_from_styles "$STYLES_FILE"
 
 echo "🗄️ Now going through the codebase and looking for unused keys."
 
-# Look for usages of utilities into src/styles
-lookfor_unused_utilities
+# Look for usages of utils into src/styles
+lookfor_unused_utils
 lookfor_unused_spread_keywords
 lookfor_unused_keywords
 

.storybook/theme.js

@@ -1,5 +1,5 @@
 import {create} from '@storybook/theming';
-import colors from '../src/styles/colors';
+import colors from '../src/styles/theme/colors';
 
 export default create({
     brandTitle: 'New Expensify UI Docs',

src/App.js

@@ -16,6 +16,9 @@ import {LocaleContextProvider} from './components/LocaleContextProvider';
 import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';
 import SafeArea from './components/SafeArea';
+import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider';
+import ThemeProvider from './components/ThemeProvider';
+import ThemeStylesProvider from './components/ThemeStylesProvider';
 import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
 import {KeyboardStateProvider} from './components/withKeyboardState';
@@ -26,9 +29,6 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
-import ThemeIllustrationsProvider from './styles/illustrations/ThemeIllustrationsProvider';
-import ThemeProvider from './styles/themes/ThemeProvider';
-import ThemeStylesProvider from './styles/ThemeStylesProvider';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {

src/components/AddPlaidBankAccount.js

@@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';

src/components/AddressForm.js

@@ -5,9 +5,9 @@ import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';

src/components/AddressSearch/CurrentLocationButton.js

@@ -5,10 +5,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import colors from '@styles/colors';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import colors from '@styles/theme/colors';
 
 const propTypes = {
     /** Callback that runs when location button is clicked */

src/components/AddressSearch/index.js

@@ -10,13 +10,13 @@ import networkPropTypes from '@components/networkPropTypes';
 import {withNetwork} from '@components/OnyxProvider';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import CurrentLocationButton from './CurrentLocationButton';

src/components/AmountTextInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
 import TextInput from './TextInput';

src/components/AnchorForAttachmentsOnly/index.native.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -7,12 +7,12 @@ import _ from 'underscore';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
 

src/components/AnimatedStep/index.tsx

@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import {AnimationDirection} from './AnimatedStepContext';

src/components/AnonymousReportFooter.tsx

@@ -3,7 +3,7 @@ import {Text, View} from 'react-native';
 import {OnyxCollection} from 'react-native-onyx';
 import {OnyxEntry} from 'react-native-onyx/lib/types';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';

src/components/ArchivedReportFooter.tsx

@@ -2,10 +2,10 @@ import lodashEscape from 'lodash/escape';
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx';

src/components/AttachmentModal.js

@@ -8,6 +8,9 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
@@ -19,9 +22,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';

src/components/AttachmentPicker/index.native.js

@@ -12,9 +12,9 @@ import Popover from '@components/Popover';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
 import launchCamera from './launchCamera';

src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {PixelRatio, View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Cell Container styles */

src/components/Attachments/AttachmentCarousel/CarouselButtons.js

@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Where the arrows should be visible */

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -8,8 +8,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {

src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js

@@ -15,7 +15,7 @@ import Animated, {
     withDecay,
     withSpring,
 } from 'react-native-reanimated';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 import ImageWrapper from './ImageWrapper';