@procivis/one-react-native-components 0.1.63

package/src/buttons/scan-button.stories.tsx

@@ -0,0 +1,26 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import ScanButton from './scan-button';
+
+const Basic: ComponentStory<typeof ScanButton> = ({ style, ...args }) => {
+  const insets = useSafeAreaInsets();
+  return <ScanButton {...args} style={[{ marginVertical: Math.max(24, insets.top) }, style]} />;
+};
+
+export { Basic as ScanButton };
+
+export default {
+  title: 'base/button/Scan Button',
+  component: ScanButton,
+  argTypes: {
+    onPress: { action: 'onPress' },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=527-88398&t=OcqD1XaEyN4BAsCn-4',
+    },
+  },
+} as ComponentMeta<typeof ScanButton>;

package/src/buttons/scan-button.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import BlurView from '../blur/blur-view';
+import { ScanIcon } from '../icons';
+import { useAppColorScheme } from '../theme';
+
+export type ScanButtonProps = TouchableOpacityProps;
+
+const hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };
+
+const ScanButton = React.forwardRef<TouchableOpacityRef, ScanButtonProps>(({ style, ...props }, ref) => {
+  const t = useAccessibilityTranslation();
+  const colorScheme = useAppColorScheme();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={t('accessibility.icon.scan')}
+      accessibilityRole="button"
+      hitSlop={hitSlop}
+      ref={ref}
+      style={[styles.button, { bottom: Math.max(24, insets.bottom) }, style]}
+      {...props}>
+      <BlurView blurStyle="soft" style={styles.blurWrapper}>
+        <View style={[styles.iconWrapper, { backgroundColor: colorScheme.accent }]}>
+          <ScanIcon color={colorScheme.white} />
+        </View>
+      </BlurView>
+    </TouchableOpacity>
+  );
+});
+
+ScanButton.displayName = 'ScanButton';
+export default ScanButton;
+
+const styles = StyleSheet.create({
+  blurWrapper: {
+    borderRadius: 28,
+    height: 80,
+    padding: 8,
+    width: 104,
+  },
+  button: {
+    borderRadius: 28,
+    height: 80,
+    left: '50%',
+    marginLeft: -52,
+    position: 'absolute',
+    shadowColor: '#000000',
+    shadowOffset: { height: 4, width: 0 },
+    shadowOpacity: 0.2,
+    shadowRadius: 24,
+    width: 104,
+  },
+  iconWrapper: {
+    alignItems: 'center',
+    borderRadius: 20,
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%',
+  },
+});

package/src/camera/camera-overlay.tsx

@@ -0,0 +1,48 @@
+import React, { FunctionComponent } from 'react';
+import { Dimensions, StyleSheet, View, ViewProps } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+export type CameraMaskProps = ViewProps & {
+  scannerSize?: number;
+};
+
+const CameraOverlay: FunctionComponent<CameraMaskProps> = ({ scannerSize, style, ...viewProps }) => {
+  const windowWidth = Dimensions.get('window').width;
+
+  scannerSize = scannerSize ?? windowWidth * 0.6;
+  const transformSize = scannerSize / 2;
+
+  return (
+    <View style={[StyleSheet.absoluteFill, style]} {...viewProps}>
+      <Svg
+        style={[
+          styles.scannerOutline,
+          {
+            width: scannerSize,
+            height: scannerSize,
+            transform: [{ translateX: -transformSize }, { translateY: -transformSize }],
+          },
+        ]}
+        viewBox="0 0 245 245"
+        fill="none"
+        strokeWidth={4}
+        strokeLinecap="round"
+        stroke={'#FFFFFF'}>
+        <Path d="M44.9348 2.5H40.9C27.4587 2.5 20.7381 2.5 15.6042 5.11584C11.0883 7.4168 7.4168 11.0883 5.11584 15.6042C2.5 20.7381 2.5 27.4587 2.5 40.9V44.9348" />
+        <Path d="M242.5 44.9348L242.5 26.5C242.5 13.2452 231.755 2.5 218.5 2.5L200.065 2.5" />
+        <Path d="M242.5 44.9348L242.5 40.9C242.5 27.4587 242.5 20.7381 239.884 15.6042C237.583 11.0883 233.912 7.4168 229.396 5.11584C224.262 2.5 217.541 2.5 204.1 2.5L200.065 2.5" />
+        <Path d="M200.065 242.5L204.1 242.5C217.541 242.5 224.262 242.5 229.396 239.884C233.912 237.583 237.583 233.912 239.884 229.396C242.5 224.262 242.5 217.541 242.5 204.1L242.5 200.065" />
+        <Path d="M2.5 200.065L2.5 204.1C2.5 217.541 2.5 224.262 5.11584 229.396C7.4168 233.912 11.0883 237.583 15.6042 239.884C20.7381 242.5 27.4587 242.5 40.9 242.5L44.9348 242.5" />
+      </Svg>
+    </View>
+  );
+};
+
+export default CameraOverlay;
+
+const styles = StyleSheet.create({
+  scannerOutline: {
+    left: '50%',
+    top: '50%',
+  },
+});

