@bifold/core 2.4.5 → 2.5.0

package/src/components/animated/SentProof.tsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-const ringFadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 0,
-  duration: 600,
-  useNativeDriver: true,
-}
-const checkFadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 1,
-  duration: 600,
-  useNativeDriver: true,
-}
-
-const SentProof: React.FC = () => {
-  const { ColorPalette, Assets } = useTheme()
-  const ringFadeAnim = useRef(new Animated.Value(1))
-  const checkFadeAnim = useRef(new Animated.Value(0))
-  const style = StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    credential: {
-      marginTop: 25,
-    },
-    ring: {
-      flexGrow: 3,
-      position: 'absolute',
-    },
-    check: {
-      position: 'absolute',
-    },
-  })
-  const credentialInHandDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 130,
-    width: 130,
-  }
-  const animatedCircleDisplayOptions = {
-    fill: ColorPalette.notification.infoText,
-    height: 250,
-    width: 250,
-  }
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(ringFadeAnim.current, ringFadeTiming),
-      Animated.timing(checkFadeAnim.current, checkFadeTiming),
-    ]).start()
-  }, [])
-
-  return (
-    <View style={style.container}>
-      <View style={{ alignItems: 'center' }}>
-        <Assets.svg.credentialInHand style={style.credential} {...credentialInHandDisplayOptions} />
-        <Animated.View style={[{ opacity: checkFadeAnim.current }, style.check]}>
-          <Assets.svg.checkInCircle {...{ height: 45, width: 45 }} />
-        </Animated.View>
-      </View>
-      <View style={style.ring}>
-        <Animated.View style={{ opacity: ringFadeAnim.current }}>
-          <Assets.svg.activityIndicator {...animatedCircleDisplayOptions} />
-        </Animated.View>
-      </View>
-    </View>
-  )
-}
-
-export default SentProof

package/src/components/buttons/Button-api.tsx

@@ -1,46 +0,0 @@
-import { TouchableOpacity } from 'react-native'
-
-export enum ButtonType {
-  Critical,
-  Primary,
-  Secondary,
-  Tertiary,
-  ModalCritical,
-  ModalPrimary,
-  ModalSecondary,
-  ModalTertiary,
-}
-
-export interface ButtonProps extends React.PropsWithChildren {
-  title: string
-  buttonType: ButtonType
-  accessibilityLabel?: string
-  accessibilityHint?: string
-  maxfontSizeMultiplier?: number
-  testID?: string
-  onPress?: () => void
-  disabled?: boolean
-}
-
-export enum ButtonState {
-  Default = 'default',
-  Disabled = 'disabled',
-  Active = 'active',
-}
-
-export enum ButtonStyleNames {
-  Critical_Default = 'Critical' + '_' + ButtonState.Default,
-  Critical_Disabled = 'Critical' + '_' + ButtonState.Disabled,
-  Critical_Active = 'Critical' + '_' + ButtonState.Active,
-}
-/*
-type stylesType = { readonly [key in ButtonStyleNames]?: ViewStyle | TextStyle | ImageStyle}
-const styles: stylesType = StyleSheet.create({
-  [ButtonStyleNames.Critical_Default]: {},
-  [ButtonType.Secondary]: {},
-  [ButtonType.ModalCritical]: {},
-  [ButtonType.ModalPrimary]: {},
-  [ButtonType.ModalSecondary]: {},
-})
-*/
-export type Button = React.FC<ButtonProps & React.RefAttributes<TouchableOpacity>>

package/src/components/buttons/Button.tsx

