@ledgerhq/lumen-ui-rnative 0.0.42

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

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Text, View } from 'react-native';
+import { Information } from '../../Symbols';
+import { Button } from '../Button';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
+import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  subcomponents: { TooltipTrigger, TooltipContent },
+  title: 'Communication/Tooltip',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Base: Story = {
+  render: () => (
+    <>
+      <View className='flex min-h-400 items-center justify-center p-24'>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button>Press me</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            title='My tooltip title'
+            content={<Text>This is a helpful tooltip</Text>}
+          />
+        </Tooltip>
+      </View>
+      <GlobalTooltipBottomSheet />
+    </>
+  ),
+};
+
+export const WithCustomContent: Story = {
+  render: () => (
+    <>
+      <View className='flex min-h-400 items-center justify-center p-24'>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button>Press me</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            title='My tooltip title'
+            content={
+              <View className='flex items-start gap-12'>
+                <Text className='text-muted'>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat.
+                </Text>
+                <Button size='xs' appearance='accent'>
+                  Custom tooltip action
+                </Button>
+              </View>
+            }
+          />
+        </Tooltip>
+      </View>
+      <GlobalTooltipBottomSheet />
+    </>
+  ),
+};
+
+export const WithMultipleTooltips: Story = {
+  render: () => (
+    <>
+      <View className='flex min-h-400 flex-row items-center justify-center gap-16 p-24'>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button>Tooltip 1</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            title='First'
+            content={<Text>First tooltip content</Text>}
+          />
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button>Tooltip 2</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            title='Second'
+            content={<Text>Second tooltip content</Text>}
+          />
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InteractiveIcon iconType='filled' aria-label='Info'>
+              <Information />
+            </InteractiveIcon>
+          </TooltipTrigger>
+          <TooltipContent
+            title='Third'
+            content={<Text>Third tooltip content</Text>}
+          />
+        </Tooltip>
+      </View>
+      <GlobalTooltipBottomSheet />
+    </>
+  ),
+};
+
+export const WithChangeCallback: Story = {
+  render: () => {
+    return (
+      <>
+        <View className='flex min-h-400 items-center justify-center p-24'>
+          <Tooltip
+            onOpenChange={(newOpen) => alert(`Opened changes to: ${newOpen}`)}
+          >
+            <TooltipTrigger asChild>
+              <Button>Press me</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              title='My tooltip title'
+              content={<Text>This is a helpful tooltip</Text>}
+            />
+          </Tooltip>
+        </View>
+        <GlobalTooltipBottomSheet />
+      </>
+    );
+  },
+};

package/src/lib/Components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { Text, View } from 'react-native';
+import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
+import { GlobalTooltipProvider } from './GlobalTooltipContext';
+import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <GlobalTooltipProvider>
+    {children}
+    <GlobalTooltipBottomSheet />
+  </GlobalTooltipProvider>
+);
+
+describe('Tooltip', () => {
+  it('renders and triggers tooltip', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Tooltip>
+          <TooltipTrigger>
+            <View>
+              <Text>Press me</Text>
+            </View>
+          </TooltipTrigger>
+          <TooltipContent
+            title='Help'
+            content={<Text>Helpful information</Text>}
+          />
+        </Tooltip>
+      </TestWrapper>,
+    );
+
+    expect(getByText('Press me')).toBeTruthy();
+
+    fireEvent.press(getByText('Press me'));
+
+    expect(getByText('Help')).toBeTruthy();
+    expect(getByText('Helpful information')).toBeTruthy();
+  });
+
+  it('works in controlled mode', () => {
+    const onOpenChange = jest.fn();
+    const { getByText } = render(
+      <TestWrapper>
+        <Tooltip onOpenChange={onOpenChange}>
+          <TooltipTrigger>
+            <View>
+              <Text>Press me</Text>
+            </View>
+          </TooltipTrigger>
+          <TooltipContent title='Help' content={<Text>Info</Text>} />
+        </Tooltip>
+      </TestWrapper>,
+    );
+
+    fireEvent.press(getByText('Press me'));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it('requires GlobalTooltipProvider', () => {
+    const originalError = console.error;
+    console.error = jest.fn();
+
+    expect(() => {
+      render(
+        <Tooltip>
+          <TooltipTrigger>
+            <Text>Trigger</Text>
+          </TooltipTrigger>
+          <TooltipContent title='Title' content={<Text>Content</Text>} />
+        </Tooltip>,
+      );
+    }).toThrow();
+
+    console.error = originalError;
+  });
+});

