@ledgerhq/lumen-ui-rnative 0.1.25 → 0.1.26

package/src/lib/Components/DotCount/types.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+
+export type DotCountProps = {
+  /**
+   * The size of the dot count.
+   * @default md
+   */
+  size?: 'lg' | 'md';
+  /**
+   * The amount to be displayed.
+   *
+   * If higher than `max`, the displayed value will be "[max]+".
+   */
+  value: number;
+  /**
+   * The max value shown.
+   *
+   * If `value` is higher than `max`, the displayed value will be "[max]+".
+   *
+   * By design, it will ignore values higher than 99.
+   * @default 99
+   */
+  max?: number;
+  /**
+   * The appearance of the dot count.
+   * @default base
+   */
+  appearance?: 'base' | 'red';
+  /**
+   * Whether the dot count should show a disabled appearance.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Can be used as a wrapper to any component in case you wish to overlay a dot count on top of it.
+   * If provided, it'll pin the dot count to the top-right of the child component passed.
+   */
+  children?: ReactNode;
+} & Omit<StyledViewProps, 'children'>;

package/src/lib/Components/DotIndicator/DotIndicator.mdx

@@ -0,0 +1,82 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotIndicatorStories from './DotIndicator.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Communication/DotIndicator' of={DotIndicatorStories} />
+
+# DotIndicator
+
+<CustomTabs>
+  <Tab label="Overview">
+
+    ## Introduction
+
+    DotIndicator is a small colored dot used to signal status or draw attention without displaying a number. It supports two appearances (`base` and `red`) and can be pinned to the top-right of a child element.
+
+    > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16470-25597).
+
+    ## Properties
+
+    <Canvas of={DotIndicatorStories.Base} />
+    <Controls of={DotIndicatorStories.Base} />
+
+    ## Sizes
+
+    DotIndicator comes in three sizes:
+
+    - **xs** - compact dot for tight layouts.
+    - **sm** (default) - standard dot for most use cases.
+    - **md** - larger dot for prominent indicators.
+
+    <Canvas of={DotIndicatorStories.SizeShowcase} />
+
+    ## Appearances
+
+    Two color schemes are available:
+
+    - **base** (default) - neutral dot for general-purpose indicators.
+    - **red** - high-visibility dot, typically used for unread or alert states.
+
+    <Canvas of={DotIndicatorStories.AppearanceShowcase} />
+
+    ## With Children
+
+    When wrapping a child element, the dot pins itself to the top-right corner.
+
+    <Canvas of={DotIndicatorStories.WithChildren} />
+
+  </Tab>
+  <Tab label="Implementation">
+
+    ## Setup
+
+    Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+    ## Basic Usage
+
+    ```tsx
+    import { DotIndicator } from '@ledgerhq/lumen-ui-rnative';
+
+    function MyComponent() {
+      return <DotIndicator appearance="red" />;
+    }
+    ```
+
+    ### Pinned to a child
+
+    ```tsx
+    <DotIndicator appearance="red">
+      <Button size="sm">Submit</Button>
+    </DotIndicator>
+    ```
+
+    ### Accessibility
+
+    Pass `accessibilityLabel` to provide screen reader context:
+
+    ```tsx
+    <DotIndicator accessibilityLabel="New notifications" />
+    ```
+
+  </Tab>
+</CustomTabs>

package/src/lib/Components/DotIndicator/DotIndicator.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Button } from '../Button/Button';
+import { Box } from '../Utility/Box';
+import { DotIndicator } from './DotIndicator';
+
+const meta = {
+  component: DotIndicator,
+  title: 'Communication/DotIndicator',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['xs', 'sm', 'md'],
+    },
+    appearance: {
+      control: 'radio',
+      options: ['base', 'red'],
+    },
+  },
+} satisfies Meta<typeof DotIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    appearance: 'base',
+  },
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotIndicator size='xs' />
+      <DotIndicator size='sm' />
+      <DotIndicator size='md' />
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotIndicator appearance='base' />
+      <DotIndicator appearance='red' />
+      <DotIndicator disabled />
+    </Box>
+  ),
+};
+
+export const WithChildren: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotIndicator appearance='red'>
+        <Button size='sm'>Submit</Button>
+      </DotIndicator>
+    </Box>
+  ),
+};

