@bifold/core 2.4.5 → 2.5.0

package/src/components/inputs/InlineErrorText.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { SvgProps } from 'react-native-svg'
-import { InlineErrorConfig } from '../../types/error'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-export enum InlineErrorType {
-  error,
-  warning,
-}
-
-export interface InlineMessageProps {
-  message: string
-  inlineType: InlineErrorType
-  config: InlineErrorConfig
-}
-
-const InlineErrorText: React.FC<InlineMessageProps> = ({ message, inlineType, config }) => {
-  const { InputInlineMessage } = useTheme()
-  const style = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignContent: 'center',
-      marginVertical: 5,
-      paddingRight: 20,
-    },
-    icon: { marginRight: 4 },
-  })
-
-  const color =
-    inlineType === InlineErrorType.warning
-      ? InputInlineMessage.inlineWarningText.color
-      : InputInlineMessage.inlineErrorText.color
-
-  const props: SvgProps = { height: 24, width: 24, color: color, style: style.icon }
-
-  const getInlineErrorIcon = () => {
-    if (!config.hasErrorIcon) return null
-
-    if (inlineType === InlineErrorType.warning) {
-      return <InputInlineMessage.InlineWarningIcon {...props} />
-    } else {
-      return <InputInlineMessage.InlineErrorIcon {...props} />
-    }
-  }
-
-  return (
-    <View style={[style.container, config.style]}>
-      {getInlineErrorIcon()}
-      <ThemedText style={[InputInlineMessage.inlineErrorText]} testID={testIdWithKey('InlineErrorText')}>
-        {message}
-      </ThemedText>
-    </View>
-  )
-}
-
-export default InlineErrorText

package/src/components/inputs/LimitedTextInput.tsx

@@ -1,71 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { View, StyleSheet, TextInput, TextInputProps } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-interface LimitedTextInputProps extends TextInputProps {
-  showLimitCounter?: boolean
-  label: string
-  limit: number
-  handleChangeText: (text: string) => void
-}
-
-const LimitedTextInput: React.FC<LimitedTextInputProps> = ({
-  showLimitCounter = true,
-  label,
-  limit,
-  handleChangeText,
-  ...textInputProps
-}) => {
-  const [focused, setFocused] = useState(false)
-  const [characterCount, setCharacterCount] = useState(0)
-  const { Inputs, TextTheme, maxFontSizeMultiplier } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      marginVertical: 10,
-      width: '100%',
-    },
-    textInput: {
-      ...Inputs.textInput,
-    },
-    limitCounter: {
-      color: TextTheme.normal.color,
-      alignSelf: 'flex-end',
-    },
-  })
-
-  useEffect(() => {
-    if (textInputProps.defaultValue?.length) {
-      setCharacterCount(textInputProps.defaultValue.length)
-    }
-  }, [textInputProps.defaultValue])
-
-  const onChangeText = (text: string) => {
-    setCharacterCount(text.length)
-    handleChangeText(text)
-  }
-
-  return (
-    <View style={styles.container}>
-      <ThemedText style={{ marginBottom: 5 }}>{label}</ThemedText>
-      <TextInput
-        maxLength={limit}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-        style={[styles.textInput, focused && { ...Inputs.inputSelected }]}
-        selectionColor={Inputs.inputSelected.borderColor}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        onChangeText={onChangeText}
-        {...textInputProps}
-      />
-      {showLimitCounter && (
-        <ThemedText style={styles.limitCounter}>
-          {characterCount}/{limit}
-        </ThemedText>
-      )}
-    </View>
-  )
-}
-
-export default LimitedTextInput

package/src/components/inputs/PINInput.tsx

