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

package/src/ui-components/entity/avatar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { EntityTrustedIcon } from '../icons/entity';
+import Avatar, { AvatarProps } from './avatar';
+
+type Args = AvatarProps & {
+  withStatusIcon: boolean;
+  withImage: boolean;
+};
+
+const Render = ({ withStatusIcon, withImage, ...args }: Args) => {
+  return (
+    <Avatar
+      {...args}
+      avatar={withImage ? { imageSource: { uri: 'https://i.pravatar.cc/72' } } : undefined}
+      statusIcon={withStatusIcon ? EntityTrustedIcon : undefined}
+    />
+  );
+};
+
+const Basic: StoryObj<Args> = {
+  args: {
+    placeholderText: 'A',
+    withStatusIcon: true,
+    withImage: true,
+  },
+  render: Render,
+};
+
+export { Basic as Avatar };
+
+export default {
+  title: 'component/entity/Avatar',
+  component: Avatar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25581&mode=design&t=YI1oD2BfBie5HcvJ-0',
+    },
+  },
+} as Meta<typeof Avatar>;

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

@@ -0,0 +1,100 @@
+import React, { ComponentType, FunctionComponent, ReactElement, useMemo } from 'react';
+import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import ImageOrComponent, { ImageOrComponentSource } from '../image/image-or-component';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type AvatarProps = ViewProps & {
+  avatar?: ImageOrComponentSource;
+  placeholderText?: string;
+  statusIcon?: ComponentType<any> | ReactElement;
+  testID?: string;
+};
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25581&mode=design&t=YI1oD2BfBie5HcvJ-0
+const Avatar: FunctionComponent<AvatarProps> = ({
+  avatar,
+  placeholderText,
+  statusIcon,
+  style,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const statusIconView: React.ReactElement | undefined = useMemo(() => {
+    if (!statusIcon) {
+      return undefined;
+    }
+    if (React.isValidElement(statusIcon)) {
+      return statusIcon;
+    } else {
+      const StatusIconComponent = statusIcon as React.ComponentType<any>;
+      return <StatusIconComponent />;
+    }
+  }, [statusIcon]);
+
+  const imageSource = useMemo<ImageOrComponentSource>(() => {
+    if (avatar) {
+      return avatar;
+    }
+
+    return {
+      component: (
+        <View style={[styles.avatarPlaceholder, { backgroundColor: colorScheme.accent }]}>
+          <Typography color={colorScheme.accentText} style={styles.avatarPlaceholderText}>
+            {placeholderText}
+          </Typography>
+        </View>
+      ),
+    };
+  }, [colorScheme, avatar, placeholderText]);
+
+  const { borderRadius, ...avatarStyle } = StyleSheet.flatten([styles.avatar, style]) as ViewStyle;
+  return (
+    <View accessibilityElementsHidden={true} style={avatarStyle} testID={testID} {...viewProps}>
+      <View style={[styles.imageWrapper, borderRadius ? { borderRadius } : undefined]}>
+        <ImageOrComponent source={imageSource} style={styles.image} testID={concatTestID(testID, 'logo')} />
+      </View>
+      {statusIconView && (
+        <View style={styles.statusIcon} testID={concatTestID(testID, 'statusIcon')}>
+          {statusIconView}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatar: {
+    height: 72,
+    width: 72,
+  },
+  avatarPlaceholder: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  avatarPlaceholderText: {
+    textTransform: 'uppercase',
+  },
+  image: {
+    height: '100%',
+    width: '100%',
+  },
+  imageWrapper: {
+    borderRadius: 36,
+    height: '100%',
+    overflow: 'hidden',
+    width: '100%',
+  },
+  statusIcon: {
+    bottom: 4,
+    position: 'absolute',
+    right: 4,
+  },
+});
+
+export default Avatar;

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { EntityTrustedIcon } from '../icons/entity';
+import EntityCluster, { EntityClusterProps } from './entity-cluster';
+
+type Args = EntityClusterProps & {
+  withStatusIcon: boolean;
+  withImage: boolean;
+};
+
+const Render = ({ withStatusIcon, withImage, ...args }: Args) => {
+  return (
+    <EntityCluster
+      {...args}
+      avatar={{
+        avatar: withImage ? { imageSource: { uri: 'https://i.pravatar.cc/72' } } : undefined,
+        statusIcon: withStatusIcon ? EntityTrustedIcon : undefined,
+      }}
+    />
+  );
+};
+
+const Basic: StoryObj<Args> = {
+  args: {
+    entityName: 'Entity name',
+    subline: 'entity detail',
+    withStatusIcon: true,
+    withImage: true,
+  },
+  render: Render,
+};
+
+export { Basic as EntityCluster };
+
+export default {
+  title: 'component/entity/EntityCluster',
+  component: EntityCluster,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25595&mode=design&t=YI1oD2BfBie5HcvJ-0',
+    },
+  },
+} as Meta<typeof EntityCluster>;

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,62 @@
+import type { Meta, StoryObj } 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 Render = ({ onBack, withBackButton, withRightButton, ...args }: Args) => {
+  return (
+    <Header
+      {...args}
+      onBack={withBackButton ? onBack : undefined}
+      rightButton={
+        withRightButton ? (
+          <TouchableOpacity>
+            <Placeholder id="R" style={styles.rightButton} />
+          </TouchableOpacity>
+        ) : undefined
+      }
+    />
+  );
+};
+
+const Basic: StoryObj<Args> = {
+  args: {
+    title: 'Title',
+    withBackButton: false,
+    withRightButton: true,
+  },
+  render: Render,
+};
+
+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 Meta<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/index.ts

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

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } 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 Render = ({ withBackButton, withRightButton, ...args }: Args) => {
+  return (
+    <NavigationHeader
+      {...args}
+      leftItem={withBackButton ? BackButton : undefined}
+      rightItem={
+        withRightButton ? (
+          <TouchableOpacity>
+            <Placeholder id="R" style={styles.rightButton} />
+          </TouchableOpacity>
+        ) : undefined
+      }
+    />
+  );
+};
+
+const Basic: StoryObj<Args> = {
+  args: {
+    title: 'Title',
+    modalHandleVisible: false,
+    withBackButton: true,
+    withRightButton: true,
+  },
+  render: Render,
+};
+
+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 Meta<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;