@@ -1,125 +0,0 @@
-import React, { forwardRef, useState } from 'react'
-import { TouchableOpacity, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-
-import { Button, ButtonType, ButtonProps } from './Button-api'
-import { ThemedText } from '../texts/ThemedText'
-
-const ButtonImplComponent = (
-  {
-    title,
-    buttonType,
-    accessibilityLabel,
-    accessibilityHint,
-    testID,
-    onPress,
-    disabled = false,
-    maxfontSizeMultiplier,
-    children,
-  }: ButtonProps,
-  ref: React.LegacyRef<TouchableOpacity>
-) => {
-  const { Buttons, heavyOpacity } = useTheme()
-  const buttonStyles = {
-    [ButtonType.Critical]: {
-      color: Buttons.critical,
-      colorDisabled: Buttons.criticalDisabled,
-      text: Buttons.criticalText,
-      textDisabled: Buttons.criticalTextDisabled,
-    },
-    [ButtonType.Primary]: {
-      color: Buttons.primary,
-      colorDisabled: Buttons.primaryDisabled,
-      text: Buttons.primaryText,
-      textDisabled: Buttons.primaryTextDisabled,
-    },
-    [ButtonType.Secondary]: {
-      color: Buttons.secondary,
-      colorDisabled: Buttons.secondaryDisabled,
-      text: Buttons.secondaryText,
-      textDisabled: Buttons.secondaryTextDisabled,
-    },
-    [ButtonType.Tertiary]: {
-      color: Buttons.tertiary,
-      colorDisabled: Buttons.tertiaryDisabled,
-      text: Buttons.tertiaryText,
-      textDisabled: Buttons.tertiaryTextDisabled,
-    },
-    [ButtonType.ModalCritical]: {
-      color: Buttons.modalCritical,
-      colorDisabled: Buttons.modalCriticalDisabled,
-      text: Buttons.modalCriticalText,
-      textDisabled: Buttons.modalCriticalTextDisabled,
-    },
-    [ButtonType.ModalPrimary]: {
-      color: Buttons.modalPrimary,
-      colorDisabled: Buttons.modalPrimaryDisabled,
-      text: Buttons.modalPrimaryText,
-      textDisabled: Buttons.modalPrimaryTextDisabled,
-    },
-    [ButtonType.ModalSecondary]: {
-      color: Buttons.modalSecondary,
-      colorDisabled: Buttons.modalSecondaryDisabled,
-      text: Buttons.modalSecondaryText,
-      textDisabled: Buttons.modalSecondaryTextDisabled,
-    },
-    [ButtonType.ModalTertiary]: {
-      color: Buttons.modalTertiary,
-      colorDisabled: Buttons.modalTertiaryDisabled,
-      text: Buttons.modalTertiaryText,
-      textDisabled: Buttons.modalTertiaryTextDisabled,
-    },
-  }
-  const [isActive, setIsActive] = useState<boolean>(false)
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      accessible
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={'button'}
-      onPressIn={() => setIsActive(!disabled && true)}
-      onPressOut={() => setIsActive(false)}
-      testID={testID}
-      style={[
-        buttonStyles[buttonType].color,
-        disabled && buttonStyles[buttonType].colorDisabled,
-        isActive &&
-          (buttonType === ButtonType.Secondary || buttonType === ButtonType.Tertiary) && {
-            backgroundColor: Buttons.primary.backgroundColor,
-          },
-      ]}
-      disabled={disabled}
-      activeOpacity={heavyOpacity}
-      ref={ref}
-    >
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        {children}
-        <ThemedText
-          maxFontSizeMultiplier={maxfontSizeMultiplier}
-          style={[
-            buttonStyles[buttonType].text,
-            disabled && buttonStyles[buttonType].textDisabled,
-            isActive && { textDecorationLine: 'underline' },
-            isActive && buttonType === ButtonType.Secondary && { color: Buttons.primaryText.color },
-          ]}
-        >
-          {title}
-        </ThemedText>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-const ButtonImpl = forwardRef<TouchableOpacity, ButtonProps>(ButtonImplComponent)
-export default ButtonImpl
-export { ButtonType, ButtonImpl }
-export type { Button, ButtonProps }

package/src/components/buttons/HeaderHome.tsx

@@ -1,25 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { Screens, TabStacks } from '../../types/navigators'
-import { testIdWithKey } from '../../utils/testable'
-
-import IconButton, { ButtonLocation } from './IconButton'
-
-const HeaderRightHome: React.FC = () => {
-  const { t } = useTranslation()
-  const navigation = useNavigation()
-
-  return (
-    <IconButton
-      buttonLocation={ButtonLocation.Right}
-      accessibilityLabel={t('Global.Home')}
-      testID={testIdWithKey('HomeButton')}
-      onPress={() => navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })}
-      icon="home"
-    />
-  )
-}
-
-export default HeaderRightHome

