@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

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

@@ -3,7 +3,11 @@ import { useState } from 'react';
 import { Coins, Nft, TransferHorizontal } from '../../Symbols';
 import { DotCount } from '../DotCount';
 import { Box } from '../Utility';
-import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+import {
+  createSegmentedControl,
+  SegmentedControl,
+  SegmentedControlButton,
+} from './SegmentedControl';
 
 const meta = {
   id: 'rnative-segmentedcontrol',
@@ -171,3 +175,32 @@ export const WithTrailingContent: Story = {
     );
   },
 };
+
+type View = 'preview' | 'raw' | 'blame';
+const TypedSegmentedControl = createSegmentedControl<View>();
+
+export const TypesafeFactory: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: (args) => {
+    const [view, setView] = useState<View>('preview');
+
+    return (
+      <TypedSegmentedControl.SegmentedControl
+        {...args}
+        selectedValue={view}
+        onSelectedChange={setView}
+        accessibilityLabel='File view'
+      >
+        <TypedSegmentedControl.SegmentedControlButton value='preview'>
+          Preview
+        </TypedSegmentedControl.SegmentedControlButton>
+        <TypedSegmentedControl.SegmentedControlButton value='raw'>
+          Raw
+        </TypedSegmentedControl.SegmentedControlButton>
+        <TypedSegmentedControl.SegmentedControlButton value='blame'>
+          Blame
+        </TypedSegmentedControl.SegmentedControlButton>
+      </TypedSegmentedControl.SegmentedControl>
+    );
+  },
+};

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

@@ -3,7 +3,11 @@ import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
 import { DotCount } from '../DotCount';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
-import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+import {
+  SegmentedControl,
+  SegmentedControlButton,
+  createSegmentedControl,
+} from './SegmentedControl';
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
@@ -172,4 +176,31 @@ describe('SegmentedControl', () => {
       expect(onSelectedChange).toHaveBeenCalledWith('preview');
     });
   });
+
+  describe('createSegmentedControl', () => {
+    it('returns typed components that render and select like the originals', () => {
+      const {
+        SegmentedControl: TypedControl,
+        SegmentedControlButton: TypedButton,
+      } = createSegmentedControl<'send' | 'receive'>();
+      const onSelectedChange = jest.fn();
+
+      const { getByText } = render(
+        <TestWrapper>
+          <TypedControl
+            selectedValue='send'
+            onSelectedChange={onSelectedChange}
+            accessibilityLabel='Transaction type'
+          >
+            <TypedButton value='send'>Send</TypedButton>
+            <TypedButton value='receive'>Receive</TypedButton>
+          </TypedControl>
+        </TestWrapper>,
+      );
+
+      fireEvent.press(getByText('Receive'));
+
+      expect(onSelectedChange).toHaveBeenCalledWith('receive');
+    });
+  });
 });

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/Skeleton/Skeleton.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Skeleton } from './Skeleton';
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=8004-10676',
+  {
+    imports: ["import { Skeleton } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      component: figma.enum('appearance', {
+        'list-item': 'list-item',
+        tile: 'tile',
+      }),
+    },
+    example: (props) => <Skeleton component={props.component} />,
+  },
+);

package/src/lib/Components/Skeleton/Skeleton.mdx

@@ -4,11 +4,7 @@ import { Skeleton } from './Skeleton';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Skeleton' of={SkeletonStories} />
 
@@ -128,73 +124,6 @@ import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
 </Box>
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use component prop for common patterns'
-      description='Use pre-built variants for consistent loading states'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton component='list-item' />
-<Skeleton component='tile' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually recreate common patterns"
-      description='Avoid recreating patterns that already exist as component variants'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
-
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
-  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
-    <Skeleton lx={{ height: 's12', width: 's176' }} />
-    <Skeleton lx={{ height: 's12', width: 's112' }} />
-  </Box>
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx prop for sizing'
-      description='Use design system size tokens for consistent sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton lx={{ height: 's16', width: 's256' }} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use arbitrary style values"
-      description='Avoid using the style prop or arbitrary values'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton style={{ height: 16, width: 200 }} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-</div>
-
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect';
+import { Spinner } from './Spinner';
+
+figma.connect(
+  Spinner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=9023-3681',
+  {
+    imports: ["import { Spinner } from '@ledgerhq/lumen-ui-rnative'"],
+    // @ts-expect-error — placeholder value, replace with a valid IconSize
+    example: () => <Spinner size='<insert-size>' />,
+  },
+);

