feat/add bottomsheet

apps/app-sandbox-rnative/.babelrc.js

@@ -15,7 +15,10 @@ module.exports = function (api) {
         ],
         'nativewind/babel',
       ],
-      plugins: [['@babel/plugin-proposal-decorators', { version: '2023-11' }]],
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { version: '2023-11' }],
+        'react-native-worklets/plugin',
+      ],
     };
   }
 

apps/app-sandbox-rnative/ios/Podfile.lock

@@ -1210,7 +1210,7 @@ PODS:
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-  - react-native-safe-area-context (5.6.1):
+  - react-native-safe-area-context (5.4.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1223,8 +1223,8 @@ PODS:
     - React-featureflags
     - React-graphics
     - React-ImageManager
-    - react-native-safe-area-context/common (= 5.6.1)
-    - react-native-safe-area-context/fabric (= 5.6.1)
+    - react-native-safe-area-context/common (= 5.4.0)
+    - react-native-safe-area-context/fabric (= 5.4.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-rendererdebug
@@ -1233,7 +1233,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context/common (5.6.1):
+  - react-native-safe-area-context/common (5.4.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1254,7 +1254,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context/fabric (5.6.1):
+  - react-native-safe-area-context/fabric (5.4.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1565,6 +1565,27 @@ PODS:
     - React-logger (= 0.77.3)
     - React-perflogger (= 0.77.3)
     - React-utils (= 0.77.3)
+  - RNGestureHandler (2.28.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNReanimated (3.17.5):
     - DoubleConversion
     - glog
@@ -1799,6 +1820,7 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNSVG (from `../../../node_modules/react-native-svg`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
@@ -1941,6 +1963,8 @@ EXTERNAL SOURCES:
     :path: build/generated/ios
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
+  RNGestureHandler:
+    :path: "../../../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../../../node_modules/react-native-reanimated"
   RNSVG:
@@ -1985,7 +2009,7 @@ SPEC CHECKSUMS:
   React-logger: a23563f96a622637d7cce687bdf304929104effd
   React-Mapbuffer: 1864935968d15b9b73d8e413d29c780f0ab50038
   React-microtasksnativemodule: 3b784cf40f7c3c9500b9a5f9e4eec5c9bbfbef8f
-  react-native-safe-area-context: 3ca252db05d82ea67f6d178fbd289ff832f5681b
+  react-native-safe-area-context: afcc2e2b3e78ae8ef90d81e658aacee34ebc27ea
   React-nativeconfig: f77b4627803bf7886a1f2e96b33b8af34e583cc4
   React-NativeModulesApple: dfa86c79c621f2a9cdb39636570c2e1623b71367
   React-perflogger: 1f83401f01544142b32151ef6c66870455c64994
@@ -2015,6 +2039,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 31015410a4a53b9fd0a908ad4d6e3e2b9a25086a
   ReactCodegen: 0bc214e29416a2fe0589237d7f93018e8b3a6f3d
   ReactCommon: bf4612cba0fa356b529385029f470d5529dddde4
+  RNGestureHandler: 212e71e875f993aef2f9f08ac8f61231c863ec44
   RNReanimated: 2e47b7dd1752e4d37ceba7dfcde62e7e8e1e9984
   RNSVG: 6a383145a3c76eba345cabe83d6424a2840308ca
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748

apps/app-sandbox-rnative/package.json

@@ -11,12 +11,14 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "nativewind": "^4.1.23",
+    "nativewind": "~4.1.23",
     "react": "18.3.1",
     "react-native": "~0.77.3",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "^5.4.0",
-    "react-native-svg": "~15.8.0"
+    "react-native-svg": "~15.8.0",
+    "@gorhom/bottom-sheet": "^5.2.6",
+    "react-native-gesture-handler": "^2.28.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.28.0",

apps/app-sandbox-rnative/src/app/App.tsx

@@ -1,5 +1,7 @@
-import { ThemeProvider } from '@ledgerhq/ldls-ui-rnative';
+import { ThemeProvider, useBottomSheetRef } from '@ledgerhq/ldls-ui-rnative';
 import { SafeAreaView, ScrollView, StatusBar, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheets, BottomSheetsButton } from './blocks/BottomSheets';
 import { Buttons } from './blocks/Buttons';
 import { Checkboxes } from './blocks/Checkboxes';
 import { IconButtons } from './blocks/IconButtons';
@@ -9,35 +11,45 @@ import { ToggleThemeSwitch } from './blocks/ToggleThemeSwitch';
 import { SandboxBlock } from './SandboxBlock';
 
 export const App = () => {
+  const bottomSheetRef = useBottomSheetRef();
+
   return (
-    <SafeAreaView className='flex flex-1'>
+    <SafeAreaView className='flex flex-1 bg-canvas'>
       <StatusBar />
       <ThemeProvider defaultMode='dark' className='flex flex-1'>
-        <ScrollView
-          contentInsetAdjustmentBehavior='automatic'
-          className='h-screen bg-canvas-sheet px-16'
-        >
-          <View className='flex flex-col gap-32 py-40'>
-            <SandboxBlock title='Inputs'>
-              <Inputs />
-            </SandboxBlock>
-            <SandboxBlock title='Checkboxes'>
-              <Checkboxes />
-            </SandboxBlock>
-            <SandboxBlock title='Switches'>
-              <Switches />
-            </SandboxBlock>
-            <SandboxBlock title='Buttons'>
-              <Buttons />
-            </SandboxBlock>
-            <SandboxBlock title='IconButtons'>
-              <IconButtons />
-            </SandboxBlock>
-            <SandboxBlock title='ToggleThemeSwitch'>
-              <ToggleThemeSwitch />
-            </SandboxBlock>
-          </View>
-        </ScrollView>
+        <GestureHandlerRootView className='flex w-full flex-1 bg-accent'>
+          <ScrollView
+            contentInsetAdjustmentBehavior='automatic'
+            className='h-screen bg-canvas px-16 '
+          >
+            <View className='flex flex-col gap-32 py-40'>
+              <SandboxBlock title='Inputs'>
+                <Inputs />
+              </SandboxBlock>
+              <SandboxBlock title='Checkboxes'>
+                <Checkboxes />
+              </SandboxBlock>
+              <SandboxBlock title='Switches'>
+                <Switches />
+              </SandboxBlock>
+              <SandboxBlock title='Buttons'>
+                <Buttons />
+              </SandboxBlock>
+              <SandboxBlock title='IconButtons'>
+                <IconButtons />
+              </SandboxBlock>
+              <SandboxBlock title='ToggleThemeSwitch'>
+                <ToggleThemeSwitch />
+              </SandboxBlock>
+              <SandboxBlock title='BottomSheets'>
+                <BottomSheetsButton
+                  onPress={() => bottomSheetRef.current?.expand()}
+                />
+              </SandboxBlock>
+            </View>
+          </ScrollView>
+          <BottomSheets ref={bottomSheetRef} />
+        </GestureHandlerRootView>
       </ThemeProvider>
     </SafeAreaView>
   );

apps/app-sandbox-rnative/src/app/SandboxBlock.tsx

@@ -8,9 +8,9 @@ type SandboxBlockProps = {
 
 export const SandboxBlock = ({ title, children }: SandboxBlockProps) => {
   return (
-    <View className='border-muted-subtle flex flex-col gap-8 border-t pt-16'>
-      <Text className='heading-3-semi-bold text-base'>{title}</Text>
-      <View className='flex-row flex-wrap gap-12'>{children}</View>
+    <View className='flex flex-col gap-8 border-t border-muted-subtle pt-16'>
+      <Text className='text-base heading-3-semi-bold'>{title}</Text>
+      <View className='flex-row flex-wrap items-start gap-12'>{children}</View>
     </View>
   );
 };

apps/app-sandbox-rnative/src/app/blocks/BottomSheets.tsx

@@ -0,0 +1,54 @@
+import {
+  BottomSheet,
+  BottomSheetHeader,
+  Button,
+  BottomSheetFlatList,
+} from '@ledgerhq/ldls-ui-rnative';
+import { forwardRef } from 'react';
+import { Text, View } from 'react-native';
+
+export const BottomSheetsButton = ({ onPress }: any) => {
+  return (
+    <Button appearance='base' onPress={onPress}>
+      Base
+    </Button>
+  );
+};
+
+export const BottomSheets = forwardRef<React.ElementRef<typeof BottomSheet>>(
+  (props, ref) => {
+    const data = Array.from({ length: 100 }, (_, i) => ({
+      id: i.toString(),
+      title: `Item ${i + 1}`,
+      description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+    }));
+
+    return (
+      <BottomSheet {...props} ref={ref}>
+        <BottomSheetHeader
+          spacing
+          title='Virtual List'
+          appearance='compact'
+          description='This bottom sheet contains a virtualized list'
+        />
+        <BottomSheetFlatList
+          data={data}
+          keyExtractor={(item) => (item as any).id}
+          renderItem={({ item }) => {
+            const typedItem = item as any;
+            return (
+              <View className='flex flex-col gap-4 border-b border-base py-12'>
+                <Text className='text-base body-2-semi-bold'>
+                  {typedItem.title}
+                </Text>
+                <Text className='text-muted body-3'>
+                  {typedItem.description}
+                </Text>
+              </View>
+            );
+          }}
+        />
+      </BottomSheet>
+    );
+  },
+);

libs/ui-rnative/.storybook/Decorator.tsx

@@ -1,5 +1,8 @@
 import type { Decorator } from '@storybook/react-native-web-vite';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { ThemeProvider } from '../src/lib/Components';
+
 const createThemeDecorator = (
   globalName: string,
   themeClasses: string[],
@@ -28,3 +31,13 @@ export const withModeDecorator = createThemeDecorator('mode', [
   'light',
   'dark',
 ]);
+
+export const withProvidersDecorator: Decorator = (Story, context) => {
+  return (
+    <ThemeProvider>
+      <GestureHandlerRootView style={{ flex: 1, width: '100%' }}>
+        <Story />
+      </GestureHandlerRootView>
+    </ThemeProvider>
+  );
+};

libs/ui-rnative/.storybook/preview.ts

@@ -1,7 +1,11 @@
 import type { Preview } from '@storybook/react-native-web-vite';
 import '../src/styles.css';
 import './font.css';
-import { withBrandDecorator, withModeDecorator } from './Decorator';
+import {
+  withBrandDecorator,
+  withModeDecorator,
+  withProvidersDecorator,
+} from './Decorator';
 
 const preview: Preview = {
   globalTypes: {
@@ -60,6 +64,7 @@ const preview: Preview = {
         ],
       },
     },
+    tags: ['autodocs'],
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
@@ -69,7 +74,7 @@ const preview: Preview = {
     },
   },
 
-  decorators: [withBrandDecorator, withModeDecorator],
+  decorators: [withBrandDecorator, withModeDecorator, withProvidersDecorator],
 };
 
 export default preview;

libs/ui-rnative/.storybook/theme.ts

@@ -1,6 +1,6 @@
 import { ThemeVars } from 'storybook/theming';
 import { create } from 'storybook/theming/create';
-import logoUrl from './lumen.svg';
+import logoUrl from './docs/lumen.svg';
 
 const theme: ThemeVars = create({
   base: 'light',

libs/ui-rnative/babel.config.js

@@ -12,6 +12,7 @@ export default function (api) {
       ],
       'nativewind/babel',
     ],
+    plugins: ['react-native-worklets/plugin'],
     env: {
       test: {
         presets: [

libs/ui-rnative/package.json

@@ -34,7 +34,7 @@
     "react": "~18.3.1",
     "react-native": "~0.77.3",
     "react-native-svg": "^15.0.0",
-    "nativewind": "^4.1.23"
+    "nativewind": "~4.1.23"
   },
   "nx": {
     "tags": [