package/src/components/buttons/IconButton.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import { StyleSheet, Pressable, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-const defaultIconSize = 26
-
-export enum ButtonLocation {
-  Left,
-  Right,
-}
-
-interface IconButtonProps {
-  buttonLocation: ButtonLocation
-  accessibilityLabel: string
-  testID: string
-  onPress: () => void
-  icon: string
-  text?: string
-  iconTintColor?: string
-}
-
-const IconButton: React.FC<IconButtonProps> = ({
-  buttonLocation,
-  icon,
-  text,
-  accessibilityLabel,
-  testID,
-  onPress,
-  iconTintColor,
-}) => {
-  const { ColorPalette } = useTheme()
-  const style = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginRight: buttonLocation === ButtonLocation.Left ? 0 : 15,
-      marginLeft: buttonLocation === ButtonLocation.Right ? 0 : 15,
-      minWidth: defaultIconSize,
-      minHeight: defaultIconSize,
-    },
-    title: {
-      color: ColorPalette.brand.headerText,
-      marginRight: 4,
-    },
-  })
-
-  const myIcon = () => (
-    <Icon name={icon} size={defaultIconSize} color={iconTintColor ?? ColorPalette.brand.headerIcon} />
-  )
-
-  const myText = () =>
-    text ? (
-      <ThemedText maxFontSizeMultiplier={1} variant="label" style={style.title}>
-        {text}
-      </ThemedText>
-    ) : null
-
-  const layoutForButtonLocation = (buttonLocation: ButtonLocation) => {
-    switch (buttonLocation) {
-      case ButtonLocation.Left:
-        return (
-          <>
-            {myIcon()}
-            {myText()}
-          </>
-        )
-      case ButtonLocation.Right:
-        return (
-          <>
-            {myText()}
-            {myIcon()}
-          </>
-        )
-    }
-  }
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole={'button'}
-      testID={testID}
-      onPress={onPress}
-      hitSlop={hitSlop}
-    >
-      <View style={style.container}>{layoutForButtonLocation(buttonLocation)}</View>
-    </Pressable>
-  )
-}
-
-export default IconButton

package/src/components/buttons/InfoIcon.tsx

@@ -1,35 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { RootStackParams, Screens, Stacks } from '../../types/navigators'
-import { testIdWithKey } from '../../utils/testable'
-
-import IconButton, { ButtonLocation } from './IconButton'
-
-interface InfoIconProps {
-  connectionId: string
-}
-
-const InfoIcon: React.FC<InfoIconProps> = ({ connectionId }) => {
-  const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
-  const { t } = useTranslation()
-
-  return (
-    <IconButton
-      buttonLocation={ButtonLocation.Right}
-      accessibilityLabel={t('Chat.Details')}
-      testID={testIdWithKey('Settings')}
-      onPress={() =>
-        navigation.navigate(Stacks.ContactStack, {
-          screen: Screens.ContactDetails,
-          params: { connectionId: connectionId },
-        })
-      }
-      icon="dots-vertical"
-    />
-  )
-}
-
-export default InfoIcon

package/src/components/buttons/SettingsMenu.tsx

@@ -1,26 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { RootStackParams, Screens, Stacks } from '../../types/navigators'
-import { testIdWithKey } from '../../utils/testable'
-
-import IconButton, { ButtonLocation } from './IconButton'
-
-const SettingsMenu: React.FC = () => {
-  const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
-  const { t } = useTranslation()
-
-  return (
-    <IconButton
-      buttonLocation={ButtonLocation.Left}
-      accessibilityLabel={t('Screens.Settings')}
-      testID={testIdWithKey('Settings')}
-      onPress={() => navigation.navigate(Stacks.SettingStack, { screen: Screens.Settings })}
-      icon="menu"
-    />
-  )
-}
-
-export default SettingsMenu

package/src/components/buttons/ToggleButton.tsx

