@ledgerhq/lumen-ui-rnative 0.0.42

package/.storybook/main.ts

@@ -0,0 +1,60 @@
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import type { StorybookConfig } from '@storybook/react-native-web-vite';
+import { mergeConfig } from 'vite';
+import { commonjsExportsShim } from './vite-plugins/commonjs-exports-shim';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/lib/**/*.mdx',
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    './docs/**/*.@(mdx)',
+  ],
+  addons: [
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-native-web-vite'),
+    options: {
+      pluginReactOptions: {
+        jsxImportSource: 'nativewind',
+      },
+    },
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+
+  viteFinal: async (config) => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'react-native': 'react-native-web',
+      'react-native-svg': 'react-native-svg-web',
+    };
+
+    return mergeConfig(config, {
+      plugins: [nxViteTsPaths(), commonjsExportsShim()],
+      css: {
+        postcss: {
+          plugins: [
+            (await import('tailwindcss')).default,
+            (await import('autoprefixer')).default,
+          ],
+        },
+      },
+    });
+  },
+
+  core: {
+    disableTelemetry: true,
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

package/.storybook/preview-head.html

@@ -0,0 +1,26 @@
+<style>
+  body {
+    background-color: #f2f2f2;
+  }
+
+  .dark body {
+    background-color: #191919;
+  }
+
+  .sbdocs-preview {
+    background-color: #f2f2f2;
+  }
+
+  .dark .sbdocs-preview {
+    background-color: #000;
+  }
+
+  .sbdocs-a {
+    color: rgb(126, 78, 165) !important;
+    cursor: pointer;
+  }
+
+  .sbdocs-a:hover {
+    text-decoration: underline;
+  }
+</style>

package/.storybook/preview.ts

@@ -0,0 +1,80 @@
+import type { Preview } from '@storybook/react-native-web-vite';
+import '../src/global.css';
+import {
+  withBrandDecorator,
+  withModeDecorator,
+  withProvidersDecorator,
+} from './Decorator';
+import './font.css';
+
+const preview: Preview = {
+  globalTypes: {
+    brand: {
+      name: 'Brand',
+      description: 'Global brand theme for components',
+      defaultValue: 'ledger-live',
+      toolbar: {
+        icon: 'paintbrush',
+        title: 'Brand',
+        items: ['ledger-live', 'enterprise', 'websites'],
+
+        dynamicTitle: true,
+      },
+    },
+    mode: {
+      name: 'Mode',
+      description: 'Color scheme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'sun',
+        title: 'Mode',
+        items: ['light', 'dark'],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  parameters: {
+    backgrounds: {
+      options: {
+        dark: { name: 'Dark', value: '#191919' },
+        light: { name: 'Light', value: '#fafafa' },
+      },
+    },
+    initialGlobals: {
+      backgrounds: { value: 'light' },
+    },
+
+    options: {
+      storySort: {
+        order: [
+          'Getting Started',
+          ['Introduction', 'Quick Start'],
+          'Tailwind',
+          ['Introduction', 'Setup guide', 'Configuration'],
+          'Foundations',
+          ['Docs', 'Colors', 'Border', 'Spacing', 'Size', 'Height', 'Width'],
+          'Symbols',
+          'Action',
+          ['CardButton', 'InteractiveIcon', 'Link', 'Input', 'Search'],
+          'Communication',
+          'Containment',
+          'Selection',
+          'Text Input',
+        ],
+      },
+    },
+    tags: ['autodocs'],
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+
+  decorators: [withBrandDecorator, withModeDecorator, withProvidersDecorator],
+};
+
+export default preview;

package/.storybook/theme.ts

@@ -0,0 +1,22 @@
+import { ThemeVars } from 'storybook/theming';
+import { create } from 'storybook/theming/create';
+import logoUrl from './docs/lumen.svg';
+
+const theme: ThemeVars = create({
+  base: 'light',
+  brandTarget: '_self',
+  brandImage: logoUrl,
+  appBg: '#fafafa',
+  appContentBg: '#ffffff',
+  appBorderRadius: 8,
+
+  textColor: '#1a1a1a',
+  textInverseColor: '#ffffff',
+
+  colorPrimary: '#2563eb',
+  colorSecondary: '#7e4ea5',
+  barBg: '#f8fafc',
+  barHoverColor: '#d4a0ff',
+});
+
+export default theme;

package/.storybook/vite-plugins/commonjs-exports-shim.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from 'vite';
+
+const UNDEFINED_EXPORTS_REGEXP = /Object\.defineProperty\(exports,/;
+
+/**
+ * Temporary fix for NativeWind's `cssInterop` CommonJS exports in ESM context.
+ *
+ * NativeWind's `cssInterop` (from react-native-css-interop) contains bare CommonJS code
+ * that references `exports` without it being defined in the ESM bundle, causing:
+ * `ReferenceError: exports is not defined` at runtime.
+ *
+ * This plugin injects `const exports = {}` at the start of affected chunks.
+ * Can be removed once react-native-css-interop ships proper ESM builds or when upgrading to v5.
+ */
+export const commonjsExportsShim = (): Plugin => ({
+  name: 'commonjs-exports-shim',
+  renderChunk(code) {
+    if (UNDEFINED_EXPORTS_REGEXP.test(code)) {
+      return {
+        code: `const exports = {};\n${code}`,
+        map: null,
+      };
+    }
+    return undefined;
+  },
+});

package/.test.env

@@ -0,0 +1 @@
+NODE_OPTIONS='--no-experimental-detect-module'

package/README.md

@@ -0,0 +1,82 @@
+# @ledgerhq/lumen-ui-rnative
+
+**React Native UI component library for Ledger Design System** - Native mobile components built with NativeWind and design tokens.
+
+## 📦 Installation
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
+
+# Install peer dependencies
+npm install react-native-svg nativewind
+```
+
+→ [View @ledgerhq/lumen-ui-rnative on npm](https://www.npmjs.com/package/@ledgerhq/lumen-ui-rnative?activeTab=readme)  
+→ [View @ledgerhq/lumen-design-core on npm](https://www.npmjs.com/package/@ledgerhq/lumen-design-core?activeTab=readme)
+
+## ⚡ Setup
+
+### 1. Configure NativeWind
+
+Install and configure NativeWind in your React Native project:
+
+```bash
+npm install nativewind
+npm install --dev tailwindcss
+```
+
+Create `tailwind.config.js`:
+
+```typescript
+import type { Config } from 'tailwindcss';
+import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
+
+const config = {
+  content: [
+    "./App.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@ledgerhq/lumen-ui-rnative/src/**/*.{js,jsx,ts,tsx}"
+  ],
+  presets: [ledgerLivePreset],
+} satisfies Config;
+
+export default config;
+```
+
+_Using [@ledgerhq/lumen-design-core](https://www.npmjs.com/package/@ledgerhq/lumen-design-core?activeTab=readme) preset_
+
+### 2. Start Using Components
+
+```tsx
+import { Button } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+export default function App() {
+  return (
+    <Button appearance="accent" icon={ArrowRight}>
+      Get Started
+    </Button>
+  );
+}
+```
+---
+
+## 🔧 Icon Usage
+
+```tsx
+import { Settings, ArrowRight, CheckCircle } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+// Use icons directly as components with size prop
+<Settings size={24} />
+<ArrowRight size={20} className="text-accent" />
+<CheckCircle size={16} />
+
+// Available sizes: 16, 20, 24, 40, 48, 56
+```
+
+---
+
+## 📚 Documentation
+
+- [📱 React Native Setup Guide](https://nativewind.dev/getting-started/react-native)
+- [🏠 Main Repository](https://github.com/LedgerHQ/lumen)

package/babel.config.js

@@ -0,0 +1,24 @@
+export default function (api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@nx/react/babel',
+        {
+          runtime: 'automatic',
+          useBuiltIns: 'usage',
+        },
+      ],
+      'nativewind/babel',
+    ],
+    plugins: ['react-native-worklets/plugin'],
+    env: {
+      test: {
+        presets: [
+          ['module:@react-native/babel-preset', { useTransformReactJSX: true }],
+        ],
+      },
+    },
+  };
+}

package/dist/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ledgerhq/lumen-ui-rnative",
+  "version": "0.0.42",
+  "license": "Apache-2.0",
+  "keywords": [
+    "react-native",
+    "ui",
+    "components",
+    "design-system",
+    "mobile",
+    "nativewind"
+  ],
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./symbols": {
+      "types": "./src/lib/Symbols/index.ts",
+      "import": "./src/lib/Symbols/index.ts",
+      "default": "./src/lib/Symbols/index.ts"
+    },
+    "./styles": "./src/styles/index.ts",
+    "./ToRemove": "./src/lib/Components/_ToRemove/ToRemove.tsx"
+  },
+  "dependencies": {
+    "@ledgerhq/lumen-utils-shared": "0.0.11",
+    "i18next": "^23.7.0",
+    "react-i18next": "^14.0.0"
+  },
+  "peerDependencies": {
+    "react": "~18.3.1",
+    "react-native": "~0.77.3",
+    "react-native-svg": "^15.0.0",
+    "nativewind": "~4.1.23"
+  },
+  "nx": {
+    "tags": [
+      "scope:react-native",
+      "type:ui"
+    ]
+  },
+  "types": "./src/index.d.ts"
+}

package/dist/src/i18n/I18nProvider.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { type SupportedLocale } from './languages';
+type I18nProviderProps = PropsWithChildren & {
+    locale?: SupportedLocale;
+};
+export declare const I18nProvider: FC<I18nProviderProps>;
+export {};
+//# sourceMappingURL=I18nProvider.d.ts.map

package/dist/src/i18n/I18nProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"I18nProvider.d.ts","sourceRoot":"","sources":["../../../src/i18n/I18nProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAErE,KAAK,iBAAiB,GAAG,iBAAiB,GAAG;IAC3C,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAS9C,CAAC"}

package/dist/src/i18n/I18nProvider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { i18n, switchLanguage } from './i18n';
+import { DEFAULT_LANGUAGE } from './languages';
+export const I18nProvider = ({ locale = DEFAULT_LANGUAGE, children, }) => {
+    useEffect(() => {
+        switchLanguage(locale);
+    }, [locale]);
+    return _jsx(I18nextProvider, { i18n: i18n, children: children });
+};

package/dist/src/i18n/i18n.d.ts

@@ -0,0 +1,13 @@
+import { type i18n as I18nInstance } from 'i18next';
+import { SupportedLocale } from './languages';
+export declare const i18n: I18nInstance;
+/**
+ * Loads the translations for a given locale.
+ * In React Native, we bundle all locales, so this just adds the resource bundle.
+ */
+export declare const loadLocale: (locale: SupportedLocale) => Promise<void>;
+/**
+ * Switches the language to the given locale.
+ */
+export declare const switchLanguage: (locale: SupportedLocale) => Promise<void>;
+//# sourceMappingURL=i18n.d.ts.map

package/dist/src/i18n/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/i18n/i18n.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAE,KAAK,IAAI,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7D,OAAO,EAGL,eAAe,EAChB,MAAM,aAAa,CAAC;AAsDrB,eAAO,MAAM,IAAI,cAAmB,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAU,QAAQ,eAAe,KAAG,OAAO,CAAC,IAAI,CAoBtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,eAAe,KACtB,OAAO,CAAC,IAAI,CAGd,CAAC"}

package/dist/src/i18n/i18n.js

@@ -0,0 +1,75 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { DEFAULT_LANGUAGE, I18N_DEFAULT_NAMESPACE, } from './languages';
+import de from './locales/de.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import ja from './locales/ja.json';
+import ko from './locales/ko.json';
+import pt from './locales/pt.json';
+import ru from './locales/ru.json';
+import th from './locales/th.json';
+import tr from './locales/tr.json';
+import zh from './locales/zh.json';
+const localeResources = {
+    de,
+    en,
+    es,
+    fr,
+    ja,
+    ko,
+    pt,
+    ru,
+    th,
+    tr,
+    zh,
+};
+const loadedLocales = new Set();
+const initializeI18n = () => {
+    const instance = i18next.createInstance();
+    instance
+        .use(initReactI18next)
+        .init({
+        resources: {},
+        lng: DEFAULT_LANGUAGE,
+        defaultNS: I18N_DEFAULT_NAMESPACE,
+        fallbackLng: DEFAULT_LANGUAGE,
+        interpolation: {
+            escapeValue: false,
+        },
+        react: {
+            useSuspense: false,
+        },
+    })
+        .catch((error) => {
+        console.error('Failed to initialize i18next:', error);
+    });
+    return instance;
+};
+export const i18n = initializeI18n();
+/**
+ * Loads the translations for a given locale.
+ * In React Native, we bundle all locales, so this just adds the resource bundle.
+ */
+export const loadLocale = async (locale) => {
+    if (loadedLocales.has(locale)) {
+        return;
+    }
+    try {
+        const translations = localeResources[locale];
+        i18n.addResourceBundle(locale, I18N_DEFAULT_NAMESPACE, translations, true, true);
+        loadedLocales.add(locale);
+    }
+    catch (error) {
+        console.error(`Failed to load locale ${locale}`, error);
+        throw error;
+    }
+};
+/**
+ * Switches the language to the given locale.
+ */
+export const switchLanguage = async (locale) => {
+    await loadLocale(locale);
+    await i18n.changeLanguage(locale);
+};

package/dist/src/i18n/index.d.ts

@@ -0,0 +1,4 @@
+export { I18nProvider } from './I18nProvider';
+export { type SupportedLocale } from './languages';
+export { useCommonTranslation } from './useCommonTranslation';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/src/i18n/index.js

@@ -0,0 +1,2 @@
+export { I18nProvider } from './I18nProvider';
+export { useCommonTranslation } from './useCommonTranslation';

package/dist/src/i18n/languages.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Mapping from languages to their respective infos.
+ */
+export declare const Languages: {
+    readonly de: {
+        readonly id: "de";
+    };
+    readonly en: {
+        readonly id: "en";
+    };
+    readonly es: {
+        readonly id: "es";
+    };
+    readonly fr: {
+        readonly id: "fr";
+    };
+    readonly ja: {
+        readonly id: "ja";
+    };
+    readonly ko: {
+        readonly id: "ko";
+    };
+    readonly pt: {
+        readonly id: "pt";
+    };
+    readonly ru: {
+        readonly id: "ru";
+    };
+    readonly th: {
+        readonly id: "th";
+    };
+    readonly tr: {
+        readonly id: "tr";
+    };
+    readonly zh: {
+        readonly id: "zh";
+    };
+};
+/**
+ * Default loaded language
+ */
+export declare const DEFAULT_LANGUAGE: "en";
+/**
+ * Supported locales type
+ */
+export type SupportedLocale = keyof typeof Languages;
+/**
+ * Default namespace for i18n
+ * Currently there is only one namespace
+ */
+export declare const I18N_DEFAULT_NAMESPACE = "common";
+//# sourceMappingURL=languages.d.ts.map

package/dist/src/i18n/languages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"languages.d.ts","sourceRoot":"","sources":["../../../src/i18n/languages.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC6B,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,gBAAgB,MAAkB,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,SAAS,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,WAAW,CAAC"}

package/dist/src/i18n/languages.js

@@ -0,0 +1,47 @@
+/**
+ * Mapping from languages to their respective infos.
+ */
+export const Languages = {
+    de: {
+        id: 'de',
+    },
+    en: {
+        id: 'en',
+    },
+    es: {
+        id: 'es',
+    },
+    fr: {
+        id: 'fr',
+    },
+    ja: {
+        id: 'ja',
+    },
+    ko: {
+        id: 'ko',
+    },
+    pt: {
+        id: 'pt',
+    },
+    ru: {
+        id: 'ru',
+    },
+    th: {
+        id: 'th',
+    },
+    tr: {
+        id: 'tr',
+    },
+    zh: {
+        id: 'zh',
+    },
+};
+/**
+ * Default loaded language
+ */
+export const DEFAULT_LANGUAGE = Languages.en.id;
+/**
+ * Default namespace for i18n
+ * Currently there is only one namespace
+ */
+export const I18N_DEFAULT_NAMESPACE = 'common';

package/dist/src/i18n/locales/de.json

@@ -0,0 +1,3 @@
+{
+    "components": {}
+}

package/dist/src/i18n/locales/en.json

@@ -0,0 +1,20 @@
+{
+    "components": {
+        "addressInput": {
+            "qrCodeAriaLabel": "Scan QR code"
+        },
+        "baseInput": {
+            "clearInputAriaLabel": "Clear input"
+        },
+        "spinner": {
+            "loadingAriaLabel": "Loading"
+        },
+        "bottomSheetHeader": {
+            "goBackAriaLabel": "Go back",
+            "closeAriaLabel": "Close"
+        },
+        "banner": {
+            "closeAriaLabel": "Close"
+        }
+    }
+}

package/dist/src/i18n/locales/es.json

@@ -0,0 +1,3 @@
+{
+    "components": {}
+}

package/dist/src/i18n/locales/fr.json

@@ -0,0 +1,20 @@
+{
+    "components": {
+        "addressInput": {
+            "qrCodeAriaLabel": "Scanner le QR code"
+        },
+        "baseInput": {
+            "clearInputAriaLabel": "Effacer la saisie"
+        },
+        "spinner": {
+            "loadingAriaLabel": "Chargement"
+        },
+        "bottomSheetHeader": {
+            "goBackAriaLabel": "Retour",
+            "closeAriaLabel": "Fermer"
+        },
+        "banner": {
+            "closeAriaLabel": "Fermer"
+        }
+    }
+}

package/dist/src/i18n/locales/ja.json

@@ -0,0 +1,3 @@
+{
+    "components": {}
+}