@ledgerhq/lumen-ui-rnative 0.0.71 → 0.0.72

package/src/i18n/locales/ko.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(새 탭에서 열기)"
+    },
+    "stepper": {
+      "progressAriaLabel": "{{totalSteps}}단계 중 {{currentStep}}단계"
     }
   }
 }

package/src/i18n/locales/pt.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(abre em uma nova aba)"
+    },
+    "stepper": {
+      "progressAriaLabel": "Passo {{currentStep}} de {{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/ru.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(открывается в новой вкладке)"
+    },
+    "stepper": {
+      "progressAriaLabel": "Шаг {{currentStep}} из {{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/th.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(เปิดในแท็บใหม่)"
+    },
+    "stepper": {
+      "progressAriaLabel": "ขั้นตอนที่ {{currentStep}} จาก {{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/tr.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(yeni sekmede açılır)"
+    },
+    "stepper": {
+      "progressAriaLabel": "{{totalSteps}} adımdan {{currentStep}}. adım"
     }
   }
 }

package/src/i18n/locales/zh.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "（在新选项卡中打开）"
+    },
+    "stepper": {
+      "progressAriaLabel": "第 {{currentStep}} 步，共 {{totalSteps}} 步"
     }
   }
 }

package/src/lib/Components/Skeleton/Skeleton.mdx

