@procivis/one-react-native-components 0.1.63

package/src/input/selection-input.stories.tsx

@@ -0,0 +1,46 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { useState } from 'react';
+
+import SelectionInput from './selection-input';
+
+const Basic: ComponentStory<typeof SelectionInput> = ({ ...args }) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+  return (
+    <SelectionInput
+      {...args}
+      selectedValue={selectedValue}
+      onChange={(choice) => {
+        setSelectedValue(choice.label);
+        return false;
+      }}
+    />
+  );
+};
+
+Basic.args = {
+  label: 'Label',
+  values: [
+    { label: 'Item1', value: 1 },
+    { label: 'Item2', value: 2 },
+    { label: 'Item3', value: 3, shortLabel: 'I3' },
+  ],
+  pickerTitle: 'Picker Title',
+  pickerConfirmLabel: 'Select',
+  pickerCancelLabel: 'Cancel',
+  disabled: false,
+  error: '',
+  style: { margin: 24 },
+};
+
+export { Basic as SelectionInput };
+
+export default {
+  title: 'base/input/Selection Input',
+  component: SelectionInput,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=if2gUkBSc85H9hWC-4',
+    },
+  },
+} as ComponentMeta<typeof SelectionInput>;

package/src/input/selection-input.tsx

@@ -0,0 +1,112 @@
+import Picker from '@procivis/react-native-picker';
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import type { TouchableOpacityProps } from 'react-native';
+
+import { focusAccessibility } from '../accessibility/accessibility';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { useAppColorScheme } from '../theme';
+import { useForwardedRef } from '../utils/ref';
+import TextInput, { TextInputAccessory } from './text-input';
+
+export interface SelectionInputChoice {
+  label: string;
+  /**
+   * If specified used in the input display, otherwise {@link label} used.
+   * The {@link label} is always used for the picker values.
+   */
+  shortLabel?: string;
+  value: string | number;
+}
+
+export interface SelectionInputProps extends TouchableOpacityProps {
+  error?: string;
+  label: string;
+  /**
+   * Called when selection changes
+   * @return `true` to avoid accessibility auto-focusing, `false` otherwise
+   */
+  onChange?: (value: SelectionInputChoice) => boolean;
+  pickerCancelLabel: string;
+
+  pickerConfirmLabel: string;
+  pickerTitle?: string;
+  /** {@link SelectionInputChoice.label} of the selected choice */
+  selectedValue?: string | number;
+
+  values: SelectionInputChoice[];
+}
+
+/**
+ * Generic selection input component
+ * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=B2Y3PtJHH22XDPkx-0
+ */
+const SelectionInput = forwardRef<TouchableOpacityRef, SelectionInputProps>(
+  (
+    { selectedValue, values, label, pickerTitle, pickerConfirmLabel, pickerCancelLabel, onChange, error, ...props },
+    ref,
+  ) => {
+    const t = useAccessibilityTranslation();
+    const colorScheme = useAppColorScheme();
+    const selectedChoice = useMemo(
+      () => (selectedValue !== undefined ? values.find(({ value }) => value === selectedValue) : undefined),
+      [selectedValue, values],
+    );
+
+    const [forwardedRef, refObject] = useForwardedRef(ref);
+    const [pickerOpen, setPickerOpen] = useState(false);
+
+    const onOpen = useCallback(() => setPickerOpen(true), []);
+    const onConfirm = useCallback(
+      (valueLabel: any) => {
+        setPickerOpen(false);
+        const choice = values.find(({ label: choiceLabel }) => choiceLabel === valueLabel);
+        if (!choice || !onChange?.(choice)) {
+          setTimeout(() => focusAccessibility(refObject.current), 200);
+        }
+      },
+      [onChange, refObject, values],
+    );
+    const onCancel = useCallback(() => {
+      setPickerOpen(false);
+      requestAnimationFrame(() => focusAccessibility(refObject.current));
+    }, [refObject]);
+
+    const accessibilityLabel = error ? `${label}, ${error}` : label;
+    return (
+      <TouchableOpacity
+        accessibilityHint={t('accessibility.control.combobox.tapToSelect')}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="combobox"
+        accessibilityValue={{ text: selectedChoice?.label }}
+        onPress={onOpen}
+        ref={forwardedRef}
+        {...props}>
+        <TextInput
+          accessory={TextInputAccessory.Dropdown}
+          disabled={true}
+          error={error}
+          label={label}
+          pointerEvents="none"
+          value={selectedChoice?.shortLabel ?? selectedChoice?.label}
+        />
+        <Picker
+          cancelText={pickerCancelLabel}
+          confirmText={pickerConfirmLabel}
+          items={values.map(({ label: itemLabel }) => itemLabel)}
+          modal
+          mode="list"
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+          open={pickerOpen}
+          selectedValue={selectedChoice?.label}
+          textColor={colorScheme.text}
+          title={pickerTitle ?? label}
+        />
+      </TouchableOpacity>
+    );
+  },
+);
+
+SelectionInput.displayName = 'SelectionInput';
+export default SelectionInput;

