@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/TileButton/TileButton.mdx

@@ -0,0 +1,215 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TileButtonStories from './TileButton.stories';
+import { TileButton } from './TileButton';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Action/TileButton' of={TileButtonStories} />
+
+# TileButton
+
+<CustomTabs>
+  <Tab label="Overview ">
+
+## Introduction
+
+TileButton is a compact interactive component that displays an icon above a label in a vertical layout. It's designed for quick actions in grids, toolbars, or action menus where space efficiency is important. This React Native implementation ensures consistent behavior across mobile platforms.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10547-591&m=dev).
+
+## Anatomy
+
+<Canvas of={TileButtonStories.Base} />
+
+- **[Icon](/docs/symbols-icons--docs) (required)**: A visual indicator of the action, rendered at 20px
+- **Children (required)**: The label text describing the action
+
+## Properties
+
+### Overview
+
+<Canvas of={TileButtonStories.Base} />
+<Controls of={TileButtonStories.Base} />
+
+### States
+
+TileButton supports default, pressed, and disabled states:
+
+<Canvas of={TileButtonStories.DisabledShowcase} />
+
+### Icons
+
+TileButton works with any [icon](/docs/symbols-icons--docs) from the design system:
+
+<Canvas of={TileButtonStories.IconsShowcase} />
+
+### Text Truncation
+
+Labels are truncated to 2 lines by default. Use the `numberOfLines` prop to customize:
+
+<Canvas of={TileButtonStories.TruncationShowcase} />
+
+## Responsive Layout
+
+TileButton adapts to its content by default. Use the `isFull` prop for full-width buttons:
+
+<Canvas of={TileButtonStories.WidthShowcase} />
+
+## Grid Usage
+
+TileButton is ideal for grid-based action menus:
+
+<Canvas of={TileButtonStories.GridLayout} />
+
+## Accessibility
+
+- Supports all standard React Native accessibility props
+- Touch targets meet minimum size requirements
+
+</Tab>
+<Tab label="Implementation ">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+```tsx
+import { TileButton } from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <TileButton icon={Settings} onPress={() => console.log('pressed')}>
+      Settings
+    </TileButton>
+  );
+}
+```
+
+## Grid Layout Example
+
+```tsx
+import { View } from 'react-native';
+import { TileButton } from '@ledgerhq/lumen-ui-rnative';
+import { Settings, Plus, User, Apps } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function ActionGrid() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+      <TileButton icon={Plus} onPress={() => {}}>Buy</TileButton>
+      <TileButton icon={Settings} onPress={() => {}}>Settings</TileButton>
+      <TileButton icon={User} onPress={() => {}}>Profile</TileButton>
+      <TileButton icon={Apps} onPress={() => {}}>Apps</TileButton>
+    </View>
+  );
+}
+```
+
+## Full Width
+
+Use the `isFull` prop to make the button take the full width of its container:
+
+```tsx
+<TileButton icon={Settings} isFull onPress={() => {}}>
+  Full Width
+</TileButton>
+```
+
+## Text Truncation
+
+Labels are truncated to 2 lines by default. Use the `numberOfLines` prop to customize:
+
+```tsx
+<TileButton icon={Settings} numberOfLines={1} onPress={() => {}}>
+  Single line truncation
+</TileButton>
+```
+
+## Custom Styling
+
+Use the `lx` prop for token-based styling:
+
+```tsx
+<TileButton
+  icon={Settings}
+  lx={{ marginTop: 's8' }}
+  onPress={() => {}}
+>
+  Styled
+</TileButton>
+```
+
+Or use the `style` prop for escape-hatch styling:
+
+```tsx
+<TileButton
+  icon={Settings}
+  style={{ marginTop: 16 }}
+  onPress={() => {}}
+>
+  Styled
+</TileButton>
+```
+
+## Do's and Don'ts
+
+<div className='flex flex-col gap-24'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use the icon prop'
+      description='Pass icon as a component reference'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<TileButton icon={Plus} onPress={() => {}}>
+  Add
+</TileButton>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't include icon in children"
+      description='The icon and children are separate'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<TileButton icon={Plus} onPress={() => {}}>
+  <Plus /> Add
+</TileButton>
+```
+
+    </DontBlockItem>
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</div>
+
+## Platform Considerations
+
+### iOS Specific
+
+- Touch feedback uses appropriate opacity transitions
+- Respects iOS accessibility settings like reduced motion
+
+### Android Specific
+
+- Material Design touch feedback is supported
+- Respects Android accessibility services
+
+### Cross-Platform
+
+- Consistent visual appearance across platforms
+- Platform-appropriate touch feedback
+- Unified API regardless of platform
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/TileButton/TileButton.stories.js

@@ -0,0 +1,203 @@
+"use strict";
+
+import { View } from 'react-native';
+import { Settings, Plus, User, Apps, Home, Bell, Cart } from "../../Symbols/index.js";
+import { TileButton } from "./TileButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconOptions = {
+  Settings,
+  Plus,
+  User,
+  Apps,
+  Home,
+  Bell,
+  Cart
+};
+const meta = {
+  component: TileButton,
+  title: 'Action/TileButton',
+  argTypes: {
+    icon: {
+      options: Object.keys(iconOptions),
+      mapping: iconOptions,
+      control: {
+        type: 'select'
+      }
+    },
+    onPress: {
+      action: 'pressed'
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    icon: Settings,
+    children: 'Settings'
+  },
+  render: args => /*#__PURE__*/_jsx(TileButton, {
+    ...args
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<TileButton icon={Settings} onPress={() => {}}>Settings</TileButton>`
+      }
+    }
+  }
+};
+export const DisabledShowcase = {
+  render: args => /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsx(TileButton, {
+      icon: Settings,
+      onPress: args.onPress,
+      children: "Enabled"
+    }), /*#__PURE__*/_jsx(TileButton, {
+      icon: Settings,
+      onPress: args.onPress,
+      disabled: true,
+      children: "Disabled"
+    })]
+  })
+};
+export const IconsShowcase = {
+  render: args => /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsx(TileButton, {
+      icon: Settings,
+      onPress: args.onPress,
+      children: "Settings"
+    }), /*#__PURE__*/_jsx(TileButton, {
+      icon: User,
+      onPress: args.onPress,
+      children: "Profile"
+    }), /*#__PURE__*/_jsx(TileButton, {
+      icon: Plus,
+      onPress: args.onPress,
+      children: "Add"
+    }), /*#__PURE__*/_jsx(TileButton, {
+      icon: Apps,
+      onPress: args.onPress,
+      children: "Apps"
+    })]
+  })
+};
+export const GridLayout = {
+  render: args => /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: 343,
+      gap: 8
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(TileButton, {
+          icon: Plus,
+          isFull: true,
+          onPress: args.onPress,
+          children: "Buy"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(TileButton, {
+          icon: Settings,
+          isFull: true,
+          onPress: args.onPress,
+          children: "Settings"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(TileButton, {
+          icon: User,
+          isFull: true,
+          onPress: args.onPress,
+          children: "Profile"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(TileButton, {
+          icon: Apps,
+          isFull: true,
+          onPress: args.onPress,
+          children: "Apps"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(TileButton, {
+          icon: Home,
+          isFull: true,
+          onPress: args.onPress,
+          children: "Home"
+        })
+      })]
+    })]
+  })
+};
+export const WidthShowcase = {
+  render: args => /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: 320,
+      gap: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    children: [/*#__PURE__*/_jsx(TileButton, {
+      icon: Settings,
+      onPress: args.onPress,
+      children: "Default width"
+    }), /*#__PURE__*/_jsx(TileButton, {
+      icon: Settings,
+      isFull: true,
+      onPress: args.onPress,
+      children: "Full width (isFull)"
+    })]
+  })
+};
+export const TruncationShowcase = {
+  render: args => /*#__PURE__*/_jsx(View, {
+    style: {
+      flexDirection: 'row',
+      gap: 16
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 80
+      },
+      children: /*#__PURE__*/_jsx(TileButton, {
+        icon: Settings,
+        isFull: true,
+        onPress: args.onPress,
+        children: "Very long label text"
+      })
+    })
+  })
+};
+//# sourceMappingURL=TileButton.stories.js.map

