@ledgerhq/lumen-ui-rnative 0.1.21 → 0.1.23

package/src/lib/Components/OptionList/OptionList.tsx

@@ -0,0 +1,532 @@
+import {
+  createSafeContext,
+  useDisabledContext,
+  DisabledProvider,
+} from '@ledgerhq/lumen-utils-shared';
+import { Fragment, type ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Check, ChevronDown } from '../../Symbols';
+import { useControllableState } from '../../utils/useControllableState';
+import { Divider } from '../Divider';
+import { Box, Pressable, Text } from '../Utility';
+import type {
+  MetaShape,
+  OptionListContextValue,
+  OptionListItemData,
+  OptionListProps,
+  OptionListContentProps,
+  OptionListItemProps,
+  OptionListItemLeadingProps,
+  OptionListItemTextProps,
+  OptionListItemDescriptionProps,
+  OptionListItemContentProps,
+  OptionListItemContentRowProps,
+  OptionListEmptyStateProps,
+  OptionListTriggerProps,
+  OptionListLabelProps,
+} from './types';
+import { useOptionListItems } from './useOptionList/useOptionListItems';
+
+const [OptionListProvider, useOptionListContext] =
+  createSafeContext<OptionListContextValue>('OptionList');
+
+export const OptionList = <TMeta extends MetaShape = MetaShape>({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled: disabledProp,
+  children,
+}: OptionListProps<TMeta>) => {
+  const disabled = useDisabledContext({
+    consumerName: 'OptionList',
+    mergeWith: { disabled: disabledProp },
+  });
+
+  const [selectedValue, setSelectedValue] = useControllableState<string | null>(
+    {
+      prop: value,
+      defaultProp: defaultValue ?? null,
+      onChange: onValueChange,
+    },
+  );
+
+  const { isGrouped, groups, flatItems } = useOptionListItems<TMeta>({ items });
+
+  return (
+    <DisabledProvider value={{ disabled }}>
+      <OptionListProvider
+        value={{
+          selectedValue,
+          onValueChange: setSelectedValue,
+          isGrouped,
+          groups,
+          flatItems,
+        }}
+      >
+        {children}
+      </OptionListProvider>
+    </DisabledProvider>
+  );
+};
+
+export const OptionListContent = <TMeta extends MetaShape = MetaShape>({
+  renderItem,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListContentProps<TMeta>) => {
+  const { selectedValue, isGrouped, groups, flatItems } = useOptionListContext({
+    consumerName: 'OptionListContent',
+    contextRequired: true,
+  });
+
+  const renderItemWithState = (item: OptionListItemData) =>
+    renderItem(item as OptionListItemData<TMeta>, selectedValue === item.value);
+
+  if (isGrouped) {
+    return (
+      <Box lx={lx} style={style} ref={ref} {...props}>
+        {groups.map((group, groupIndex) => (
+          <Fragment key={group.label}>
+            {groupIndex > 0 && (
+              <Divider lx={{ marginVertical: 's4', marginHorizontal: 's8' }} />
+            )}
+            {group.label && <OptionListLabel>{group.label}</OptionListLabel>}
+            {group.items.map((item) => (
+              <Fragment key={item.value}>{renderItemWithState(item)}</Fragment>
+            ))}
+          </Fragment>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box lx={lx} style={style} ref={ref} {...props}>
+      {flatItems.map((item) => (
+        <Fragment key={item.value}>{renderItemWithState(item)}</Fragment>
+      ))}
+    </Box>
+  );
+};
+
+const useItemStyles = ({
+  disabled,
+  pressed,
+}: {
+  disabled: boolean;
+  pressed: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: t.sizes.s40,
+        padding: t.spacings.s8,
+        gap: t.spacings.s12,
+        borderRadius: t.borderRadius.md,
+        backgroundColor: pressed
+          ? t.colors.bg.baseTransparentPressed
+          : t.colors.bg.baseTransparent,
+        opacity: disabled ? 0.5 : 1,
+      },
+    }),
+    [disabled, pressed],
+  );
+};
+
+export const OptionListItem = ({
+  value,
+  disabled: disabledProp = false,
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListItemProps) => {
+  const { selectedValue, onValueChange } = useOptionListContext({
+    consumerName: 'OptionListItem',
+    contextRequired: true,
+  });
+  const disabled = useDisabledContext({
+    consumerName: 'OptionListItem',
+    mergeWith: { disabled: disabledProp },
+  });
+  const selected = selectedValue === value;
+
+  return (
+    <DisabledProvider value={{ disabled }}>
+      <Pressable
+        ref={ref}
+        lx={lx}
+        style={style}
+        onPress={() => onValueChange(value)}
+        disabled={disabled}
+        accessibilityRole='radio'
+        accessibilityState={{ disabled, selected }}
+        {...props}
+      >
+        {({ pressed }) => (
+          <OptionListItemInner pressed={pressed} selected={selected}>
+            {children}
+          </OptionListItemInner>
+        )}
+      </Pressable>
+    </DisabledProvider>
+  );
+};
+
+const OptionListItemInner = ({
+  pressed,
+  selected,
+  children,
+}: {
+  pressed: boolean;
+  selected: boolean;
+  children: ReactNode;
+}) => {
+  const disabled = useDisabledContext({
+    consumerName: 'OptionListItemInner',
+    contextRequired: false,
+  });
+  const styles = useItemStyles({ disabled, pressed });
+
+  return (
+    <View style={styles.container}>
+      {children}
+      {selected && <Check size={24} color='active' />}
+    </View>
+  );
+};
+
+export const OptionListItemText = ({
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListItemTextProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'OptionListItemText',
+    contextRequired: false,
+  });
+
+  const styles = useStyleSheet(
+    (t) => ({
+      text: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
+        },
+      ]),
+    }),
+    [disabled],
+  );
+
+  return (
+    <Text
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.text, style])}
+      numberOfLines={1}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export const OptionListItemDescription = ({
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListItemDescriptionProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'OptionListItemDescription',
+    contextRequired: false,
+  });
+
+  const styles = useStyleSheet(
+    (t) => ({
+      description: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          color: disabled ? t.colors.text.disabled : t.colors.text.muted,
+        },
+      ]),
+    }),
+    [disabled],
+  );
+
+  return (
+    <Text
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.description, style])}
+      numberOfLines={1}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export const OptionListItemContent = ({
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListItemContentProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      content: {
+        flex: 1,
+        minWidth: 0,
+        gap: t.spacings.s4,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.content, style])}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const OptionListItemContentRow = ({
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListItemContentRowProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: 0,
+        gap: t.spacings.s8,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.row, style])}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const OptionListItemLeading = ({
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListItemLeadingProps) => {
+  const styles = useStyleSheet(
+    () => ({
+      leading: {
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.leading, style])}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
+
+const OptionListLabel = ({ children }: OptionListLabelProps) => (
+  <Text
+    lx={{
+      color: 'muted',
+      paddingHorizontal: 's8',
+      paddingTop: 's8',
+      marginBottom: 's4',
+    }}
+  >
+    {children}
+  </Text>
+);
+
+export const OptionListEmptyState = ({
+  title,
+  description,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListEmptyStateProps) => {
+  const { flatItems } = useOptionListContext({
+    consumerName: 'OptionListEmptyState',
+    contextRequired: true,
+  });
+
+  const styles = useStyleSheet(
+    (t) => ({
+      container: {
+        width: '100%',
+        alignItems: 'center',
+        gap: t.spacings.s8,
+        paddingVertical: t.spacings.s24,
+      },
+      title: StyleSheet.flatten([
+        t.typographies.heading4SemiBold,
+        { color: t.colors.text.base },
+      ]),
+      description: StyleSheet.flatten([
+        t.typographies.body2,
+        { color: t.colors.text.muted },
+      ]),
+    }),
+    [],
+  );
+
+  if (flatItems.length > 0) return null;
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.container, style])}
+      {...props}
+    >
+      <Text style={styles.title}>{title}</Text>
+      {description && <Text style={styles.description}>{description}</Text>}
+    </Box>
+  );
+};
+
+const useTriggerStyles = ({
+  disabled,
+  hasValue,
+  hasLabel,
+}: {
+  disabled: boolean;
+  hasValue: boolean;
+  hasLabel: boolean;
+}) =>
+  useStyleSheet(
+    (t) => ({
+      trigger: StyleSheet.flatten([
+        {
+          position: 'relative',
+          width: t.sizes.full,
+          height: t.sizes.s48,
+          backgroundColor: t.colors.bg.muted,
+          borderRadius: t.borderRadius.sm,
+          paddingHorizontal: t.spacings.s16,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        },
+        disabled && { opacity: 0.5 },
+      ]),
+      label: StyleSheet.flatten([
+        t.typographies.body2,
+        {
+          position: 'absolute',
+          left: t.spacings.s16,
+          color: t.colors.text.muted,
+          width: '100%',
+        },
+        hasValue
+          ? { top: t.spacings.s6, ...t.typographies.body4 }
+          : { top: t.spacings.s14, ...t.typographies.body2 },
+        disabled && { color: t.colors.text.disabled },
+      ]),
+      contentWrapper: StyleSheet.flatten([
+        { flex: 1 },
+        hasLabel &&
+          hasValue && {
+            paddingTop: t.spacings.s16,
+            paddingBottom: t.spacings.s2,
+          },
+        hasLabel && !hasValue && { paddingVertical: 0 },
+      ]),
+      chevron: StyleSheet.flatten([
+        {
+          flexShrink: 0,
+          color: t.colors.text.muted,
+          marginLeft: t.spacings.s8,
+        },
+        disabled && { color: t.colors.text.disabled },
+      ]),
+    }),
+    [disabled, hasValue, hasLabel],
+  );
+
+export const OptionListTrigger = ({
+  label,
+  onPress,
+  disabled: disabledProp,
+  children,
+  lx,
+  style,
+  ref,
+  ...props
+}: OptionListTriggerProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'OptionListTrigger',
+    mergeWith: { disabled: disabledProp },
+  });
+
+  const hasValue = children != null && children !== false;
+  const styles = useTriggerStyles({
+    disabled,
+    hasValue,
+    hasLabel: !!label,
+  });
+
+  return (
+    <Pressable
+      ref={ref}
+      lx={lx}
+      style={[styles.trigger, style]}
+      disabled={disabled}
+      onPress={onPress}
+      accessibilityRole='button'
+      {...props}
+    >
+      {label && (
+        <Text style={styles.label} numberOfLines={1}>
+          {label}
+        </Text>
+      )}
+      <View style={styles.contentWrapper}>{children}</View>
+      <ChevronDown size={20} style={styles.chevron} />
+    </Pressable>
+  );
+};

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

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

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

