@procivis/one-react-native-components 0.1.63

package/src/screens/qr-code-scanner-screen.stories.tsx

@@ -0,0 +1,37 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { useEffect } from 'react';
+import { useCameraPermission } from 'react-native-vision-camera';
+
+import QRCodeScannerScreen from './qr-code-scanner-screen';
+
+const Basic: ComponentStory<typeof QRCodeScannerScreen> = (args) => {
+  const { hasPermission, requestPermission } = useCameraPermission();
+  useEffect(() => {
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
+  return <QRCodeScannerScreen {...args} />;
+};
+
+Basic.args = {
+  title: 'Scan QR Code to connect.',
+};
+
+export { Basic as QRCodeScannerScreen };
+
+export default {
+  title: 'screen/QR Code Scanner Screen',
+  component: QRCodeScannerScreen,
+  parameters: {
+    noSafeArea: true,
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=651%3A22601&mode=design&t=NuPAMUrC62C0azQ4-1',
+    },
+  },
+  argTypes: {
+    onQRCodeRead: { action: 'onQRCodeRead' },
+  },
+} as ComponentMeta<typeof QRCodeScannerScreen>;

package/src/screens/qr-code-scanner-screen.tsx

@@ -0,0 +1,124 @@
+import React, { FunctionComponent, memo, ReactElement, useMemo } from 'react';
+import { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useCameraDevice } from 'react-native-vision-camera';
+
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import BlurView from '../blur/blur-view';
+import { GhostButton } from '../buttons';
+import CameraOverlay from '../camera/camera-overlay';
+import QRCodeScanner, { QRCodeScannerProps } from '../camera/qr-code-scanner';
+import { CloseIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import { ContrastingStatusBar } from '../utils';
+import { colorWithAlphaComponent } from '../utils/color';
+
+export interface QRCodeScannerScreenProps {
+  codeTypes?: QRCodeScannerProps['codeTypes'];
+  footer?: React.ComponentType<any> | React.ReactElement;
+  onQRCodeRead: QRCodeScannerProps['onQRCodeRead'];
+  onClose: () => void;
+  overlayStyle?: StyleProp<ViewStyle>;
+  noCameraView?: JSX.Element;
+  title: ReactElement | string;
+}
+
+const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
+  codeTypes,
+  footer,
+  onQRCodeRead,
+  onClose,
+  overlayStyle,
+  noCameraView = null,
+  title,
+}) => {
+  const t = useAccessibilityTranslation();
+  const insets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+
+  const footerView: React.ReactElement | undefined = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if (React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer as React.ComponentType<any>;
+      return <FooterComponent />;
+    }
+  }, [footer]);
+
+  const minBottomBlurViewHeight = Dimensions.get('window').height * 0.15;
+
+  const device = useCameraDevice('back');
+  if (!device) {
+    return noCameraView;
+  }
+
+  return (
+    <View style={styles.container}>
+      <QRCodeScanner
+        cameraOverlay={<CameraOverlay style={overlayStyle} />}
+        codeTypes={codeTypes}
+        onQRCodeRead={onQRCodeRead}
+        style={StyleSheet.absoluteFill}
+      />
+      <ContrastingStatusBar backgroundColor={colorScheme.black} />
+      <BlurView
+        darkMode={true}
+        blurStyle="soft"
+        style={[styles.topBlurView, { backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5) }]}>
+        <View style={[styles.headerSection, { top: insets.top }]}>
+          <GhostButton
+            icon={<CloseIcon color={colorScheme.white} />}
+            onPress={onClose}
+            accessibilityLabel={t('accessibility.nav.close')}
+          />
+        </View>
+      </BlurView>
+      <BlurView
+        darkMode={true}
+        blurStyle="soft"
+        style={[
+          styles.bottomBlurView,
+          {
+            backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5),
+            minHeight: minBottomBlurViewHeight,
+            paddingBottom: Math.max(insets.bottom, 32),
+          },
+        ]}>
+        <Typography align="center" style={styles.title} color={colorScheme.white}>
+          {title}
+        </Typography>
+        {footerView}
+      </BlurView>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  bottomBlurView: {
+    bottom: 0,
+    position: 'absolute',
+    width: '100%',
+  },
+  container: {
+    flex: 1,
+  },
+  headerSection: {
+    paddingHorizontal: 22,
+    paddingTop: 16,
+    position: 'absolute',
+  },
+  title: {
+    marginTop: 32,
+  },
+  topBlurView: {
+    height: '15%',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+  },
+});
+
+export default memo(QRCodeScannerScreen);