package/src/lib/Components/Tooltip/Tooltip.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect, useCallback, useId } from 'react';
+import { Pressable } from 'react-native';
+import { useControllableState } from '../../utils';
+import { SlotPressable } from '../Slot';
+import { useTooltipActions } from './GlobalTooltipContext';
+import {
+  TooltipContentData,
+  TooltipContextProvider,
+  useTooltipSafeContext,
+} from './TooltipContext';
+import type {
+  TooltipProps,
+  TooltipTriggerProps,
+  TooltipContentProps,
+} from './types';
+
+/**
+ * The root component that manages a specific tooltip's state.
+ *
+ * This component coordinates between the trigger and content components.
+ * It works with GlobalTooltipProvider to ensure only one tooltip can be shown at a time.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-tooltip-overview--docs Storybook}
+ *
+ * @example
+ * import { GlobalTooltipProvider, Tooltip, TooltipTrigger, TooltipContent, GlobalTooltipBottomSheet } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <Tooltip>
+ *         <TooltipTrigger>
+ *           <Button>Press me</Button>
+ *         </TooltipTrigger>
+ *         <TooltipContent title="Help" content={<Text>This is a tooltip!</Text>} />
+ *       </Tooltip>
+ *       <GlobalTooltipBottomSheet />
+ *     </ThemeProvider>
+ *   );
+ * }
+ */
+export const Tooltip: React.FC<TooltipProps> = ({ children, onOpenChange }) => {
+  const tooltipId = useId();
+  const [internalOpen, setInternalOpen] = useControllableState({
+    defaultProp: false,
+    onChange: onOpenChange,
+  });
+  const [contentData, setContentData] = useState<TooltipContentData | null>(
+    null,
+  );
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      setInternalOpen?.(newOpen);
+    },
+    [setInternalOpen],
+  );
+
+  return (
+    <TooltipContextProvider
+      tooltipId={tooltipId}
+      open={internalOpen}
+      setOpen={setOpen}
+      contentData={contentData}
+      setContentData={setContentData}
+    >
+      {children}
+    </TooltipContextProvider>
+  );
+};
+Tooltip.displayName = 'Tooltip';
+
+export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
+  children,
+  asChild = false,
+  ...props
+}) => {
+  const { tooltipId, setOpen, contentData } = useTooltipSafeContext({
+    consumerName: 'TooltipTrigger',
+    contextRequired: true,
+  });
+  /**
+   * Use the optimized hook that doesn't subscribe to currentTooltip state
+   * This prevents re-renders when other tooltips open/close
+   */
+  const { showTooltip } = useTooltipActions();
+
+  const handlePress = (): void => {
+    if (contentData) {
+      setOpen(true);
+      showTooltip({
+        id: tooltipId,
+        content: contentData.content,
+        title: contentData.title,
+        setOpen,
+      });
+    }
+  };
+
+  const Comp = asChild ? SlotPressable : Pressable;
+
+  return (
+    <Comp {...props} onPress={handlePress}>
+      {children}
+    </Comp>
+  );
+};
+TooltipTrigger.displayName = 'TooltipTrigger';
+
+export const TooltipContent: React.FC<TooltipContentProps> = ({
+  title,
+  content,
+}) => {
+  const { setContentData } = useTooltipSafeContext({
+    consumerName: 'TooltipContent',
+    contextRequired: true,
+  });
+
+  useEffect(() => {
+    setContentData({ title, content });
+    return () => {
+      setContentData(null);
+    };
+  }, [title, content, setContentData]);
+
+  return null;
+};
+TooltipContent.displayName = 'TooltipContent';

