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

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

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

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

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

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