@bifold/core 2.4.5 → 2.5.0

package/src/components/misc/UnorderedList.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-type UnorderedListProps = {
-  unorderedListItems: string[]
-}
-
-const UnorderedList: React.FC<UnorderedListProps> = ({ unorderedListItems }) => {
-  const { ColorPalette } = useTheme()
-
-  return (
-    <>
-      {unorderedListItems.map((item: string, i: number) => {
-        return (
-          <View key={i} style={{ display: 'flex', flexDirection: 'row', marginBottom: 5 }}>
-            <ThemedText style={{ color: ColorPalette.brand.unorderedList, paddingLeft: 5 }}>{`\u2022`}</ThemedText>
-            <ThemedText style={{ color: ColorPalette.brand.unorderedList, paddingLeft: 5, flex: 1 }}>{item}</ThemedText>
-          </View>
-        )
-      })}
-    </>
-  )
-}
-
-export default UnorderedList

package/src/components/misc/VerifierCredentialCard.tsx

@@ -1,378 +0,0 @@
-import { BrandingOverlay } from '@bifold/oca'
-import { Attribute, CredentialOverlay, Predicate, Field, BrandingOverlayType } from '@bifold/oca/build/legacy'
-import startCase from 'lodash.startcase'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  FlatList,
-  Image,
-  ImageBackground,
-  StyleSheet,
-  View,
-  ViewStyle,
-  TextInput,
-  TouchableOpacity,
-} from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import ImageModal from '../../components/modals/ImageModal'
-import { TOKENS, useServices } from '../../container-api'
-import { useTheme } from '../../contexts/theme'
-import { toImageSource } from '../../utils/credential'
-import { formatIfDate, isDataUrl, pTypeToText } from '../../utils/helpers'
-import { testIdWithKey } from '../../utils/testable'
-
-import CardWatermark from './CardWatermark'
-import CredentialCard11Logo from './CredentialCard11Logo'
-import useCredentialCardStyles from '../../hooks/credential-card-styles'
-import { Shade, shadeIsLightOrDark } from '../../utils/luminance'
-import CredentialIssuerBody from './CredentialCard11Issuer'
-import { ThemedText } from '../texts/ThemedText'
-
-interface VerifierCredentialCardProps {
-  style?: ViewStyle
-  displayItems?: Field[]
-  elevated?: boolean
-  credDefId?: string
-  schemaId: string
-  preview?: boolean
-  onChangeValue?: (schema: string, label: string, name: string, value: string) => void
-  brandingOverlayType?: BrandingOverlayType
-}
-
-/**
- * This component is meant to be used in the ProofRequestDetails screen to show what
- * a proof request will look like with proper branding etc. and allow for the changing
- * of predicate values. It is a greatly trimmed-down version of the CredentialCard11.
- */
-const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
-  style = {},
-  displayItems = [],
-  elevated = false,
-  credDefId,
-  schemaId,
-  preview,
-  onChangeValue,
-  brandingOverlayType = BrandingOverlayType.Branding10,
-}) => {
-  const [dimensions, setDimensions] = useState({ cardWidth: 0, cardHeight: 0 })
-  const { i18n, t } = useTranslation()
-  const { ColorPalette, TextTheme } = useTheme()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({})
-  const isBranding10 = brandingOverlayType === BrandingOverlayType.Branding10
-  const isBranding11 = brandingOverlayType === BrandingOverlayType.Branding11
-  const { styles, borderRadius } = useCredentialCardStyles(overlay, brandingOverlayType, isBranding10)
-
-  const attributeTypes = overlay.bundle?.captureBase.attributes
-  const attributeFormats: Record<string, string | undefined> = (overlay.bundle as any)?.bundle.attributes
-    .map((attr: any) => {
-      return { name: attr.name, format: attr.format }
-    })
-    .reduce((prev: { [key: string]: string }, curr: { name: string; format?: string }) => {
-      return { ...prev, [curr.name]: curr.format }
-    }, {})
-
-  const getCardWatermarkTextColor = (background?: string) => {
-    if (isBranding10) return ColorPalette.grayscale.mediumGrey
-    const shade = shadeIsLightOrDark(background ?? ColorPalette.grayscale.lightGrey)
-    return shade == Shade.Light ? ColorPalette.grayscale.darkGrey : ColorPalette.grayscale.lightGrey
-  }
-
-  const parseAttribute = (item: (Attribute & Predicate) | undefined) => {
-    let parsedItem = item
-    if (item && !item.value) {
-      parsedItem = pTypeToText(item, t, attributeTypes) as Attribute & Predicate
-    }
-    const parsedValue = formatIfDate(
-      attributeFormats?.[item?.name ?? ''],
-      parsedItem?.value ?? parsedItem?.pValue ?? null
-    )
-    return {
-      label: item?.label ?? item?.name ?? '',
-      value: item?.value ? parsedValue : `${parsedItem?.pType} ${parsedValue}`,
-    }
-  }
-
-  useEffect(() => {
-    const params = {
-      identifiers: { schemaId, credentialDefinitionId: credDefId },
-      attributes: displayItems,
-      language: i18n.language,
-    }
-    bundleResolver.resolveAllBundles(params).then((bundle) => {
-      setOverlay((o) => ({
-        ...o,
-        ...bundle,
-        brandingOverlay: bundle.brandingOverlay as BrandingOverlay,
-      }))
-    })
-  }, [schemaId, credDefId, displayItems, i18n.language, bundleResolver])
-
-  const AttributeItem: React.FC<{ item: Attribute }> = ({ item }) => {
-    const label = (item.name || item.label)!
-    const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
-    const [value, setValue] = useState(item.value)
-    const [showImageModal, setShowImageModal] = useState(false)
-
-    useEffect(() => {
-      setValue((v) => formatIfDate(item.format, v))
-    }, [item.format])
-
-    return (
-      <View>
-        <ThemedText
-          variant="labelSubtitle"
-          style={[
-            styles.textContainer,
-            {
-              lineHeight: 19,
-              opacity: 0.8,
-            },
-          ]}
-          testID={testIdWithKey('AttributeName')}
-        >
-          {ylabel}
-        </ThemedText>
-        {value && (
-          <View>
-            {isDataUrl(value) ? (
-              <TouchableOpacity
-                accessibilityLabel={t('Record.Zoom')}
-                accessibilityRole="imagebutton"
-                testID={testIdWithKey('zoom')}
-                onPress={() => setShowImageModal(true)}
-              >
-                <Image style={styles.imageAttr} source={{ uri: value as string }} />
-              </TouchableOpacity>
-            ) : (
-              <ThemedText variant="bold" style={styles.textContainer} testID={testIdWithKey('AttributeValue')}>
-                {value}
-              </ThemedText>
-            )}
-          </View>
-        )}
-        {showImageModal && <ImageModal uri={value as string} onDismissPressed={() => setShowImageModal(false)} />}
-      </View>
-    )
-  }
-
-  const PredicateItem: React.FC<{
-    item: Predicate
-  }> = ({ item }) => {
-    const { ColorPalette } = useTheme()
-    const label = (item.label || item.name)!
-    const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
-    const [currentValue, setCurrentValue] = useState(`${item.pValue ?? ''}`)
-
-    const predicateStyles = StyleSheet.create({
-      input: {
-        textAlign: 'center',
-        textAlignVertical: 'bottom',
-        borderBottomColor: ColorPalette.grayscale.black,
-        backgroundColor: 'rgba(255, 255, 255, 0.2)',
-        borderBottomWidth: 1,
-        lineHeight: 19,
-        padding: 0,
-      },
-      predicateLabel: {
-        lineHeight: 19,
-        opacity: 0.8,
-      },
-      predicateType: {
-        lineHeight: isBranding10 ? 19 : styles.textContainer.lineHeight,
-        marginRight: 5,
-      },
-    })
-
-    return (
-      <View>
-        <ThemedText
-          variant="labelSubtitle"
-          style={[styles.textContainer, predicateStyles.predicateLabel]}
-          testID={testIdWithKey('PredicateName')}
-        >
-          {ylabel}
-        </ThemedText>
-        <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-end' }}>
-          {item.satisfied && !preview ? (
-            <Icon style={{ marginRight: 5 }} size={24} name={'check-circle'} color={ColorPalette.semantic.success} />
-          ) : null}
-          <ThemedText variant="bold" style={[styles.textContainer, predicateStyles.predicateType]}>
-            {item.pType}
-          </ThemedText>
-          {/* Only allow editing parametrizable predicates in preview mode */}
-          {item.parameterizable && preview && onChangeValue ? (
-            <TextInput
-              keyboardType="numeric"
-              style={[TextTheme.bold, predicateStyles.input]}
-              onChangeText={(value) => setCurrentValue(value)}
-              onBlur={() => {
-                onChangeValue(schemaId, item.label || item.name || '', item.name || '', currentValue)
-              }}
-              testID={testIdWithKey('PredicateInput')}
-            >
-              {currentValue}
-            </TextInput>
-          ) : (
-            <ThemedText variant="bold" style={styles.textContainer} testID={testIdWithKey('PredicateValue')}>
-              {item.pValue}
-            </ThemedText>
-          )}
-        </View>
-      </View>
-    )
-  }
-
-  const CardAttribute: React.FC<{ item: Attribute & Predicate }> = ({ item }) => {
-    item.format = attributeFormats?.[item.name ?? '']
-    let parsedPredicate: Predicate | undefined = undefined
-    if (item instanceof Predicate) {
-      parsedPredicate = pTypeToText(item, t, attributeTypes) as Predicate
-      if (!parsedPredicate.parameterizable) {
-        parsedPredicate.pValue = formatIfDate(parsedPredicate.format, parsedPredicate.pValue)
-      }
-    }
-
-    return (
-      <View style={styles.cardAttributeContainer}>
-        {item instanceof Attribute && <AttributeItem item={item as Attribute} />}
-        {item instanceof Predicate && <PredicateItem item={parsedPredicate as Predicate} />}
-      </View>
-    )
-  }
-
-  const renderCardAttribute = (item: Attribute & Predicate) => {
-    return <CardAttribute item={item} />
-  }
-
-  const CredentialCardPrimaryBody: React.FC = () => {
-    return (
-      <View testID={testIdWithKey('CredentialCardPrimaryBody')} style={styles.primaryBodyContainer}>
-        <View>
-          {isBranding10 && (
-            <CredentialIssuerBody
-              overlay={overlay}
-              overlayType={brandingOverlayType}
-              hasBody={overlay.metaOverlay?.issuer !== 'Unknown Contact'}
-              proof
-            />
-          )}
-          <View style={styles.primaryBodyNameContainer}>
-            <ThemedText
-              variant="bold"
-              testID={testIdWithKey('CredentialName')}
-              style={[styles.textContainer, styles.credentialName]}
-            >
-              {overlay.metaOverlay?.name}
-            </ThemedText>
-          </View>
-        </View>
-        <FlatList
-          data={displayItems}
-          scrollEnabled={false}
-          initialNumToRender={displayItems?.length}
-          keyExtractor={({ name }) => name}
-          renderItem={({ item }) => {
-            return renderCardAttribute(item as Attribute & Predicate)
-          }}
-        />
-        {brandingOverlayType === BrandingOverlayType.Branding11 && (
-          <CredentialIssuerBody
-            overlay={overlay}
-            overlayType={brandingOverlayType}
-            hasBody={overlay.metaOverlay?.issuer !== 'Unknown Contact'}
-          />
-        )}
-      </View>
-    )
-  }
-
-  const CredentialCardSecondaryBody: React.FC = () => {
-    return (
-      <View testID={testIdWithKey('CredentialCardSecondaryBody')} style={styles.secondaryBodyContainer}>
-        {overlay.brandingOverlay?.backgroundImageSlice &&
-        (!displayItems || brandingOverlayType === BrandingOverlayType.Branding11) ? (
-          <ImageBackground
-            source={toImageSource(overlay.brandingOverlay?.backgroundImageSlice)}
-            style={{ flexGrow: 1 }}
-            imageStyle={{
-              borderTopLeftRadius: borderRadius,
-              borderBottomLeftRadius: borderRadius,
-            }}
-          >
-            {null}
-          </ImageBackground>
-        ) : null}
-      </View>
-    )
-  }
-
-  const CredentialCard: React.FC = () => {
-    const watermarkLabel = overlay.metaOverlay?.watermark ? overlay.metaOverlay?.watermark + ',' : ''
-    const issuerAccessibilityLabel = overlay.metaOverlay?.issuer
-      ? `${t('Credentials.IssuedBy')} ${overlay.metaOverlay?.issuer}`
-      : ''
-    const accessibilityLabel = isBranding11
-      ? `${watermarkLabel} ${overlay.metaOverlay?.name ?? ''} ${t('Credentials.Credential')}${
-          displayItems.length > 0 ? ',' : ''
-        }` +
-        displayItems.map((item) => {
-          const { label, value } = parseAttribute(item as Attribute & Predicate)
-          if (label && value) {
-            return ` ${label}, ${value}`
-          }
-        }) +
-        `, ${issuerAccessibilityLabel}`
-      : `${issuerAccessibilityLabel}, ${overlay.metaOverlay?.watermark ?? ''} ${overlay.metaOverlay?.name ?? ''} ${t(
-          'Credentials.Credential'
-        )}.` +
-        displayItems.map((item) => {
-          const { label, value } = parseAttribute(item as (Attribute & Predicate) | undefined)
-          if (label) {
-            return value ? ` ${label}, ${value}` : ` ${label}`
-          }
-        })
-    return (
-      <View style={styles.cardContainer} accessible={true} accessibilityLabel={accessibilityLabel}>
-        <CredentialCardSecondaryBody />
-        <CredentialCard11Logo
-          noLogoText={overlay.metaOverlay?.name ?? overlay.metaOverlay?.issuer ?? 'C'}
-          overlay={overlay}
-          elevated={elevated}
-        />
-        <CredentialCardPrimaryBody />
-      </View>
-    )
-  }
-
-  return overlay.bundle ? (
-    <View
-      style={[
-        styles.container,
-        style,
-        {
-          elevation: elevated ? 5 : 0,
-          overflow: elevated ? 'visible' : 'hidden',
-        },
-      ]}
-      onLayout={(event) => {
-        setDimensions({ cardHeight: event.nativeEvent.layout.height, cardWidth: event.nativeEvent.layout.width })
-      }}
-    >
-      <View testID={testIdWithKey('CredentialCard')} style={{ overflow: 'hidden' }}>
-        {overlay.metaOverlay?.watermark && (
-          <CardWatermark
-            width={dimensions.cardWidth}
-            height={dimensions.cardHeight}
-            style={{ color: getCardWatermarkTextColor(overlay.brandingOverlay?.primaryBackgroundColor) }}
-            watermark={overlay.metaOverlay?.watermark}
-          />
-        )}
-        <CredentialCard />
-      </View>
-    </View>
-  ) : null
-}
-
-export default VerifierCredentialCard

