@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,63 +1,92 @@
 import { useBottomSheet } from '@gorhom/bottom-sheet';
-import { cva } from 'class-variance-authority';
 import { FC, useCallback } from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
 import { ArrowLeft, Close } from '../../Symbols';
-import { cn } from '../../utils';
 import { IconButton } from '../IconButton';
+import { Box, Text } from '../Utility';
 import { useBottomSheetContext } from './BottomSheet';
 import { BottomSheetHeaderProps } from './types';
 
-const bottomSheetHeaderVariants = {
-  root: cva('sticky top-0 z-dialog-content bg-canvas-sheet pb-12', {
-    variants: {
-      spacing: {
-        true: 'px-16',
-        false: '',
-      },
-    },
-  }),
-  inner: cva('flex flex-row items-center justify-between gap-16', {
-    variants: {
-      appearance: {
-        compact: '',
-        expanded: 'mb-16',
-      },
-      hidden: {
-        true: 'hidden',
-        false: '',
-      },
-    },
-  }),
-  textWrapper: cva('flex flex-1 text-center', {
-    variants: {
-      appearance: {
-        compact: '',
-        expanded: 'gap-4',
-      },
-    },
-  }),
-  title: cva('text-base', {
-    variants: {
-      appearance: {
-        compact: 'text-center heading-4-semi-bold',
-        expanded: 'heading-2-semi-bold',
-      },
-    },
-  }),
-  desc: cva('text-muted body-2', {
-    variants: {
-      appearance: {
-        compact: 'text-center',
-        expanded: 'text-left',
+type Appearance = NonNullable<BottomSheetHeaderProps['appearance']>;
+
+const Z_INDEX_DIALOG_CONTENT = 1000;
+
+const useStyles = ({
+  appearance,
+  spacing,
+  hidden,
+}: {
+  appearance: Appearance;
+  spacing: boolean;
+  hidden: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => ({
+      root: StyleSheet.flatten([
+        {
+          position: 'relative',
+          zIndex: Z_INDEX_DIALOG_CONTENT,
+          backgroundColor: t.colors.bg.canvasSheet,
+          paddingBottom: t.spacings.s12,
+        },
+        spacing && {
+          paddingHorizontal: t.spacings.s16,
+        },
+      ]),
+      inner: StyleSheet.flatten([
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: t.spacings.s16,
+        },
+        appearance === 'expanded' && {
+          marginBottom: t.spacings.s16,
+        },
+        hidden && {
+          display: 'none',
+        },
+      ]),
+      textWrapper: StyleSheet.flatten([
+        {
+          flex: 1,
+        },
+        appearance === 'expanded' && {
+          gap: t.spacings.s4,
+        },
+      ]),
+      title: StyleSheet.flatten([
+        appearance === 'compact'
+          ? t.typographies.heading4SemiBold
+          : t.typographies.heading2SemiBold,
+        {
+          color: t.colors.text.base,
+        },
+        appearance === 'compact' && {
+          textAlign: 'center',
+        },
+      ]),
+      description: StyleSheet.flatten([
+        t.typographies.body2,
+        {
+          color: t.colors.text.muted,
+          textAlign: appearance === 'compact' ? 'center' : 'left',
+        },
+      ]),
+      iconPlaceholder: {
+        width: t.sizes.s32,
+        height: t.sizes.s32,
       },
-    },
-  }),
+    }),
+    [appearance, spacing, hidden],
+  );
 };
 
 export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
-  className,
+  lx,
+  style,
   title,
   description,
   appearance = 'compact',
@@ -78,37 +107,27 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
   const hasTitleSection = Boolean(title || description);
   const hasIcons = Boolean(onBack || !hideCloseButton);
 
+  const styles = useStyles({
+    appearance,
+    spacing,
+    hidden: !hasIcons && appearance !== 'compact',
+  });
+
   if (!title && !description && !onBack && hideCloseButton) {
     return null;
   }
 
   const titleComponent = hasTitleSection ? (
-    <View className={bottomSheetHeaderVariants.textWrapper({ appearance })}>
-      {title && (
-        <Text className={bottomSheetHeaderVariants.title({ appearance })}>
-          {title}
-        </Text>
-      )}
-      {description && (
-        <Text className={bottomSheetHeaderVariants.desc({ appearance })}>
-          {description}
-        </Text>
-      )}
-    </View>
+    <Box style={styles.textWrapper}>
+      {title && <Text style={styles.title}>{title}</Text>}
+      {description && <Text style={styles.description}>{description}</Text>}
+    </Box>
   ) : null;
 
   return (
-    <View
-      {...props}
-      className={cn(bottomSheetHeaderVariants.root({ spacing }), className)}
-    >
-      <View
-        className={bottomSheetHeaderVariants.inner({
-          appearance,
-          hidden: !hasIcons && appearance !== 'compact',
-        })}
-      >
-        <View className='size-32'>
+    <Box {...props} lx={lx} style={[styles.root, style]}>
+      <Box style={styles.inner}>
+        <Box style={styles.iconPlaceholder}>
           {onBack && (
             <IconButton
               accessibilityLabel={t(
@@ -120,9 +139,9 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
               appearance='transparent'
             />
           )}
-        </View>
+        </Box>
         {appearance === 'compact' && titleComponent}
-        <View className='size-32'>
+        <Box style={styles.iconPlaceholder}>
           {!hideCloseButton && (
             <IconButton
               accessibilityLabel={t(
@@ -134,10 +153,10 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
               appearance='transparent'
             />
           )}
-        </View>
-      </View>
+        </Box>
+      </Box>
       {appearance === 'expanded' && titleComponent}
-    </View>
+    </Box>
   );
 };
 BottomSheetHeader.displayName = 'BottomSheetHeader';

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

@@ -1,26 +1,35 @@
 import { BottomSheetBackdrop as GorhomBottomSheetBackdrop } from '@gorhom/bottom-sheet';
-import { cssInterop } from 'nativewind';
 import React from 'react';
+import { useStyleSheet } from '../../../styles';
 import { BottomSheetProps } from './types';
 
-const StyledCustomBackdrop = cssInterop(GorhomBottomSheetBackdrop, {
-  className: 'style',
-});
-
 type BackDropProps = React.ComponentProps<typeof GorhomBottomSheetBackdrop> & {
   backdropPressBehavior?: BottomSheetProps['backdropPressBehavior'];
   onPress?: () => void;
 };
 
+const useStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      backdrop: {
+        backgroundColor: t.colors.bg.canvasOverlay,
+      },
+    }),
+    [],
+  );
+};
+
 export const CustomBackdrop = ({
   backdropPressBehavior,
   onPress,
   ...props
 }: BackDropProps) => {
+  const styles = useStyles();
+
   return (
-    <StyledCustomBackdrop
+    <GorhomBottomSheetBackdrop
       {...props}
-      className='bg-canvas-overlay'
+      style={styles.backdrop}
       opacity={1}
       appearsOnIndex={0}
       disappearsOnIndex={-1}

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

@@ -1,18 +1,39 @@
 import { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { forwardRef } from 'react';
 import { View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+
+const useStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        height: t.spacings.s16,
+        width: t.sizes.s80,
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        backgroundColor: t.colors.bg.canvasSheet,
+      },
+      handle: {
+        height: t.spacings.s4,
+        width: t.sizes.s36,
+        borderRadius: t.borderRadius.full,
+        backgroundColor: t.colors.bg.mutedPressed,
+      },
+    }),
+    [],
+  );
+};
 
 export const CustomHandle = forwardRef<
   React.ElementRef<typeof View>,
   BottomSheetVariables
 >((props, ref) => {
+  const styles = useStyles();
+
   return (
-    <View
-      {...props}
-      ref={ref}
-      className='h-16 w-80 items-center justify-center self-center bg-canvas-sheet'
-    >
-      <View className='h-4 w-36 rounded-full bg-muted-pressed' />
+    <View {...props} ref={ref} style={styles.container}>
+      <View style={styles.handle} />
     </View>
   );
 });

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