@@ -1,175 +0,0 @@
-import React, { useState, forwardRef, Ref, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
-import { CodeField, Cursor, useClearByFocusCell } from 'react-native-confirmation-code-field'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop, minPINLength } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import InlineErrorText, { InlineMessageProps } from './InlineErrorText'
-import { InlineErrorPosition } from '../../types/error'
-import { ThemedText } from '../texts/ThemedText'
-
-// adjusting for the spaces between numbers
-const cellCount = minPINLength * 2 - 1
-
-interface PINInputProps {
-  label?: string
-  onPINChanged?: (PIN: string) => void
-  testID?: string
-  accessibilityLabel?: string
-  autoFocus?: boolean
-  inlineMessage?: InlineMessageProps
-  onSubmitEditing?: () => void
-}
-
-const PINInputComponent = (
-  { label, onPINChanged, testID, accessibilityLabel, autoFocus = false, inlineMessage, onSubmitEditing }: PINInputProps,
-  ref: Ref<TextInput>
-) => {
-  const [PIN, setPIN] = useState('')
-  const [showPIN, setShowPIN] = useState(false)
-  const { t } = useTranslation()
-  const { PINInputTheme } = useTheme()
-  const cellHeight = 48
-
-  // including spaces to prevent screen reader from reading the PIN as a single number
-  // filling with bullets when masked to prevent screen reader from reading the actual PIN
-  // and to have the proper appearance when the PIN is masked
-  const displayValue = useMemo(() => {
-    if (showPIN) {
-      return PIN.split('').join(' ')
-    } else {
-      return '●'.repeat(PIN.length).split('').join(' ')
-    }
-  }, [PIN, showPIN])
-
-  const onChangeText = (value: string) => {
-    const cleanValue = value.replaceAll(' ', '')
-    // typed new characters
-    if (cleanValue.length > PIN.length) {
-      // add new characters to the actual PIN
-      const newChars = cleanValue.slice(PIN.length)
-      const newPIN = PIN + newChars.replace(/●/g, '')
-      setPIN(newPIN)
-      onPINChanged && onPINChanged(newPIN)
-      // characters were removed
-    } else if (cleanValue.length < displayValue.replaceAll(' ', '').length) {
-      // remove same number of characters from actual PIN
-      const newPIN = PIN.slice(0, cleanValue.length)
-      setPIN(newPIN)
-      onPINChanged && onPINChanged(newPIN)
-    }
-  }
-
-  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
-    value: displayValue,
-    setValue: onChangeText,
-  })
-
-  const allyLabel = useMemo(() => {
-    return showPIN ? accessibilityLabel : t('PINCreate.Masked')
-  }, [accessibilityLabel, showPIN, t])
-
-  const style = StyleSheet.create({
-    container: {
-      flexDirection: 'column',
-      marginBottom: 24,
-    },
-    codeFieldContainer: {
-      flex: 1,
-    },
-    cell: {
-      height: cellHeight,
-      paddingHorizontal: 2,
-      backgroundColor: PINInputTheme.cell.backgroundColor,
-    },
-    cellText: {
-      color: PINInputTheme.cellText.color,
-      textAlign: 'center',
-      lineHeight: cellHeight,
-    },
-    hideIcon: {
-      paddingHorizontal: 10,
-    },
-  })
-
-  const content = () => (
-    <View style={PINInputTheme.labelAndFieldContainer}>
-      <View style={style.codeFieldContainer}>
-        <CodeField
-          {...props}
-          testID={testID}
-          accessibilityLabel={allyLabel}
-          accessibilityRole={'text'}
-          accessible
-          value={displayValue}
-          rootStyle={PINInputTheme.codeFieldRoot}
-          onChangeText={onChangeText}
-          cellCount={cellCount}
-          keyboardType="number-pad"
-          textContentType="password"
-          renderCell={({ index, symbol, isFocused }) => {
-            let child: React.ReactNode | string = ''
-            // skip spaces
-            if (symbol && symbol !== ' ') {
-              child = symbol
-            } else if (isFocused) {
-              child = <Cursor />
-            }
-            return (
-              <View key={index} style={style.cell} onLayout={getCellOnLayoutHandler(index)}>
-                <ThemedText variant="headingThree" style={style.cellText} maxFontSizeMultiplier={1}>
-                  {child}
-                </ThemedText>
-              </View>
-            )
-          }}
-          autoFocus={autoFocus}
-          ref={ref}
-          onSubmitEditing={onSubmitEditing}
-        />
-      </View>
-      <TouchableOpacity
-        style={style.hideIcon}
-        accessibilityLabel={showPIN ? t('PINCreate.Hide') : t('PINCreate.Show')}
-        accessibilityRole={'button'}
-        testID={showPIN ? testIdWithKey('Hide') : testIdWithKey('Show')}
-        onPress={() => setShowPIN(!showPIN)}
-        hitSlop={hitSlop}
-      >
-        <Icon color={PINInputTheme.icon.color} name={showPIN ? 'visibility-off' : 'visibility'} size={30} />
-      </TouchableOpacity>
-    </View>
-  )
-
-  return (
-    <View style={style.container}>
-      {label && (
-        <ThemedText variant="label" style={{ marginBottom: 8 }}>
-          {label}
-        </ThemedText>
-      )}
-      {inlineMessage?.config.position === InlineErrorPosition.Above ? (
-        <InlineErrorText
-          message={inlineMessage.message}
-          inlineType={inlineMessage.inlineType}
-          config={inlineMessage.config}
-        />
-      ) : null}
-      {content()}
-      {inlineMessage?.config.position === InlineErrorPosition.Below ? (
-        <InlineErrorText
-          message={inlineMessage.message}
-          inlineType={inlineMessage.inlineType}
-          config={inlineMessage.config}
-        />
-      ) : null}
-    </View>
-  )
-}
-
-const PINInput = forwardRef<TextInput, PINInputProps>(PINInputComponent)
-
-export default PINInput

