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

package/src/ui-components/buttons/connectivity-button.tsx

@@ -0,0 +1,95 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableHighlight } from '../accessibility';
+import {
+  ConnectivityBluetoothOffIcon,
+  ConnectivityBluetoothOnIcon,
+  ConnectivityInternetOffIcon,
+  ConnectivityInternetOnIcon,
+  ConnectivityStatusIcon,
+} from '../icons/connectivity';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export enum ConnectivityTransport {
+  Internet = 'Internet',
+  Bluetooth = 'Bluetooth',
+  All = 'All',
+}
+
+export type ConnectivityButtonProps = {
+  available: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  status?: boolean;
+  title?: string;
+  transport: ConnectivityTransport;
+  testID?: string;
+};
+
+const ConnectivityButton: FC<ConnectivityButtonProps> = ({
+  available,
+  disabled,
+  onPress,
+  status,
+  title,
+  transport,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;
+  const opacity = disabled ? 0.7 : 1.0;
+  const icons = (
+    <View style={styles.icons}>
+      {transport !== ConnectivityTransport.Bluetooth &&
+        (available ? (
+          <ConnectivityInternetOnIcon testID={concatTestID(testID, 'icon.on')} />
+        ) : (
+          <ConnectivityInternetOffIcon testID={concatTestID(testID, 'icon.off')} />
+        ))}
+      {transport !== ConnectivityTransport.Internet &&
+        (available ? (
+          <ConnectivityBluetoothOnIcon testID={concatTestID(testID, 'icon.on')} />
+        ) : (
+          <ConnectivityBluetoothOffIcon testID={concatTestID(testID, 'icon.off')} />
+        ))}
+    </View>
+  );
+  return (
+    <TouchableHighlight onPress={onPress} style={styles.button}>
+      <View style={[styles.container, { backgroundColor, opacity }]}>
+        {icons}
+        {title && (
+          <Typography testID={concatTestID(testID, 'title')} color={colorScheme.text} preset="s">
+            {title}
+          </Typography>
+        )}
+        {status !== undefined && <ConnectivityStatusIcon status={status} />}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 20,
+    overflow: 'hidden',
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+  },
+  icons: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 5,
+  },
+});
+
+export default ConnectivityButton;

package/src/ui-components/credential/card/credential-card.stories.tsx

@@ -0,0 +1,54 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import CredentialCardBackground from '../../../../storybook/assets/CredentialCardBackground.png';
+import ColorSchemes from '../../../../storybook/colorScheme';
+import { CredentialNoticeWarningIcon, CredentialWarningIcon, RequiredAttributeIcon } from '../../icons/credential';
+import CredentialCard from './credential-card';
+
+const Basic: ComponentStory<typeof CredentialCard> = ({ ...args }) => {
+  return <CredentialCard {...args} />;
+};
+
+Basic.args = {
+  cardImage: { imageSource: CredentialCardBackground },
+  onHeaderPress: () => {},
+  color: undefined,
+  header: {
+    accessory: RequiredAttributeIcon,
+    credentialDetailPrimary: 'Primary detail',
+    credentialDetailSecondary: 'Secondary detail',
+    credentialDetailTestID: undefined,
+    credentialDetailErrorColor: false,
+    credentialName: 'Credential Name',
+    icon: undefined,
+    iconLabelColor: undefined,
+    statusIcon: CredentialWarningIcon,
+  },
+  notice: {
+    text: 'Notice related to the credential',
+    noticeIcon: CredentialNoticeWarningIcon,
+  },
+};
+
+export { Basic as CredentialCard };
+
+export default {
+  title: 'credential/card/CredentialCard',
+  component: CredentialCard,
+  argTypes: {
+    onHeaderPress: { action: 'onPress' },
+    color: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-10041&mode=design&t=0DWIGZWyWYB7JzPE-0',
+    },
+  },
+} as ComponentMeta<typeof CredentialCard>;

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

