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

package/src/loader/loading-result.tsx

@@ -1,93 +0,0 @@
-import React, { FC } from 'react';
-import { Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { Button, ButtonProps } from '../buttons/button';
-import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import LoaderView, { LoaderViewProps } from './loader';
-
-export type LoadingResultScreenProps = ViewProps & {
-  button?: ButtonProps;
-  header?: NavigationHeaderProps;
-  loader: LoaderViewProps & {
-    label?: string;
-  };
-  secondaryButton?: ButtonProps;
-  tertiaryButton?: ButtonProps;
-};
-
-const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
-  button,
-  header,
-  loader: { label, ...loaderProps },
-  secondaryButton: button2,
-  style,
-  tertiaryButton: button3,
-  ...viewProps
-}) => {
-  const colorScheme = useAppColorScheme();
-  const { top } = useSafeAreaInsets();
-
-  let headerPaddingStyle: ViewStyle | undefined;
-  if (Platform.OS === 'android') {
-    headerPaddingStyle = {
-      paddingTop: top,
-    };
-  } else if (!header?.modalHandleVisible && Platform.OS === 'ios') {
-    headerPaddingStyle = styles.modalHeaderWithoutHandle;
-  }
-
-  return (
-    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
-      <View style={[styles.headerWrapper, headerPaddingStyle]}>
-        <NavigationHeader {...header} />
-      </View>
-      <View style={styles.loaderWrapper}>
-        <LoaderView {...loaderProps} />
-        <Typography align="center" color={colorScheme.text} preset="regular" style={styles.label}>
-          {label}
-        </Typography>
-      </View>
-      <SafeAreaView edges={['bottom']} style={styles.buttonWrapper}>
-        {button && <Button {...button}>{button.title}</Button>}
-        {button2 && <Button {...button2}>{button2.title}</Button>}
-        {button3 && <Button {...button3}>{button3.title}</Button>}
-      </SafeAreaView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  buttonWrapper: {
-    gap: 12,
-    height: 274,
-    justifyContent: 'flex-end',
-    padding: 12,
-  },
-  container: {
-    alignItems: 'stretch',
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  headerWrapper: {
-    height: 215,
-  },
-  label: {
-    marginHorizontal: 20,
-    marginTop: 20,
-  },
-  loaderWrapper: {
-    alignItems: 'center',
-    flexDirection: 'column',
-    height: 108,
-    justifyContent: 'space-between',
-  },
-  modalHeaderWithoutHandle: {
-    paddingTop: 15,
-  },
-});
-
-export default LoadingResultScreen;

package/src/nerd-view/index.ts

@@ -1,3 +0,0 @@
-import NerdModeItem, { ActionIcon, NerdModeItemProps } from './nerd-mode-item';
-
-export { ActionIcon, NerdModeItem, NerdModeItemProps };

package/src/nerd-view/nerd-mode-item.tsx

@@ -1,296 +0,0 @@
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
-import { Dimensions, LayoutChangeEvent, Linking, StyleSheet, View, ViewStyle } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import Animated, {
-  clamp,
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-import { Button, ButtonType } from '../buttons/button';
-import { CopyContentIcon, OpenLinkIcon } from '../icons/nerd-view';
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { concatTestID } from '../utils/testID';
-
-const VALUE_PREVIEW_LENGTH = 80;
-const ICON_HEIGHT = 48;
-const CONTAINER_PADDING = 8;
-
-// The onExpand and expandedAttributes props are used to notify other expanded fields
-// that the layout (and thus the scrollOffset / icon position) has changed. This
-// will trigger a view measurement and repositioning of the icon on all expanded fields.
-
-export type NerdModeItemProps = {
-  attributeKey: string;
-  attributeText?: string;
-  canBeCopied?: boolean;
-  element?: React.ReactElement;
-  expandedAttributes?: number;
-  highlightedText?: string;
-  labels: {
-    expand: string;
-    collapse: string;
-  };
-  last?: boolean;
-  link?: string;
-  onCopyToClipboard: (value: string) => void;
-  onExpand?: (expanded: boolean) => void;
-  scrollOffset?: SharedValue<number>;
-  testID?: string;
-};
-
-const styles = StyleSheet.create({
-  actionIcon: {
-    alignItems: 'center',
-    flex: 0.15,
-    height: ICON_HEIGHT,
-    justifyContent: 'center',
-  },
-  actionIconSingleLine: {
-    height: 24,
-  },
-  attributeLabel: {
-    marginBottom: 4,
-    paddingHorizontal: 6,
-  },
-  attributeValue: {
-    flex: 0.85,
-    flexGrow: 1,
-  },
-  attributeValueContainer: {
-    borderRadius: 2,
-    borderWidth: 0.2,
-    flexDirection: 'row',
-    padding: CONTAINER_PADDING,
-  },
-  container: {
-    paddingHorizontal: 20,
-    paddingTop: 16,
-  },
-  expandValueButton: {
-    borderRadius: 4,
-    borderWidth: 0,
-    marginTop: 4,
-  },
-  lastAttribute: {
-    paddingBottom: 30,
-  },
-});
-
-export const ActionIcon: FunctionComponent<{
-  copy?: boolean;
-  link?: string;
-  onCopyToClipboard: (value: string) => void;
-  style?: ViewStyle;
-  testID?: string;
-  value: string;
-}> = ({ value, link, onCopyToClipboard, testID, copy }) => {
-  const handleCopy = useCallback(() => {
-    onCopyToClipboard(value);
-  }, [onCopyToClipboard, value]);
-
-  const openLink = useCallback(() => {
-    if (link) {
-      Linking.openURL(link);
-    }
-  }, [link]);
-
-  if (copy) {
-    return (
-      <TouchableOpacity onPress={handleCopy} testID={testID}>
-        <CopyContentIcon />
-      </TouchableOpacity>
-    );
-  }
-
-  if (link) {
-    return (
-      <TouchableOpacity onPress={openLink} testID={testID}>
-        <OpenLinkIcon />
-      </TouchableOpacity>
-    );
-  }
-
-  return null;
-};
-
-const TextWithHighlight: FunctionComponent<{
-  highlightedText: string;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  testID: string;
-  text: string;
-}> = ({ highlightedText, onLayout, testID, text }) => {
-  const colorScheme = useAppColorScheme();
-  return (
-    <Typography
-      color={colorScheme.white}
-      onLayout={onLayout}
-      preset="s/code"
-      style={styles.attributeValue}
-      testID={testID}>
-      <Typography color={colorScheme.nerdView.codeHighlightText} preset="s/code">
-        {highlightedText}
-      </Typography>
-      {text}
-    </Typography>
-  );
-};
-
-const NerdModeItem: FunctionComponent<NerdModeItemProps> = ({
-  highlightedText = '',
-  attributeText = '',
-  attributeKey,
-  labels,
-  link,
-  canBeCopied,
-  onCopyToClipboard,
-  onExpand,
-  expandedAttributes,
-  last = false,
-  scrollOffset,
-  element,
-  testID,
-}) => {
-  const colorScheme = useAppColorScheme();
-  const valueViewRef = React.useRef<View>(null);
-  const [isSingleLine, setIsSingleLine] = useState<boolean>();
-
-  const expandedView = useSharedValue({
-    expandedAtOffset: 0,
-    viewHeight: 0,
-    viewStart: 0,
-  });
-
-  const expandable = attributeText.length > VALUE_PREVIEW_LENGTH;
-  const [expanded, setExpanded] = useState(!expandable);
-
-  const screenMiddle = useMemo(() => Dimensions.get('screen').height / 2, []);
-
-  const iconTopPosition = useDerivedValue(() => {
-    if (isSingleLine === undefined) {
-      return 0;
-    }
-    if (!expanded || !expandable || !scrollOffset || isSingleLine) {
-      const iconHeight = isSingleLine ? 0 : ICON_HEIGHT;
-      return expandedView.value.viewHeight / 2 - iconHeight / 2;
-    }
-
-    const viewEnd = expandedView.value.viewStart + expandedView.value.viewHeight;
-    let zeroedOffset = scrollOffset.value - expandedView.value.expandedAtOffset;
-
-    if (expandedView.value.viewStart > screenMiddle) {
-      zeroedOffset = zeroedOffset - (expandedView.value.viewStart - screenMiddle + ICON_HEIGHT / 2);
-    } else {
-      if (viewEnd < screenMiddle + ICON_HEIGHT) {
-        zeroedOffset = zeroedOffset + (screenMiddle - expandedView.value.viewStart - ICON_HEIGHT / 2);
-      } else if (expandedView.value.viewStart < screenMiddle && viewEnd > screenMiddle) {
-        zeroedOffset = zeroedOffset + (screenMiddle - expandedView.value.viewStart - ICON_HEIGHT / 2);
-      }
-    }
-
-    return clamp(zeroedOffset, 0, expandedView.value.viewHeight - ICON_HEIGHT - 8);
-  });
-
-  const iconStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateY: iconTopPosition.value,
-        },
-      ],
-    };
-  });
-
-  const previewText = expanded ? attributeText : attributeText.slice(0, VALUE_PREVIEW_LENGTH) + '...';
-
-  useEffect(() => {
-    if (!scrollOffset || isSingleLine === undefined) {
-      return;
-    }
-
-    setTimeout(() => {
-      valueViewRef.current?.measure((x, y, w, h, px, py) => {
-        expandedView.value = {
-          expandedAtOffset: isSingleLine ? 0 : scrollOffset.value,
-          viewHeight: isSingleLine ? 0 : h - 2 * CONTAINER_PADDING,
-          viewStart: py,
-        };
-      });
-    }, 0);
-    // We only recompute when any attribute is expanded
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expandedAttributes, isSingleLine]);
-
-  const onTextLayout = useCallback((event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    setIsSingleLine(height <= 24);
-  }, []);
-
-  return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: colorScheme.nerdView.attributeSectionBackground },
-        last ? styles.lastAttribute : {},
-      ]}
-      testID={testID}>
-      <Typography
-        color={colorScheme.nerdView.attributeLabel}
-        preset="s/code"
-        style={styles.attributeLabel}
-        testID={concatTestID(testID, 'attributeLabel')}>
-        {attributeKey}
-      </Typography>
-      <View
-        ref={valueViewRef}
-        style={[
-          styles.attributeValueContainer,
-          {
-            backgroundColor: colorScheme.nerdView.attributeValueBackground,
-            borderColor: colorScheme.nerdView.attributeValueBorder,
-          },
-        ]}>
-        {element ? (
-          element
-        ) : (
-          <TextWithHighlight
-            highlightedText={highlightedText}
-            onLayout={onTextLayout}
-            testID={concatTestID(testID, 'attributeValue')!}
-            text={previewText}
-          />
-        )}
-        {(canBeCopied || link) && isSingleLine !== undefined ? (
-          <Animated.View style={[styles.actionIcon, isSingleLine ? styles.actionIconSingleLine : undefined, iconStyle]}>
-            {
-              <ActionIcon
-                copy={canBeCopied}
-                link={link}
-                onCopyToClipboard={onCopyToClipboard}
-                testID={concatTestID(testID, 'actionIcon')}
-                value={`${highlightedText}${attributeText}`}
-              />
-            }
-          </Animated.View>
-        ) : null}
-      </View>
-      {expandable ? (
-        <Button
-          onPress={() => {
-            onExpand && onExpand(!expanded);
-            setExpanded(!expanded);
-          }}
-          style={styles.expandValueButton}
-          testID={concatTestID(testID, 'expandValueButton')}
-          title={expanded ? labels.collapse : labels.expand}
-          type={ButtonType.SmallTech}
-        />
-      ) : null}
-    </View>
-  );
-};
-
-export default NerdModeItem;

