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

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

@@ -1,242 +0,0 @@
-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 { Button, ButtonType } from '../../buttons';
-import { DownIcon, UpIcon } from '../../icons/credential';
-import { useAppColorScheme } from '../../theme/color-scheme-context';
-import { concatTestID } from '../../utils/testID';
-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,
-  testID,
-  showAllButtonLabel,
-  ...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]} testID={testID} {...viewProps}>
-      <View testID={concatTestID(testID, expanded ? 'expanded' : 'collapsed')}>
-        <CredentialCard
-          {...cardProps}
-          header={{ ...header, accessory: header.accessory ?? CaretIcon }}
-          style={[styles.card, cardProps.style]}
-          testID={concatTestID(testID, 'card')}
-        />
-        {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', attribute.id)}
-                    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', attribute.id)}
-                      onImagePreview={onImagePreview}
-                      onPress={onAttributeSelected}
-                      {...attribute}
-                    />
-                  ))}
-                </View>
-              )}
-            </View>
-          </Animated.View>
-        )}
-        {footerView ? <View style={styles.footer}>{footerView}</View> : null}
-      </View>
-    </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/credential/card/credential-header.stories.tsx

@@ -1,50 +0,0 @@
-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/credential/card/credential-header.tsx

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

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

@@ -1,11 +0,0 @@
-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 };