package/src/input/text-input.tsx

@@ -0,0 +1,253 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Animated,
+  Insets,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  NativeSyntheticEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput as RNTextInput,
+  TextInputFocusEventData as RNTextInputFocusEventData,
+  TextInputProps as RNTextInputProps,
+  TextInputSubmitEditingEventData as RNTextInputSubmitEditingEventData,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { ClearInputIcon, DropdownInputIcon } from '../icons/input';
+import font from '../text/font';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { concatTestID } from '../utils/testID';
+
+// difference between font sizes
+const LABEL_SCALE_RATIO = 14 / 12;
+
+export enum TextInputAccessory {
+  Dropdown = 'dropdown',
+  Clear = 'clear',
+}
+
+const hitSlop: Insets = { bottom: 10, left: 10, right: 10, top: 10 };
+
+export type TextInputProps = Omit<RNTextInputProps, 'editable' | 'onSubmitEditing' | 'style'> & {
+  accessory?: TextInputAccessory;
+  accessoryAccessibilityLabel?: string;
+  disabled?: boolean;
+  error?: string;
+  label: string;
+  onAccessoryPress?: () => void;
+  onSubmit?: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Generic text input component
+ * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=3%3A824&t=r7HhHF1rsNLmOBL2-4
+ */
+const TextInput = forwardRef<RNTextInput, TextInputProps>(
+  (
+    {
+      value,
+      label,
+      accessory = TextInputAccessory.Clear,
+      accessoryAccessibilityLabel,
+      onAccessoryPress,
+      onSubmit,
+      onFocus,
+      onBlur,
+      disabled,
+      error,
+      style,
+      placeholder,
+      ...props
+    },
+    ref,
+  ) => {
+    const colorScheme = useAppColorScheme();
+    const { fontScale } = useWindowDimensions();
+
+    const [focused, setFocused] = useState(false);
+    const onFocusAction = useCallback(
+      (e: NativeSyntheticEvent<RNTextInputFocusEventData>) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus],
+    );
+    const onBlurAction = useCallback(
+      (e: NativeSyntheticEvent<RNTextInputFocusEventData>) => {
+        setFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur],
+    );
+
+    const onSubmitEditing = useCallback(
+      (e: NativeSyntheticEvent<RNTextInputSubmitEditingEventData>) => onSubmit?.(e.nativeEvent.text),
+      [onSubmit],
+    );
+
+    const accessoryIcon = useMemo(() => {
+      switch (accessory) {
+        case TextInputAccessory.Dropdown:
+          return <DropdownInputIcon />;
+        case TextInputAccessory.Clear:
+          return value && !disabled ? <ClearInputIcon /> : undefined;
+      }
+    }, [accessory, disabled, value]);
+
+    const accessoryComponent = accessoryIcon ? (
+      <TouchableOpacity
+        accessibilityLabel={accessoryAccessibilityLabel}
+        accessibilityRole="button"
+        accessible={!disabled}
+        disabled={disabled}
+        hitSlop={hitSlop}
+        onPress={onAccessoryPress}
+        testID={concatTestID(props.testID, 'accessoryButton')}>
+        {accessoryIcon}
+      </TouchableOpacity>
+    ) : null;
+
+    const labelPosition = focused || value ? 0 : 1;
+    const [labelAnimation] = useState<Animated.Value>(() => new Animated.Value(labelPosition));
+    useEffect(() => {
+      Animated.timing(labelAnimation, {
+        duration: 200,
+        toValue: labelPosition,
+        useNativeDriver: true,
+      }).start();
+    }, [labelAnimation, labelPosition]);
+
+    const [labelLayout, setLabelLayout] = useState<LayoutRectangle>();
+    const onLabelLayout = useCallback((event: LayoutChangeEvent) => setLabelLayout(event.nativeEvent.layout), []);
+
+    const accessibilityLabel = disabled ? undefined : label;
+    const inputStyle = { height: Math.min(2, fontScale) * 24 };
+
+    const input = (
+      <RNTextInput
+        accessibilityLabel={accessibilityLabel}
+        defaultValue={value || ''}
+        editable={!disabled}
+        hitSlop={hitSlop}
+        maxFontSizeMultiplier={2}
+        numberOfLines={1}
+        onBlur={onBlurAction}
+        onFocus={onFocusAction}
+        onSubmitEditing={onSubmitEditing}
+        placeholder={focused ? placeholder : undefined}
+        ref={ref}
+        returnKeyType="next"
+        style={[
+          font.regular,
+          styles.inputText,
+          Platform.OS === 'android' ? styles.inputAndroid : styles.inputIOS,
+          {
+            color: colorScheme.text,
+          },
+        ]}
+        textAlignVertical="center"
+        // https://github.com/facebook/react-native/issues/17530
+        underlineColorAndroid="#00000000"
+        value={value}
+        {...props}
+      />
+    );
+    return (
+      <View style={style}>
+        <Animated.View
+          onLayout={onLabelLayout}
+          style={
+            labelLayout
+              ? {
+                  transform: [
+                    {
+                      // move label into the position of placeholder
+                      translateY: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0, labelLayout.height + 4],
+                      }),
+                    },
+                    {
+                      // compensate scale position in X direction
+                      translateX: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0, (labelLayout.width * (LABEL_SCALE_RATIO - 1)) / 2],
+                      }),
+                    },
+                    {
+                      // scale label into the size of placeholder
+                      scale: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [1, LABEL_SCALE_RATIO],
+                      }),
+                    },
+                  ],
+                }
+              : undefined
+          }>
+          <Typography accessible={false} color={'rgba(0, 0, 0, 0.50)'} preset="s">
+            {label}
+          </Typography>
+        </Animated.View>
+        <View
+          style={[
+            styles.inputRow,
+            {
+              borderColor: focused ? colorScheme.accent : colorScheme.grayDark,
+            },
+          ]}>
+          {Platform.OS === 'android' ? <View style={[styles.inputWrapperAndroid, inputStyle]}>{input}</View> : input}
+          {accessoryComponent}
+        </View>
+        {error ? (
+          <Typography color={colorScheme.error} preset="s">
+            {error}
+          </Typography>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  inputAndroid: {
+    fontSize: 14,
+    left: 0,
+    letterSpacing: 0.2,
+    lineHeight: 22,
+    position: 'absolute',
+    right: 0,
+  },
+  inputIOS: {
+    flex: 1,
+  },
+  inputRow: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    marginBottom: 4,
+    paddingVertical: 4,
+  },
+  inputText: {
+    fontSize: 14,
+    letterSpacing: 0.2,
+    lineHeight: Platform.OS === 'android' ? 22 : 20,
+    minHeight: 24,
+  },
+  inputWrapperAndroid: {
+    flex: 1,
+    justifyContent: 'center',
+    overflow: 'visible',
+  },
+});
+
+TextInput.displayName = 'Input';
+
+export default TextInput;