package/src/pin/index.ts

@@ -1,4 +0,0 @@
-import { Biometry } from './keypad';
-import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
-
-export { Biometry, PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps };

package/src/pin/keypad.tsx

@@ -1,166 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { LayoutChangeEvent, LayoutRectangle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import { TouchableOpacity, TouchableOpacityRef } from '../accessibility';
-import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
-import { FaceIDIcon, FingerprintIcon, KeypadBackspaceIcon, KeypadClearIcon } from '../icons/keypad';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils/testID';
-
-interface DigitKeyProps {
-  testID: string | undefined;
-  digit: number;
-  onPress?: (digit: number) => void;
-}
-
-const DigitKey = React.forwardRef<TouchableOpacityRef, DigitKeyProps>(({ onPress, testID, digit }, ref) => {
-  const colorScheme = useAppColorScheme();
-  return (
-    <TouchableOpacity
-      testID={concatTestID(testID, String(digit))}
-      ref={ref}
-      accessibilityRole="button"
-      style={[styles.key, { backgroundColor: colorScheme.background }]}
-      disabled={!onPress}
-      onPress={() => onPress?.(digit)}>
-      <Typography maxFontSizeMultiplier={1.5} color={colorScheme.text} preset="xl">
-        {digit}
-      </Typography>
-    </TouchableOpacity>
-  );
-});
-
-DigitKey.displayName = 'DigitKey';
-
-export enum Biometry {
-  FaceID = 'faceID',
-  Other = 'other',
-}
-
-export interface KeypadProps {
-  testID?: string;
-  biometry?: Biometry | null;
-  onBiometricPress?: () => void;
-  onPressDigit?: (digit: number) => void;
-  onPressDelete?: () => void;
-  style?: StyleProp<ViewStyle>;
-  onDeleteAll?: () => void;
-}
-
-const MIN_HEIGHT = 360;
-const MIN_WIDTH = 264;
-const KEY_SIZE = 72;
-
-export const Keypad = React.forwardRef<TouchableOpacityRef, KeypadProps>(
-  ({ testID, onPressDigit, onPressDelete, biometry, onBiometricPress, style, onDeleteAll }, ref) => {
-    const t = useAccessibilityTranslation();
-    const colorScheme = useAppColorScheme();
-
-    const [layout, setLayout] = useState<LayoutRectangle>();
-    const onLayout = useCallback((event: LayoutChangeEvent) => setLayout(event.nativeEvent.layout), []);
-
-    const { width, height } = useMemo(() => {
-      if (!layout) {
-        return {};
-      }
-
-      const RATIO = MIN_WIDTH / MIN_HEIGHT;
-      if (layout.width > layout.height * RATIO) {
-        return { height: layout.height, width: layout.height * RATIO };
-      } else {
-        return { width: layout.width, height: layout.width / RATIO };
-      }
-    }, [layout]);
-
-    const gap = width ? (width - 3 * KEY_SIZE) / 4 : undefined;
-    const lineStyles = [styles.line, { width, marginBottom: gap }];
-
-    return (
-      <View testID={testID} style={[styles.cover, style]} onLayout={onLayout}>
-        <View style={{ height }}>
-          <View style={lineStyles}>
-            <DigitKey testID={testID} ref={ref} digit={1} onPress={onPressDigit} />
-            <DigitKey testID={testID} digit={2} onPress={onPressDigit} />
-            <DigitKey testID={testID} digit={3} onPress={onPressDigit} />
-          </View>
-          <View style={lineStyles}>
-            <DigitKey testID={testID} digit={4} onPress={onPressDigit} />
-            <DigitKey testID={testID} digit={5} onPress={onPressDigit} />
-            <DigitKey testID={testID} digit={6} onPress={onPressDigit} />
-          </View>
-          <View style={lineStyles}>
-            <DigitKey testID={testID} digit={7} onPress={onPressDigit} />
-            <DigitKey testID={testID} digit={8} onPress={onPressDigit} />
-            <DigitKey testID={testID} digit={9} onPress={onPressDigit} />
-          </View>
-          <View style={lineStyles}>
-            <TouchableOpacity
-              testID={concatTestID(testID, 'delete-all')}
-              accessibilityRole="button"
-              accessibilityLabel={t('accessibility.control.clear')}
-              style={styles.key}
-              disabled={!onDeleteAll}
-              onPress={onDeleteAll}>
-              {onDeleteAll ? <KeypadClearIcon color={colorScheme.text} /> : null}
-            </TouchableOpacity>
-            <DigitKey testID={testID} digit={0} onPress={onPressDigit} />
-            {biometry ? (
-              <TouchableOpacity
-                testID={concatTestID(testID, 'biometry')}
-                accessibilityRole="button"
-                accessibilityLabel={t(
-                  biometry === Biometry.FaceID ? 'accessibility.key.faceId' : 'accessibility.key.fingerprint',
-                )}
-                style={styles.key}
-                disabled={!onBiometricPress}
-                onPress={onBiometricPress}>
-                {biometry === Biometry.FaceID ? (
-                  <FaceIDIcon color={colorScheme.text} />
-                ) : (
-                  <FingerprintIcon color={colorScheme.text} />
-                )}
-              </TouchableOpacity>
-            ) : (
-              <TouchableOpacity
-                testID={concatTestID(testID, 'delete')}
-                accessibilityRole="button"
-                accessibilityLabel={t('accessibility.control.delete')}
-                style={styles.key}
-                disabled={!onPressDelete}
-                onPress={onPressDelete}>
-                {onPressDelete ? <KeypadBackspaceIcon color={colorScheme.text} /> : null}
-              </TouchableOpacity>
-            )}
-          </View>
-        </View>
-      </View>
-    );
-  },
-);
-
-Keypad.displayName = 'Keypad';
-
-const styles = StyleSheet.create({
-  cover: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-    maxHeight: 2 * MIN_HEIGHT,
-    maxWidth: 2 * MIN_WIDTH,
-    minHeight: MIN_HEIGHT,
-    minWidth: MIN_WIDTH,
-    width: '100%',
-  },
-  key: {
-    alignItems: 'center',
-    borderRadius: KEY_SIZE / 2,
-    height: KEY_SIZE,
-    justifyContent: 'center',
-    width: KEY_SIZE,
-  },
-  line: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-});

