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

package/src/screens/qr-code-scanner-screen.tsx

@@ -1,124 +0,0 @@
-import React, { FunctionComponent, memo, ReactElement, useMemo } from 'react';
-import { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useCameraDevice } from 'react-native-vision-camera';
-
-import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
-import BlurView from '../blur/blur-view';
-import { GhostButton } from '../buttons';
-import CameraOverlay from '../camera/camera-overlay';
-import QRCodeScanner, { QRCodeScannerProps } from '../camera/qr-code-scanner';
-import { CloseIcon } from '../icons';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-import { ContrastingStatusBar } from '../utils';
-import { colorWithAlphaComponent } from '../utils/color';
-
-export interface QRCodeScannerScreenProps {
-  codeTypes?: QRCodeScannerProps['codeTypes'];
-  footer?: React.ComponentType<any> | React.ReactElement;
-  onQRCodeRead: QRCodeScannerProps['onQRCodeRead'];
-  onClose: () => void;
-  overlayStyle?: StyleProp<ViewStyle>;
-  noCameraView?: JSX.Element;
-  title: ReactElement | string;
-}
-
-const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
-  codeTypes,
-  footer,
-  onQRCodeRead,
-  onClose,
-  overlayStyle,
-  noCameraView = null,
-  title,
-}) => {
-  const t = useAccessibilityTranslation();
-  const insets = useSafeAreaInsets();
-  const colorScheme = useAppColorScheme();
-
-  const footerView: React.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 minBottomBlurViewHeight = Dimensions.get('window').height * 0.15;
-
-  const device = useCameraDevice('back');
-  if (!device) {
-    return noCameraView;
-  }
-
-  return (
-    <View style={styles.container}>
-      <QRCodeScanner
-        cameraOverlay={<CameraOverlay style={overlayStyle} />}
-        codeTypes={codeTypes}
-        onQRCodeRead={onQRCodeRead}
-        style={StyleSheet.absoluteFill}
-      />
-      <ContrastingStatusBar backgroundColor={colorScheme.black} />
-      <BlurView
-        darkMode={true}
-        blurStyle="soft"
-        style={[styles.topBlurView, { backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5) }]}>
-        <View style={[styles.headerSection, { top: insets.top }]}>
-          <GhostButton
-            icon={<CloseIcon color={colorScheme.white} />}
-            onPress={onClose}
-            accessibilityLabel={t('accessibility.nav.close')}
-          />
-        </View>
-      </BlurView>
-      <BlurView
-        darkMode={true}
-        blurStyle="soft"
-        style={[
-          styles.bottomBlurView,
-          {
-            backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5),
-            minHeight: minBottomBlurViewHeight,
-            paddingBottom: Math.max(insets.bottom, 32),
-          },
-        ]}>
-        <Typography align="center" style={styles.title} color={colorScheme.white}>
-          {title}
-        </Typography>
-        {footerView}
-      </BlurView>
-    </View>
-  );
-};
-const styles = StyleSheet.create({
-  bottomBlurView: {
-    bottom: 0,
-    position: 'absolute',
-    width: '100%',
-  },
-  container: {
-    flex: 1,
-  },
-  headerSection: {
-    paddingHorizontal: 22,
-    paddingTop: 16,
-    position: 'absolute',
-  },
-  title: {
-    marginTop: 32,
-  },
-  topBlurView: {
-    height: '15%',
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-  },
-});
-
-export default memo(QRCodeScannerScreen);

package/src/screens/scroll-view-screen.tsx

