@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.48

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,4 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import type { ReactElement } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
@@ -11,20 +12,23 @@ import {
 import type {
   SegmentedControlButtonProps,
   SegmentedControlProps,
+  SegmentedControlValue,
 } from './types';
 import {
   usePillLayout,
   useSegmentedControlSelectedIndex,
 } from './usePillLayout';
 
-export function SegmentedControlButton({
+export function SegmentedControlButton<
+  T extends SegmentedControlValue = SegmentedControlValue,
+>({
   value,
   children,
   icon: Icon,
   trailingContent,
   onPress,
   ...props
-}: SegmentedControlButtonProps) {
+}: SegmentedControlButtonProps<T>) {
   const {
     selectedValue,
     onSelectedChange,
@@ -126,7 +130,9 @@ function useButtonStyles({
   return { ...styles, typography, textColor };
 }
 
-export function SegmentedControl({
+export function SegmentedControl<
+  T extends SegmentedControlValue = SegmentedControlValue,
+>({
   selectedValue,
   onSelectedChange,
   accessibilityLabel,
@@ -135,7 +141,7 @@ export function SegmentedControl({
   appearance = 'background',
   tabLayout = 'fixed',
   ...props
-}: SegmentedControlProps) {
+}: SegmentedControlProps<T>) {
   const disabled = useDisabledContext({
     consumerName: 'SegmentedControl',
     mergeWith: { disabled: disabledProp },
@@ -160,7 +166,7 @@ export function SegmentedControl({
     <SegmentedControlContextProvider
       value={{
         selectedValue,
-        onSelectedChange,
+        onSelectedChange: onSelectedChange as (value: string) => void,
         disabled,
         tabLayout,
         registerButtonLayout,
@@ -220,3 +226,14 @@ function useRootStyles({
     [disabled, appearance, tabLayout],
   );
 }
+
+export function createSegmentedControl<
+  T extends SegmentedControlValue = never,
+>(): {
+  SegmentedControl: (props: SegmentedControlProps<T>) => ReactElement;
+  SegmentedControlButton: (
+    props: SegmentedControlButtonProps<T>,
+  ) => ReactElement;
+} {
+  return { SegmentedControl, SegmentedControlButton };
+}

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

@@ -3,15 +3,19 @@ import type { LumenTextStyle, StyledPressableProps } from '../../../styles';
 import type { IconSize } from '../Icon';
 import type { BoxProps } from '../Utility';
 
-export type SegmentedControlProps = {
+export type SegmentedControlValue = string;
+
+export type SegmentedControlProps<
+  T extends SegmentedControlValue = SegmentedControlValue,
+> = {
   /**
    * The value of the currently selected segment (drives the sliding pill).
    */
-  selectedValue: string;
+  selectedValue: T;
   /**
    * Callback when the selected segment value changes.
    */
-  onSelectedChange: (value: string) => void;
+  onSelectedChange: (value: T) => void;
   /**
    * When true, the entire control is disabled (no interaction, selected uses muted styling).
    */
@@ -43,11 +47,13 @@ type IconComponent = ComponentType<{
   color?: LumenTextStyle['color'];
 }>;
 
-export type SegmentedControlButtonProps = {
+export type SegmentedControlButtonProps<
+  T extends SegmentedControlValue = SegmentedControlValue,
+> = {
   /**
    * Value for this segment (must be unique among siblings).
    */
-  value: string;
+  value: T;
   /**
    * Button label (e.g. "Preview", "Raw").
    */

package/src/lib/Components/TabBar/TabBar.mdx

@@ -69,6 +69,8 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 
 ### Basic Usage
 
+> **Recommended:** prefer the [type-safe variant](#type-safe-variant) below. It shares one literal union across `active` and every `TabBarItem.value`.
+
 ```tsx
 import { useState } from 'react';
 import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
@@ -86,6 +88,33 @@ function MyComponent() {
 }
 ```
 
+### Type-safe variant
+
+`TabBar` and `TabBarItem` communicate via context, so TypeScript cannot connect the root's `active` to each item's `value` on its own. A typo compiles, and the wrong tab (or none) is highlighted.
+
+`createTabBar<T>()` ties both components to one literal union. Call it once at module scope; the returned pair are typed against your `T`.
+
+```tsx
+import { createTabBar } from '@ledgerhq/lumen-ui-rnative';
+import { Home, HomeFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+type Route = 'home' | 'swap' | 'settings';
+
+const { TabBar, TabBarItem } = createTabBar<Route>();
+
+function Example() {
+  const [active, setActive] = React.useState<Route>('home');
+
+  return (
+    <TabBar active={active} onTabPress={setActive}>
+      <TabBarItem value='home' label='Home' icon={Home} activeIcon={HomeFill} />
+      <TabBarItem value='swap' label='Swap' icon={Settings} />
+      <TabBarItem value='settings' label='Settings' icon={Settings} />
+    </TabBar>
+  );
+}
+```
+
 ### With Active Icons
 
 Provide different icons for active and inactive states:

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

@@ -15,7 +15,7 @@ import {
   CreditCard,
   CreditCardFill,
 } from '../../Symbols';
-import { TabBar, TabBarItem } from './TabBar';
+import { createTabBar, TabBar, TabBarItem } from './TabBar';
 
 const meta = {
   id: 'rnative-tabbar',
@@ -119,3 +119,36 @@ export const MissingLabel: Story = {
     );
   },
 };
+
+type Route = 'home' | 'swap' | 'card' | 'help';
+const Nav = createTabBar<Route>();
+
+export const TypesafeFactory: Story = {
+  args: {} as React.ComponentProps<typeof TabBar>,
+  render: () => {
+    const [active, setActive] = useState<Route>('home');
+    return (
+      <Nav.TabBar active={active} onTabPress={setActive} lx={{ width: 's320' }}>
+        <Nav.TabBarItem
+          value='home'
+          label='Home'
+          icon={Home}
+          activeIcon={HomeFill}
+        />
+        <Nav.TabBarItem value='swap' label='Swap' icon={CoinPercent} />
+        <Nav.TabBarItem
+          value='card'
+          label='Card'
+          icon={CreditCard}
+          activeIcon={CreditCardFill}
+        />
+        <Nav.TabBarItem
+          value='help'
+          label='Help'
+          icon={LifeRing}
+          activeIcon={LifeRingFill}
+        />
+      </Nav.TabBar>
+    );
+  },
+};

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

@@ -3,7 +3,7 @@ import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
 import { HomeFill, Settings, BasketPutIn } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
-import { TabBar, TabBarItem } from './TabBar';
+import { TabBar, TabBarItem, createTabBar } from './TabBar';
 
 const renderWithProvider = (component: React.ReactElement) => {
   return render(
@@ -54,4 +54,26 @@ describe('TabBar', () => {
     expect(getByText('Shop')).toBeTruthy();
     expect(getByText('Settings')).toBeTruthy();
   });
+
+  describe('createTabBar', () => {
+    it('returns typed components that render and respond to presses', () => {
+      const { TabBar: TypedTabBar, TabBarItem: TypedItem } = createTabBar<
+        'home' | 'settings'
+      >();
+      const onTabPress = jest.fn();
+
+      const { getByText } = renderWithProvider(
+        <TypedTabBar active='home' onTabPress={onTabPress}>
+          <TypedItem value='home' label='Home' icon={HomeFill} />
+          <TypedItem value='settings' label='Settings' icon={Settings} />
+        </TypedTabBar>,
+      );
+
+      expect(getByText('Home')).toBeTruthy();
+
+      fireEvent.press(getByText('Settings'));
+
+      expect(onTabPress).toHaveBeenCalledWith('settings');
+    });
+  });
 });

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

@@ -1,5 +1,5 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { StyleSheet, Text, View } from 'react-native';
@@ -18,7 +18,7 @@ import { Placeholder } from '../../Symbols';
 import { RuntimeConstants } from '../../utils';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
-import type { TabBarItemProps, TabBarProps } from './types';
+import type { TabBarItemProps, TabBarProps, TabBarValue } from './types';
 
 export const TAB_BAR_HEIGHT = 60;
 const PILL_INSET = 4;
@@ -241,12 +241,12 @@ export function TabBarItem({
  *   <TabBarItem value="settings" label="Settings" icon={Settings} />
  * </TabBar>
  */
-export function TabBar({
+export function TabBar<T extends TabBarValue = TabBarValue>({
   active,
   onTabPress,
   children,
   ...props
-}: TabBarProps) {
+}: TabBarProps<T>) {
   const styles = useStyles();
   const { theme, colorScheme } = useTheme();
 
@@ -255,12 +255,13 @@ export function TabBar({
     children,
   });
 
-  function handleTabPress(value: string) {
-    onTabPress?.(value);
-  }
-
   return (
-    <TabBarContextProvider value={{ active, onTabPress: handleTabPress }}>
+    <TabBarContextProvider
+      value={{
+        active,
+        onTabPress: (value) => onTabPress(value as T),
+      }}
+    >
       <Box
         style={styles.container}
         onLayout={onLayout}
@@ -348,3 +349,10 @@ const useStyles = () =>
     }),
     [],
   );
+
+export function createTabBar<T extends TabBarValue = never>(): {
+  TabBar: (props: TabBarProps<T>) => ReactElement;
+  TabBarItem: (props: TabBarItemProps<T>) => ReactElement;
+} {
+  return { TabBar, TabBarItem };
+}

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

@@ -1,2 +1,2 @@
-export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from './TabBar';
-export type { TabBarProps, TabBarItemProps } from './types';
+export * from './TabBar';
+export * from './types';

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

@@ -7,11 +7,28 @@ type IconComponent = ComponentType<{
   size?: IconSize;
 }>;
 
-export type TabBarItemProps = {
+export type TabBarValue = string;
+
+export type TabBarProps<T extends TabBarValue = TabBarValue> = {
+  /**
+   * The value of the currently active tab.
+   */
+  active: T;
+  /**
+   * The callback function called when a tab is pressed.
+   */
+  onTabPress: (active: T) => void;
+  /**
+   * The tab items to display.
+   */
+  children: ReactNode;
+} & Omit<BoxProps, 'children'>;
+
+export type TabBarItemProps<T extends TabBarValue = TabBarValue> = {
   /**
    * The unique identifier for the tab item.
    */
-  value: string;
+  value: T;
   /**
    * The display label for the tab item.
    * If not provided, the icon will be centered.
@@ -27,18 +44,3 @@ export type TabBarItemProps = {
    */
   activeIcon?: IconComponent;
 } & Omit<StyledViewProps, 'children'>;
-
-export type TabBarProps = {
-  /**
-   * The value of the currently active tab.
-   */
-  active: string;
-  /**
-   * The callback function called when a tab is pressed.
-   */
-  onTabPress: (active: string) => void;
-  /**
-   * The tab items to display.
-   */
-  children: ReactNode;
-} & Omit<BoxProps, 'children'>;