@ledgerhq/lumen-ui-rnative 0.0.52 → 0.0.53

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useTheme } from 'src/styles';
+import { Box } from '../../Box';
+import { Text } from '../../Text';
+import { LinearGradient } from './LinearGradient';
+
+const meta: Meta<typeof LinearGradient> = {
+  component: LinearGradient,
+  title: 'Utility/LinearGradient',
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LinearGradient>;
+
+export const Base: Story = {
+  args: {
+    direction: 'to-bottom',
+    stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+    lx: {
+      width: 's192',
+      height: 's56',
+      borderRadius: 'lg',
+    },
+  },
+};
+
+export const DirectionShowcase: Story = {
+  render: () => {
+    const orientations = [
+      'to-bottom',
+      'to-right',
+      'to-top',
+      'to-left',
+      'to-bottomright',
+      'to-bottomleft',
+      'to-topright',
+      'to-topleft',
+      0,
+      90,
+      180,
+      270,
+    ] as const;
+
+    return (
+      <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's20' }}>
+        {orientations.map((orientation) => {
+          return (
+            <Box key={orientation} lx={{ gap: 's4' }}>
+              <LinearGradient
+                direction={orientation}
+                stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+                lx={{ height: 's40', width: 's176', borderRadius: 'md' }}
+              />
+              <Text typography='body4' lx={{ color: 'base' }}>
+                {orientation}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+    );
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    direction: 'to-bottomright',
+    stops: [{ color: 'accent' }, { color: 'active', opacity: 0, offset: 0.75 }],
+    lx: {
+      padding: 's24',
+      borderRadius: 'lg',
+      width: 's288',
+    },
+  },
+  render: (args) => (
+    <LinearGradient {...args}>
+      <Text typography='heading2SemiBold' lx={{ color: 'base' }}>
+        With Children
+      </Text>
+      <Text typography='body2' lx={{ color: 'base', marginTop: 's8' }}>
+        Adapt height based on content.
+      </Text>
+      <Text typography='body3' lx={{ color: 'base', marginTop: 's8' }}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit consectetur
+        adipisicing elit adipisicing elit. Mas adename labin anet.
+      </Text>
+    </LinearGradient>
+  ),
+};
+
+export const WithMultipleStops: Story = {
+  args: {
+    direction: 'to-right',
+    stops: [
+      { color: 'accent', offset: 0, opacity: 1 },
+      { color: 'warning', offset: 0.5, opacity: 1 },
+      { color: 'errorStrong', offset: 1, opacity: 1 },
+    ],
+    lx: {
+      borderRadius: 'md',
+      height: 's56',
+      width: 's288',
+    },
+  },
+  render: (args) => {
+    const { theme } = useTheme();
+    console.log({ theme });
+    return (
+      <Box lx={{ gap: 's12' }}>
+        <LinearGradient {...args} />
+        <Box lx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Text>accent</Text>
+          <Text>warning</Text>
+          <Text>errorStrong</Text>
+        </Box>
+      </Box>
+    );
+  },
+};
+
+export const CryptoGradients: Story = {
+  args: {
+    direction: 'to-bottomright',
+    lx: {
+      borderRadius: 'md',
+      height: 's56',
+      width: 's288',
+    },
+  },
+  render: (args) => {
+    const { theme } = useTheme();
+
+    return (
+      <Box
+        lx={{
+          gap: 's20',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}
+      >
+        {Object.entries(theme.colors.gradients.crypto).map(
+          ([key, gradient]) => (
+            <Box key={key} lx={{ gap: 's4' }}>
+              <LinearGradient
+                {...args}
+                lx={{
+                  height: 's40',
+                  width: 's176',
+                  borderRadius: 'md',
+                }}
+                stops={gradient}
+              ></LinearGradient>
+              <Text typography='body4' lx={{ color: 'base' }}>
+                {key}
+              </Text>
+            </Box>
+          ),
+        )}
+      </Box>
+    );
+  },
+};

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { Text, View } from 'react-native';
+
+import { ThemeProvider } from '../../../ThemeProvider/ThemeProvider';
+import { LinearGradient } from './LinearGradient';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('LinearGradient', () => {
+  it('should have correct display name', () => {
+    expect(LinearGradient.displayName).toBe('LinearGradient');
+  });
+
+  it('should render children', () => {
+    renderWithProvider(
+      <LinearGradient stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}>
+        <Text>Child Content</Text>
+      </LinearGradient>,
+    );
+    expect(screen.getByText('Child Content')).toBeTruthy();
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<View>();
+    renderWithProvider(
+      <LinearGradient
+        ref={ref}
+        stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}
+      />,
+    );
+    expect(ref.current).toBeTruthy();
+  });
+
+  it('should resolve lx style tokens', () => {
+    renderWithProvider(
+      <LinearGradient
+        testID='linear-gradient'
+        stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}
+        lx={{ padding: 's16', marginTop: 's8' }}
+      />,
+    );
+    const gradient = screen.getByTestId('linear-gradient');
+    expect(gradient.props.style.padding).toBe(16);
+    expect(gradient.props.style.marginTop).toBe(8);
+  });
+
+  it('should pass accessibility props', () => {
+    renderWithProvider(
+      <LinearGradient
+        testID='linear-gradient'
+        stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}
+        accessibilityLabel='Decorative gradient'
+        accessible={false}
+      />,
+    );
+    const gradient = screen.getByTestId('linear-gradient');
+    expect(gradient.props.accessibilityLabel).toBe('Decorative gradient');
+    expect(gradient.props.accessible).toBe(false);
+  });
+});

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.tsx

