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

package/src/accessibility/accessibilityHistory.tsx

@@ -1,77 +0,0 @@
-import { useRoute } from '@react-navigation/native';
-import React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-
-import { useForwardedRef } from '../utils/ref';
-import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
-
-type AccessibilityRefComponent = React.Component | React.ComponentClass | null;
-interface AccessibilityRefContextValue {
-  setRef: (route: string, ref: AccessibilityRefComponent) => void;
-  getRef: (route: string) => AccessibilityRefComponent;
-}
-
-const accessibilityFocusHistoryContext = React.createContext<AccessibilityRefContextValue>({
-  setRef: () => {},
-  getRef: () => null,
-});
-
-/**
- * Adds app support for accessibility focus history
- */
-export const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const Provider = accessibilityFocusHistoryContext.Provider;
-  const refs = useRef<Record<string, AccessibilityRefComponent>>({});
-  const setRef = useCallback((route: string, ref: AccessibilityRefComponent) => {
-    refs.current[route] = ref;
-  }, []);
-  const getRef = useCallback((route: string) => {
-    return refs.current[route] ?? null;
-  }, []);
-  const value = useMemo(() => ({ setRef, getRef }), [getRef, setRef]);
-  return <Provider value={value}>{children}</Provider>;
-};
-
-/**
- * Wraps `onPress` handler and `ref` to support automatic accessibility focus on back navigation
- * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
- */
-export const useAccessibilityFocusHistory = <
-  Component extends React.Component<any> | React.ComponentClass<any>,
-  OnPress extends (...args: never[]) => void = () => void,
->(
-  pressHandler: OnPress | undefined,
-  passedRef?: React.Ref<Component>,
-) => {
-  const [forwardedRef, refObject] = useForwardedRef<Component>(passedRef);
-
-  const historyContext = useContext(accessibilityFocusHistoryContext);
-  const routeKey = useRoute().key;
-
-  const previouslyPressed = useRef(false);
-  const outsideTransition = useAccessibleAfterTransition();
-
-  useEffect(() => {
-    const isStoredInHistory = historyContext.getRef(routeKey) === refObject.current;
-    if (outsideTransition && isStoredInHistory && previouslyPressed.current) {
-      focusAccessibility(refObject.current);
-    }
-  }, [historyContext, outsideTransition, refObject, routeKey]);
-
-  useEffect(() => {
-    if (outsideTransition) {
-      previouslyPressed.current = false;
-    }
-  }, [outsideTransition]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onPress = useCallback(
-    ((...args) => {
-      previouslyPressed.current = true;
-      historyContext.setRef(routeKey, refObject.current);
-      return pressHandler?.(...args);
-    }) as OnPress,
-    [historyContext, routeKey, refObject, pressHandler],
-  );
-
-  return { onPress, ref: forwardedRef };
-};

package/src/accessibility/accessibilityHistoryWrappers.tsx

@@ -1,80 +0,0 @@
-/* eslint-disable no-restricted-imports */
-import React, { FC, ForwardedRef, forwardRef } from 'react';
-import {
-  GestureResponderEvent,
-  Pressable as RNPressable,
-  PressableProps,
-  TouchableHighlight as RNTouchableHighlight,
-  TouchableHighlightProps,
-  TouchableOpacity as RNTouchableOpacity,
-  TouchableOpacityProps,
-  TouchableWithoutFeedback as RNTouchableWithoutFeedback,
-  TouchableWithoutFeedbackProps,
-  View,
-} from 'react-native';
-
-import { useAccessibilityFocusHistory } from './accessibilityHistory';
-
-type RNOnPress = (event: GestureResponderEvent) => void;
-interface OnPressProps {
-  onPress?: RNOnPress | null;
-}
-
-const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefType extends React.Component>(
-  C: React.ComponentType<ComponentProps>,
-  displayName: string,
-) => {
-  type ForwardedProps = ComponentProps & {
-    forwardedRef: ForwardedRef<RefType>;
-  };
-
-  const ComponentWithAccessibilityFocusHistory: FC<ForwardedProps> = ({
-    forwardedRef,
-    onPress: originalOnPress,
-    ...props
-  }) => {
-    const { ref, onPress } = useAccessibilityFocusHistory<RefType, RNOnPress>(
-      originalOnPress ?? undefined,
-      forwardedRef,
-    );
-    // @ts-ignore
-    return <C ref={ref} onPress={onPress} {...props} />;
-  };
-
-  const Forwarded = forwardRef<RefType, ComponentProps>((props, ref) => (
-    <ComponentWithAccessibilityFocusHistory {...props} forwardedRef={ref} />
-  ));
-  Forwarded.displayName = displayName;
-
-  return Forwarded;
-};
-
-/**
- * Wrappers of RN touchable components with accessibilty focus history support
- */
-
-export const TouchableOpacity = WithAccessibilityFocusHistory<TouchableOpacityProps, RNTouchableOpacity>(
-  RNTouchableOpacity,
-  'TouchableOpacity',
-);
-export const TouchableWithoutFeedback = WithAccessibilityFocusHistory<
-  TouchableWithoutFeedbackProps,
-  RNTouchableWithoutFeedback
->(RNTouchableWithoutFeedback, 'TouchableWithoutFeedback');
-export const TouchableHighlight = WithAccessibilityFocusHistory<TouchableHighlightProps, RNTouchableHighlight>(
-  RNTouchableHighlight,
-  'TouchableHighlight',
-);
-export const Pressable = WithAccessibilityFocusHistory<PressableProps, View>(RNPressable, 'Pressable');
-
-type WrapperRefType<C extends React.ForwardRefExoticComponent<React.RefAttributes<any>>> =
-  C extends React.ForwardRefExoticComponent<React.RefAttributes<infer Ref>> ? Ref : never;
-
-/**
- * Ref types to be used in forwardRef for the wrappers
- */
-
-export type TouchableOpacityRef = WrapperRefType<typeof TouchableOpacity>;
-export type TouchableWithoutFeedbackRef = WrapperRefType<typeof TouchableWithoutFeedback>;
-export type TouchableHighlightRef = WrapperRefType<typeof TouchableHighlight>;
-export type PressableRef = WrapperRefType<typeof Pressable>;

package/src/accessibility/index.ts

@@ -1,35 +0,0 @@
-import {
-  AccessibilityTextTransformer,
-  focusAccessibility,
-  setAccessibilityTextTransformer,
-  transformAccessibilityText,
-  useAccessibilityAnnouncement,
-  useAccessibilityAnnouncementCumulative,
-  useAccessibilityFocus,
-  useAccessibleAfterTransition,
-  useIsOutsideTransition,
-} from './accessibility';
-import { AccessibilityFocusHistoryProvider, useAccessibilityFocusHistory } from './accessibilityHistory';
-import { AccessibilityLanguageProvider, AccessibilityLanguageProviderProps } from './accessibilityLanguage';
-// @ts-ignore
-import { AccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
-
-export * from './accessibilityHistoryWrappers';
-
-export {
-  AccessibilityFocusHistoryProvider,
-  AccessibilityLanguageFile,
-  AccessibilityLanguageProvider,
-  AccessibilityLanguageProviderProps,
-  AccessibilityTextTransformer,
-  focusAccessibility,
-  setAccessibilityTextTransformer,
-  SupportedAccessibilityLanguage,
-  transformAccessibilityText,
-  useAccessibilityAnnouncement,
-  useAccessibilityAnnouncementCumulative,
-  useAccessibilityFocus,
-  useAccessibilityFocusHistory,
-  useAccessibleAfterTransition,
-  useIsOutsideTransition,
-};

package/src/action-modal/ActionModal.stories.tsx

@@ -1,35 +0,0 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React, { useState } from 'react';
-import { View } from 'react-native';
-
-import { Button } from '../buttons';
-import { Typography } from '../text';
-import ActionModal from './ActionModal';
-
-const Basic: Story = () => {
-  const [visible, setVisible] = useState(false);
-  return (
-    <>
-      <Button title="Show modal" onPress={() => setVisible(true)} />
-      <ActionModal visible={visible}>
-        <View>
-          <Typography color={'white'}>Example text in modal</Typography>
-          <Button title="Hide modal" onPress={() => setVisible(false)} />
-        </View>
-      </ActionModal>
-    </>
-  );
-};
-
-export { Basic as ActionModal };
-
-export default {
-  title: 'base/Action Modal',
-  component: ActionModal,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=391-9097&t=WhKthlRU5MCuUWfw-0',
-    },
-  },
-} as ComponentMeta<typeof ActionModal>;

