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

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

@@ -1,20 +1,15 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Text } from 'react-native-svg';
+import { StyleSheet, Text, View } from 'react-native';
 
 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 CredentialDetailsCard, { CredentialDetailsCardProps } 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,
@@ -22,264 +17,269 @@ const style = StyleSheet.create({
   carouselItem: {
     flex: 1,
   },
+  footer: {
+    backgroundColor: 'lightgray',
+    padding: 12,
+  },
 });
 
-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} />,
+const Render = ({ ...args }: CredentialDetailsCardProps) => {
+  return <CredentialDetailsCard {...args} style={style.card} />;
+};
+
+const Basic: StoryObj<typeof CredentialDetailsCard> = {
+  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',
         },
-        {
-          id: 'attribute-2-3',
-          name: 'Attribute 2-3',
-          path: 'Attribute 2/Attribute 2-3',
-          value: 'Value 2.3',
-          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        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',
         },
-      ],
-      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} />,
       },
-      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',
+      {
+        id: 'attribute-6',
+        name: 'Attribute 6',
+        path: 'Attribute 6',
+        value: 'Value 6',
+        rightAccessory: <Selector status={false ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
       },
-      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',
+      {
+        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-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-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-9-2-2',
-              name: 'Attribute 9.2.2',
-              path: 'Attribute 9/1/Attribute 9.2.2',
-              value: 'Value 9.2.2',
+          },
+          {
+            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-9-2',
-          name: 'Attribute 9-2',
-          path: 'Attribute 9/1',
-        },
+          },
+        ],
+        id: 'attribute-10',
+        name: 'Attribute 10',
+        path: 'Attribute 10',
+      },
+    ],
+    card: {
+      cardImage: { imageSource: CredentialDetailsCardBackground },
+      cardCarouselImages: [
         {
-          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',
+          type: CarouselImageType.Photo,
+          element: <Placeholder id="R" style={style.carouselItem} />,
         },
-      ],
-      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',
-          },
+          type: CarouselImageType.Barcode,
+          element: <Placeholder id="R" style={style.carouselItem} />,
         },
         {
-          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',
-          },
+          type: CarouselImageType.MRZ,
+          element: <Placeholder id="R" style={style.carouselItem} />,
         },
         {
-          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',
-          },
+          type: CarouselImageType.QrCode,
+          element: <Placeholder id="R" style={style.carouselItem} />,
         },
       ],
-      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} />,
+      color: undefined,
+      onHeaderPress: () => {},
+      header: {
+        credentialDetailPrimary: 'Primary Detail',
+        credentialDetailSecondary: 'Secondary Detail',
+        credentialDetailTestID: undefined,
+        credentialDetailErrorColor: false,
+        credentialName: 'Credential Name',
+        icon: undefined,
+        iconLabelColor: undefined,
+        statusIcon: CredentialWarningIcon,
       },
-      {
-        type: CarouselImageType.QrCode,
-        element: <Placeholder id="R" style={style.carouselItem} />,
+      notice: {
+        text: 'Notice related to the credential',
+        noticeIcon: CredentialNoticeWarningIcon,
       },
-    ],
-    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 style={style.footer}>
+        <Text>Footer view</Text>
+      </View>
+    ),
   },
-  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,
+  render: Render,
 };
 
 export { Basic as CredentialDetailsCard };
