@ledgerhq/lumen-ui-rnative 0.0.42

package/src/lib/Components/Select/Select.tsx

@@ -0,0 +1,393 @@
+import { cn } from '@ledgerhq/lumen-utils-shared';
+import React, { useState, useEffect, useCallback, useId } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { ChevronDown } from '../../Symbols';
+import { useControllableState, extractTextFromChildren } from '../../utils';
+import { SlotPressable } from '../Slot';
+import { useSelectActions } from './GlobalSelectContext';
+import { SelectContextProvider, useSelectSafeContext } from './SelectContext';
+import type {
+  SelectProps,
+  SelectTriggerProps,
+  SelectContentProps,
+  SelectGroupProps,
+  SelectLabelProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectSeparatorProps,
+  SelectContentItem,
+} from './types';
+
+const triggerStyles = cn(
+  'group relative h-48 bg-muted rounded-sm px-16 flex-row items-center justify-between',
+);
+
+/**
+ * The root component that manages a select's state.
+ *
+ * This component coordinates between the trigger, content, and items.
+ * It works with GlobalSelectProvider to display options in a bottom sheet.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/components-select-overview--docs Storybook}
+ *
+ * @example
+ * import { Select, SelectTrigger, SelectContent, SelectItem, SelectItemText } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * function App() {
+ *   const [value, setValue] = useState('option1');
+ *   return (
+ *     <Select value={value} onValueChange={setValue}>
+ *       <SelectTrigger label="Choose option">
+ *         <SelectValue />
+ *       </SelectTrigger>
+ *       <SelectContent>
+ *         <SelectItem value="option1">
+ *           <SelectItemText>Option 1</SelectItemText>
+ *         </SelectItem>
+ *         <SelectItem value="option2">
+ *           <SelectItemText>Option 2</SelectItemText>
+ *         </SelectItem>
+ *       </SelectContent>
+ *     </Select>
+ *   );
+ * }
+ */
+export const Select: React.FC<SelectProps> = ({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+}) => {
+  const selectId = useId();
+
+  const [internalOpen, setInternalOpen] = useControllableState({
+    prop: controlledOpen,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const [internalValue, setInternalValue] = useControllableState<
+    SelectProps['value']
+  >({
+    prop: controlledValue,
+    defaultProp: defaultValue ?? undefined,
+    onChange: (value: SelectProps['value']) => {
+      if (value !== undefined) {
+        onValueChange?.(value);
+      }
+    },
+  });
+
+  const [items, setItems] = useState<SelectContentItem[]>([]);
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!disabled) {
+        setInternalOpen?.(newOpen);
+      }
+    },
+    [setInternalOpen, disabled],
+  );
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      setInternalValue?.(newValue);
+    },
+    [setInternalValue],
+  );
+
+  return (
+    <SelectContextProvider
+      selectId={selectId}
+      open={internalOpen ?? false}
+      setOpen={setOpen}
+      value={internalValue}
+      onValueChange={handleValueChange}
+      disabled={disabled}
+      items={items}
+      setItems={setItems}
+    >
+      {children}
+    </SelectContextProvider>
+  );
+};
+Select.displayName = 'Select';
+
+const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
+
+export const SelectTrigger: React.FC<SelectTriggerProps> = ({
+  children,
+  className,
+  label,
+  labelClassName,
+  asChild = false,
+  disabled: triggerDisabled,
+  ...props
+}) => {
+  const {
+    selectId,
+    setOpen,
+    items,
+    value,
+    disabled: contextDisabled,
+    label: contextLabel,
+    onValueChange,
+  } = useSelectSafeContext({
+    consumerName: 'SelectTrigger',
+    contextRequired: true,
+  });
+
+  const { showSelect } = useSelectActions();
+  const disabled = triggerDisabled ?? contextDisabled;
+  const finalLabel = label ?? contextLabel;
+
+  const handlePress = useCallback((): void => {
+    if (!disabled && items.length > 0) {
+      setOpen(true);
+      showSelect({
+        id: selectId,
+        items,
+        selectedValue: value,
+        onSelectValue: onValueChange,
+        setOpen,
+        label: finalLabel,
+      });
+    }
+  }, [
+    disabled,
+    items,
+    selectId,
+    value,
+    setOpen,
+    showSelect,
+    finalLabel,
+    onValueChange,
+  ]);
+
+  const hasValue = value !== undefined && value !== '';
+  const isFloatingLabel = hasValue;
+
+  const labelFontSize = useSharedValue(hasValue ? 10 : 14);
+  const labelTop = useSharedValue(hasValue ? 10 : 16);
+
+  const animatedLabelStyle = useAnimatedStyle(
+    () => ({
+      fontSize: labelFontSize.value,
+      top: labelTop.value,
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
+      duration: 200,
+    });
+    labelTop.value = withTiming(isFloatingLabel ? 10 : 16, {
+      duration: 200,
+    });
+  }, [isFloatingLabel, labelFontSize, labelTop]);
+
+  const Comp = asChild ? SlotPressable : Pressable;
+
+  return (
+    <Comp
+      disabled={disabled}
+      onPress={handlePress}
+      className={cn(triggerStyles, disabled && 'opacity-50', className)}
+      {...props}
+    >
+      {finalLabel && (
+        <AnimatedLabel
+          className={cn(
+            'absolute left-16 text-muted w-full',
+            disabled && 'text-disabled',
+            labelClassName,
+          )}
+          style={animatedLabelStyle}
+          numberOfLines={1}
+        >
+          {finalLabel}
+        </AnimatedLabel>
+      )}
+      <View
+        className={cn(
+          'flex-1',
+          finalLabel && hasValue && 'pt-16 pb-2',
+          finalLabel && !hasValue && 'py-0',
+        )}
+      >
+        {children}
+      </View>
+      <ChevronDown
+        size={20}
+        className={cn('text-muted ml-8', disabled && 'text-disabled')}
+      />
+    </Comp>
+  );
+};
+SelectTrigger.displayName = 'SelectTrigger';
+
+/**
+ * Displays the current selected value
+ */
+export const SelectValue: React.FC<{
+  className?: string;
+}> = ({ className }) => {
+  const { value, items } = useSelectSafeContext({
+    consumerName: 'SelectValue',
+    contextRequired: true,
+  });
+
+  const selectedItem = items.find(
+    (item) => item.type === 'item' && item.value === value,
+  );
+
+  if (!selectedItem || selectedItem.type !== 'item') {
+    return null;
+  }
+
+  return (
+    <Text
+      className={cn('truncate text-left text-base body-2', className)}
+      numberOfLines={1}
+    >
+      {selectedItem.label}
+    </Text>
+  );
+};
+SelectValue.displayName = 'SelectValue';
+
+/**
+ * Container for select items. This component collects all items
+ * and makes them available to the bottom sheet.
+ */
+export const SelectContent: React.FC<SelectContentProps> = ({ children }) => {
+  const { setItems } = useSelectSafeContext({
+    consumerName: 'SelectContent',
+    contextRequired: true,
+  });
+
+  useEffect(() => {
+    const items: SelectContentItem[] = [];
+
+    const extractItems = (child: React.ReactNode): void => {
+      React.Children.forEach(child, (element) => {
+        if (!React.isValidElement(element)) return;
+
+        if (element.type === SelectItem) {
+          const props = element.props as SelectItemProps;
+          const textValue =
+            props.textValue ??
+            extractTextFromChildren(props.children, SelectItemText);
+          items.push({
+            type: 'item',
+            value: props.value,
+            label: textValue,
+            disabled: props.disabled,
+          });
+        } else if (element.type === SelectGroup) {
+          extractItems(element.props.children);
+        } else if (element.type === SelectLabel) {
+          const labelText = extractTextFromChildren(
+            element.props.children,
+            SelectItemText,
+          );
+          items.push({
+            type: 'group-label',
+            label: labelText,
+          });
+        } else if (element.type === SelectSeparator) {
+          items.push({
+            type: 'separator',
+          });
+        } else if (element.props?.children) {
+          extractItems(element.props.children);
+        }
+      });
+    };
+
+    extractItems(children);
+    setItems(items);
+  }, [children, setItems]);
+
+  return null;
+};
+SelectContent.displayName = 'SelectContent';
+
+export const SelectGroup: React.FC<SelectGroupProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <View className={cn('flex w-full gap-4', className)} {...props}>
+      {children}
+    </View>
+  );
+};
+SelectGroup.displayName = 'SelectGroup';
+
+export const SelectLabel: React.FC<SelectLabelProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <Text
+      className={cn(
+        'px-8 pb-0 pt-8 text-muted body-3-semi-bold mb-4',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+SelectLabel.displayName = 'SelectLabel';
+
+/**
+ * Individual select item. Note: The actual rendering happens in GlobalSelectBottomSheet.
+ * This component is used to declare the structure and collect item data.
+ */
+export const SelectItem: React.FC<SelectItemProps> = () => {
+  // This component doesn't render anything - it's used for structure
+  // The actual items are rendered in GlobalSelectBottomSheet
+  return null;
+};
+SelectItem.displayName = 'SelectItem';
+
+export const SelectItemText: React.FC<SelectItemTextProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <Text className={cn('text-base body-2', className)} {...props}>
+      {children}
+    </Text>
+  );
+};
+SelectItemText.displayName = 'SelectItemText';
+
+export const SelectSeparator: React.FC<SelectSeparatorProps> = ({
+  className,
+  ...props
+}) => {
+  return (
+    <View
+      className={cn('mx-8 my-4 h-1 bg-muted-subtle', className)}
+      {...props}
+    />
+  );
+};
+SelectSeparator.displayName = 'SelectSeparator';