package/src/screens/scroll-view-screen.tsx

@@ -0,0 +1,91 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { Platform, ScrollView, ScrollViewProps, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
+import ListTitleHeader from '../list/list-title-header';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { useOnScrollHeaderState } from '../utils/hooks/header/on-scroll-header-state';
+import { useListContentInset } from '../utils/hooks/list/list-content-inset';
+import { concatTestID } from '../utils/testID';
+
+export type ScrollViewScreenProps = ViewProps & {
+  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {
+    static?: boolean;
+    title: string;
+  };
+  modalPresentation?: boolean;
+  scrollView?: Omit<ScrollViewProps, 'onScroll'>;
+};
+
+const ScrollViewScreen: FC<PropsWithChildren<ScrollViewScreenProps>> = ({
+  children,
+  header,
+  modalPresentation,
+  scrollView,
+  style,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { top } = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset({
+    additionalBottomPadding: 24,
+    headerHeight: modalPresentation && Platform.OS === 'ios' ? 63 : 48,
+    modalPresentation,
+  });
+  const { titleVisible, onScroll } = useOnScrollHeaderState();
+  const { contentContainerStyle, ...scrollViewProps } = scrollView ?? {};
+
+  let headerPaddingStyle: ViewStyle | undefined;
+  if (!modalPresentation || Platform.OS === 'android') {
+    headerPaddingStyle = {
+      paddingTop: top,
+    };
+  } else if (modalPresentation && !header.modalHandleVisible && Platform.OS === 'ios') {
+    headerPaddingStyle = styles.modalHeaderWithoutHandle;
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} testID={testID} {...viewProps}>
+      <ScrollView
+        contentContainerStyle={[styles.contentContainer, contentInsetsStyle, contentContainerStyle]}
+        onScroll={onScroll}
+        scrollEventThrottle={100}
+        {...scrollViewProps}>
+        <View style={styles.content} testID={concatTestID(testID, 'content')}>
+          {!header.static && <ListTitleHeader title={header.title} />}
+          {children}
+        </View>
+      </ScrollView>
+      <NavigationHeader
+        animate
+        blurred
+        style={[styles.header, headerPaddingStyle]}
+        titleVisible={header.static || titleVisible}
+        {...header}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+  },
+  modalHeaderWithoutHandle: {
+    paddingTop: 15,
+  },
+});
+
+export default ScrollViewScreen;

package/src/screens/section-list-screen.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { SectionList, SectionListProps, StyleSheet, View, ViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
+import ListTitleHeader from '../list/list-title-header';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { useOnScrollHeaderState } from '../utils/hooks/header/on-scroll-header-state';
+import { useListContentInset } from '../utils/hooks/list/list-content-inset';
+
+export type SectionListScreenProps<ItemT, SectionT> = ViewProps & {
+  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {
+    static?: boolean;
+    title: string;
+  };
+  list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'>;
+};
+
+const SectionListScreen = <ItemT, SectionT>({
+  header,
+  list: { contentContainerStyle, stickySectionHeadersEnabled, ...listProps },
+  style,
+  ...viewProps
+}: SectionListScreenProps<ItemT, SectionT>) => {
+  const colorScheme = useAppColorScheme();
+  const safeAreaInsets = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset();
+  const { titleVisible, onScroll } = useOnScrollHeaderState();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
+      <SectionList<ItemT, SectionT>
+        ListHeaderComponent={!header.static ? <ListTitleHeader title={header.title} /> : undefined}
+        contentContainerStyle={[contentInsetsStyle, contentContainerStyle]}
+        onScroll={onScroll}
+        scrollEventThrottle={100}
+        stickySectionHeadersEnabled={stickySectionHeadersEnabled ?? false}
+        {...listProps}
+      />
+      <NavigationHeader
+        animate
+        blurred
+        style={[styles.header, { paddingTop: safeAreaInsets.top }]}
+        titleVisible={header.static || titleVisible}
+        {...header}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+  },
+});
+
+export default SectionListScreen;

package/src/searchbar/animated-search-bar.tsx

