@ledgerhq/lumen-ui-rnative 0.1.8 → 0.1.9

package/src/lib/Components/TabBar/TabBar.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 import Animated, {
-  Easing,
+  cancelAnimation,
   useAnimatedStyle,
   useSharedValue,
   withDelay,
@@ -16,6 +16,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Placeholder } from '../../Symbols';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
@@ -24,63 +25,43 @@ import { TabBarItemProps, TabBarProps } from './types';
 export const TAB_BAR_HEIGHT = 60;
 const PILL_INSET = 4;
 
-/**
- * Individual tab item component that displays an icon and label.
- * Must be used as a child of TabBar.
- *
- * @example
- * <TabBarItem value="home" label="Home" icon={HomeFill} activeIcon={HomeActive} />
- */
-export function TabBarItem({
-  value,
-  label,
-  icon,
-  activeIcon,
-  style,
-  ...props
-}: TabBarItemProps) {
-  const styles = useStyles();
-  const { active, onTabPress } = useTabBarContext();
-
-  const isActive = active === value;
+const useTabBarItemAnimations = ({ isActive }: { isActive: boolean }) => {
   const activeProgress = useSharedValue(isActive ? 1 : 0);
   const pressProgress = useSharedValue(1);
 
-  const Icon = icon ?? Placeholder;
-  const ActiveIcon = activeIcon ?? Icon;
+  const activeTimingConfig = useTimingConfig({
+    duration: 200,
+    easing: 'easeInOut',
+  });
+
+  const pressInTimingConfig = useTimingConfig({
+    duration: 100,
+    easing: 'easeOut',
+  });
+
+  const pressOutTimingConfig = useTimingConfig({
+    duration: 100,
+    easing: 'easeOut',
+  });
 
   useEffect(() => {
     activeProgress.value = withDelay(
       50,
-      withTiming(isActive ? 1 : 0, {
-        duration: 200,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-      }),
+      withTiming(isActive ? 1 : 0, activeTimingConfig),
     );
-  }, [isActive, activeProgress]);
+    return () => cancelAnimation(activeProgress);
+  }, [isActive, activeProgress, activeTimingConfig]);
 
-  function onPress() {
-    onTabPress(value);
-  }
+  const onPressIn = () => {
+    pressProgress.value = withTiming(0.9, pressInTimingConfig);
+  };
 