package/src/components/inputs/SingleSelectBlock.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface BlockSelection {
-  value: string
-  id: string
-}
-
-interface Props {
-  selection: BlockSelection[]
-  onSelect: (selected: BlockSelection) => void
-  initialSelect?: BlockSelection
-}
-
-const SingleSelectBlock: React.FC<Props> = ({ selection, onSelect, initialSelect }) => {
-  const [selected, setSelected] = useState(initialSelect ?? selection[0])
-  const { Inputs } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      width: '100%',
-      padding: 20,
-    },
-    row: {
-      ...Inputs.singleSelect,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      marginBottom: 8,
-    },
-  })
-  const handleSelect = (selected: BlockSelection) => {
-    setSelected(selected)
-    onSelect(selected)
-  }
-
-  return (
-    <View style={styles.container}>
-      {selection.map((item) => (
-        <TouchableOpacity key={item.id} style={styles.row} onPress={() => handleSelect(item)} hitSlop={hitSlop}>
-          <ThemedText style={Inputs.singleSelectText}>{item.value}</ThemedText>
-          {item.id === selected.id ? <Icon name={'check'} size={25} color={Inputs.singleSelectIcon.color} /> : null}
-        </TouchableOpacity>
-      ))}
-    </View>
-  )
-}
-
-export default SingleSelectBlock

package/src/components/listItems/ContactCredentialListItem.tsx

@@ -1,79 +0,0 @@
-import { CredentialExchangeRecord } from '@credo-ts/core'
-import { useTheme } from '../../contexts/theme'
-import { TouchableOpacity, View, StyleSheet } from 'react-native'
-import { useBranding } from '../../hooks/bundle-resolver'
-import { useTranslation } from 'react-i18next'
-import { getCredentialIdentifiers } from '../../utils/credential'
-import { useCredentialConnectionLabel } from '../../utils/helpers'
-import { CredentialOverlay } from '@bifold/oca/build/legacy'
-import { BaseOverlay, BrandingOverlay, LegacyBrandingOverlay } from '@bifold/oca'
-import { useMemo } from 'react'
-import { ThemedText } from '../texts/ThemedText'
-
-export type ContactCredentialListItemProps = {
-  credential: CredentialExchangeRecord
-  onPress: () => void
-}
-
-const ContactCredentialListItem = ({ credential, onPress }: ContactCredentialListItemProps) => {
-  const { Assets, ColorPalette } = useTheme()
-  const { t, i18n } = useTranslation()
-  const credentialConnectionLabel = useCredentialConnectionLabel(credential)
-  const params = useMemo(
-    () => ({
-      identifiers: getCredentialIdentifiers(credential),
-      attributes: credential.credentialAttributes,
-      meta: {
-        credConnectionId: credential.connectionId,
-        alias: credentialConnectionLabel,
-      },
-      language: i18n.language,
-    }),
-    [credential, credentialConnectionLabel, i18n.language]
-  )
-  const { overlay } = useBranding<CredentialOverlay<BrandingOverlay | BaseOverlay | LegacyBrandingOverlay>>(params)
-
-  const styles = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    credentialContainer: {
-      flex: 9,
-    },
-    credentialName: {
-      color: ColorPalette.brand.primary,
-      fontWeight: '600',
-    },
-    iconContainer: {
-      flex: 1,
-      padding: 8,
-    },
-  })
-
-  const icon = {
-    color: ColorPalette.brand.primary,
-    width: 48,
-    height: 48,
-  }
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={styles.container}
-      accessibilityHint={t('ContactDetails.GoToCredentialDetail')}
-      accessibilityLabel={`${t('ContactDetails.CredentialName')}: ${overlay?.metaOverlay?.name}`}
-      accessibilityRole={'button'}
-    >
-      <View style={styles.credentialContainer}>
-        <ThemedText style={styles.credentialName}>{overlay?.metaOverlay?.name}</ThemedText>
-      </View>
-      <View style={styles.iconContainer}>
-        <Assets.svg.iconChevronRight {...icon} />
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-export default ContactCredentialListItem