package/src/activity-indicator/activity-indicator.stories.tsx

@@ -1,21 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import ActivityIndicator from './activity-indicator';
-
-const Basic: ComponentStory<typeof ActivityIndicator> = (args) => <ActivityIndicator {...args} />;
-
-Basic.args = {};
-
-export { Basic as ActivityIndicator };
-
-export default {
-  title: 'base/activity/Activity Indicator',
-  component: ActivityIndicator,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=444-45709&node-type=symbol&t=OQxawbbArhzkDVkZ-0',
-    },
-  },
-} as ComponentMeta<typeof ActivityIndicator>;

package/src/blur/blur-view.tsx

@@ -1,82 +0,0 @@
-import { BlurView as RNBlurView, BlurViewProps as RNBlurViewProps } from '@react-native-community/blur';
-import React, { FC, PropsWithChildren, useMemo } from 'react';
-import { ColorValue, Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-
-import { useAppColorScheme } from '../theme';
-import { colorWithAlphaComponent } from '../utils/color';
-
-export interface BlurViewProps extends ViewProps {
-  blurAmount?: number;
-  color?: ColorValue;
-  darkMode?: boolean;
-  blurStyle: 'soft' | 'strong' | 'header';
-}
-
-const BACKGROUND_COLOR = {
-  light: 'rgba(255, 255, 255, 0.8)',
-  dark: 'rgba(16, 12, 12, 0.8)',
-  thickMaterialLight: 'rgba(255, 255, 255, 0.95)',
-  thickMaterialDark: 'rgba(16, 12, 12, 0.95)',
-  thinMaterialLight: 'rgba(255, 255, 255, 0.8)',
-  thinMaterialDark: 'rgba(16, 12, 12, 0.8)',
-};
-
-const BlurView: FC<PropsWithChildren<BlurViewProps>> = ({
-  blurAmount = 50,
-  blurStyle,
-  color,
-  darkMode,
-  children,
-  style,
-  ...props
-}) => {
-  const colorScheme = useAppColorScheme();
-  const themeDarkMode = colorScheme.darkMode;
-  const dark = darkMode ?? themeDarkMode;
-
-  const blurType: RNBlurViewProps['blurType'] = useMemo(() => {
-    if (blurStyle === 'header') {
-      return dark ? 'dark' : 'light';
-    } else if (blurStyle === 'soft') {
-      return dark ? 'thinMaterialDark' : 'thinMaterialLight';
-    } else {
-      return dark ? 'thickMaterialDark' : 'thickMaterialLight';
-    }
-  }, [blurStyle, dark]);
-
-  const backgroundStyle: ViewStyle | undefined = useMemo(() => {
-    if (blurStyle === 'header' && color === colorScheme.background) {
-      return { backgroundColor: '#00000005' };
-    }
-  }, [blurStyle, color, colorScheme.background]);
-
-  if (Platform.OS === 'ios') {
-    return (
-      <View style={[styles.wrapper, backgroundStyle, style]} {...props}>
-        <RNBlurView
-          blurAmount={blurAmount}
-          blurType={blurType}
-          reducedTransparencyFallbackColor={color as string}
-          style={StyleSheet.absoluteFill}
-        />
-        {children}
-      </View>
-    );
-  }
-
-  const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : BACKGROUND_COLOR[blurType];
-
-  return (
-    <View style={[{ backgroundColor }, style]} {...props}>
-      {children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    overflow: 'hidden',
-  },
-});
-
-export default BlurView;

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

@@ -1,31 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import BackButton, { BackButtonIcon } from './back-button';
-
-const Basic: ComponentStory<typeof BackButton> = (args) => <BackButton {...args} />;
-
-Basic.args = {
-  icon: BackButtonIcon.Back,
-  style: { margin: 24 },
-};
-
-export { Basic as BackButton };
-
-export default {
-  title: 'base/button/Back Button',
-  component: BackButton,
-  argTypes: {
-    icon: {
-      options: [BackButtonIcon.Back, BackButtonIcon.Close],
-      control: { type: 'radio' },
-    },
-    onPress: { action: 'onPress' },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18650&t=KAAJ0oKY3xb6VNtA-4',
-    },
-  },
-} as ComponentMeta<typeof BackButton>;