package/src/lib/Components/DotIndicator/DotIndicator.test.tsx

@@ -0,0 +1,132 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import { createRef } from 'react';
+import { Text, type View } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotIndicator } from './DotIndicator';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotIndicator', () => {
+  it('should render without crashing', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render children', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotIndicator>
+          <Text>Child</Text>
+        </DotIndicator>
+      </TestWrapper>,
+    );
+
+    expect(getByText('Child')).toBeTruthy();
+  });
+
+  it('should apply accessibility label', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <DotIndicator accessibilityLabel='New notifications' />
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('New notifications')).toBeTruthy();
+  });
+
+  it('should forward testID to the outer wrapper', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotIndicator testID='dot-indicator' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-indicator')).toBeTruthy();
+  });
+
+  it('should forward pointerEvents to the outer wrapper', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotIndicator testID='dot-indicator' pointerEvents='none' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-indicator').props.pointerEvents).toBe('none');
+  });
+
+  it('should forward ref to the outer wrapper', () => {
+    const ref = createRef<View>();
+
+    render(
+      <TestWrapper>
+        <DotIndicator ref={ref} />
+      </TestWrapper>,
+    );
+
+    expect(ref.current).toBeTruthy();
+  });
+
+  it('should render in xs size', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator size='xs' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render in md size', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator size='md' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with red appearance', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator appearance='red' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with disabled state', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator disabled />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render pinned overlay when children provided', () => {
+    const { getByTestId, getByText } = render(
+      <TestWrapper>
+        <DotIndicator testID='dot-indicator'>
+          <Text>Content</Text>
+        </DotIndicator>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-indicator')).toBeTruthy();
+    expect(getByText('Content')).toBeTruthy();
+  });
+});

package/src/lib/Components/DotIndicator/DotIndicator.tsx

@@ -0,0 +1,97 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+import type { DotIndicatorProps } from './types';
+
+export function DotIndicator({
+  size = 'sm',
+  appearance = 'base',
+  disabled: disabledProp = false,
+  lx = {},
+  style,
+  children,
+  accessibilityLabel,
+  ref,
+  ...props
+}: DotIndicatorProps) {
+  const disabled = useDisabledContext({
+    consumerName: 'DotIndicator',
+    mergeWith: { disabled: disabledProp },
+  });
+
+  const styles = useStyles({
+    size,
+    appearance,
+    disabled,
+    pinned: !!children,
+  });
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([
+        children ? { position: 'relative' } : undefined,
+        style,
+      ])}
+      {...props}
+    >
+      <Box
+        style={styles.container}
+        accessibilityRole='image'
+        accessibilityLabel={accessibilityLabel}
+        accessible={!!accessibilityLabel}
+        pointerEvents='none'
+      />
+      {children}
+    </Box>
+  );
+}
+
+const useStyles = ({
+  size,
+  appearance,
+  disabled,
+  pinned,
+}: {
+  size: NonNullable<DotIndicatorProps['size']>;
+  appearance: NonNullable<DotIndicatorProps['appearance']>;
+  disabled: boolean;
+  pinned: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizeMap = {
+        xs: t.sizes.s10,
+        sm: t.sizes.s12,
+        md: t.sizes.s16,
+      };
+
+      const bgColorMap = {
+        base: { backgroundColor: t.colors.bg.interactive },
+        red: { backgroundColor: t.colors.bg.errorStrong },
+      };
+
+      return {
+        container: {
+          height: sizeMap[size],
+          aspectRatio: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: t.borderRadius.full,
+          ...(pinned && {
+            position: 'absolute',
+            top: t.spacings.s0,
+            right: t.spacings.s0,
+            zIndex: 1,
+          }),
+          ...(disabled
+            ? { backgroundColor: t.colors.bg.disabled }
+            : { ...bgColorMap[appearance] }),
+        },
+      };
+    },
+    [size, appearance, disabled, pinned],
+  );
+};

