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

package/src/components/proof-request/group.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useAppColorScheme } from '../../ui-components/theme';
+
+export const ProofRequestGroup: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={styles.group}>
+      <View style={[styles.separator, { backgroundColor: colorScheme.grayDark }]} />
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  group: {
+    marginTop: 16,
+  },
+  separator: {
+    height: 1,
+    marginBottom: 16,
+    marginHorizontal: 4,
+    opacity: 0.5,
+  },
+});

package/src/components/proof-request/index.ts

@@ -0,0 +1,3 @@
+export * from './group';
+export * from './select-credential';
+export * from './share-credential';

package/src/components/proof-request/select-credential.tsx

@@ -0,0 +1,48 @@
+import { PresentationDefinitionRequestedCredential } from '@procivis/react-native-one-core';
+import React, { FC } from 'react';
+import { ImageSourcePropType } from 'react-native';
+
+import { CredentialDetailsCardListItem } from '../../ui-components';
+import { useCoreConfig } from '../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../utils/hooks/core/credentials';
+import { selectCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+
+export const SelectCredential: FC<{
+  credentialId: string;
+  labels: ShareCredentialCardLabels;
+  lastItem: boolean;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onPress?: () => void;
+  request: PresentationDefinitionRequestedCredential;
+  selected: boolean;
+  testID: string;
+}> = ({ credentialId, labels, lastItem, onImagePreview, onPress, request, selected, testID }) => {
+  const { data: credential } = useCredentialDetail(credentialId);
+  const { data: config } = useCoreConfig();
+
+  if (!credential || !config) {
+    return null;
+  }
+
+  const { card, attributes } = selectCredentialCardFromCredential(
+    credential,
+    selected,
+    request,
+    config,
+    testID,
+    labels,
+  );
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        onHeaderPress: onPress,
+      }}
+      expanded={selected}
+      lastItem={lastItem}
+      onImagePreview={onImagePreview}
+    />
+  );
+};

package/src/components/proof-request/share-credential.tsx

@@ -0,0 +1,194 @@
+import {
+  CredentialListItem,
+  CredentialStateEnum,
+  PresentationDefinitionField,
+  PresentationDefinitionRequestedCredential,
+} from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useMemo } from 'react';
+import { ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { Button, ButtonType, CredentialDetailsCardListItem, Typography, useAppColorScheme } from '../../ui-components';
+import { concatTestID } from '../../utils';
+import { useCoreConfig } from '../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../utils/hooks/core/credentials';
+import { getValidityState, ValidityState } from '../../utils/parsers/credential';
+import { shareCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+
+export type ShareCredentialLabels = ShareCredentialCardLabels & {
+  revokedCredentialNotice: string;
+  suspendedCredentialNotice: string;
+  invalidCredentialNotice: string;
+  multipleCredentialsNotice: string;
+  multipleCredentialsSelect: string;
+};
+
+export const ShareCredential: FunctionComponent<{
+  allCredentials: CredentialListItem[];
+  credentialId: string;
+  expanded?: boolean;
+  labels: ShareCredentialLabels;
+  lastItem?: boolean;
+  onHeaderPress?: (_credentialId?: string) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelectCredential?: () => void;
+  onSelectField: (_id: PresentationDefinitionField['id'], _selected: boolean) => void;
+  request: PresentationDefinitionRequestedCredential;
+  selectedCredentialId?: CredentialListItem['id'];
+  selectedFields?: Array<PresentationDefinitionField['id']>;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+}> = ({
+  allCredentials,
+  credentialId,
+  expanded,
+  labels,
+  lastItem,
+  onHeaderPress,
+  onImagePreview,
+  onSelectCredential,
+  onSelectField,
+  request,
+  selectedCredentialId,
+  selectedFields,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { data: credential, isLoading } = useCredentialDetail(selectedCredentialId);
+  const { data: config } = useCoreConfig();
+
+  const selectionOptions = useMemo(
+    () =>
+      request.applicableCredentials.filter((applicableCredentialId) =>
+        allCredentials.some(({ id, state }) => id === applicableCredentialId && state === CredentialStateEnum.ACCEPTED),
+      ),
+    [allCredentials, request],
+  );
+  const multipleCredentialsAvailable = selectionOptions.length > 1;
+
+  const validityState = getValidityState(
+    credential
+      ? {
+          ...credential,
+          issuerDid: credential?.issuerDid?.did,
+        }
+      : undefined,
+  );
+
+  const invalid = useMemo(() => {
+    if (!credential?.lvvcIssuanceDate || !request.validityCredentialNbf) {
+      return false;
+    }
+    return new Date(credential.lvvcIssuanceDate) < new Date(request.validityCredentialNbf);
+  }, [credential, request]);
+
+  const footer = useMemo(() => {
+    if (!expanded) {
+      return;
+    }
+    if (validityState === ValidityState.Revoked) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.revoked')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.revokedCredentialNotice}
+          </Typography>
+        </View>
+      );
+    }
+    if (validityState === ValidityState.Suspended) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.suspended')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.suspendedCredentialNotice}
+          </Typography>
+        </View>
+      );
+    }
+
+    if (invalid) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.invalid')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.invalidCredentialNotice}
+          </Typography>
+        </View>
+      );
+    }
+
+    if (multipleCredentialsAvailable) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.multiple')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.multipleCredentialsNotice}
+          </Typography>
+          <Button
+            onPress={onSelectCredential}
+            style={styles.noticeButton}
+            testID={concatTestID(testID, 'notice.multiple.button')}
+            title={labels.multipleCredentialsSelect}
+            type={ButtonType.Secondary}
+          />
+        </View>
+      );
+    }
+  }, [colorScheme, expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
+
+  if (isLoading || !config) {
+    return null;
+  }
+
+  const { card, attributes } = shareCredentialCardFromCredential(
+    credential,
+    invalid,
+    Boolean(expanded),
+    multipleCredentialsAvailable,
+    request,
+    selectedFields,
+    config,
+    testID,
+    labels,
+  );
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        credentialId,
+        onHeaderPress,
+      }}
+      expanded={expanded}
+      footer={footer}
+      lastItem={lastItem}
+      onAttributeSelected={onSelectField}
+      onImagePreview={onImagePreview}
+      style={[styles.credential, { borderColor: colorScheme.background }, style]}
+      testID={testID}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  credential: {
+    borderRadius: 10,
+    borderWidth: 1,
+    marginBottom: 8,
+  },
+  notice: {
+    marginBottom: 22,
+    marginHorizontal: 12,
+    padding: 12,
+  },
+  noticeButton: {
+    marginTop: 24,
+    paddingVertical: 11,
+  },
+});