@@ -0,0 +1,96 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { Animated, StyleSheet, ViewStyle } from 'react-native';
+
+import SearchBar, { SearchBarProps } from './search-bar';
+
+export type AnimatedSearchBarProps = {
+  collapsed: boolean;
+  rightButton?: ReactNode;
+  rightButtonAlwaysVisible?: boolean;
+  searchBarProps: SearchBarProps;
+};
+
+// Animated search bar, according to
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&m=dev
+
+const AnimatedSearchBar = ({
+  collapsed,
+  rightButtonAlwaysVisible = false,
+  searchBarProps,
+  rightButton,
+}: AnimatedSearchBarProps) => {
+  const [rightIconFadeAnimation] = useState(
+    () => new Animated.Value(rightButton && rightButtonAlwaysVisible ? 1.5 : 0),
+  );
+  const [searchPaddingAnimation] = useState(() => new Animated.Value(0));
+
+  useEffect(() => {
+    Animated.timing(searchPaddingAnimation, {
+      duration: 250,
+      toValue: collapsed ? 1 : 0,
+      useNativeDriver: false,
+    }).start();
+  }, [collapsed, searchPaddingAnimation]);
+
+  useEffect(() => {
+    if (rightButtonAlwaysVisible) {
+      return;
+    }
+
+    Animated.timing(rightIconFadeAnimation, {
+      duration: 250,
+      toValue: collapsed && rightButton ? 1.5 : 0,
+      useNativeDriver: false,
+    }).start();
+  }, [rightButtonAlwaysVisible, rightIconFadeAnimation, rightButton, collapsed]);
+
+  const searchBarContainerAnimatedStyle = {
+    paddingHorizontal: searchPaddingAnimation.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [0, 1],
+      outputRange: [16, 20],
+    }),
+  };
+
+  const optionsIconAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> = {
+    opacity: rightIconFadeAnimation.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [1, 1.5],
+      outputRange: [0, 1],
+    }),
+  };
+
+  const searchBarAnimatedStyle = {
+    width: rightIconFadeAnimation.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [0, 1],
+      outputRange: ['100%', '88%'],
+    }),
+  };
+
+  const { style: searchBarStyle, ...searchProps } = searchBarProps;
+  return (
+    <Animated.View style={[styles.searchBarContainer, searchBarContainerAnimatedStyle, searchBarStyle]}>
+      <Animated.View style={searchBarAnimatedStyle}>
+        <SearchBar {...searchProps} />
+      </Animated.View>
+      {rightButton && (
+        <Animated.View style={[styles.rightButtonWrapper, optionsIconAnimatedStyle]}>{rightButton}</Animated.View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rightButtonWrapper: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  searchBarContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 12,
+  },
+});
+
+export default AnimatedSearchBar;

package/src/searchbar/index.ts

@@ -0,0 +1,5 @@
+import AnimatedSearchBar, { AnimatedSearchBarProps } from './animated-search-bar';
+import SearchBar, { SearchBarProps } from './search-bar';
+
+export { AnimatedSearchBar, AnimatedSearchBarProps };
+export { SearchBar, SearchBarProps };

package/src/searchbar/search-bar.stories.tsx

@@ -0,0 +1,31 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+
+import SearchBar, { SearchBarProps } from './search-bar';
+
+const Basic: Story<Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>> = (args) => {
+  const [searchPhrase, setSearchPhrase] = useState('');
+  return <SearchBar {...args} searchPhrase={searchPhrase} onSearchPhraseChange={setSearchPhrase} />;
+};
+
+Basic.args = {
+  placeholder: 'Search',
+  style: { margin: 24 },
+};
+
+export { Basic as SearchBar };
+
+export default {
+  title: 'base/input/Search Bar',
+  component: SearchBar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=KAAJ0oKY3xb6VNtA-4',
+    },
+  },
+  argTypes: {
+    searchPhrase: { control: { type: null } },
+    onSearchPhraseChange: { control: { type: null } },
+  },
+} as ComponentMeta<typeof SearchBar>;

