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

package/src/ui-components/list/wallet/empty-list.tsx

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { concatTestID } from '../../../utils';
+import { Button } from '../../buttons';
+import { NoCredentialsIcon } from '../../icons';
+import { Typography } from '../../text';
+import { useAppColorScheme } from '../../theme';
+
+type WalletEmptyListProps = {
+  onScanPress: () => void;
+  scanButtonTitle: string;
+  subtitle: string;
+  testID: string;
+  title: string;
+};
+
+const WalletEmptyList: FC<WalletEmptyListProps> = ({ onScanPress, scanButtonTitle, subtitle, testID, title }) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View style={styles.empty}>
+      <Typography
+        align="center"
+        color={colorScheme.text}
+        preset="l/line-height-large"
+        style={styles.emptyTitle}
+        testID={concatTestID(testID, 'title')}>
+        {title}
+      </Typography>
+      <Typography
+        align="center"
+        color={colorScheme.text}
+        style={styles.emptySubtitle}
+        testID={concatTestID(testID, 'subtitle')}>
+        {subtitle}
+      </Typography>
+      <NoCredentialsIcon style={styles.emptyIcon} />
+      <Button
+        onPress={onScanPress}
+        style={[styles.emptyButton, { bottom: Math.max(24, safeAreaInsets.bottom) }]}
+        testID={concatTestID(testID, 'scanQrCode')}
+        title={scanButtonTitle}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  empty: {
+    alignItems: 'center',
+    flex: 1,
+    marginHorizontal: 16,
+    marginTop: 224,
+  },
+  emptyButton: {
+    marginBottom: 16,
+    position: 'absolute',
+    width: '100%',
+  },
+  emptyIcon: {
+    marginTop: -30,
+  },
+  emptySubtitle: {
+    opacity: 0.7,
+  },
+  emptyTitle: {
+    marginBottom: 8,
+    opacity: 0.7,
+  },
+});
+
+export default WalletEmptyList;

package/src/ui-components/list/wallet/empty-search-result.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Typography } from '../../text';
+import { useAppColorScheme } from '../../theme';
+
+type WalletEmptySearchResultProps = {
+  subtitle: string;
+  title: string;
+};
+
+const WalletEmptySearchResult: FC<WalletEmptySearchResultProps> = ({ subtitle, title }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View style={styles.emptySearch}>
+      <Typography align="center" color={colorScheme.text} preset="l/line-height-large" style={styles.emptyTitle}>
+        {title}
+      </Typography>
+      <Typography align="center" color={colorScheme.text}>
+        {subtitle}
+      </Typography>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  emptySearch: {
+    alignItems: 'center',
+    flex: 1,
+    marginTop: 224,
+  },
+  emptyTitle: {
+    marginBottom: 8,
+    opacity: 0.7,
+  },
+});
+
+export default WalletEmptySearchResult;

package/src/ui-components/list/wallet/index.tsx

@@ -0,0 +1,4 @@
+import WalletEmptyList from './empty-list';
+import WalletEmptySearchResult from './empty-search-result';
+
+export { WalletEmptyList, WalletEmptySearchResult };

package/src/ui-components/loader/loader.stories.tsx

@@ -1,14 +1,11 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import LoaderView, { LoaderViewProps, LoaderViewState } from './loader';
 
-const Basic: Story<LoaderViewProps> = ({ ...props }) => {
-  return <LoaderView {...props} />;
-};
-
-Basic.args = {
-  state: LoaderViewState.InProgress,
+const Basic: StoryObj<LoaderViewProps> = {
+  args: {
+    state: LoaderViewState.InProgress,
+  },
 };
 
 export { Basic as LoaderView };
@@ -28,4 +25,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=444-44894&mode=design&t=YI1oD2BfBie5HcvJ-0',
     },
   },
-} as ComponentMeta<typeof LoaderView>;
+} as Meta<typeof LoaderView>;

package/src/ui-components/loader/loader.tsx