package/src/list/index.ts

@@ -0,0 +1,5 @@
+import ListSectionHeader, { ListSectionHeaderProps } from './list-section-header';
+import ListTitleHeader, { ListTitleHeaderProps } from './list-title-header';
+
+export { ListSectionHeader, ListSectionHeaderProps };
+export { ListTitleHeader, ListTitleHeaderProps };

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

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Typography, { TypographyProps } from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type ListSectionHeaderProps = Partial<TypographyProps> & {
+  title: string;
+};
+
+const ListSectionHeader: FC<ListSectionHeaderProps> = ({
+  accessibilityRole,
+  color,
+  style,
+  title,
+  ...typographyProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Typography
+      accessibilityRole={accessibilityRole ?? 'header'}
+      color={color ?? colorScheme.text}
+      style={[styles.sectionHeader, style]}
+      {...typographyProps}>
+      {title}
+    </Typography>
+  );
+};
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    marginHorizontal: 20,
+    marginVertical: 16,
+  },
+});
+
+export default ListSectionHeader;

package/src/list/list-title-header.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type ListTitleHeaderProps = {
+  title: string;
+  testID?: string;
+};
+
+const ListTitleHeader: FC<ListTitleHeaderProps> = ({ title, testID }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <Typography testID={testID} accessibilityRole="header" color={colorScheme.text} preset="l" style={styles.listTitle}>
+      {title}
+    </Typography>
+  );
+};
+
+const styles = StyleSheet.create({
+  listTitle: {
+    marginBottom: 20,
+    marginHorizontal: 20,
+    marginTop: 9,
+  },
+});
+
+export default ListTitleHeader;

package/src/loader/index.ts

@@ -0,0 +1,5 @@
+import LoaderView, { LoaderViewProps, LoaderViewState } from './loader';
+import LoadingResultScreen, { LoadingResultScreenProps } from './loading-result';
+
+export { LoaderView, LoaderViewProps, LoaderViewState };
+export { LoadingResultScreen, LoadingResultScreenProps };

package/src/loader/loader.stories.tsx

