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

package/src/ui-components/history/data-item.tsx

@@ -0,0 +1,88 @@
+import React, { ComponentType, FC, ReactElement, useMemo } from 'react';
+import { ColorValue, StyleSheet, View, ViewProps } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type DataItemProps = ViewProps & {
+  attribute: string;
+  last?: boolean;
+  multiline?: boolean;
+  value: string;
+  valueColor?: ColorValue;
+  valueIcon?: ComponentType<any> | ReactElement;
+};
+
+const DataItem: FC<DataItemProps> = ({
+  attribute,
+  value,
+  valueColor,
+  valueIcon,
+  multiline,
+  last,
+  testID,
+  style,
+  ...props
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const valueIconView: ReactElement | undefined = useMemo(() => {
+    if (React.isValidElement(valueIcon)) {
+      return valueIcon;
+    } else if (valueIcon) {
+      const IconComponent = valueIcon as ComponentType<any>;
+      return <IconComponent />;
+    }
+  }, [valueIcon]);
+
+  return (
+    <View
+      style={[styles.dataItem, { borderColor: colorScheme.background }, last && styles.last, style]}
+      testID={testID}
+      {...props}>
+      <Typography
+        color={colorScheme.text}
+        preset="xs/line-height-small"
+        style={styles.dataItemLabel}
+        testID={concatTestID(testID, 'title')}>
+        {attribute}
+      </Typography>
+
+      <View style={styles.value}>
+        {valueIconView}
+        <Typography
+          color={valueColor ?? colorScheme.text}
+          numberOfLines={multiline ? undefined : 1}
+          preset="s"
+          style={valueIcon ? styles.valueLabel : undefined}
+          testID={concatTestID(testID, 'value')}>
+          {value}
+        </Typography>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  dataItem: {
+    borderBottomWidth: 1,
+    paddingVertical: 10,
+  },
+  dataItemLabel: {
+    marginBottom: 4,
+    opacity: 0.7,
+  },
+  last: {
+    borderBottomWidth: 0,
+  },
+  value: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  valueLabel: {
+    marginLeft: 4,
+  },
+});
+
+export default DataItem;

package/src/ui-components/history/history-details.tsx

@@ -0,0 +1,247 @@
+import React, { ComponentType, FC, ReactElement, useEffect, useMemo } from 'react';
+import { ColorValue, ImageSourcePropType, StyleSheet, View } from 'react-native';
+
+import { CredentialDetails, CredentialDetailsProps, EntityDetails, EntityDetailsProps } from '../../components';
+import { HeaderInfoButton } from '../../components/navigation/header-buttons';
+import { CardLabels, concatTestID, useCredentialListExpandedCard } from '../../utils';
+import { TouchableOpacity } from '../accessibility';
+import { BackButton } from '../buttons';
+import {
+  CredentialDetailsCardListItem,
+  CredentialDetailsCardListItemProps,
+  CredentialHeader,
+  CredentialHeaderProps,
+} from '../credential';
+import { NextIcon } from '../icons';
+import { ScrollViewScreen } from '../screens';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import DataItem from './data-item';
+
+export type HistoryDetailsLabels = {
+  credentialCard: CardLabels;
+  data: {
+    date: string;
+    action: string;
+  };
+  infoButtonAccessibility?: string;
+  relatedAssets: string;
+  title: string;
+};
+
+type CredentialDetails = Omit<
+  CredentialDetailsProps,
+  'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'
+>;
+
+type CredentialCard = Omit<
+  CredentialDetailsCardListItemProps,
+  'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'
+>;
+
+export type HistoryDetailsViewProps = {
+  assets?: {
+    header?: CredentialHeaderProps & {
+      onPressed?: () => void;
+    };
+    cards?: (
+      | {
+          credentialDetails: CredentialDetails;
+        }
+      | {
+          credentialCard: CredentialCard;
+        }
+    )[];
+  };
+  data: {
+    header?:
+      | {
+          entity: EntityDetailsProps;
+        }
+      | {
+          credentialHeader: CredentialHeaderProps;
+        };
+    date: string;
+    action: {
+      icon: ComponentType<any> | ReactElement;
+      label: string;
+      color: ColorValue;
+      testID?: string;
+    };
+  };
+  headerButton?: ReactElement;
+  labels: HistoryDetailsLabels;
+  onBackPressed: () => void;
+  onInfoPressed?: () => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  testID: string;
+};
+
+export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
+  assets,
+  data,
+  headerButton,
+  labels,
+  onBackPressed,
+  onInfoPressed,
+  onImagePreview,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { expandedCredential, onHeaderPress, setInitialCredential } = useCredentialListExpandedCard();
+
+  // Expand the first credential
+  useEffect(() => {
+    if (assets?.cards && assets.cards.length > 0) {
+      let id =
+        'credentialDetails' in assets.cards[0]
+          ? assets.cards[0].credentialDetails.credentialId
+          : assets.cards[0].credentialCard.card.credentialId;
+      if (id) {
+        setInitialCredential(id);
+      }
+    }
+  }, [assets?.cards, setInitialCredential]);
+
+  const moreInfoHeaderButton = useMemo(() => {
+    if (headerButton) {
+      return headerButton;
+    }
+
+    if (!onInfoPressed) {
+      return undefined;
+    }
+
+    return (
+      <HeaderInfoButton
+        onPress={onInfoPressed}
+        testID={concatTestID(testID, 'header', 'info')}
+        accessibilityLabel={labels.infoButtonAccessibility ?? ''}
+      />
+    );
+  }, [headerButton, labels.infoButtonAccessibility, onInfoPressed, testID]);
+
+  const hasAssets = assets && (assets.header || assets.cards?.length);
+
+  return (
+    <ScrollViewScreen
+      header={{
+        leftItem: <BackButton onPress={onBackPressed} testID={concatTestID(testID, 'header', 'back')} />,
+        rightItem: moreInfoHeaderButton,
+        static: true,
+        title: labels.title,
+      }}
+      scrollView={{
+        style: styles.content,
+      }}
+      testID={testID}>
+      <View style={[styles.section, { backgroundColor: colorScheme.white }]}>
+        {data.header && 'entity' in data.header && (
+          <EntityDetails
+            {...data.header.entity}
+            style={[styles.entity, { borderColor: colorScheme.background }, data.header.entity.style]}
+          />
+        )}
+        {data.header && 'credentialHeader' in data.header && (
+          <CredentialHeader
+            {...data.header.credentialHeader}
+            blur={false}
+            style={[styles.header, { borderColor: colorScheme.background }, data.header.credentialHeader.style]}
+          />
+        )}
+        <DataItem attribute={labels.data.date} value={data.date} />
+        <DataItem
+          attribute={labels.data.action}
+          last
+          testID={data.action.testID}
+          value={data.action.label}
+          valueColor={data.action.color}
+          valueIcon={data.action.icon}
+        />
+      </View>
+
+      {hasAssets && (
+        <Typography color={colorScheme.text} preset="m" style={styles.sectionHeader}>
+          {labels.relatedAssets}
+        </Typography>
+      )}
+
+      {assets?.header && (
+        <TouchableOpacity disabled={!assets.header.onPressed} onPress={assets.header.onPressed}>
+          <CredentialHeader
+            {...assets.header}
+            accessory={assets.header.onPressed ? <NextIcon color={colorScheme.text} /> : undefined}
+            blur={false}
+            style={[styles.assetsHeader, assets.header.style]}
+          />
+        </TouchableOpacity>
+      )}
+      {assets?.cards?.map((props, index, { length }) => {
+        if ('credentialDetails' in props) {
+          return (
+            <View key={props.credentialDetails.credentialId} style={styles.credential}>
+              <CredentialDetails
+                {...props.credentialDetails}
+                expanded={expandedCredential === props.credentialDetails.credentialId}
+                labels={labels.credentialCard}
+                lastItem={index === length - 1}
+                onHeaderPress={onHeaderPress}
+                onImagePreview={onImagePreview}
+              />
+            </View>
+          );
+        } else {
+          const itemProps = {
+            ...props.credentialCard,
+            card: {
+              ...props.credentialCard.card,
+              onHeaderPress,
+            },
+          };
+          return (
+            <View key={index.toString()} style={styles.credential}>
+              <CredentialDetailsCardListItem
+                {...itemProps}
+                expanded={expandedCredential === props.credentialCard.card.credentialId}
+                lastItem={index === length - 1}
+                onImagePreview={onImagePreview}
+              />
+            </View>
+          );
+        }
+      })}
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  assetsHeader: {
+    borderRadius: 8,
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  credential: {
+    marginBottom: 4,
+  },
+  entity: {
+    borderBottomWidth: 1,
+    paddingBottom: 8,
+  },
+  header: {
+    borderBottomWidth: 1,
+    marginTop: -8,
+    paddingBottom: 12,
+    paddingHorizontal: 0,
+  },
+  section: {
+    borderRadius: 8,
+    marginBottom: 12,
+    padding: 12,
+  },
+  sectionHeader: {
+    marginHorizontal: 4,
+    marginVertical: 16,
+  },
+});

package/src/ui-components/history/history-item.tsx

@@ -0,0 +1,141 @@
+import React, { ComponentType, FC, ReactElement, useMemo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type HistoryItemViewProps = {
+  first?: boolean;
+  icon: ComponentType<any> | ReactElement;
+  info?: string;
+  label: string;
+  last?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  time: string;
+};
+
+const HistoryItemView: FC<HistoryItemViewProps> = ({
+  first,
+  icon,
+  label,
+  info,
+  last,
+  style,
+  time,
+  onPress,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const iconView: ReactElement | undefined = useMemo(() => {
+    if (React.isValidElement(icon)) {
+      return icon;
+    } else if (icon) {
+      const IconComponent = icon as ComponentType<any>;
+      return <IconComponent />;
+    }
+  }, [icon]);
+
+  return (
+    <TouchableOpacity
+      disabled={!onPress}
+      onPress={() => onPress?.()}
+      style={[
+        styles.historyItemContainer,
+        {
+          backgroundColor: colorScheme.white,
+        },
+        first && styles.containerFirst,
+        last && styles.containerLast,
+        style,
+      ]}
+      testID={testID}>
+      <View
+        style={[
+          styles.historyItemWrapper,
+          {
+            backgroundColor: colorScheme.white,
+            borderColor: colorScheme.background,
+          },
+          last && styles.wrapperLast,
+        ]}>
+        {iconView}
+        <View style={styles.labelAndInfo}>
+          <Typography
+            color={colorScheme.text}
+            numberOfLines={1}
+            preset="s"
+            style={styles.label}
+            testID={concatTestID(testID, 'label')}>
+            {label}
+          </Typography>
+          {Boolean(info) && (
+            <Typography
+              color={colorScheme.text}
+              numberOfLines={1}
+              preset="s/line-height-small"
+              style={styles.shaded}
+              testID={concatTestID(testID, 'info')}>
+              {info}
+            </Typography>
+          )}
+        </View>
+        <Typography
+          color={colorScheme.text}
+          numberOfLines={1}
+          preset="xs/line-height-small"
+          style={styles.time}
+          testID={concatTestID(testID, 'timeLabel')}>
+          {time}
+        </Typography>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerFirst: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginTop: 8,
+    paddingTop: 12,
+  },
+  containerLast: {
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    marginBottom: 12,
+    paddingBottom: 12,
+  },
+  historyItemContainer: {
+    paddingHorizontal: 12,
+  },
+  historyItemWrapper: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    paddingVertical: 12,
+  },
+  label: {
+    marginBottom: 2,
+  },
+  labelAndInfo: {
+    flex: 1,
+    marginHorizontal: 12,
+  },
+  shaded: {
+    opacity: 0.7,
+  },
+  time: {
+    marginRight: 8,
+    opacity: 0.7,
+  },
+  wrapperLast: {
+    borderBottomWidth: 0,
+  },
+});
+
+export default HistoryItemView;

package/src/ui-components/history/history-section-header.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+// component used on the history section lists (Settings->History, CredentialDetail->History)
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
+
+const HistorySectionHeaderView: FC<{
+  day: string;
+  testID?: string;
+  year?: string;
+}> = ({ day, year, testID }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View style={styles.header}>
+      <Typography accessibilityRole="header" color={colorScheme.text} preset="m" testID={concatTestID(testID, 'title')}>
+        {day}
+      </Typography>
+      {year && (
+        <Typography color={colorScheme.accent} preset="s/line-height-small" style={styles.year}>
+          {year}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 16,
+    paddingHorizontal: 4,
+  },
+  year: {
+    opacity: 0.7,
+  },
+});
+
+export default HistorySectionHeaderView;

package/src/ui-components/history/history-section-list-item.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import HistoryItemView, { HistoryItemViewProps } from './history-item';
+
+// component used on the history section lists (Settings->History, CredentialDetail->History)
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
+
+export interface HistorySectionListItemProps extends HistoryItemViewProps {
+  first?: boolean;
+}
+
+const HistorySectionListItem: FC<HistorySectionListItemProps> = ({ first, last, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.item, first && styles.first, last && styles.last, { backgroundColor: colorScheme.white }]}>
+      <HistoryItemView last={last} {...props} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  first: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginTop: 8,
+    paddingTop: 12,
+  },
+  item: {
+    paddingHorizontal: 12,
+  },
+  last: {
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    marginBottom: 12,
+    paddingBottom: 12,
+  },
+});
+
+export default HistorySectionListItem;