package/src/camera/index.tsx

@@ -0,0 +1,3 @@
+import QRCodeScanner, { QRCodeScannerProps } from './qr-code-scanner';
+
+export { QRCodeScanner, QRCodeScannerProps };

package/src/camera/qr-code-scanner.tsx

@@ -0,0 +1,52 @@
+import React, { FunctionComponent, useMemo } from 'react';
+import { StyleSheet, View, ViewProps } from 'react-native';
+import { Camera, Code, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
+
+import CameraOverlay from './camera-overlay';
+
+export type QRCodeScannerProps = ViewProps & {
+  cameraOverlay?: React.ComponentType<any> | React.ReactElement;
+  codeTypes?: CodeType[];
+  noCameraView?: JSX.Element;
+  onQRCodeRead: (code: Code[]) => void;
+};
+
+const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
+  cameraOverlay,
+  codeTypes = ['qr'],
+  onQRCodeRead,
+  noCameraView = null,
+  ...viewProps
+}) => {
+  const qrCodeScanner = useCodeScanner({
+    codeTypes,
+    onCodeScanned: onQRCodeRead,
+  });
+
+  const device = useCameraDevice('back');
+
+  const cameraOverlayView: React.ReactElement | undefined = useMemo(() => {
+    if (!cameraOverlay) {
+      return <CameraOverlay />;
+    }
+    if (React.isValidElement(cameraOverlay)) {
+      return cameraOverlay;
+    } else {
+      const CameraOverlayComponent = cameraOverlay as React.ComponentType<any>;
+      return <CameraOverlayComponent />;
+    }
+  }, [cameraOverlay]);
+
+  if (!device) {
+    return noCameraView;
+  }
+
+  return (
+    <View {...viewProps}>
+      <Camera codeScanner={qrCodeScanner} device={device} isActive={true} style={StyleSheet.absoluteFill} />
+      {cameraOverlayView}
+    </View>
+  );
+};
+
+export default QRCodeScanner;

package/src/control/checkbox.stories.tsx

@@ -0,0 +1,27 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { Checkbox } from './checkbox';
+
+const Basic: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
+Basic.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 ComponentMeta<typeof Checkbox>;

package/src/control/checkbox.tsx