@@ -0,0 +1,115 @@
+import { ReactNode } from 'react';
+import {
+  StyledPressableProps,
+  StyledTextProps,
+  StyledViewProps,
+} from '../../../styles';
+
+export type MetaShape = Record<string, unknown>;
+
+export type OptionListItemData<TMeta extends MetaShape = MetaShape> = {
+  /** Unique string identifier for this item, used for selection tracking. */
+  value: string;
+  /** Display text. */
+  label: string;
+  /** Secondary text displayed below the label inside the item. */
+  description?: string;
+  /** When true, the item cannot be selected or focused. */
+  disabled?: boolean;
+  /**
+   * Optional group name. Items sharing the same `group` value are grouped together
+   * with automatic headers and separators.
+   * Groups are ordered by first occurrence in the `items` array.
+   */
+  group?: string;
+  /**
+   * Arbitrary data attached to this item.
+   * Use it to carry extra fields (icons, tickers, IDs, etc.)
+   * that your render function needs.
+   */
+  meta?: TMeta;
+};
+
+/** Internal type -- used by sub-components to read shared state from context. */
+export type OptionListContextValue = {
+  selectedValue: string | null;
+  onValueChange: (value: string | null) => void;
+  isGrouped: boolean;
+  groups: OptionListItemGroup[];
+  flatItems: OptionListItemData[];
+};
+
+/** Internal type -- consumers never construct this directly. */
+export type OptionListItemGroup<TMeta extends MetaShape = MetaShape> = {
+  label: string;
+  items: OptionListItemData<TMeta>[];
+};
+
+export type OptionListProps<TMeta extends MetaShape = MetaShape> = {
+  /** Flat array of items. Use the `group` field on each item for automatic grouping. */
+  items: OptionListItemData<TMeta>[];
+  /** The controlled selected value. */
+  value?: string | null;
+  /** The default selected value (uncontrolled). */
+  defaultValue?: string | null;
+  /** Called when the selected value changes. */
+  onValueChange?: (value: string | null) => void;
+  /** When true, prevents interaction with the entire list. */
+  disabled?: boolean;
+  children: ReactNode;
+};
+
+export type OptionListContentProps<TMeta extends MetaShape = MetaShape> = {
+  /** Render function called for each item. Receives the item data and selection/disabled state. */
+  renderItem: (item: OptionListItemData<TMeta>, selected: boolean) => ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type OptionListItemProps = {
+  /** The value associated with this item, used for selection matching. */
+  value: string;
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+  children: ReactNode;
+} & Omit<StyledPressableProps, 'children' | 'disabled'>;
+
+export type OptionListItemTextProps = {
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type OptionListItemDescriptionProps = {
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type OptionListItemContentRowProps = {
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type OptionListItemContentProps = {
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type OptionListItemLeadingProps = {
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type OptionListLabelProps = {
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type OptionListEmptyStateProps = {
+  /** Heading displayed when the list is empty. */
+  title: string;
+  /** Optional secondary text displayed below the title. */
+  description?: string;
+} & Omit<StyledViewProps, 'children'>;
+
+export type OptionListTriggerProps = {
+  /** Floating label shown above the selected value. */
+  label?: string;
+  /** Called when the trigger is pressed. Use to open a BottomSheet or navigate. */
+  onPress: () => void;
+  /** Content to display as the selected value. */
+  children?: ReactNode;
+  /** Whether the trigger is disabled. Merges with OptionList disabled context. */
+  disabled?: boolean;
+} & Omit<StyledPressableProps, 'children' | 'disabled' | 'onPress'>;

package/src/lib/Components/OptionList/useOptionList/useOptionListItems.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from '@jest/globals';
+import { renderHook } from '@testing-library/react-native';
+import type { OptionListItemData } from '../types';
+import { useOptionListItems } from './useOptionListItems';
+
+const apple: OptionListItemData = {
+  value: 'apple',
+  label: 'Apple',
+  group: 'Fruits',
+};
+const banana: OptionListItemData = {
+  value: 'banana',
+  label: 'Banana',
+  group: 'Fruits',
+};
+const carrot: OptionListItemData = {
+  value: 'carrot',
+  label: 'Carrot',
+  group: 'Vegetables',
+};
+const spinach: OptionListItemData = {
+  value: 'spinach',
+  label: 'Spinach',
+  group: 'Vegetables',
+};
+
+const btc: OptionListItemData = { value: 'btc', label: 'Bitcoin' };
+const eth: OptionListItemData = { value: 'eth', label: 'Ethereum' };
+
+describe('useOptionListItems', () => {
+  describe('flat items (no group field)', () => {
+    it('returns isGrouped false and flatItems as-is', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [btc, eth] }),
+      );
+
+      expect(result.current.isGrouped).toBe(false);
+      expect(result.current.flatItems).toEqual([btc, eth]);
+      expect(result.current.groups).toEqual([]);
+    });
+
+    it('returns empty flatItems for empty array', () => {
+      const { result } = renderHook(() => useOptionListItems({ items: [] }));
+
+      expect(result.current.isGrouped).toBe(false);
+      expect(result.current.flatItems).toEqual([]);
+    });
+  });
+
+  describe('grouped items (group field present)', () => {
+    it('detects groups and builds OptionListItemGroup[]', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [apple, banana, carrot, spinach] }),
+      );
+
+      expect(result.current.isGrouped).toBe(true);
+      expect(result.current.flatItems).toEqual([]);
+      expect(result.current.groups).toEqual([
+        { label: 'Fruits', items: [apple, banana] },
+        { label: 'Vegetables', items: [carrot, spinach] },
+      ]);
+    });
+
+    it('preserves group order by first occurrence', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [carrot, apple, spinach, banana] }),
+      );
+
+      expect(result.current.groups[0].label).toBe('Vegetables');
+      expect(result.current.groups[1].label).toBe('Fruits');
+    });
+  });
+});