package/src/ui-components/history/index.ts

@@ -0,0 +1,10 @@
+import DataItem, { DataItemProps } from './data-item';
+import HistoryItemView, { HistoryItemViewProps } from './history-item';
+import HistorySectionHeaderView from './history-section-header';
+import HistorySectionListItem, { HistorySectionListItemProps } from './history-section-list-item';
+
+export * from './history-details';
+export { DataItem, DataItemProps };
+export { HistoryItemView, HistoryItemViewProps };
+export { HistorySectionHeaderView };
+export { HistorySectionListItem, HistorySectionListItemProps };

package/src/ui-components/icons/entity.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import Svg, { Mask, Path, SvgProps } from 'react-native-svg';
+
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-5402&mode=design&t=YI1oD2BfBie5HcvJ-0
+export const EntityTrustedIcon: FC<SvgProps> = ({ ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={16} height={19} viewBox="0 0 16 19" fill="none" {...props}>
+      <Mask id="a" maskUnits="userSpaceOnUse" x={0} y={0.0496979} width={18} height={21} fill={colorScheme.black}>
+        <Path fill={colorScheme.white} d="M0 0.0496979H18V21.0496979H0z" />
+        <Path d="M10.265 2.255a4 4 0 00-2.53 0l-3 1A4 4 0 002 7.05v4.117a7 7 0 007 7 7 7 0 007-7V7.05a4 4 0 00-2.735-3.795l-3-1z" />
+      </Mask>
+      <Path
+        d="M10.265 2.255a4 4 0 00-2.53 0l-3 1A4 4 0 002 7.05v4.117a7 7 0 007 7 7 7 0 007-7V7.05a4 4 0 00-2.735-3.795l-3-1z"
+        fill={colorScheme.success}
+      />
+      <Path
+        d="M4.735 3.255l-.632-1.897.632 1.897zm8.53 0l.632-1.897-.632 1.897zm-5.53-1l.633 1.897-.633-1.897zm2.53 0l-.633 1.897.633-1.897zM7.103.358l-3 1 1.265 3.794 3-1L7.103.358zM0 7.05v4.117h4V7.05H0zm0 4.117a9 9 0 009 9v-4a5 5 0 01-5-5H0zm9 9a9 9 0 009-9h-4a5 5 0 01-5 5v4zm9-9V7.05h-4v4.117h4zm-4.103-9.81l-3-1-1.265 3.795 3 1 1.265-3.794zm-9.794 0A6 6 0 000 7.05h4a2 2 0 011.368-1.898L4.103 1.358zM18 7.05a6 6 0 00-4.103-5.692l-1.264 3.794A2 2 0 0114 7.05h4zM8.368 4.152a2 2 0 011.264 0L10.897.358a6 6 0 00-3.794 0l1.265 3.794z"
+        fill={colorScheme.white}
+        fillOpacity={0.2}
+        mask="url(#a)"
+      />
+      <Path
+        d="M7.914 13.383c.156 0 .3-.037.43-.11a1.06 1.06 0 00.344-.32l3.648-5.64c.057-.089.104-.183.14-.282a.761.761 0 00.063-.297.652.652 0 00-.25-.53.839.839 0 00-.555-.204c-.276 0-.507.148-.695.445l-3.148 5.032-1.446-1.813a.98.98 0 00-.312-.273.717.717 0 00-.352-.086.742.742 0 00-.554.234.754.754 0 00-.227.555c0 .104.018.206.055.304.041.094.099.19.172.29l1.882 2.265c.115.146.237.255.368.328.13.068.276.102.437.102z"
+        fill={colorScheme.white}
+      />
+    </Svg>
+  );
+};