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

package/src/components/entity/entity-details-with-buttons.tsx

@@ -0,0 +1,99 @@
+import { DidListItem, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import React, { FC, memo, useMemo } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import EntityCluster from '../../ui-components/entity/entity-cluster';
+import { EntityTrustedIcon } from '../../ui-components/icons';
+import { AttributesLabels, EntityLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
+import { useAppColorScheme } from '../../ui-components/theme/color-scheme-context';
+import { concatTestID } from '../../utils';
+import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
+import EntityAttributes from './entity-attributes';
+import EntityButtons from './EntityButtons';
+
+export type ContextRole = Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
+
+interface EntityDetailsWithButtonsProps {
+  did?: DidListItem;
+  entityLabels: EntityLabels;
+  attributesLabels: AttributesLabels;
+  style?: StyleProp<ViewStyle>;
+  textColor?: string;
+  testID?: string;
+  role: ContextRole;
+  onCopyToClipboard: (value: string) => void;
+  entityType: EntityType;
+}
+
+const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
+  did,
+  entityLabels,
+  attributesLabels,
+  onCopyToClipboard,
+  role,
+  entityType,
+  testID,
+  ...props
+}) => {
+  let { data } = useTrustEntity(did?.id);
+  const trustEntity = data ?? undefined;
+
+  const colorScheme = useAppColorScheme();
+
+  const trusted = Boolean(
+    trustEntity &&
+      trustEntity.state === TrustEntityStateEnum.ACTIVE &&
+      (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
+  );
+
+  const trustEntityName = useMemo(() => {
+    if (!trustEntity || !trusted) {
+      return role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier;
+    }
+    return trustEntity.name;
+  }, [entityLabels, role, trustEntity, trusted]);
+
+  const trustEntitySubline = useMemo(() => {
+    if (!trusted) {
+      return undefined;
+    }
+
+    return `${entityLabels.trusted} • ${trustEntity?.trustAnchor.name}`;
+  }, [trustEntity, trusted, entityLabels.trusted]);
+
+  const trustEntityStatusIcon = useMemo(() => {
+    if (!trusted) {
+      return undefined;
+    }
+    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
+  }, [testID, trusted]);
+
+  return (
+    <View style={{ backgroundColor: colorScheme.nerdView.background }}>
+      <EntityCluster
+        avatar={{
+          avatar: trusted && trustEntity?.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
+          placeholderText: trustEntity?.name.substring(0, 1),
+          statusIcon: trustEntityStatusIcon,
+          testID: concatTestID(testID, 'avatar'),
+        }}
+        entityName={trustEntityName}
+        subline={trustEntitySubline}
+        sublineColor={trusted ? colorScheme.success : colorScheme.white}
+        testID={testID}
+        {...props}
+      />
+      {trusted && <EntityButtons entity={trustEntity} labels={entityLabels} testID={concatTestID(testID, 'links')} />}
+      <EntityAttributes
+        did={did?.did}
+        trustEntity={trustEntity}
+        trusted={trusted}
+        labels={attributesLabels}
+        onCopyToClipboard={onCopyToClipboard}
+        entityType={entityType}
+      />
+    </View>
+  );
+};
+
+export default memo(EntityDetailsWithButtons);

package/src/components/entity/entity-details.tsx

@@ -0,0 +1,85 @@
+import { DidListItem, TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import React, { FC, ReactNode, useMemo } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+import EntityCluster from '../../ui-components/entity/entity-cluster';
+import { EntityTrustedIcon } from '../../ui-components/icons';
+import { concatTestID, replaceBreakingHyphens } from '../../utils';
+import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
+
+export type EntityDetailsLabels = {
+  unknown: string;
+};
+
+export type EntityDetailsProps = {
+  labels: EntityDetailsLabels;
+  renderMore?: (trustEntity: TrustEntity) => ReactNode;
+  role: Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+} & (
+  | {
+      did?: DidListItem;
+    }
+  | {
+      entity: TrustEntity;
+    }
+);
+
+const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style, testID, ...props }) => {
+  const { data } = useTrustEntity('did' in props ? props.did?.id : undefined);
+  const trustEntity: TrustEntity | undefined = 'entity' in props ? props.entity : data ?? undefined;
+
+  const trusted =
+    trustEntity &&
+    trustEntity.state === TrustEntityStateEnum.ACTIVE &&
+    (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role);
+
+  const trustEntityName = useMemo(() => {
+    if (!trusted) {
+      return labels.unknown;
+    }
+    return trustEntity.name;
+  }, [labels.unknown, trustEntity, trusted]);
+
+  const trustEntitySubline = useMemo(() => {
+    if (!trustEntity) {
+      return 'did' in props ? (props.did?.did ? replaceBreakingHyphens(props.did.did) : undefined) : undefined;
+    }
+    if (!trusted) {
+      return replaceBreakingHyphens(trustEntity.did.did);
+    }
+    return undefined;
+  }, [props, trustEntity, trusted]);
+
+  const trustEntityStatusIcon = useMemo(() => {
+    if (!trusted) {
+      return undefined;
+    }
+    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
+  }, [testID, trusted]);
+
+  return (
+    <>
+      <EntityCluster
+        avatar={
+          trustEntity
+            ? {
+                avatar: trusted && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
+                placeholderText: trustEntity.name.substring(0, 1),
+                statusIcon: trustEntityStatusIcon,
+                testID: concatTestID(testID, 'avatar'),
+              }
+            : undefined
+        }
+        entityName={trustEntityName}
+        style={style}
+        subline={trustEntitySubline}
+        testID={testID}
+      />
+      {trustEntity && renderMore && renderMore(trustEntity)}
+    </>
+  );
+};
+
+export default EntityDetails;

