@procivis/one-react-native-components 0.1.63

package/src/header/foldable-header.tsx

@@ -0,0 +1,107 @@
+import React, { FunctionComponent, ReactElement, useCallback, useEffect, useState } from 'react';
+import { Animated, LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import BlurView from '../blur/blur-view';
+import AnimatedSearchBar, { AnimatedSearchBarProps } from '../searchbar/animated-search-bar';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type FoldableHeaderProps = {
+  header: ReactElement;
+  scrollOffset: Animated.Value;
+  searchBar?: Omit<AnimatedSearchBarProps, 'collapsed'>;
+  // if true, the header won't fold / fade out on scroll
+  staticHeader?: boolean;
+};
+
+const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
+  staticHeader = false,
+  scrollOffset,
+  searchBar,
+  header,
+}) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+  const [collapsed, setCollapsed] = useState(header ? false : true);
+  const [headerHeight, setHeaderHeight] = useState<number>();
+
+  useEffect(() => {
+    const id = scrollOffset.addListener(({ value }) => {
+      if (!headerHeight) {
+        return;
+      }
+
+      if (value > headerHeight) {
+        setCollapsed(true);
+      } else {
+        setCollapsed(false);
+      }
+    });
+    return () => {
+      scrollOffset.removeListener(id);
+    };
+  }, [scrollOffset, searchBar, headerHeight]);
+
+  const playHeaderFoldAnimation = !staticHeader && headerHeight;
+
+  const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation
+    ? {
+        transform: [
+          {
+            translateY: scrollOffset.interpolate({
+              extrapolate: 'clamp',
+              inputRange: [0, headerHeight],
+              outputRange: [0, -headerHeight],
+            }),
+          },
+        ],
+      }
+    : undefined;
+
+  const fadeHeaderOutAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation
+    ? {
+        opacity: scrollOffset.interpolate({
+          extrapolate: 'clamp',
+          inputRange: [0, headerHeight / 2],
+          outputRange: [1, 0],
+        }),
+      }
+    : undefined;
+
+  const onHeaderLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      setHeaderHeight(event.nativeEvent.layout.height);
+    },
+    [setHeaderHeight],
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.headerContainer,
+        {
+          paddingTop: safeAreaInsets.top,
+        },
+        scrollHeaderAnimatedStyle,
+      ]}>
+      <BlurView blurStyle={'header'} color={colorScheme.background} style={StyleSheet.absoluteFill} />
+      <View>
+        {header && (
+          <Animated.View onLayout={onHeaderLayout} style={fadeHeaderOutAnimatedStyle}>
+            {header}
+          </Animated.View>
+        )}
+        {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    position: 'absolute',
+    width: '100%',
+  },
+});
+
+export default FoldableSearchHeader;

package/src/header/header.stories.tsx

@@ -0,0 +1,59 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Placeholder } from '../../storybook/placeholder';
+import { TouchableOpacity } from '../accessibility';
+import Header, { HeaderProps } from './header';
+
+type Args = HeaderProps & {
+  withBackButton: boolean;
+  withRightButton: boolean;
+};
+
+const Basic: Story<Args> = ({ onBack, withBackButton, withRightButton, ...args }) => {
+  return (
+    <Header
+      {...args}
+      onBack={withBackButton ? onBack : undefined}
+      rightButton={
+        withRightButton ? (
+          <TouchableOpacity>
+            <Placeholder id="R" style={styles.rightButton} />
+          </TouchableOpacity>
+        ) : undefined
+      }
+    />
+  );
+};
+
+Basic.args = {
+  title: 'Title',
+  withBackButton: false,
+  withRightButton: true,
+};
+
+export { Basic as Header };
+
+export default {
+  title: 'component/header/Header',
+  component: Header,
+  argTypes: {
+    onAction: { action: 'onAction' },
+    onBack: { action: 'onBack' },
+    onSearchPhraseChange: { action: 'onSearchPhraseChange' },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624',
+    },
+  },
+} as ComponentMeta<typeof Header>;
+
+const styles = StyleSheet.create({
+  rightButton: {
+    height: 24,
+    width: 24,
+  },
+});

package/src/header/header.tsx

