@procivis/one-react-native-components 0.1.63

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

@@ -0,0 +1,268 @@
+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',
+          value: 'Value 1.1',
+        },
+        {
+          attributes: [
+            {
+              id: 'attribute-1-2-1',
+              name: 'Attribute 1.2.1',
+              value: 'Value 1.2.1',
+            },
+            {
+              id: 'attribute-1-2-2',
+              name: 'Attribute 1.2.2',
+              value: 'Value 1.2.2',
+            },
+          ],
+          id: 'attribute-1-2',
+          name: 'Attribute 1.2',
+        },
+      ],
+      id: 'attribute-1',
+      name: 'Attribute 1',
+    },
+    {
+      values: [
+        {
+          id: 'attribute-2-1',
+          name: 'Attribute 2-1',
+          value: 'Value 2.1',
+          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        },
+        {
+          id: 'attribute-2-2',
+          name: 'Attribute 2-2',
+          value: 'Value 2.2',
+          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        },
+        {
+          id: 'attribute-2-3',
+          name: 'Attribute 2-3',
+          value: 'Value 2.3',
+          rightAccessory: <Selector status={SelectorStatus.Required} />,
+        },
+      ],
+      id: 'attribute-2',
+      name: 'Attribute 2',
+    },
+    {
+      id: 'attribute-3',
+      name: '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',
+      value: 'Value 4',
+      rightAccessory: <Selector status={true ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      id: 'attribute-5',
+      name: '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',
+      value: 'Value 6',
+      rightAccessory: <Selector status={false ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      selected: true,
+      id: 'attribute-7',
+      name: 'Attribute 7',
+      value: 'Value 7',
+      rightAccessory: <Selector status={true ? SelectorStatus.SelectedCheckmark : SelectorStatus.Empty} />,
+    },
+    {
+      id: 'attribute-8',
+      name: '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',
+              value: 'Value 9.1.1',
+            },
+            {
+              id: 'attribute-9-1-2',
+              name: 'Attribute 9.1.2',
+              value: 'Value 9.1.2',
+            },
+          ],
+          id: 'attribute-9-1',
+          name: 'Attribute 9-1',
+        },
+        {
+          attributes: [
+            {
+              id: 'attribute-9-2-1',
+              name: 'Attribute 9.2.1',
+              value: 'Value 9.2.1',
+            },
+            {
+              id: 'attribute-9-2-2',
+              name: 'Attribute 9.2.2',
+              value: 'Value 9.2.2',
+            },
+          ],
+          id: 'attribute-9-2',
+          name: 'Attribute 9-2',
+        },
+        {
+          attributes: [
+            {
+              id: 'attribute-9-3-1',
+              name: 'Attribute 9.3.1',
+              value: 'Value 9.3.1',
+            },
+            {
+              id: 'attribute-9-3-2',
+              name: 'Attribute 9.3.2',
+              value: 'Value 9.3.2',
+            },
+          ],
+          id: 'attribute-9-3',
+          name: 'Attribute 9-3',
+        },
+      ],
+      id: 'attribute-9',
+      name: 'Attribute 9',
+    },
+    {
+      values: [
+        {
+          id: 'attribute-10-1',
+          name: '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',
+          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',
+          image: {
+            uri: 'https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_1280.png',
+          },
+        },
+      ],
+      id: 'attribute-10',
+      name: '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: '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>;

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

@@ -0,0 +1,242 @@
+import React, { ComponentType, FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { ImageSourcePropType, LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { Button, ButtonType } from '../../buttons';
+import { DownIcon, UpIcon } from '../../icons/credential';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+import { concatTestID } from '../../utils/testID';
+import CredentialAttributeItem, { CredentialAttribute } from '../credential-attribute-item';
+import CredentialCard, { CredentialCardProps } from './credential-card';
+
+export type CredentialDetailsCardProps = ViewProps & {
+  animate?: boolean;
+  attributes: CredentialAttribute[] | false;
+  card: CredentialCardProps;
+  expanded?: boolean;
+  footer?: ComponentType<any> | ReactElement;
+  onImagePreview?: (name: string, image: ImageSourcePropType) => void;
+  onAttributeSelected?: (id: string, selected: boolean) => void;
+  showAllButtonLabel?: string;
+};
+
+const PREVIEW_ATTRIBUTES_COUNT = 3;
+
+const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
+  animate = true,
+  attributes,
+  card,
+  expanded,
+  footer,
+  onImagePreview,
+  onAttributeSelected,
+  style,
+  testID,
+  showAllButtonLabel,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [previewAttributesHeight, setPreviewAttributesHeight] = useState<number>();
+  const [fullAttributesHeight, setFullAttributesHeight] = useState<number>();
+  const [buttonViewHeight, setButtonViewHeight] = useState<number>();
+
+  const [allAttributesRendered, setAllAttributesRendered] = useState<boolean>(
+    (attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT) || !showAllButtonLabel,
+  );
+
+  const CaretIcon = expanded ? UpIcon : DownIcon;
+
+  const currentHeight = useSharedValue<number | undefined>(undefined);
+
+  const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
+  const extraAttributes = useMemo(() => (attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : []), [attributes]);
+
+  useEffect(() => {
+    if (!extraAttributes || allAttributesRendered) {
+      setButtonViewHeight(0);
+    }
+  }, [extraAttributes, allAttributesRendered]);
+
+  useEffect(() => {
+    if (extraAttributes.length === 0) {
+      const viewStyle = StyleSheet.flatten([
+        styles.allAttributesWrapper,
+        footer && styles.allAttributesWrapperWithFooter,
+      ]);
+      const padding = viewStyle.paddingBottom;
+      setFullAttributesHeight(padding);
+    }
+  }, [extraAttributes, footer]);
+
+  useEffect(() => {
+    if (previewAttributesHeight === undefined || buttonViewHeight === undefined) {
+      return;
+    }
+    if (allAttributesRendered && fullAttributesHeight === undefined) {
+      return;
+    }
+
+    const additionalAttributesHeight = fullAttributesHeight ?? 0;
+    const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
+    const newHeight = expanded ? previewAttributesHeight + additionalHeight : 0;
+
+    if (currentHeight.value === undefined || !animate) {
+      currentHeight.value = newHeight;
+      return;
+    }
+
+    const duration = !expanded
+      ? 250
+      : allAttributesRendered
+      ? previewAttributes.length * 50
+      : extraAttributes.length * 50;
+    currentHeight.value = withTiming(newHeight, {
+      duration,
+    });
+  }, [
+    allAttributesRendered,
+    buttonViewHeight,
+    currentHeight,
+    animate,
+    expanded,
+    extraAttributes.length,
+    fullAttributesHeight,
+    previewAttributes.length,
+    previewAttributesHeight,
+  ]);
+
+  const credentialAttributesStyle = useAnimatedStyle(() => {
+    if (currentHeight.value === undefined) {
+      if (expanded) {
+        return {};
+      }
+      return {
+        height: 0,
+      };
+    }
+    return {
+      height: currentHeight.value,
+    };
+  });
+
+  const onPreviewAttrContentLayout = useCallback((event: LayoutChangeEvent) => {
+    setPreviewAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const onFullAttrContentLayout = useCallback((event: LayoutChangeEvent) => {
+    setFullAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const onButtonViewLayout = useCallback((event: LayoutChangeEvent) => {
+    setButtonViewHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  const footerView: ReactElement | undefined = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if (React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer as React.ComponentType<any>;
+      return <FooterComponent />;
+    }
+  }, [footer]);
+
+  const { header, ...cardProps } = card;
+
+  const renderExtraAttributes =
+    allAttributesRendered || (previewAttributesHeight !== undefined && currentHeight.value !== undefined);
+  return (
+    <View style={[styles.detailsCard, { backgroundColor: colorScheme.white }, style]} testID={testID} {...viewProps}>
+      <View testID={concatTestID(testID, expanded ? 'expanded' : 'collapsed')}>
+        <CredentialCard
+          {...cardProps}
+          header={{ ...header, accessory: header.accessory ?? CaretIcon }}
+          style={[styles.card, cardProps.style]}
+          testID={concatTestID(testID, 'card')}
+        />
+        {previewAttributes.length > 0 && (
+          <Animated.View style={[styles.attributesAnimatedWrapper, credentialAttributesStyle]}>
+            <View style={styles.attributesWrapper}>
+              <View onLayout={onPreviewAttrContentLayout} style={styles.previewAttributesWrapper}>
+                {previewAttributes.map((attribute, idx) => (
+                  <CredentialAttributeItem
+                    key={attribute.id}
+                    last={!footerView && !extraAttributes.length && idx === previewAttributes.length - 1}
+                    testID={concatTestID(testID, 'attribute', attribute.id)}
+                    onImagePreview={onImagePreview}
+                    onPress={onAttributeSelected}
+                    {...attribute}
+                  />
+                ))}
+              </View>
+              {!allAttributesRendered && extraAttributes.length > 0 && (
+                <View style={styles.allAttributesWrapper} onLayout={onButtonViewLayout}>
+                  <Button
+                    onPress={() => setAllAttributesRendered(true)}
+                    type={ButtonType.Secondary}
+                    testID={concatTestID(testID, 'showAllAttributesButton')}
+                    title={showAllButtonLabel!}
+                  />
+                </View>
+              )}
+              {renderExtraAttributes && (
+                <View
+                  style={[styles.allAttributesWrapper, footerView && styles.allAttributesWrapperWithFooter]}
+                  onLayout={onFullAttrContentLayout}>
+                  {extraAttributes.map((attribute, index, { length }) => (
+                    <CredentialAttributeItem
+                      key={attribute.id}
+                      last={!footerView && index === length - 1}
+                      testID={concatTestID(testID, 'attribute', attribute.id)}
+                      onImagePreview={onImagePreview}
+                      onPress={onAttributeSelected}
+                      {...attribute}
+                    />
+                  ))}
+                </View>
+              )}
+            </View>
+          </Animated.View>
+        )}
+        {footerView ? <View style={styles.footer}>{footerView}</View> : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  allAttributesWrapper: {
+    paddingBottom: 12,
+    paddingHorizontal: 4,
+    width: '100%',
+  },
+  allAttributesWrapperWithFooter: {
+    paddingBottom: 0,
+  },
+  attributesAnimatedWrapper: {
+    overflow: 'hidden',
+  },
+  attributesWrapper: {
+    paddingTop: 7,
+    position: 'absolute',
+    width: '100%',
+  },
+  card: {
+    borderRadius: 0,
+  },
+  detailsCard: {
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  footer: {
+    marginTop: 12,
+  },
+  previewAttributesWrapper: {
+    paddingHorizontal: 4,
+    width: '100%',
+  },
+});
+
+export default CredentialDetailsCard;

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

@@ -0,0 +1,87 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { CredentialCardRatio, CredentialCardShadow } from './credential-card';
+import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
+
+export type CredentialDetailsCardListItemProps = Omit<CredentialDetailsCardProps, 'animate'> & {
+  detailsCardStyle?: StyleProp<ViewStyle>;
+  lastItem?: boolean;
+};
+
+const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
+  detailsCardStyle,
+  expanded,
+  lastItem,
+  style,
+  ...props
+}) => {
+  const [minHeight, setMinHeight] = useState<number>();
+  const [detailsCardHeight, setDetailsCardHeight] = useState<number>();
+
+  const cardListItemHeight = useSharedValue<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (!detailsCardHeight || !minHeight) {
+      return;
+    }
+    const newValue = expanded ? detailsCardHeight : minHeight;
+    if (cardListItemHeight.value === undefined) {
+      cardListItemHeight.value = newValue;
+      return;
+    }
+    cardListItemHeight.value = withTiming(newValue, {
+      duration: 250,
+    });
+  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);
+
+  const cardWrapperStyle = useAnimatedStyle(() => {
+    if (cardListItemHeight.value !== undefined) {
+      return {
+        height: cardListItemHeight.value,
+      };
+    }
+    if (lastItem || expanded) {
+      return {};
+    }
+    return {
+      height: 60,
+    };
+  });
+
+  const onContentLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height } = event.nativeEvent.layout;
+      if (!minHeight) {
+        setMinHeight(lastItem ? width / CredentialCardRatio : 60);
+      }
+      const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;
+      setDetailsCardHeight(height + 2 * borderWidth);
+    },
+    [lastItem, minHeight, style],
+  );
+
+  return (
+    <Animated.View style={[cardWrapperStyle, style]}>
+      <View style={styles.cardWrapper}>
+        <CredentialDetailsCard
+          animate={false}
+          expanded={expanded}
+          onLayout={onContentLayout}
+          style={detailsCardStyle}
+          {...props}
+        />
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardWrapper: {
+    ...CredentialCardShadow,
+    overflow: 'visible',
+  },
+});
+
+export default CredentialDetailsCardListItem;

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

@@ -0,0 +1,50 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from '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} />;
+};
+
+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 };
+
+export default {
+  title: 'credential/card/CredentialHeader',
+  component: CredentialHeader,
+  argTypes: {
+    color: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+    iconLabelColor: {
+      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=401-1898&mode=design&t=0DWIGZWyWYB7JzPE-0',
+    },
+  },
+} as ComponentMeta<typeof CredentialHeader>;