package/src/index.ts

@@ -1,26 +1,3 @@
-export * from './accessibility';
-export * from './action-modal';
-export * from './activity-indicator';
-export * from './blur';
-export * from './buttons';
-export * from './camera';
-export * from './control';
-export * from './credential';
-export * from './detail';
-export * from './entity';
-export * from './header';
-export * from './history';
-export * from './icons';
-export * from './image';
-export * from './input';
-export * from './list';
-export * from './loader';
-export * from './nerd-view';
-export * from './pin';
-export * from './screens';
-export * from './searchbar';
-export * from './settings';
-export * from './state';
-export * from './text';
-export * from './theme';
+export * from './components';
+export * from './ui-components';
 export * from './utils';

package/src/ui-components/accessibility/accessibilityHistory.tsx

@@ -0,0 +1,77 @@
+import { useRoute } from '@react-navigation/native';
+import React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+
+import { useForwardedRef } from '../../utils/ref';
+import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
+
+type AccessibilityRefComponent = React.Component | React.ComponentClass | null;
+interface AccessibilityRefContextValue {
+  setRef: (route: string, ref: AccessibilityRefComponent) => void;
+  getRef: (route: string) => AccessibilityRefComponent;
+}
+
+const accessibilityFocusHistoryContext = React.createContext<AccessibilityRefContextValue>({
+  setRef: () => {},
+  getRef: () => null,
+});
+
+/**
+ * Adds app support for accessibility focus history
+ */
+export const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const Provider = accessibilityFocusHistoryContext.Provider;
+  const refs = useRef<Record<string, AccessibilityRefComponent>>({});
+  const setRef = useCallback((route: string, ref: AccessibilityRefComponent) => {
+    refs.current[route] = ref;
+  }, []);
+  const getRef = useCallback((route: string) => {
+    return refs.current[route] ?? null;
+  }, []);
+  const value = useMemo(() => ({ setRef, getRef }), [getRef, setRef]);
+  return <Provider value={value}>{children}</Provider>;
+};
+
+/**
+ * Wraps `onPress` handler and `ref` to support automatic accessibility focus on back navigation
+ * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
+ */
+export const useAccessibilityFocusHistory = <
+  Component extends React.Component<any> | React.ComponentClass<any>,
+  OnPress extends (...args: never[]) => void = () => void,
+>(
+  pressHandler: OnPress | undefined,
+  passedRef?: React.Ref<Component>,
+) => {
+  const [forwardedRef, refObject] = useForwardedRef<Component>(passedRef);
+
+  const historyContext = useContext(accessibilityFocusHistoryContext);
+  const routeKey = useRoute().key;
+
+  const previouslyPressed = useRef(false);
+  const outsideTransition = useAccessibleAfterTransition();
+
+  useEffect(() => {
+    const isStoredInHistory = historyContext.getRef(routeKey) === refObject.current;
+    if (outsideTransition && isStoredInHistory && previouslyPressed.current) {
+      focusAccessibility(refObject.current);
+    }
+  }, [historyContext, outsideTransition, refObject, routeKey]);
+
+  useEffect(() => {
+    if (outsideTransition) {
+      previouslyPressed.current = false;
+    }
+  }, [outsideTransition]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onPress = useCallback(
+    ((...args) => {
+      previouslyPressed.current = true;
+      historyContext.setRef(routeKey, refObject.current);
+      return pressHandler?.(...args);
+    }) as OnPress,
+    [historyContext, routeKey, refObject, pressHandler],
+  );
+
+  return { onPress, ref: forwardedRef };
+};

package/src/ui-components/blur/blur-view.tsx

@@ -0,0 +1,82 @@
+import { BlurView as RNBlurView, BlurViewProps as RNBlurViewProps } from '@react-native-community/blur';
+import React, { FC, PropsWithChildren, useMemo } from 'react';
+import { ColorValue, Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+
+import { colorWithAlphaComponent } from '../../utils/color';
+import { useAppColorScheme } from '../theme';
+
+export interface BlurViewProps extends ViewProps {
+  blurAmount?: number;
+  color?: ColorValue;
+  darkMode?: boolean;
+  blurStyle: 'soft' | 'strong' | 'header';
+}
+
+const BACKGROUND_COLOR = {
+  light: 'rgba(255, 255, 255, 0.8)',
+  dark: 'rgba(16, 12, 12, 0.8)',
+  thickMaterialLight: 'rgba(255, 255, 255, 0.95)',
+  thickMaterialDark: 'rgba(16, 12, 12, 0.95)',
+  thinMaterialLight: 'rgba(255, 255, 255, 0.8)',
+  thinMaterialDark: 'rgba(16, 12, 12, 0.8)',
+};
+
+const BlurView: FC<PropsWithChildren<BlurViewProps>> = ({
+  blurAmount = 50,
+  blurStyle,
+  color,
+  darkMode,
+  children,
+  style,
+  ...props
+}) => {
+  const colorScheme = useAppColorScheme();
+  const themeDarkMode = colorScheme.darkMode;
+  const dark = darkMode ?? themeDarkMode;
+
+  const blurType: RNBlurViewProps['blurType'] = useMemo(() => {
+    if (blurStyle === 'header') {
+      return dark ? 'dark' : 'light';
+    } else if (blurStyle === 'soft') {
+      return dark ? 'thinMaterialDark' : 'thinMaterialLight';
+    } else {
+      return dark ? 'thickMaterialDark' : 'thickMaterialLight';
+    }
+  }, [blurStyle, dark]);
+
+  const backgroundStyle: ViewStyle | undefined = useMemo(() => {
+    if (blurStyle === 'header' && color === colorScheme.background) {
+      return { backgroundColor: '#00000005' };
+    }
+  }, [blurStyle, color, colorScheme.background]);
+
+  if (Platform.OS === 'ios') {
+    return (
+      <View style={[styles.wrapper, backgroundStyle, style]} {...props}>
+        <RNBlurView
+          blurAmount={blurAmount}
+          blurType={blurType}
+          reducedTransparencyFallbackColor={color as string}
+          style={StyleSheet.absoluteFill}
+        />
+        {children}
+      </View>
+    );
+  }
+
+  const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : BACKGROUND_COLOR[blurType];
+
+  return (
+    <View style={[{ backgroundColor }, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    overflow: 'hidden',
+  },
+});
+
+export default BlurView;

package/src/ui-components/buttons/back-button.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { BackIcon, CloseIcon } from '../icons';
+import GhostButton, { GhostButtonProps } from './ghost-button';
+
+export enum BackButtonIcon {
+  Back = 'back',
+  Close = 'close',
+}
+
+export type BackButtonProps = Omit<GhostButtonProps, 'accessibilityLabel'>;
+
+const BackButton: FC<BackButtonProps> = ({ style, icon = BackButtonIcon.Back, onPress, ...props }) => {
+  const t = useAccessibilityTranslation();
+
+  const Icon = icon === BackButtonIcon.Close ? CloseIcon : BackIcon;
+
+  return (
+    <GhostButton
+      accessibilityLabel={t(icon === BackButtonIcon.Close ? 'accessibility.nav.close' : 'accessibility.nav.back')}
+      icon={Icon}
+      onPress={onPress}
+      style={style}
+      {...props}
+    />
+  );
+};
+
+export default BackButton;

package/src/ui-components/buttons/button.tsx

@@ -0,0 +1,169 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { GestureResponderEvent, Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export enum ButtonType {
+  Border = 'border',
+  Primary = 'primary',
+  Secondary = 'secondary',
+  SmallTech = 'small-tech',
+}
+
+export interface ButtonProps extends TouchableOpacityProps {
+  type?: ButtonType;
+  title: string;
+  subtitle?: string;
+  disabled?: boolean;
+}
+
+const SLOP_VALUE = 10;
+const hitSlop: Insets = {
+  top: SLOP_VALUE,
+  bottom: SLOP_VALUE,
+  left: SLOP_VALUE,
+  right: SLOP_VALUE,
+};
+
+const ACTIVE_OPACITY: Record<ButtonType, number> = {
+  [ButtonType.Primary]: 0.8,
+  [ButtonType.Border]: 1,
+  [ButtonType.Secondary]: 1,
+  [ButtonType.SmallTech]: 0.5,
+};
+
+/**
+ * Common button component
+ *
+ * follows design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389
+ *
+ * for bordered style just override `borderColor` in style
+ */
+export const Button = React.forwardRef<TouchableOpacityRef, ButtonProps>(
+  ({ style, type = ButtonType.Primary, disabled, title, subtitle, onPressIn, onPressOut, testID, ...props }, ref) => {
+    const colorScheme = useAppColorScheme();
+    const [secondaryPressed, setSecondaryPressed] = useState(false);
+
+    const textColor = useMemo(() => {
+      switch (type) {
+        case ButtonType.Primary:
+          return colorScheme.accentText;
+        case ButtonType.Border:
+        case ButtonType.Secondary:
+          return colorScheme.text;
+        case ButtonType.SmallTech:
+          return colorScheme.codeAccent;
+      }
+    }, [type, colorScheme]);
+
+    const backgroundColor = useMemo(() => {
+      switch (type) {
+        case ButtonType.Primary:
+          return colorScheme.accent;
+        case ButtonType.Border:
+        case ButtonType.Secondary:
+          return secondaryPressed ? colorScheme.background : colorScheme.white;
+        case ButtonType.SmallTech:
+          return 'rgba(255, 255, 255, 0.05)';
+      }
+    }, [type, colorScheme, secondaryPressed]);
+
+    const borderColor = useMemo(() => {
+      switch (type) {
+        case ButtonType.Border:
+          return colorScheme.background;
+        default:
+          return backgroundColor;
+      }
+    }, [type, colorScheme.background, backgroundColor]);
+
+    const secondaryPressIn = useCallback(
+      (event: GestureResponderEvent) => {
+        setSecondaryPressed(true);
+        onPressIn?.(event);
+      },
+      [onPressIn],
+    );
+
+    const secondaryPressOut = useCallback(
+      (event: GestureResponderEvent) => {
+        setSecondaryPressed(false);
+        onPressOut?.(event);
+      },
+      [onPressOut],
+    );
+
+    return (
+      <TouchableOpacity
+        accessibilityRole="button"
+        activeOpacity={ACTIVE_OPACITY[type]}
+        hitSlop={hitSlop}
+        ref={ref}
+        style={[
+          styles.button,
+          subtitle ? styles.withSubtitle : undefined,
+          { backgroundColor, borderColor },
+          type === ButtonType.SmallTech && styles.techSmall,
+          style,
+        ]}
+        disabled={disabled}
+        onPressIn={type === ButtonType.Secondary ? secondaryPressIn : onPressIn}
+        onPressOut={type === ButtonType.Secondary ? secondaryPressOut : onPressOut}
+        testID={testID}
+        {...props}>
+        <View
+          style={[secondaryPressed && styles.secondaryPressedLabel, disabled && styles.disabled]}
+          testID={concatTestID(testID, disabled ? 'disabled' : 'enabled')}>
+          <Typography
+            preset={type === ButtonType.SmallTech ? 's' : 'regular'}
+            color={textColor}
+            align="center"
+            numberOfLines={1}>
+            {title}
+          </Typography>
+          {subtitle ? (
+            <Typography
+              preset="s/line-height-capped"
+              style={styles.subtitle}
+              color={textColor}
+              align="center"
+              numberOfLines={1}>
+              {subtitle}
+            </Typography>
+          ) : null}
+        </View>
+      </TouchableOpacity>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 20,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+  secondaryPressedLabel: {
+    opacity: 0.5,
+  },
+  subtitle: {
+    opacity: 0.8,
+  },
+  techSmall: {
+    borderRadius: 4,
+    paddingVertical: 12,
+  },
+  withSubtitle: {
+    paddingBottom: 12,
+    paddingTop: 8,
+  },
+});