@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/.storybook/Decorator.tsx

@@ -3,12 +3,52 @@ import {
   ledgerLiveThemes,
   websitesThemes,
 } from '@ledgerhq/lumen-design-core';
+import {
+  DocsContainer,
+  DocsContainerProps,
+} from '@storybook/addon-docs/blocks';
 import type { Decorator } from '@storybook/react-native-web-vite';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 
 import { ColorSchemeName } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { ThemeProvider } from '../src/lib/Components';
 
+type BrandThemes = typeof ledgerLiveThemes;
+
+const mappingThemes: Record<string, BrandThemes> = {
+  'ledger-live': ledgerLiveThemes,
+  enterprise: enterpriseThemes as unknown as BrandThemes,
+  websites: websitesThemes as unknown as BrandThemes,
+};
+
+const getThemeFromGlobals = (
+  mode?: ColorSchemeName | string,
+  brand?: string,
+): { mode: ColorSchemeName; theme: BrandThemes } => ({
+  mode: (mode as ColorSchemeName) ?? 'light',
+  theme: mappingThemes[brand ?? 'ledger-live'] ?? mappingThemes['ledger-live'],
+});
+
+type StorybookProvidersProps = PropsWithChildren<{
+  mode: ColorSchemeName;
+  theme: BrandThemes;
+}>;
+
+const StorybookProviders: FC<StorybookProvidersProps> = ({
+  mode,
+  theme,
+  children,
+}) => (
+  <ThemeProvider colorScheme={mode} themes={theme}>
+    <GestureHandlerRootView
+      style={{ flex: 1, width: '100%', alignItems: 'flex-start' }}
+    >
+      {children}
+    </GestureHandlerRootView>
+  </ThemeProvider>
+);
+
 const createThemeDecorator = (
   globalName: string,
   themeClasses: string[],
@@ -38,21 +78,46 @@ export const withModeDecorator = createThemeDecorator('mode', [
   'dark',
 ]);
 
-const mappingThemes = {
-  'ledger-live': ledgerLiveThemes,
-  enterprise: enterpriseThemes,
-  websites: websitesThemes,
-} as any;
-
 export const withProvidersDecorator: Decorator = (Story, context) => {
-  const mode = context.globals.mode as ColorSchemeName;
-  const currentTheme = mappingThemes[context.globals.brand];
+  const { mode, theme } = getThemeFromGlobals(
+    context.globals.mode,
+    context.globals.brand,
+  );
+
+  return (
+    <StorybookProviders mode={mode} theme={theme}>
+      <Story />
+    </StorybookProviders>
+  );
+};
+
+type DocsContainerContext = {
+  store: {
+    globals: {
+      globals: {
+        mode?: ColorSchemeName;
+        brand?: string;
+      };
+    };
+  };
+};
+
+export const withProvidersDocsContainer = ({
+  children,
+  context,
+  ...rest
+}: PropsWithChildren<DocsContainerProps>): ReactNode => {
+  const docsContext = context as unknown as DocsContainerContext;
+  const { mode, theme } = getThemeFromGlobals(
+    docsContext.store?.globals?.globals?.mode,
+    docsContext.store?.globals?.globals?.brand,
+  );
 
   return (
-    <ThemeProvider colorScheme={mode} themes={currentTheme}>
-      <GestureHandlerRootView style={{ flex: 1, width: '100%' }}>
-        <Story />
-      </GestureHandlerRootView>
-    </ThemeProvider>
+    <DocsContainer context={context} {...rest}>
+      <StorybookProviders mode={mode} theme={theme}>
+        {children}
+      </StorybookProviders>
+    </DocsContainer>
   );
 };

package/.storybook/components/CustomTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Box, Pressable, Text } from '../../src/lib/Components/Utility';
 import { Folder } from '../../src/lib/Symbols/Icons/Folder';