@@ -0,0 +1,31 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+
+import LoaderView, { LoaderViewProps, LoaderViewState } from './loader';
+
+const Basic: Story<LoaderViewProps> = ({ ...props }) => {
+  return <LoaderView {...props} />;
+};
+
+Basic.args = {
+  state: LoaderViewState.InProgress,
+};
+
+export { Basic as LoaderView };
+
+export default {
+  title: 'component/loader/LoaderView',
+  component: LoaderView,
+  argTypes: {
+    state: {
+      options: [LoaderViewState.InProgress, LoaderViewState.Success, LoaderViewState.Warning, LoaderViewState.Error],
+      control: { type: 'radio' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=444-44894&mode=design&t=YI1oD2BfBie5HcvJ-0',
+    },
+  },
+} as ComponentMeta<typeof LoaderView>;

package/src/loader/loader.tsx

@@ -0,0 +1,169 @@
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { InteractionManager, StyleSheet, View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { LoaderError, LoaderProgressSpinner, LoaderSuccess, LoaderWarning } from '../icons/loader';
+import { concatTestID } from '../utils';
+
+export enum LoaderViewState {
+  Error = 'error',
+  InProgress = 'inProgress',
+  Success = 'success',
+  Warning = 'warning',
+}
+
+export type LoaderViewProps = {
+  animate: boolean;
+  state?: LoaderViewState;
+  testID?: string;
+};
+
+const LoaderView: FC<LoaderViewProps> = ({ animate, state, testID }) => {
+  const [initialDelayPassed, setInitialDelayPassed] = useState(false);
+  const rotationIsAnimating = useRef(false);
+  const rotation = useSharedValue(0);
+  const opacity = useSharedValue(state === LoaderViewState.InProgress ? 0 : 1);
+
+  const finished = state !== LoaderViewState.InProgress;
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setInitialDelayPassed(true);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      cancelAnimation(rotation);
+    };
+  }, [rotation]);
+
+  const startRotationAnimation = useCallback(() => {
+    if (rotationIsAnimating.current) {
+      return;
+    }
+    rotationIsAnimating.current = true;
+    rotation.value = withRepeat(
+      withTiming(360, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      -1,
+    );
+  }, [rotationIsAnimating, rotation]);
+
+  const stopRotationAnimation = useCallback(() => {
+    InteractionManager.runAfterInteractions(() => {
+      rotationIsAnimating.current = false;
+      cancelAnimation(rotation);
+      rotation.value = 0;
+    });
+  }, [rotationIsAnimating, rotation]);
+
+  useEffect(() => {
+    if (animate) {
+      startRotationAnimation();
+    } else {
+      stopRotationAnimation();
+    }
+  }, [animate, startRotationAnimation, stopRotationAnimation]);
+
+  useEffect(() => {
+    if (!initialDelayPassed) {
+      return;
+    }
+    const toValue = finished ? 1 : 0;
+    if (opacity.value === toValue) {
+      return;
+    }
+    if (animate) {
+      if (!finished) {
+        startRotationAnimation();
+      }
+      opacity.value = withTiming(
+        toValue,
+        {
+          duration: 300,
+          easing: Easing.ease,
+        },
+        () => {
+          if (finished) {
+            runOnJS(stopRotationAnimation)();
+          }
+        },
+      );
+    } else {
+      opacity.value = toValue;
+      stopRotationAnimation();
+    }
+  }, [opacity, finished, initialDelayPassed, animate, stopRotationAnimation, startRotationAnimation]);
+
+  const spinnerAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: 1 - opacity.value,
+      transform: [
+        {
+          rotateZ: `${rotation.value}deg`,
+        },
+      ],
+    }),
+    [opacity, rotation],
+  );
+
+  const resultAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: opacity.value,
+    }),
+    [opacity],
+  );
+
+  const finishedIcon = useMemo(() => {
+    switch (state) {
+      case LoaderViewState.Success:
+        return <LoaderSuccess />;
+      case LoaderViewState.Warning:
+        return <LoaderWarning />;
+      case LoaderViewState.Error:
+        return <LoaderError />;
+      default:
+        return null;
+    }
+  }, [state]);
+
+  return (
+    <View style={styles.loader} testID={concatTestID(testID, state)}>
+      <Animated.View style={[styles.loaderElement, spinnerAnimatedStyle]}>
+        <LoaderProgressSpinner />
+      </Animated.View>
+      <Animated.View style={[styles.loaderElement, resultAnimatedStyle]}>{finishedIcon}</Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  loader: {
+    height: 64,
+    width: 64,
+  },
+  loaderElement: {
+    height: 64,
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: 64,
+  },
+});
+
+export default LoaderView;