mc

Signed-off-by: Simon Bruneaud <[email protected]>

Author: gamegee

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

@@ -27,10 +27,34 @@ const config: StorybookConfig = {
       ...config.resolve.alias,
       'react-native': 'react-native-web',
       'react-native-svg': 'react-native-svg-web',
+      // Stub out the doctor module that has CommonJS issues
+      'react-native-css-interop/doctor':
+        'react-native-css-interop/dist/runtime/web/api',
     };
+    // Force resolution to use browser/module builds instead of CommonJS
+    config.resolve.conditions = ['browser', 'module', 'import', 'default'];
+    config.resolve.mainFields = ['browser', 'module', 'main'];
 
     return mergeConfig(config, {
-      plugins: [nxViteTsPaths()],
+      plugins: [
+        nxViteTsPaths(),
+        {
+          name: 'inject-exports',
+          enforce: 'post',
+          generateBundle(_options, bundle) {
+            // Inject exports definition at the start of chunks that reference it
+            for (const fileName in bundle) {
+              const chunk = bundle[fileName];
+              if (
+                chunk.type === 'chunk' &&
+                chunk.code.includes('Object.defineProperty(exports,')
+              ) {
+                chunk.code = `const exports = {};\n${chunk.code}`;
+              }
+            }
+          },
+        },
+      ],
       css: {
         postcss: {
           plugins: [
@@ -39,6 +63,17 @@ const config: StorybookConfig = {
           ],
         },
       },
+      optimizeDeps: {
+        esbuildOptions: {
+          mainFields: ['browser', 'module', 'main'],
+        },
+      },
+      build: {
+        commonjsOptions: {
+          include: [/node_modules/],
+          transformMixedEsModules: true,
+        },
+      },
     });
   },
 

libs/ui-rnative/src/lib/Components/BottomSheet/Scrollables.tsx

@@ -7,7 +7,7 @@ import {
 } from '@gorhom/bottom-sheet';
 import { cn } from '@ledgerhq/ldls-utils-shared';
 import { cva } from 'class-variance-authority';
-import { remapProps } from 'nativewind';
+import { cssInterop } from 'nativewind';
 import { FC } from 'react';
 
 const styles = cva('mt-16 flex-1 px-16 pb-24');
@@ -26,15 +26,35 @@ export type BottomSheetVirtualizedListProps = Parameters<
   typeof GorhomBottomSheetVirtualizedList
 >[0];
 
+// Apply cssInterop to map className to style prop for Gorhom components
+const StyledBottomSheetView = cssInterop(GorhomBottomSheetView, {
+  className: 'style',
+});
+const StyledBottomSheetFlatList = cssInterop(GorhomBottomSheetFlatList, {
+  className: 'style',
+});
+const StyledBottomSheetSectionList = cssInterop(GorhomBottomSheetSectionList, {
+  className: 'style',
+});
+const StyledBottomSheetScrollView = cssInterop(GorhomBottomSheetScrollView, {
+  className: 'style',
+});
+const StyledBottomSheetVirtualizedList = cssInterop(
+  GorhomBottomSheetVirtualizedList,
+  {
+    className: 'style',
+  },
+);
+
 export const BottomSheetView: FC<BottomSheetViewProps> = ({
   children,
   className,
   ...props
 }) => {
   return (
-    <_BottomSheetView className={cn(className, styles())} {...props}>
+    <StyledBottomSheetView className={cn(className, styles())} {...props}>
       {children}
-    </_BottomSheetView>
+    </StyledBottomSheetView>
   );
 };
 
@@ -44,56 +64,48 @@ export const BottomSheetFlatList: FC<BottomSheetFlatListProps> = ({
   ...props
 }) => {
   return (
-    <_BottomSheetFlatList className={cn(className, styles())} {...props}>
+    <StyledBottomSheetFlatList className={cn(className, styles())} {...props}>
       {children}
-    </_BottomSheetFlatList>
+    </StyledBottomSheetFlatList>
   );
 };
+
 export const BottomSheetSectionList: FC<BottomSheetSectionListProps> = ({
   children,
   className,
   ...props
 }) => {
   return (
-    <_BottomSheetSectionList className={cn(className, styles())} {...props}>
+    <StyledBottomSheetSectionList
+      className={cn(className, styles())}
+      {...props}
+    >
       {children}
-    </_BottomSheetSectionList>
+    </StyledBottomSheetSectionList>
   );
 };
+
 export const BottomSheetScrollView: FC<BottomSheetScrollViewProps> = ({
   children,
   className,
   ...props
 }) => {
   return (
-    <_BottomSheetScrollView className={cn(className, styles())} {...props}>
+    <StyledBottomSheetScrollView className={cn(className, styles())} {...props}>
       {children}
-    </_BottomSheetScrollView>
+    </StyledBottomSheetScrollView>
   );
 };
+
 export const BottomSheetVirtualizedList: FC<
   BottomSheetVirtualizedListProps
 > = ({ children, className, ...props }) => {
   return (
-    <_BottomSheetVirtualizedList className={cn(className, styles())} {...props}>
+    <StyledBottomSheetVirtualizedList
+      className={cn(className, styles())}
+      {...props}
+    >
       {children}
-    </_BottomSheetVirtualizedList>
+    </StyledBottomSheetVirtualizedList>
   );
 };
-
-const _BottomSheetView = remapProps(GorhomBottomSheetView, {
-  className: 'style',
-});
-const _BottomSheetFlatList = remapProps(GorhomBottomSheetFlatList, {
-  className: 'style',
-});
-const _BottomSheetSectionList = remapProps(GorhomBottomSheetSectionList, {
-  className: 'style',
-});
-const _BottomSheetScrollView = remapProps(GorhomBottomSheetScrollView, {
-  className: 'style',
-});
-const _BottomSheetVirtualizedList = remapProps(
-  GorhomBottomSheetVirtualizedList,
-  { className: 'style' },
-);