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

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/history/history-section-list-item.tsx

@@ -1,41 +0,0 @@
-import React, { FC } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import HistoryListItem, { HistoryListItemProps } from './history-list-item';
-
-// 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
-
-export interface HistorySectionListItemProps extends HistoryListItemProps {
-  first?: boolean;
-}
-
-const HistorySectionListItem: FC<HistorySectionListItemProps> = ({ first, last, ...props }) => {
-  const colorScheme = useAppColorScheme();
-  return (
-    <View style={[styles.item, first && styles.first, last && styles.last, { backgroundColor: colorScheme.white }]}>
-      <HistoryListItem last={last} {...props} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  first: {
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    marginTop: 8,
-    paddingTop: 12,
-  },
-  item: {
-    paddingHorizontal: 12,
-  },
-  last: {
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-    marginBottom: 12,
-    paddingBottom: 12,
-  },
-});
-
-export default HistorySectionListItem;

package/src/history/index.ts

@@ -1,9 +0,0 @@
-import DataItem, { DataItemProps } from './data-item';
-import HistoryListItem, { HistoryListItemProps } from './history-list-item';
-import HistorySectionHeader from './history-section-header';
-import HistorySectionListItem, { HistorySectionListItemProps } from './history-section-list-item';
-
-export { DataItem, DataItemProps };
-export { HistoryListItem, HistoryListItemProps };
-export { HistorySectionHeader };
-export { HistorySectionListItem, HistorySectionListItemProps };

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>
-  );
-};