@@ -0,0 +1,200 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SkeletonStories from './Skeleton.stories';
+import { Skeleton } from './Skeleton';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/Skeleton' of={SkeletonStories} />
+
+# Skeleton
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+Skeleton components provide visual placeholders for content that is loading. They use a pulsing animation to indicate that content is being fetched or processed, improving perceived performance and user experience.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10196-8001&m=dev).
+
+## Anatomy
+
+<Canvas of={SkeletonStories.Base} />
+
+- **Shape**: Defines the visual placeholder shape (rectangle, circle, etc.)
+- **Animation**: Built-in pulse animation to indicate loading state
+
+## Properties
+
+### Overview
+
+<Canvas of={SkeletonStories.Base} />
+<Controls of={SkeletonStories.Base} />
+
+### Component Variants
+
+The `component` prop provides pre-built skeleton patterns for common UI elements.
+
+#### **List Item**
+
+<Canvas of={SkeletonStories.WithListItem} />
+
+#### **Tile**
+
+<Canvas of={SkeletonStories.WithTile} />
+
+> **Note**: List item and Tile width are fixed
+
+### Sizes
+
+Skeletons can be sized using the `lx` prop with design system size tokens.
+
+<Canvas of={SkeletonStories.SizeShowcase} />
+
+### Shapes
+
+Skeletons can take various shapes depending on the content they're representing.
+
+<Canvas of={SkeletonStories.ShapeShowcase} />
+
+## Best Practices
+
+- **Use Component Variants**: Prefer using the `component` prop for common patterns like list items and tiles
+- **Match Content Shape**: Make skeleton shapes match the actual content they represent
+- **Consistent Spacing**: Use consistent spacing between skeleton elements
+- **Appropriate Sizing**: Size skeletons to match the expected content dimensions
+- **Loading States**: Show skeletons only during actual loading states
+
+</Tab>
+<Tab label="Implementation">
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative
+```
+
+> **Note**: `@ledgerhq/lumen-design-core` and other peer dependencies (`react`, `react-native`, etc.) are required. See our [Setup Guide →](?path=/docs/getting-started-setup--docs) for complete installation.
+
+## Basic Usage
+
+```tsx
+import { Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Skeleton lx={{ height: 's16', width: 's256' }} />;
+}
+```
+
+### Component Variants
+
+Use the `component` prop for pre-built skeleton patterns:
+
+```tsx
+import { Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+// List item skeleton - horizontal layout with avatar and text lines
+<Skeleton component='list-item' />
+
+// Tile skeleton - vertical centered layout
+<Skeleton component='tile' />
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop:
+
+```tsx
+<Skeleton lx={{ height: 's40', width: 's256', borderRadius: 'lg' }} />
+```
+
+### Manual Composition
+
+For custom layouts, compose multiple skeleton elements:
+
+```tsx
+import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
+  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
+    <Skeleton lx={{ height: 's16', width: 's160' }} />
+    <Skeleton lx={{ height: 's16', width: 's128' }} />
+  </Box>
+</Box>
+```
+
+## Do's and Don'ts
+
+<div className='flex flex-col gap-24'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use component prop for common patterns'
+      description='Use pre-built variants for consistent loading states'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Skeleton component='list-item' />
+<Skeleton component='tile' />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't manually recreate common patterns"
+      description='Avoid recreating patterns that already exist as component variants'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
+  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
+    <Skeleton lx={{ height: 's12', width: 's176' }} />
+    <Skeleton lx={{ height: 's12', width: 's112' }} />
+  </Box>
+</Box>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use lx prop for sizing'
+      description='Use design system size tokens for consistent sizing'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Skeleton lx={{ height: 's16', width: 's256' }} />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use arbitrary style values"
+      description='Avoid using the style prop or arbitrary values'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Skeleton style={{ height: 16, width: 200 }} />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+</div>
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box } from '../Utility/Box';
+import { Skeleton } from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Communication/Skeleton',
+  component: Skeleton,
+  parameters: {
+    actions: { disable: true },
+  },
+  argTypes: {
+    component: {
+      control: 'select',
+      options: [undefined, 'list-item', 'tile'],
+      description: 'Pre-built skeleton component variant',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Base: Story = {
+  args: {
+    lx: {
+      height: 's16',
+      width: 's256',
+    },
+  },
+  render: (args) => (
+    <Box lx={{ padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }}>
+      <Skeleton
+        component={args.component}
+        lx={args.component ? undefined : args.lx}
+      />
+    </Box>
+  ),
+};
+
+export const WithListItem: Story = {
+  render: () => (
+    <Box lx={{ padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }}>
+      <Skeleton component='list-item' />
+    </Box>
+  ),
+};
+
+export const WithTile: Story = {
+  render: () => (
+    <Box lx={{ padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }}>
+      <Skeleton component='tile' />
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box
+      lx={{
+        padding: 's16',
+        backgroundColor: 'canvas',
+        borderRadius: 'md',
+        gap: 's4',
+      }}
+    >
+      <Skeleton lx={{ height: 's40', width: 's56' }} />
+      <Skeleton lx={{ height: 's12', width: 's112' }} />
+      <Skeleton lx={{ height: 's128', width: 's256' }} />
+    </Box>
+  ),
+};
+
+export const ShapeShowcase: Story = {
+  render: () => (
+    <Box
+      lx={{
+        padding: 's16',
+        backgroundColor: 'canvas',
+        borderRadius: 'md',
+        gap: 's4',
+      }}
+    >
+      <Skeleton lx={{ height: 's40', width: 's256', borderRadius: 'none' }} />
+      <Skeleton lx={{ height: 's40', width: 's256', borderRadius: 'lg' }} />
+      <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
+      <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'md' }} />
+    </Box>
+  ),
+};

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

@@ -0,0 +1,54 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { Skeleton } from './Skeleton';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('Skeleton Component', () => {
+  it('should render correctly', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Skeleton />
+      </TestWrapper>,
+    );
+    const skeletonElement = getByTestId('skeleton');
+    expect(skeletonElement).toBeTruthy();
+  });
+
+  it('should render list-item variant', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Skeleton testID='list-item-skeleton' component='list-item' />
+      </TestWrapper>,
+    );
+    const skeletonElement = getByTestId('list-item-skeleton');
+    expect(skeletonElement).toBeTruthy();
+  });
+
+  it('should render tile variant', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Skeleton testID='tile-skeleton' component='tile' />
+      </TestWrapper>,
+    );
+    const skeletonElement = getByTestId('tile-skeleton');
+    expect(skeletonElement).toBeTruthy();
+  });
+
+  it('should accept additional props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Skeleton testID='custom-skeleton' />
+      </TestWrapper>,
+    );
+    const skeletonElement = getByTestId('custom-skeleton');
+    expect(skeletonElement).toBeTruthy();
+  });
+});

package/src/lib/Components/Skeleton/Skeleton.tsx