@@ -0,0 +1,105 @@
+import React, { FC, ReactNode } from 'react';
+import { Insets, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+
+import { BackButton } from '../buttons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import { concatTestID } from '../utils';
+
+export interface HeaderProps extends ViewProps {
+  onBack?: () => void;
+  rightButton?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  titleRowStyle?: StyleProp<ViewStyle>;
+  title: ReactNode;
+}
+
+const backButtonHitSlop: Insets = { top: 12, bottom: 12, left: 20, right: 20 };
+
+/**
+ * Unified screen header
+ *
+ * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624
+ * states (Default + Dashboard)
+ */
+const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, testID, title, ...viewProps }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View style={[styles.container, style]} testID={testID} {...viewProps}>
+      {onBack && (
+        <View style={styles.backButtonRow}>
+          <BackButton hitSlop={backButtonHitSlop} onPress={onBack} testID={concatTestID(testID, 'back')} />
+          <View />
+          {rightButton}
+        </View>
+      )}
+
+      <View
+        style={[
+          styles.titleRow,
+          onBack ? styles.titleRow2nd : styles.titleRowNoBackButton,
+          (onBack || !rightButton) && styles.titleRowNoRightButton,
+          titleRowStyle,
+        ]}>
+        {typeof title === 'string' ? (
+          <Typography
+            accessibilityRole="header"
+            color={colorScheme.text}
+            preset="l"
+            style={styles.title}
+            testID={concatTestID(testID, 'title')}>
+            {title}
+          </Typography>
+        ) : (
+          <View style={styles.title}>{title}</View>
+        )}
+
+        {!onBack && rightButton && <View style={styles.rightButtonWrapper}>{rightButton}</View>}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  backButtonRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minHeight: 48,
+    paddingHorizontal: 20,
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+  },
+  rightButtonWrapper: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingTop: 2,
+  },
+  title: {
+    flex: 1,
+    paddingBottom: 8, // to compensate "l" font line-height difference
+    paddingTop: 9,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    paddingLeft: 20,
+    paddingRight: 8,
+    width: '100%',
+  },
+  titleRow2nd: {
+    marginBottom: 12,
+  },
+  titleRowNoBackButton: {
+    marginTop: 12,
+  },
+  titleRowNoRightButton: {
+    paddingRight: 20,
+  },
+});
+
+export default Header;

package/src/header/index.ts

@@ -0,0 +1,9 @@
+import FocusAwareStatusBar from './focus-aware-status-bar';
+import FoldableHeader, { FoldableHeaderProps } from './foldable-header';
+import Header, { HeaderProps } from './header';
+import NavigationHeader, { NavigationHeaderProps } from './navigation-header';
+
+export { FocusAwareStatusBar };
+export { FoldableHeader, FoldableHeaderProps };
+export { Header, HeaderProps };
+export { NavigationHeader, NavigationHeaderProps };

package/src/header/navigation-header.stories.tsx

@@ -0,0 +1,56 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Placeholder } from '../../storybook/placeholder';
+import { TouchableOpacity } from '../accessibility';
+import { BackButton } from '../buttons';
+import NavigationHeader, { NavigationHeaderProps } from './navigation-header';
+
+type Args = NavigationHeaderProps & {
+  withBackButton: boolean;
+  withRightButton: boolean;
+};
+
+const Basic: Story<Args> = ({ withBackButton, withRightButton, ...args }) => {
+  return (
+    <NavigationHeader
+      {...args}
+      leftItem={withBackButton ? BackButton : undefined}
+      rightItem={
+        withRightButton ? (
+          <TouchableOpacity>
+            <Placeholder id="R" style={styles.rightButton} />
+          </TouchableOpacity>
+        ) : undefined
+      }
+    />
+  );
+};
+
+Basic.args = {
+  title: 'Title',
+  modalHandleVisible: false,
+  withBackButton: true,
+  withRightButton: true,
+};
+
+export { Basic as NavigationHeader };
+
+export default {
+  title: 'component/header/NavigationHeader',
+  component: NavigationHeader,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=425-18624&mode=design&t=29eTMhPYwNIK3rK3-0',
+    },
+  },
+} as ComponentMeta<typeof NavigationHeader>;
+
+const styles = StyleSheet.create({
+  rightButton: {
+    height: 24,
+    width: 24,
+  },
+});