package/src/searchbar/search-bar.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef, useCallback } from 'react';
+import { Insets, Platform, StyleProp, StyleSheet, TextInput, TextInputProps, View, ViewStyle } from 'react-native';
+
+import { TouchableOpacity } from '../accessibility';
+import { CloseIcon, SearchIcon } from '../icons';
+import font from '../text/font';
+import { useAppColorScheme } from '../theme';
+import { concatTestID } from '../utils';
+
+export interface SearchBarProps extends TextInputProps {
+  style?: StyleProp<ViewStyle>;
+  placeholder?: string;
+  searchPhrase: string;
+  onSearchPhraseChange: (searchPhrase: string) => void;
+}
+
+const hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=HY1KvobxOReLeC8Z-4
+const SearchBar = forwardRef<TextInput, SearchBarProps>(
+  ({ style, placeholder, searchPhrase, onSearchPhraseChange, testID, ...textInputProps }, ref) => {
+    const colorScheme = useAppColorScheme();
+
+    const onClear = useCallback(() => {
+      onSearchPhraseChange('');
+    }, [onSearchPhraseChange]);
+
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: colorScheme.white,
+          },
+          style,
+        ]}>
+        <SearchIcon color={colorScheme.text} style={styles.searchIcon} />
+        <TextInput
+          accessibilityRole="search"
+          onChangeText={onSearchPhraseChange}
+          placeholder={placeholder}
+          placeholderTextColor={colorScheme.text}
+          ref={ref}
+          returnKeyType="search"
+          style={[styles.textInput, { color: colorScheme.text }]}
+          value={searchPhrase}
+          testID={testID}
+          {...textInputProps}
+        />
+        {searchPhrase && (
+          <TouchableOpacity
+            testID={concatTestID(testID, 'clear')}
+            accessibilityRole="button"
+            hitSlop={hitSlop}
+            onPress={onClear}
+            style={styles.clearButton}>
+            <CloseIcon color={colorScheme.text} height={12} width={12} />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+SearchBar.displayName = 'SearchBar';
+
+const styles = StyleSheet.create({
+  clearButton: {
+    marginLeft: 6,
+    marginRight: 16,
+  },
+  container: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 0,
+    flexDirection: 'row',
+    height: 40,
+  },
+  searchIcon: {
+    marginLeft: 8,
+    marginRight: 6,
+  },
+  textInput: {
+    ...font.regular,
+    flex: 1,
+    fontSize: 14,
+    height: 40,
+    letterSpacing: 0.2,
+    lineHeight: 18,
+    paddingBottom: Platform.OS === 'ios' ? 2 : undefined,
+  },
+});
+
+export default SearchBar;

package/src/settings/button-setting.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentType, FunctionComponent, ReactElement, useMemo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { NextIcon } from '../icons/wallet';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import SettingItem from './setting-item';
+
+export type ButtonSettingProps = {
+  accessory?: ComponentType<any> | ReactElement;
+  disabled?: boolean;
+  icon?: ComponentType<any> | ReactElement;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  title: string;
+};
+
+const ButtonSetting: FunctionComponent<ButtonSettingProps> = ({
+  accessory,
+  disabled,
+  title,
+  onPress,
+  icon,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const accessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!accessory) {
+      return (
+        <View style={styles.arrow}>
+          <NextIcon color={colorScheme.text} />
+        </View>
+      );
+    }
+    if (React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory as React.ComponentType<any>;
+      return <AccessoryComponent />;
+    }
+  }, [accessory, colorScheme.text]);
+
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      accessibilityRole="button"
+      onPress={onPress}
+      style={styles.container}
+      testID={testID}>
+      <SettingItem icon={icon} style={style} title={title}>
+        {accessoryView}
+      </SettingItem>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  arrow: {
+    alignItems: 'center',
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  },
+  container: {
+    width: '100%',
+  },
+});
+
+export default ButtonSetting;

package/src/settings/index.ts

@@ -0,0 +1,11 @@
+import ButtonSetting, { ButtonSettingProps } from './button-setting';
+import SettingItem, { SettingItemProps } from './setting-item';
+import SettingItemSeparator, { SettingItemSeparatorProps } from './setting-item-separator';
+import SettingsButton, { SettingsButtonProps } from './settings-button';
+import SwitchSetting, { SwitchSettingProps } from './switch-setting';
+
+export { ButtonSetting, ButtonSettingProps };
+export { SettingItem, SettingItemProps };
+export { SettingItemSeparator, SettingItemSeparatorProps };
+export { SettingsButton, SettingsButtonProps };
+export { SwitchSetting, SwitchSettingProps };

package/src/settings/setting-item-separator.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type SettingItemSeparatorProps = {
+  color?: ColorValue;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SettingItemSeparator: FC<SettingItemSeparatorProps> = ({ color, style }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.wrapper, { backgroundColor: colorScheme.white }, style]}>
+      <View style={[styles.separator, { backgroundColor: color ?? colorScheme.background }]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  separator: {
+    height: '100%',
+    width: '100%',
+  },
+  wrapper: {
+    height: 1,
+    marginHorizontal: 16,
+    paddingHorizontal: 12,
+  },
+});
+
+export default SettingItemSeparator;