@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import React from 'react';
 import { Plus, Settings } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
@@ -18,47 +19,17 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     appearance: {
       control: 'select',
-      options: [
-        'base',
-        'gray',
-        'accent',
-        'transparent',
-        'no-background',
-        'red',
-      ],
-      description: 'The visual style appearance of the button',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'The size of the button',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the button is disabled',
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Whether the button is in loading state',
-    },
-    icon: {
-      control: 'select',
-      description: 'Optional icon component to display',
-      options: ['None', 'Plus', 'Settings'],
-      mapping: {
-        None: undefined,
-        Plus: Plus,
-        Settings: Settings,
+      icon: {
+        control: 'select',
+        description: 'Optional icon component to display',
+        options: ['None', 'Plus', 'Settings'],
+        mapping: {
+          None: undefined,
+          Plus: Plus,
+          Settings: Settings,
+        },
       },
     },
-    children: {
-      control: 'text',
-      description: 'The content to be displayed inside the button',
-    },
-    isFull: {
-      control: 'boolean',
-      description: 'Whether the button is full width',
-    },
   },
 };
 
@@ -77,6 +48,7 @@ export const Base: Story = {
     appearance: 'base',
     children: 'Base Button',
   },
+  render: (args) => <Button {...args} />,
   parameters: {
     docs: {
       source: {
@@ -146,31 +118,31 @@ export const AppearanceShowcase: Story = {
     ];
 
     return (
-      <div className='flex gap-16 p-8'>
+      <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
         {appearances.map(({ name, appearance }) => (
           <Button key={appearance} appearance={appearance}>
             {name}
           </Button>
         ))}
-      </div>
+      </Box>
     );
   },
 };
 
 export const ContentTypesShowcase: Story = {
   render: () => (
-    <div className='flex items-center gap-4'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
       <Button appearance='base'>Text Only</Button>
       <Button appearance='base' icon={Plus}>
         With Icon
       </Button>
-    </div>
+    </Box>
   ),
 };
 
 export const SizesShowcase: Story = {
   render: () => (
-    <div className='flex items-center gap-4'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
       <Button appearance='base' size='sm'>
         Small
       </Button>
@@ -180,13 +152,13 @@ export const SizesShowcase: Story = {
       <Button appearance='base' size='lg' icon={Settings}>
         Large
       </Button>
-    </div>
+    </Box>
   ),
 };
 
 export const StatesShowcase: Story = {
   render: () => (
-    <div className='flex items-center gap-4'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
       <Button appearance='base'>Default</Button>
       <Button appearance='base' disabled>
         Disabled
@@ -194,35 +166,42 @@ export const StatesShowcase: Story = {
       <Button appearance='base' loading>
         Loading
       </Button>
-    </div>
+    </Box>
   ),
 };
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <div className='flex flex-col gap-8 p-8'>
+    <Box
+      lx={{
+        flexDirection: 'column',
+        gap: 's8',
+        padding: 's8',
+        alignItems: 'flex-start',
+      }}
+    >
       <Button appearance='base'>Short</Button>
       <Button appearance='base'>Medium length button</Button>
       <Button appearance='base' icon={Plus}>
         This is a longer button text to show dynamic width
       </Button>
-    </div>
+    </Box>
   ),
 };
 
-export const ResponsiveLayout2: Story = {
+export const LabelTruncate: Story = {
   render: () => (
-    <>
-      <p className='text-muted body-4-semi-bold'>
+    <Box>
+      <Text typography='body4SemiBold' lx={{ color: 'muted' }}>
         This container has a fixed width.
-      </p>
-      <div className='w-400 bg-muted-pressed p-16'>
+      </Text>
+      <Box lx={{ width: 's400', padding: 's16' }}>
         <Button icon={Plus}>
           This Base button has a fixed width container that should fit the
           content width.
         </Button>
-      </div>
-    </>
+      </Box>
+    </Box>
   ),
 };
 
@@ -244,7 +223,7 @@ export const InteractiveLoadingStates: Story = {
     };
 
     return (
-      <div className='flex items-center gap-4'>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
         <Button
           appearance='red'
           loading={states.text === 'loading'}
@@ -261,7 +240,7 @@ export const InteractiveLoadingStates: Story = {
         >
           {states.withIcon === 'red' ? 'Settings Error!' : 'With Icon'}
         </Button>
-      </div>
+      </Box>
     );
   },
 };

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

@@ -1,14 +1,7 @@
 import React from 'react';
-import { Pressable } from 'react-native';
+import { Pressable } from '../Utility';
 import { BaseButton } from './BaseButton';
-import { BaseButtonProps } from './BaseButton.types';
-
-export type ButtonProps = {
-  /**
-   * The content to display inside the button.
-   */
-  children: React.ReactNode;
-} & BaseButtonProps;
+import { ButtonProps } from './types';
 
 /**
  * A customizable button component that supports various appearances, sizes, full-width mode, loading states, and optional icons.
@@ -26,8 +19,8 @@ export type ButtonProps = {
  *   Click Me
  * </Button>
  *
- * // Full-width button with custom class
- * <Button appearance="accent" isFull={true} className="my-custom-class">
+ * // Full-width button with lx props
+ * <Button appearance="accent" isFull={true} lx={{ marginTop: 's16' }}>
  *   Submit
  * </Button>
  */

package/src/lib/Components/Button/index.ts

@@ -1,2 +1,2 @@
 export * from './Button';
-export * from './BaseButton.types';
+export * from './types';

package/src/lib/Components/Button/{BaseButton.types.ts → types.ts}

@@ -1,5 +1,6 @@
-import React from 'react';
-import { PressableProps } from 'react-native';
+import { ComponentType, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 import { IconSize } from '../Icon';
 
 export type BaseButtonProps = {
@@ -15,6 +16,7 @@ export type BaseButtonProps = {
     | 'red';
   /**
    * The size variant of the button.
+   * @default md
    */
   size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
@@ -28,17 +30,21 @@ export type BaseButtonProps = {
   /**
    * An optional icon component to render inside the button.
    */
-  icon?: React.ComponentType<{ size?: IconSize; className?: string }>;
+  icon?: ComponentType<{ size?: IconSize; style?: StyleProp<ViewStyle> }>;
   /**
    * Whether the button is disabled.
    */
   disabled?: boolean;
   /**
-   * Additional custom CSS classes to apply.
+   * The content to display inside the button.
    */
-  className?: string;
+  children?: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;
+
+export type ButtonProps = {
   /**
-   * The content to display inside the button.
+   * The size variant of the button.
+   * @default md
    */
-  children?: React.ReactNode;
-} & Omit<PressableProps, 'disabled' | 'children'>;
+  size?: 'sm' | 'md' | 'lg';
+} & Omit<BaseButtonProps, 'size'>;

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

@@ -3,7 +3,8 @@ 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} />
 
@@ -175,7 +176,7 @@ CardButtons automatically flow to fit their parent container width. No additiona
 To control card button width, use container elements:
 
 ```tsx
-import { View } from 'react-native';
+import { Box } from '@ledgerhq/lumen-ui-rnative';
 
 {
   /* Full container width */
@@ -187,26 +188,15 @@ import { View } from 'react-native';
 />;
 
 {
-  /* Constrained width */
+  /* Constrained width using Box with lx prop */
 }
-<View style={{ maxWidth: 300 }}>
+<Box lx={{ maxWidth: 's320' }}>
   <CardButton
     title='Constrained'
     description='This button is limited by its container'
     onPress={() => console.log('Constrained pressed')}
   />
-</View>;
-
-{
-  /* Using NativeWind classes */
-}
-<View className='max-w-md'>
-  <CardButton
-    title='Responsive'
-    description='Width adapts based on container'
-    onPress={() => console.log('Responsive pressed')}
-  />
-</View>;
+</Box>;
 ```
 
 ### Outline Appearance
@@ -237,13 +227,13 @@ Disable the card button to prevent user interaction:
 
 ### Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes for layout purposes:
+While the component comes with predefined styles, you can extend them using the `lx` prop for layout purposes:
 
 ```tsx
 <CardButton
   title='Mobile Only'
   description='This option is only available on mobile'
-  className='mt-4 mx-2' // Custom margins
+  lx={{ marginTop: 's4', marginHorizontal: 's2' }}
   appearance='base'
   onPress={() => console.log('Mobile only pressed')}
 />
@@ -253,7 +243,7 @@ While the component comes with predefined styles, you can extend them using Nati
 
 The following guidelines ensure consistent usage of the CardButton component and maintain design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use container elements to control width'
@@ -262,31 +252,31 @@ The following guidelines ensure consistent usage of the CardButton component and
 
 {/* prettier-ignore */}
 ```tsx
-<View className='max-w-md'>
+<Box lx={{ maxWidth: 's400' }}>
   <CardButton
     title='Continue'
     description='Proceed to next step'
     onPress={() => console.log('Continue')}
   />
-</View>
+</Box>
 ```
 
     </DoBlockItem>
     <DontBlockItem
       title="Don't modify width directly"
-      description='Avoid using className to set width on CardButton itself'
+      description='Avoid using lx to set width on CardButton itself'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<View className='max-w-md'>
+<Box lx={{ maxWidth: 's400' }}>
   <CardButton
     title='Continue'
     description='Proceed to next step'
-    className='w-full'
+    lx={{ width: 's320' }}
     onPress={() => console.log('Continue')}
   />
-</View>
+</Box>
 ```
 
     </DontBlockItem>
@@ -294,7 +284,7 @@ The following guidelines ensure consistent usage of the CardButton component and
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { View, Text } from 'react-native';
 import { Settings, Plus, Coins, CreditCard, Bank } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { CardButton } from './CardButton';
 
 const meta: Meta<typeof CardButton> = {
@@ -59,6 +59,7 @@ export const Base: Story = {
     appearance: 'base',
     title: 'Basic Card Button',
   },
+  render: (args) => <CardButton {...args} />,
   parameters: {
     docs: {
       source: {
@@ -66,7 +67,6 @@ export const Base: Story = {
 <CardButton
   appearance="base"
   title="Basic Card Button"
-  className="max-w-md"
 />
 `,
       },
@@ -79,7 +79,6 @@ export const WithIcon: Story = {
     appearance: 'base',
     title: 'Settings',
     icon: Settings,
-    className: 'max-w-md',
   },
   parameters: {
     docs: {
@@ -89,7 +88,6 @@ export const WithIcon: Story = {
   appearance="base"
   title="Settings"
   icon={Settings}
-  className="max-w-md"
 />
 `,
       },
@@ -102,7 +100,6 @@ export const WithDescription: Story = {
     appearance: 'base',
     title: 'Payment Method',
     description: 'Add or manage your payment options',
-    className: 'max-w-md',
   },
   parameters: {
     docs: {
@@ -112,7 +109,6 @@ export const WithDescription: Story = {
   appearance="base"
   title="Payment Method"
   description="Add or manage your payment options"
-  className="max-w-md"
 />
 `,
       },
@@ -125,7 +121,6 @@ export const WithoutChevron: Story = {
     appearance: 'base',
     title: 'Navigate Forward',
     hideChevron: true,
-    className: 'max-w-md',
   },
   parameters: {
     docs: {
@@ -135,7 +130,6 @@ export const WithoutChevron: Story = {
   appearance="base"
   title="Navigate Forward"
   hideChevron
-  className="max-w-md"
 />
 `,
       },
@@ -149,7 +143,6 @@ export const FullFeatures: Story = {
     title: 'Account Settings',
     description: 'Manage your account preferences and security',
     icon: Settings,
-    className: 'max-w-md',
   },
   parameters: {
     docs: {
@@ -160,7 +153,6 @@ export const FullFeatures: Story = {
   title="Account Settings"
   description="Manage your account preferences and security"
   icon={Settings}
-  className="max-w-md"
 />
 `,
       },
@@ -170,8 +162,11 @@ export const FullFeatures: Story = {
 
 export const NaturalWidth: Story = {
   render: () => (
-    <View className='w-full bg-muted-pressed p-16'>
-      <Text className='mb-16 text-muted body-4-semi-bold'>
+    <Box lx={{ backgroundColor: 'mutedPressed', padding: 's16' }}>
+      <Text
+        typography='body4SemiBold'
+        lx={{ color: 'muted', marginBottom: 's16' }}
+      >
         CardButton naturally flows to fill parent container width
       </Text>
       <CardButton
@@ -180,7 +175,7 @@ export const NaturalWidth: Story = {
         description='This card button demonstrates how it flows naturally to fill the full width of its parent container without any max-width constraints'
         icon={CreditCard}
       />
-    </View>
+    </Box>
   ),
   parameters: {
     docs: {
@@ -209,7 +204,14 @@ export const AppearanceShowcase: Story = {
     ];
 
     return (
-      <View className='flex max-w-md flex-col gap-16 p-8'>
+      <Box
+        lx={{
+          flexDirection: 'column',
+          gap: 's16',
+          padding: 's8',
+          maxWidth: 's400',
+        }}
+      >
         {appearances.map(({ name, appearance }) => (
           <CardButton
             key={appearance}
@@ -219,14 +221,21 @@ export const AppearanceShowcase: Story = {
             icon={Coins}
           />
         ))}
-      </View>
+      </Box>
     );
   },
 };
 
 export const ContentVariations: Story = {
   render: () => (
-    <View className='flex max-w-md flex-col gap-16 p-8'>
+    <Box
+      lx={{
+        flexDirection: 'column',
+        gap: 's16',
+        padding: 's8',
+        maxWidth: 's400',
+      }}
+    >
       <CardButton
         appearance='base'
         title='With Description'
@@ -253,13 +262,20 @@ export const ContentVariations: Story = {
       />
       <CardButton appearance='base' title='With Icon' icon={Plus} hideChevron />
       <CardButton appearance='base' title='With Chevron' />
-    </View>
+    </Box>
   ),
 };
 
 export const StatesShowcase: Story = {
   render: () => (
-    <View className='flex max-w-md flex-col gap-16 p-8'>
+    <Box
+      lx={{
+        flexDirection: 'column',
+        gap: 's16',
+        padding: 's8',
+        maxWidth: 's400',
+      }}
+    >
       <CardButton
         appearance='base'
         title='Base Default'
@@ -286,14 +302,24 @@ export const StatesShowcase: Story = {
         icon={Bank}
         disabled
       />
-    </View>
+    </Box>
   ),
 };
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <View className='w-320 flex-col gap-16 bg-muted-pressed p-16'>
-      <Text className='text-muted body-4-semi-bold'>Container: 320px wide</Text>
+    <Box
+      lx={{
+        width: 's320',
+        flexDirection: 'column',
+        gap: 's16',
+        backgroundColor: 'mutedPressed',
+        padding: 's16',
+      }}
+    >
+      <Text typography='body4SemiBold' lx={{ color: 'muted' }}>
+        Container: 320px wide
+      </Text>
       <CardButton
         appearance='base'
         title='Short Title'
@@ -312,6 +338,6 @@ export const ResponsiveLayout: Story = {
         description='This is a longer description that demonstrates how the card handles longer content within its constraints'
         icon={Settings}
       />
-    </View>
+    </Box>
   ),
 };