@@ -0,0 +1,189 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { ColorValue, Image, LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../../utils/testID';
+import { TouchableOpacity } from '../../accessibility/accessibilityHistoryWrappers';
+import BlurView from '../../blur/blur-view';
+import ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';
+import Typography from '../../text/typography';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+import CredentialHeader, { CredentialHeaderProps } from './credential-header';
+import CarouselComponent, { CarouselImage } from './credential-image-carousel';
+
+export const CredentialCardShadow: Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius'> =
+  {
+    shadowColor: '#10274226',
+    shadowOffset: {
+      height: 5,
+      width: 0,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 7,
+  };
+
+export const CredentialCardRatio = 18 / 11;
+
+export type CredentialCardNotice = {
+  text: string;
+  noticeIcon?: React.ComponentType<any> | React.ReactElement;
+};
+
+export type CredentialCardProps = {
+  cardCarouselImages?: CarouselImage[];
+  cardImage?: ImageOrComponentSource;
+  color?: ColorValue;
+  credentialId?: string;
+  header: CredentialHeaderProps;
+  notice?: CredentialCardNotice;
+  onCardPress?: (credentialId?: string) => void;
+  onHeaderPress?: (credentialId?: string) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+const CredentialCard: FC<CredentialCardProps> = ({
+  cardCarouselImages = [],
+  cardImage,
+  color = '#5A69F3',
+  credentialId,
+  header,
+  notice,
+  onCardPress,
+  onHeaderPress,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [tappableHeaderHeight, setTappableHeaderHeight] = useState<number>();
+  const [cardSize, setCardSize] = useState<{ height: number; width: number }>();
+
+  const onCardLayoutChange = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setCardSize({ width, height });
+  }, []);
+
+  const onHeaderLayoutChange = useCallback((event: LayoutChangeEvent) => {
+    setTappableHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const headerPressHandler = useCallback(() => {
+    onHeaderPress?.(credentialId);
+  }, [credentialId, onHeaderPress]);
+
+  const cardPressHandler = useCallback(() => {
+    onCardPress?.(credentialId);
+  }, [credentialId, onCardPress]);
+
+  const noticeIconView: React.ReactElement | undefined = useMemo(() => {
+    if (!notice?.noticeIcon) {
+      return undefined;
+    }
+    if (React.isValidElement(notice.noticeIcon)) {
+      return notice.noticeIcon;
+    } else {
+      const NoticeIconComponent = notice.noticeIcon as React.ComponentType<any>;
+      return <NoticeIconComponent />;
+    }
+  }, [notice?.noticeIcon]);
+
+  const shouldShowCarousel = cardSize?.width && cardSize.height;
+  return (
+    <View onLayout={onCardLayoutChange} style={[styles.card, style]} testID={testID}>
+      {cardImage ? (
+        'imageSource' in cardImage ? (
+          <View style={styles.cardImage}>
+            <Image testID={concatTestID(testID, 'imageSource')} source={cardImage.imageSource} style={styles.image} />
+          </View>
+        ) : (
+          <ImageOrComponent testID={concatTestID(testID, 'cardImage')} source={cardImage} style={styles.cardImage} />
+        )
+      ) : (
+        <View
+          testID={concatTestID(testID, 'cardBackgroundColor', String(color))}
+          style={[styles.cardImage, { backgroundColor: color }]}
+        />
+      )}
+      {onCardPress && <TouchableOpacity style={styles.cardButton} onPress={cardPressHandler} />}
+      {shouldShowCarousel ? (
+        <CarouselComponent
+          style={{ marginTop: tappableHeaderHeight ?? 0 }}
+          imagesToRender={cardCarouselImages ?? []}
+          carouselSize={{
+            width: cardSize.width,
+            height: cardSize.height - (tappableHeaderHeight ?? 0),
+          }}
+          testID={concatTestID(testID, 'carousel')}
+        />
+      ) : null}
+      <TouchableOpacity
+        onLayout={onHeaderLayoutChange}
+        activeOpacity={0.9}
+        disabled={!onHeaderPress}
+        onPress={headerPressHandler}
+        style={styles.header}>
+        <CredentialHeader {...header} color={header.color ?? color} testID={concatTestID(testID, 'header')} />
+      </TouchableOpacity>
+      {notice && (
+        <BlurView blurStyle="soft" style={[styles.notice]} testID={concatTestID(testID, 'notice')}>
+          {noticeIconView && <View style={styles.noticeIcon}>{noticeIconView}</View>}
+          <View style={styles.noticeTextWrapper}>
+            <Typography
+              color={colorScheme.text}
+              preset="xs/line-height-small"
+              style={styles.noticeText}
+              testID={concatTestID(testID, 'notice.text')}>
+              {notice.text}
+            </Typography>
+          </View>
+        </BlurView>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  cardButton: {
+    height: '100%',
+    position: 'absolute',
+    width: '100%',
+  },
+  cardImage: {
+    aspectRatio: CredentialCardRatio,
+    width: '100%',
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+  },
+  image: {
+    height: '100%',
+    width: '100%',
+  },
+  notice: {
+    bottom: 0,
+    columnGap: 6,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingBottom: 6,
+    paddingHorizontal: 12,
+    paddingTop: 2,
+    position: 'absolute',
+    width: '100%',
+  },
+  noticeIcon: {
+    marginTop: 4,
+  },
+  noticeText: {
+    marginVertical: 5,
+  },
+  noticeTextWrapper: {
+    flex: 1,
+  },
+});
+
+export default CredentialCard;

package/src/ui-components/credential/card/credential-details-card.stories.tsx

@@ -0,0 +1,299 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text } from 'react-native-svg';
+
+import CredentialDetailsCardBackground from '../../../../storybook/assets/CredentialCardBackground.png';
+import { Placeholder } from '../../../../storybook/placeholder';
+import { CredentialNoticeWarningIcon, CredentialWarningIcon } from '../../icons/credential';
+import Selector from '../selector';
+import { SelectorStatus } from '../selector-status';
+import CredentialDetailsCard from './credential-details-card';
+import { CarouselImageType } from './credential-image-carousel';
+
+const Basic: ComponentStory<typeof CredentialDetailsCard> = ({ ...args }) => {
+  return <CredentialDetailsCard {...args} style={style.card} />;
+};
+
+const style = StyleSheet.create({
+  card: {
+    margin: 16,
+  },
+  carouselItem: {
+    flex: 1,
+  },
+});
+
+Basic.args = {
+  attributes: [
+    {
+      attributes: [
+        {
+          id: 'attribute-1-1',
+          name: 'Attribute 1.1',
+          path: 'Attribute 1/Attribute 1.1',
+          value: 'Value 1.1',
+        },
+        {
+          attributes: [
+            {
+              id: 'attribute-1-2-1',
+              name: 'Attribute 1.2.1',
+              path: 'Attribute 1/Attribute 1.1/Attribute 1.2.1',
+              value: 'Value 1.2.1',
+            },
+            {
+              id: 'attribute-1-2-2',
+              name: 'Attribute 1.2.2',
+              path: 'Attribute 1/Attribute 1.1/Attribute 1.2.2',
+              value: 'Value 1.2.2',
+            },
+          ],
+          id: 'attribute-1-2',
+          name: 'Attribute 1.2',
+          path: 'Attribute 1/Attribute 1.2',
+        },
+      ],
+      id: 'attribute-1',
+      name: 'Attribute 1',
+      path: 'Attribute 1',
+    },
+    {
+      values: [
+        {
+          id: 'attribute-2-1',
+          name: 'Attribute 2-1',
+          path: 'Attribute 2/Attribute 2-1',
+          value: 'Value 2.1',
+          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        },
+        {
+          id: 'attribute-2-2',
+          name: 'Attribute 2-2',
+          path: 'Attribute 2/Attribute 2-2',
+          value: 'Value 2.2',
+          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        },
+        {
+          id: 'attribute-2-3',
+          name: 'Attribute 2-3',
+          path: 'Attribute 2/Attribute 2-3',
+          value: 'Value 2.3',
+          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        },
+      ],
+      id: 'attribute-2',
+      name: 'Attribute 2',
+      path: 'Attribute 2',
+    },
+    {
+      id: 'attribute-3',
+      name: 'Attribute 3',
+      path: 'Attribute 3',
+      image: {
+        uri: 'https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_1280.png',
+      },
+      rightAccessory: <Selector status={SelectorStatus.Required} />,
+    },
+    {
+      selected: true,
+      id: 'attribute-4',
+      name: 'Attribute 4',
+      path: 'Attribute 4',
+      value: 'Value 4',
+      rightAccessory: <Selector status={true ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      id: 'attribute-5',
+      name: 'Attribute 5',
+      path: 'Attribute 5',
+      image: {
+        uri: 'https://cdn.pixabay.com/photo/2016/02/17/16/09/vertical-1205295_960_720.jpg',
+      },
+      rightAccessory: <Selector status={SelectorStatus.Required} />,
+    },
+    {
+      id: 'attribute-6',
+      name: 'Attribute 6',
+      path: 'Attribute 6',
+      value: 'Value 6',
+      rightAccessory: <Selector status={false ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      selected: true,
+      id: 'attribute-7',
+      name: 'Attribute 7',
+      path: 'Attribute 7',
+      value: 'Value 7',
+      rightAccessory: <Selector status={true ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      id: 'attribute-8',
+      name: 'Attribute 8',
+      path: 'Attribute 8',
+      value: 'Value 8',
+      rightAccessory: <Selector status={false ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      values: [
+        {
+          attributes: [
+            {
+              id: 'attribute-9-1-1',
+              name: 'Attribute 9.1.1',
+              path: 'Attribute 9/0/Attribute 9.1.1',
+              value: 'Value 9.1.1',
+            },
+            {
+              id: 'attribute-9-1-2',
+              name: 'Attribute 9.1.2',
+              path: 'Attribute 9/0/Attribute 9.1.2',
+              value: 'Value 9.1.2',
+            },
+          ],
+          id: 'attribute-9-1',
+          name: 'Attribute 9-1',
+          path: 'Attribute 9/0',
+        },
+        {
+          attributes: [
+            {
+              id: 'attribute-9-2-1',
+              name: 'Attribute 9.2.1',
+              path: 'Attribute 9/1/Attribute 9.2.1',
+              value: 'Value 9.2.1',
+            },
+            {
+              id: 'attribute-9-2-2',
+              name: 'Attribute 9.2.2',
+              path: 'Attribute 9/1/Attribute 9.2.2',
+              value: 'Value 9.2.2',
+            },
+          ],
+          id: 'attribute-9-2',
+          name: 'Attribute 9-2',
+          path: 'Attribute 9/1',
+        },
+        {
+          attributes: [
+            {
+              id: 'attribute-9-3-1',
+              name: 'Attribute 9.3.1',
+              path: 'Attribute 9/2/Attribute 9.3.1',
+              value: 'Value 9.3.1',
+            },
+            {
+              id: 'attribute-9-3-2',
+              name: 'Attribute 9.3.2',
+              path: 'Attribute 9/2/Attribute 9.3.2',
+              value: 'Value 9.3.2',
+            },
+          ],
+          id: 'attribute-9-3',
+          name: 'Attribute 9-3',
+          path: 'Attribute 9/2',
+        },
+      ],
+      id: 'attribute-9',
+      name: 'Attribute 9',
+      path: 'Attribute 9',
+    },
+    {
+      values: [
+        {
+          id: 'attribute-10-1',
+          name: 'Attribute 10-1',
+          path: 'Attribute 10/Attribute 10.1',
+          image: {
+            uri: 'https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_1280.png',
+          },
+        },
+        {
+          id: 'attribute-10-2',
+          name: 'Attribute 10-2',
+          path: 'Attribute 10/Attribute 10.2',
+          image: {
+            uri: 'https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_1280.png',
+          },
+        },
+        {
+          id: 'attribute-10-3',
+          name: 'Attribute 10-3',
+          path: 'Attribute 10/Attribute 10.3',
+          image: {
+            uri: 'https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_1280.png',
+          },
+        },
+      ],
+      id: 'attribute-10',
+      name: 'Attribute 10',
+      path: 'Attribute 10',
+    },
+  ],
+  card: {
+    cardImage: { imageSource: CredentialDetailsCardBackground },
+    cardCarouselImages: [
+      {
+        type: CarouselImageType.Photo,
+        element: <Placeholder id="R" style={style.carouselItem} />,
+      },
+      {
+        type: CarouselImageType.Barcode,
+        element: <Placeholder id="R" style={style.carouselItem} />,
+      },
+      {
+        type: CarouselImageType.MRZ,
+        element: <Placeholder id="R" style={style.carouselItem} />,
+      },
+      {
+        type: CarouselImageType.QrCode,
+        element: <Placeholder id="R" style={style.carouselItem} />,
+      },
+    ],
+    color: undefined,
+    onHeaderPress: () => {},
+    header: {
+      credentialDetailPrimary: 'Primary Detail',
+      credentialDetailSecondary: 'Secondary Detail',
+      credentialDetailTestID: undefined,
+      credentialDetailErrorColor: false,
+      credentialName: 'Credential Name',
+      icon: undefined,
+      iconLabelColor: undefined,
+      statusIcon: CredentialWarningIcon,
+    },
+    notice: {
+      text: 'Notice related to the credential',
+      noticeIcon: CredentialNoticeWarningIcon,
+    },
+  },
+  showAllButtonLabel: 'See all',
+  expanded: true,
+  footer: (
+    <View
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={{
+        backgroundColor: 'lightgray',
+        padding: 12,
+      }}>
+      <Text>Footer view</Text>
+    </View>
+  ),
+  onAttributeSelected: console.log,
+};
+
+export { Basic as CredentialDetailsCard };
+
+export default {
+  title: 'credential/card/CredentialDetailsCard',
+  component: CredentialDetailsCard,
+  parameters: {
+    backgrounds: {
+      default: 'background',
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-10041&mode=design&t=0DWIGZWyWYB7JzPE-0',
+    },
+  },
+} as ComponentMeta<typeof CredentialDetailsCard>;