@bifold/core 1.0.0

package/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,46 @@
+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

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

package/src/components/index.ts

@@ -0,0 +1,4 @@
+import * as buttons from './buttons'
+import * as misc from './misc/index'
+
+export { misc, buttons }

package/src/components/inputs/BulletPoint.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { StyleSheet, View, StyleProp, TextStyle } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { useTheme } from '../../contexts/theme'
+import { ThemedText } from '../texts/ThemedText'
+
+interface BulletPointProps {
+  text: string
+  textStyle: StyleProp<TextStyle>
+}
+
+const BulletPoint: React.FC<BulletPointProps> = ({ text, textStyle }) => {
+  const { ColorPallet } = useTheme()
+  const styles = StyleSheet.create({
+    iconContainer: {
+      marginRight: 10,
+      marginVertical: 6,
+    },
+  })
+
+  return (
+    <View style={{ marginVertical: 10, flexDirection: 'row', alignItems: 'flex-start' }}>
+      <View style={styles.iconContainer}>
+        <Icon name={'circle'} size={9} color={ColorPallet.brand.modalIcon} />
+      </View>
+      <ThemedText style={[textStyle, { flexShrink: 1 }]}>{text}</ThemedText>
+    </View>
+  )
+}
+
+export default BulletPoint

package/src/components/inputs/CheckBoxRow.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { View, StyleSheet, TouchableOpacity, TextStyle } 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'
+
+interface Props {
+  title: string
+  titleStyle?: TextStyle
+  accessibilityLabel?: string
+  testID?: string
+  checked: boolean
+  onPress: () => void
+  reverse?: boolean
+}
+
+const CheckBoxRow: React.FC<Props> = ({
+  title,
+  titleStyle = {},
+  accessibilityLabel,
+  testID,
+  checked,
+  onPress,
+  reverse,
+}) => {
+  const { Inputs } = useTheme()
+  const style = StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: reverse ? 'row-reverse' : 'row',
+      alignItems: 'center',
+      margin: 10,
+    },
+    text: {
+      ...Inputs.checkBoxText,
+      flexShrink: 1,
+      marginLeft: reverse ? 0 : 10,
+      marginRight: reverse ? 10 : 0,
+    },
+  })
+  const accessible = accessibilityLabel && accessibilityLabel !== '' ? true : false
+
+  return (
+    <View style={style.container}>
+      <TouchableOpacity
+        accessible={accessible}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked }}
+        testID={testID}
+        onPress={onPress}
+        hitSlop={hitSlop}
+      >
+        {checked ? (
+          <Icon name={'check-box'} size={36} color={Inputs.checkBoxColor.color} />
+        ) : (
+          <Icon name={'check-box-outline-blank'} size={36} color={Inputs.checkBoxColor.color} />
+        )}
+      </TouchableOpacity>
+      <ThemedText style={[style.text, titleStyle]}>{title}</ThemedText>
+    </View>
+  )
+}
+
+export default CheckBoxRow

package/src/components/inputs/InlineErrorText.tsx

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,61 @@
+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 Props extends TextInputProps {
+  label: string
+  limit: number
+  handleChangeText: (text: string) => void
+}
+
+const LimitedTextInput: React.FC<Props> = ({ 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
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+        style={[styles.textInput, focused && { ...Inputs.inputSelected }]}
+        selectionColor={Inputs.inputSelected.borderColor}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        onChangeText={onChangeText}
+        {...textInputProps}
+      />
+      <ThemedText style={styles.limitCounter}>
+        {characterCount}/{limit}
+      </ThemedText>
+    </View>
+  )
+}
+
+export default LimitedTextInput

package/src/components/inputs/PINInput.tsx

@@ -0,0 +1,138 @@
+import React, { useState, forwardRef, Ref } 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'
+
+interface PINInputProps {
+  label?: string
+  onPINChanged?: (PIN: string) => void
+  testID?: string
+  accessibilityLabel?: string
+  autoFocus?: boolean
+  inlineMessage?: InlineMessageProps
+}
+
+const PINInputComponent = (
+  { label, onPINChanged, testID, accessibilityLabel, autoFocus = false, inlineMessage }: PINInputProps,
+  ref: Ref<TextInput>
+) => {
+  const [PIN, setPIN] = useState('')
+  const [showPIN, setShowPIN] = useState(false)
+  const { t } = useTranslation()
+  const { PINInputTheme } = useTheme()
+  const cellHeight = 48
+  const onChangeText = (value: string) => {
+    onPINChanged && onPINChanged(value)
+    setPIN(value)
+  }
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value: PIN,
+    setValue: onChangeText,
+  })
+
+  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={accessibilityLabel}
+          accessible
+          value={PIN}
+          rootStyle={PINInputTheme.codeFieldRoot}
+          onChangeText={onChangeText}
+          cellCount={minPINLength}
+          keyboardType="numeric"
+          textContentType="password"
+          renderCell={({ index, symbol, isFocused }) => {
+            let child: React.ReactNode | string = ''
+            if (symbol) {
+              child = showPIN ? symbol : '●' // Show or hide PIN
+            } 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}
+        />
+      </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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,79 @@
+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, ColorPallet } = 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: ColorPallet.brand.primary,
+      fontWeight: '600',
+    },
+    iconContainer: {
+      flex: 1,
+      padding: 8,
+    },
+  })
+
+  const icon = {
+    color: ColorPallet.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