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

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

@@ -1,16 +1,16 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/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 },
+const Basic: StoryObj<typeof GhostButton> = {
+  args: {
+    icon: CloseIcon,
+    style: { margin: 24 },
+  },
 };
 
+
 export { Basic as GhostButton };
 
 export default {
@@ -25,4 +25,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18650&t=KAAJ0oKY3xb6VNtA-4',
     },
   },
-} as ComponentMeta<typeof GhostButton>;
+} 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

@@ -1,9 +1,17 @@
-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';
+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,
@@ -19,6 +27,8 @@ export {
   FilterButtonProps,
   GhostButton,
   GhostButtonProps,
+  HoldButton,
+  HoldButtonProps,
   ScanButton,
   ScanButtonProps,
 };

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

@@ -1,14 +1,18 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import ScanButton from './scan-button';
+import ScanButton, { ScanButtonProps } from './scan-button';
 
-const Basic: ComponentStory<typeof ScanButton> = ({ style, ...args }) => {
+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 {
@@ -23,4 +27,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=527-88398&t=OcqD1XaEyN4BAsCn-4',
     },
   },
-} as ComponentMeta<typeof ScanButton>;
+} as Meta<typeof ScanButton>;

package/src/ui-components/control/checkbox.stories.tsx

@@ -1,13 +1,13 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta,StoryObj } from '@storybook/react';
 
 import { Checkbox } from './checkbox';
 
-const Basic: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
-Basic.args = {
-  text: 'Example text\non multiple\nlines',
-  value: true,
-  disabled: false,
+const Basic: StoryObj<typeof Checkbox> = {
+  args: {
+    text: 'Example text\non multiple\nlines',
+    value: true,
+    disabled: false,
+  },
 };
 
 export { Basic as Checkbox };
@@ -24,4 +24,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=621-21936&mode=dev',
     },
   },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;

package/src/ui-components/control/switch.stories.tsx

@@ -1,18 +1,21 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta,StoryObj } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { Switch } from './switch';
+import { Switch, SwitchProps } from './switch';
 
-const Basic: ComponentStory<typeof Switch> = ({ value, ...args }) => {
+const Render = ({ value, ...args }: SwitchProps) => {
   const [val, setVal] = useState(value);
   useEffect(() => setVal(value), [value]);
   return <Switch {...args} value={val} onChange={setVal} />;
 };
 
-Basic.args = {
-  value: true,
-  disabled: false,
-  style: { margin: 24 },
+const Basic: StoryObj<typeof Switch> = {
+  args: {
+    value: true,
+    disabled: false,
+    style: { margin: 24 },
+  },
+  render: Render,
 };
 
 export { Basic as Switch };
@@ -26,4 +29,4 @@ export default {
       url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=8%3A744&t=xeivYJN0RLNSObzn-4',
     },
   },
-} as ComponentMeta<typeof Switch>;
+} as Meta<typeof Switch>;

package/src/ui-components/credential/card/credential-card.stories.tsx

@@ -1,33 +1,30 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import CredentialCardBackground from '../../../../storybook/assets/CredentialCardBackground.png';
 import ColorSchemes from '../../../../storybook/colorScheme';
 import { CredentialNoticeWarningIcon, CredentialWarningIcon, RequiredAttributeIcon } from '../../icons/credential';
 import CredentialCard from './credential-card';
 
-const Basic: ComponentStory<typeof CredentialCard> = ({ ...args }) => {
-  return <CredentialCard {...args} />;
-};
-
-Basic.args = {
-  cardImage: { imageSource: CredentialCardBackground },
-  onHeaderPress: () => {},
-  color: undefined,
-  header: {
-    accessory: RequiredAttributeIcon,
-    credentialDetailPrimary: 'Primary detail',
-    credentialDetailSecondary: 'Secondary detail',
-    credentialDetailTestID: undefined,
-    credentialDetailErrorColor: false,
-    credentialName: 'Credential Name',
-    icon: undefined,
-    iconLabelColor: undefined,
-    statusIcon: CredentialWarningIcon,
-  },
-  notice: {
-    text: 'Notice related to the credential',
-    noticeIcon: CredentialNoticeWarningIcon,
+const Basic: StoryObj<typeof CredentialCard> = {
+  args: {
+    cardImage: { imageSource: CredentialCardBackground },
+    onHeaderPress: () => {},
+    color: undefined,
+    header: {
+      accessory: RequiredAttributeIcon,
+      credentialDetailPrimary: 'Primary detail',
+      credentialDetailSecondary: 'Secondary detail',
+      credentialDetailTestID: undefined,
+      credentialDetailErrorColor: false,
+      credentialName: 'Credential Name',
+      icon: undefined,
+      iconLabelColor: undefined,
+      statusIcon: CredentialWarningIcon,
+    },
+    notice: {
+      text: 'Notice related to the credential',
+      noticeIcon: CredentialNoticeWarningIcon,
+    },
   },
 };
 
@@ -51,4 +48,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-10041&mode=design&t=0DWIGZWyWYB7JzPE-0',
     },
   },
-} as ComponentMeta<typeof CredentialCard>;
+} as Meta<typeof CredentialCard>;