-  function onPressIn() {
-    pressProgress.value = withTiming(0.9, {
-      duration: 100,
-      easing: Easing.bezier(0, 0, 0.2, 1),
-    });
-  }
-
-  function onPressOut() {
+  const onPressOut = () => {
     pressProgress.value = withSequence(
-      withTiming(0.95, {
-        duration: 0,
-      }),
-      withTiming(1, {
-        duration: 120,
-        easing: Easing.out(Easing.quad),
-      }),
+      withTiming(0.95, { duration: 0 }),
+      withTiming(1, pressOutTimingConfig),
     );
-  }
+  };
 
   const scaleStyle = useAnimatedStyle(
     () => ({
@@ -103,6 +84,108 @@ export function TabBarItem({
     [activeProgress],
   );
 
+  return {
+    onPressIn,
+    onPressOut,
+    scaleStyle,
+    activeIconStyle,
+    inactiveIconStyle,
+  };
+};
+
+const useTabBarPillLayout = ({
+  active,
+  children,
+}: {
+  active: string;
+  children: React.ReactNode;
+}) => {
+  const pillProgress = useSharedValue(0);
+  const itemWidth = useSharedValue(0);
+  const itemHeight = useSharedValue(0);
+  const hasLayoutRef = useRef(false);
+
+  const timingConfig = useTimingConfig({
+    duration: 300,
+    easing: 'easeInOut',
+  });
+
+  const getActiveIndex = useCallback((): number => {
+    return React.Children.toArray(children).findIndex((child) => {
+      if (React.isValidElement<TabBarItemProps>(child)) {
+        return child.props.value === active;
+      }
+      return false;
+    });
+  }, [active, children]);
+
+  const onLayout = (e: LayoutChangeEvent): void => {
+    const { width, height } = e.nativeEvent.layout;
+    const count = React.Children.count(children);
+    const slotWidth = (width - PILL_INSET * 2) / count;
+
+    itemWidth.value = slotWidth;
+    itemHeight.value = height;
+
+    if (!hasLayoutRef.current) {
+      hasLayoutRef.current = true;
+      const index = getActiveIndex();
+      if (index >= 0) {
+        pillProgress.value = index * slotWidth;
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!hasLayoutRef.current) return;
+    const index = getActiveIndex();
+
+    if (index >= 0 && itemWidth.value > 0) {
+      pillProgress.value = withTiming(index * itemWidth.value, timingConfig);
+    }
+
+    return () => cancelAnimation(pillProgress);
+  }, [itemWidth, pillProgress, getActiveIndex, timingConfig]);
+
+  const animatedPillStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: pillProgress.value }],
+      width: itemWidth.value,
+      height: itemHeight.value - PILL_INSET * 2,
+    }),
+    [pillProgress, itemWidth, itemHeight],
+  );
+
+  return { onLayout, animatedPillStyle };
+};
+
+export function TabBarItem({
+  value,
+  label,
+  icon,
+  activeIcon,
+  style,
+  ...props
+}: TabBarItemProps) {
+  const styles = useStyles();
+  const { active, onTabPress } = useTabBarContext();
+
+  const isActive = active === value;
+  const Icon = icon ?? Placeholder;
+  const ActiveIcon = activeIcon ?? Icon;
+
+  const {
+    onPressIn,
+    onPressOut,
+    scaleStyle,
+    activeIconStyle,
+    inactiveIconStyle,
+  } = useTabBarItemAnimations({ isActive });
+
+  function onPress() {
+    onTabPress(value);
+  }
+
   return (
     <Pressable
       style={StyleSheet.flatten([styles.item, style])}
@@ -166,65 +249,15 @@ export function TabBar({
   const styles = useStyles();
   const { theme, colorScheme } = useTheme();
 
-  const pillProgress = useSharedValue(0);
-  const itemWidth = useSharedValue(0);
-  const itemHeight = useSharedValue(0);
-  const hasLayoutRef = useRef(false);
-
-  const getActiveIndex = useCallback((): number => {
-    return React.Children.toArray(children).findIndex((child) => {
-      if (React.isValidElement<TabBarItemProps>(child)) {
-        return child.props.value === active;
-      }
-      return false;
-    });
-  }, [active, children]);
-
-  function onLayout(e: LayoutChangeEvent) {
-    const { width, height } = e.nativeEvent.layout;
-
-    const count = React.Children.count(children);
-    const slotWidth = (width - PILL_INSET * 2) / count;
-
-    itemWidth.value = slotWidth;
-    itemHeight.value = height;
-
-    if (!hasLayoutRef.current) {
-      hasLayoutRef.current = true;
-      const index = getActiveIndex();
-      if (index >= 0) {
-        pillProgress.value = index * slotWidth;
-      }
-    }
-  }
+  const { onLayout, animatedPillStyle } = useTabBarPillLayout({
+    active,
+    children,
+  });
 
   function handleTabPress(value: string) {
     onTabPress?.(value);
   }
 
-  useEffect(() => {
-    if (!hasLayoutRef.current) {
-      return;
-    }
-    const index = getActiveIndex();
-
-    if (index >= 0 && itemWidth.value > 0) {
-      pillProgress.value = withTiming(index * itemWidth.value, {
-        duration: 300,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-      });
-    }
-  }, [itemWidth, pillProgress, getActiveIndex]);
-
-  const animatedPillStyle = useAnimatedStyle(
-    () => ({
-      transform: [{ translateX: pillProgress.value }],
-      width: itemWidth.value,
-      height: itemHeight.value - PILL_INSET * 2,
-    }),
-    [pillProgress, itemWidth, itemHeight],
-  );
-
   return (
     <TabBarContextProvider value={{ active, onTabPress: handleTabPress }}>
       <Box

package/src/lib/Components/index.ts

@@ -5,6 +5,7 @@ export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';
+export * from './Card';
 export * from './CardButton';
 export * from './ContentBanner';
 export * from './Checkbox';

package/src/lib/Haptics/index.ts

@@ -0,0 +1,3 @@
+export { triggerHapticFeedback } from './triggerHapticFeedback';
+export { useHapticFeedbackWithPressIn } from './useHapticFeedbackWithPressIn';
+export type { HapticFeedback as ImpactFeedbackStyle } from './types';

package/src/lib/Haptics/triggerHapticFeedback.ts

@@ -0,0 +1,14 @@
+import * as Haptics from 'expo-haptics';
+import type { HapticFeedback } from './types';
+
+/**
+ * Triggers haptic impact feedback using expo-haptics.
+ * Uses impact feedback on both iOS and Android.
+ */
+export const triggerHapticFeedback = (feedback: HapticFeedback): void => {
+  void Haptics.impactAsync(feedback as Haptics.ImpactFeedbackStyle).catch(
+    () => {
+      /* empty */
+    },
+  );
+};

package/src/lib/Haptics/types.ts

@@ -0,0 +1,13 @@
+/**
+ * Impact feedback style for haptic feedback on press.
+ *
+ * Uses expo-haptics impact feedback. Maps to ImpactFeedbackStyle on both
+ * iOS (UIImpactFeedbackStyle) and Android (simulated via Vibrator).
+ *
+ * - `'light'`  — Quick, subtle tap
+ * - `'medium'` — Moderate impact
+ * - `'heavy'`  — Strong, pronounced impact
+ * - `'soft'`   — Soft collision (large compression/elasticity)
+ * - `'rigid'`  — Rigid collision (small compression/elasticity)
+ */
+export type HapticFeedback = 'light' | 'medium' | 'heavy' | 'soft' | 'rigid';

package/src/lib/Haptics/useHapticFeedbackWithPressIn.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { triggerHapticFeedback } from './triggerHapticFeedback';
+import type { HapticFeedback } from './types';
+
+export type UseHapticFeedbackWithPressInParams = {
+  hapticFeedback?: HapticFeedback;
+  onPressIn?: (event: GestureResponderEvent) => void;
+};
+
+export const useHapticFeedbackWithPressIn = ({
+  hapticFeedback,
+  onPressIn,
+}: UseHapticFeedbackWithPressInParams): {
+  handlePressIn: ((event: GestureResponderEvent) => void) | undefined;
+} => {
+  const handlerFn = useCallback(
+    (event: GestureResponderEvent) => {
+      if (hapticFeedback) {
+        triggerHapticFeedback(hapticFeedback);
+      }
+      onPressIn?.(event);
+    },
+    [hapticFeedback, onPressIn],
+  );
+
+  const hasPressInHandler = Boolean(hapticFeedback || onPressIn);
+  return {
+    handlePressIn: hasPressInHandler ? handlerFn : undefined,
+  };
+};

package/src/styles/lx/createStyledPressable.tsx

@@ -5,6 +5,8 @@ import type {
   PressableStateCallbackType,
   ViewStyle,
 } from 'react-native';
+import { useHapticFeedbackWithPressIn } from '../../lib/Haptics';
+import type { HapticFeedback } from '../../lib/Haptics/types';
 import { StyledPressableProps, PressableStyleItem } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
 import { useResolveViewStyle } from './resolveStyle';
@@ -40,26 +42,52 @@ const resolveStyleFunctions = (
  * Factory function to create a styled Pressable component.
  *
  * Supports `style` as an object, function, or array of objects/functions (including nested).
+ * Supports `hapticFeedback` to trigger vibration on press-in (`true` = medium, or an impact style string).
  *
  * ```tsx
  * // Create a styled Pressable
  * const Pressable = createStyledPressable(RNPressable);
  *
+ * // Usage with haptic feedback
+ * <Pressable hapticFeedback onPress={handlePress} />
+ * <Pressable hapticFeedback="light" onPress={handlePress} />
+ *
  * // Usage with array of styles
  * <Pressable style={[props.style, ({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })]} />
  * ```
  */
 export const createStyledPressable = (Component: typeof Pressable) => {
   const StyledComponent = memo(
-    ({ lx = {}, ref, style, ...props }: StyledPressableProps) => {
+    ({
+      lx = {},
+      ref,
+      style,
+      hapticFeedback,
+      onPressIn,
+      ...props
+    }: StyledPressableProps) => {
       const resolvedStyle = useResolveViewStyle(lx);
+      const intensity: HapticFeedback | undefined =
+        hapticFeedback === true ? 'medium' : (hapticFeedback ?? undefined);
+
+      const { handlePressIn } = useHapticFeedbackWithPressIn({
+        hapticFeedback: intensity,
+        onPressIn: onPressIn ?? undefined,
+      });
 
       if (!hasStyleFunction(style)) {
         const finalStyle = StyleSheet.flatten([
           style as ViewStyle,
           resolvedStyle,
         ]);
-        return <Component ref={ref} {...props} style={finalStyle} />;
+        return (
+          <Component
+            ref={ref}
+            {...props}
+            {...(handlePressIn !== undefined && { onPressIn: handlePressIn })}
+            style={finalStyle}
+          />
+        );
       }
 
       const mergedStyle = (state: PressableStateCallbackType): ViewStyle => {
@@ -67,7 +95,14 @@ export const createStyledPressable = (Component: typeof Pressable) => {
         return StyleSheet.flatten([resolvedBareStyle, resolvedStyle]);
       };
 
-      return <Component ref={ref} {...props} style={mergedStyle} />;
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          {...(handlePressIn !== undefined && { onPressIn: handlePressIn })}
+          style={mergedStyle}
+        />
+      );
     },
     areLxPropsEqual,
   );

package/src/styles/types/factories.types.ts

@@ -9,6 +9,7 @@ import {
   View as RNView,
   Pressable as RNPressable,
 } from 'react-native';
+import type { ImpactFeedbackStyle } from '../../lib/Haptics';
 import { LumenTextStyle, LumenViewStyle } from './lx.types';
 import { LumenTypographyTokenName } from './theme.types';
 
@@ -58,5 +59,11 @@ export type StyledPressableProps = {
    * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
    */
   lx?: LumenViewStyle;
+  /**
+   * Triggers haptic feedback on press-in.
+   * - `true` — default medium intensity.
+   * - Impact style: `"light"` | `"medium"` | `"heavy"` | `"soft"` | `"rigid"`.
+   */
+  hapticFeedback?: ImpactFeedbackStyle | true;
 } & ExtendRNPressableProps &
   ComponentPropsWithRef<typeof RNPressable>;

package/.storybook/Decorator.tsx

@@ -1,123 +0,0 @@
-import {
-  enterpriseThemes,
-  ledgerLiveThemes,
-  websitesThemes,
-} from '@ledgerhq/lumen-design-core';
-import {
-  DocsContainer,
-  DocsContainerProps,
-} from '@storybook/addon-docs/blocks';
-import type { Decorator } from '@storybook/react-native-web-vite';
-import { PropsWithChildren, ReactNode } from 'react';
-
-import { ColorSchemeName } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { BottomSheetModalProvider, ThemeProvider } from '../src/lib/Components';
-
-type BrandThemes = typeof ledgerLiveThemes;
-
-const mappingThemes: Record<string, BrandThemes> = {
-  'ledger-live': ledgerLiveThemes,
-  enterprise: enterpriseThemes as unknown as BrandThemes,
-  websites: websitesThemes as unknown as BrandThemes,
-};
-
-const getThemeFromGlobals = (
-  mode?: ColorSchemeName | string,
-  brand?: string,
-): { mode: ColorSchemeName; theme: BrandThemes } => ({
-  mode: (mode as ColorSchemeName) ?? 'light',
-  theme: mappingThemes[brand ?? 'ledger-live'] ?? mappingThemes['ledger-live'],
-});
-
-type StorybookProvidersProps = PropsWithChildren<{
-  mode: ColorSchemeName;
-  theme: BrandThemes;
-}>;
-
-const StorybookProviders = ({
-  mode,
-  theme,
-  children,
-}: StorybookProvidersProps) => (
-  <ThemeProvider colorScheme={mode} themes={theme}>
-    <GestureHandlerRootView
-      style={{ flex: 1, width: '100%', alignItems: 'flex-start' }}
-    >
-      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-    </GestureHandlerRootView>
-  </ThemeProvider>
-);
-
-const createThemeDecorator = (
-  globalName: string,
-  themeClasses: string[],
-): Decorator => {
-  return (Story, context) => {
-    const selectedValue = context.globals[globalName] as string | undefined;
-    const htmlElement = document.documentElement;
-
-    htmlElement.classList.remove(...themeClasses);
-
-    if (selectedValue) {
-      htmlElement.classList.add(selectedValue);
-    }
-
-    return <Story />;
-  };
-};
-
-export const withBrandDecorator = createThemeDecorator('brand', [
-  'ledger-live',
-  'enterprise',
-  'websites',
-]);
-
-export const withModeDecorator = createThemeDecorator('mode', [
-  'light',
-  'dark',
-]);
-
-export const withProvidersDecorator: Decorator = (Story, context) => {
-  const { mode, theme } = getThemeFromGlobals(
-    context.globals.mode,
-    context.globals.brand,
-  );
-
-  return (
-    <StorybookProviders mode={mode} theme={theme}>
-      <Story />
-    </StorybookProviders>
-  );
-};
-
-type DocsContainerContext = {
-  store: {
-    globals: {
-      globals: {
-        mode?: ColorSchemeName;
-        brand?: string;
-      };
-    };
-  };
-};
-
-export const withProvidersDocsContainer = ({
-  children,
-  context,
-  ...rest
-}: PropsWithChildren<DocsContainerProps>): ReactNode => {
-  const docsContext = context as unknown as DocsContainerContext;
-  const { mode, theme } = getThemeFromGlobals(
-    docsContext.store?.globals?.globals?.mode,
-    docsContext.store?.globals?.globals?.brand,
-  );
-
-  return (
-    <DocsContainer context={context} {...rest}>
-      <StorybookProviders mode={mode} theme={theme}>
-        {children}
-      </StorybookProviders>
-    </DocsContainer>
-  );
-};

package/.storybook/components/CustomTabs.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Box, Pressable, Text } from '../../src/lib/Components/Utility';
-import { Folder } from '../../src/lib/Symbols/Icons/Folder';
-
-type TabProps = {
-  label: string;
-  children: React.ReactNode;
-};
-
-type CustomTabsProps = {
-  children: React.ReactNode;
-};
-
-export const CustomTabs = ({ children }: CustomTabsProps) => {
-  const [active, setActive] = React.useState<number>(0);
-
-  // Extract Tab components from children
-  const tabs = React.Children.toArray(children).filter(
-    (child): child is React.ReactElement<TabProps> =>
-      React.isValidElement(child) && child.type === Tab,
-  );
-
-  if (tabs.length === 0) {
-    return (
-      <Text typography='body3' lx={{ color: 'muted' }}>
-        No tabs found
-      </Text>
-    );
-  }
-
-  return (
-    <Box style={{ maxWidth: '100%' }}>
-      {/* Tab buttons */}
-      <Box lx={{ flexDirection: 'row', gap: 's24', marginBottom: 's24' }}>
-        {tabs.map((tab, idx) => {
-          const isActive = active === idx;
-          return (
-            <Pressable
-              key={idx}
-              lx={{
-                alignItems: 'center',
-                gap: 's8',
-                borderRadius: 'lg',
-                padding: 's12',
-              }}
-              style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
-              onPress={() => setActive(idx)}
-            >
-              {/* Folder Icon */}
-              <Box
-                lx={{
-                  borderRadius: 'lg',
-                  padding: 's8',
-                  ...(isActive && { backgroundColor: 'accent' }),
-                }}
-              >
-                <Folder size={24} />
-              </Box>
-
-              {/* Label */}
-              <Text
-                typography='body3'
-                lx={{ color: isActive ? 'base' : 'muted' }}
-              >
-                {tab.props.label}
-              </Text>
-            </Pressable>
-          );
-        })}
-      </Box>
-
-      {/* Tab content */}
-      <Box lx={{ padding: 's24' }}>
-        {tabs.map((tab, idx) => {
-          if (idx !== active) return null;
-          return <Box key={idx}>{tab.props.children}</Box>;
-        })}
-      </Box>
-    </Box>
-  );
-};
-
-export const Tab = ({ children }: TabProps) => {
-  return <Box>{children}</Box>;
-};