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

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

@@ -11,7 +11,7 @@ export interface CredentialHeaderProps extends AccessibilityProps {
   accessory?: React.ComponentType<any> | React.ReactElement;
   blur?: boolean;
   color?: ColorValue;
-  credentialDetailPrimary: string;
+  credentialDetailPrimary?: string;
   credentialDetailSecondary?: string;
   credentialDetailTestID?: string;
   credentialDetailErrorColor?: boolean;
@@ -65,6 +65,9 @@ const CredentialHeader: FC<CredentialHeaderProps> = ({
   }, [accessory]);
 
   const DetailText = useMemo(() => {
+    if (!credentialDetailPrimary) {
+      return undefined;
+    }
     const commonProps: TypographyProps = {
       color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,
       ellipsizeMode: 'tail',

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

@@ -46,6 +46,10 @@ const CarouselComponent: FC<CarouselProps> = ({ carouselSize, imagesToRender, st
         enabled={numberOfSlides >= 2}
         data={imagesToRender}
         testID={testID}
+        panGestureHandlerProps={{
+          activeOffsetX: [-10, 10],
+          failOffsetY: [-10, 10],
+        }}
         renderItem={({ item: { type, element } }) => (
           <View style={styles.carouselItem}>
             <View style={[styles[type]]}>{element}</View>

package/src/ui-components/credential/card/index.ts

@@ -1,13 +1,19 @@
-import CredentialCard, {
+import type {
   CredentialCardNotice,
   CredentialCardProps,
+} from './credential-card';
+import CredentialCard, {
   CredentialCardRatio,
   CredentialCardShadow,
 } from './credential-card';
-import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
-import CredentialDetailsCardListItem, { CredentialDetailsCardListItemProps } from './credential-details-list-item';
-import CredentialHeader, { CredentialHeaderProps } from './credential-header';
-import { CarouselImage, CarouselImageType } from './credential-image-carousel';
+import type { CredentialDetailsCardProps } from './credential-details-card';
+import CredentialDetailsCard from './credential-details-card';
+import type { CredentialDetailsCardListItemProps } from './credential-details-list-item';
+import CredentialDetailsCardListItem from './credential-details-list-item';
+import type { CredentialHeaderProps } from './credential-header';
+import CredentialHeader from './credential-header';
+import type { CarouselImage } from './credential-image-carousel';
+import { CarouselImageType } from './credential-image-carousel';
 
 export { CarouselImage, CarouselImageType };
 export { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };

package/src/ui-components/credential/index.ts

@@ -1,8 +1,9 @@
-import CredentialAttributeItem, {
+import type {
   CredentialAttribute,
   CredentialAttributeItemProps,
   CredentialAttributeValue,
 } from './credential-attribute-item';
+import CredentialAttributeItem from './credential-attribute-item';
 import { Barcode, Mrz, QrCode } from './credential-carousel-images';
 import Selector from './selector';
 import { SelectorStatus } from './selector-status';

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

@@ -1,13 +1,13 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/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 },
+const Basic: StoryObj<typeof CredentialAttributeSelector> = {
+  args: {
+    status: SelectorStatus.SelectedCheckmark,
+    style: { margin: 12 },
+  },
 };
 
 export { Basic as Selector };
@@ -34,4 +34,4 @@ export default {
       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>;
+} as Meta<typeof CredentialAttributeSelector>;

package/src/ui-components/detail/detail.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Insets, StyleSheet } from 'react-native';
 
@@ -13,7 +13,7 @@ type Args = DetailScreenProps & {
 
 const hitSlop: Insets = { top: 8, bottom: 12, left: 24, right: 24 };
 
-const Basic: Story<Args> = ({ onRightAction, contentHeight, headerProps }) => {
+const Render = ({ onRightAction, contentHeight, headerProps }: Args) => {
   return (
     <DetailScreen
       headerProps={{
@@ -29,12 +29,15 @@ const Basic: Story<Args> = ({ onRightAction, contentHeight, headerProps }) => {
   );
 };
 
-Basic.args = {
-  headerProps: {
-    title: 'Title',
-    onBack: () => {},
+const Basic: StoryObj<Args> = {
+  args: {
+    headerProps: {
+      title: 'Title',
+      onBack: () => {},
+    },
+    contentHeight: 0,
   },
-  contentHeight: 0,
+  render: Render,
 };
 
 export { Basic as DetailScreen };
@@ -52,7 +55,7 @@ export default {
   argTypes: {
     onRightAction: { action: 'onRightAction' },
   },
-} as ComponentMeta<typeof DetailScreen>;
+} as Meta<typeof DetailScreen>;
 
 const styles = StyleSheet.create({
   content: {

package/src/ui-components/entity/avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { EntityTrustedIcon } from '../icons/entity';
@@ -9,7 +9,7 @@ type Args = AvatarProps & {
   withImage: boolean;
 };
 
-const Basic: Story<Args> = ({ withStatusIcon, withImage, ...args }) => {
+const Render = ({ withStatusIcon, withImage, ...args }: Args) => {
   return (
     <Avatar
       {...args}
@@ -19,10 +19,13 @@ const Basic: Story<Args> = ({ withStatusIcon, withImage, ...args }) => {
   );
 };
 
-Basic.args = {
-  placeholderText: 'A',
-  withStatusIcon: true,
-  withImage: true,
+const Basic: StoryObj<Args> = {
+  args: {
+    placeholderText: 'A',
+    withStatusIcon: true,
+    withImage: true,
+  },
+  render: Render,
 };
 
 export { Basic as Avatar };
@@ -36,4 +39,4 @@ export default {
       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>;
+} as Meta<typeof Avatar>;

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

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { EntityTrustedIcon } from '../icons/entity';
@@ -9,7 +9,7 @@ type Args = EntityClusterProps & {
   withImage: boolean;
 };
 
-const Basic: Story<Args> = ({ withStatusIcon, withImage, ...args }) => {
+const Render = ({ withStatusIcon, withImage, ...args }: Args) => {
   return (
     <EntityCluster
       {...args}
@@ -21,11 +21,14 @@ const Basic: Story<Args> = ({ withStatusIcon, withImage, ...args }) => {
   );
 };
 
-Basic.args = {
-  entityName: 'Entity name',
-  subline: 'entity detail',
-  withStatusIcon: true,
-  withImage: true,
+const Basic: StoryObj<Args> = {
+  args: {
+    entityName: 'Entity name',
+    subline: 'entity detail',
+    withStatusIcon: true,
+    withImage: true,
+  },
+  render: Render,
 };
 
 export { Basic as EntityCluster };
@@ -39,4 +42,4 @@ export default {
       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>;
+} as Meta<typeof EntityCluster>;

package/src/ui-components/entity/entity-cluster.tsx

@@ -44,7 +44,7 @@ const EntityCluster: FunctionComponent<EntityClusterProps> = ({
         <Typography
           testID={concatTestID(testID, 'entityName')}
           color={textColor ?? colorScheme.text}
-          numberOfLines={2}
+          numberOfLines={1}
           preset="m"
           style={styles.entityName}>
           {entityName}

package/src/ui-components/header/header.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
@@ -11,7 +11,7 @@ type Args = HeaderProps & {
   withRightButton: boolean;
 };
 
-const Basic: Story<Args> = ({ onBack, withBackButton, withRightButton, ...args }) => {
+const Render = ({ onBack, withBackButton, withRightButton, ...args }: Args) => {
   return (
     <Header
       {...args}
@@ -27,10 +27,13 @@ const Basic: Story<Args> = ({ onBack, withBackButton, withRightButton, ...args }
   );
 };
 
-Basic.args = {
-  title: 'Title',
-  withBackButton: false,
-  withRightButton: true,
+const Basic: StoryObj<Args> = {
+  args: {
+    title: 'Title',
+    withBackButton: false,
+    withRightButton: true,
+  },
+  render: Render,
 };
 
 export { Basic as Header };
@@ -49,7 +52,7 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624',
     },
   },
-} as ComponentMeta<typeof Header>;
+} as Meta<typeof Header>;
 
 const styles = StyleSheet.create({
   rightButton: {

package/src/ui-components/header/index.ts

@@ -1,7 +1,10 @@
 import FocusAwareStatusBar from './focus-aware-status-bar';
-import FoldableHeader, { FoldableHeaderProps } from './foldable-header';
-import Header, { HeaderProps } from './header';
-import NavigationHeader, { NavigationHeaderProps } from './navigation-header';
+import type { FoldableHeaderProps } from './foldable-header';
+import FoldableHeader from './foldable-header';
+import type { HeaderProps } from './header';
+import Header from './header';
+import type { NavigationHeaderProps } from './navigation-header';
+import NavigationHeader from './navigation-header';
 
 export { FocusAwareStatusBar };
 export { FoldableHeader, FoldableHeaderProps };

package/src/ui-components/header/navigation-header.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
@@ -12,7 +12,7 @@ type Args = NavigationHeaderProps & {
   withRightButton: boolean;
 };
 
-const Basic: Story<Args> = ({ withBackButton, withRightButton, ...args }) => {
+const Render = ({ withBackButton, withRightButton, ...args }: Args) => {
   return (
     <NavigationHeader
       {...args}
@@ -28,11 +28,14 @@ const Basic: Story<Args> = ({ withBackButton, withRightButton, ...args }) => {
   );
 };
 
-Basic.args = {
-  title: 'Title',
-  modalHandleVisible: false,
-  withBackButton: true,
-  withRightButton: true,
+const Basic: StoryObj<Args> = {
+  args: {
+    title: 'Title',
+    modalHandleVisible: false,
+    withBackButton: true,
+    withRightButton: true,
+  },
+  render: Render,
 };
 
 export { Basic as NavigationHeader };
@@ -46,7 +49,7 @@ export default {
       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>;
+} as Meta<typeof NavigationHeader>;
 
 const styles = StyleSheet.create({
   rightButton: {

package/src/ui-components/history/data-item.tsx

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import React, { ColorValue, StyleSheet, View, ViewProps } from 'react-native';
+import React, { ComponentType, FC, ReactElement, useMemo } from 'react';
+import { ColorValue, StyleSheet, View, ViewProps } from 'react-native';
 
 import { concatTestID } from '../../utils/testID';
 import Typography from '../text/typography';
@@ -11,7 +11,7 @@ export type DataItemProps = ViewProps & {
   multiline?: boolean;
   value: string;
   valueColor?: ColorValue;
-  valueIcon?: ReactNode;
+  valueIcon?: ComponentType<any> | ReactElement;
 };
 
 const DataItem: FC<DataItemProps> = ({
@@ -27,6 +27,15 @@ const DataItem: FC<DataItemProps> = ({
 }) => {
   const colorScheme = useAppColorScheme();
 
+  const valueIconView: ReactElement | undefined = useMemo(() => {
+    if (React.isValidElement(valueIcon)) {
+      return valueIcon;
+    } else if (valueIcon) {
+      const IconComponent = valueIcon as ComponentType<any>;
+      return <IconComponent />;
+    }
+  }, [valueIcon]);
+
   return (
     <View
       style={[styles.dataItem, { borderColor: colorScheme.background }, last && styles.last, style]}
@@ -41,7 +50,7 @@ const DataItem: FC<DataItemProps> = ({
       </Typography>
 
       <View style={styles.value}>
-        {valueIcon}
+        {valueIconView}
         <Typography
           color={valueColor ?? colorScheme.text}
           numberOfLines={multiline ? undefined : 1}

package/src/ui-components/history/history-details.tsx

@@ -0,0 +1,247 @@
+import React, { ComponentType, FC, ReactElement, useEffect, useMemo } from 'react';
+import { ColorValue, ImageSourcePropType, StyleSheet, View } from 'react-native';
+
+import { CredentialDetails, CredentialDetailsProps, EntityDetails, EntityDetailsProps } from '../../components';
+import { HeaderInfoButton } from '../../components/navigation/header-buttons';
+import { CardLabels, concatTestID, useCredentialListExpandedCard } from '../../utils';
+import { TouchableOpacity } from '../accessibility';
+import { BackButton } from '../buttons';
+import {
+  CredentialDetailsCardListItem,
+  CredentialDetailsCardListItemProps,
+  CredentialHeader,
+  CredentialHeaderProps,
+} from '../credential';
+import { NextIcon } from '../icons';
+import { ScrollViewScreen } from '../screens';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import DataItem from './data-item';
+
+export type HistoryDetailsLabels = {
+  credentialCard: CardLabels;
+  data: {
+    date: string;
+    action: string;
+  };
+  infoButtonAccessibility?: string;
+  relatedAssets: string;
+  title: string;
+};
+
+type CredentialDetails = Omit<
+  CredentialDetailsProps,
+  'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'
+>;
+
+type CredentialCard = Omit<
+  CredentialDetailsCardListItemProps,
+  'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'
+>;
+
+export type HistoryDetailsViewProps = {
+  assets?: {
+    header?: CredentialHeaderProps & {
+      onPressed?: () => void;
+    };
+    cards?: (
+      | {
+          credentialDetails: CredentialDetails;
+        }
+      | {
+          credentialCard: CredentialCard;
+        }
+    )[];
+  };
+  data: {
+    header?:
+      | {
+          entity: EntityDetailsProps;
+        }
+      | {
+          credentialHeader: CredentialHeaderProps;
+        };
+    date: string;
+    action: {
+      icon: ComponentType<any> | ReactElement;
+      label: string;
+      color: ColorValue;
+      testID?: string;
+    };
+  };
+  headerButton?: ReactElement;
+  labels: HistoryDetailsLabels;
+  onBackPressed: () => void;
+  onInfoPressed?: () => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  testID: string;
+};
+
+export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
+  assets,
+  data,
+  headerButton,
+  labels,
+  onBackPressed,
+  onInfoPressed,
+  onImagePreview,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { expandedCredential, onHeaderPress, setInitialCredential } = useCredentialListExpandedCard();
+
+  // Expand the first credential
+  useEffect(() => {
+    if (assets?.cards && assets.cards.length > 0) {
+      let id =
+        'credentialDetails' in assets.cards[0]
+          ? assets.cards[0].credentialDetails.credentialId
+          : assets.cards[0].credentialCard.card.credentialId;
+      if (id) {
+        setInitialCredential(id);
+      }
+    }
+  }, [assets?.cards, setInitialCredential]);
+
+  const moreInfoHeaderButton = useMemo(() => {
+    if (headerButton) {
+      return headerButton;
+    }
+
+    if (!onInfoPressed) {
+      return undefined;
+    }
+
+    return (
+      <HeaderInfoButton
+        onPress={onInfoPressed}
+        testID={concatTestID(testID, 'header', 'info')}
+        accessibilityLabel={labels.infoButtonAccessibility ?? ''}
+      />
+    );
+  }, [headerButton, labels.infoButtonAccessibility, onInfoPressed, testID]);
+
+  const hasAssets = assets && (assets.header || assets.cards?.length);
+
+  return (
+    <ScrollViewScreen
+      header={{
+        leftItem: <BackButton onPress={onBackPressed} testID={concatTestID(testID, 'header', 'back')} />,
+        rightItem: moreInfoHeaderButton,
+        static: true,
+        title: labels.title,
+      }}
+      scrollView={{
+        style: styles.content,
+      }}
+      testID={testID}>
+      <View style={[styles.section, { backgroundColor: colorScheme.white }]}>
+        {data.header && 'entity' in data.header && (
+          <EntityDetails
+            {...data.header.entity}
+            style={[styles.entity, { borderColor: colorScheme.background }, data.header.entity.style]}
+          />
+        )}
+        {data.header && 'credentialHeader' in data.header && (
+          <CredentialHeader
+            {...data.header.credentialHeader}
+            blur={false}
+            style={[styles.header, { borderColor: colorScheme.background }, data.header.credentialHeader.style]}
+          />
+        )}
+        <DataItem attribute={labels.data.date} value={data.date} />
+        <DataItem
+          attribute={labels.data.action}
+          last
+          testID={data.action.testID}
+          value={data.action.label}
+          valueColor={data.action.color}
+          valueIcon={data.action.icon}
+        />
+      </View>
+
+      {hasAssets && (
+        <Typography color={colorScheme.text} preset="m" style={styles.sectionHeader}>
+          {labels.relatedAssets}
+        </Typography>
+      )}
+
+      {assets?.header && (
+        <TouchableOpacity disabled={!assets.header.onPressed} onPress={assets.header.onPressed}>
+          <CredentialHeader
+            {...assets.header}
+            accessory={assets.header.onPressed ? <NextIcon color={colorScheme.text} /> : undefined}
+            blur={false}
+            style={[styles.assetsHeader, assets.header.style]}
+          />
+        </TouchableOpacity>
+      )}
+      {assets?.cards?.map((props, index, { length }) => {
+        if ('credentialDetails' in props) {
+          return (
+            <View key={props.credentialDetails.credentialId} style={styles.credential}>
+              <CredentialDetails
+                {...props.credentialDetails}
+                expanded={expandedCredential === props.credentialDetails.credentialId}
+                labels={labels.credentialCard}
+                lastItem={index === length - 1}
+                onHeaderPress={onHeaderPress}
+                onImagePreview={onImagePreview}
+              />
+            </View>
+          );
+        } else {
+          const itemProps = {
+            ...props.credentialCard,
+            card: {
+              ...props.credentialCard.card,
+              onHeaderPress,
+            },
+          };
+          return (
+            <View key={index.toString()} style={styles.credential}>
+              <CredentialDetailsCardListItem
+                {...itemProps}
+                expanded={expandedCredential === props.credentialCard.card.credentialId}
+                lastItem={index === length - 1}
+                onImagePreview={onImagePreview}
+              />
+            </View>
+          );
+        }
+      })}
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  assetsHeader: {
+    borderRadius: 8,
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  credential: {
+    marginBottom: 4,
+  },
+  entity: {
+    borderBottomWidth: 1,
+    paddingBottom: 8,
+  },
+  header: {
+    borderBottomWidth: 1,
+    marginTop: -8,
+    paddingBottom: 12,
+    paddingHorizontal: 0,
+  },
+  section: {
+    borderRadius: 8,
+    marginBottom: 12,
+    padding: 12,
+  },
+  sectionHeader: {
+    marginHorizontal: 4,
+    marginVertical: 16,
+  },
+});