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

package/src/ui-components/buttons/button.tsx

@@ -0,0 +1,169 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { GestureResponderEvent, Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+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/ui-components/buttons/connectivity-button.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ConnectivityButton, { ConnectivityTransport } from './connectivity-button';
+
+const Basic: StoryObj<typeof ConnectivityButton> = {
+  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 Meta<typeof ConnectivityButton>;

package/src/ui-components/buttons/connectivity-button.tsx

@@ -0,0 +1,95 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableHighlight } from '../accessibility';
+import {
+  ConnectivityBluetoothOffIcon,
+  ConnectivityBluetoothOnIcon,
+  ConnectivityInternetOffIcon,
+  ConnectivityInternetOnIcon,
+  ConnectivityStatusIcon,
+} from '../icons/connectivity';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export enum ConnectivityTransport {
+  Internet = 'Internet',
+  Bluetooth = 'Bluetooth',
+  All = 'All',
+}
+
+export type ConnectivityButtonProps = {
+  available: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  status?: boolean;
+  title?: string;
+  transport: ConnectivityTransport;
+  testID?: string;
+};
+
+const ConnectivityButton: FC<ConnectivityButtonProps> = ({
+  available,
+  disabled,
+  onPress,
+  status,
+  title,
+  transport,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;
+  const opacity = disabled ? 0.7 : 1.0;
+  const icons = (
+    <View style={styles.icons}>
+      {transport !== ConnectivityTransport.Bluetooth &&
+        (available ? (
+          <ConnectivityInternetOnIcon testID={concatTestID(testID, 'icon.on')} />
+        ) : (
+          <ConnectivityInternetOffIcon testID={concatTestID(testID, 'icon.off')} />
+        ))}
+      {transport !== ConnectivityTransport.Internet &&
+        (available ? (
+          <ConnectivityBluetoothOnIcon testID={concatTestID(testID, 'icon.on')} />
+        ) : (
+          <ConnectivityBluetoothOffIcon testID={concatTestID(testID, 'icon.off')} />
+        ))}
+    </View>
+  );
+  return (
+    <TouchableHighlight onPress={onPress} style={styles.button} testID={testID}>
+      <View style={[styles.container, { backgroundColor, opacity }]}>
+        {icons}
+        {title && (
+          <Typography testID={concatTestID(testID, 'title')} color={colorScheme.text} preset="s">
+            {title}
+          </Typography>
+        )}
+        {status !== undefined && <ConnectivityStatusIcon status={status} />}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 20,
+    overflow: 'hidden',
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+  },
+  icons: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 5,
+  },
+});
+
+export default ConnectivityButton;