@@ -62,7 +62,7 @@ const LoaderView: FC<LoaderViewProps> = ({ animate, state, testID }) => {
       }),
       -1,
     );
-  }, [rotationIsAnimating, rotation]);
+  }, [rotation]);
 
   const stopRotationAnimation = useCallback(() => {
     Promise.resolve(
@@ -72,14 +72,17 @@ const LoaderView: FC<LoaderViewProps> = ({ animate, state, testID }) => {
         rotation.value = 0;
       }),
     ).catch(() => {});
-  }, [rotationIsAnimating, rotation]);
+  }, [rotation]);
 
   useEffect(() => {
     if (animate) {
-      startRotationAnimation();
+      if (!finished) {
+        startRotationAnimation();
+      }
     } else {
       stopRotationAnimation();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animate, startRotationAnimation, stopRotationAnimation]);
 
   useEffect(() => {

package/src/ui-components/loader/loading-result.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ButtonType } from '../buttons';
@@ -15,7 +15,7 @@ type Args = {
   withHeader: boolean;
 };
 
-const Basic: Story<Args> = ({ label, state, withButton1, withButton2, withButton3, withHeader }) => {
+const Render = ({ label, state, withButton1, withButton2, withButton3, withHeader }: Args) => {
   return (
     <LoadingResultScreen
       button={withButton1 ? { title: 'Button 1' } : undefined}
@@ -38,13 +38,16 @@ const Basic: Story<Args> = ({ label, state, withButton1, withButton2, withButton
   );
 };
 
-Basic.args = {
-  label: 'Loading...',
-  state: LoaderViewState.InProgress,
-  withButton1: true,
-  withButton2: false,
-  withButton3: false,
-  withHeader: true,
+const Basic: StoryObj<Args> = {
+  args: {
+    label: 'Loading...',
+    state: LoaderViewState.InProgress,
+    withButton1: true,
+    withButton2: false,
+    withButton3: false,
+    withHeader: true,
+  },
+  render: Render,
 };
 
 export { Basic as LoadingResultScreen };
@@ -64,4 +67,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=444-44894&mode=design&t=YI1oD2BfBie5HcvJ-0',
     },
   },
-} as ComponentMeta<typeof LoadingResultScreen>;
+} as Meta<typeof LoadingResultScreen>;

package/src/ui-components/loader/loading-result.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Button, ButtonProps } from '../buttons/button';
 import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
@@ -28,7 +28,7 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
   ...viewProps
 }) => {
   const colorScheme = useAppColorScheme();
-  const { top } = useSafeAreaInsets();
+  const { top, bottom } = useSafeAreaInsets();
 
   let headerPaddingStyle: ViewStyle | undefined;
   if (Platform.OS === 'android') {
@@ -39,6 +39,10 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
     headerPaddingStyle = styles.modalHeaderWithoutHandle;
   }
 
+  let buttonsWrapperMarginStyle: ViewStyle = {
+    marginBottom: bottom,
+  };
+
   return (
     <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
       <View style={[styles.headerWrapper, headerPaddingStyle]}>
@@ -50,11 +54,11 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
           {label}
         </Typography>
       </View>
-      <SafeAreaView edges={['bottom']} style={styles.buttonWrapper}>
+      <View style={[styles.buttonWrapper, buttonsWrapperMarginStyle]}>
         {button && <Button {...button}>{button.title}</Button>}
         {button2 && <Button {...button2}>{button2.title}</Button>}
         {button3 && <Button {...button3}>{button3.title}</Button>}
-      </SafeAreaView>
+      </View>
     </View>
   );
 };

package/src/ui-components/nerd-view/index.ts

@@ -1,3 +1,4 @@
-import NerdModeItem, { ActionIcon, NerdModeItemProps } from './nerd-mode-item';
+import type { NerdModeItemProps } from './nerd-mode-item';
+import NerdModeItem, { ActionIcon } from './nerd-mode-item';
 
 export { ActionIcon, NerdModeItem, NerdModeItemProps };

package/src/ui-components/nerd-view/nerd-mode-item.tsx