package/src/lib/Components/Select/SelectContext.tsx

@@ -0,0 +1,68 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import React, { ReactNode } from 'react';
+import { SelectContentItem } from './types';
+
+export type SelectContextValue = {
+  selectId: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+  items: SelectContentItem[];
+  setItems: (items: SelectContentItem[]) => void;
+  label?: string;
+};
+
+const [SelectProvider, _useSelectSafeContext] =
+  createSafeContext<SelectContextValue>('Select');
+
+export const useSelectSafeContext = _useSelectSafeContext;
+
+type SelectContextProviderProps = {
+  selectId: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+  items: SelectContentItem[];
+  setItems: (items: SelectContentItem[]) => void;
+  label?: string;
+  children: ReactNode;
+};
+
+/**
+ * Internal context provider for an individual Select component.
+ * This is used automatically by the Select component.
+ */
+export const SelectContextProvider: React.FC<SelectContextProviderProps> = ({
+  selectId,
+  open,
+  setOpen,
+  value,
+  onValueChange,
+  disabled,
+  items,
+  setItems,
+  label,
+  children,
+}) => {
+  return (
+    <SelectProvider
+      value={{
+        selectId,
+        open,
+        setOpen,
+        value,
+        onValueChange,
+        disabled,
+        items,
+        setItems,
+        label,
+      }}
+    >
+      {children}
+    </SelectProvider>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from './Select';
+export * from './GlobalSelectBottomSheet';
+export * from './types';

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

@@ -0,0 +1,170 @@
+import { ReactNode } from 'react';
+import { PressableProps, ViewProps, TextProps } from 'react-native';
+
+export type SelectProps = {
+  /**
+   * The children of the select (SelectTrigger, SelectContent)
+   */
+  children: ReactNode;
+  /**
+   * The controlled open state of the select.
+   * Must be used in conjunction with onOpenChange.
+   */
+  open?: boolean;
+  /**
+   * The value of the select when initially rendered.
+   * Use when you do not need to control the state of the select.
+   */
+  defaultValue?: string;
+  /**
+   * Event handler called when the open state of the select changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The open state of the select when it is initially rendered.
+   * Use when you do not need to control its open state.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * When true, prevents the user from interacting with select.
+   */
+  disabled?: boolean;
+  /**
+   * The controlled value of the select.
+   * Should be used in conjunction with onValueChange.
+   */
+  value?: string;
+  /**
+   * Event handler called when the value changes.
+   */
+  onValueChange?: (value: string) => void;
+};
+
+export type SelectTriggerProps = {
+  /**
+   * The children to render inside the trigger
+   */
+  children?: ReactNode;
+  /**
+   * Extra class names to apply to the trigger element
+   * @example className='border-error'
+   */
+  className?: string;
+  /**
+   * The label text that floats above the input when focused or filled
+   * @example label='Select an option'
+   */
+  label?: string;
+  /**
+   * Additional class names to apply to the label element
+   * @example labelClassName='text-error'
+   */
+  labelClassName?: string;
+  /**
+   * Change the default rendered element for the one passed as a child,
+   * merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & Omit<PressableProps, 'children' | 'onPress'>;
+
+export type SelectContentProps = {
+  /**
+   * The children of the select content (SelectItem, SelectGroup, etc.)
+   */
+  children: ReactNode;
+};
+
+export type SelectGroupProps = {
+  /**
+   * The children of the select group (SelectLabel, SelectItem)
+   */
+  children: ReactNode;
+} & ViewProps;
+
+export type SelectLabelProps = {
+  /**
+   * The children of the select label
+   * @required
+   */
+  children: ReactNode;
+  /**
+   * Extra class names to apply to the label element
+   */
+  className?: string;
+} & TextProps;
+
+export type SelectItemProps = {
+  /**
+   * The value of the select item
+   * @required
+   */
+  value: string;
+  /**
+   * The children of the select item
+   * @required
+   */
+  children: ReactNode;
+  /**
+   * Optional text used for display. Use this when the content is complex.
+   */
+  textValue?: string;
+  /**
+   * The disabled state of the select item
+   */
+  disabled?: boolean;
+  /**
+   * Extra class names to apply to the item element
+   */
+  className?: string;
+} & Omit<PressableProps, 'children' | 'onPress' | 'disabled'>;
+
+export type SelectItemTextProps = {
+  /**
+   * The children of the select item text
+   * @required
+   */
+  children: ReactNode;
+  /**
+   * Extra class names to apply to the item text element
+   */
+  className?: string;
+} & TextProps;
+
+export type SelectSeparatorProps = {
+  /**
+   * Extra class names to apply to the separator element
+   */
+  className?: string;
+} & ViewProps;
+
+export type SelectItemData = {
+  type: 'item';
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type SelectGroupData = {
+  type: 'group-label';
+  label: string;
+};
+
+export type SelectSeparatorData = {
+  type: 'separator';
+};
+
+export type SelectContentItem =
+  | SelectItemData
+  | SelectGroupData
+  | SelectSeparatorData;
+
+export type SelectData = {
+  id: string;
+  items: SelectContentItem[];
+  selectedValue: string | undefined;
+  onSelectValue: (value: string) => void;
+  setOpen?: (open: boolean) => void;
+  label?: string;
+};