package/src/lib/Components/Tooltip/TooltipContext.tsx

@@ -0,0 +1,56 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import React, { ReactNode } from 'react';
+
+export type TooltipContentData = {
+  title?: string;
+  content?: ReactNode;
+};
+
+export type TooltipContextValue = {
+  tooltipId: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentData: TooltipContentData | null;
+  setContentData: (data: TooltipContentData | null) => void;
+};
+
+const [TooltipProvider, _useTooltipSafeContext] =
+  createSafeContext<TooltipContextValue>('Tooltip');
+
+export const useTooltipSafeContext = _useTooltipSafeContext;
+
+type TooltipContextProviderProps = {
+  tooltipId: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentData: TooltipContentData | null;
+  setContentData: (data: TooltipContentData | null) => void;
+  children: ReactNode;
+};
+
+/**
+ * Internal context provider for an individual Tooltip component.
+ * This is used automatically by the Tooltip component.
+ */
+export const TooltipContextProvider: React.FC<TooltipContextProviderProps> = ({
+  tooltipId,
+  open,
+  setOpen,
+  contentData,
+  setContentData,
+  children,
+}) => {
+  return (
+    <TooltipProvider
+      value={{
+        tooltipId,
+        open,
+        setOpen,
+        contentData,
+        setContentData,
+      }}
+    >
+      {children}
+    </TooltipProvider>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from './Tooltip';
+export * from './GlobalTooltipBottomSheet';
+export * from './types';

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { PressableProps } from 'react-native';
+
+export type TooltipProps = {
+  /**
+   * The children components (TooltipTrigger and TooltipContent).
+   */
+  children: ReactNode;
+  /**
+   * Callback when open state changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+};
+
+export type TooltipTriggerProps = {
+  /**
+   * The element that will trigger the tooltip (e.g., button, icon, text).
+   */
+  children: ReactNode;
+  /**
+   * Change the default rendered element for the one passed as a child,
+   * merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & Omit<PressableProps, 'children'>;
+
+export type TooltipContentProps = {
+  /**
+   * The title of the tooltip (optional).
+   */
+  title?: string;
+  /**
+   * The content to display inside the tooltip.
+   */
+  content: ReactNode;
+};

package/src/lib/Components/Wrap/Wrap.tsx

@@ -0,0 +1,14 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+
+export type WrapProps = PropsWithChildren & {
+  if: boolean;
+  with: (children: ReactNode) => JSX.Element;
+};
+
+export const Wrap: FC<WrapProps> = ({
+  if: condition,
+  with: wrapper,
+  children,
+}) => {
+  return condition ? wrapper(children) : children;
+};

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

@@ -0,0 +1 @@
+export * from './Wrap';

package/src/lib/Components/_ToRemove/ToRemove.tsx

@@ -0,0 +1,65 @@
+import { Text, View } from 'react-native';
+import { LumenStyleSheet } from '../../../styles/LumenStyleSheet';
+import { LumenStyleSheetTheme } from '../../../styles/types';
+
+type Variant = 'primary' | 'secondary' | 'error';
+
+const useToRemoveStyles = (variant: Variant) => {
+  return LumenStyleSheet.useCreate((theme: LumenStyleSheetTheme) => {
+    const bgColorMap: Record<Variant, string> = {
+      primary: theme.colors.bg.accent,
+      secondary: theme.colors.bg.surface,
+      error: theme.colors.bg.error,
+    };
+
+    const textColorMap: Record<Variant, string> = {
+      primary: theme.colors.text.onAccent,
+      secondary: theme.colors.text.base,
+      error: theme.colors.text.error,
+    };
+
+    return {
+      container: {
+        backgroundColor: bgColorMap[variant],
+        padding: theme.spacings.s16,
+        borderRadius: theme.borderRadius.md,
+        gap: theme.spacings.s8,
+        boxShadow: theme.shadows.xl,
+        shadowColor: theme.colors.border.error,
+        elevation: 4,
+        width: 200,
+        minHeight: 80,
+      },
+      title: {
+        color: textColorMap[variant],
+        ...theme.typographies.body1SemiBold,
+      },
+      description: {
+        color: textColorMap[variant],
+        ...theme.typographies.body2,
+        opacity: 0.8,
+      },
+    };
+  });
+};
+
+type ToRemoveProps = {
+  variant?: Variant;
+  title?: string;
+  description?: string;
+};
+
+export const ToRemove = ({
+  variant = 'primary',
+  title = 'Card Title',
+  description = 'Description text',
+}: ToRemoveProps) => {
+  const styles = useToRemoveStyles(variant);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.description}>{description}</Text>
+    </View>
+  );
+};