package/src/buttons/back-button.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from 'react';
-
-import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
-import { GhostButtonProps } from '../buttons/ghost-button';
-import { BackIcon, CloseIcon } from '../icons';
-import GhostButton from './ghost-button';
-
-export enum BackButtonIcon {
-  Back = 'back',
-  Close = 'close',
-}
-
-export type BackButtonProps = Omit<GhostButtonProps, 'accessibilityLabel'>;
-
-const BackButton: FC<BackButtonProps> = ({ style, icon = BackButtonIcon.Back, onPress, ...props }) => {
-  const t = useAccessibilityTranslation();
-
-  const Icon = icon === BackButtonIcon.Close ? CloseIcon : BackIcon;
-
-  return (
-    <GhostButton
-      accessibilityLabel={t(icon === BackButtonIcon.Close ? 'accessibility.nav.close' : 'accessibility.nav.back')}
-      icon={Icon}
-      onPress={onPress}
-      style={style}
-      {...props}
-    />
-  );
-};
-
-export default BackButton;

package/src/buttons/button.stories.tsx

@@ -1,29 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import { Button } from './button';
-
-const Basic: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-Basic.args = {
-  title: 'Title',
-  subtitle: '',
-  disabled: false,
-  style: { margin: 24 },
-};
-
-export { Basic as Button };
-
-export default {
-  title: 'base/button/Button',
-  component: Button,
-  argTypes: {
-    onPress: { action: 'onPress' },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389',
-    },
-  },
-} as ComponentMeta<typeof Button>;