@@ -1,93 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Pressable, Animated } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-import { useTheme } from '../../contexts/theme'
-import { useTranslation } from 'react-i18next'
-
-interface ToggleButtonProps {
-  isEnabled: boolean
-  isAvailable: boolean
-  toggleAction: () => void
-  testID?: string
-  enabledIcon?: string
-  disabledIcon?: string
-  disabled?: boolean
-}
-
-const ToggleButton: React.FC<ToggleButtonProps> = ({
-  isEnabled,
-  isAvailable,
-  toggleAction,
-  testID,
-  enabledIcon = 'check',
-  disabledIcon = 'close',
-  disabled = false,
-}) => {
-  const { ColorPalette } = useTheme()
-  const [toggleAnim] = useState(new Animated.Value(isEnabled ? 1 : 0))
-  const { t } = useTranslation()
-
-  useEffect(() => {
-    Animated.timing(toggleAnim, {
-      toValue: isEnabled ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start()
-  }, [isEnabled, toggleAnim])
-
-  const backgroundColor = toggleAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [ColorPalette.grayscale.lightGrey, ColorPalette.brand.primary],
-  })
-
-  const translateX = toggleAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 24],
-  })
-
-  return (
-    <Pressable
-      accessible
-      testID={testID}
-      accessibilityLabel={isEnabled ? t('Biometry.On') : t('Biometry.Off')}
-      accessibilityRole="switch"
-      accessibilityState={{
-        checked: isEnabled,
-      }}
-      onPress={isAvailable && !disabled ? toggleAction : undefined} // Prevent onPress if not available or disabled
-      disabled={!isAvailable || disabled}
-    >
-      <Animated.View
-        style={{
-          width: 55,
-          height: 30,
-          borderRadius: 25,
-          backgroundColor,
-          padding: 3,
-          justifyContent: 'center',
-          opacity: disabled ? 0.5 : 1, // Visual feedback for disabled state
-        }}
-      >
-        <Animated.View
-          style={{
-            transform: [{ translateX }],
-            width: 25,
-            height: 25,
-            borderRadius: 20,
-            backgroundColor: '#FFFFFF',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <Icon
-            name={isEnabled ? enabledIcon : disabledIcon}
-            size={15}
-            color={isEnabled ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-          />
-        </Animated.View>
-      </Animated.View>
-    </Pressable>
-  )
-}
-
-export default ToggleButton

package/src/components/buttons/index.ts

@@ -1,4 +0,0 @@
-import * as Button from './Button'
-import * as ToggleButton from './ToggleButton'
-
-export { Button, ToggleButton }

package/src/components/chat/ActionSlider.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-import SafeAreaModal from '../modals/SafeAreaModal'
-
-interface Action {
-  text: string
-  icon: React.FC
-  onPress: () => void
-}
-
-interface Props {
-  actions: Action[] | undefined
-  onDismiss: () => void
-}
-
-const ActionSlider: React.FC<Props> = ({ actions, onDismiss }) => {
-  const { ColorPalette, TextTheme } = useTheme()
-  const { t } = useTranslation()
-
-  const styles = StyleSheet.create({
-    centeredView: {
-      marginTop: 'auto',
-      justifyContent: 'flex-end',
-    },
-    outsideListener: {
-      height: '100%',
-    },
-    modalView: {
-      backgroundColor: ColorPalette.grayscale.white,
-      borderTopStartRadius: 20,
-      borderTopEndRadius: 20,
-      shadowColor: '#000',
-      padding: 20,
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 4,
-      elevation: 5,
-    },
-    drawerTitleText: {
-      ...TextTheme.bold,
-      textAlign: 'center',
-      marginVertical: 10,
-    },
-    drawerContentText: {
-      ...TextTheme.normal,
-    },
-    drawerRow: {
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-      marginVertical: 12,
-    },
-    drawerRowItem: {
-      color: ColorPalette.grayscale.black,
-    },
-  })
-
-  return (
-    <SafeAreaModal animationType="slide" transparent={true} onRequestClose={onDismiss}>
-      <TouchableOpacity style={styles.outsideListener} onPress={onDismiss} />
-      <View style={styles.centeredView}>
-        <View style={styles.modalView}>
-          <TouchableOpacity
-            testID={testIdWithKey('Close')}
-            accessibilityLabel={t('Global.Close')}
-            accessibilityRole={'button'}
-            onPress={onDismiss}
-            hitSlop={hitSlop}
-            style={{ alignSelf: 'flex-end' }}
-          >
-            <Icon name="window-close" size={35} style={styles.drawerRowItem}></Icon>
-          </TouchableOpacity>
-          {actions?.map((action) => {
-            return (
-              <TouchableOpacity
-                key={action.text}
-                testID={testIdWithKey(action.text)}
-                accessibilityLabel={action.text}
-                accessibilityRole="button"
-                style={styles.drawerRow}
-                onPress={action.onPress}
-              >
-                <action.icon />
-                <ThemedText style={{ ...styles.drawerRowItem, marginLeft: 5 }}>{action.text}</ThemedText>
-              </TouchableOpacity>
-            )
-          })}
-        </View>
-      </View>
-    </SafeAreaModal>
-  )
-}
-
-export default ActionSlider

package/src/components/chat/ChatActions.tsx

@@ -1,33 +0,0 @@
-import { t } from 'i18next'
-import React from 'react'
-import { Actions } from 'react-native-gifted-chat'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-export const renderActions = (
-  props: any,
-  theme: any,
-  actions?: { text: string; icon: React.FC; onPress: () => void }[]
-) => {
-  return actions ? (
-    <Actions
-      {...props}
-      containerStyle={{
-        width: 40,
-        height: 40,
-        marginBottom: 6,
-        marginLeft: 20,
-      }}
-      icon={() => (
-        <Icon
-          name={'plus-box-outline'}
-          size={40}
-          color={theme.options}
-          accessible={true}
-          accessibilityLabel={t('Chat.Actions')}
-          accessibilityRole="button"
-        />
-      )}
-      optionTintColor={theme.optionsText}
-    />
-  ) : null
-}

package/src/components/chat/ChatBubble.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { Bubble } from 'react-native-gifted-chat'
-
-export const renderBubble = (props: any, theme: any) => {
-  return (
-    <Bubble
-      {...props}
-      wrapperStyle={{
-        left: {
-          ...theme.leftBubble,
-        },
-        right: { ...theme.rightBubble },
-      }}
-      textStyle={{
-        left: { ...theme.leftText },
-        right: { ...theme.rightText },
-      }}
-    />
-  )
-}