package/src/components/entity/index.ts

@@ -0,0 +1,3 @@
+import EntityDetails, { EntityDetailsLabels, EntityDetailsProps } from './entity-details';
+
+export { EntityDetails, EntityDetailsLabels, EntityDetailsProps };

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

@@ -0,0 +1,89 @@
+import {
+  HistoryActionEnum,
+  HistoryListItem,
+} from '@procivis/react-native-one-core';
+import React, { FC, ReactElement } from 'react';
+import { ImageSourcePropType } from 'react-native';
+
+import { ColorScheme, useAppColorScheme } from '../../ui-components';
+import {
+  HistoryDetailsLabels,
+  HistoryDetailsView,
+  HistoryDetailsViewProps,
+} from '../../ui-components/history/history-details';
+import { capitalizeFirstLetter, concatTestID, formatDateTimeLocalized } from '../../utils';
+import { HistoryListItemLabels } from './history-list-item';
+import { getHistoryItemActionIcon } from './history-list-item-icon';
+
+const getStatusTextColor = (action: HistoryActionEnum, colorScheme: Readonly<ColorScheme>) => {
+  switch (action) {
+    case HistoryActionEnum.CLAIMS_REMOVED:
+    case HistoryActionEnum.DEACTIVATED:
+    case HistoryActionEnum.DELETED:
+    case HistoryActionEnum.REJECTED:
+    case HistoryActionEnum.REVOKED:
+    case HistoryActionEnum.ERRORED:
+      return colorScheme.errorText;
+    case HistoryActionEnum.SUSPENDED:
+    case HistoryActionEnum.OFFERED:
+    case HistoryActionEnum.PENDING:
+    case HistoryActionEnum.REQUESTED:
+      return colorScheme.text;
+    default:
+      return colorScheme.successText;
+  }
+};
+
+export type HistoryDetailsScreenLabels = HistoryDetailsLabels & {
+  item: HistoryListItemLabels;
+};
+
+export type HistoryDetailsScreenProps = {
+  assets: HistoryDetailsViewProps['assets'];
+  dataHeader: HistoryDetailsViewProps['data']['header'];
+  headerButton?: ReactElement;
+  item: HistoryListItem;
+  labels: HistoryDetailsScreenLabels;
+  onBackPressed: () => void;
+  onInfoPressed?: () => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  testID?: string;
+};
+
+export const HistoryDetailsScreen: FC<HistoryDetailsScreenProps> = ({
+  assets,
+  dataHeader,
+  headerButton,
+  item,
+  labels,
+  onBackPressed,
+  onInfoPressed,
+  onImagePreview,
+  testID = 'HistoryDetailScreen',
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const actionValueColor = getStatusTextColor(item.action, colorScheme);
+
+  return (
+    <HistoryDetailsView
+      assets={assets}
+      data={{
+        header: dataHeader,
+        date: formatDateTimeLocalized(new Date(item.createdDate)) ?? '',
+        action: {
+          icon: getHistoryItemActionIcon(item.action),
+          label: capitalizeFirstLetter(labels.item.actions[item.action]),
+          color: actionValueColor,
+          testID: concatTestID(testID, 'action', item.action),
+        },
+      }}
+      headerButton={headerButton}
+      labels={labels}
+      onBackPressed={onBackPressed}
+      onInfoPressed={onInfoPressed}
+      onImagePreview={onImagePreview}
+      testID={testID}
+    />
+  );
+};

package/src/components/history/history-list-item-icon.tsx

@@ -0,0 +1,108 @@
+import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
+import React, { FC, useMemo } from 'react';
+import { SvgProps } from 'react-native-svg';
+
+import {
+  HistoryBackupCreatedIcon,
+  HistoryBackupRestoredIcon,
+  HistoryCredentialIcon,
+  HistoryDidIcon,
+  HistoryIssueIcon,
+  HistoryItemIcon,
+  HistoryKeyIcon,
+  HistoryOrganisationIcon,
+  HistoryProofRequestIcon,
+  HistoryRevokeIcon,
+  HistorySchemaIcon,
+  HistoryStatusAcceptedIcon,
+  HistoryStatusDeleteIcon,
+  HistoryStatusErrorIcon,
+  HistoryStatusSuspendIcon,
+  HistorySuspendIcon,
+  HistoryTrustAnchorIcon,
+  HistoryTrustedEntityIcon,
+} from '../../ui-components';
+
+const defaultIcons: {
+  actions: { [key in keyof typeof HistoryActionEnum]: FC<SvgProps> };
+  entityTypes: { [key in keyof typeof HistoryEntityTypeEnum]: FC<SvgProps> };
+} = {
+  actions: {
+    ACCEPTED: HistoryStatusAcceptedIcon,
+    ACTIVATED: HistoryStatusAcceptedIcon,
+    CLAIMS_REMOVED: HistoryStatusDeleteIcon,
+    CREATED: HistoryStatusAcceptedIcon,
+    DEACTIVATED: HistoryStatusErrorIcon,
+    DELETED: HistoryStatusDeleteIcon,
+    ERRORED: HistoryStatusErrorIcon,
+    IMPORTED: HistoryStatusAcceptedIcon,
+    ISSUED: HistoryStatusAcceptedIcon,
+    OFFERED: HistoryStatusAcceptedIcon,
+    PENDING: HistoryStatusAcceptedIcon,
+    REJECTED: HistoryStatusErrorIcon,
+    REMOVED: HistoryStatusDeleteIcon,
+    REQUESTED: HistoryStatusAcceptedIcon,
+    RESTORED: HistoryStatusAcceptedIcon,
+    RETRACTED: HistoryStatusErrorIcon,
+    REVOKED: HistoryStatusErrorIcon,
+    SHARED: HistoryStatusAcceptedIcon,
+    SUSPENDED: HistoryStatusSuspendIcon,
+    UPDATED: HistoryStatusAcceptedIcon,
+    WITHDRAWN: HistoryStatusErrorIcon,
+    REACTIVATED: HistoryStatusAcceptedIcon,
+    CSR_GENERATED: HistoryStatusAcceptedIcon,
+  },
+  entityTypes: {
+    BACKUP: HistoryRevokeIcon,
+    CREDENTIAL: HistoryCredentialIcon,
+    CREDENTIAL_SCHEMA: HistorySchemaIcon,
+    DID: HistoryDidIcon,
+    KEY: HistoryKeyIcon,
+    ORGANISATION: HistoryOrganisationIcon,
+    PROOF: HistoryProofRequestIcon,
+    PROOF_SCHEMA: HistorySchemaIcon,
+    TRUST_ANCHOR: HistoryTrustAnchorIcon,
+    TRUST_ENTITY: HistoryTrustedEntityIcon,
+  },
+};
+
+export const getHistoryItemActionIcon = (action: HistoryActionEnum) => {
+  return defaultIcons.actions[action] ?? HistoryStatusAcceptedIcon;
+};
+
+export type HistoryListItemIconProps = {
+  item: HistoryListItem;
+};
+
+export const HistoryListItemIcon: FC<HistoryListItemIconProps> = ({ item }) => {
+  const statusIcon = getHistoryItemActionIcon(item.action);
+  const typeIcon = useMemo(() => {
+    switch (item.entityType) {
+      case HistoryEntityTypeEnum.BACKUP:
+        switch (item.action) {
+          case HistoryActionEnum.CREATED:
+            return HistoryBackupCreatedIcon;
+          case HistoryActionEnum.RESTORED:
+            return HistoryBackupRestoredIcon;
+          default:
+            break;
+        }
+        break;
+      case HistoryEntityTypeEnum.CREDENTIAL:
+        switch (item.action) {
+          case HistoryActionEnum.REVOKED:
+            return HistoryRevokeIcon;
+          case HistoryActionEnum.SUSPENDED:
+            return HistorySuspendIcon;
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return defaultIcons.entityTypes[item.entityType] ?? HistoryIssueIcon;
+  }, [item.action, item.entityType]);
+  return <HistoryItemIcon StatusIcon={statusIcon} TypeIcon={typeIcon} />;
+};

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

@@ -0,0 +1,53 @@
+import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
+import React, { FC, useCallback } from 'react';
+
+import { HistoryItemView } from '../../ui-components';
+import { formatTime, useTrustEntity } from '../../utils';
+import { HistoryListItemIcon } from './history-list-item-icon';
+
+export type HistoryListItemLabels = {
+  actions: { [key in keyof typeof HistoryActionEnum]: string };
+  entityTypes: { [key in keyof typeof HistoryEntityTypeEnum]: string };
+};
+
+export interface HistoryListItemViewProps {
+  dateFormatter?: (date: Date) => string;
+  first?: boolean;
+  item: HistoryListItem;
+  labels: HistoryListItemLabels;
+  last?: boolean;
+  onPress?: (item: HistoryListItem) => void;
+  testID?: string;
+}
+
+export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
+  dateFormatter = formatTime,
+  first,
+  item,
+  labels,
+  last,
+  onPress,
+  testID
+}) => {
+  const { data: entity } = useTrustEntity(item.target);
+
+  const label = `${labels.entityTypes[item.entityType]} ${labels.actions[item.action]}`;
+  const icon = <HistoryListItemIcon item={item} />;
+
+  const pressHandler = useCallback(() => {
+    onPress?.(item);
+  }, [onPress, item]);
+
+  return (
+    <HistoryItemView
+      first={first}
+      icon={icon}
+      info={entity?.name}
+      label={label}
+      last={last}
+      onPress={pressHandler}
+      testID={testID}
+      time={dateFormatter(new Date(item.createdDate)) ?? ''}
+    />
+  );
+};

package/src/components/history/history-list-screen.tsx

@@ -0,0 +1,154 @@
+import { HistoryListItem, HistoryListQuery } from '@procivis/react-native-one-core';
+import { debounce } from 'lodash';
+import React, { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import {
+  BackButton,
+  FilterButton,
+  FoldableHeader,
+  NavigationHeader,
+  Typography,
+  useAppColorScheme,
+} from '../../ui-components';
+import { concatTestID, groupEntriesByDay, HistoryGroupByDaySection, useListContentInset } from '../../utils';
+import { HistoryListLabels, HistoryListView } from './history-list';
+
+export type HistoryListScreenLabels = {
+  emptyTitle: string;
+  emptySubtitle: string;
+  list: HistoryListLabels;
+  title: string;
+  search: string;
+};
+
+export type HistoryListScreenProps = {
+  groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  labels: HistoryListScreenLabels;
+  onBackPressed: () => void;
+  onHistoryItemPressed: (historyItem: HistoryListItem) => void;
+  onOpenFilter?: () => void;
+  onSearchPhraseChange: (searchPhrase: string | undefined) => void;
+  queryParams: Partial<HistoryListQuery>;
+  testID?: string;
+};
+
+export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> = ({
+  children,
+  groupItems = groupEntriesByDay,
+  labels,
+  onBackPressed,
+  onHistoryItemPressed,
+  onOpenFilter,
+  onSearchPhraseChange,
+  queryParams,
+  testID = 'HistoryScreen',
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [empty, setEmpty] = useState<boolean>(false);
+  const [scrollOffset] = useState(() => new Animated.Value(0));
+
+  const [searchPhrase, setSearchPhrase] = useState<string>('');
+  const searchBarVisible = !empty || Boolean(queryParams.searchText);
+
+  const handleSearchPhraseChange = useMemo(() => debounce(onSearchPhraseChange, 500), [onSearchPhraseChange]);
+  useEffect(() => {
+    handleSearchPhraseChange(searchPhrase || undefined);
+  }, [searchPhrase, handleSearchPhraseChange]);
+
+  const headerHeight = searchBarVisible ? 112 : 70;
+
+  const insets = useListContentInset({
+    additionalBottomPadding: 24,
+    headerHeight,
+  });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colorScheme.background,
+        },
+      ]}
+      testID={testID}>
+      {empty && (
+        <View
+          style={[
+            styles.emptyNotice,
+            {
+              backgroundColor: colorScheme.white,
+              marginTop: insets.paddingTop,
+            },
+          ]}>
+          <Typography align="center" color={colorScheme.text} preset="s">
+            {labels.emptyTitle}
+          </Typography>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-small" style={styles.shaded}>
+            {labels.emptySubtitle}
+          </Typography>
+        </View>
+      )}
+      <HistoryListView
+        contentContainerStyle={insets}
+        groupItems={groupItems}
+        itemProps={{ onPress: onHistoryItemPressed }}
+        onEmpty={setEmpty}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+          useNativeDriver: true,
+        })}
+        query={queryParams}
+        testID={concatTestID(testID, 'list')}
+        labels={labels.list}
+      />
+      {children}
+      <FoldableHeader
+        header={
+          <NavigationHeader
+            backgroundColor={'transparent'}
+            leftItem={<BackButton onPress={onBackPressed} testID={concatTestID(testID, 'back')} />}
+            title={labels.title}
+          />
+        }
+        scrollOffset={scrollOffset}
+        searchBar={
+          !searchBarVisible
+            ? undefined
+            : {
+                rightButton: onOpenFilter ? (
+                  <FilterButton
+                    active={Boolean(queryParams.credentialSchemaId)}
+                    onPress={onOpenFilter}
+                    testID={concatTestID(testID, 'filter')}
+                  />
+                ) : undefined,
+                rightButtonAlwaysVisible: true,
+                searchBarProps: {
+                  onSearchPhraseChange: setSearchPhrase,
+                  placeholder: labels.search,
+                  searchPhrase,
+                  testID: concatTestID(testID, 'search'),
+                },
+              }
+        }
+        staticHeader={!searchBarVisible}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  emptyNotice: {
+    borderRadius: 12,
+    marginHorizontal: 16,
+    paddingBottom: 20,
+    paddingHorizontal: 12,
+    paddingTop: 16,
+  },
+  shaded: {
+    opacity: 0.7,
+  },
+});

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

@@ -0,0 +1,42 @@
+import moment, { Moment } from 'moment';
+import React, { FC, useMemo } from 'react';
+
+import { HistorySectionHeaderView } from '../../ui-components';
+
+export type HistoryListSectionHeaderLabels = {
+  today: string;
+  yesterday: string;
+};
+
+export type HistoryListSectionHeaderViewProps = {
+  date: Moment;
+  firstYearEntry: boolean;
+  labels: HistoryListSectionHeaderLabels;
+  testID?: string;
+};
+
+// components 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 const HistoryListSectionHeaderView: FC<HistoryListSectionHeaderViewProps> = ({
+  date,
+  firstYearEntry,
+  labels,
+  testID,
+}) => {
+  const day = useMemo(() => {
+    const now = moment();
+    const dateString = moment(date);
+
+    if (dateString.isSame(now, 'day')) {
+      return labels.today;
+    } else if (dateString.isSame(now.subtract(1, 'day'), 'day')) {
+      return labels.yesterday;
+    }
+    return dateString.format('Do MMMM');
+  }, [date, labels]);
+
+  return (
+    <HistorySectionHeaderView day={day} testID={testID} year={firstYearEntry ? date.year().toString() : undefined} />
+  );
+};