package/src/lib/Components/DotIndicator/index.ts

@@ -0,0 +1,2 @@
+export * from './DotIndicator';
+export * from './types';

package/src/lib/Components/DotIndicator/types.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+
+export type DotIndicatorProps = {
+  /**
+   * The size of the dot indicator.
+   * @default sm
+   */
+  size?: 'xs' | 'sm' | 'md';
+  /**
+   * The appearance of the dot indicator.
+   * @default base
+   */
+  appearance?: 'base' | 'red';
+  /**
+   * Whether the dot indicator should show a disabled appearance.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Can be used as a wrapper to any component in case you wish to overlay a dot indicator on top of it.
+   * If provided, it'll pin the dot indicator to the top-right of the child component passed.
+   */
+  children?: ReactNode;
+} & Omit<StyledViewProps, 'children'>;

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

@@ -1,12 +1,6 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import type { ReactNode } from 'react';
-import {
-  Children,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { Platform, StyleSheet, Text, View } from 'react-native';
 import Animated, {
@@ -19,6 +13,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
+import { triggerHapticFeedback } from '../../Haptics';
 import { Placeholder } from '../../Symbols';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
@@ -51,14 +46,16 @@ const useTabBarItemAnimations = ({ isActive }: { isActive: boolean }) => {
       50,
       withTiming(isActive ? 1 : 0, activeTimingConfig),
     );
-    return () => cancelAnimation(activeProgress);
   }, [isActive, activeProgress, activeTimingConfig]);
 
+  useEffect(() => () => cancelAnimation(activeProgress), [activeProgress]);
+
   const onPressIn = () => {
     pressProgress.value = withTiming(0.9, pressInTimingConfig);
   };
 
   const onPressOut = () => {
+    triggerHapticFeedback('light');
     pressProgress.value = withSequence(
       withTiming(0.95, { duration: 0 }),
       withTiming(1, pressOutTimingConfig),
@@ -112,7 +109,7 @@ const useTabBarPillLayout = ({
     easing: 'easeInOut',
   });
 
-  const getActiveIndex = useCallback((): number => {
+  const activeIndex = useMemo(() => {
     return Children.toArray(children).findIndex((child) => {
       if (isValidElement<TabBarItemProps>(child)) {
         return child.props.value === active;
@@ -121,6 +118,9 @@ const useTabBarPillLayout = ({
     });
   }, [active, children]);
 
+  const activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
+
   const onLayout = (e: LayoutChangeEvent): void => {
     const { width, height } = e.nativeEvent.layout;
     const count = Children.count(children);
@@ -131,7 +131,7 @@ const useTabBarPillLayout = ({
 
     if (!hasLayoutRef.current) {
       hasLayoutRef.current = true;
-      const index = getActiveIndex();
+      const index = activeIndexRef.current;
       if (index >= 0) {
         pillProgress.value = index * slotWidth;
       }
@@ -140,14 +140,15 @@ const useTabBarPillLayout = ({
 
   useEffect(() => {
     if (!hasLayoutRef.current) return;
-    const index = getActiveIndex();
-
-    if (index >= 0 && itemWidth.value > 0) {
-      pillProgress.value = withTiming(index * itemWidth.value, timingConfig);
+    if (activeIndex >= 0 && itemWidth.value > 0) {
+      pillProgress.value = withTiming(
+        activeIndex * itemWidth.value,
+        timingConfig,
+      );
     }
+  }, [activeIndex, itemWidth, pillProgress, timingConfig]);
 
-    return () => cancelAnimation(pillProgress);
-  }, [itemWidth, pillProgress, getActiveIndex, timingConfig]);
+  useEffect(() => () => cancelAnimation(pillProgress), [pillProgress]);
 
   const animatedPillStyle = useAnimatedStyle(
     () => ({

package/src/lib/Components/index.ts

@@ -4,6 +4,8 @@ export * from './AmountInput';
 export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
+export * from './DotCount';
+export * from './DotIndicator';
 export * from './Button';
 export * from './Card';
 export * from './CardButton';