@bifold/core 2.4.6 → 2.6.0

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 },
-      }}
-    />
-  )
-}

package/src/components/chat/ChatEvent.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { Role } from '../../types/chat'
-import { ThemedText } from '../texts/ThemedText'
-
-interface ChatEventProps {
-  userLabel?: string
-  actionLabel?: string
-  role: Role
-}
-
-export const ChatEvent: React.FC<ChatEventProps> = ({ userLabel, actionLabel, role }) => {
-  const { ChatTheme } = useTheme()
-
-  return (
-    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-      {userLabel && (
-        <ThemedText style={[role === Role.me ? ChatTheme.rightText : ChatTheme.leftText, { marginRight: 4 }]}>
-          {userLabel}
-        </ThemedText>
-      )}
-      {actionLabel && (
-        <ThemedText style={role === Role.me ? ChatTheme.rightTextHighlighted : ChatTheme.leftTextHighlighted}>
-          {actionLabel}
-        </ThemedText>
-      )}
-    </View>
-  )
-}

package/src/components/chat/ChatMessage.tsx

@@ -1,142 +0,0 @@
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { TouchableOpacity, View } from 'react-native'
-import { Bubble, IMessage, Message } from 'react-native-gifted-chat'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { Role } from '../../types/chat'
-import { formatTime } from '../../utils/helpers'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-export enum CallbackType {
-  CredentialOffer = 'CredentialOffer',
-  ProofRequest = 'ProofRequest',
-  PresentationSent = 'PresentationSent',
-}
-
-export interface ChatMessageProps {
-  messageProps: React.ComponentProps<typeof Message>
-}
-
-export interface ExtendedChatMessage extends IMessage {
-  renderEvent: () => JSX.Element
-  createdAt: Date
-  messageOpensCallbackType?: CallbackType
-  onDetails?: () => void
-}
-
-const MessageTime: React.FC<{ message: ExtendedChatMessage }> = ({ message }) => {
-  const { ChatTheme: theme } = useTheme()
-
-  return (
-    <ThemedText style={message.user._id === Role.me ? theme.timeStyleRight : theme.timeStyleLeft}>
-      {formatTime(message.createdAt, { includeHour: true, chatFormat: true, trim: true })}
-    </ThemedText>
-  )
-}
-
-const MessageIcon: React.FC<{ type: CallbackType }> = ({ type }) => {
-  const { ChatTheme: theme, Assets } = useTheme()
-
-  return (
-    <View style={{ ...theme.documentIconContainer }}>
-      {type === CallbackType.CredentialOffer && <Assets.svg.iconCredentialOfferLight width={40} height={40} />}
-      {type === CallbackType.PresentationSent && <Assets.svg.iconInfoSentLight width={40} height={40} />}
-      {type === CallbackType.ProofRequest && <Assets.svg.iconProofRequestLight width={40} height={40} />}
-    </View>
-  )
-}
-
-export const ChatMessage: React.FC<ChatMessageProps> = ({ messageProps }) => {
-  const { t } = useTranslation()
-  const { ChatTheme: theme } = useTheme()
-  const message = useMemo(() => messageProps.currentMessage as ExtendedChatMessage, [messageProps])
-
-  const textForCallbackType = (callbackType: CallbackType) => {
-    // Receiving a credential offer
-    if (callbackType === CallbackType.CredentialOffer) {
-      return t('Chat.ViewOffer')
-    }
-
-    // Receiving a proof request
-    if (callbackType === CallbackType.ProofRequest) {
-      return t('Chat.ViewRequest')
-    }
-
-    // After a presentation of a proof
-    if (callbackType === CallbackType.PresentationSent) {
-      return t('Chat.OpenPresentation')
-    }
-
-    return t('Chat.OpenItem')
-  }
-
-  const testIdForCallbackType = (callbackType: CallbackType) => {
-    const text = textForCallbackType(callbackType)
-    const textWithoutSpaces = text.replace(/\s+/g, '')
-
-    return testIdWithKey(textWithoutSpaces)
-  }
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        justifyContent: message.user._id === Role.me ? 'flex-end' : 'flex-start',
-      }}
-    >
-      <View
-        style={{
-          ...theme.containerStyle,
-        }}
-      >
-        <Bubble
-          {...messageProps}
-          key={messageProps.key}
-          renderUsernameOnMessage={false}
-          renderMessageText={() => message.renderEvent()}
-          containerStyle={{
-            left: {
-              margin: 0,
-            },
-            right: {
-              margin: 0,
-            },
-          }}
-          wrapperStyle={{
-            left: { ...theme.leftBubble, marginRight: 0, marginLeft: 0 },
-            right: { ...theme.rightBubble, marginLeft: 0, marginRight: 0 },
-          }}
-          textStyle={{
-            left: { ...theme.leftText },
-            right: { ...theme.rightText },
-          }}
-          renderTime={() => <MessageTime message={message} />}
-          renderCustomView={() =>
-            message.messageOpensCallbackType ? <MessageIcon type={message.messageOpensCallbackType} /> : null
-          }
-        />
-        {message.messageOpensCallbackType && (
-          <TouchableOpacity
-            accessibilityLabel={textForCallbackType(message.messageOpensCallbackType)}
-            accessibilityRole="button"
-            testID={testIdForCallbackType(message.messageOpensCallbackType)}
-            onPress={() => {
-              if (message.onDetails) message.onDetails()
-            }}
-            style={{
-              ...theme.openButtonStyle,
-            }}
-            hitSlop={hitSlop}
-          >
-            <ThemedText style={{ ...theme.openButtonTextStyle }}>
-              {textForCallbackType(message.messageOpensCallbackType)}
-            </ThemedText>
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  )
-}

package/src/components/chat/MessageInput.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { Composer, InputToolbar, Send } from 'react-native-gifted-chat'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-export const renderInputToolbar = (props: any, theme: any) => (
-  <InputToolbar
-    {...props}
-    containerStyle={{
-      ...theme.inputToolbar,
-      justifyContent: 'center',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 5,
-      elevation: 2,
-    }}
-  />
-)
-
-export const renderComposer = (props: any, theme: any, placeholder: string) => (
-  <Composer
-    {...props}
-    textInputStyle={{
-      ...theme.inputText,
-    }}
-    placeholder={placeholder}
-    placeholderTextColor={theme.placeholderText}
-    // the placeholder is read by accessibility features when multiline is enabled so a label is not necessary (results in double announcing if used)
-    textInputProps={{ accessibilityLabel: '', maxFontSizeMultiplier: 1.2 }}
-  />
-)
-
-export const renderSend = (props: any, theme: any) => (
-  <Send
-    {...props}
-    alwaysShowSend={true}
-    disabled={!props.text}
-    containerStyle={{
-      ...theme.sendContainer,
-    }}
-  >
-    <Icon name="send" size={38} color={props.text ? theme.sendEnabled : theme.sendDisabled} />
-  </Send>
-)

package/src/components/chat/index.ts

@@ -1,4 +0,0 @@
-import { renderBubble } from './ChatBubble'
-import { renderSend, renderComposer, renderInputToolbar } from './MessageInput'
-
-export { renderBubble, renderSend, renderComposer, renderInputToolbar }