@procivis/one-react-native-components 0.1.63 → 0.2.54

package/src/ui-components/credential/card/credential-details-card.tsx

@@ -0,0 +1,242 @@
+import React, { ComponentType, FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { ImageSourcePropType, LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { concatTestID } from '../../../utils/testID';
+import { Button, ButtonType } from '../../buttons';
+import { DownIcon, UpIcon } from '../../icons/credential';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+import CredentialAttributeItem, { CredentialAttribute } from '../credential-attribute-item';
+import CredentialCard, { CredentialCardProps } from './credential-card';
+
+export type CredentialDetailsCardProps = ViewProps & {
+  animate?: boolean;
+  attributes: CredentialAttribute[] | false;
+  card: CredentialCardProps;
+  expanded?: boolean;
+  footer?: ComponentType<any> | ReactElement;
+  onImagePreview?: (name: string, image: ImageSourcePropType) => void;
+  onAttributeSelected?: (id: string, selected: boolean) => void;
+  showAllButtonLabel?: string;
+};
+
+const PREVIEW_ATTRIBUTES_COUNT = 3;
+
+const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
+  animate = true,
+  attributes,
+  card,
+  expanded,
+  footer,
+  onImagePreview,
+  onAttributeSelected,
+  style,
+  showAllButtonLabel,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [previewAttributesHeight, setPreviewAttributesHeight] = useState<number>();
+  const [fullAttributesHeight, setFullAttributesHeight] = useState<number>();
+  const [buttonViewHeight, setButtonViewHeight] = useState<number>();
+
+  const [allAttributesRendered, setAllAttributesRendered] = useState<boolean>(
+    (attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT) || !showAllButtonLabel,
+  );
+
+  const CaretIcon = expanded ? UpIcon : DownIcon;
+
+  const currentHeight = useSharedValue<number | undefined>(undefined);
+
+  const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
+  const extraAttributes = useMemo(() => (attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : []), [attributes]);
+
+  useEffect(() => {
+    if (!extraAttributes || allAttributesRendered) {
+      setButtonViewHeight(0);
+    }
+  }, [extraAttributes, allAttributesRendered]);
+
+  useEffect(() => {
+    if (extraAttributes.length === 0) {
+      const viewStyle = StyleSheet.flatten([
+        styles.allAttributesWrapper,
+        footer && styles.allAttributesWrapperWithFooter,
+      ]);
+      const padding = viewStyle.paddingBottom;
+      setFullAttributesHeight(padding);
+    }
+  }, [extraAttributes, footer]);
+
+  useEffect(() => {
+    if (previewAttributesHeight === undefined || buttonViewHeight === undefined) {
+      return;
+    }
+    if (allAttributesRendered && fullAttributesHeight === undefined) {
+      return;
+    }
+
+    const additionalAttributesHeight = fullAttributesHeight ?? 0;
+    const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
+    const newHeight = expanded ? previewAttributesHeight + additionalHeight : 0;
+
+    if (currentHeight.value === undefined || !animate) {
+      currentHeight.value = newHeight;
+      return;
+    }
+
+    const duration = !expanded
+      ? 250
+      : allAttributesRendered
+      ? previewAttributes.length * 50
+      : extraAttributes.length * 50;
+    currentHeight.value = withTiming(newHeight, {
+      duration,
+    });
+  }, [
+    allAttributesRendered,
+    buttonViewHeight,
+    currentHeight,
+    animate,
+    expanded,
+    extraAttributes.length,
+    fullAttributesHeight,
+    previewAttributes.length,
+    previewAttributesHeight,
+  ]);
+
+  const credentialAttributesStyle = useAnimatedStyle(() => {
+    if (currentHeight.value === undefined) {
+      if (expanded) {
+        return {};
+      }
+      return {
+        height: 0,
+      };
+    }
+    return {
+      height: currentHeight.value,
+    };
+  });
+
+  const onPreviewAttrContentLayout = useCallback((event: LayoutChangeEvent) => {
+    setPreviewAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const onFullAttrContentLayout = useCallback((event: LayoutChangeEvent) => {
+    setFullAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const onButtonViewLayout = useCallback((event: LayoutChangeEvent) => {
+    setButtonViewHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const footerView: ReactElement | undefined = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if (React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer as React.ComponentType<any>;
+      return <FooterComponent />;
+    }
+  }, [footer]);
+
+  const { header, ...cardProps } = card;
+
+  const renderExtraAttributes =
+    allAttributesRendered || (previewAttributesHeight !== undefined && currentHeight.value !== undefined);
+  return (
+    <View
+      style={[styles.detailsCard, { backgroundColor: colorScheme.white }, style]}
+      {...viewProps}
+      testID={concatTestID(card.testID, expanded ? 'expanded' : 'collapsed')}>
+      <CredentialCard
+        {...cardProps}
+        header={{ ...header, accessory: header.accessory ?? CaretIcon }}
+        style={[styles.card, cardProps.style]}
+      />
+      {previewAttributes.length > 0 && (
+        <Animated.View style={[styles.attributesAnimatedWrapper, credentialAttributesStyle]}>
+          <View style={styles.attributesWrapper}>
+            <View onLayout={onPreviewAttrContentLayout} style={styles.previewAttributesWrapper}>
+              {previewAttributes.map((attribute, idx) => (
+                <CredentialAttributeItem
+                  key={attribute.id}
+                  last={!footerView && !extraAttributes.length && idx === previewAttributes.length - 1}
+                  testID={concatTestID(testID, 'attribute', idx.toString())}
+                  onImagePreview={onImagePreview}
+                  onPress={onAttributeSelected}
+                  {...attribute}
+                />
+              ))}
+            </View>
+            {!allAttributesRendered && extraAttributes.length > 0 && (
+              <View style={styles.allAttributesWrapper} onLayout={onButtonViewLayout}>
+                <Button
+                  onPress={() => setAllAttributesRendered(true)}
+                  type={ButtonType.Secondary}
+                  testID={concatTestID(testID, 'showAllAttributesButton')}
+                  title={showAllButtonLabel!}
+                />
+              </View>
+            )}
+            {renderExtraAttributes && (
+              <View
+                style={[styles.allAttributesWrapper, footerView && styles.allAttributesWrapperWithFooter]}
+                onLayout={onFullAttrContentLayout}>
+                {extraAttributes.map((attribute, index, { length }) => (
+                  <CredentialAttributeItem
+                    key={attribute.id}
+                    last={!footerView && index === length - 1}
+                    testID={concatTestID(testID, 'attribute', index.toString())}
+                    onImagePreview={onImagePreview}
+                    onPress={onAttributeSelected}
+                    {...attribute}
+                  />
+                ))}
+              </View>
+            )}
+          </View>
+        </Animated.View>
+      )}
+      {footerView ? <View style={styles.footer}>{footerView}</View> : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  allAttributesWrapper: {
+    paddingBottom: 12,
+    paddingHorizontal: 4,
+    width: '100%',
+  },
+  allAttributesWrapperWithFooter: {
+    paddingBottom: 0,
+  },
+  attributesAnimatedWrapper: {
+    overflow: 'hidden',
+  },
+  attributesWrapper: {
+    paddingTop: 7,
+    position: 'absolute',
+    width: '100%',
+  },
+  card: {
+    borderRadius: 0,
+  },
+  detailsCard: {
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  footer: {
+    marginTop: 12,
+  },
+  previewAttributesWrapper: {
+    paddingHorizontal: 4,
+    width: '100%',
+  },
+});
+
+export default CredentialDetailsCard;

package/src/ui-components/credential/card/credential-header.stories.tsx

@@ -0,0 +1,50 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import ColorSchemes from '../../../../storybook/colorScheme';
+import { CredentialWarningIcon, RequiredAttributeIcon } from '../../icons/credential';
+import CredentialHeader from './credential-header';
+
+const Basic: ComponentStory<typeof CredentialHeader> = ({ ...args }) => {
+  return <CredentialHeader {...args} />;
+};
+
+Basic.args = {
+  accessory: RequiredAttributeIcon,
+  color: undefined,
+  credentialDetailPrimary: 'Primary detail',
+  credentialDetailSecondary: 'Secondary detail',
+  credentialDetailTestID: undefined,
+  credentialDetailErrorColor: false,
+  credentialName: 'Credential Name',
+  icon: undefined,
+  iconLabelColor: undefined,
+  statusIcon: CredentialWarningIcon,
+};
+
+export { Basic as CredentialHeader };
+
+export default {
+  title: 'credential/card/CredentialHeader',
+  component: CredentialHeader,
+  argTypes: {
+    color: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+    iconLabelColor: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=401-1898&mode=design&t=0DWIGZWyWYB7JzPE-0',
+    },
+  },
+} as ComponentMeta<typeof CredentialHeader>;

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

@@ -0,0 +1,196 @@
+import React, { FC, useMemo } from 'react';
+import { AccessibilityProps, ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../../utils/testID';
+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';
+
+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: {
+    flex: 1,
+    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/ui-components/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/ui-components/credential/card/index.ts

@@ -0,0 +1,16 @@
+import CredentialCard, {
+  CredentialCardNotice,
+  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, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };
+export { CredentialDetailsCard, CredentialDetailsCardProps };
+export { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };
+export { CredentialHeader, CredentialHeaderProps };