@procivis/one-react-native-components 0.1.63

package/src/credential/credential-carousel-images.tsx

@@ -0,0 +1,90 @@
+import { barcode } from 'pure-svg-code';
+import QRCode from 'qrcode-svg';
+import React, { FC, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+const styles = StyleSheet.create({
+  barcodeBackground: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 5,
+  },
+  barcodeContent: {
+    margin: 12,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  mrzBackground: {
+    backgroundColor: 'white',
+    paddingHorizontal: 12,
+  },
+});
+
+type BarcodeProps = {
+  content: string;
+  height?: number;
+  testID?: string;
+  width?: number;
+};
+
+export const Barcode: FC<BarcodeProps> = ({ content, width = 220, height = 80, testID }) => {
+  const colorScheme = useAppColorScheme();
+  const barcodeXml = useMemo(
+    () =>
+      barcode(content, 'code128', {
+        barHeight: height,
+        bgColor: colorScheme.white,
+        width: width,
+      }),
+    [content, colorScheme, height, width],
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.barcodeBackground}>
+        <SvgXml
+          height={height}
+          style={[styles.barcodeBackground, styles.barcodeContent]}
+          testID={testID}
+          width={width}
+          xml={barcodeXml}
+        />
+      </View>
+    </View>
+  );
+};
+
+type QrCodeProps = {
+  content: string;
+  padding?: number;
+  testID?: string;
+};
+
+export const QrCode: FC<QrCodeProps> = ({ content, padding, testID }) => {
+  const qrCodeXml = useMemo(() => {
+    return new QRCode({
+      container: 'svg-viewbox',
+      content,
+      join: true,
+      padding: padding ?? 1,
+    }).svg();
+  }, [content, padding]);
+  return <SvgXml height={'100%'} testID={testID} width={'100%'} xml={qrCodeXml} />;
+};
+
+export const Mrz: FC<{ content: string; testID?: string }> = ({ content, testID }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.container, styles.mrzBackground]}>
+      <Typography color={colorScheme.text} preset={'s/code'} testID={testID}>
+        {content}
+      </Typography>
+    </View>
+  );
+};

package/src/credential/index.ts

@@ -0,0 +1,13 @@
+import CredentialAttributeItem, {
+  CredentialAttribute,
+  CredentialAttributeItemProps,
+  CredentialAttributeValue,
+} from './credential-attribute-item';
+import { Barcode, Mrz, QrCode } from './credential-carousel-images';
+import Selector from './selector';
+import { SelectorStatus } from './selector-status';
+
+export { CredentialAttribute, CredentialAttributeItem, CredentialAttributeItemProps, CredentialAttributeValue };
+export { Barcode, Mrz, QrCode };
+export { Selector, SelectorStatus };
+export * from './card';

package/src/credential/selector-status.ts

@@ -0,0 +1,8 @@
+export enum SelectorStatus {
+  Disabled = 'disabled',
+  Empty = 'empty',
+  Rejected = 'rejected',
+  Required = 'required',
+  SelectedCheckmark = 'selectedCheckmark',
+  SelectedRadio = 'selectedRadio',
+}

package/src/credential/selector.stories.tsx

@@ -0,0 +1,37 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import CredentialAttributeSelector from './selector';
+import { SelectorStatus } from './selector-status';
+
+const Basic: ComponentStory<typeof CredentialAttributeSelector> = (args) => <CredentialAttributeSelector {...args} />;
+Basic.args = {
+  status: SelectorStatus.SelectedCheckmark,
+  style: { margin: 12 },
+};
+
+export { Basic as Selector };
+
+export default {
+  title: 'credential/Selector',
+  component: CredentialAttributeSelector,
+  argTypes: {
+    status: {
+      options: [
+        SelectorStatus.Empty,
+        SelectorStatus.SelectedRadio,
+        SelectorStatus.SelectedCheckmark,
+        SelectorStatus.Required,
+        SelectorStatus.Disabled,
+        SelectorStatus.Rejected,
+      ],
+      control: { type: 'radio' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=433-28352&mode=design&t=91K8am4RSNRB8qgZ-0',
+    },
+  },
+} as ComponentMeta<typeof CredentialAttributeSelector>;

package/src/credential/selector.tsx

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

@@ -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/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 { 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/detail/index.tsx

@@ -0,0 +1,3 @@
+import DetailScreen from './detail';
+
+export { DetailScreen };

package/src/entity/avatar.stories.tsx

@@ -0,0 +1,39 @@
+import type { ComponentMeta, Story } 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 Basic: Story<Args> = ({ withStatusIcon, withImage, ...args }) => {
+  return (
+    <Avatar
+      {...args}
+      avatar={withImage ? { imageSource: { uri: 'https://i.pravatar.cc/72' } } : undefined}
+      statusIcon={withStatusIcon ? EntityTrustedIcon : undefined}
+    />
+  );
+};
+
+Basic.args = {
+  placeholderText: 'A',
+  withStatusIcon: true,
+  withImage: true,
+};
+
+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 ComponentMeta<typeof Avatar>;

package/src/entity/avatar.tsx

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

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

@@ -0,0 +1,42 @@
+import type { ComponentMeta, Story } 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 Basic: Story<Args> = ({ withStatusIcon, withImage, ...args }) => {
+  return (
+    <EntityCluster
+      {...args}
+      avatar={{
+        avatar: withImage ? { imageSource: { uri: 'https://i.pravatar.cc/72' } } : undefined,
+        statusIcon: withStatusIcon ? EntityTrustedIcon : undefined,
+      }}
+    />
+  );
+};
+
+Basic.args = {
+  entityName: 'Entity name',
+  subline: 'entity detail',
+  withStatusIcon: true,
+  withImage: true,
+};
+
+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 ComponentMeta<typeof EntityCluster>;

package/src/entity/entity-cluster.tsx

@@ -0,0 +1,72 @@
+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/entity/index.ts

@@ -0,0 +1,5 @@
+import Avatar, { AvatarProps } from './avatar';
+import EntityCluster, { EntityClusterProps } from './entity-cluster';
+
+export { Avatar, AvatarProps };
+export { EntityCluster, EntityClusterProps };

package/src/header/focus-aware-status-bar.tsx

@@ -0,0 +1,10 @@
+import { useIsFocused } from '@react-navigation/native';
+import React, { FunctionComponent } from 'react';
+import { StatusBar, StatusBarProps } from 'react-native';
+
+const FocusAwareStatusBar: FunctionComponent<StatusBarProps> = (props) => {
+  const isFocused = useIsFocused();
+  return isFocused ? <StatusBar animated={true} {...props} /> : null;
+};
+
+export default FocusAwareStatusBar;