package/dist/module/lib/Components/TileButton/TileButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Settings","Plus","User","Apps","Home","Bell","Cart","TileButton","jsx","_jsx","jsxs","_jsxs","iconOptions","meta","component","title","argTypes","icon","options","Object","keys","mapping","control","type","onPress","action","Base","args","children","render","parameters","docs","source","code","DisabledShowcase","style","flexDirection","gap","disabled","IconsShowcase","GridLayout","width","flex","isFull","WidthShowcase","display","alignItems","TruncationShowcase"],"sourceRoot":"../../../../../src","sources":["lib/Components/TileButton/TileButton.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/TileButton/TileButton.test.js

@@ -0,0 +1,99 @@
+"use strict";
+
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { Settings } from "../../Symbols/index.js";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { TileButton } from "./TileButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderWithProvider = component => {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    themes: ledgerLiveThemes,
+    colorScheme: "dark",
+    locale: "en",
+    children: component
+  }));
+};
+describe('TileButton Component', () => {
+  describe('Rendering', () => {
+    it('should render with icon and text content', () => {
+      renderWithProvider(/*#__PURE__*/_jsx(TileButton, {
+        testID: "tile-button",
+        icon: Settings,
+        children: "Settings"
+      }));
+      const button = screen.getByTestId('tile-button');
+      expect(button).toBeTruthy();
+      expect(screen.getByText('Settings')).toBeTruthy();
+      expect(button.props.accessibilityRole).toBe('button');
+    });
+  });
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(/*#__PURE__*/_jsx(TileButton, {
+        testID: "tile-button",
+        icon: Settings,
+        disabled: true,
+        children: "Disabled"
+      }));
+      const button = screen.getByTestId('tile-button');
+      expect(button.props.accessibilityState.disabled).toBe(true);
+    });
+    it('should render correctly with isFull prop', () => {
+      renderWithProvider(/*#__PURE__*/_jsx(TileButton, {
+        testID: "tile-button",
+        icon: Settings,
+        isFull: true,
+        children: "Full Width"
+      }));
+      const content = screen.getByTestId('tile-button-content');
+      expect(content.props.style.width).toBe('100%');
+    });
+  });
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(/*#__PURE__*/_jsx(TileButton, {
+        testID: "tile-button",
+        icon: Settings,
+        onPress: handlePress,
+        children: "Press me"
+      }));
+      fireEvent.press(screen.getByTestId('tile-button'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(/*#__PURE__*/_jsx(TileButton, {
+        testID: "tile-button",
+        icon: Settings,
+        onPress: handlePress,
+        disabled: true,
+        children: "Disabled"
+      }));
+      fireEvent.press(screen.getByTestId('tile-button'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+  describe('Styling', () => {
+    it('should apply custom style and lx props', () => {
+      const customStyle = {
+        marginTop: 16
+      };
+      renderWithProvider(/*#__PURE__*/_jsx(TileButton, {
+        testID: "tile-button",
+        icon: Settings,
+        style: customStyle,
+        lx: {
+          padding: 's8'
+        },
+        children: "Styled"
+      }));
+      const button = screen.getByTestId('tile-button');
+      expect(button.props.style).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=TileButton.test.js.map

package/dist/module/lib/Components/TileButton/TileButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","render","screen","fireEvent","React","Settings","ThemeProvider","TileButton","jsx","_jsx","renderWithProvider","component","themes","colorScheme","locale","children","testID","icon","button","getByTestId","toBeTruthy","getByText","props","accessibilityRole","toBe","disabled","accessibilityState","isFull","content","style","width","handlePress","fn","onPress","press","toHaveBeenCalledTimes","not","toHaveBeenCalled","customStyle","marginTop","lx","padding","toBeDefined"],"sourceRoot":"../../../../../src","sources":["lib/Components/TileButton/TileButton.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/TileButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./TileButton.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/TileButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/TileButton/index.ts"],"mappings":";;AAAA,cAAc,iBAAc;AAC5B,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/TileButton/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Components/TileButton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/TileButton/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/Tooltip/GlobalTooltipBottomSheet.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import React, { useCallback, useEffect } from 'react';
+import { BottomSheet, BottomSheetHeader, BottomSheetView, useBottomSheetRef } from "../BottomSheet/index.js";
+import { useGlobalTooltipSafeContext } from "./GlobalTooltipContext.js";
+
+/**
+ * BottomSheet component that displays tooltip content.
+ * This should be placed at the root level inside GestureHandlerRootView.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-tooltip-overview--docs Storybook}
+ *
+ * @example
+ * import { GlobalTooltipProvider, GlobalTooltipBottomSheet } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * function App() {
+ *   return (
+ *     <GestureHandlerRootView>
+ *       <YourAppContent />
+ *       <GlobalTooltipBottomSheet />
+ *     </GestureHandlerRootView>
+ *   );
+ * }
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GlobalTooltipBottomSheet = () => {
+  const bottomSheetRef = useBottomSheetRef();
+  /**
+   * This is the only component that subscribes to currentTooltip
+   * All other components use refs to avoid re-renders
+   */
+  const {
+    currentTooltip,
+    hideTooltipRef
+  } = useGlobalTooltipSafeContext({
+    consumerName: 'useGlobalTooltipBottomSheetContext',
+    contextRequired: true
+  });
+  useEffect(() => {
+    if (currentTooltip) {
+      bottomSheetRef.current?.present();
+    } else {
+      bottomSheetRef.current?.dismiss();
+    }
+  }, [currentTooltip, bottomSheetRef]);
+  const handleClose = useCallback(() => {
+    currentTooltip?.setOpen?.(false);
+    hideTooltipRef.current();
+  }, [hideTooltipRef, currentTooltip?.setOpen]);
+  return /*#__PURE__*/_jsx(BottomSheet, {
+    ref: bottomSheetRef,
+    snapPoints: null,
+    backdropPressBehavior: "close",
+    onClose: handleClose,
+    maxDynamicContentSize: "fullWithOffset",
+    enableDynamicSizing: true,
+    enablePanDownToClose: true,
+    children: /*#__PURE__*/_jsx(BottomSheetView, {
+      children: (currentTooltip?.title || currentTooltip?.content) && /*#__PURE__*/_jsx(BottomSheetHeader, {
+        title: currentTooltip.title,
+        appearance: "expanded",
+        description: currentTooltip.content
+      })
+    })
+  });
+};
+//# sourceMappingURL=GlobalTooltipBottomSheet.js.map

package/dist/module/lib/Components/Tooltip/GlobalTooltipBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","BottomSheet","BottomSheetHeader","BottomSheetView","useBottomSheetRef","useGlobalTooltipSafeContext","jsx","_jsx","GlobalTooltipBottomSheet","bottomSheetRef","currentTooltip","hideTooltipRef","consumerName","contextRequired","current","present","dismiss","handleClose","setOpen","ref","snapPoints","backdropPressBehavior","onClose","maxDynamicContentSize","enableDynamicSizing","enablePanDownToClose","children","title","content","appearance","description"],"sourceRoot":"../../../../../src","sources":["lib/Components/Tooltip/GlobalTooltipBottomSheet.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,QAAQ,OAAO;AACrD,SACEC,WAAW,EACXC,iBAAiB,EACjBC,eAAe,EACfC,iBAAiB,QACZ,yBAAgB;AACvB,SAASC,2BAA2B,QAAQ,2BAAwB;;AAEpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAjBA,SAAAC,GAAA,IAAAC,IAAA;AAkBA,OAAO,MAAMC,wBAAkC,GAAGA,CAAA,KAAM;EACtD,MAAMC,cAAc,GAAGL,iBAAiB,CAAC,CAAC;EAC1C;AACF;AACA;AACA;EACE,MAAM;IAAEM,cAAc;IAAEC;EAAe,CAAC,GAAGN,2BAA2B,CAAC;IACrEO,YAAY,EAAE,oCAAoC;IAClDC,eAAe,EAAE;EACnB,CAAC,CAAC;EAEFb,SAAS,CAAC,MAAM;IACd,IAAIU,cAAc,EAAE;MAClBD,cAAc,CAACK,OAAO,EAAEC,OAAO,CAAC,CAAC;IACnC,CAAC,MAAM;MACLN,cAAc,CAACK,OAAO,EAAEE,OAAO,CAAC,CAAC;IACnC;EACF,CAAC,EAAE,CAACN,cAAc,EAAED,cAAc,CAAC,CAAC;EAEpC,MAAMQ,WAAW,GAAGlB,WAAW,CAAC,MAAM;IACpCW,cAAc,EAAEQ,OAAO,GAAG,KAAK,CAAC;IAChCP,cAAc,CAACG,OAAO,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACH,cAAc,EAAED,cAAc,EAAEQ,OAAO,CAAC,CAAC;EAE7C,oBACEX,IAAA,CAACN,WAAW;IACVkB,GAAG,EAAEV,cAAe;IACpBW,UAAU,EAAE,IAAK;IACjBC,qBAAqB,EAAC,OAAO;IAC7BC,OAAO,EAAEL,WAAY;IACrBM,qBAAqB,EAAC,gBAAgB;IACtCC,mBAAmB;IACnBC,oBAAoB;IAAAC,QAAA,eAEpBnB,IAAA,CAACJ,eAAe;MAAAuB,QAAA,EACb,CAAChB,cAAc,EAAEiB,KAAK,IAAIjB,cAAc,EAAEkB,OAAO,kBAChDrB,IAAA,CAACL,iBAAiB;QAChByB,KAAK,EAAEjB,cAAc,CAACiB,KAAM;QAC5BE,UAAU,EAAC,UAAU;QACrBC,WAAW,EAAEpB,cAAc,CAACkB;MAAQ,CACrC;IACF,CACc;EAAC,CACP,CAAC;AAElB,CAAC","ignoreList":[]}