@@ -0,0 +1,137 @@
+import { Pulse } from '../../Animations/Pulse';
+import { Box } from '../Utility';
+import type { SkeletonProps } from './types';
+
+/** Internal base skeleton element */
+const BaseSkeleton = ({ lx, ...props }: SkeletonProps) => {
+  return (
+    <Box
+      lx={{
+        borderRadius: 'md',
+        backgroundColor: 'mutedTransparent',
+        ...lx,
+      }}
+      {...props}
+    />
+  );
+};
+BaseSkeleton.displayName = 'BaseSkeleton';
+
+const ListItemSkeleton = ({ lx, ...props }: SkeletonProps) => {
+  return (
+    <Box
+      lx={{
+        flexDirection: 'row',
+        width: 'full',
+        alignItems: 'center',
+        gap: 's16',
+        paddingVertical: 's8',
+        ...lx,
+      }}
+      {...props}
+    >
+      <BaseSkeleton
+        lx={{
+          width: 's48',
+          height: 's48',
+          borderRadius: 'full',
+          flexShrink: 0,
+        }}
+      />
+      <Box lx={{ flex: 1, flexDirection: 'column', gap: 's10' }}>
+        <BaseSkeleton
+          lx={{ height: 's12', width: 's176', borderRadius: 'full' }}
+        />
+        <BaseSkeleton
+          lx={{ height: 's12', width: 's112', borderRadius: 'full' }}
+        />
+      </Box>
+    </Box>
+  );
+};
+ListItemSkeleton.displayName = 'ListItemSkeleton';
+
+const TileSkeleton = ({ lx, ...props }: SkeletonProps) => {
+  return (
+    <Box
+      lx={{
+        flexDirection: 'column',
+        width: 's112',
+        alignItems: 'center',
+        gap: 's12',
+        borderRadius: 'md',
+        paddingHorizontal: 's8',
+        paddingVertical: 's16',
+        ...lx,
+      }}
+      {...props}
+    >
+      <BaseSkeleton
+        lx={{
+          width: 's48',
+          height: 's48',
+          borderRadius: 'full',
+          flexShrink: 0,
+        }}
+      />
+      <Box
+        lx={{
+          width: 'full',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 's8',
+        }}
+      >
+        <BaseSkeleton
+          lx={{ height: 's12', width: 's48', borderRadius: 'full' }}
+        />
+        <BaseSkeleton
+          lx={{ height: 's12', width: 's64', borderRadius: 'full' }}
+        />
+      </Box>
+    </Box>
+  );
+};
+TileSkeleton.displayName = 'TileSkeleton';
+
+const componentsMap = {
+  'list-item': ListItemSkeleton,
+  tile: TileSkeleton,
+};
+
+/**
+ * A skeleton component that displays a pulsing placeholder for loading content.
+ *
+ * @example
+ * <Skeleton lx={{ height: 's16', width: 's256' }} />
+ *
+ * @example
+ * // List item variant
+ * <Skeleton component='list-item' lx={{ width: 's320' }} />
+ *
+ * @example
+ * // Tile variant
+ * <Skeleton component='tile' />
+ */
+const Skeleton = ({ lx, component, ...props }: SkeletonProps) => {
+  /**
+   * Check if the component is a valid pre-built variant and return the corresponding component.
+   */
+  if (component && componentsMap[component]) {
+    const Component = componentsMap[component];
+    return (
+      <Pulse animate>
+        <Component {...props} lx={lx} />
+      </Pulse>
+    );
+  }
+
+  return (
+    <Pulse animate>
+      <BaseSkeleton testID='skeleton' lx={lx} {...props} />
+    </Pulse>
+  );
+};
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };

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

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

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

@@ -0,0 +1,10 @@
+import { StyledViewProps } from '../../../styles';
+
+export type SkeletonProps = {
+  /**
+   * Pre-built skeleton component variant
+   * - `list-item`: Horizontal layout with circle and two text lines
+   * - `tile`: Vertical centered layout with circle and two text lines in a rounded container
+   */
+  component?: 'list-item' | 'tile';
+} & Omit<StyledViewProps, 'children'>;