package/src/components/misc/index.ts

@@ -1,2 +0,0 @@
-import CredentialCard from './CredentialCard'
-export { CredentialCard }

package/src/components/modals/AlertModal.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, useWindowDimensions } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import { InfoBoxType } from '../misc/InfoBox'
-
-import PopupModal from './PopupModal'
-
-interface AlertModalProps {
-  title: string
-  message: string
-  submit?: () => void
-}
-
-const AlertModal: React.FC<AlertModalProps> = ({ title, message, submit }) => {
-  const { t } = useTranslation()
-  const { height } = useWindowDimensions()
-
-  const styles = StyleSheet.create({
-    container: {
-      minHeight: height,
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-  })
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <PopupModal
-        notificationType={InfoBoxType.Info}
-        title={title}
-        description={message}
-        onCallToActionLabel={t('Global.Okay')}
-        onCallToActionPressed={submit ? () => submit() : () => undefined}
-      ></PopupModal>
-    </SafeAreaView>
-  )
-}
-
-export default AlertModal

package/src/components/modals/AppGuideModal.tsx

@@ -1,142 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View, TouchableOpacity, useWindowDimensions } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import { testIdWithKey } from '../../utils/testable'
-import Button, { ButtonType } from '../buttons/Button'
-import { ThemedText } from '../texts/ThemedText'
-import SafeAreaModal from './SafeAreaModal'
-
-interface AppGuideModalProps {
-  title: string
-  description?: string
-  onCallToActionPressed?: GenericFn
-  onCallToActionLabel?: string
-  onSecondCallToActionPressed?: GenericFn
-  onSecondCallToActionLabel?: string
-  onDismissPressed: GenericFn
-}
-
-const AppGuideModal: React.FC<AppGuideModalProps> = ({
-  title,
-  description,
-  onCallToActionPressed,
-  onCallToActionLabel,
-  onSecondCallToActionPressed,
-  onSecondCallToActionLabel,
-  onDismissPressed,
-}) => {
-  const { height, width } = useWindowDimensions()
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const iconSize = 30
-  const dismissIconName = 'clear'
-  const iconColor = ColorPalette.notification.infoIcon
-
-  const styles = StyleSheet.create({
-    modalCenter: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: ColorPalette.notification.popupOverlay,
-      padding: 10,
-      minHeight: height,
-      minWidth: width,
-    },
-    container: {
-      backgroundColor: ColorPalette.notification.info,
-      borderColor: ColorPalette.notification.infoBorder,
-      borderRadius: 5,
-      borderWidth: 1,
-      padding: 20,
-      width: width - 50,
-    },
-    headerContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    headerTextContainer: {
-      flex: 1,
-      flexWrap: 'wrap',
-    },
-    headerText: {
-      alignSelf: 'flex-start',
-      flexWrap: 'wrap',
-      color: ColorPalette.notification.infoText,
-    },
-    bodyText: {
-      flexShrink: 1,
-      marginVertical: 16,
-      color: ColorPalette.notification.infoText,
-    },
-    dismissIcon: {
-      alignSelf: 'center',
-    },
-  })
-
-  return (
-    <SafeAreaModal transparent accessibilityViewIsModal>
-      <View style={styles.modalCenter}>
-        <View style={styles.container}>
-          <View style={styles.headerContainer}>
-            <View style={styles.headerTextContainer}>
-              <ThemedText
-                maxFontSizeMultiplier={1.5}
-                variant="headingThree"
-                style={styles.headerText}
-                testID={testIdWithKey('HeaderText')}
-                accessibilityRole="header"
-              >
-                {title}
-              </ThemedText>
-            </View>
-            <View style={styles.dismissIcon}>
-              <TouchableOpacity
-                onPress={onDismissPressed}
-                testID={testIdWithKey('Dismiss')}
-                accessibilityLabel={t('Global.Dismiss')}
-                accessibilityRole={'button'}
-                hitSlop={hitSlop}
-              >
-                <Icon name={dismissIconName} size={iconSize} color={iconColor} />
-              </TouchableOpacity>
-            </View>
-          </View>
-          <View>
-            <ThemedText maxFontSizeMultiplier={1.5} style={styles.bodyText} testID={testIdWithKey('BodyText')}>
-              {description}
-            </ThemedText>
-            {onCallToActionPressed && (
-              <View style={{ width: '100%', marginBottom: 10 }}>
-                <Button
-                  title={onCallToActionLabel || t('Global.Okay')}
-                  accessibilityLabel={onCallToActionLabel || t('Global.Okay')}
-                  testID={testIdWithKey('Primary')}
-                  buttonType={ButtonType.Primary}
-                  onPress={onCallToActionPressed}
-                  maxfontSizeMultiplier={1.5}
-                />
-              </View>
-            )}
-            {onSecondCallToActionPressed && (
-              <Button
-                title={onSecondCallToActionLabel || t('Global.Dismiss')}
-                accessibilityLabel={onSecondCallToActionLabel || t('Global.Dismiss')}
-                testID={testIdWithKey('Secondary')}
-                buttonType={ButtonType.Secondary}
-                onPress={onSecondCallToActionPressed}
-                maxfontSizeMultiplier={1.5}
-              />
-            )}
-          </View>
-        </View>
-      </View>
-    </SafeAreaModal>
-  )
-}
-
-export default AppGuideModal