package/src/buttons/button.tsx

@@ -1,169 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { GestureResponderEvent, Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';
-
-import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils';
-
-export enum ButtonType {
-  Border = 'border',
-  Primary = 'primary',
-  Secondary = 'secondary',
-  SmallTech = 'small-tech',
-}
-
-export interface ButtonProps extends TouchableOpacityProps {
-  type?: ButtonType;
-  title: string;
-  subtitle?: string;
-  disabled?: boolean;
-}
-
-const SLOP_VALUE = 10;
-const hitSlop: Insets = {
-  top: SLOP_VALUE,
-  bottom: SLOP_VALUE,
-  left: SLOP_VALUE,
-  right: SLOP_VALUE,
-};
-
-const ACTIVE_OPACITY: Record<ButtonType, number> = {
-  [ButtonType.Primary]: 0.8,
-  [ButtonType.Border]: 1,
-  [ButtonType.Secondary]: 1,
-  [ButtonType.SmallTech]: 0.5,
-};
-
-/**
- * Common button component
- *
- * follows design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389
- *
- * for bordered style just override `borderColor` in style
- */
-export const Button = React.forwardRef<TouchableOpacityRef, ButtonProps>(
-  ({ style, type = ButtonType.Primary, disabled, title, subtitle, onPressIn, onPressOut, testID, ...props }, ref) => {
-    const colorScheme = useAppColorScheme();
-    const [secondaryPressed, setSecondaryPressed] = useState(false);
-
-    const textColor = useMemo(() => {
-      switch (type) {
-        case ButtonType.Primary:
-          return colorScheme.accentText;
-        case ButtonType.Border:
-        case ButtonType.Secondary:
-          return colorScheme.text;
-        case ButtonType.SmallTech:
-          return colorScheme.codeAccent;
-      }
-    }, [type, colorScheme]);
-
-    const backgroundColor = useMemo(() => {
-      switch (type) {
-        case ButtonType.Primary:
-          return colorScheme.accent;
-        case ButtonType.Border:
-        case ButtonType.Secondary:
-          return secondaryPressed ? colorScheme.background : colorScheme.white;
-        case ButtonType.SmallTech:
-          return 'rgba(255, 255, 255, 0.05)';
-      }
-    }, [type, colorScheme, secondaryPressed]);
-
-    const borderColor = useMemo(() => {
-      switch (type) {
-        case ButtonType.Border:
-          return colorScheme.background;
-        default:
-          return backgroundColor;
-      }
-    }, [type, colorScheme.background, backgroundColor]);
-
-    const secondaryPressIn = useCallback(
-      (event: GestureResponderEvent) => {
-        setSecondaryPressed(true);
-        onPressIn?.(event);
-      },
-      [onPressIn],
-    );
-
-    const secondaryPressOut = useCallback(
-      (event: GestureResponderEvent) => {
-        setSecondaryPressed(false);
-        onPressOut?.(event);
-      },
-      [onPressOut],
-    );
-
-    return (
-      <TouchableOpacity
-        accessibilityRole="button"
-        activeOpacity={ACTIVE_OPACITY[type]}
-        hitSlop={hitSlop}
-        ref={ref}
-        style={[
-          styles.button,
-          subtitle ? styles.withSubtitle : undefined,
-          { backgroundColor, borderColor },
-          type === ButtonType.SmallTech && styles.techSmall,
-          style,
-        ]}
-        disabled={disabled}
-        onPressIn={type === ButtonType.Secondary ? secondaryPressIn : onPressIn}
-        onPressOut={type === ButtonType.Secondary ? secondaryPressOut : onPressOut}
-        testID={testID}
-        {...props}>
-        <View
-          style={[secondaryPressed && styles.secondaryPressedLabel, disabled && styles.disabled]}
-          testID={concatTestID(testID, disabled ? 'disabled' : 'enabled')}>
-          <Typography
-            preset={type === ButtonType.SmallTech ? 's' : 'regular'}
-            color={textColor}
-            align="center"
-            numberOfLines={1}>
-            {title}
-          </Typography>
-          {subtitle ? (
-            <Typography
-              preset="s/line-height-capped"
-              style={styles.subtitle}
-              color={textColor}
-              align="center"
-              numberOfLines={1}>
-              {subtitle}
-            </Typography>
-          ) : null}
-        </View>
-      </TouchableOpacity>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 12,
-    borderWidth: 1,
-    paddingHorizontal: 16,
-    paddingVertical: 20,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-  secondaryPressedLabel: {
-    opacity: 0.5,
-  },
-  subtitle: {
-    opacity: 0.8,
-  },
-  techSmall: {
-    borderRadius: 4,
-    paddingVertical: 12,
-  },
-  withSubtitle: {
-    paddingBottom: 12,
-    paddingTop: 8,
-  },
-});

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

@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import ConnectivityButton, { ConnectivityTransport } from './connectivity-button';
-
-const Basic: ComponentStory<typeof ConnectivityButton> = (args) => <ConnectivityButton {...args} />;
-
-Basic.args = {
-  available: true,
-  disabled: false,
-  status: true,
-  title: 'Connectivity message',
-  transport: ConnectivityTransport.Internet,
-};
-
-export { Basic as ConnectivityButton };
-
-export default {
-  title: 'base/button/Connectivity Button',
-  component: ConnectivityButton,
-  argTypes: {
-    transport: {
-      options: [ConnectivityTransport.Internet, ConnectivityTransport.Bluetooth, ConnectivityTransport.All],
-      control: { type: 'radio' },
-    },
-    onPress: { action: 'onPress' },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4237-32033&node-type=frame&t=TJ4R3WHLQ1CsXNeT-0',
-    },
-  },
-} as ComponentMeta<typeof ConnectivityButton>;