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

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

@@ -1,372 +0,0 @@
-import React, { ComponentType, FC, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
-import { Image, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import { TouchableHighlight, TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { colorWithAlphaComponent } from '../utils/color';
-import { concatTestID } from '../utils/testID';
-
-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;
-  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/credential/selector.tsx

@@ -1,64 +0,0 @@
-import React, { FC, useMemo } from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import { SelectorIcon } from '../icons/selector';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils/testID';
-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/detail/detail.stories.tsx

@@ -1,65 +0,0 @@
-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/detail/detail.tsx

@@ -1,98 +0,0 @@
-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 { Header, HeaderProps } from '../header';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils/testID';
-
-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/entity/avatar.tsx

@@ -1,87 +0,0 @@
-import React, { ComponentType, FunctionComponent, ReactElement, useMemo } from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
-
-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;
-};
-
-// 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, ...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]);
-
-  return (
-    <View accessibilityElementsHidden={true} style={[styles.avatar, style]} {...viewProps}>
-      <View style={styles.imageWrapper}>
-        <ImageOrComponent source={imageSource} style={styles.image} />
-      </View>
-      {statusIconView && <View style={styles.statusIcon}>{statusIconView}</View>}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  avatar: {
-    height: 72,
-    width: 72,
-  },
-  avatarPlaceholder: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  avatarPlaceholderText: {
-    textTransform: 'uppercase',
-  },
-  image: {
-    backgroundColor: 'orange',
-    height: '100%',
-    width: '100%',
-  },
-  imageWrapper: {
-    borderRadius: 36,
-    height: '100%',
-    overflow: 'hidden',
-    width: '100%',
-  },
-  statusIcon: {
-    bottom: 4,
-    position: 'absolute',
-    right: 4,
-  },
-});
-
-export default Avatar;