@@ -5,54 +5,44 @@ import {
   BottomSheetScrollView as GorhomBottomSheetScrollView,
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
 } from '@gorhom/bottom-sheet';
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
 import { FC, forwardRef } from 'react';
+import { ViewStyle } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import {
+  BottomSheetViewProps,
+  BottomSheetFlatListProps,
+  BottomSheetSectionListProps,
+  BottomSheetScrollViewProps,
+  BottomSheetVirtualizedListProps,
+} from './types';
 
-const styles = cva('flex-1 px-16 pb-16');
-
-export type BottomSheetViewProps = Parameters<typeof GorhomBottomSheetView>[0];
-export type BottomSheetFlatListProps = Parameters<
-  typeof GorhomBottomSheetFlatList
->[0];
-export type BottomSheetSectionListProps = Parameters<
-  typeof GorhomBottomSheetSectionList
->[0];
-export type BottomSheetScrollViewProps = Parameters<
-  typeof GorhomBottomSheetScrollView
->[0];
-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' },
-);
+const useScrollableStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        flex: 1,
+        paddingHorizontal: t.spacings.s16,
+        paddingBottom: t.spacings.s16,
+      },
+    }),
+    [],
+  );
+};
 
 export const BottomSheetView: FC<BottomSheetViewProps> = ({
   children,
-  className,
+  style,
   ...props
 }) => {
+  const styles = useScrollableStyles();
+
   return (
-    <StyledBottomSheetView className={cn(className, styles())} {...props}>
+    <GorhomBottomSheetView
+      style={[styles.container as ViewStyle, style]}
+      {...props}
+    >
       {children}
-    </StyledBottomSheetView>
+    </GorhomBottomSheetView>
   );
 };
 BottomSheetView.displayName = 'BottomSheetView';
