@bifold/core 2.2.1 → 2.4.0

package/src/screens/ProofRequestUsageHistory.tsx

@@ -41,7 +41,7 @@ const getPresentationStateLabel = (record: ProofExchangeRecord) => {
 
 const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordProps> = ({ record, navigation }) => {
   const { t } = useTranslation()
-  const { ListItems, ColorPallet } = useTheme()
+  const { ListItems, ColorPalette } = useTheme()
   const [store] = useStore()
   const connection = useConnectionById(record.connectionId ?? '')
   const theirLabel = useMemo(
@@ -67,7 +67,7 @@ const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordPro
       marginVertical: 2,
     },
     valueLabel: {
-      color: ColorPallet.grayscale.black,
+      color: ColorPalette.grayscale.black,
     },
     valueText: {
       ...ListItems.requestTemplateTitle,

package/src/screens/ProofRequesting.tsx

@@ -57,7 +57,7 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
   }
 
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const isFocused = useIsFocused()
   const [store] = useStore()
   const [generating, setGenerating] = useState(true)
@@ -73,7 +73,7 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
   const styles = StyleSheet.create({
     container: {
       flexGrow: 1,
-      backgroundColor: ColorPallet.grayscale.white,
+      backgroundColor: ColorPalette.grayscale.white,
     },
     headerContainer: {
       alignItems: 'center',
@@ -88,18 +88,18 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
     secondaryHeaderText: {
       textAlign: 'center',
       marginTop: 8,
-      color: ColorPallet.grayscale.black,
+      color: ColorPalette.grayscale.black,
     },
     interopText: {
       alignSelf: 'center',
       marginBottom: -20,
       paddingHorizontal: 10,
-      backgroundColor: ColorPallet.grayscale.white,
+      backgroundColor: ColorPalette.grayscale.white,
       zIndex: 100,
       textAlign: 'center',
       fontWeight: TextTheme.bold.fontWeight,
       fontSize: 22,
-      color: ColorPallet.brand.primary,
+      color: ColorPalette.brand.primary,
     },
     qrContainer: {
       height: qrContainerSize,

package/src/screens/RenameContact.tsx

@@ -31,7 +31,7 @@ const RenameContact: React.FC<RenameContactProps> = ({ route }) => {
   const { connectionId } = route.params
   const connection = useConnectionById(connectionId)
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const navigation = useNavigation()
   const [store, dispatch] = useStore()
   const [contactName, setContactName] = useState(getConnectionName(connection, store.preferences.alternateContactNames))
@@ -45,7 +45,7 @@ const RenameContact: React.FC<RenameContactProps> = ({ route }) => {
   const styles = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/screens/Settings.tsx

@@ -40,7 +40,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
     navigation.navigate(Screens.Developer)
   }
   const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
-  const { SettingsTheme, TextTheme, ColorPallet, Assets, maxFontSizeMultiplier } = useTheme()
+  const { SettingsTheme, TextTheme, ColorPalette, Assets, maxFontSizeMultiplier } = useTheme()
   const [{ settings, enableTours, enablePushNotifications, disableContactsInSettings }, historyEnabled] = useServices([
     TOKENS.CONFIG,
     TOKENS.HISTORY_ENABLED,
@@ -50,7 +50,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
   const defaultIconSize = 24
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -77,7 +77,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
     footer: {
@@ -100,7 +100,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
           },
           accessibilityLabel: t('NameWallet.EditWalletName'),
           testID: testIdWithKey('EditWalletName'),
-          style: { color: ColorPallet.brand.primary },
+          style: { color: ColorPalette.brand.primary },
         },
         titleTestID: store.preferences.useConnectionInviterCapability ? testIdWithKey('WalletName') : undefined,
       },
@@ -362,7 +362,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         >
           {title}
         </ThemedText>
-        <ThemedText style={[TextTheme.settingsText, { color: ColorPallet.brand.link }]}>{value}</ThemedText>
+        <ThemedText style={[TextTheme.settingsText, { color: ColorPalette.brand.link }]}>{value}</ThemedText>
       </TouchableOpacity>
     </ScrollView>
   )

package/src/screens/Splash.tsx

@@ -25,7 +25,7 @@ const Splash: React.FC<SplashProps> = ({ initializeAgent }) => {
   const { walletSecret } = useAuth()
   const { t } = useTranslation()
   const [store] = useStore()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { LoadingIndicator } = useAnimatedComponents()
   const initializing = useRef(false)
   const [logger, ocaBundleResolver] = useServices([TOKENS.UTIL_LOGGER, TOKENS.UTIL_OCA_RESOLVER])
@@ -35,7 +35,7 @@ const Splash: React.FC<SplashProps> = ({ initializeAgent }) => {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
   })
 

package/src/screens/Terms.tsx

@@ -27,25 +27,14 @@ const Terms: React.FC = () => {
   const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
   const { OnboardingTheme, TextTheme } = useTheme()
   const [Button] = useServices([TOKENS.COMP_BUTTON])
+
   const onSubmitPressed = useCallback(() => {
     dispatch({
       type: DispatchAction.DID_AGREE_TO_TERMS,
       payload: [{ DidAgreeToTerms: TermsVersion }],
     })
+  }, [dispatch])
 
-    if (!(agreedToPreviousTerms && store.onboarding.didCreatePIN)) {
-      navigation.navigate(Screens.CreatePIN)
-    } else if (store.onboarding.postAuthScreens.length) {
-      const screens: string[] = store.onboarding.postAuthScreens
-      screens.shift()
-      dispatch({ type: DispatchAction.SET_POST_AUTH_SCREENS, payload: [screens] })
-      if (screens.length) {
-        navigation.navigate(screens[0] as never)
-      } else {
-        dispatch({ type: DispatchAction.DID_COMPLETE_ONBOARDING, payload: [true] })
-      }
-    }
-  }, [dispatch, agreedToPreviousTerms, navigation, store.onboarding.postAuthScreens, store.onboarding.didCreatePIN])
   const style = StyleSheet.create({
     container: {
       ...OnboardingTheme.container,
@@ -60,6 +49,7 @@ const Terms: React.FC = () => {
       marginBottom: 20,
     },
   })
+
   const onBackPressed = () => {
     //TODO:(jl) goBack() does not unwind the navigation stack but rather goes
     //back to the splash screen. Needs fixing before the following code will

package/src/screens/ToggleBiometry.tsx

@@ -27,7 +27,7 @@ const ToggleBiometry: React.FC = () => {
   const { commitWalletToKeychain, disableBiometrics } = useAuth()
   const [biometryEnabled, setBiometryEnabled] = useState(store.preferences.useBiometry)
   const [canSeeCheckPIN, setCanSeeCheckPIN] = useState<boolean>(false)
-  const { ColorPallet, NavigationTheme } = useTheme()
+  const { ColorPalette, NavigationTheme } = useTheme()
 
   const logHistoryRecord = useCallback(
     (type: HistoryCardType) => {
@@ -131,7 +131,7 @@ const ToggleBiometry: React.FC = () => {
   return (
     <BiometryControl biometryEnabled={biometryEnabled} onBiometryToggle={handleBiometryToggle}>
       <SafeAreaModal
-        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
         visible={canSeeCheckPIN}
         transparent={false}
         animationType={'slide'}

package/src/screens/TogglePushNotifications.tsx

@@ -20,7 +20,7 @@ const TogglePushNotifications: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [{ enablePushNotifications }] = useServices([TOKENS.CONFIG])
   const [notificationState, setNotificationState] = useState<boolean>(store.preferences.usePushNotifications)
   const [notificationStatus, setNotificationStatus] = useState<'denied' | 'granted' | 'unknown'>('unknown')
@@ -97,9 +97,9 @@ const TogglePushNotifications: React.FC = () => {
               <View style={styles.toggleContainer}>
                 <ThemedText>{t('PushNotifications.ReceiveNotifications')}</ThemedText>
                 <Switch
-                  trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-                  thumbColor={notificationState ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-                  ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+                  trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+                  thumbColor={notificationState ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+                  ios_backgroundColor={ColorPalette.grayscale.lightGrey}
                   onValueChange={toggleSwitch}
                   accessibilityLabel={t('PushNotifications.ReceiveNotifications')}
                   accessibilityRole="switch"

package/src/screens/Tours.tsx

@@ -18,11 +18,11 @@ interface Option {
 const Tours: React.FC = () => {
   const [store, dispatch] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -37,7 +37,7 @@ const Tours: React.FC = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
   })
@@ -71,8 +71,8 @@ const Tours: React.FC = () => {
                 fillColor="#FFFFFFFF"
                 unfillColor="#FFFFFFFF"
                 size={36}
-                innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-                ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+                innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+                ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
                 onPress={async () => await handleSettingChange(bool)}
                 isChecked={store.tours.enableTours === bool}
                 disableBuiltInState

package/src/screens/UpdateAvailable.tsx

@@ -20,7 +20,7 @@ type UpdateAvailableProps = {
 const UpdateAvailable: React.FC<UpdateAvailableProps> = ({ appleAppStoreUrl, googlePlayStoreUrl }) => {
   const { t } = useTranslation()
   const [, dispatch] = useStore()
-  const { ColorPallet, Assets, Spacing } = useTheme()
+  const { ColorPalette, Assets, Spacing } = useTheme()
   const [logger] = useServices([TOKENS.UTIL_LOGGER])
 
   // Check if both store links are available
@@ -41,7 +41,7 @@ const UpdateAvailable: React.FC<UpdateAvailableProps> = ({ appleAppStoreUrl, goo
   }, [dispatch])
 
   const iconOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 130,
     width: 130,
   }

package/src/screens/WhatAreContacts.tsx

@@ -13,13 +13,13 @@ interface WhatAreContactsProps {
 }
 
 const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { t } = useTranslation()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     pageContent: {
       marginTop: 30,

package/src/services/logger.ts

@@ -35,34 +35,34 @@ export class BifoldLogger extends BaseLogger {
   }
 
   public test(message: string, data?: object | undefined): void {
-    this._log?.test(message, data)
+    this._log?.test({ message, data })
   }
 
   public trace(message: string, data?: object | undefined): void {
-    this._log?.trace(message, data)
+    this._log?.trace({ message, data })
   }
 
   public debug(message: string, data?: object | undefined): void {
-    this._log?.debug(message, data)
+    this._log?.debug({ message, data })
   }
 
   public info(message: string, data?: object | undefined): void {
-    this._log?.info(message, data)
+    this._log?.info({ message, data })
   }
 
   public warn(message: string, data?: object | undefined): void {
-    this._log?.warn(message, data)
+    this._log?.warn({ message, data })
   }
 
   public error(message: string, data?: object | undefined): void {
-    this._log?.error(message, data)
+    this._log?.error({ message, data })
   }
 
   public fatal(message: string, data?: object | undefined): void {
-    this._log?.fatal(message, data)
+    this._log?.fatal({ message, data })
   }
 
   public report(bifoldError: BifoldError): void {
-    this._log?.info('No remote logging configured, report not sent for error:', bifoldError)
+    this._log?.info({ message: 'No remote logging configured, report not sent for error:', data: bifoldError.message })
   }
 }

package/src/theme-builder.ts

@@ -0,0 +1,140 @@
+import {
+  IColorPalette,
+  ITheme,
+  createButtonsTheme,
+  createChatTheme,
+  createHomeTheme,
+  createInputInlineMessageTheme,
+  createInputsTheme,
+  createListItemsTheme,
+  createNavigationTheme,
+  createSettingsTheme,
+  createTabTheme,
+  createTextTheme,
+  createOnboardingTheme,
+  createDialogTheme,
+  createLoadingTheme,
+  createPINInputTheme,
+} from './theme'
+import lodash from 'lodash'
+
+/**
+ * DeepPartial is a utility type that recursively makes all properties of a type optional.
+ */
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object
+    ? T[P] extends (...args: any[]) => any
+      ? T[P] // keep functions as is
+      : // For object types, make all keys optional recursively:
+      Partial<T[P]> extends infer O
+      ? { [K in keyof O]?: DeepPartial<O[K]> }
+      : never
+    : T[P]
+}
+
+/**
+ * ThemeBuilder is a utility class to extend an existing theme with additional properties.
+ *
+ * @class ThemeBuilder
+ */
+export class ThemeBuilder {
+  private _theme: ITheme
+  private _themeOverrides: DeepPartial<ITheme>
+
+  /**
+   * Creates an instance of ThemeBuilder.
+   *
+   * @param {ITheme} baseTheme - The initial theme object to extend.
+   */
+  constructor(baseTheme: ITheme) {
+    this._theme = baseTheme
+    this._themeOverrides = {}
+  }
+
+  /**
+   * Sets the color pallet for the theme.
+   *
+   * Note: This method is mostly a convenience method to set the color pallet for the theme.
+   * The same can be achieved by directly modifying the theme object using the `withOverrides` method.
+   *
+   * @param {IColorPalette} colorPalette - The color pallet to set for the theme.
+   * @returns {*} {ThemeBuilder} Returns the instance of ThemeBuilder for method chaining.
+   */
+  setColorPalette(colorPalette: IColorPalette): this {
+    this._theme.ColorPalette = colorPalette
+
+    return this
+  }
+
+  /**
+   * Overrides properties in the current theme with the provided themeOverrides.
+   *
+   * Note: This will overwrite existing properties in the current theme with those from the provided themeOverrides.
+   *
+   * @example
+   * new ThemeBuilder({ Buttons: { color: 'purple', size: 'large' }})
+   * .withOverrides({ Buttons: { color: 'red' }})
+   * .withOverrides({ Buttons: { spacing: 10 }}) // => { Buttons: { color: 'red', size: 'large', spacing: 10 }}
+   *
+   * @example
+   * new ThemeBuilder({ Buttons: { critical: { padding: 10, margin: 0 }}})
+   * .withOverrides((theme) => ({
+   *  Buttons: { critical: { padding: 0, margin: -1 } },
+   * })) // => { Buttons: { critical: { padding: 0, margin: -1 } }}
+   *
+   * @param {DeepPartial<ITheme> | ((theme: ITheme) => DeepPartial<ITheme>) } themeOverrides A partial theme object to merge with the current theme or a callback function that receives the current theme and returns a partial theme object.
+   * @returns {*} {ThemeBuilder} Returns the instance of ThemeBuilder for method chaining.
+   */
+  withOverrides(themeOverrides: DeepPartial<ITheme> | ((theme: ITheme) => DeepPartial<ITheme>)): this {
+    const resolvedOverrides = typeof themeOverrides === 'function' ? themeOverrides(this._theme) : themeOverrides
+
+    // note: without the empty object, lodash.merge will mutate the original theme overrides,
+    // and not properly update the nested properties
+    this._themeOverrides = lodash.merge({}, this._themeOverrides, resolvedOverrides)
+
+    // Rebuild the theme with the new overrides so following chained calls will use the updated theme.
+    this._theme = this.build()
+
+    // Return the instance for method chaining
+    return this
+  }
+
+  /**
+   * Builds and returns the final theme object.
+   *
+   * @returns {*} {ITheme} Returns the final theme object.
+   */
+  build(): ITheme {
+    // Step 1. Merge the theme overrides onto the original theme, producing the new base theme.
+    const baseTheme = lodash.merge({}, this._theme, this._themeOverrides)
+
+    // Step 2. Generate computed properties that depend on the base theme
+    const dependentThemes: Partial<ITheme> = {
+      TextTheme: createTextTheme(baseTheme),
+      InputInlineMessage: createInputInlineMessageTheme(baseTheme),
+      Inputs: createInputsTheme(baseTheme),
+      Buttons: createButtonsTheme(baseTheme),
+      ListItems: createListItemsTheme(baseTheme),
+      TabTheme: createTabTheme(baseTheme),
+      NavigationTheme: createNavigationTheme(baseTheme),
+      HomeTheme: createHomeTheme(baseTheme),
+      SettingsTheme: createSettingsTheme(baseTheme),
+      ChatTheme: createChatTheme(baseTheme),
+      OnboardingTheme: createOnboardingTheme(baseTheme),
+      DialogTheme: createDialogTheme(baseTheme),
+      LoadingTheme: createLoadingTheme(baseTheme),
+      PINInputTheme: createPINInputTheme(baseTheme),
+    }
+
+    /**
+     * Step 3. Merge all together - base + generated + overrides
+     *
+     * Why do we apply the overrides after the dependent themes?
+     * Because the `dependentThemes` contain additional properties that may have
+     * been modified by the overrides previously.
+     */
+    this._theme = lodash.merge({}, baseTheme, dependentThemes, this._themeOverrides)
+
+    return this._theme
+  }
+}