@sudobility/components-rn 1.0.1

package/src/ui/TransferList/TransferList.tsx

@@ -0,0 +1,339 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import { View, Text, TextInput, Pressable, ScrollView } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TransferListItem {
+  /** Item ID */
+  id: string;
+  /** Item label */
+  label: string;
+  /** Optional description */
+  description?: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface TransferListProps {
+  /** Available items */
+  source: TransferListItem[];
+  /** Selected items */
+  target: TransferListItem[];
+  /** Change handler */
+  onChange: (source: TransferListItem[], target: TransferListItem[]) => void;
+  /** Source list title */
+  sourceTitle?: string;
+  /** Target list title */
+  targetTitle?: string;
+  /** Enable search */
+  searchable?: boolean;
+  /** Source search placeholder */
+  sourceSearchPlaceholder?: string;
+  /** Target search placeholder */
+  targetSearchPlaceholder?: string;
+  /** List height */
+  height?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TransferList Component
+ *
+ * Dual-list component for moving items between available and selected.
+ * Supports search, bulk operations, and individual item transfer.
+ *
+ * @example
+ * ```tsx
+ * <TransferList
+ *   source={availableUsers}
+ *   target={selectedUsers}
+ *   onChange={(source, target) => {
+ *     setAvailableUsers(source);
+ *     setSelectedUsers(target);
+ *   }}
+ *   sourceTitle="Available Users"
+ *   targetTitle="Selected Users"
+ *   searchable
+ * />
+ * ```
+ */
+export const TransferList: React.FC<TransferListProps> = ({
+  source,
+  target,
+  onChange,
+  sourceTitle = 'Available',
+  targetTitle = 'Selected',
+  searchable = true,
+  sourceSearchPlaceholder = 'Search available...',
+  targetSearchPlaceholder = 'Search selected...',
+  height = 300,
+  disabled = false,
+  className,
+}) => {
+  const [sourceSearch, setSourceSearch] = useState('');
+  const [targetSearch, setTargetSearch] = useState('');
+  const [sourceSelected, setSourceSelected] = useState<Set<string>>(new Set());
+  const [targetSelected, setTargetSelected] = useState<Set<string>>(new Set());
+
+  // Filter items based on search
+  const filteredSource = searchable
+    ? source.filter(item =>
+        item.label.toLowerCase().includes(sourceSearch.toLowerCase())
+      )
+    : source;
+
+  const filteredTarget = searchable
+    ? target.filter(item =>
+        item.label.toLowerCase().includes(targetSearch.toLowerCase())
+      )
+    : target;
+
+  // Toggle item selection
+  const toggleSourceSelection = useCallback((id: string) => {
+    setSourceSelected(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const toggleTargetSelection = useCallback((id: string) => {
+    setTargetSelected(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Move selected items to target
+  const moveToTarget = useCallback(() => {
+    const itemsToMove = source.filter(item => sourceSelected.has(item.id));
+    const newSource = source.filter(item => !sourceSelected.has(item.id));
+    const newTarget = [...target, ...itemsToMove];
+    onChange(newSource, newTarget);
+    setSourceSelected(new Set());
+  }, [source, target, sourceSelected, onChange]);
+
+  // Move selected items to source
+  const moveToSource = useCallback(() => {
+    const itemsToMove = target.filter(item => targetSelected.has(item.id));
+    const newTarget = target.filter(item => !targetSelected.has(item.id));
+    const newSource = [...source, ...itemsToMove];
+    onChange(newSource, newTarget);
+    setTargetSelected(new Set());
+  }, [source, target, targetSelected, onChange]);
+
+  // Move all items
+  const moveAllToTarget = useCallback(() => {
+    onChange([], [...target, ...source]);
+    setSourceSelected(new Set());
+  }, [source, target, onChange]);
+
+  const moveAllToSource = useCallback(() => {
+    onChange([...source, ...target], []);
+    setTargetSelected(new Set());
+  }, [source, target, onChange]);
+
+  // Render list panel
+  const renderList = (
+    items: TransferListItem[],
+    title: string,
+    selected: Set<string>,
+    onToggle: (id: string) => void,
+    searchValue: string,
+    onSearchChange: (value: string) => void,
+    searchPlaceholder: string
+  ) => (
+    <View className='flex-1 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900'>
+      {/* Header */}
+      <View className='px-3 py-2 border-b border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-800'>
+        <Text className='text-sm font-semibold text-gray-900 dark:text-white'>
+          {title}
+        </Text>
+        <Text className='text-xs text-gray-600 dark:text-gray-400'>
+          {items.length} item{items.length !== 1 ? 's' : ''}
+        </Text>
+      </View>
+
+      {/* Search */}
+      {searchable && (
+        <View className='p-2 border-b border-gray-200 dark:border-gray-700'>
+          <TextInput
+            value={searchValue}
+            onChangeText={onSearchChange}
+            placeholder={searchPlaceholder}
+            placeholderTextColor='#9ca3af'
+            className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-700 rounded-md'
+          />
+        </View>
+      )}
+
+      {/* List */}
+      <ScrollView style={{ height: searchable ? height - 120 : height - 60 }}>
+        {items.length === 0 ? (
+          <View className='flex-1 items-center justify-center py-8'>
+            <Text className='text-sm text-gray-500 dark:text-gray-400'>
+              No items
+            </Text>
+          </View>
+        ) : (
+          items.map(item => {
+            const isSelected = selected.has(item.id);
+
+            return (
+              <Pressable
+                key={item.id}
+                onPress={() => !item.disabled && !disabled && onToggle(item.id)}
+                disabled={item.disabled || disabled}
+                className={cn(
+                  'mx-2 my-1 px-3 py-2 rounded-md',
+                  'active:bg-gray-100 dark:active:bg-gray-800',
+                  (item.disabled || disabled) && 'opacity-50',
+                  isSelected &&
+                    'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700'
+                )}
+                accessibilityRole='checkbox'
+                accessibilityState={{
+                  checked: isSelected,
+                  disabled: item.disabled || disabled,
+                }}
+              >
+                <View className='flex-row items-start gap-2'>
+                  {/* Checkbox */}
+                  <View
+                    className={cn(
+                      'w-4 h-4 border-2 rounded items-center justify-center mt-0.5',
+                      isSelected
+                        ? 'bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500'
+                        : 'border-gray-300 dark:border-gray-600'
+                    )}
+                  >
+                    {isSelected && (
+                      <Text className='text-white text-xs'>✓</Text>
+                    )}
+                  </View>
+
+                  {/* Content */}
+                  <View className='flex-1'>
+                    <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+                      {item.label}
+                    </Text>
+                    {item.description && (
+                      <Text className='text-xs text-gray-600 dark:text-gray-400'>
+                        {item.description}
+                      </Text>
+                    )}
+                  </View>
+                </View>
+              </Pressable>
+            );
+          })
+        )}
+      </ScrollView>
+    </View>
+  );
+
+  return (
+    <View className={cn('flex-row gap-4', className)}>
+      {/* Source list */}
+      {renderList(
+        filteredSource,
+        sourceTitle,
+        sourceSelected,
+        toggleSourceSelection,
+        sourceSearch,
+        setSourceSearch,
+        sourceSearchPlaceholder
+      )}
+
+      {/* Transfer buttons */}
+      <View className='justify-center gap-2'>
+        <Pressable
+          onPress={moveAllToTarget}
+          disabled={disabled || source.length === 0}
+          className={cn(
+            'px-3 py-2 bg-white dark:bg-gray-900',
+            'border border-gray-300 dark:border-gray-700',
+            'rounded-md',
+            'active:bg-gray-50 dark:active:bg-gray-800',
+            (disabled || source.length === 0) && 'opacity-50'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel='Move all to selected'
+        >
+          <Text className='text-gray-700 dark:text-gray-300'>»</Text>
+        </Pressable>
+
+        <Pressable
+          onPress={moveToTarget}
+          disabled={disabled || sourceSelected.size === 0}
+          className={cn(
+            'px-3 py-2 bg-white dark:bg-gray-900',
+            'border border-gray-300 dark:border-gray-700',
+            'rounded-md',
+            'active:bg-gray-50 dark:active:bg-gray-800',
+            (disabled || sourceSelected.size === 0) && 'opacity-50'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel='Move selected to target'
+        >
+          <Text className='text-gray-700 dark:text-gray-300'>›</Text>
+        </Pressable>
+
+        <Pressable
+          onPress={moveToSource}
+          disabled={disabled || targetSelected.size === 0}
+          className={cn(
+            'px-3 py-2 bg-white dark:bg-gray-900',
+            'border border-gray-300 dark:border-gray-700',
+            'rounded-md',
+            'active:bg-gray-50 dark:active:bg-gray-800',
+            (disabled || targetSelected.size === 0) && 'opacity-50'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel='Move selected to source'
+        >
+          <Text className='text-gray-700 dark:text-gray-300'>‹</Text>
+        </Pressable>
+
+        <Pressable
+          onPress={moveAllToSource}
+          disabled={disabled || target.length === 0}
+          className={cn(
+            'px-3 py-2 bg-white dark:bg-gray-900',
+            'border border-gray-300 dark:border-gray-700',
+            'rounded-md',
+            'active:bg-gray-50 dark:active:bg-gray-800',
+            (disabled || target.length === 0) && 'opacity-50'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel='Move all to available'
+        >
+          <Text className='text-gray-700 dark:text-gray-300'>«</Text>
+        </Pressable>
+      </View>
+
+      {/* Target list */}
+      {renderList(
+        filteredTarget,
+        targetTitle,
+        targetSelected,
+        toggleTargetSelection,
+        targetSearch,
+        setTargetSearch,
+        targetSearchPlaceholder
+      )}
+    </View>
+  );
+};

package/src/ui/TransferList/index.ts

@@ -0,0 +1,2 @@
+export { TransferList } from './TransferList';
+export type { TransferListProps, TransferListItem } from './TransferList';

package/src/ui/TreeView/TreeView.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TreeNode {
+  /** Node ID */
+  id: string;
+  /** Node label */
+  label: string;
+  /** Node icon */
+  icon?: React.ReactNode;
+  /** Child nodes */
+  children?: TreeNode[];
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface TreeViewProps {
+  /** Tree data */
+  data: TreeNode[];
+  /** Selected node ID */
+  selectedId?: string;
+  /** Selection handler */
+  onSelect?: (node: TreeNode) => void;
+  /** Expanded node IDs */
+  expandedIds?: string[];
+  /** Expand handler */
+  onExpand?: (nodeId: string) => void;
+  /** Default expanded */
+  defaultExpanded?: boolean;
+  /** Show lines */
+  showLines?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TreeView Component
+ *
+ * Hierarchical tree view with expand/collapse.
+ * Supports selection, custom icons, and indentation lines.
+ *
+ * @example
+ * ```tsx
+ * <TreeView
+ *   data={fileTree}
+ *   selectedId={selectedNode}
+ *   onSelect={handleSelect}
+ *   showLines
+ * />
+ * ```
+ */
+export const TreeView: React.FC<TreeViewProps> = ({
+  data,
+  selectedId,
+  onSelect,
+  expandedIds: controlledExpandedIds,
+  onExpand,
+  defaultExpanded = false,
+  showLines = false,
+  className,
+}) => {
+  const [internalExpandedIds, setInternalExpandedIds] = useState<Set<string>>(
+    new Set(defaultExpanded ? data.map(node => node.id) : [])
+  );
+
+  const expandedIds =
+    controlledExpandedIds !== undefined
+      ? new Set(controlledExpandedIds)
+      : internalExpandedIds;
+
+  const toggleExpand = useCallback(
+    (nodeId: string) => {
+      if (controlledExpandedIds !== undefined && onExpand) {
+        onExpand(nodeId);
+      } else {
+        setInternalExpandedIds(prev => {
+          const newSet = new Set(prev);
+          if (newSet.has(nodeId)) {
+            newSet.delete(nodeId);
+          } else {
+            newSet.add(nodeId);
+          }
+          return newSet;
+        });
+      }
+    },
+    [controlledExpandedIds, onExpand]
+  );
+
+  const handleSelect = useCallback(
+    (node: TreeNode) => {
+      if (!node.disabled && onSelect) {
+        onSelect(node);
+      }
+    },
+    [onSelect]
+  );
+
+  const renderNode = (node: TreeNode, level: number = 0) => {
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpanded = expandedIds.has(node.id);
+    const isSelected = selectedId === node.id;
+
+    return (
+      <View key={node.id}>
+        {/* Node item */}
+        <Pressable
+          onPress={() => handleSelect(node)}
+          disabled={node.disabled}
+          className={cn(
+            'flex-row items-center gap-2 px-2 py-1.5 rounded-md',
+            !node.disabled && 'active:bg-gray-100 dark:active:bg-gray-800',
+            isSelected && 'bg-blue-50 dark:bg-blue-900/30',
+            node.disabled && 'opacity-50'
+          )}
+          style={{ paddingLeft: level * 24 + 8 }}
+          accessibilityRole='button'
+          accessibilityState={{ selected: isSelected, disabled: node.disabled }}
+        >
+          {/* Expand/collapse button */}
+          {hasChildren ? (
+            <Pressable
+              onPress={() => toggleExpand(node.id)}
+              className='w-4 h-4 items-center justify-center active:bg-gray-200 dark:active:bg-gray-700 rounded'
+              hitSlop={8}
+              accessibilityRole='button'
+              accessibilityLabel={isExpanded ? 'Collapse' : 'Expand'}
+            >
+              <Text
+                className={cn(
+                  'text-xs text-gray-600 dark:text-gray-400',
+                  isExpanded && 'rotate-90'
+                )}
+              >
+                ▶
+              </Text>
+            </Pressable>
+          ) : (
+            <View className='w-4 h-4' />
+          )}
+
+          {/* Icon */}
+          {node.icon && (
+            <View className='w-4 h-4 flex-shrink-0'>{node.icon}</View>
+          )}
+
+          {/* Label */}
+          <Text
+            className={cn(
+              'flex-1 text-sm',
+              isSelected
+                ? 'text-blue-700 dark:text-blue-300 font-medium'
+                : 'text-gray-900 dark:text-white'
+            )}
+          >
+            {node.label}
+          </Text>
+        </Pressable>
+
+        {/* Children */}
+        {hasChildren && isExpanded && (
+          <View
+            className={cn(
+              showLines &&
+                'border-l-2 border-gray-200 dark:border-gray-700 ml-2'
+            )}
+          >
+            {node.children!.map(child => renderNode(child, level + 1))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View className={cn('w-full', className)}>
+      {data.map(node => renderNode(node, 0))}
+    </View>
+  );
+};

package/src/ui/TreeView/index.ts

@@ -0,0 +1,2 @@
+export { TreeView } from './TreeView';
+export type { TreeViewProps, TreeNode } from './TreeView';

package/src/ui/TruncatedText/TruncatedText.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TruncatedTextProps {
+  /** Text content to truncate */
+  children: string;
+  /** Maximum length before truncation */
+  maxLength?: number;
+  /** Position of truncation */
+  position?: 'end' | 'middle' | 'start';
+  /** Custom ellipsis character */
+  ellipsis?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TruncatedText Component
+ *
+ * Intelligently truncates text with ellipsis at various positions.
+ * Useful for displaying long text like addresses, IDs, or descriptions.
+ *
+ * @example
+ * ```tsx
+ * <TruncatedText maxLength={50}>
+ *   This is a very long text that will be truncated...
+ * </TruncatedText>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <TruncatedText
+ *   maxLength={20}
+ *   position="middle"
+ * >
+ *   0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
+ * </TruncatedText>
+ * ```
+ */
+export const TruncatedText: React.FC<TruncatedTextProps> = ({
+  children,
+  maxLength = 50,
+  position = 'end',
+  ellipsis = '...',
+  className,
+}) => {
+  const text = children || '';
+
+  // No truncation needed
+  if (text.length <= maxLength) {
+    return <Text className={className}>{text}</Text>;
+  }
+
+  // Calculate truncated text based on position
+  const getTruncatedText = (): string => {
+    const ellipsisLength = ellipsis.length;
+    const availableLength = maxLength - ellipsisLength;
+
+    switch (position) {
+      case 'start':
+        return ellipsis + text.slice(text.length - availableLength);
+
+      case 'middle': {
+        const halfLength = Math.floor(availableLength / 2);
+        const start = text.slice(0, halfLength);
+        const end = text.slice(text.length - (availableLength - halfLength));
+        return start + ellipsis + end;
+      }
+
+      case 'end':
+      default:
+        return text.slice(0, availableLength) + ellipsis;
+    }
+  };
+
+  const truncatedText = getTruncatedText();
+
+  return <Text className={cn(className)}>{truncatedText}</Text>;
+};

package/src/ui/TruncatedText/index.ts

@@ -0,0 +1,2 @@
+export { TruncatedText } from './TruncatedText';
+export type { TruncatedTextProps } from './TruncatedText';