package/src/header/navigation-header.tsx

@@ -0,0 +1,147 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { Animated, ColorValue, Easing, LayoutChangeEvent, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+
+import BlurView from '../blur/blur-view';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { concatTestID } from '../utils';
+
+export type NavigationHeaderProps = ViewProps & {
+  animate?: boolean;
+  backgroundColor?: ColorValue;
+  blurred?: boolean;
+  leftItem?: React.ComponentType<any> | React.ReactElement;
+  modalHandleVisible?: boolean;
+  rightItem?: React.ComponentType<any> | React.ReactElement;
+  title?: string;
+  titleColor?: string;
+  titleVisible?: boolean;
+};
+
+const NavigationHeader: FC<NavigationHeaderProps> = ({
+  animate = false,
+  backgroundColor,
+  blurred = false,
+  leftItem,
+  modalHandleVisible,
+  rightItem,
+  style,
+  testID,
+  title,
+  titleVisible = true,
+  titleColor,
+  ...props
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [titleOpacity] = useState(() => new Animated.Value(titleVisible ? 1 : 0));
+
+  const [sideItemWidth, setSideItemWidth] = useState<number>();
+  const onSideItemLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => setSideItemWidth((prev) => Math.max(layout.width, prev ?? 0)),
+    [],
+  );
+
+  backgroundColor = backgroundColor ?? colorScheme.background;
+
+  const leftItemView: React.ReactElement | undefined = useMemo(() => {
+    if (!leftItem) {
+      return undefined;
+    }
+    if (React.isValidElement(leftItem)) {
+      return leftItem;
+    } else {
+      const LeftItemComponent = leftItem as React.ComponentType<any>;
+      return <LeftItemComponent />;
+    }
+  }, [leftItem]);
+
+  useEffect(() => {
+    if (animate) {
+      Animated.timing(titleOpacity, {
+        duration: 150,
+        easing: Easing.ease,
+        toValue: titleVisible ? 1 : 0,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      titleOpacity.setValue(titleVisible ? 1 : 0);
+    }
+  }, [animate, titleOpacity, titleVisible]);
+
+  const rightItemView: React.ReactElement | undefined = useMemo(() => {
+    if (!rightItem) {
+      return undefined;
+    }
+    if (React.isValidElement(rightItem)) {
+      return rightItem;
+    } else {
+      const RightItemComponent = rightItem as React.ComponentType<any>;
+      return <RightItemComponent />;
+    }
+  }, [rightItem]);
+
+  const titleAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> = {
+    opacity: titleOpacity,
+  };
+
+  return (
+    <View
+      {...props}
+      style={[styles.headerContainer, !blurred ? { backgroundColor } : undefined, style]}
+      testID={testID}>
+      {blurred && (
+        <BlurView blurAmount={10} blurStyle="header" color={backgroundColor} style={StyleSheet.absoluteFill} />
+      )}
+      {modalHandleVisible && <View style={[styles.modalHandle, { backgroundColor: colorScheme.grayDark }]} />}
+      <View style={styles.header}>
+        <View onLayout={onSideItemLayout} style={[styles.sideItem, { minWidth: sideItemWidth }]}>
+          {leftItemView}
+        </View>
+        <Animated.View style={[styles.title, titleAnimatedStyle]}>
+          <Typography
+            color={titleColor ?? colorScheme.text}
+            preset="m/heading"
+            align="center"
+            numberOfLines={1}
+            testID={concatTestID(testID, 'title')}>
+            {title}
+          </Typography>
+        </Animated.View>
+        <View onLayout={onSideItemLayout} style={[styles.sideItem, styles.rightSideItem, { minWidth: sideItemWidth }]}>
+          {rightItemView}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 48,
+    width: '100%',
+  },
+  headerContainer: {
+    alignItems: 'center',
+    flexDirection: 'column',
+    paddingHorizontal: 8,
+  },
+  modalHandle: {
+    borderRadius: 2.5,
+    height: 5,
+    marginVertical: 5,
+    width: 36,
+  },
+  rightSideItem: {
+    alignItems: 'flex-end',
+  },
+  sideItem: {
+    padding: 12,
+  },
+  title: {
+    flex: 1,
+  },
+});
+
+export default NavigationHeader;

package/src/history/data-item.tsx

@@ -0,0 +1,79 @@
+import { FC, ReactNode } from 'react';
+import React, { ColorValue, StyleSheet, View, ViewProps } from 'react-native';
+
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { concatTestID } from '../utils/testID';
+
+export type DataItemProps = ViewProps & {
+  attribute: string;
+  last?: boolean;
+  multiline?: boolean;
+  value: string;
+  valueColor?: ColorValue;
+  valueIcon?: ReactNode;
+};
+
+const DataItem: FC<DataItemProps> = ({
+  attribute,
+  value,
+  valueColor,
+  valueIcon,
+  multiline,
+  last,
+  testID,
+  style,
+  ...props
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View
+      style={[styles.dataItem, { borderColor: colorScheme.background }, last && styles.last, style]}
+      testID={testID}
+      {...props}>
+      <Typography
+        color={colorScheme.text}
+        preset="xs/line-height-small"
+        style={styles.dataItemLabel}
+        testID={concatTestID(testID, 'title')}>
+        {attribute}
+      </Typography>
+
+      <View style={styles.value}>
+        {valueIcon}
+        <Typography
+          color={valueColor ?? colorScheme.text}
+          numberOfLines={multiline ? undefined : 1}
+          preset="s"
+          style={valueIcon ? styles.valueLabel : undefined}
+          testID={concatTestID(testID, 'value')}>
+          {value}
+        </Typography>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  dataItem: {
+    borderBottomWidth: 1,
+    paddingVertical: 10,
+  },
+  dataItemLabel: {
+    marginBottom: 4,
+    opacity: 0.7,
+  },
+  last: {
+    borderBottomWidth: 0,
+  },
+  value: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  valueLabel: {
+    marginLeft: 4,
+  },
+});
+
+export default DataItem;

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

@@ -0,0 +1,102 @@
+import React, { ComponentType, FC, ReactElement, useMemo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { concatTestID } from '../utils/testID';
+
+export type HistoryListItemProps = {
+  icon: ComponentType<any> | ReactElement;
+  info?: string;
+  label: string;
+  last?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  time: string;
+};
+
+const HistoryListItem: FC<HistoryListItemProps> = ({ icon, label, info, last, style, time, onPress, testID }) => {
+  const colorScheme = useAppColorScheme();
+
+  const iconView: ReactElement | undefined = useMemo(() => {
+    if (React.isValidElement(icon)) {
+      return icon;
+    } else if (icon) {
+      const IconComponent = icon as ComponentType<any>;
+      return <IconComponent />;
+    }
+  }, [icon]);
+
+  return (
+    <TouchableOpacity
+      disabled={!onPress}
+      onPress={() => onPress?.()}
+      style={[
+        styles.historyItemContainer,
+        {
+          backgroundColor: colorScheme.white,
+          borderColor: colorScheme.background,
+        },
+        last && styles.last,
+        style,
+      ]}
+      testID={testID}>
+      {iconView}
+      <View style={styles.labelAndInfo}>
+        <Typography
+          color={colorScheme.text}
+          numberOfLines={1}
+          preset="s"
+          style={styles.label}
+          testID={concatTestID(testID, 'label')}>
+          {label}
+        </Typography>
+        {Boolean(info) && (
+          <Typography
+            color={colorScheme.text}
+            numberOfLines={1}
+            preset="s/line-height-small"
+            style={styles.shaded}
+            testID={concatTestID(testID, 'info')}>
+            {info}
+          </Typography>
+        )}
+      </View>
+      <Typography
+        color={colorScheme.text}
+        numberOfLines={1}
+        preset="xs/line-height-small"
+        style={styles.shaded}
+        testID={concatTestID(testID, 'timeLabel')}>
+        {time}
+      </Typography>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  historyItemContainer: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    paddingRight: 8,
+    paddingVertical: 12,
+  },
+  label: {
+    marginBottom: 2,
+  },
+  labelAndInfo: {
+    flex: 1,
+    marginHorizontal: 12,
+  },
+  last: {
+    borderBottomWidth: 0,
+  },
+  shaded: {
+    opacity: 0.7,
+  },
+});
+
+export default HistoryListItem;