@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

package/src/lib/Components/Subheader/Subheader.figma.tsx

@@ -0,0 +1,72 @@
+import figma from '@figma/code-connect';
+import {
+  Subheader,
+  SubheaderDescription,
+  SubheaderRow,
+  SubheaderShowMore,
+  SubheaderTitle,
+  SubheaderCount,
+} from './Subheader';
+
+figma.connect(
+  Subheader,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16477-1522',
+  {
+    imports: [
+      "import { Subheader, SubheaderRow, SubheaderTitle, SubheaderDescription, SubheaderCount } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-action': 'none' },
+    props: {
+      title: figma.string('title'),
+      descriptionBlock: figma.boolean('show-description', {
+        true: <SubheaderDescription>Description</SubheaderDescription>,
+        false: undefined,
+      }),
+      count: figma.boolean('show-number', {
+        true: <SubheaderCount value={5} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <Subheader>
+        <SubheaderRow>
+          <SubheaderTitle>{props.title}</SubheaderTitle>
+          {props.count}
+        </SubheaderRow>
+        {props.descriptionBlock}
+      </Subheader>
+    ),
+  },
+);
+
+figma.connect(
+  Subheader,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16477-1522',
+  {
+    imports: [
+      "import { Subheader, SubheaderRow, SubheaderTitle, SubheaderShowMore, SubheaderDescription } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-action': 'show-more' },
+    props: {
+      title: figma.string('title'),
+      descriptionBlock: figma.boolean('show-description', {
+        true: <SubheaderDescription>Description</SubheaderDescription>,
+        false: undefined,
+      }),
+      count: figma.boolean('show-number', {
+        true: <SubheaderCount value={5} />,
+        false: undefined,
+      }),
+    },
+    example: ({ title, descriptionBlock, count }) => (
+      <Subheader>
+        <SubheaderRow onPress={() => {}}>
+          <SubheaderTitle>{title}</SubheaderTitle>
+          {count}
+          <SubheaderShowMore />
+        </SubheaderRow>
+        {descriptionBlock}
+      </Subheader>
+    ),
+  },
+);

package/src/lib/Components/Subheader/Subheader.mdx

@@ -13,11 +13,7 @@ import {
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Subheader' of={SubheaderStories} />
 
@@ -364,118 +360,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 </Subheader>
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Subheader component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's16' }}>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Count for numeric values'
-      description='Pass numbers using the value prop'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Accounts</SubheaderTitle>
-    <SubheaderCount value={30} />
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't add parentheses manually"
-      description='Count component automatically formats the value'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Accounts (30)</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the composite pattern'
-      description='Compose sub-components for flexibility'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-    <SubheaderCount value={5} />
-  </SubheaderRow>
-  <SubheaderDescription>Description</SubheaderDescription>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use non-composite children"
-      description='Only use the provided sub-components'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <Text>Title (5)</Text>
-  <Text>Description</Text>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='Use the lx prop for margins, positioning, and other layout adjustments'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader lx={{ marginTop: 's16' }}>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use lx for appearance changes"
-      description='Avoid using lx to modify colors, padding, or other core appearance styles'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader lx={{ backgroundColor: 'accent', padding: 's24' }}>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/Switch/Switch.figma.tsx

@@ -0,0 +1,66 @@
+import figma from '@figma/code-connect';
+import { Switch } from './Switch';
+
+// Standalone Switch component
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=802-186',
+  {
+    imports: ["import { Switch } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      checked: figma.boolean('selected', {
+        true: true,
+        false: false,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+      }),
+    },
+    example: (props) => (
+      <Switch
+        checked={props.checked}
+        defaultChecked={false}
+        onCheckedChange={(_checked: boolean) => {}}
+        size={props.size}
+        disabled={props.disabled}
+      />
+    ),
+  },
+);
+
+// Switch embedded inside a compound component (e.g. ListItem toggle)
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=8739-1875',
+  {
+    imports: ["import { Switch } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      switchProps: figma.nestedProps('.switch', {
+        checked: figma.boolean('selected', {
+          true: true,
+          false: false,
+        }),
+        disabled: figma.enum('state', {
+          disabled: true,
+        }),
+        size: figma.enum('size', {
+          sm: 'sm',
+          md: 'md',
+        }),
+      }),
+    },
+    example: (props) => (
+      <Switch
+        checked={props.switchProps.checked}
+        defaultChecked={false}
+        onCheckedChange={(_checked: boolean) => {}}
+        size={props.switchProps.size}
+        disabled={props.switchProps.disabled}
+      />
+    ),
+  },
+);

package/src/lib/Components/Switch/Switch.mdx

@@ -3,8 +3,6 @@ import * as SwitchStories from './Switch.stories';
 import { Switch } from './Switch';
 import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Switch' of={SwitchStories} />
 
@@ -146,43 +144,6 @@ The Switch component automatically supports:
 - **Space**: Toggle checked/unchecked state
 - **Enter**: Submit form (when inside a form)
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Switch component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled components for form state'
-      description='Use checked and onCheckedChange props for controlled switches'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Switch checked={isChecked} onCheckedChange={setIsChecked} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both checked and defaultChecked props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Switch checked={isChecked} defaultChecked={true} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,70 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { TabBar, TabBarItem } from './TabBar';
+
+figma.connect(
+  TabBar,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10804-1045',
+  {
+    imports: [
+      "import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      items: figma.enum('nb-tabs', {
+        '2': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+          </>
+        ),
+        '3': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+            <TabBarItem value='tab3' label='Label3' icon={Placeholder} />
+          </>
+        ),
+        '4': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+            <TabBarItem value='tab3' label='Label3' icon={Placeholder} />
+            <TabBarItem value='tab4' label='Label4' icon={Placeholder} />
+          </>
+        ),
+        '5': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+            <TabBarItem value='tab3' label='Label3' icon={Placeholder} />
+            <TabBarItem value='tab4' label='Label4' icon={Placeholder} />
+            <TabBarItem value='tab5' label='Label5' icon={Placeholder} />
+          </>
+        ),
+      }),
+    },
+    example: (props) => (
+      <TabBar active='tab1' onTabPress={() => {}}>
+        {props.items}
+      </TabBar>
+    ),
+  },
+);
+
+figma.connect(
+  TabBarItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10804-913',
+  {
+    imports: [
+      "import { TabBarItem } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      label: figma.textContent('Label'),
+    },
+    example: (props) => (
+      <TabBarItem value='tab1' label={props.label} icon={Placeholder} />
+    ),
+  },
+);

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

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TabBarStories from './TabBar.stories';
 import { TabBar } from './TabBar';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Core/TabBar' of={TabBarStories} />
@@ -69,6 +67,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 +86,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:
@@ -177,9 +204,6 @@ export default function TabLayout() {
 }
 ```
 
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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'>;