@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Text, View } from 'react-native';
 import { Button } from '../Button';
+import { Box, Text } from '../Utility';
 import { BottomSheet } from './BottomSheet';
 import { BottomSheetHeader } from './BottomSheetHeader';
 import {
@@ -97,7 +97,15 @@ export const Base: Story = {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='h-320 w-full items-center justify-center pt-32'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 's32',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -108,19 +116,19 @@ export const Base: Story = {
               appearance='compact'
               description='Description'
             />
-            <View className='flex flex-col gap-12'>
+            <Box lx={{ flexDirection: 'column', gap: 's12' }}>
               {Array.from({ length: 3 }).map((_, index) => (
-                <Text className='text-base' key={index}>
+                <Text typography='body2' lx={{ color: 'base' }} key={index}>
                   Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                   Vitae excepturi odit, quis tenetur iste perspiciatis mollitia
                   porro velit laborum quasi numquam reiciendis dolor! Et quia
                   voluptates eum, sunt asperiores quod.
                 </Text>
               ))}
-            </View>
+            </Box>
           </BottomSheetView>
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -139,7 +147,15 @@ export const TitleExpanded: Story = {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='h-320 w-full items-center justify-center pt-32'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 's32',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -150,8 +166,8 @@ export const TitleExpanded: Story = {
               appearance='expanded'
               description='Expanded description.'
             />
-            <View className='flex flex-col gap-12'>
-              <Text className='text-base body-2'>
+            <Box lx={{ flexDirection: 'column', gap: 's12' }}>
+              <Text typography='body2' lx={{ color: 'base' }}>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
                 excepturi odit, quis tenetur iste perspiciatis mollitia porro
                 velit laborum quasi numquam reiciendis dolor! Maecenas sed diam
@@ -160,10 +176,10 @@ export const TitleExpanded: Story = {
                 consectetur adipiscing elit. Donec ullamcorper nulla non metus
                 auctor fringilla.
               </Text>
-            </View>
+            </Box>
           </BottomSheetView>
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -177,7 +193,14 @@ export const DynamicSizingWithoutSnapPoints: Story = {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='h-320 w-full items-center justify-center'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -188,17 +211,17 @@ export const DynamicSizingWithoutSnapPoints: Story = {
               appearance='compact'
               description='This bottom sheet adapts to its content height'
             />
-            <View className='flex flex-col gap-12'>
+            <Box lx={{ flexDirection: 'column', gap: 's12' }}>
               {Array.from({ length: 5 }).map((_, index) => (
-                <Text className='text-base' key={index}>
+                <Text typography='body2' lx={{ color: 'base' }} key={index}>
                   Item {index + 1}: Lorem ipsum, dolor sit amet consectetur
                   adipisicing elit.
                 </Text>
               ))}
-            </View>
+            </Box>
           </BottomSheetScrollView>
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -212,7 +235,14 @@ export const DynamicSizingWithSnapPoints: Story = {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='h-320 w-full items-center justify-center'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
         <Button
           size='sm'
           onPress={() => bottomSheetRef.current?.snapToIndex(1)}
@@ -226,17 +256,17 @@ export const DynamicSizingWithSnapPoints: Story = {
               appearance='compact'
               description='This bottom sheet adapts to its content height and has snap points'
             />
-            <View className='flex flex-col gap-12'>
+            <Box lx={{ flexDirection: 'column', gap: 's12' }}>
               {Array.from({ length: 3 }).map((_, index) => (
-                <Text className='text-base' key={index}>
+                <Text typography='body2' lx={{ color: 'base' }} key={index}>
                   Item {index + 1}: Lorem ipsum, dolor sit amet consectetur
                   adipisicing elit.
                 </Text>
               ))}
-            </View>
+            </Box>
           </BottomSheetScrollView>
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -252,7 +282,15 @@ export const PreventClose: Story = {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='h-320 w-full items-center justify-center pt-32'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 's32',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -263,18 +301,18 @@ export const PreventClose: Story = {
               appearance='compact'
               description='This bottom sheet cannot be closed by dragging or button'
             />
-            <View className='flex flex-col gap-12'>
+            <Box lx={{ flexDirection: 'column', gap: 's12' }}>
               {Array.from({ length: 3 }).map((_, index) => (
-                <Text className='text-base' key={index}>
+                <Text typography='body2' lx={{ color: 'base' }} key={index}>
                   Item {index + 1}: This bottom sheet stays open and cannot be
                   dismissed by the user. You would need to programmatically
                   close it using the ref.
                 </Text>
               ))}
-            </View>
+            </Box>
           </BottomSheetView>
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -287,7 +325,16 @@ export const ScrollView: Story = {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='h-320 w-full items-center justify-center bg-base pt-32'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'base',
+          paddingTop: 's32',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -298,19 +345,19 @@ export const ScrollView: Story = {
               appearance='compact'
               description='This bottom sheet contains a scrollable view'
             />
-            <View className='flex flex-col gap-12'>
+            <Box lx={{ flexDirection: 'column', gap: 's12' }}>
               {Array.from({ length: 20 }).map((_, index) => (
-                <Text className='text-base' key={index}>
+                <Text typography='body2' lx={{ color: 'base' }} key={index}>
                   Item {index + 1}: Lorem ipsum, dolor sit amet consectetur
                   adipisicing elit. Vitae excepturi odit, quis tenetur iste
                   perspiciatis mollitia porro velit laborum quasi numquam
                   reiciendis dolor!
                 </Text>
               ))}
-            </View>
+            </Box>
           </BottomSheetScrollView>
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -335,7 +382,15 @@ export const VirtualList: Story = {
     }));
 
     return (
-      <View className='h-320 w-full items-center justify-center pt-32'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 's32',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -352,19 +407,27 @@ export const VirtualList: Story = {
             renderItem={({ item }) => {
               const typedItem = item as ListItem;
               return (
-                <View className='flex flex-col gap-4 border-b border-base py-12'>
-                  <Text className='text-base body-2-semi-bold'>
+                <Box
+                  lx={{
+                    flexDirection: 'column',
+                    gap: 's4',
+                    borderBottomWidth: 's1',
+                    borderColor: 'base',
+                    paddingVertical: 's12',
+                  }}
+                >
+                  <Text typography='body2SemiBold' lx={{ color: 'base' }}>
                     {typedItem.title}
                   </Text>
-                  <Text className='text-muted body-3'>
+                  <Text typography='body3' lx={{ color: 'muted' }}>
                     {typedItem.description}
                   </Text>
-                </View>
+                </Box>
               );
             }}
           />
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };
@@ -395,7 +458,15 @@ export const VirtualizedList: Story = {
     }));
 
     return (
-      <View className='h-320 w-full items-center justify-center pt-32'>
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 's32',
+        }}
+      >
         <Button size='sm' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
@@ -420,19 +491,27 @@ export const VirtualizedList: Story = {
             renderItem={({ item }) => {
               const typedItem = item as ListItem;
               return (
-                <View className='flex flex-col gap-4 border-b border-base py-12'>
-                  <Text className='text-base body-2-semi-bold'>
+                <Box
+                  lx={{
+                    flexDirection: 'column',
+                    gap: 's4',
+                    borderBottomWidth: 's1',
+                    borderColor: 'base',
+                    paddingVertical: 's12',
+                  }}
+                >
+                  <Text typography='body2SemiBold' lx={{ color: 'base' }}>
                     {typedItem.title}
                   </Text>
-                  <Text className='text-muted body-3'>
+                  <Text typography='body3' lx={{ color: 'muted' }}>
                     {typedItem.description}
                   </Text>
-                </View>
+                </Box>
               );
             }}
           />
         </BottomSheet>
-      </View>
+      </Box>
     );
   },
 };

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

@@ -1,10 +1,24 @@
 import { describe, it, expect, jest } from '@jest/globals';
-import { render } from '@testing-library/react-native';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, RenderOptions } from '@testing-library/react-native';
+import React from 'react';
 import { Text, View } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 
 // Mock react-native-gesture-handler which is used by @gorhom/bottom-sheet
 jest.mock('react-native-gesture-handler', () => ({}));
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+const renderWithTheme = (
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) => render(ui, { wrapper: TestWrapper, ...options });
+
 describe('BottomSheet', () => {
   it('exports BottomSheet component', () => {
     const { BottomSheet } = require('./BottomSheet');
@@ -29,7 +43,7 @@ describe('BottomSheet', () => {
   describe('rendering', () => {
     it('renders with children', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByText } = render(
+      const { getByText } = renderWithTheme(
         <BottomSheet testID='bottom-sheet'>
           <View>
             <Text>Test Content</Text>
@@ -42,7 +56,7 @@ describe('BottomSheet', () => {
 
     it('renders with testID', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet testID='my-bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -54,7 +68,7 @@ describe('BottomSheet', () => {
     it('forwards ref correctly', () => {
       const { BottomSheet } = require('./BottomSheet');
       const ref = { current: null };
-      render(
+      renderWithTheme(
         <BottomSheet ref={ref} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -67,7 +81,7 @@ describe('BottomSheet', () => {
   describe('snap points', () => {
     it('uses default snapPoints "fullWithOffset" when not specified', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -79,7 +93,7 @@ describe('BottomSheet', () => {
 
     it('renders with snapPoints preset "full"', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet snapPoints='full' testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -91,7 +105,7 @@ describe('BottomSheet', () => {
 
     it('renders with snapPoints preset "quarter"', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet snapPoints='small' testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -104,7 +118,7 @@ describe('BottomSheet', () => {
     it('renders with custom snapPoints array (percentages)', () => {
       const { BottomSheet } = require('./BottomSheet');
       const customSnapPoints = ['30%', '60%', '90%'];
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet snapPoints={customSnapPoints} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -119,7 +133,7 @@ describe('BottomSheet', () => {
     it('renders with custom snapPoints array (pixels)', () => {
       const { BottomSheet } = require('./BottomSheet');
       const customSnapPoints = [200, 400, 600];
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet snapPoints={customSnapPoints} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -135,7 +149,7 @@ describe('BottomSheet', () => {
   describe('configuration props', () => {
     it('enables dynamic sizing when specified', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet enableDynamicSizing testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -147,7 +161,7 @@ describe('BottomSheet', () => {
 
     it('respects enablePanDownToClose prop (true by default)', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -159,7 +173,7 @@ describe('BottomSheet', () => {
 
     it('respects enablePanDownToClose prop when set to false', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet enablePanDownToClose={false} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -171,7 +185,7 @@ describe('BottomSheet', () => {
 
     it('respects detached prop', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet detached testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -183,7 +197,7 @@ describe('BottomSheet', () => {
 
     it('respects enableHandlePanningGesture prop', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByTestId } = render(
+      const { getByTestId } = renderWithTheme(
         <BottomSheet enableHandlePanningGesture={false} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -198,7 +212,7 @@ describe('BottomSheet', () => {
     it('provides context with onBack callback', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onBack = jest.fn();
-      const { getByText } = render(
+      const { getByText } = renderWithTheme(
         <BottomSheet onBack={onBack} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -210,7 +224,7 @@ describe('BottomSheet', () => {
 
     it('provides context with hideCloseButton prop', () => {
       const { BottomSheet } = require('./BottomSheet');
-      const { getByText } = render(
+      const { getByText } = renderWithTheme(
         <BottomSheet hideCloseButton testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -223,7 +237,7 @@ describe('BottomSheet', () => {
     it('provides context with both onBack and hideCloseButton', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onBack = jest.fn();
-      const { getByText } = render(
+      const { getByText } = renderWithTheme(
         <BottomSheet onBack={onBack} hideCloseButton testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -238,7 +252,7 @@ describe('BottomSheet', () => {
     it('accepts onOpen callback', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onOpen = jest.fn();
-      render(
+      renderWithTheme(
         <BottomSheet onOpen={onOpen} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -251,7 +265,7 @@ describe('BottomSheet', () => {
     it('accepts onClose callback', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onClose = jest.fn();
-      render(
+      renderWithTheme(
         <BottomSheet onClose={onClose} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -264,7 +278,7 @@ describe('BottomSheet', () => {
     it('accepts onChange callback', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onChange = jest.fn();
-      render(
+      renderWithTheme(
         <BottomSheet onChange={onChange} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -277,7 +291,7 @@ describe('BottomSheet', () => {
     it('accepts onBackdropPress callback', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onBackdropPress = jest.fn();
-      render(
+      renderWithTheme(
         <BottomSheet onBackdropPress={onBackdropPress} testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
@@ -294,7 +308,7 @@ describe('BottomSheet', () => {
       const onChange = jest.fn();
       const onBack = jest.fn();
 
-      render(
+      renderWithTheme(
         <BottomSheet
           onOpen={onOpen}
           onClose={onClose}

package/src/lib/Components/BottomSheet/BottomSheet.tsx

@@ -1,18 +1,13 @@
 import GorghomBottomSheet, { SNAP_POINT_TYPE } from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
 import { CustomBackdrop } from './CustomBackdrop';
 import { CustomHandle } from './CustomHandle';
 import { BottomSheetProps } from './types';
 
-const StyledGorghomBottomSheet = cssInterop(GorghomBottomSheet, {
-  className: 'style',
-  backgroundClassName: 'backgroundStyle',
-});
-
 const OFFSET_TOP = 25;
 const FULL_HEIGHT = RuntimeConstants.insetDimensions.height;
 const FULL_WITH_OFFSET = FULL_HEIGHT - OFFSET_TOP;
@@ -29,16 +24,29 @@ const MAX_DYNAMIC_CONTENT_SIZE = {
   fullWithOffset: FULL_WITH_OFFSET,
 };
 
-const bottomSheetVariants = {
-  root: cva('mb-16 w-full flex-1 rounded-t-xl bg-canvas-sheet', {
-    variants: {
-      shadow: {
-        true: 'shadow-base shadow-lg',
-        false: '',
+const useStyles = ({ shadow }: { shadow: boolean }) => {
+  return useStyleSheet(
+    (t) => ({
+      root: StyleSheet.flatten([
+        {
+          marginBottom: t.spacings.s16,
+          width: t.sizes.full,
+          flex: 1,
+          borderTopLeftRadius: t.borderRadius.xl,
+          borderTopRightRadius: t.borderRadius.xl,
+          backgroundColor: t.colors.bg.canvasSheet,
+        },
+        shadow && {
+          boxShadow: t.shadows.lg,
+        },
+      ]),
+      background: {
+        marginBottom: t.spacings.s16,
+        backgroundColor: t.colors.bg.canvasSheet,
       },
-    },
-  }),
-  background: cva('mb-16 bg-canvas-sheet'),
+    }),
+    [shadow],
+  );
 };
 
 const [BottomSheetProvider, useBottomSheetContext] =
@@ -78,6 +86,8 @@ const BottomSheet = forwardRef<
     const mergedRefs = useMergedRef<GorghomBottomSheet>(ref, innerRef);
     const [isOpen, setIsOpen] = useState(false);
 
+    const styles = useStyles({ shadow: hideBackdrop && isOpen });
+
     /**
      * Match the snap points to the preset or the custom snap points array
      */
@@ -149,18 +159,16 @@ const BottomSheet = forwardRef<
         }
         onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
       },
-      [onAnimate],
+      [isOpen, onAnimate],
     );
 
     return (
       <BottomSheetProvider value={{ onBack, hideCloseButton }}>
-        <StyledGorghomBottomSheet
+        <GorghomBottomSheet
           {...props}
           ref={mergedRefs}
-          className={bottomSheetVariants.root({
-            shadow: hideBackdrop && isOpen,
-          })}
-          backgroundClassName={bottomSheetVariants.background()}
+          style={styles.root}
+          backgroundStyle={styles.background}
           onChange={handleChange}
           onAnimate={handleAnimate}
           /**
@@ -186,7 +194,7 @@ const BottomSheet = forwardRef<
           index={-1}
         >
           {children}
-        </StyledGorghomBottomSheet>
+        </GorghomBottomSheet>
       </BottomSheetProvider>
     );
   },