@@ -60,15 +50,17 @@ BottomSheetView.displayName = 'BottomSheetView';
 export const BottomSheetFlatList = forwardRef<
   React.ElementRef<typeof GorhomBottomSheetFlatList>,
   BottomSheetFlatListProps
->(({ children, className, ...props }, ref) => {
+>(({ children, style, ...props }, ref) => {
+  const styles = useScrollableStyles();
+
   return (
-    <StyledBottomSheetFlatList
+    <GorhomBottomSheetFlatList
       ref={ref}
-      className={cn(className, styles())}
+      style={[styles.container as ViewStyle, style]}
       {...props}
     >
       {children}
-    </StyledBottomSheetFlatList>
+    </GorhomBottomSheetFlatList>
   );
 });
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';
@@ -76,15 +68,17 @@ BottomSheetFlatList.displayName = 'BottomSheetFlatList';
 export const BottomSheetSectionList = forwardRef<
   React.ElementRef<typeof GorhomBottomSheetSectionList>,
   BottomSheetSectionListProps
->(({ children, className, ...props }, ref) => {
+>(({ children, style, ...props }, ref) => {
+  const styles = useScrollableStyles();
+
   return (
-    <StyledBottomSheetSectionList
+    <GorhomBottomSheetSectionList
       ref={ref}
-      className={cn(className, styles())}
+      style={[styles.container as ViewStyle, style]}
       {...props}
     >
       {children}
-    </StyledBottomSheetSectionList>
+    </GorhomBottomSheetSectionList>
   );
 });
 BottomSheetSectionList.displayName = 'BottomSheetSectionList';
@@ -92,15 +86,17 @@ BottomSheetSectionList.displayName = 'BottomSheetSectionList';
 export const BottomSheetScrollView = forwardRef<
   React.ElementRef<typeof GorhomBottomSheetScrollView>,
   BottomSheetScrollViewProps
->(({ children, className, ...props }, ref) => {
+>(({ children, style, ...props }, ref) => {
+  const styles = useScrollableStyles();
+
   return (
-    <StyledBottomSheetScrollView
+    <GorhomBottomSheetScrollView
       ref={ref}
-      className={cn(className, styles())}
+      style={[styles.container as ViewStyle, style]}
       {...props}
     >
       {children}
-    </StyledBottomSheetScrollView>
+    </GorhomBottomSheetScrollView>
   );
 });
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';
@@ -108,15 +104,17 @@ BottomSheetScrollView.displayName = 'BottomSheetScrollView';
 export const BottomSheetVirtualizedList = forwardRef<
   React.ElementRef<typeof GorhomBottomSheetVirtualizedList>,
   BottomSheetVirtualizedListProps
->(({ children, className, ...props }, ref) => {
+>(({ children, style, ...props }, ref) => {
+  const styles = useScrollableStyles();
+
   return (
-    <StyledBottomSheetVirtualizedList
+    <GorhomBottomSheetVirtualizedList
       ref={ref}
-      className={cn(className, styles())}
+      style={[styles.container as ViewStyle, style]}
       {...props}
     >
       {children}
-    </StyledBottomSheetVirtualizedList>
+    </GorhomBottomSheetVirtualizedList>
   );
 });
 BottomSheetVirtualizedList.displayName = 'BottomSheetVirtualizedList';

package/src/lib/Components/BottomSheet/types.ts

@@ -1,6 +1,13 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import {
+  BottomSheetView as GorhomBottomSheetView,
+  BottomSheetFlatList as GorhomBottomSheetFlatList,
+  BottomSheetSectionList as GorhomBottomSheetSectionList,
+  BottomSheetScrollView as GorhomBottomSheetScrollView,
+  BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
+} from '@gorhom/bottom-sheet';
 
+import { PropsWithChildren, ReactNode } from 'react';
+import { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
   /**
    * Used to locate this view in end-to-end tests.
@@ -110,7 +117,7 @@ export type BottomSheetProps = PropsWithChildren & {
   enableBlurKeyboardOnGesture?: boolean;
 };
 
-export type BottomSheetHeaderProps = ViewProps & {
+export type BottomSheetHeaderProps = {
   /**
    * The appearance of the header.
    * @default 'compact'
@@ -130,4 +137,18 @@ export type BottomSheetHeaderProps = ViewProps & {
    * @default false
    */
   spacing?: boolean;
-};
+} & Omit<StyledViewProps, 'children'>;
+
+export type BottomSheetViewProps = Parameters<typeof GorhomBottomSheetView>[0];
+export type BottomSheetFlatListProps = Parameters<
+  typeof GorhomBottomSheetFlatList
+>[0];
+export type BottomSheetSectionListProps = Parameters<
+  typeof GorhomBottomSheetSectionList
+>[0];
+export type BottomSheetScrollViewProps = Parameters<
+  typeof GorhomBottomSheetScrollView
+>[0];
+export type BottomSheetVirtualizedListProps = Parameters<
+  typeof GorhomBottomSheetVirtualizedList
+>[0];

package/src/lib/Components/Button/BaseButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC, PropsWithChildren } from 'react';
-import { Text, View } from 'react-native';
-import { LumenStyleSheet, mergeStyles } from '../../../styles';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { IconSize } from '../Icon';
 import { Spinner } from '../Spinner';
 import { Pressable } from '../Utility';
@@ -17,12 +17,11 @@ const iconSizeMap: Record<Size, IconSize> = {
 } as const;
 
 const useRootStyles = ({ isFull }: { isFull: boolean }) => {
-  return LumenStyleSheet.useCreate(
+  return useStyleSheet(
     (t) => {
       return {
         root: {
           width: isFull ? t.sizes.full : 'auto',
-          borderRadius: t.borderRadius.full,
         },
       };
     },
@@ -45,7 +44,7 @@ const useStyles = ({
   iconOnly: boolean;
   isFull: boolean;
 }) => {
-  return LumenStyleSheet.useCreate(
+  return useStyleSheet(
     (t) => {
       const bgColors: Record<Appearance, string> = {
         base: t.colors.bg.interactive,
@@ -96,11 +95,12 @@ const useStyles = ({
       const currentSizeStyle = sizeStyles[size];
 
       return {
-        container: mergeStyles(
+        container: StyleSheet.flatten([
           {
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
+            borderRadius: t.borderRadius.full,
             backgroundColor: bgColors[appearance],
           },
           iconOnly
@@ -115,11 +115,14 @@ const useStyles = ({
           disabled && { backgroundColor: t.colors.bg.disabled },
           appearance === 'no-background' &&
             disabled && { backgroundColor: 'transparent' },
-        ),
-        label: mergeStyles(typography, {
-          color: disabled ? t.colors.text.disabled : textColors[appearance],
-          textAlign: 'left',
-        }),
+        ]),
+        label: StyleSheet.flatten([
+          typography,
+          {
+            color: disabled ? t.colors.text.disabled : textColors[appearance],
+            textAlign: 'left',
+          },
+        ]),
         icon: {
           flexShrink: 0,
           color: disabled ? t.colors.text.disabled : textColors[appearance],
@@ -160,7 +163,7 @@ export const BaseButton = React.forwardRef<
       <Pressable
         ref={ref}
         lx={lx}
-        style={[style, rootStyles.root]}
+        style={StyleSheet.flatten([style, rootStyles.root])}
         disabled={disabled}
         accessibilityRole='button'
         accessibilityState={{ disabled }}
@@ -218,7 +221,10 @@ const BaseButtonContent: FC<BaseButtonContentProps> = ({
   return (
     <View style={styles.container} testID='base-button-content'>
       {loading && (
-        <Spinner size={calculatedIconSize} color={styles.icon.color} />
+        <Spinner
+          size={calculatedIconSize}
+          style={{ color: styles.icon.color }}
+        />
       )}
       {!loading && IconProp && (
         <IconProp size={calculatedIconSize} style={styles.icon} />

package/src/lib/Components/Button/Button.mdx

@@ -3,7 +3,7 @@ import * as ButtonStories from './Button.stories';
 import { Button } from './Button';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Action/Button' of={ButtonStories} />

package/src/lib/Components/CardButton/CardButton.mdx

@@ -3,7 +3,7 @@ import * as CardButtonStories from './CardButton.stories';
 import { CardButton } from './CardButton';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Action/CardButton' of={CardButtonStories} />