@procivis/one-react-native-components 0.1.63

package/src/credential/card/credential-header.tsx

@@ -0,0 +1,195 @@
+import React, { FC, useMemo } from 'react';
+import { AccessibilityProps, ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import BlurView from '../../blur/blur-view';
+import ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';
+import Typography, { TypographyProps } from '../../text/typography';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+import { concatTestID } from '../../utils/testID';
+
+export interface CredentialHeaderProps extends AccessibilityProps {
+  accessory?: React.ComponentType<any> | React.ReactElement;
+  blur?: boolean;
+  color?: ColorValue;
+  credentialDetailPrimary: string;
+  credentialDetailSecondary?: string;
+  credentialDetailTestID?: string;
+  credentialDetailErrorColor?: boolean;
+  credentialName: string;
+  icon?: ImageOrComponentSource;
+  iconLabelColor?: ColorValue;
+  statusIcon?: React.ComponentType<any> | React.ReactElement;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const CredentialHeader: FC<CredentialHeaderProps> = ({
+  accessory,
+  blur = true,
+  color = '#5A69F3',
+  credentialDetailPrimary,
+  credentialDetailSecondary,
+  credentialDetailTestID,
+  credentialDetailErrorColor,
+  credentialName,
+  icon,
+  iconLabelColor = '#FFFFFF',
+  statusIcon,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const statusIconView: React.ReactElement | undefined = useMemo(() => {
+    if (!statusIcon) {
+      return undefined;
+    }
+    if (React.isValidElement(statusIcon)) {
+      return statusIcon;
+    } else {
+      const StatusIconComponent = statusIcon as React.ComponentType<any>;
+      return <StatusIconComponent />;
+    }
+  }, [statusIcon]);
+
+  const accessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!accessory) {
+      return undefined;
+    }
+    if (React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory as React.ComponentType<any>;
+      return <AccessoryComponent />;
+    }
+  }, [accessory]);
+
+  const DetailText = useMemo(() => {
+    const commonProps: TypographyProps = {
+      color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,
+      ellipsizeMode: 'tail',
+      numberOfLines: 1,
+      preset: 'xs',
+      style: styles.detailText,
+    };
+    return (
+      <View style={styles.detailTextContainer}>
+        <Typography {...commonProps} testID={credentialDetailTestID ?? concatTestID(testID, 'primaryDetail')}>
+          {credentialDetailPrimary}
+        </Typography>
+        {credentialDetailSecondary ? (
+          <>
+            <Typography {...commonProps} style={styles.interpunct}>
+              {'·'}
+            </Typography>
+            <Typography {...commonProps} testID={concatTestID(testID, 'secondaryDetail')}>
+              {credentialDetailSecondary}
+            </Typography>
+          </>
+        ) : null}
+      </View>
+    );
+  }, [
+    credentialDetailPrimary,
+    credentialDetailSecondary,
+    colorScheme,
+    testID,
+    credentialDetailErrorColor,
+    credentialDetailTestID,
+  ]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: blur ? undefined : colorScheme.white }, style]} testID={testID}>
+      {blur && <BlurView blurStyle="strong" style={StyleSheet.absoluteFill} />}
+      <View style={[styles.imageContainer, { backgroundColor: color }]}>
+        {icon ? (
+          <ImageOrComponent testID={concatTestID(testID, 'logoIcon')} source={icon} style={styles.image} />
+        ) : (
+          <View testID={concatTestID(testID, 'logoBackgroundColor', String(color))}>
+            <View testID={concatTestID(testID, 'logoTextColor', String(iconLabelColor))}>
+              <Typography
+                testID={concatTestID(testID, 'logoName')}
+                color={iconLabelColor}
+                preset="m"
+                style={styles.imagePlaceholder}>
+                {credentialName.substring(0, 1)}
+              </Typography>
+            </View>
+          </View>
+        )}
+      </View>
+      {statusIconView && <View style={styles.statusIconWrapper}>{statusIconView}</View>}
+      <View style={styles.text}>
+        <Typography
+          testID={concatTestID(testID, 'name')}
+          color={colorScheme.text}
+          ellipsizeMode={'tail'}
+          numberOfLines={1}
+          preset="regular"
+          style={styles.nameText}>
+          {credentialName}
+        </Typography>
+        {DetailText}
+      </View>
+      {accessoryView && <View style={styles.accessory}>{accessoryView}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accessory: {
+    alignItems: 'center',
+    height: 44,
+    justifyContent: 'center',
+    width: 44,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 60,
+    padding: 8,
+  },
+  detailText: {
+    opacity: 0.7,
+  },
+  detailTextContainer: {
+    flexDirection: 'row',
+    marginTop: -1,
+  },
+  image: {
+    height: 44,
+    width: 44,
+  },
+  imageContainer: {
+    alignItems: 'center',
+    borderRadius: 5,
+    height: 44,
+    justifyContent: 'center',
+    marginRight: 8,
+    overflow: 'hidden',
+    width: 44,
+  },
+  imagePlaceholder: {
+    paddingLeft: 1,
+    paddingTop: 3,
+    textTransform: 'uppercase',
+  },
+  interpunct: {
+    marginHorizontal: 12,
+    opacity: 0.5,
+  },
+  nameText: {
+    marginTop: 2,
+  },
+  statusIconWrapper: {
+    bottom: 3,
+    left: 36,
+    position: 'absolute',
+  },
+  text: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+
+export default CredentialHeader;

package/src/credential/card/credential-image-carousel.tsx

@@ -0,0 +1,113 @@
+import React, { FC, useState } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Carousel from 'react-native-reanimated-carousel';
+import Svg, { Circle } from 'react-native-svg';
+
+import { concatTestID } from '../../utils';
+
+export enum CarouselImageType {
+  Barcode = 'Barcode',
+  QrCode = 'QrCode',
+  MRZ = 'MRZ',
+  Photo = 'Photo',
+}
+
+export type CarouselImage = {
+  type: CarouselImageType;
+  element: React.ReactElement;
+};
+
+type CarouselProps = {
+  carouselSize: { width: number; height: number };
+  imagesToRender: CarouselImage[];
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+const CarouselComponent: FC<CarouselProps> = ({ carouselSize, imagesToRender, style, testID }) => {
+  const [selectedDot, setSelectedDot] = useState(0);
+
+  if (!carouselSize.width || !carouselSize.height) {
+    return null;
+  }
+
+  const numberOfSlides = imagesToRender.length;
+
+  if (!numberOfSlides) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <Carousel
+        width={carouselSize.width}
+        onSnapToItem={setSelectedDot}
+        height={carouselSize.height}
+        enabled={numberOfSlides >= 2}
+        data={imagesToRender}
+        testID={testID}
+        renderItem={({ item: { type, element } }) => (
+          <View style={styles.carouselItem}>
+            <View style={[styles[type]]}>{element}</View>
+          </View>
+        )}
+      />
+      {numberOfSlides >= 2 ? (
+        <View style={styles.pageDotContainer}>
+          {imagesToRender.map((_, index) => (
+            <Svg key={index} width="8" height="8" viewBox="0 0 8 8" fill="none">
+              <Circle
+                testID={concatTestID(testID, 'dot', index.toString())}
+                cx="4.5"
+                cy="4"
+                r="4"
+                fill="white"
+                fillOpacity={selectedDot === index ? 0.8 : 0.2}
+              />
+            </Svg>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-unused-styles
+  Barcode: { borderRadius: 4, height: '50%', width: '80%' },
+  // eslint-disable-next-line react-native/no-unused-styles
+  MRZ: {
+    height: '50%',
+    width: '100%',
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  Photo: {
+    aspectRatio: 1,
+    borderColor: '#FFFFFF',
+    borderRadius: 100,
+    borderWidth: 2,
+    height: '70%',
+    overflow: 'hidden',
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  QrCode: { aspectRatio: 1, borderRadius: 4, height: '70%' },
+  carouselItem: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  container: {
+    flex: 1,
+    position: 'absolute',
+    width: '100%',
+  },
+  pageDotContainer: {
+    bottom: 15,
+    columnGap: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+});
+
+export default CarouselComponent;

package/src/credential/card/index.ts

@@ -0,0 +1,11 @@
+import CredentialCard, { CredentialCardProps, CredentialCardRatio, CredentialCardShadow } from './credential-card';
+import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
+import CredentialDetailsCardListItem, { CredentialDetailsCardListItemProps } from './credential-details-list-item';
+import CredentialHeader, { CredentialHeaderProps } from './credential-header';
+import { CarouselImage, CarouselImageType } from './credential-image-carousel';
+
+export { CarouselImage, CarouselImageType };
+export { CredentialCard, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };
+export { CredentialDetailsCard, CredentialDetailsCardProps };
+export { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };
+export { CredentialHeader, CredentialHeaderProps };

package/src/credential/credential-attribute-item.tsx

@@ -0,0 +1,372 @@
+import React, { ComponentType, FC, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
+import { Image, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { TouchableHighlight, TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { colorWithAlphaComponent } from '../utils/color';
+import { concatTestID } from '../utils/testID';
+
+type CredentialAttributeItemButtonProps = {
+  disabled?: boolean;
+  id: string;
+  onPress?: (id: string, selected: boolean) => void;
+  selected?: boolean;
+};
+
+const CredentialAttributeItemButton: FC<PropsWithChildren<CredentialAttributeItemButtonProps>> = ({
+  children,
+  disabled,
+  id,
+  onPress,
+  selected,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const pressHandler = useCallback(() => {
+    if (!onPress) {
+      return;
+    }
+    onPress(id, !selected);
+  }, [onPress, id, selected]);
+
+  if (!onPress) {
+    return <View style={styles.touchableAttribute}>{children}</View>;
+  }
+
+  if (selected) {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.8}
+        disabled={disabled}
+        onPress={pressHandler}
+        style={[styles.touchableAttribute, { backgroundColor: colorScheme.background }]}>
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <TouchableHighlight
+      disabled={disabled}
+      onPress={pressHandler}
+      underlayColor={colorWithAlphaComponent(colorScheme.background, 0.5)}
+      style={styles.touchableAttribute}>
+      {children}
+    </TouchableHighlight>
+  );
+};
+
+const IMAGE_SIZE = 64;
+
+export type CredentialAttributeValue =
+  | {
+      attributes: CredentialAttribute[];
+      image?: never;
+      value?: never;
+      values?: never;
+      valueErrorColor?: never;
+      testID?: string;
+    }
+  | {
+      attributes?: never;
+      image: ImageSourcePropType;
+      value?: never;
+      values?: never;
+      valueErrorColor?: never;
+      testID?: string;
+    }
+  | {
+      attributes?: never;
+      image?: never;
+      value: string;
+      values?: never;
+      valueErrorColor?: boolean;
+      testID?: string;
+    }
+  | {
+      attributes?: never;
+      image?: never;
+      value?: never;
+      values: CredentialAttribute[];
+      valueErrorColor?: boolean;
+      testID?: string;
+    };
+
+export type CredentialAttribute = CredentialAttributeValue & {
+  disabled?: boolean;
+  selected?: boolean;
+  nested?: boolean;
+  listValue?: boolean;
+  id: string;
+  name?: string;
+  rightAccessory?: ComponentType<any> | ReactElement;
+};
+
+export type CredentialAttributeItemProps = CredentialAttribute & {
+  last: boolean | undefined;
+  onImagePreview?: (name: string, image: ImageSourcePropType) => void;
+  onPress?: (id: string, selected: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const CredentialAttributeItem: FC<CredentialAttributeItemProps> = ({
+  attributes,
+  disabled,
+  id,
+  image,
+  last,
+  name,
+  onImagePreview,
+  onPress,
+  rightAccessory,
+  nested = false,
+  listValue = false,
+  selected,
+  style,
+  testID,
+  value,
+  values,
+  valueErrorColor,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const imagePreviewHandler = useCallback(() => {
+    if (!onImagePreview || !image) {
+      return;
+    }
+    onImagePreview(name ?? '', image);
+  }, [image, name, onImagePreview]);
+
+  const rightAccessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!rightAccessory) {
+      return undefined;
+    }
+    if (React.isValidElement(rightAccessory)) {
+      return rightAccessory;
+    } else {
+      const RightAccessoryComponent = rightAccessory as React.ComponentType<any>;
+      return <RightAccessoryComponent />;
+    }
+  }, [rightAccessory]);
+
+  const isObject = attributes && attributes.length > 0;
+  const isArray = values && values.length > 0;
+
+  return (
+    <View style={[!nested && styles.attributeItemContainer, style]} testID={testID}>
+      <View style={styles.attributeItemRow}>
+        <CredentialAttributeItemButton disabled={disabled} id={id} onPress={onPress} selected={selected}>
+          <View style={[styles.dataItemButtonChildren]}>
+            {(isObject || isArray || listValue) && (
+              <View style={styles.decorator}>
+                <View
+                  style={[
+                    styles.decoratorCircle,
+                    listValue ? styles.listDecoratorCircle : undefined,
+                    listValue && image ? styles.listImageDecoratorCircle : undefined,
+                    { backgroundColor: colorScheme.text },
+                  ]}>
+                  <View
+                    style={[
+                      styles.decoratorCircleInner,
+                      { backgroundColor: colorScheme.text, borderColor: colorScheme.background },
+                    ]}
+                  />
+                </View>
+                <View
+                  style={[
+                    styles.decoratorLine,
+                    listValue ? styles.listDecoratorLine : undefined,
+                    listValue && value ? styles.listStringValueDecoratorLine : undefined,
+                    listValue && image ? styles.listImageDecoratorLine : undefined,
+                    { backgroundColor: colorScheme.text },
+                  ]}
+                />
+              </View>
+            )}
+            <View
+              style={[
+                isObject || isArray || listValue ? styles.objectAttributeItem : styles.attributeItem,
+                nested && styles.nestedAttributeItem,
+              ]}>
+              {name && (
+                <Typography
+                  color={colorScheme.text}
+                  preset={image ? 'xs' : 'xs/line-height-small'}
+                  style={isObject || isArray ? styles.nestedObjectLabel : styles.dataItemLabel}
+                  testID={concatTestID(testID, 'title')}>
+                  {name}
+                </Typography>
+              )}
+              {image && (
+                <TouchableOpacity
+                  disabled={!onImagePreview}
+                  onPress={imagePreviewHandler}
+                  style={[styles.dataItemImageWrapper, listValue ? styles.listValue : undefined]}>
+                  <Image
+                    resizeMode="cover"
+                    testID={concatTestID(testID, 'image')}
+                    source={image}
+                    style={styles.dataItemImage}
+                  />
+                </TouchableOpacity>
+              )}
+              {value && (
+                <Typography
+                  color={valueErrorColor ? colorScheme.error : colorScheme.text}
+                  numberOfLines={10}
+                  preset="s"
+                  style={listValue ? styles.listValue : undefined}
+                  testID={concatTestID(testID, 'value')}>
+                  {value}
+                </Typography>
+              )}
+              {isObject &&
+                attributes.map((attribute, index, { length }) => (
+                  <CredentialAttributeItem
+                    nested={true}
+                    key={attribute.id}
+                    onPress={onPress}
+                    last={index === length - 1}
+                    onImagePreview={onImagePreview}
+                    {...attribute}
+                  />
+                ))}
+              {isArray &&
+                values.map((arrayValue, index, { length }) => (
+                  <CredentialAttributeItem
+                    key={arrayValue.id}
+                    onPress={onPress}
+                    last={index === length - 1}
+                    onImagePreview={onImagePreview}
+                    listValue={true}
+                    {...arrayValue}
+                    name={undefined}
+                  />
+                ))}
+              <View />
+            </View>
+            {rightAccessoryView && (
+              <View style={[styles.rightAccessory, isObject && styles.objectAccessory]}>{rightAccessoryView}</View>
+            )}
+          </View>
+        </CredentialAttributeItemButton>
+      </View>
+      {!last && !nested && <View style={[styles.separator, { backgroundColor: colorScheme.background }]} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  attributeItem: {
+    flex: 1,
+    paddingLeft: 8,
+  },
+  attributeItemContainer: {
+    marginTop: 2,
+  },
+  attributeItemRow: {
+    flexDirection: 'row',
+  },
+  dataItemButtonChildren: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  dataItemImage: {
+    height: IMAGE_SIZE,
+    width: IMAGE_SIZE,
+  },
+  dataItemImageWrapper: {
+    borderColor: '#0004',
+    borderRadius: 4,
+    borderWidth: 0.5,
+    height: IMAGE_SIZE,
+    marginTop: 4,
+    overflow: 'hidden',
+    width: IMAGE_SIZE,
+  },
+  dataItemLabel: {
+    marginBottom: 4,
+    opacity: 0.7,
+  },
+  decorator: {
+    height: '100%',
+    justifyContent: 'center',
+    left: 8,
+    position: 'absolute',
+  },
+  decoratorCircle: {
+    alignItems: 'center',
+    borderRadius: 3.5,
+    borderWidth: 1,
+    height: 7,
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 6,
+    width: 7,
+  },
+  decoratorCircleInner: {
+    borderRadius: 2,
+    borderWidth: 1,
+    height: 4,
+    width: 4,
+  },
+  decoratorLine: {
+    bottom: 12,
+    left: 3,
+    position: 'absolute',
+    top: 13,
+    width: 1,
+  },
+  listDecoratorCircle: {
+    top: 18,
+  },
+  listDecoratorLine: {
+    top: 25,
+  },
+  listImageDecoratorCircle: {
+    top: 32,
+  },
+  listImageDecoratorLine: {
+    bottom: 40,
+    top: 39,
+  },
+  listStringValueDecoratorLine: {
+    bottom: 24,
+  },
+  listValue: {
+    marginLeft: 13,
+    paddingVertical: 10,
+  },
+  nestedAttributeItem: {
+    paddingLeft: 12,
+  },
+  nestedObjectLabel: {
+    opacity: 0.7,
+    paddingLeft: 13,
+  },
+  objectAccessory: {
+    alignSelf: 'flex-start',
+  },
+  objectAttributeItem: {
+    alignItems: 'stretch',
+    flex: 1,
+    paddingLeft: 12,
+  },
+  rightAccessory: {
+    paddingHorizontal: 8,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 8,
+    marginTop: -1,
+  },
+  touchableAttribute: {
+    borderRadius: 8,
+    flex: 1,
+    paddingVertical: 11,
+  },
+});
+
+export default CredentialAttributeItem;