@@ -0,0 +1,127 @@
+import { forwardRef, memo, useId, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import type { View } from 'react-native';
+import Svg, {
+  Defs,
+  LinearGradient as SvgLinearGradient,
+  Rect,
+  Stop,
+} from 'react-native-svg';
+import { useTheme } from '../../../../../styles';
+import { Box } from '../../Box';
+import { processGradientStops } from '../utils/resolveGradientColor';
+import type {
+  GradientCoordinates,
+  LinearGradientDirection,
+  LinearGradientProps,
+} from './types';
+
+const DIRECTION_MAP: Record<LinearGradientDirection, GradientCoordinates> = {
+  'to-bottom': { x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
+  'to-top': { x1: '0%', y1: '100%', x2: '0%', y2: '0%' },
+  'to-right': { x1: '0%', y1: '0%', x2: '100%', y2: '0%' },
+  'to-left': { x1: '100%', y1: '0%', x2: '0%', y2: '0%' },
+  'to-bottomright': { x1: '0%', y1: '0%', x2: '100%', y2: '100%' },
+  'to-bottomleft': { x1: '100%', y1: '0%', x2: '0%', y2: '100%' },
+  'to-topright': { x1: '0%', y1: '100%', x2: '100%', y2: '0%' },
+  'to-topleft': { x1: '100%', y1: '100%', x2: '0%', y2: '0%' },
+};
+
+const angleToCoordinates = (angle: number): GradientCoordinates => {
+  const normalizedAngle = ((angle % 360) + 360) % 360;
+
+  // Convert to radians (CSS: 0° is up, going clockwise)
+  // SVG: we need to map this to x1,y1 -> x2,y2
+  const radians = ((normalizedAngle - 90) * Math.PI) / 180;
+  const x2 = Math.cos(radians) * 0.5 + 0.5;
+  const y2 = Math.sin(radians) * 0.5 + 0.5;
+  const x1 = 1 - x2;
+  const y1 = 1 - y2;
+
+  return {
+    x1: `${Math.round(x1 * 100)}%`,
+    y1: `${Math.round(y1 * 100)}%`,
+    x2: `${Math.round(x2 * 100)}%`,
+    y2: `${Math.round(y2 * 100)}%`,
+  };
+};
+
+const styles = StyleSheet.create({
+  gradient: {
+    ...StyleSheet.absoluteFillObject,
+    width: '100%',
+    height: '100%',
+  },
+});
+
+/**
+ * LinearGradient - A container component that renders a linear gradient background.
+ *
+ * Uses react-native-svg to render gradients that work consistently across platforms.
+ * Extends Box, so it supports all lx style props for layout and sizing.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-lineargradient--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { LinearGradient } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with direction preset
+ * <LinearGradient
+ *   direction="to-bottomright"
+ *   stops={[
+ *     { color: '#FF6B6B', offset: 0 },
+ *     { color: '#6BCB77', offset: 1 },
+ *   ]}
+ *   lx={{ height: 's200', borderRadius: 'lg' }}
+ * />
+ */
+export const LinearGradient = memo(
+  forwardRef<View, LinearGradientProps>(
+    ({ direction = 'to-bottom', stops, children, lx = {}, ...props }, ref) => {
+      const gradientId = useId();
+      const { theme } = useTheme();
+
+      const coordinates = useMemo(() => {
+        const isCustomAngle = typeof direction === 'number';
+        return isCustomAngle
+          ? angleToCoordinates(direction)
+          : DIRECTION_MAP[direction];
+      }, [direction]);
+
+      const processedStops = useMemo(
+        () => processGradientStops(stops, theme.colors.bg),
+        [stops, theme.colors.bg],
+      );
+
+      return (
+        <Box ref={ref} lx={{ overflow: 'hidden', ...lx }} {...props}>
+          <Svg style={styles.gradient} preserveAspectRatio='none'>
+            <Defs>
+              <SvgLinearGradient id={gradientId} {...coordinates}>
+                {processedStops.map((stop, index) => (
+                  <Stop
+                    key={index}
+                    offset={`${stop.offset * 100}%`}
+                    stopColor={stop.color}
+                    stopOpacity={stop.opacity}
+                  />
+                ))}
+              </SvgLinearGradient>
+            </Defs>
+            <Rect
+              x='0'
+              y='0'
+              width='100%'
+              height='100%'
+              fill={`url(#${gradientId})`}
+            />
+          </Svg>
+          {children}
+        </Box>
+      );
+    },
+  ),
+);
+
+LinearGradient.displayName = 'LinearGradient';

package/src/lib/Components/Utility/Gradient/LinearGradient/index.ts

@@ -0,0 +1,2 @@
+export * from './LinearGradient';
+export * from './types';

package/src/lib/Components/Utility/Gradient/LinearGradient/types.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { StyledViewProps } from '../../../../../styles';
+import { GradientStop } from '../gradient.types';
+
+export type GradientCoordinates = {
+  x1: string;
+  y1: string;
+  x2: string;
+  y2: string;
+};
+
+export type LinearGradientDirection =
+  | 'to-bottom'
+  | 'to-top'
+  | 'to-left'
+  | 'to-right'
+  | 'to-bottomright'
+  | 'to-bottomleft'
+  | 'to-topright'
+  | 'to-topleft';
+
+/**
+ * Props for the LinearGradient component.
+ */
+export type LinearGradientProps = {
+  /**
+   * Gradient color stops
+   */
+  stops: GradientStop[];
+  /**
+   * Optional children to render on top of the gradient
+   */
+  children?: ReactNode;
+  /**
+   * Direction preset for the gradient.
+   * @default 'to-bottom'
+   *
+   * Can be a direction preset or a custom angle in degrees.
+   * 0° points to the right, 90° points down.
+   */
+  direction?: LinearGradientDirection | number;
+} & StyledViewProps;

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.mdx

@@ -0,0 +1,109 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as RadialGradientStories from './RadialGradient.stories';
+import { CustomTabs, Tab } from '../../../../../../.storybook/components';
+
+<Meta title='Utility/RadialGradient' of={RadialGradientStories} />
+
+# RadialGradient
+
+<CustomTabs>
+  <Tab label="Overview ">
+
+## Introduction
+
+RadialGradient renders a radial gradient background using `react-native-svg`. 
+It extends Box, supporting all `lx` style props for layout and sizing.
+
+## Anatomy
+
+<Canvas of={RadialGradientStories.Base} />
+<Controls of={RadialGradientStories.Base} />
+
+## Properties
+
+### Center Position
+
+Control where the gradient originates using the `center` prop:
+
+<Canvas of={RadialGradientStories.CenterPositionShowcase} />
+
+### With Children
+
+Content renders on top of the gradient:
+
+<Canvas of={RadialGradientStories.WithChildren} />
+
+### Multiple Stops
+
+The `offset` prop controls where each color appears from center to edge (0 = center, 1 = edge).  
+When omitted, stops are distributed evenly.  
+For example, 3 stops without offsets will be placed at 0, 0.5, and 1.
+
+<Canvas of={RadialGradientStories.WithMultipleStops} />
+
+</Tab>
+
+  <Tab label="Implementation ">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+By default, the gradient radiates from center outward. Use design tokens for colors to ensure theme consistency.
+
+```tsx
+import { RadialGradient } from '@ledgerhq/lumen-ui-rnative';
+
+<RadialGradient
+  stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+  lx={{ height: 's192', width: 's192', borderRadius: 'lg' }}
+/>
+```
+
+### Custom Center
+
+The `center` prop uses normalized coordinates (0-1). `{ x: 0, y: 0 }` is top-left, `{ x: 1, y: 1 }` is bottom-right. 
+Useful for spotlight or vignette effects.
+
+```tsx
+<RadialGradient
+  center={{ x: 0, y: 0 }}
+  stops={[{ color: 'accent' }, { color: 'active' }]}
+  lx={{ height: 's80', width: 's80' }}
+/>
+```
+
+### With Children
+
+The gradient acts as a background. Children are rendered on top and define the component's height when no explicit size is set.
+
+```tsx
+<RadialGradient
+  center={{ x: 0.5, y: 0.3 }}
+  stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+  lx={{ padding: 's24', borderRadius: 'lg' }}
+>
+  <Text lx={{ color: 'base' }}>Content on gradient</Text>
+</RadialGradient>
+```
+
+### Stops API
+
+Each stop defines a color at a distance from center. Use `opacity: 0` for fade-out effects. 
+Colors support both design tokens (`'accent'`) and raw values (`'#FF6B6B'`).
+
+**Default behavior when `offset` is omitted:** stops are evenly distributed. 
+With 2 stops → `[0, 1]`. With 3 stops → `[0, 0.5, 1]`. With 4 stops → `[0, 0.33, 0.66, 1]`.
+
+```tsx
+type GradientStop = {
+  color: BackgroundColorToken | string;  // Token or raw color
+  offset?: number;   // 0-1, auto-spread if omitted
+  opacity?: number;  // 0-1, defaults to 1
+}
+```
+
+</Tab>
+</CustomTabs>

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box } from '../../Box';
+import { Text } from '../../Text';
+import { RadialGradient } from './RadialGradient';
+
+const meta: Meta<typeof RadialGradient> = {
+  component: RadialGradient,
+  title: 'Utility/RadialGradient',
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadialGradient>;
+
+export const Base: Story = {
+  args: {
+    stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+    lx: {
+      height: 's192',
+      width: 's192',
+      borderRadius: 'lg',
+    },
+  },
+};
+
+export const CenterPositionShowcase: Story = {
+  render: () => {
+    const positions = [
+      {
+        title: 'Aspect ratio 1:1',
+        isSquare: true,
+        items: [
+          {
+            center: { x: 0.5, y: 0.5 },
+            label: '{x: 0.5, y: 0.5} (default)',
+          },
+          { center: { x: 0.2, y: 0.2 }, label: '{x: 0.2, y: 0.2}' },
+          { center: { x: 0.8, y: 0.8 }, label: '{x: 0.8, y: 0.8}' },
+          { center: { x: 0.2, y: 0.8 }, label: '{x: 0.2, y: 0.8}' },
+          { center: { x: 0.8, y: 0.2 }, label: '{x: 0.8, y: 0.2}' },
+        ],
+      },
+      {
+        title: 'Aspect ratio 1:2',
+        isSquare: false,
+        items: [
+          {
+            center: { x: 0.5, y: 0.5 },
+            label: '{x: 0.5, y: 0.5} (default)',
+          },
+          { center: { x: 0.2, y: 0.2 }, label: '{x: 0.2, y: 0.2}' },
+          { center: { x: 0.8, y: 0.8 }, label: '{x: 0.8, y: 0.8}' },
+          { center: { x: 0.2, y: 0.8 }, label: '{x: 0.2, y: 0.8}' },
+          { center: { x: 0.8, y: 0.2 }, label: '{x: 0.8, y: 0.2}' },
+        ],
+      },
+    ] as const;
+
+    return (
+      <Box lx={{ flexDirection: 'column', gap: 's40' }}>
+        {positions.map(({ title, isSquare, items }) => (
+          <Box key={title}>
+            <Text
+              typography='heading5SemiBold'
+              lx={{ color: 'base', marginBottom: 's16' }}
+            >
+              {title}
+            </Text>
+            <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's24' }}>
+              {items.map(({ center, label }) => (
+                <Box key={label} lx={{ gap: 's8', alignItems: 'center' }}>
+                  <RadialGradient
+                    center={center}
+                    stops={[
+                      { color: 'accent' },
+                      { color: 'active', opacity: 0 },
+                    ]}
+                    lx={{
+                      height: 's72',
+                      width: isSquare ? 's72' : 's144',
+                      borderRadius: 'md',
+                      borderColor: 'active',
+                      borderWidth: 's1',
+                    }}
+                  />
+                  <Text typography='body4' lx={{ color: 'base' }}>
+                    {label}
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    );
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+    lx: {
+      padding: 's24',
+      borderRadius: 'lg',
+      width: 's288',
+      borderColor: 'active',
+      borderWidth: 's1',
+    },
+  },
+  render: (args) => (
+    <RadialGradient {...args}>
+      <Text typography='heading2SemiBold' lx={{ color: 'base' }}>
+        With Children
+      </Text>
+      <Text typography='body2' lx={{ color: 'base', marginTop: 's8' }}>
+        Adapt height based on content.
+      </Text>
+      <Text typography='body3' lx={{ color: 'base', marginTop: 's8' }}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos
+      </Text>
+    </RadialGradient>
+  ),
+};
+
+export const WithMultipleStops: Story = {
+  args: {
+    stops: [
+      { color: 'warning', offset: 0, opacity: 1 },
+      { color: 'accent', offset: 0.5, opacity: 1 },
+      { color: 'error', offset: 1, opacity: 1 },
+    ],
+    lx: {
+      height: 's80',
+      width: 's80',
+      borderRadius: 'full',
+    },
+  },
+};