@procivis/one-react-native-components 0.1.63

package/src/action-modal/index.ts

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

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

@@ -0,0 +1,21 @@
+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/activity-indicator/activity-indicator.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+
+import LoaderView, { LoaderViewState } from '../loader/loader';
+
+type ActivityIndicatorProps = ViewProps & {
+  animate?: boolean;
+};
+
+const ActivityIndicator: FC<ActivityIndicatorProps> = ({ animate = true, style, ...props }) => {
+  return (
+    <View {...props} style={[styles.wrapper, style]}>
+      <LoaderView animate={animate} state={LoaderViewState.InProgress} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+  },
+});
+
+export default ActivityIndicator;

package/src/activity-indicator/index.ts

@@ -0,0 +1,3 @@
+import ActivityIndicator from './activity-indicator';
+
+export { ActivityIndicator };

package/src/blur/blur-view.tsx

@@ -0,0 +1,82 @@
+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/blur/index.ts

@@ -0,0 +1,3 @@
+import BlurView, { BlurViewProps } from './blur-view';
+
+export { BlurView, BlurViewProps };

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

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

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

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

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

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

package/src/buttons/connectivity-button.tsx

@@ -0,0 +1,95 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { TouchableHighlight } from '../accessibility';
+import {
+  ConnectivityBluetoothOffIcon,
+  ConnectivityBluetoothOnIcon,
+  ConnectivityInternetOffIcon,
+  ConnectivityInternetOnIcon,
+  ConnectivityStatusIcon,
+} from '../icons/connectivity';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import { concatTestID } from '../utils';
+
+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}>
+      <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/buttons/filter-button.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { Insets, StyleSheet, TouchableOpacityProps } from 'react-native';
+
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { FilterIcon } from '../icons/icons';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+export type FilterButtonProps = TouchableOpacityProps & {
+  active: boolean;
+};
+
+const hitslop: Insets = { bottom: 10, left: 10, right: 10, top: 10 };
+
+const FilterButton: FC<FilterButtonProps> = ({ active, style, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityState={{ selected: active }}
+      hitSlop={hitslop}
+      style={[styles.button, { backgroundColor: active ? colorScheme.accent : undefined }, style]}
+      {...props}>
+      <FilterIcon color={active ? colorScheme.white : colorScheme.accent} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    borderRadius: 20,
+    height: 40,
+    justifyContent: 'center',
+    width: 40,
+  },
+});
+
+export default FilterButton;

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

@@ -0,0 +1,28 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { CloseIcon } from '../icons';
+import GhostButton from './ghost-button';
+
+const Basic: ComponentStory<typeof GhostButton> = (args) => <GhostButton {...args} />;
+
+Basic.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 ComponentMeta<typeof GhostButton>;

package/src/buttons/ghost-button.tsx

@@ -0,0 +1,56 @@
+import React, { FC, ReactNode, useMemo } from 'react';
+import { Insets, StyleProp, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type { SvgProps } from 'react-native-svg';
+
+import { useAccessibleAfterTransition } from '../accessibility';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { useAppColorScheme } from '../theme';
+
+export type GhostButtonProps = TouchableOpacityProps & {
+  accessibilityLabel: string;
+  icon?: FC<SvgProps> | ReactNode;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };
+
+const GhostButton: FC<GhostButtonProps> = ({ accessibilityLabel, icon, onPress, style, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  const accessible = useAccessibleAfterTransition();
+
+  const iconElement = useMemo(() => {
+    if (React.isValidElement(icon)) {
+      return icon;
+    }
+    const Icon = icon as FC<SvgProps>;
+    return <Icon color={colorScheme.text} />;
+  }, [colorScheme.text, icon]);
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessible={accessible}
+      hitSlop={hitSlop}
+      onPress={onPress}
+      style={[styles.button, style]}
+      {...props}>
+      {iconElement}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    borderRadius: 12,
+    height: 24,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    width: 24,
+  },
+});
+
+export default GhostButton;

package/src/buttons/index.ts

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