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

package/src/ui-components/control/checkbox.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta,StoryObj } from '@storybook/react';
+
+import { Checkbox } from './checkbox';
+
+const Basic: StoryObj<typeof Checkbox> = {
+  args: {
+    text: 'Example text\non multiple\nlines',
+    value: true,
+    disabled: false,
+  },
+};
+
+export { Basic as Checkbox };
+
+export default {
+  title: 'base/control/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    onValueChanged: { action: 'onValueChanged' },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=621-21936&mode=dev',
+    },
+  },
+} as Meta<typeof Checkbox>;

package/src/ui-components/control/switch.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta,StoryObj } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { Switch, SwitchProps } from './switch';
+
+const Render = ({ value, ...args }: SwitchProps) => {
+  const [val, setVal] = useState(value);
+  useEffect(() => setVal(value), [value]);
+  return <Switch {...args} value={val} onChange={setVal} />;
+};
+
+const Basic: StoryObj<typeof Switch> = {
+  args: {
+    value: true,
+    disabled: false,
+    style: { margin: 24 },
+  },
+  render: Render,
+};
+
+export { Basic as Switch };
+
+export default {
+  title: 'base/control/Switch',
+  component: Switch,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=8%3A744&t=xeivYJN0RLNSObzn-4',
+    },
+  },
+} as Meta<typeof Switch>;

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/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: StoryObj<typeof CredentialCard> = {
+  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: {
+      text: '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 Meta<typeof CredentialCard>;

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

@@ -0,0 +1,189 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { ColorValue, Image, LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../../utils/testID';
+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 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 CredentialCardNotice = {
+  text: string;
+  noticeIcon?: React.ComponentType<any> | React.ReactElement;
+};
+
+export type CredentialCardProps = {
+  cardCarouselImages?: CarouselImage[];
+  cardImage?: ImageOrComponentSource;
+  color?: ColorValue;
+  credentialId?: string;
+  header: CredentialHeaderProps;
+  notice?: CredentialCardNotice;
+  onCardPress?: (credentialId?: string) => void;
+  onHeaderPress?: (credentialId?: string) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+const CredentialCard: FC<CredentialCardProps> = ({
+  cardCarouselImages = [],
+  cardImage,
+  color = '#5A69F3',
+  credentialId,
+  header,
+  notice,
+  onCardPress,
+  onHeaderPress,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [tappableHeaderHeight, setTappableHeaderHeight] = 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 headerPressHandler = useCallback(() => {
+    onHeaderPress?.(credentialId);
+  }, [credentialId, onHeaderPress]);
+
+  const cardPressHandler = useCallback(() => {
+    onCardPress?.(credentialId);
+  }, [credentialId, onCardPress]);
+
+  const noticeIconView: React.ReactElement | undefined = useMemo(() => {
+    if (!notice?.noticeIcon) {
+      return undefined;
+    }
+    if (React.isValidElement(notice.noticeIcon)) {
+      return notice.noticeIcon;
+    } else {
+      const NoticeIconComponent = notice.noticeIcon as React.ComponentType<any>;
+      return <NoticeIconComponent />;
+    }
+  }, [notice?.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),
+          }}
+          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 blurStyle="soft" style={[styles.notice]} 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.text}
+            </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/ui-components/credential/card/credential-details-card.stories.tsx

@@ -0,0 +1,303 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+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, { CredentialDetailsCardProps } from './credential-details-card';
+import { CarouselImageType } from './credential-image-carousel';
+
+const style = StyleSheet.create({
+  card: {
+    margin: 16,
+  },
+  carouselItem: {
+    flex: 1,
+  },
+  footer: {
+    backgroundColor: 'lightgray',
+    padding: 12,
+  },
+});
+
+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',
+        },
+        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',
+        },
+        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',
+              },
+            ],
+            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-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-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-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} />,
+        },
+        {
+          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: {
+        text: 'Notice related to the credential',
+        noticeIcon: CredentialNoticeWarningIcon,
+      },
+    },
+    showAllButtonLabel: 'See all',
+    expanded: true,
+    footer: (
+      <View style={style.footer}>
+        <Text>Footer view</Text>
+      </View>
+    ),
+  },
+  render: Render,
+};
+
+export { Basic as CredentialDetailsCard };
+
+export default {
+  title: 'credential/card/CredentialDetailsCard',
+  component: CredentialDetailsCard,
+  argTypes: {
+    onImagePreview: { action: 'onImagePreview' },
+    onAttributeSelected: { action: 'onAttributeSelected' },
+  },
+  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 Meta<typeof CredentialDetailsCard>;