package/src/lib/Components/index.ts

@@ -0,0 +1,23 @@
+export * from './_ToRemove/ToRemove';
+export * from './AddressInput';
+export * from './AmountInput';
+export * from './Banner';
+export * from './BottomSheet';
+export * from './Box';
+export * from './Button';
+export * from './CardButton';
+export * from './Checkbox';
+export * from './IconButton';
+export * from './InteractiveIcon';
+export * from './Link';
+export * from './ListItem';
+export * from './Search';
+export * from './Select';
+export * from './Spot';
+export * from './Switch';
+export * from './Tag';
+export * from './Text';
+export * from './TextInput';
+export * from './ThemeProvider';
+export * from './Tile';
+export * from './Tooltip';

package/src/lib/Patterns/index.ts

@@ -0,0 +1 @@
+export default {};

package/src/lib/Symbols/Icons/Airplane.tsx

@@ -0,0 +1,52 @@
+import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * Airplane icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Airplane } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Airplane />
+ *
+ * @example
+ * // With custom size and className (NativeWind)
+ * <Airplane size={40} className="text-warning" />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Airplane} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Airplane = createIcon(
+  'Airplane',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <G clipPath='url(#clip0_436_164)'>
+      <Path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.3}
+        d='m2 8-.666-2.667h1.2c.066 0 .2.067.266.134l1.067 1.2h3.2L4.934 1.8c-.134-.2 0-.467.266-.467h1.134c.2 0 .4.134.533.267L10.2 6.667h3.134c.733 0 1.333.6 1.333 1.333s-.6 1.333-1.333 1.333H10.2L6.867 14.4c-.133.2-.333.267-.533.267H5.2c-.266 0-.4-.267-.333-.467L7 9.333H3.8l-1.066 1.2c-.067.067-.134.134-.267.134H1.334z'
+      />
+    </G>
+    <Defs>
+      <ClipPath id='clip0_436_164'>
+        <Path fill='#fff' d='M0 0h16v16H0z' />
+      </ClipPath>
+    </Defs>
+  </Svg>,
+);

package/src/lib/Symbols/Icons/AlarmClock.tsx

@@ -0,0 +1,45 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * AlarmClock icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { AlarmClock } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <AlarmClock />
+ *
+ * @example
+ * // With custom size and className (NativeWind)
+ * <AlarmClock size={40} className="text-warning" />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={AlarmClock} size="md">
+ *   Click me
+ * </Button>
+ */
+export const AlarmClock = createIcon(
+  'AlarmClock',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M3.113 11.473c.39.546.868 1.024 1.414 1.414M2.09 7A6 6 0 0 0 2 8c0 .341.035.674.09 1m1.023-4.473a6 6 0 0 1 1.414-1.414M7 13.91c.326.055.659.09 1 .09A6 6 0 1 0 8 2a6 6 0 0 0-1 .09m3.667 4.577L7.333 10l-2-2'
+    />
+  </Svg>,
+);