@@ -287,6 +287,10 @@ export { Basic as CredentialDetailsCard };
 export default {
   title: 'credential/card/CredentialDetailsCard',
   component: CredentialDetailsCard,
+  argTypes: {
+    onImagePreview: { action: 'onImagePreview' },
+    onAttributeSelected: { action: 'onAttributeSelected' },
+  },
   parameters: {
     backgrounds: {
       default: 'background',
@@ -296,4 +300,4 @@ export default {
       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>;
+} as Meta<typeof CredentialDetailsCard>;

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

@@ -78,7 +78,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
 
     const additionalAttributesHeight = fullAttributesHeight ?? 0;
     const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
-    const newHeight = expanded ? previewAttributesHeight + additionalHeight : 0;
+    const newHeight = expanded || !animate ? previewAttributesHeight + additionalHeight : 0;
 
     if (currentHeight.value === undefined || !animate) {
       currentHeight.value = newHeight;
@@ -117,7 +117,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     return {
       height: currentHeight.value,
     };
-  });
+  }, [expanded, currentHeight]);
 
   const onPreviewAttrContentLayout = useCallback((event: LayoutChangeEvent) => {
     setPreviewAttributesHeight(event.nativeEvent.layout.height);

package/src/ui-components/credential/card/credential-details-list-item.tsx

@@ -17,6 +17,7 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
   style,
   ...props
 }) => {
+  const [cardWidth, setCardWidth] = useState<number>();
   const [minHeight, setMinHeight] = useState<number>();
   const [detailsCardHeight, setDetailsCardHeight] = useState<number>();
 
@@ -36,7 +37,7 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
     });
   }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);
 
-  const cardWrapperStyle = useAnimatedStyle(() => {
+  const animatedCardWrapperStyle = useAnimatedStyle(() => {
     if (cardListItemHeight.value !== undefined) {
       return {
         height: cardListItemHeight.value,
@@ -48,11 +49,16 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
     return {
       height: 60,
     };
-  });
+  }, [cardListItemHeight, lastItem, expanded]);
+
+  const cardWrapperStyle: ViewStyle = {
+    minHeight: cardWidth ? cardWidth / CredentialCardRatio : undefined,
+  }
 
   const onContentLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const { width, height } = event.nativeEvent.layout;
+      setCardWidth(width);
       if (!minHeight) {
         setMinHeight(lastItem ? width / CredentialCardRatio : 60);
       }
@@ -63,8 +69,8 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
   );
 
   return (
-    <Animated.View style={[cardWrapperStyle, style]}>
-      <View style={styles.cardWrapper}>
+    <Animated.View style={[styles.animatedWrapper, animatedCardWrapperStyle, style]}>
+      <View style={[styles.cardWrapper, cardWrapperStyle]}>
         <CredentialDetailsCard
           animate={false}
           expanded={expanded}
@@ -78,9 +84,13 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
 };
 
 const styles = StyleSheet.create({
-  cardWrapper: {
+  animatedWrapper: {
     ...CredentialCardShadow,
-    overflow: 'visible',
+  },
+  cardWrapper: {
+    borderRadius: 10,
+    height: '100%',
+    overflow: 'hidden',
   },
 });
 

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

@@ -1,26 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import ColorSchemes from '../../../../storybook/colorScheme';
 import { CredentialWarningIcon, RequiredAttributeIcon } from '../../icons/credential';
 import CredentialHeader from './credential-header';
 
-const Basic: ComponentStory<typeof CredentialHeader> = ({ ...args }) => {
-  return <CredentialHeader {...args} />;
+const Basic: StoryObj<typeof CredentialHeader> = {
+  args: {
+    accessory: RequiredAttributeIcon,
+    color: undefined,
+    credentialDetailPrimary: 'Primary detail',
+    credentialDetailSecondary: 'Secondary detail',
+    credentialDetailTestID: undefined,
+    credentialDetailErrorColor: false,
+    credentialName: 'Credential Name',
+    icon: undefined,
+    iconLabelColor: undefined,
+    statusIcon: CredentialWarningIcon,
+  },
 };
 
-Basic.args = {
-  accessory: RequiredAttributeIcon,
-  color: undefined,
-  credentialDetailPrimary: 'Primary detail',
-  credentialDetailSecondary: 'Secondary detail',
-  credentialDetailTestID: undefined,
-  credentialDetailErrorColor: false,
-  credentialName: 'Credential Name',
-  icon: undefined,
-  iconLabelColor: undefined,
-  statusIcon: CredentialWarningIcon,
-};
 
 export { Basic as CredentialHeader };
 
@@ -47,4 +45,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=401-1898&mode=design&t=0DWIGZWyWYB7JzPE-0',
     },
   },
-} as ComponentMeta<typeof CredentialHeader>;
+} as Meta<typeof CredentialHeader>;