@@ -1,91 +0,0 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { Platform, ScrollView, ScrollViewProps, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
-import ListTitleHeader from '../list/list-title-header';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { useOnScrollHeaderState } from '../utils/hooks/header/on-scroll-header-state';
-import { useListContentInset } from '../utils/hooks/list/list-content-inset';
-import { concatTestID } from '../utils/testID';
-
-export type ScrollViewScreenProps = ViewProps & {
-  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {
-    static?: boolean;
-    title: string;
-  };
-  modalPresentation?: boolean;
-  scrollView?: Omit<ScrollViewProps, 'onScroll'>;
-};
-
-const ScrollViewScreen: FC<PropsWithChildren<ScrollViewScreenProps>> = ({
-  children,
-  header,
-  modalPresentation,
-  scrollView,
-  style,
-  testID,
-  ...viewProps
-}) => {
-  const colorScheme = useAppColorScheme();
-  const { top } = useSafeAreaInsets();
-  const contentInsetsStyle = useListContentInset({
-    additionalBottomPadding: 24,
-    headerHeight: modalPresentation && Platform.OS === 'ios' ? 63 : 48,
-    modalPresentation,
-  });
-  const { titleVisible, onScroll } = useOnScrollHeaderState();
-  const { contentContainerStyle, ...scrollViewProps } = scrollView ?? {};
-
-  let headerPaddingStyle: ViewStyle | undefined;
-  if (!modalPresentation || Platform.OS === 'android') {
-    headerPaddingStyle = {
-      paddingTop: top,
-    };
-  } else if (modalPresentation && !header.modalHandleVisible && Platform.OS === 'ios') {
-    headerPaddingStyle = styles.modalHeaderWithoutHandle;
-  }
-
-  return (
-    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} testID={testID} {...viewProps}>
-      <ScrollView
-        contentContainerStyle={[styles.contentContainer, contentInsetsStyle, contentContainerStyle]}
-        onScroll={onScroll}
-        scrollEventThrottle={100}
-        {...scrollViewProps}>
-        <View style={styles.content} testID={concatTestID(testID, 'content')}>
-          {!header.static && <ListTitleHeader title={header.title} />}
-          {children}
-        </View>
-      </ScrollView>
-      <NavigationHeader
-        animate
-        blurred
-        style={[styles.header, headerPaddingStyle]}
-        titleVisible={header.static || titleVisible}
-        {...header}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  header: {
-    position: 'absolute',
-    width: '100%',
-  },
-  modalHeaderWithoutHandle: {
-    paddingTop: 15,
-  },
-});
-
-export default ScrollViewScreen;

package/src/screens/section-list-screen.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { SectionList, SectionListProps, StyleSheet, View, ViewProps } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
-import ListTitleHeader from '../list/list-title-header';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { useOnScrollHeaderState } from '../utils/hooks/header/on-scroll-header-state';
-import { useListContentInset } from '../utils/hooks/list/list-content-inset';
-
-export type SectionListScreenProps<ItemT, SectionT> = ViewProps & {
-  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {
-    static?: boolean;
-    title: string;
-  };
-  list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'>;
-};
-
-const SectionListScreen = <ItemT, SectionT>({
-  header,
-  list: { contentContainerStyle, stickySectionHeadersEnabled, ...listProps },
-  style,
-  ...viewProps
-}: SectionListScreenProps<ItemT, SectionT>) => {
-  const colorScheme = useAppColorScheme();
-  const safeAreaInsets = useSafeAreaInsets();
-  const contentInsetsStyle = useListContentInset();
-  const { titleVisible, onScroll } = useOnScrollHeaderState();
-
-  return (
-    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
-      <SectionList<ItemT, SectionT>
-        ListHeaderComponent={!header.static ? <ListTitleHeader title={header.title} /> : undefined}
-        contentContainerStyle={[contentInsetsStyle, contentContainerStyle]}
-        onScroll={onScroll}
-        scrollEventThrottle={100}
-        stickySectionHeadersEnabled={stickySectionHeadersEnabled ?? false}
-        {...listProps}
-      />
-      <NavigationHeader
-        animate
-        blurred
-        style={[styles.header, { paddingTop: safeAreaInsets.top }]}
-        titleVisible={header.static || titleVisible}
-        {...header}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    position: 'absolute',
-    width: '100%',
-  },
-});
-
-export default SectionListScreen;

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

@@ -1,31 +0,0 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React, { useState } from 'react';
-
-import SearchBar, { SearchBarProps } from './search-bar';
-
-const Basic: Story<Omit<SearchBarProps, 'searchPhrase' | 'onSearchPhraseChange'>> = (args) => {
-  const [searchPhrase, setSearchPhrase] = useState('');
-  return <SearchBar {...args} searchPhrase={searchPhrase} onSearchPhraseChange={setSearchPhrase} />;
-};
-
-Basic.args = {
-  placeholder: 'Search',
-  style: { margin: 24 },
-};
-
-export { Basic as SearchBar };
-
-export default {
-  title: 'base/input/Search Bar',
-  component: SearchBar,
-  parameters: {
-    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 } },
-  },
-} as ComponentMeta<typeof SearchBar>;

package/src/searchbar/search-bar.tsx