package/src/components/listItems/ContactListItem.tsx

@@ -1,121 +0,0 @@
-import type { ConnectionRecord } from '@credo-ts/core'
-
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useCallback, useMemo } from 'react'
-import { View, StyleSheet, TouchableOpacity, Image } from 'react-native'
-
-import { useStore } from '../../contexts/store'
-import { useTheme } from '../../contexts/theme'
-import { useChatMessagesByConnection } from '../../hooks/chat-messages'
-import { ContactStackParams, Screens, Stacks } from '../../types/navigators'
-import { formatTime, getConnectionName } from '../../utils/helpers'
-import { testIdWithKey } from '../../utils/testable'
-import { TOKENS, useServices } from '../../container-api'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface ContactListItemProps {
-  contact: ConnectionRecord
-  navigation: StackNavigationProp<ContactStackParams, Screens.Contacts>
-}
-
-const ContactListItem: React.FC<ContactListItemProps> = ({ contact, navigation }) => {
-  const { ColorPalette, ListItems } = useTheme()
-  const messages = useChatMessagesByConnection(contact)
-  const message = messages[0]
-  const hasOnlyInitialMessage = messages.length < 2
-  const [store] = useStore()
-  const [{ enableChat }] = useServices([TOKENS.CONFIG])
-
-  const styles = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      padding: 16,
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-    },
-    avatarContainer: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 50,
-      height: 50,
-      borderRadius: 25,
-      borderColor: ListItems.avatarCircle.borderColor,
-      borderWidth: 1,
-      marginRight: 16,
-    },
-    avatarPlaceholder: {
-      textAlign: 'center',
-    },
-    avatarImage: {
-      width: 30,
-      height: 30,
-    },
-    contactNameContainer: {
-      flex: 1,
-      paddingVertical: 4,
-    },
-    nameAndTimeContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      flex: 1,
-    },
-    timeContainer: {
-      paddingVertical: 4,
-      alignSelf: 'center',
-    },
-  })
-
-  const navigateToContact = useCallback(() => {
-    navigation.getParent()?.navigate(Stacks.ContactStack, {
-      screen: enableChat ? Screens.Chat : Screens.ContactDetails,
-      params: { connectionId: contact.id },
-    })
-  }, [navigation, contact, enableChat])
-
-  const contactLabel = useMemo(
-    () => getConnectionName(contact, store.preferences.alternateContactNames),
-    [contact, store.preferences.alternateContactNames]
-  )
-  const contactLabelAbbr = useMemo(() => contactLabel?.charAt(0).toUpperCase(), [contactLabel])
-
-  return (
-    <TouchableOpacity
-      onPress={navigateToContact}
-      testID={testIdWithKey('Contact')}
-      accessibilityLabel={contactLabel}
-      accessibilityRole="button"
-    >
-      <View style={styles.container}>
-        <View style={styles.avatarContainer}>
-          {contact.imageUrl ? (
-            <View>
-              <Image style={styles.avatarImage} source={{ uri: contact.imageUrl }} />
-            </View>
-          ) : (
-            <ThemedText allowFontScaling={false} variant="headingFour" style={styles.avatarPlaceholder}>
-              {contactLabelAbbr}
-            </ThemedText>
-          )}
-        </View>
-        <View style={{ flex: 1 }}>
-          <View style={styles.nameAndTimeContainer}>
-            <View style={styles.contactNameContainer}>
-              <ThemedText variant="labelTitle">{contactLabel}</ThemedText>
-            </View>
-            <View style={styles.timeContainer}>
-              {message && <ThemedText>{formatTime(message.createdAt, { shortMonth: true, trim: true })}</ThemedText>}
-            </View>
-          </View>
-          <View>
-            {message && !hasOnlyInitialMessage && (
-              <ThemedText numberOfLines={1} ellipsizeMode={'tail'}>
-                {message.text}
-              </ThemedText>
-            )}
-          </View>
-        </View>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-export default ContactListItem