package/src/ui-components/buttons/ghost-button.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CloseIcon } from '../icons';
+import GhostButton from './ghost-button';
+
+const Basic: StoryObj<typeof GhostButton> = {
+  args: {
+    icon: CloseIcon,
+    style: { margin: 24 },
+  },
+};
+
+
+export { Basic as GhostButton };
+
+export default {
+  title: 'base/button/Ghost Button',
+  component: GhostButton,
+  argTypes: {
+    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 Meta<typeof GhostButton>;

package/src/ui-components/buttons/hold-button.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import HoldButton from './hold-button';
+
+const Basic: StoryObj<typeof HoldButton> = {
+  args: {
+    title: 'Title',
+    subtitlePrefix: 'subtitle prefix ',
+    subtitleSuffix: 'suffix',
+    disabled: false,
+    style: { margin: 24 },
+  },
+};
+
+export { Basic as HoldButton };
+
+export default {
+  title: 'base/button/HoldButton',
+  component: HoldButton,
+  argTypes: {
+    onFinished: { action: 'onFinished' },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/cCmAyBQrQWCQZuDi85pJfe/Procivis-One-Wallet-Developments-2025?node-id=1-882',
+    },
+  },
+} as Meta<typeof HoldButton>;

package/src/ui-components/buttons/hold-button.tsx

@@ -0,0 +1,276 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ColorValue, LayoutChangeEvent, StyleSheet, TouchableWithoutFeedbackProps, View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  runOnJS,
+  SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { TouchableWithoutFeedback, TouchableWithoutFeedbackRef } from '../accessibility/accessibilityHistoryWrappers';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export interface HoldButtonProps
+  extends Omit<
+    TouchableWithoutFeedbackProps,
+    'children' | 'onLayout' | 'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut'
+  > {
+  title: string;
+  subtitlePrefix: string;
+  subtitleSuffix: string;
+  holdTimeoutSecs?: number;
+  onFinished: () => void;
+}
+
+interface ContentProps {
+  title: string;
+  subtitlePrefix: string;
+  subtitleSuffix: string;
+  width: number;
+  height: number;
+  textColor: ColorValue;
+  progress: SharedValue<number>;
+  holdTimeoutSecs: number;
+  disabled?: boolean;
+}
+
+const Content = ({
+  title,
+  subtitlePrefix,
+  subtitleSuffix,
+  width,
+  height,
+  textColor,
+  progress,
+  holdTimeoutSecs,
+  disabled,
+}: ContentProps) => {
+  const nums = useMemo(
+    () => Array.from({ length: holdTimeoutSecs + 1 }).map((_, index) => holdTimeoutSecs - index),
+    [holdTimeoutSecs],
+  );
+
+  const [subtitleHeight, setSubtitleHeight] = useState<number>(0);
+  const onSubtitleLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    setSubtitleHeight(nativeEvent.layout.height);
+  }, []);
+
+  const translateY = useDerivedValue(
+    () => progress.value * subtitleHeight * holdTimeoutSecs,
+    [subtitleHeight, holdTimeoutSecs],
+  );
+  const movingUpStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -translateY.value }],
+  }), [translateY]);
+
+  return (
+    <View style={[styles.contentWrapper, disabled && styles.contentDisabled, { width, height }]} pointerEvents="none">
+      <Typography color={textColor} numberOfLines={1}>
+        {title}
+      </Typography>
+
+      <View style={[styles.subtitle, disabled && styles.subtitleDisabled]}>
+        <Typography onLayout={onSubtitleLayout} preset="s/line-height-capped" color={textColor} numberOfLines={1}>
+          {subtitlePrefix}
+        </Typography>
+        <View style={[styles.subtitleSecsWrapper, { height: subtitleHeight }]}>
+          <Animated.View style={[styles.subtitleSecs, movingUpStyle]}>
+            {nums.map((val) => (
+              <Typography key={val} preset="s/line-height-capped" color={textColor} numberOfLines={1}>
+                {val}
+              </Typography>
+            ))}
+          </Animated.View>
+        </View>
+        <Typography preset="s/line-height-capped" color={textColor} numberOfLines={1}>
+          {subtitleSuffix}
+        </Typography>
+      </View>
+    </View>
+  );
+};
+
+interface HoldButtonLayoutedProps extends Omit<HoldButtonProps, 'style'> {
+  ref: React.ForwardedRef<TouchableWithoutFeedbackRef>;
+  width: number;
+  height: number;
+}
+
+const HoldButtonLayouted = ({
+  title,
+  subtitlePrefix,
+  subtitleSuffix,
+  onFinished,
+  holdTimeoutSecs = 3,
+  width,
+  height,
+  disabled,
+  ref,
+  ...props
+}: HoldButtonLayoutedProps) => {
+  const colorScheme = useAppColorScheme();
+
+  const [isFinished, setFinished] = useState(false);
+  useEffect(() => {
+    if (isFinished) {
+      onFinished();
+    }
+  }, [isFinished, onFinished]);
+
+  const progress = useSharedValue(0);
+
+  const onLongPress = useCallback(() => {
+    // Fix for detox bug https://github.com/wix/Detox/issues/4754
+    if (isFinished || progress.value !== 0) {
+      return;
+    }
+    setFinished(true);
+  }, [progress, isFinished]);
+
+  const onPressIn = useCallback(() => {
+    const holdTimeout = holdTimeoutSecs * 1000;
+
+    // start moving forward
+    progress.value = withTiming(
+      1,
+      {
+        duration: (1 - progress.value) * holdTimeout,
+        easing: Easing.linear,
+      },
+      (finished) => {
+        if (finished) {
+          runOnJS(setFinished)(true);
+        } else {
+          // start moving back
+          progress.value = withTiming(0, {
+            duration: progress.value * holdTimeout,
+            easing: Easing.linear,
+          });
+        }
+      },
+    );
+  }, [holdTimeoutSecs, progress]);
+
+  const onPressOut = useCallback(() => cancelAnimation(progress), [progress]);
+
+  const translateX = useDerivedValue(() => progress.value * width, [width]);
+  const movingRightStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }), [translateX]);
+  const movingLeftStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -translateX.value }],
+  }), [translateX]);
+
+  const contentProps = useMemo(
+    () => ({ title, subtitlePrefix, subtitleSuffix, progress, holdTimeoutSecs, width, height }),
+    [title, subtitlePrefix, subtitleSuffix, progress, holdTimeoutSecs, width, height],
+  );
+
+  return (
+    <>
+      <Content textColor={colorScheme.accent} disabled={disabled} {...contentProps} />
+      {!disabled && (
+        <Animated.View style={[styles.movingLayer, { backgroundColor: colorScheme.accent }, movingRightStyle]}>
+          <Animated.View style={movingLeftStyle}>
+            <Content textColor={colorScheme.accentText} {...contentProps} />
+          </Animated.View>
+        </Animated.View>
+      )}
+      <View style={styles.pressableLayer}>
+        <TouchableWithoutFeedback
+          accessibilityRole="button"
+          ref={ref}
+          disabled={isFinished || disabled}
+          onLongPress={onLongPress}
+          onPressIn={isFinished ? undefined : onPressIn}
+          onPressOut={isFinished ? undefined : onPressOut}
+          {...props}>
+          <View style={{ width, height }} />
+        </TouchableWithoutFeedback>
+      </View>
+    </>
+  );
+};
+
+/**
+ * Press and hold button component
+ *
+ * follows design: https://www.figma.com/design/cCmAyBQrQWCQZuDi85pJfe/Procivis-One-Wallet-Developments-2025?node-id=1-871
+ */
+const HoldButton = React.forwardRef<TouchableWithoutFeedbackRef, HoldButtonProps>(
+  ({ style, disabled, ...props }, ref) => {
+    const colorScheme = useAppColorScheme();
+
+    const [layout, setLayout] = useState<{ width: number; height: number }>();
+    const onContainerLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+      setLayout({ width: nativeEvent.layout.width, height: nativeEvent.layout.height });
+    }, []);
+
+    return (
+      <View
+        onLayout={onContainerLayout}
+        style={[
+          styles.container,
+          disabled && styles.disabled,
+          {
+            backgroundColor: disabled ? colorScheme.white : colorScheme.background,
+            borderColor: colorScheme.background,
+          },
+          style,
+        ]}>
+        {layout && <HoldButtonLayouted ref={ref} disabled={disabled} {...props} {...layout} />}
+      </View>
+    );
+  },
+);
+
+HoldButton.displayName = 'HoldButton';
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    height: 68,
+    overflow: 'hidden',
+  },
+  contentDisabled: {
+    opacity: 0.4,
+  },
+  contentWrapper: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: 16,
+    paddingHorizontal: 24,
+    paddingTop: 12,
+  },
+  disabled: {
+    borderWidth: 1,
+  },
+  movingLayer: {
+    overflow: 'hidden',
+    position: 'absolute',
+  },
+  pressableLayer: {
+    position: 'absolute',
+  },
+  subtitle: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    opacity: 0.8,
+  },
+  subtitleDisabled: {
+    opacity: 1,
+  },
+  subtitleSecs: {
+    alignItems: 'center',
+  },
+  subtitleSecsWrapper: {
+    overflow: 'hidden',
+  },
+});
+
+export default HoldButton;

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

