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

package/src/entity/entity-cluster.tsx

@@ -1,72 +0,0 @@
-import React, { FunctionComponent, useMemo } from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
-
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { concatTestID } from '../utils';
-import Avatar, { AvatarProps } from './avatar';
-
-export type EntityClusterProps = ViewProps & {
-  avatar?: AvatarProps;
-  entityName: string;
-  subline?: string;
-  textColor?: 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,
-  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 {...avatarProps} />
-      <View style={styles.labels}>
-        <Typography
-          testID={concatTestID(testID, 'entityName')}
-          color={textColor ?? colorScheme.text}
-          numberOfLines={2}
-          preset="m">
-          {entityName}
-        </Typography>
-        {subline && (
-          <View>
-            <Typography testID={concatTestID(testID, 'subline')} color={textColor ?? colorScheme.text} preset="xs">
-              {subline}
-            </Typography>
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  entity: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  labels: {
-    flex: 1,
-    marginLeft: 12,
-  },
-});
-
-export default EntityCluster;

package/src/header/header.stories.tsx

@@ -1,59 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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/navigation-header.stories.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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;

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

@@ -1,44 +0,0 @@
-import React, { FC } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { concatTestID } from '../utils/testID';
-
-// 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;

package/src/icons/entity.tsx

@@ -1,21 +0,0 @@
-import React, { FC } from 'react';
-import Svg, { Path, SvgProps } from 'react-native-svg';
-
-import { useAppColorScheme } from '../theme/color-scheme-context';
-
-// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-5402&mode=design&t=YI1oD2BfBie5HcvJ-0
-export const EntityTrustedIcon: FC<SvgProps> = ({ ...props }) => {
-  const colorScheme = useAppColorScheme();
-  return (
-    <Svg width={16} height={19} viewBox="0 0 16 19" fill="none" {...props}>
-      <Path
-        d="M9.265 1.255a4 4 0 00-2.53 0l-3 1A4 4 0 001 6.05v4.117a7 7 0 007 7 7 7 0 007-7V6.05a4 4 0 00-2.735-3.795l-3-1z"
-        fill={colorScheme.success}
-      />
-      <Path
-        d="M9.265 1.255l-.316.949.316-.949zm-2.53 0l.316.949-.316-.949zm-3 1l-.316-.949.316.949zm8.53 0l.316-.949-.316.949zM9.58.306a5 5 0 00-3.162 0l.632 1.898a3 3 0 011.898 0L9.58.306zm-3.162 0l-3 1 .632 1.898 3-1L6.42.306zm-3 1A5 5 0 000 6.05h2a3 3 0 012.051-2.846L3.42 1.306zM0 6.05v4.117h2V6.05H0zm0 4.117a8 8 0 008 8v-2a6 6 0 01-6-6H0zm8 8a8 8 0 008-8h-2a6 6 0 01-6 6v2zm8-8V6.05h-2v4.117h2zm0-4.117a5 5 0 00-3.419-4.744l-.632 1.898A3 3 0 0114 6.05h2zm-3.419-4.744l-3-1-.632 1.898 3 1 .632-1.898zM6.914 12.383c.156 0 .3-.037.43-.11a1.06 1.06 0 00.343-.32l3.649-5.64c.057-.089.104-.183.14-.282a.761.761 0 00.063-.297.652.652 0 00-.25-.53.839.839 0 00-.555-.204c-.276 0-.507.148-.695.445l-3.148 5.032-1.446-1.813a.98.98 0 00-.312-.273.717.717 0 00-.352-.086.742.742 0 00-.554.234.754.754 0 00-.227.555c0 .104.018.205.055.304.041.094.099.19.172.29l1.882 2.265c.115.146.237.255.368.328.13.068.276.102.437.102z"
-        fill={colorScheme.white}
-      />
-    </Svg>
-  );
-};