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

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

@@ -1,52 +0,0 @@
-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: '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/credential/card/credential-card.tsx

@@ -1,195 +0,0 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { ColorValue, Image, LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-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 { concatTestID } from '../../utils/testID';
-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 CredentialCardProps = {
-  cardCarouselImages?: CarouselImage[];
-  cardImage?: ImageOrComponentSource;
-  color?: ColorValue;
-  credentialId?: string;
-  header: CredentialHeaderProps;
-  notice?: string;
-  noticeIcon?: React.ComponentType<any> | React.ReactElement;
-  onCardPress?: (credentialId?: string) => void;
-  onHeaderPress?: (credentialId?: string) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-};
-
-const CredentialCard: FC<CredentialCardProps> = ({
-  cardCarouselImages = [],
-  cardImage,
-  color = '#5A69F3',
-  credentialId,
-  header,
-  notice,
-  noticeIcon,
-  onCardPress,
-  onHeaderPress,
-  style,
-  testID,
-}) => {
-  const colorScheme = useAppColorScheme();
-  const [tappableHeaderHeight, setTappableHeaderHeight] = useState<number>();
-  const [noticeHeight, setNoticeHeight] = 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 onNoticeLayoutChange = useCallback((event: LayoutChangeEvent) => {
-    setNoticeHeight(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 (!noticeIcon) {
-      return undefined;
-    }
-    if (React.isValidElement(noticeIcon)) {
-      return noticeIcon;
-    } else {
-      const NoticeIconComponent = noticeIcon as React.ComponentType<any>;
-      return <NoticeIconComponent />;
-    }
-  }, [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) - (noticeHeight ?? 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
-          onLayout={onNoticeLayoutChange}
-          blurStyle="soft"
-          style={[styles.notice, style]}
-          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}
-            </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/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>;