-import { cn } from '../../src/lib/utils';
 
 type TabProps = {
   label: string;
@@ -21,62 +21,65 @@ export const CustomTabs: React.FC<CustomTabsProps> = ({ children }) => {
   );
 
   if (tabs.length === 0) {
-    return <div className='text-muted'>No tabs found</div>;
+    return (
+      <Text typography='body3' lx={{ color: 'muted' }}>
+        No tabs found
+      </Text>
+    );
   }
 
   return (
-    <div>
+    <Box style={{ maxWidth: '100%' }}>
       {/* Tab buttons */}
-      <div className='mb-24 flex gap-24'>
-        {tabs.map((tab, idx) => (
-          <button
-            key={idx}
-            className={cn(
-              'group relative flex flex-col items-center gap-8 rounded-lg p-12 transition-all duration-200 focus:outline-none',
-              active === idx
-                ? 'text-active-subtle'
-                : 'text-muted hover:text-active',
-            )}
-            onClick={() => setActive(idx)}
-          >
-            {/* Folder Icon */}
-            <div
-              className={cn(
-                'rounded-lg p-8 transition-all duration-200',
-                active === idx
-                  ? 'bg-accent text-base'
-                  : 'group-hover:opacity-80',
-              )}
+      <Box lx={{ flexDirection: 'row', gap: 's24', marginBottom: 's24' }}>
+        {tabs.map((tab, idx) => {
+          const isActive = active === idx;
+          return (
+            <Pressable
+              key={idx}
+              lx={{
+                alignItems: 'center',
+                gap: 's8',
+                borderRadius: 'lg',
+                padding: 's12',
+              }}
+              style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+              onPress={() => setActive(idx)}
             >
-              <Folder size={24} />
-            </div>
+              {/* Folder Icon */}
+              <Box
+                lx={{
+                  borderRadius: 'lg',
+                  padding: 's8',
+                  ...(isActive && { backgroundColor: 'accent' }),
+                }}
+              >
+                <Folder size={24} />
+              </Box>
 
-            {/* Label */}
-            <span
-              className={cn(
-                'transition-colors duration-200 body-3',
-                active === idx
-                  ? 'text-black'
-                  : 'group-hover:text-active group-hover:opacity-80',
-              )}
-            >
-              {tab.props.label}
-            </span>
-          </button>
-        ))}
-      </div>
+              {/* Label */}
+              <Text
+                typography='body3'
+                lx={{ color: isActive ? 'base' : 'muted' }}
+              >
+                {tab.props.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </Box>
 
       {/* Tab content */}
-      <div className='p-24'>
+      <Box lx={{ padding: 's24' }}>
         {tabs.map((tab, idx) => {
           if (idx !== active) return null;
-          return <div key={idx}>{tab.props.children}</div>;
+          return <Box key={idx}>{tab.props.children}</Box>;
         })}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
 export const Tab: React.FC<TabProps> = ({ children }) => {
-  return <div>{children}</div>;
+  return <Box>{children}</Box>;
 };

package/.storybook/{docs → components/DoVsDont}/CommonRulesDoAndDont.mdx

@@ -1,28 +1,28 @@
-import { DoVsDontRow } from '../components/DoVsDont/DoVsDontRow';
-import { DoBlockItem } from '../components/DoVsDont/DoBlock';
-import { DontBlockItem } from '../components/DoVsDont/DontBlock';
+import { DoVsDontRow } from './DoVsDontRow';
+import { DoBlockItem } from './DoBlock';
+import { DontBlockItem } from './DontBlock';
 
 ## Common Do's and Don'ts
 
 <DoVsDontRow>
   {/* prettier-ignore */}
   <DoBlockItem
-    title='Use className for layout positioning'
-    description='Only use className for layout-related utilities (positioning, margins, display properties).'
+    title='Use lx for layout positioning'
+    description='Only use lx for layout-related utilities (positioning, margins, display properties).'
   >
     ```tsx
-    <Component className='mt-4 absolute top-0 md:hidden'>
+    <Component lx={{ marginTop: 's4', position: 'absolute', top: 0, display: 'none', md: 'hidden' }}>
         Submit
     </Component>
     ```
   </DoBlockItem>
   {/* prettier-ignore */}
   <DontBlockItem
-    title='ClassName is not allowed for core styling'
-    description='Core styling, internal spacing, and typography cannot be modified using className'
+    title='lx is not allowed for core styling'
+    description='Core styling, internal spacing, and typography cannot be modified using lx'
   >
     ```tsx
-    <Component className='bg-accent'>
+    <Component lx={{ backgroundColor: 'accent' }}>
       Submit
     </Component>
     ```

package/.storybook/components/DoVsDont/DoBlock.tsx

@@ -1,43 +1,40 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
+import { Box, Text } from '../../../src/lib/Components/Utility';
 
 type DoBlockItemProps = {
   title?: string;
   description?: string;
   children: React.ReactNode;
-  className?: string;
 };
 
 export const DoBlockItem: React.FC<DoBlockItemProps> = ({
   title,
   description,
   children,
-  className,
 }) => {
   return (
-    <div
-      className={cn('flex flex-col gap-12', className)}
-      {...{ 'data-type': 'do-item' }}
-    >
+    <Box lx={{ gap: 's12' }} {...{ 'data-type': 'do-item' }}>
       {/* Header */}
       {(title || description) && (
-        <div className='!-mb-16 flex flex-col gap-4'>
+        <Box lx={{ gap: 's4' }}>
           {title && (
-            <div className='flex items-center gap-8'>
-              <span className='text-[#10B981]'>✓</span>
-              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
-            </div>
+            <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+              <Text style={{ color: '#10B981' }}>✓</Text>
+              <Text typography='body2SemiBold' lx={{ color: 'base' }}>
+                {title}
+              </Text>
+            </Box>
           )}
           {description && (
-            <p className='!m-0 text-muted body-3'>{description}</p>
+            <Text typography='body3' lx={{ color: 'muted' }}>
+              {description}
+            </Text>
           )}
-        </div>
+        </Box>
       )}
 
       {/* Code Block */}
-      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#10B981] [&_pre]:!bg-[#F0FDF4]'>
-        {children}
-      </div>
-    </div>
+      <Box>{children}</Box>
+    </Box>
   );
 };

package/.storybook/components/DoVsDont/DoVsDontRow.tsx

@@ -1,20 +1,16 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
+import { Box } from '../../../src/lib/Components/Utility';
 
 type DoVsDontRowProps = {
   children: React.ReactNode;
-  className?: string;
 };
 
-export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({
-  children,
-  className,
-}) => {
+export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({ children }) => {
   return (
-    <div className={cn('flex flex-col gap-16', className)}>
-      <div className='!-mb-16 grid grid-cols-1 gap-16 md:grid-cols-2'>
+    <Box lx={{ gap: 's16' }}>
+      <Box lx={{ flexDirection: 'row', gap: 's16', flexWrap: 'wrap' }}>
         {children}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };

package/.storybook/components/DoVsDont/DontBlock.tsx

@@ -1,43 +1,40 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
+import { Box, Text } from '../../../src/lib/Components/Utility';
 
 type DontBlockItemProps = {
   title?: string;
   description?: string;
   children: React.ReactNode;
-  className?: string;
 };
 
 export const DontBlockItem: React.FC<DontBlockItemProps> = ({
   title,
   description,
   children,
-  className,
 }) => {
   return (
-    <div
-      className={cn('flex flex-col gap-12', className)}
-      {...{ 'data-type': 'dont-item' }}
-    >
+    <Box lx={{ gap: 's12' }} {...{ 'data-type': 'dont-item' }}>
       {/* Header */}
       {(title || description) && (
-        <div className='!-mb-16 flex flex-col gap-4'>
+        <Box lx={{ gap: 's4' }}>
           {title && (
-            <div className='flex items-center gap-8'>
-              <span className='text-[#EF4444]'>✕</span>
-              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
-            </div>
+            <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+              <Text style={{ color: '#EF4444' }}>✕</Text>
+              <Text typography='body2SemiBold' lx={{ color: 'base' }}>
+                {title}
+              </Text>
+            </Box>
           )}
           {description && (
-            <p className='!m-0 text-muted body-3'>{description}</p>
+            <Text typography='body3' lx={{ color: 'muted' }}>
+              {description}
+            </Text>
           )}
-        </div>
+        </Box>
       )}
 
       {/* Code Block */}
-      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#EF4444] [&_pre]:!bg-[#FEF2F2]'>
-        {children}
-      </div>
-    </div>
+      <Box>{children}</Box>
+    </Box>
   );
 };

package/.storybook/docs/Changelog.mdx

@@ -6,7 +6,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 Stay up to date with the latest changes and releases for the Ledger Design Language System libraries.
 
-## Library Releases
 
 ### @ledgerhq/lumen-ui-rnative
 

package/.storybook/docs/getting-started/setup.mdx

@@ -10,42 +10,106 @@ Install the packages and their peer dependencies:
 npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
 
 # Install peer dependencies
-npm install react-native@^0.75.0 react@^18.3.1 nativewind@^4.1.0 tailwindcss@^3.4.0 class-variance-authority
+npm install react-native@^0.77.0 react@^18.3.1
 ```
 
-#### **About NativeWind**
 
-The `nativewind` dependency is used for styling React Native components with Tailwind CSS utilities.  
-It provides the `className` prop support and ensures consistent styling across platforms.
 
-### NativeWind Configuration
+## Setup ThemeProvider
 
-Setup ledger custom tailwind preset in your `tailwind.config.ts`:
+The `ThemeProvider` will manage themes, colorScheme, locale, rtl and other global state...
 
-```typescript
-import type { Config } from 'tailwindcss';
-import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
+```tsx
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 
-const config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}", // Your project's files
-    "./node_modules/@ledgerhq/lumen-ui-rnative/dist/**/*.{js,ts,jsx,tsx}" // Ledger UI Kit components
-  ],
-  presets: [ledgerLivePreset], // the installed tailwind preset
-} satisfies Config;
+function App() {
+  return (
+    <ThemeProvider 
+      themes={ledgerLiveThemes}
+      colorScheme="dark"
+      locale="en"
+    >
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Themes
+
+Use the themes prop to pass theme objects to the ThemeProvider.
+
+Three themes are currently available:
+- enterprise
+- ledger-live
+- websites
+
+Once provided, the active theme can be accessed using Lumen style-system utilities.
 
-export default config;
+```tsx
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { ledgerLiveThemes, enterpriseThemes, websitesThemes } from '@ledgerhq/lumen-design-core';
+
+function App() {
+  return (
+    <ThemeProvider themes={ledgerLiveThemes}>
+      <App />
+    </ThemeProvider>
 ```
 
-### Metro Configuration
+## Color Scheme
+
+The `colorScheme` prop controls the theme color scheme.
+If not provided, the theme will follow the device settings.
+
+- `"dark"` - Forces dark color scheme
+- `"light"` - Forces light color scheme
+
+
+```tsx
+<ThemeProvider 
+  themes={ledgerLiveThemes}
+  colorScheme="dark"
+>
+  <App />
+</ThemeProvider>
+```
+
+If the ThemeProvider is uncontrolled, you can use the [`useTheme`](/?path=/docs/style-system-usetheme--docs) hook to control theme mode at runtime:
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const ThemeToggle = () => {
+  const { colorScheme, toggleColorScheme, setColorScheme } = useTheme();
+  
+  return (
+    <Button onPress={toggleColorScheme}>
+      Current: {colorScheme}
+    </Button>
+  );
+};
+```
+
+When the colorScheme changes, `Appearance.setColorScheme` is automatically called to update the system theme.
+
 
-Add NativeWind to your `metro.config.js`:
+## Internationalization
 
-```javascript
-const { getDefaultConfig } = require('expo/metro-config');
-const { withNativeWind } = require('nativewind/metro');
+The ThemeProvider also manages the app’s locale using React Context.  
+You can just pass the locale to the `ThemeProvider` and the translations will be loaded automatically.
 
-const config = getDefaultConfig(__dirname);
+```tsx
+import { ThemeProvider, type SupportedLocale } from '@ledgerhq/lumen-ui-rnative';
 
-module.exports = withNativeWind(config, { input: './global.css' });
+function AppProviders() {
+  const [locale, setLocale] = useState<SupportedLocale>('en');
+  return (
+    <ThemeProvider locale={locale}>
+      <App />
+      <Button onClick={() => setLocale('fr')}>Switch to French</Button>
+    </ThemeProvider>
+  );
+}
 ```