@@ -0,0 +1,81 @@
+import React, { FC, ReactNode, useCallback } from 'react';
+import { StyleSheet, TouchableOpacityProps, View } from 'react-native';
+
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { CheckedIcon } from '../icons/selector';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export interface CheckboxProps extends TouchableOpacityProps {
+  value: boolean;
+  text: ReactNode;
+  onValueChanged: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Checkbox: FC<CheckboxProps> = ({ style, text, value, disabled, onValueChanged, ...props }) => {
+  const t = useAccessibilityTranslation();
+  const colorScheme = useAppColorScheme();
+
+  const onPress = useCallback(() => onValueChanged(!value), [onValueChanged, value]);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      accessibilityRole="checkbox"
+      accessibilityState={{ disabled }}
+      accessibilityValue={
+        disabled ? undefined : { text: t(value ? 'accessibility.control.checked' : 'accessibility.control.unchecked') }
+      }
+      disabled={disabled}
+      style={[styles.container, { backgroundColor: colorScheme.background }, style]}
+      onPress={onPress}
+      {...props}>
+      {value ? (
+        <CheckedIcon style={disabled && styles.disabled} />
+      ) : (
+        <View
+          style={[
+            styles.unchecked,
+            {
+              borderColor: colorScheme.grayDark,
+              backgroundColor: disabled ? colorScheme.background : colorScheme.white,
+            },
+          ]}
+        />
+      )}
+      <View style={[styles.text, disabled && styles.disabled]}>
+        {typeof text === 'string' ? (
+          <Typography preset="xs/line-height-small" color={colorScheme.text}>
+            {text}
+          </Typography>
+        ) : (
+          text
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    padding: 12,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+  text: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  unchecked: {
+    borderRadius: 12,
+    borderWidth: 1,
+    height: 24,
+    width: 24,
+  },
+});

package/src/control/index.ts

@@ -0,0 +1,4 @@
+import { Checkbox, CheckboxProps } from './checkbox';
+import { Switch, SwitchProps } from './switch';
+
+export { Checkbox, CheckboxProps, Switch, SwitchProps };

package/src/control/switch.stories.tsx

@@ -0,0 +1,29 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { Switch } from './switch';
+
+const Basic: ComponentStory<typeof Switch> = ({ value, ...args }) => {
+  const [val, setVal] = useState(value);
+  useEffect(() => setVal(value), [value]);
+  return <Switch {...args} value={val} onChange={setVal} />;
+};
+
+Basic.args = {
+  value: true,
+  disabled: false,
+  style: { margin: 24 },
+};
+
+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 ComponentMeta<typeof Switch>;

package/src/control/switch.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import { Insets, Platform, StyleSheet, Switch as RNSwitch, SwitchProps as RNSwitchProps } from 'react-native';
+
+import { useAppColorScheme } from '../theme';
+
+export interface SwitchProps extends Omit<RNSwitchProps, 'value' | 'onChange' | 'onValueChange'> {
+  value: boolean;
+  onChange: (newValue: boolean) => void;
+}
+
+const hitSlop: Insets = { top: 10, bottom: 10, left: 10, right: 10 };
+
+// https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=8%3A744&t=xeivYJN0RLNSObzn-4
+// https://www.figma.com/file/tNPSTYXGCjaVCK9z8Yvy0e/Procivis-SSI%2B-%E2%80%93-App-(Base-File)-(Copy)?node-id=156%3A13826&t=sDAfSW7cmQKmaWNG-4
+export const Switch = forwardRef<RNSwitch, SwitchProps>(({ value, disabled, style, onChange, ...props }, ref) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <RNSwitch
+      ref={ref}
+      value={value}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      style={[disabled && styles.disabled, style]}
+      onValueChange={onChange}
+      trackColor={Platform.select({
+        default: { true: colorScheme.grayDark, false: colorScheme.grayDark },
+        ios: { true: colorScheme.accent, false: colorScheme.grayDark },
+      })}
+      thumbColor={Platform.select({
+        default: value ? colorScheme.accent : disabled ? colorScheme.background : colorScheme.white,
+        ios: colorScheme.white,
+      })}
+      ios_backgroundColor={colorScheme.grayDark}
+      // @ts-ignore: web only prop
+      activeThumbColor={colorScheme.accent}
+      {...props}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  disabled: {
+    opacity: 0.38,
+  },
+});
+
+Switch.displayName = 'Switch';

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

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

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