@@ -0,0 +1,34 @@
+import type { BackButtonProps } from './back-button';
+import BackButton, { BackButtonIcon } from './back-button';
+import type { ButtonProps } from './button';
+import { Button, ButtonType } from './button';
+import type { ConnectivityButtonProps } from './connectivity-button';
+import ConnectivityButton, { ConnectivityTransport } from './connectivity-button';
+import type { FilterButtonProps } from './filter-button';
+import FilterButton from './filter-button';
+import type { GhostButtonProps } from './ghost-button';
+import GhostButton from './ghost-button';
+import type { HoldButtonProps } from './hold-button';
+import HoldButton from './hold-button';
+import type { ScanButtonProps } from './scan-button';
+import ScanButton from './scan-button';
+
+export {
+  BackButton,
+  BackButtonIcon,
+  BackButtonProps,
+  Button,
+  ButtonProps,
+  ButtonType,
+  ConnectivityButton,
+  ConnectivityButtonProps,
+  ConnectivityTransport,
+  FilterButton,
+  FilterButtonProps,
+  GhostButton,
+  GhostButtonProps,
+  HoldButton,
+  HoldButtonProps,
+  ScanButton,
+  ScanButtonProps,
+};

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import ScanButton, { ScanButtonProps } from './scan-button';
+
+const Render = ({ style, ...args }: ScanButtonProps) => {
+  const insets = useSafeAreaInsets();
+  return <ScanButton {...args} style={[{ marginVertical: Math.max(24, insets.top) }, style]} />;
+};
+
+const Basic: StoryObj<typeof ScanButton> = {
+  render: Render,
+};
+
+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 Meta<typeof ScanButton>;