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

package/src/ui-components/credential/credential-attribute-item.tsx

@@ -0,0 +1,373 @@
+import React, { ComponentType, FC, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
+import { Image, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { colorWithAlphaComponent } from '../../utils/color';
+import { concatTestID } from '../../utils/testID';
+import { TouchableHighlight, TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+type CredentialAttributeItemButtonProps = {
+  disabled?: boolean;
+  id: string;
+  onPress?: (id: string, selected: boolean) => void;
+  selected?: boolean;
+};
+
+const CredentialAttributeItemButton: FC<PropsWithChildren<CredentialAttributeItemButtonProps>> = ({
+  children,
+  disabled,
+  id,
+  onPress,
+  selected,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const pressHandler = useCallback(() => {
+    if (!onPress) {
+      return;
+    }
+    onPress(id, !selected);
+  }, [onPress, id, selected]);
+
+  if (!onPress) {
+    return <View style={styles.touchableAttribute}>{children}</View>;
+  }
+
+  if (selected) {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.8}
+        disabled={disabled}
+        onPress={pressHandler}
+        style={[styles.touchableAttribute, { backgroundColor: colorScheme.background }]}>
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <TouchableHighlight
+      disabled={disabled}
+      onPress={pressHandler}
+      underlayColor={colorWithAlphaComponent(colorScheme.background, 0.5)}
+      style={styles.touchableAttribute}>
+      {children}
+    </TouchableHighlight>
+  );
+};
+
+const IMAGE_SIZE = 64;
+
+export type CredentialAttributeValue =
+  | {
+      attributes: CredentialAttribute[];
+      image?: never;
+      value?: never;
+      values?: never;
+      valueErrorColor?: never;
+      testID?: string;
+    }
+  | {
+      attributes?: never;
+      image: ImageSourcePropType;
+      value?: never;
+      values?: never;
+      valueErrorColor?: never;
+      testID?: string;
+    }
+  | {
+      attributes?: never;
+      image?: never;
+      value: string;
+      values?: never;
+      valueErrorColor?: boolean;
+      testID?: string;
+    }
+  | {
+      attributes?: never;
+      image?: never;
+      value?: never;
+      values: CredentialAttribute[];
+      valueErrorColor?: boolean;
+      testID?: string;
+    };
+
+export type CredentialAttribute = CredentialAttributeValue & {
+  disabled?: boolean;
+  selected?: boolean;
+  nested?: boolean;
+  listValue?: boolean;
+  id: string;
+  name?: string;
+  path: string;
+  rightAccessory?: ComponentType<any> | ReactElement;
+};
+
+export type CredentialAttributeItemProps = CredentialAttribute & {
+  last: boolean | undefined;
+  onImagePreview?: (name: string, image: ImageSourcePropType) => void;
+  onPress?: (id: string, selected: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const CredentialAttributeItem: FC<CredentialAttributeItemProps> = ({
+  attributes,
+  disabled,
+  id,
+  image,
+  last,
+  name,
+  onImagePreview,
+  onPress,
+  rightAccessory,
+  nested = false,
+  listValue = false,
+  selected,
+  style,
+  testID,
+  value,
+  values,
+  valueErrorColor,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const imagePreviewHandler = useCallback(() => {
+    if (!onImagePreview || !image) {
+      return;
+    }
+    onImagePreview(name ?? '', image);
+  }, [image, name, onImagePreview]);
+
+  const rightAccessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!rightAccessory) {
+      return undefined;
+    }
+    if (React.isValidElement(rightAccessory)) {
+      return rightAccessory;
+    } else {
+      const RightAccessoryComponent = rightAccessory as React.ComponentType<any>;
+      return <RightAccessoryComponent />;
+    }
+  }, [rightAccessory]);
+
+  const isObject = attributes && attributes.length > 0;
+  const isArray = values && values.length > 0;
+
+  return (
+    <View style={[!nested && styles.attributeItemContainer, style]} testID={testID}>
+      <View style={styles.attributeItemRow}>
+        <CredentialAttributeItemButton disabled={disabled} id={id} onPress={onPress} selected={selected}>
+          <View style={[styles.dataItemButtonChildren]}>
+            {(isObject || isArray || listValue) && (
+              <View style={styles.decorator}>
+                <View
+                  style={[
+                    styles.decoratorCircle,
+                    listValue ? styles.listDecoratorCircle : undefined,
+                    listValue && image ? styles.listImageDecoratorCircle : undefined,
+                    { backgroundColor: colorScheme.text },
+                  ]}>
+                  <View
+                    style={[
+                      styles.decoratorCircleInner,
+                      { backgroundColor: colorScheme.text, borderColor: colorScheme.background },
+                    ]}
+                  />
+                </View>
+                <View
+                  style={[
+                    styles.decoratorLine,
+                    listValue ? styles.listDecoratorLine : undefined,
+                    listValue && value ? styles.listStringValueDecoratorLine : undefined,
+                    listValue && image ? styles.listImageDecoratorLine : undefined,
+                    { backgroundColor: colorScheme.text },
+                  ]}
+                />
+              </View>
+            )}
+            <View
+              style={[
+                isObject || isArray || listValue ? styles.objectAttributeItem : styles.attributeItem,
+                nested && styles.nestedAttributeItem,
+              ]}>
+              {name && (
+                <Typography
+                  color={colorScheme.text}
+                  preset={image ? 'xs' : 'xs/line-height-small'}
+                  style={isObject || isArray ? styles.nestedObjectLabel : styles.dataItemLabel}
+                  testID={concatTestID(testID, 'title')}>
+                  {name}
+                </Typography>
+              )}
+              {image && (
+                <TouchableOpacity
+                  disabled={!onImagePreview}
+                  onPress={imagePreviewHandler}
+                  style={[styles.dataItemImageWrapper, listValue ? styles.listValue : undefined]}>
+                  <Image
+                    resizeMode="cover"
+                    testID={concatTestID(testID, 'image')}
+                    source={image}
+                    style={styles.dataItemImage}
+                  />
+                </TouchableOpacity>
+              )}
+              {value && (
+                <Typography
+                  color={valueErrorColor ? colorScheme.error : colorScheme.text}
+                  numberOfLines={10}
+                  preset="s"
+                  style={listValue ? styles.listValue : undefined}
+                  testID={concatTestID(testID, 'value')}>
+                  {value}
+                </Typography>
+              )}
+              {isObject &&
+                attributes.map((attribute, index, { length }) => (
+                  <CredentialAttributeItem
+                    nested={true}
+                    key={attribute.id}
+                    onPress={onPress}
+                    last={index === length - 1}
+                    onImagePreview={onImagePreview}
+                    {...attribute}
+                  />
+                ))}
+              {isArray &&
+                values.map((arrayValue, index, { length }) => (
+                  <CredentialAttributeItem
+                    key={arrayValue.id}
+                    onPress={onPress}
+                    last={index === length - 1}
+                    onImagePreview={onImagePreview}
+                    listValue={true}
+                    {...arrayValue}
+                    name={undefined}
+                  />
+                ))}
+              <View />
+            </View>
+            {rightAccessoryView && (
+              <View style={[styles.rightAccessory, isObject && styles.objectAccessory]}>{rightAccessoryView}</View>
+            )}
+          </View>
+        </CredentialAttributeItemButton>
+      </View>
+      {!last && !nested && <View style={[styles.separator, { backgroundColor: colorScheme.background }]} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  attributeItem: {
+    flex: 1,
+    paddingLeft: 8,
+  },
+  attributeItemContainer: {
+    marginTop: 2,
+  },
+  attributeItemRow: {
+    flexDirection: 'row',
+  },
+  dataItemButtonChildren: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  dataItemImage: {
+    height: IMAGE_SIZE,
+    width: IMAGE_SIZE,
+  },
+  dataItemImageWrapper: {
+    borderColor: '#0004',
+    borderRadius: 4,
+    borderWidth: 0.5,
+    height: IMAGE_SIZE,
+    marginTop: 4,
+    overflow: 'hidden',
+    width: IMAGE_SIZE,
+  },
+  dataItemLabel: {
+    marginBottom: 4,
+    opacity: 0.7,
+  },
+  decorator: {
+    height: '100%',
+    justifyContent: 'center',
+    left: 8,
+    position: 'absolute',
+  },
+  decoratorCircle: {
+    alignItems: 'center',
+    borderRadius: 3.5,
+    borderWidth: 1,
+    height: 7,
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 6,
+    width: 7,
+  },
+  decoratorCircleInner: {
+    borderRadius: 2,
+    borderWidth: 1,
+    height: 4,
+    width: 4,
+  },
+  decoratorLine: {
+    bottom: 12,
+    left: 3,
+    position: 'absolute',
+    top: 13,
+    width: 1,
+  },
+  listDecoratorCircle: {
+    top: 18,
+  },
+  listDecoratorLine: {
+    top: 25,
+  },
+  listImageDecoratorCircle: {
+    top: 32,
+  },
+  listImageDecoratorLine: {
+    bottom: 40,
+    top: 39,
+  },
+  listStringValueDecoratorLine: {
+    bottom: 24,
+  },
+  listValue: {
+    marginLeft: 13,
+    paddingVertical: 10,
+  },
+  nestedAttributeItem: {
+    paddingLeft: 12,
+  },
+  nestedObjectLabel: {
+    opacity: 0.7,
+    paddingLeft: 13,
+  },
+  objectAccessory: {
+    alignSelf: 'flex-start',
+  },
+  objectAttributeItem: {
+    alignItems: 'stretch',
+    flex: 1,
+    paddingLeft: 12,
+  },
+  rightAccessory: {
+    paddingHorizontal: 8,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 8,
+    marginTop: -1,
+  },
+  touchableAttribute: {
+    borderRadius: 8,
+    flex: 1,
+    paddingVertical: 11,
+  },
+});
+
+export default CredentialAttributeItem;

package/src/ui-components/credential/selector.tsx

@@ -0,0 +1,64 @@
+import React, { FC, useMemo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import { SelectorIcon } from '../icons/selector';
+import { useAppColorScheme } from '../theme';
+import { SelectorStatus } from './selector-status';
+
+interface SelectorProps {
+  status: SelectorStatus;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Generic selector display
+ *
+ * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=433-28352&mode=design&t=91K8am4RSNRB8qgZ-0
+ */
+const Selector: FC<SelectorProps> = ({ status, style, testID }) => {
+  const colorScheme = useAppColorScheme();
+
+  const statusStyle = useMemo<StyleProp<ViewStyle>>(() => {
+    switch (status) {
+      case SelectorStatus.Empty:
+        return [styles.bordered, { backgroundColor: colorScheme.white, borderColor: colorScheme.grayDark }];
+      case SelectorStatus.SelectedRadio:
+        return [styles.selectedRadio, { backgroundColor: colorScheme.white, borderColor: colorScheme.accent }];
+      case SelectorStatus.SelectedCheckmark:
+        return { backgroundColor: colorScheme.accent };
+      case SelectorStatus.Disabled:
+        return [styles.bordered, { backgroundColor: colorScheme.background, borderColor: colorScheme.grayDark }];
+      default:
+        return undefined;
+    }
+  }, [colorScheme, status]);
+
+  const checked = status === SelectorStatus.SelectedCheckmark || status === SelectorStatus.Required;
+  const rejected = status === SelectorStatus.Rejected;
+
+  return (
+    <View testID={testID} style={[styles.wrapper, statusStyle, style]}>
+      {(checked || rejected) && <SelectorIcon testID={concatTestID(testID, 'status', status)} status={status} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bordered: {
+    borderWidth: 1,
+  },
+  selectedRadio: {
+    borderWidth: 8,
+  },
+  wrapper: {
+    alignItems: 'center',
+    borderRadius: 12,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  },
+});
+
+export default Selector;

package/src/ui-components/detail/detail.stories.tsx

@@ -0,0 +1,65 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { Insets, StyleSheet } from 'react-native';
+
+import { Placeholder } from '../../../storybook/placeholder';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import DetailScreen, { DetailScreenProps } from './detail';
+
+type Args = DetailScreenProps & {
+  contentHeight?: number;
+  onRightAction?: () => void;
+};
+
+const hitSlop: Insets = { top: 8, bottom: 12, left: 24, right: 24 };
+
+const Basic: Story<Args> = ({ onRightAction, contentHeight, headerProps }) => {
+  return (
+    <DetailScreen
+      headerProps={{
+        ...headerProps,
+        rightButton: (
+          <TouchableOpacity onPress={onRightAction} hitSlop={hitSlop}>
+            <Placeholder id="R" style={styles.rightButton} />
+          </TouchableOpacity>
+        ),
+      }}>
+      <Placeholder id="Content" style={[contentHeight ? { height: contentHeight } : styles.content]} />
+    </DetailScreen>
+  );
+};
+
+Basic.args = {
+  headerProps: {
+    title: 'Title',
+    onBack: () => {},
+  },
+  contentHeight: 0,
+};
+
+export { Basic as DetailScreen };
+
+export default {
+  title: 'view/Detail Screen',
+  component: DetailScreen,
+  parameters: {
+    noSafeArea: true,
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=466-138689',
+    },
+  },
+  argTypes: {
+    onRightAction: { action: 'onRightAction' },
+  },
+} as ComponentMeta<typeof DetailScreen>;
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+  },
+  rightButton: {
+    height: 24,
+    width: 24,
+  },
+});

package/src/ui-components/detail/detail.tsx

@@ -0,0 +1,98 @@
+import React, { FunctionComponent, PropsWithChildren, useCallback, useState } from 'react';
+import { LayoutChangeEvent, ScrollView, ScrollViewProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { concatTestID } from '../../utils/testID';
+import { Header, HeaderProps } from '../header';
+import { useAppColorScheme } from '../theme';
+
+type StaticContentProps = {
+  staticContent: true;
+};
+
+type DynamicContentProps = {
+  staticContent?: false;
+  scrollViewProps?: ScrollViewProps;
+};
+
+export type DetailScreenProps = {
+  testID?: string;
+  headerProps: HeaderProps;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+} & (StaticContentProps | DynamicContentProps);
+
+const DetailScreen: FunctionComponent<PropsWithChildren<DetailScreenProps>> = ({
+  children,
+  staticContent,
+  contentStyle,
+  testID,
+  style,
+  headerProps,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const insets = useSafeAreaInsets();
+  const bottomPadding = Math.max(insets.bottom, 24);
+
+  const [layoutHeight, setLayoutHeight] = useState<number>(0);
+  const layoutHandler = useCallback((event: LayoutChangeEvent) => {
+    setLayoutHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+  const headerLayoutHandler = useCallback((event: LayoutChangeEvent) => {
+    setHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const contentHeight = layoutHeight && headerHeight ? layoutHeight - headerHeight - insets.top : undefined;
+
+  return (
+    <View
+      testID={testID}
+      onLayout={layoutHandler}
+      onAccessibilityEscape={() => {}}
+      style={[styles.container, { paddingTop: insets.top, backgroundColor: colorScheme.background }]}>
+      <Header onLayout={headerLayoutHandler} {...headerProps} />
+      {contentHeight ? (
+        staticContent ? (
+          <View
+            testID={concatTestID(testID, 'content')}
+            style={[styles.contentWrapper, styles.staticContent, { height: contentHeight }, style]}>
+            {children}
+          </View>
+        ) : (
+          <ScrollView
+            testID={concatTestID(testID, 'content')}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+            contentContainerStyle={{ minHeight: contentHeight }}
+            style={style}>
+            <View
+              style={[styles.contentWrapper, styles.scrollableContent, { paddingBottom: bottomPadding }, contentStyle]}>
+              {children}
+            </View>
+          </ScrollView>
+        )
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+  },
+  contentWrapper: {
+    paddingHorizontal: 24,
+    paddingTop: 20,
+  },
+  scrollableContent: {
+    flex: 1,
+  },
+  staticContent: {
+    width: '100%',
+  },
+});
+
+export default DetailScreen;

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;