@@ -1,94 +0,0 @@
-import React, { forwardRef, useCallback } from 'react';
-import { Insets, Platform, StyleProp, StyleSheet, TextInput, TextInputProps, View, ViewStyle } from 'react-native';
-
-import { TouchableOpacity } from '../accessibility';
-import { CloseIcon, SearchIcon } from '../icons';
-import font from '../text/font';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils';
-
-export interface SearchBarProps extends TextInputProps {
-  style?: StyleProp<ViewStyle>;
-  placeholder?: string;
-  searchPhrase: string;
-  onSearchPhraseChange: (searchPhrase: string) => void;
-}
-
-const hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };
-
-// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=HY1KvobxOReLeC8Z-4
-const SearchBar = forwardRef<TextInput, SearchBarProps>(
-  ({ style, placeholder, searchPhrase, onSearchPhraseChange, testID, ...textInputProps }, ref) => {
-    const colorScheme = useAppColorScheme();
-
-    const onClear = useCallback(() => {
-      onSearchPhraseChange('');
-    }, [onSearchPhraseChange]);
-
-    return (
-      <View
-        style={[
-          styles.container,
-          {
-            backgroundColor: colorScheme.white,
-          },
-          style,
-        ]}>
-        <SearchIcon color={colorScheme.text} style={styles.searchIcon} />
-        <TextInput
-          accessibilityRole="search"
-          onChangeText={onSearchPhraseChange}
-          placeholder={placeholder}
-          placeholderTextColor={colorScheme.text}
-          ref={ref}
-          returnKeyType="search"
-          style={[styles.textInput, { color: colorScheme.text }]}
-          value={searchPhrase}
-          testID={testID}
-          {...textInputProps}
-        />
-        {searchPhrase && (
-          <TouchableOpacity
-            testID={concatTestID(testID, 'clear')}
-            accessibilityRole="button"
-            hitSlop={hitSlop}
-            onPress={onClear}
-            style={styles.clearButton}>
-            <CloseIcon color={colorScheme.text} height={12} width={12} />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  },
-);
-
-SearchBar.displayName = 'SearchBar';
-
-const styles = StyleSheet.create({
-  clearButton: {
-    marginLeft: 6,
-    marginRight: 16,
-  },
-  container: {
-    alignItems: 'center',
-    borderRadius: 20,
-    borderWidth: 0,
-    flexDirection: 'row',
-    height: 40,
-  },
-  searchIcon: {
-    marginLeft: 8,
-    marginRight: 6,
-  },
-  textInput: {
-    ...font.regular,
-    flex: 1,
-    fontSize: 14,
-    height: 40,
-    letterSpacing: 0.2,
-    lineHeight: 18,
-    paddingBottom: Platform.OS === 'ios' ? 2 : undefined,
-  },
-});
-
-export default SearchBar;

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

@@ -1,22 +0,0 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React from '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 },
-};
-
-export { Basic as ErrorScreen };
-
-export default {
-  title: 'view/loading/Error Screen',
-  component: ErrorScreen,
-  parameters: {
-    noSafeArea: true,
-  },
-} as ComponentMeta<typeof ErrorScreen>;

package/src/state/error-screen.tsx

@@ -1,71 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { ScrollViewScreen } from '..';
-import { Button } from '../buttons';
-import { CredentialWarningIcon } from '../icons';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-
-export interface ErrorScreenButton {
-  testID?: string;
-  label: string;
-  disabled?: boolean;
-  onPress?: () => void;
-}
-
-export interface ErrorScreenProps {
-  testID?: string;
-  title: string;
-  subtitle: string;
-  button: ErrorScreenButton;
-}
-
-const ErrorScreen: FunctionComponent<ErrorScreenProps> = ({ testID, title, subtitle, button }) => {
-  const colorScheme = useAppColorScheme();
-
-  return (
-    <ScrollViewScreen
-      header={{
-        static: true,
-        title: title,
-      }}
-      modalPresentation
-      scrollView={{
-        testID,
-      }}>
-      <View style={[styles.wrapper, { backgroundColor: colorScheme.background }]}>
-        <View style={styles.warning}>
-          <CredentialWarningIcon height={42} width={42} />
-          <Typography color={colorScheme.text} preset="regular" style={styles.message}>
-            {subtitle}
-          </Typography>
-        </View>
-
-        {button ? (
-          <Button disabled={button.disabled} onPress={button.onPress} testID={button.testID} title={button.label} />
-        ) : undefined}
-      </View>
-    </ScrollViewScreen>
-  );
-};
-
-const styles = StyleSheet.create({
-  message: {
-    textAlign: 'center',
-  },
-  warning: {
-    alignItems: 'center',
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'center',
-  },
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    paddingHorizontal: 16,
-  },
-});
-
-export default ErrorScreen;

package/src/text/index.ts

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

package/src/text/typography.stories.tsx

@@ -1,70 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-import type { ColorValue } from 'react-native';
-
-import ColorSchemes from '../../storybook/colorScheme';
-import { ColorScheme, useAppColorScheme } from '../theme';
-import Typography from './typography';
-
-type ColorSchemeKey = keyof Omit<ColorScheme, 'darkMode'>;
-
-const Basic: ComponentStory<typeof Typography> = ({ color, ...args }) => {
-  const colorScheme = useAppColorScheme();
-  return <Typography {...args} color={colorScheme[color as ColorSchemeKey] as ColorValue} />;
-};
-
-Basic.args = {
-  children: 'Text',
-  preset: 'regular',
-  caps: false,
-  color: 'text',
-  align: 'left',
-  numberOfLines: 1,
-  ellipsizeMode: 'tail',
-};
-
-export { Basic as Typography };
-
-export default {
-  title: 'base/Typography',
-  component: Typography,
-  argTypes: {
-    preset: {
-      options: [
-        'xl',
-        'l',
-        'l/line-height-large',
-        'regular',
-        'm',
-        's',
-        's/line-height-capped',
-        's/line-height-small',
-        's/code',
-        'xs',
-        'xs/line-height-small',
-        'xs/code',
-      ],
-      control: { type: 'radio' },
-    },
-    color: {
-      options: Object.entries(ColorSchemes.procivis)
-        .filter(([_, value]) => typeof value === 'string')
-        .map(([key]) => key),
-      control: { type: 'select' },
-    },
-    align: {
-      options: ['left', 'center', 'right'],
-      control: { type: 'radio' },
-    },
-    ellipsizeMode: {
-      options: ['head', 'middle', 'tail', 'clip'],
-      control: { type: 'select' },
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1045-30326',
-    },
-  },
-} as ComponentMeta<typeof Typography>;

package/src/theme/color-scheme-context.tsx

@@ -1,48 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-
-import type { ColorScheme } from './color-scheme';
-
-const defaultColorScheme: ColorScheme = {
-  accent: '#0F151A',
-  accentText: '#EBF2F4',
-  background: '#F1F3F5',
-  backgroundScroll: 'rgba(241, 243, 245, 0.7)',
-  black: '#000000',
-  codeAccent: '#CFD2E7',
-  credentialHeaderBackground: 'rgba(255, 255, 255, 0.87)',
-  error: '#D90D0D',
-  grayDark: '#CDD4DA',
-  linkText: '#3F7BA6',
-  success: '#00D066',
-  successText: '#006B34',
-  text: '#0D0E10',
-  warning: '#F7BF0B',
-  white: '#FFFFFF',
-  darkMode: false,
-  nerdView: {
-    background: 'rgba(2, 4, 21, 0.95)',
-    attributeLabel: '#929497',
-    attributeValueBackground: 'rgba(255, 255, 255, 0.02)',
-    attributeValueBorder: 'rgba(255, 255, 255, 0.2)',
-    attributeSectionBackground: 'rgba(2, 4, 21, 0.8)',
-    button: 'rgba(255, 255, 255, 0.05)',
-    codeHighlightText: 'rgba(232, 135, 114, 1)',
-  },
-};
-
-const ColorSchemeContext = React.createContext<ColorScheme>(defaultColorScheme);
-ColorSchemeContext.displayName = 'ColorSchemeContext';
-
-export function ColorSchemeProvider<Scheme extends ColorScheme = ColorScheme>(
-  props: PropsWithChildren<{ colorScheme: Scheme }>,
-) {
-  return <ColorSchemeContext.Provider value={props.colorScheme}>{props.children}</ColorSchemeContext.Provider>;
-}
-
-/**
- * A hook to gain access to the current `ColorScheme`
- * @note A custom superset of `ColorScheme` can be used (must also be passed to the `ColorSchemeProvider`)
- */
-export function useAppColorScheme<Scheme extends ColorScheme = ColorScheme>(): Readonly<Scheme> {
-  return React.useContext(ColorSchemeContext) as Scheme;
-}

package/src/theme/color-scheme.ts

@@ -1,31 +0,0 @@
-/**
- * Color flavour of the application
- * colors according to figma design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=0-1
- */
-export interface ColorScheme {
-  accent: string;
-  accentText: string;
-  background: string;
-  backgroundScroll: string;
-  black: string;
-  codeAccent: string;
-  credentialHeaderBackground: string;
-  error: string;
-  grayDark: string;
-  linkText: string;
-  success: string;
-  successText: string;
-  text: string;
-  warning: string;
-  white: string;
-  darkMode: boolean;
-  nerdView: {
-    background: string;
-    attributeLabel: string;
-    attributeSectionBackground: string;
-    attributeValueBackground: string;
-    attributeValueBorder: string;
-    button: string;
-    codeHighlightText: string;
-  };
-}