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

package/src/ui-components/entity/entity-cluster.tsx

@@ -0,0 +1,82 @@
+import React, { FunctionComponent, useMemo } from 'react';
+import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import Avatar, { AvatarProps } from './avatar';
+
+export type EntityClusterProps = ViewProps & {
+  avatar?: AvatarProps;
+  entityName: string;
+  subline?: string;
+  textColor?: string;
+  sublineColor?: string;
+  testID?: string;
+};
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25595&mode=design&t=YI1oD2BfBie5HcvJ-0
+const EntityCluster: FunctionComponent<EntityClusterProps> = ({
+  avatar,
+  entityName,
+  subline,
+  textColor,
+  style,
+  sublineColor,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const avatarProps = useMemo<AvatarProps>(() => {
+    const initials = entityName.split(' ', 3).map((word: string) => word[0]);
+    const placeholderText = initials.length > 0 ? initials.join('') : '';
+    return {
+      ...avatar,
+      placeholderText: avatar?.placeholderText ?? placeholderText,
+    };
+  }, [avatar, entityName]);
+
+  return (
+    <View style={[styles.entity, style]} testID={testID} {...viewProps}>
+      <Avatar testID={concatTestID(testID, 'avatar')} {...avatarProps} />
+      <View style={styles.labels}>
+        <Typography
+          testID={concatTestID(testID, 'entityName')}
+          color={textColor ?? colorScheme.text}
+          numberOfLines={2}
+          preset="m"
+          style={styles.entityName}>
+          {entityName}
+        </Typography>
+        {subline && (
+          <View>
+            <Typography
+              testID={concatTestID(testID, 'subline')}
+              color={sublineColor ?? colorScheme.text}
+              numberOfLines={1}
+              preset="xs">
+              {subline}
+            </Typography>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  entity: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  entityName: {
+    letterSpacing: Platform.OS === 'ios' ? -0.2 : -0.3, // -0.2 breaks layout on Android
+  },
+  labels: {
+    flex: 1,
+    marginLeft: 12,
+  },
+});
+
+export default EntityCluster;

package/src/ui-components/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/ui-components/header/header.tsx

@@ -0,0 +1,105 @@
+import React, { FC, ReactNode } from 'react';
+import { Insets, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { BackButton } from '../buttons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+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/ui-components/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/ui-components/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 { concatTestID } from '../../utils';
+import BlurView from '../blur/blur-view';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+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/ui-components/history/data-item.tsx

@@ -0,0 +1,79 @@
+import { FC, ReactNode } from 'react';
+import React, { ColorValue, StyleSheet, View, ViewProps } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+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/ui-components/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 { concatTestID } from '../../utils/testID';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+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;

package/src/ui-components/history/history-section-header.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+// component used on the history section lists (Settings->History, CredentialDetail->History)
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
+
+const HistorySectionHeader: FC<{
+  day: string;
+  testID?: string;
+  year?: string;
+}> = ({ day, year, testID }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View style={styles.header}>
+      <Typography accessibilityRole="header" color={colorScheme.text} preset="m" testID={concatTestID(testID, 'title')}>
+        {day}
+      </Typography>
+      {year && (
+        <Typography color={colorScheme.accent} preset="s/line-height-small" style={styles.year}>
+          {year}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 16,
+    paddingHorizontal: 4,
+  },
+  year: {
+    opacity: 0.7,
+  },
+});
+
+export default HistorySectionHeader;