package/src/lib/Components/Spinner/Spinner.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as SpinnerStories from './Spinner.stories';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
@@ -116,104 +114,6 @@ function MyComponent() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Match spinner size to context'
-      description='Use appropriate spinner sizes based on the context and prominence'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// Small inline loading
-<Spinner size={12} />
-
-// Prominent loading state
-<Spinner size={40} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't override spinner size"
-      description='Avoid using style or additional props to override spinner dimensions'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// Small inline loading
-<Spinner size={12} style={{ width: 6, height: 6 }} />
-
-// Prominent loading state
-<Spinner size={40} width={32} height={32} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide context with descriptive text'
-      description='Pair spinners with text to give users context about what is loading'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-  <Spinner size={16} />
-  <Text>Syncing wallet...</Text>
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't show spinners without context"
-      description='Avoid showing spinners alone without descriptive text'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-  <Spinner size={16} />
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use standard sizes from the design system'
-      description='Stick to predefined size values like 12, 16, 20, 24, 40'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spinner size={16} />
-<Spinner size={24} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use non-standard sizes"
-      description='Avoid arbitrary size values that are not part of the design system'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spinner size={22} />
-<Spinner size={35} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { Spot } from './Spot';
+import type { SpotAppearance } from './types';
+
+figma.connect(
+  Spot,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6786%3A4738',
+  {
+    imports: [
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      appearance: figma.enum('appearance', {
+        'interface-icon': 'icon',
+        loader: 'loader',
+        number: 'number',
+        'info-muted': 'info',
+        warning: 'warning',
+        error: 'error',
+        check: 'check',
+        bluetooth: 'bluetooth',
+      }),
+      icon: figma.enum('appearance', {
+        'interface-icon': Placeholder,
+      }),
+      number: figma.enum('appearance', {
+        number: 1,
+      }),
+    },
+    example: (props: {
+      disabled: boolean;
+      appearance: SpotAppearance;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      icon: any;
+      number: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    }) => (
+      <Spot
+        appearance={props.appearance}
+        icon={props.icon}
+        number={props.number}
+        disabled={props.disabled}
+      />
+    ),
+  },
+);

package/src/lib/Components/Spot/Spot.mdx

@@ -3,8 +3,6 @@ import * as SpotStories from './Spot.stories';
 import { Spot } from './Spot';
 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/Spot' of={SpotStories} />
 
@@ -171,98 +169,6 @@ function StatusIndicators() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use required props for discriminated types'
-      description='Icon appearance requires icon prop, number appearance requires number prop'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Spot appearance='icon' icon={Settings} />
-<Spot appearance='number' number={5} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit required props"
-      description='Discriminated union types require their specific props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Spot appearance='icon' /> // Missing required 'icon' prop
-<Spot appearance='number' /> // Missing required 'number' prop
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use valid number values'
-      description='Number appearance only accepts values from 0 to 9'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='number' number={5} />
-<Spot appearance='number' number={0} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't pass invalid number values"
-      description='Only values 0-9 are allowed for number appearance'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='number' number={10} />
-<Spot appearance='number' number={-1} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Spot for status indication only'
-      description='Spots are designed to display status, not to be interactive elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='check' />
-<Spot appearance='error' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't make spots interactive"
-      description='Avoid adding press handlers or making spots clickable'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='check' onPress={handlePress} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Stepper } from './Stepper';
+
+figma.connect(
+  Stepper,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11439-7755',
+  {
+    imports: ["import { Stepper } from '@ledgerhq/lumen-ui-rnative'"],
+    example: () => <Stepper currentStep={2} totalSteps={4} />,
+  },
+);

package/src/lib/Components/Stepper/Stepper.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as StepperStories from './Stepper.stories';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
@@ -143,71 +141,6 @@ function LocalizedStepper() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide meaningful step counts'
-      description='Use realistic total steps that match your flow'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper currentStep={3} totalSteps={5} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use for single-step processes"
-      description='Steppers are for multi-step workflows only'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper currentStep={1} totalSteps={1} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use disabled for paused steppers'
-      description='Reserve disabled for steppers that are not actively progressing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper 
-  currentStep={2} 
-  totalSteps={4} 
-  disabled 
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't disable active steps"
-      description='Active steps in progress should not be disabled'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper 
-  currentStep={2} 
-  totalSteps={4} 
-  disabled // Wrong for active step
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>