@@ -1,6 +1,5 @@
 import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { Dimensions, LayoutChangeEvent, Linking, StyleSheet, View, ViewStyle } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
   SharedValue,
@@ -11,6 +10,7 @@ import Animated, {
 
 import { reportException } from '../../utils';
 import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
 import { Button, ButtonType } from '../buttons/button';
 import { CopyContentIcon, OpenLinkIcon } from '../icons/nerd-view';
 import Typography from '../text/typography';
@@ -205,7 +205,7 @@ const NerdModeItem: FunctionComponent<NerdModeItemProps> = ({
         },
       ],
     };
-  });
+  }, [iconTopPosition]);
 
   const previewText = expanded ? attributeText : attributeText.slice(0, VALUE_PREVIEW_LENGTH) + '...';
 

package/src/ui-components/pin/pin-code-screen.stories.tsx

@@ -1,4 +1,5 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React, { useRef } from 'react';
 import { StyleSheet } from 'react-native';
 
@@ -15,7 +16,7 @@ const styles = StyleSheet.create({
   actionButton: { position: 'absolute', right: 24, top: 40 },
 });
 
-const Basic: Story<Props> = ({
+const Render = ({
   title,
   instruction,
   onAccessibilityAnnounced,
@@ -23,7 +24,7 @@ const Basic: Story<Props> = ({
   onBack,
   showActions,
   ...args
-}) => {
+}: Props) => {
   const subtitle = instruction ? { instruction, onAccessibilityAnnounced } : {};
   const actionsRef = useRef<PinCodeScreenActions>(null);
 
@@ -43,15 +44,18 @@ const Basic: Story<Props> = ({
   );
 };
 
-Basic.args = {
-  length: 6,
-  enteredLength: 0,
-  withBackButton: true,
-  title: 'Title',
-  instruction: 'Instruction',
-  error: '',
-  biometry: Biometry.FaceID,
-  showActions: false,
+const Basic: StoryObj<Props> = {
+  args: {
+    length: 6,
+    enteredLength: 0,
+    withBackButton: true,
+    title: 'Title',
+    instruction: 'Instruction',
+    error: '',
+    biometry: Biometry.FaceID,
+    showActions: false,
+  },
+  render: Render,
 };
 
 export { Basic as PINScreen };
@@ -66,6 +70,9 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=621-21892&mode=design&t=nCa9UdCDzPYtOPgu-4',
     },
   },
+  args: {
+   onAccessibilityAnnounced: fn()
+  },
   argTypes: {
     onBack: { action: 'onBack' },
     onBiometricPress: { action: 'onBiometricPress' },
@@ -77,4 +84,4 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof PinCodeScreen>;
+} as Meta<typeof PinCodeScreen>;

package/src/ui-components/screens/image-preview-screen.stories.tsx

@@ -1,16 +1,19 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta,StoryObj } from '@storybook/react';
 import React from 'react';
 
-import ImagePreviewScreen from './image-preview-screen';
+import ImagePreviewScreen, { ImagePreviewScreenProps } from './image-preview-screen';
 
 const profileImage = require('../../../storybook/assets/ProfileImage.png');
 
-const Basic: ComponentStory<typeof ImagePreviewScreen> = ({ ...args }) => {
+const Render = ({ ...args }: ImagePreviewScreenProps) => {
   return <ImagePreviewScreen {...args} image={profileImage} />;
 };
 
-Basic.args = {
-  title: 'Title',
+const Basic: StoryObj<typeof ImagePreviewScreen> = {
+  args: {
+    title: 'Title',
+  },
+  render: Render,
 };
 
 export { Basic as ImagePreviewScreen };
@@ -25,4 +28,4 @@ export default {
       url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=493-79444&m=dev',
     },
   },
-} as ComponentMeta<typeof ImagePreviewScreen>;
+} as Meta<typeof ImagePreviewScreen>;

package/src/ui-components/screens/index.ts

@@ -1,9 +1,15 @@
-import BackupScreen, { BackupScreenMode, BackupScreenProps } from './backup-screen';
-import ImagePreviewScreen, { ImagePreviewScreenProps } from './image-preview-screen';
-import NerdModeScreen, { NerdModeScreenProps, NerdModeSection } from './nerd-mode-screen';
-import QRCodeScannerScreen, { QRCodeScannerScreenProps } from './qr-code-scanner-screen';
-import ScrollViewScreen, { ScrollViewScreenProps } from './scroll-view-screen';
-import SectionListScreen, { SectionListScreenProps } from './section-list-screen';
+import type { BackupScreenProps } from './backup-screen';
+import BackupScreen, { BackupScreenMode } from './backup-screen';
+import type { ImagePreviewScreenProps } from './image-preview-screen';
+import ImagePreviewScreen from './image-preview-screen';
+import type { NerdModeScreenProps, NerdModeSection } from './nerd-mode-screen';
+import NerdModeScreen from './nerd-mode-screen';
+import type { QRCodeScannerScreenProps } from './qr-code-scanner-screen';
+import QRCodeScannerScreen from './qr-code-scanner-screen';
+import type { ScrollViewScreenProps } from './scroll-view-screen';
+import ScrollViewScreen from './scroll-view-screen';
+import type { SectionListScreenProps } from './section-list-screen';
+import SectionListScreen from './section-list-screen';
 
 export { BackupScreen, BackupScreenMode, BackupScreenProps };
 export { ImagePreviewScreen, ImagePreviewScreenProps };

package/src/ui-components/screens/nerd-mode-screen.tsx

@@ -1,13 +1,13 @@
-import { DidListItem } from '@procivis/react-native-one-core';
+import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
 import React, { FunctionComponent, useState } from 'react';
 import { SectionList, StyleSheet, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import EntityDetailsWithButtons, { ContextRole } from '../../components/entity/entity-details-with-buttons';
 import ContrastingStatusBar from '../../utils/contrasting-status-bar';
 import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
 import SectionEntityCluster from '../entity/entity-cluster';
 import NavigationHeader from '../header/navigation-header';
 import { CloseIcon } from '../icons/icons';
@@ -26,15 +26,15 @@ export interface EntityLabels {
 
 export interface AttributesLabels {
   trustRegistry: string;
-  issuerDid: string;
-  entityDid: string;
+  issuerIdentifier: string;
+  entityIdentifier: string;
   role: string;
   expand: string;
   collapse: string;
 }
 
 interface SectionEntityCluster {
-  did?: DidListItem;
+  identifier?: IdentifierListItem;
   subline?: string;
   entityLabels: EntityLabels;
   role: ContextRole;
@@ -66,7 +66,7 @@ export enum EntityType {
 }
 
 function isSectionEntityCluster(item: NerdModeSectionItem): item is SectionEntityCluster {
-  return (item as SectionEntityCluster).did !== undefined;
+  return (item as SectionEntityCluster).identifier !== undefined;
 }
 
 const AnimatedSectionList = Animated.createAnimatedComponent(SectionList<NerdModeSectionItem>);

package/src/ui-components/screens/qr-code-scanner-screen.stories.tsx

@@ -1,10 +1,10 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useEffect } from 'react';
 import { useCameraPermission } from 'react-native-vision-camera';
 
-import QRCodeScannerScreen from './qr-code-scanner-screen';
+import QRCodeScannerScreen, { QRCodeScannerScreenProps } from './qr-code-scanner-screen';
 
-const Basic: ComponentStory<typeof QRCodeScannerScreen> = (args) => {
+const Render = (args: QRCodeScannerScreenProps) => {
   const { hasPermission, requestPermission } = useCameraPermission();
   useEffect(() => {
     if (!hasPermission) {
@@ -15,9 +15,12 @@ const Basic: ComponentStory<typeof QRCodeScannerScreen> = (args) => {
   return <QRCodeScannerScreen {...args} />;
 };
 
-Basic.args = {
-  title: 'Scan QR Code to connect.',
-};
+const Basic: StoryObj<typeof QRCodeScannerScreen> = {
+  args: {
+    title: 'Scan QR Code to connect.',
+  },
+  render: Render,
+}
 
 export { Basic as QRCodeScannerScreen };
 
@@ -34,4 +37,4 @@ export default {
   argTypes: {
     onQRCodeRead: { action: 'onQRCodeRead' },
   },
-} as ComponentMeta<typeof QRCodeScannerScreen>;
+} as Meta<typeof QRCodeScannerScreen>;

package/src/ui-components/searchbar/search-bar.stories.tsx

@@ -1,31 +1,38 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 
 import SearchBar, { SearchBarProps } from './search-bar';
 
-const Basic: Story<Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>> = (args) => {
+const Render = (args: Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>) => {
   const [searchPhrase, setSearchPhrase] = useState('');
   return <SearchBar {...args} searchPhrase={searchPhrase} onSearchPhraseChange={setSearchPhrase} />;
 };
 
-Basic.args = {
-  placeholder: 'Search',
-  style: { margin: 24 },
+const Basic: StoryObj<Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>> = {
+  args: {
+    placeholder: 'Search',
+    style: { margin: 24 },
+  },
+  render: Render,
 };
 
+
 export { Basic as SearchBar };
 
 export default {
   title: 'base/input/Search Bar',
   component: SearchBar,
   parameters: {
+    controls: {
+      exclude: ['searchPhrase', 'onSearchPhraseChange'],
+    },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=KAAJ0oKY3xb6VNtA-4',
     },
   },
   argTypes: {
-    searchPhrase: { control: { type: null } },
-    onSearchPhraseChange: { control: { type: null } },
+    searchPhrase: { control: { type: undefined, disable: true } },
+    onSearchPhraseChange: { control: { type: undefined, disable: true } },
   },
-} as ComponentMeta<typeof SearchBar>;
+} as Meta<typeof SearchBar>;

package/src/ui-components/searchbar/search-bar.tsx

@@ -47,7 +47,7 @@ const SearchBar = forwardRef<TextInput, SearchBarProps>(
           testID={testID}
           {...textInputProps}
         />
-        {searchPhrase && (
+        {searchPhrase ? (
           <TouchableOpacity
             testID={concatTestID(testID, 'clear')}
             accessibilityRole="button"
@@ -56,7 +56,7 @@ const SearchBar = forwardRef<TextInput, SearchBarProps>(
             style={styles.clearButton}>
             <CloseIcon color={colorScheme.text} height={12} width={12} />
           </TouchableOpacity>
-        )}
+        ) : null}
       </View>
     );
   },

package/src/ui-components/state/error-screen.stories.tsx

@@ -1,14 +1,13 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import ErrorScreen, { ErrorScreenProps } from './error-screen';
 
-const Basic: Story<ErrorScreenProps> = (props) => <ErrorScreen {...props} />;
-
-Basic.args = {
-  title: 'Error',
-  subtitle: 'The app has reached an error state.',
-  button: { label: 'Primary', onPress: () => null },
+const Basic: StoryObj<ErrorScreenProps> = {
+  args: {
+    title: 'Error',
+    subtitle: 'The app has reached an error state.',
+    button: { label: 'Primary', onPress: () => null },
+  },
 };
 
 export { Basic as ErrorScreen };
@@ -19,4 +18,4 @@ export default {
   parameters: {
     noSafeArea: true,
   },
-} as ComponentMeta<typeof ErrorScreen>;
+} as Meta<typeof ErrorScreen>;

package/src/ui-components/state/error-screen.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { ScrollViewScreen } from '..';
 import { Button } from '../buttons';
 import { CredentialWarningIcon } from '../icons';
+import { ScrollViewScreen } from '../screens';
 import { Typography } from '../text';
 import { useAppColorScheme } from '../theme';
 

package/src/ui-components/text/index.ts

@@ -1,3 +1,4 @@
-import Typography, { TypographyProps } from './typography';
+import type { TypographyProps } from './typography';
+import Typography from './typography';
 
 export { Typography, TypographyProps };