package/src/pin/pin-code-screen.stories.tsx

@@ -1,80 +0,0 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React, { useRef } from 'react';
-import { StyleSheet } from 'react-native';
-
-import { Button } from '../buttons';
-import { Biometry } from './keypad';
-import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
-
-type Props = PinCodeScreenProps & {
-  withBackButton: boolean;
-  showActions: boolean;
-};
-
-const styles = StyleSheet.create({
-  actionButton: { position: 'absolute', right: 24, top: 40 },
-});
-
-const Basic: Story<Props> = ({
-  title,
-  instruction,
-  onAccessibilityAnnounced,
-  withBackButton,
-  onBack,
-  showActions,
-  ...args
-}) => {
-  const subtitle = instruction ? { instruction, onAccessibilityAnnounced } : {};
-  const actionsRef = useRef<PinCodeScreenActions>(null);
-
-  return (
-    <>
-      <PinCodeScreen
-        ref={actionsRef}
-        title={title}
-        {...subtitle}
-        onBack={withBackButton ? onBack : undefined}
-        {...args}
-      />
-      {showActions && (
-        <Button style={styles.actionButton} onPress={() => actionsRef.current?.shakeKeypad()} title="shake" />
-      )}
-    </>
-  );
-};
-
-Basic.args = {
-  length: 6,
-  enteredLength: 0,
-  withBackButton: true,
-  title: 'Title',
-  instruction: 'Instruction',
-  error: '',
-  biometry: Biometry.FaceID,
-  showActions: false,
-};
-
-export { Basic as PINScreen };
-
-export default {
-  title: 'screen/PIN Screen',
-  component: PinCodeScreen,
-  parameters: {
-    noSafeArea: true,
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=621-21892&mode=design&t=nCa9UdCDzPYtOPgu-4',
-    },
-  },
-  argTypes: {
-    onBack: { action: 'onBack' },
-    onBiometricPress: { action: 'onBiometricPress' },
-    onPressDigit: { action: 'onPressDigit' },
-    onPressDelete: { action: 'onPressDelete' },
-    onDeleteAll: { action: 'onDeleteAll' },
-    biometry: {
-      options: [Biometry.FaceID, Biometry.Other],
-      control: { type: 'radio' },
-    },
-  },
-} as ComponentMeta<typeof PinCodeScreen>;