@elvora/react-native 1.0.0-rc.1

package/src/Transfer.tsx

@@ -0,0 +1,219 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Pressable, ScrollView, View, Text, TextInput, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface TransferItem {
+  key: string;
+  label: ReactNode;
+  isDisabled?: boolean;
+}
+
+export interface TransferProps extends Omit<ViewProps, 'onChange'> {
+  dataSource: TransferItem[];
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (targetKeys: string[]) => void;
+  titles?: [ReactNode, ReactNode];
+  showSearch?: boolean;
+  isDisabled?: boolean;
+}
+
+interface ListProps {
+  title: ReactNode;
+  items: TransferItem[];
+  selected: Set<string>;
+  setSelected: (set: Set<string>) => void;
+  showSearch?: boolean;
+  isDisabled?: boolean;
+}
+
+function ColumnList({ title, items, selected, setSelected, showSearch, isDisabled }: ListProps) {
+  const theme = useTheme();
+  const [query, setQuery] = useState('');
+  const filtered = useMemo(() => {
+    if (!query) return items;
+    const q = query.toLowerCase();
+    return items.filter((it) => String(it.label).toLowerCase().includes(q) || it.key.toLowerCase().includes(q));
+  }, [items, query]);
+
+  const toggle = (it: TransferItem) => {
+    if (it.isDisabled || isDisabled) return;
+    const next = new Set(selected);
+    if (next.has(it.key)) next.delete(it.key);
+    else next.add(it.key);
+    setSelected(next);
+  };
+
+  return (
+    <View
+      style={{
+        width: 200,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: Number(theme.radii.md),
+        backgroundColor: theme.colors.surfaceElevated,
+        maxHeight: 320,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 10,
+          paddingVertical: 8,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+        }}
+      >
+        <Text style={{ flex: 1, fontSize: 13, fontWeight: '500', color: theme.colors.fg }}>{title}</Text>
+        <Text style={{ fontSize: 12, color: theme.colors.fgMuted }}>
+          {selected.size}/{items.length}
+        </Text>
+      </View>
+      {showSearch ? (
+        <View style={{ padding: 6, borderBottomWidth: 1, borderBottomColor: theme.colors.border }}>
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Search"
+            placeholderTextColor={theme.colors.fgMuted}
+            editable={!isDisabled}
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 6,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+              borderRadius: Number(theme.radii.sm),
+              fontSize: 13,
+              color: theme.colors.fg,
+            }}
+          />
+        </View>
+      ) : null}
+      <ScrollView>
+        {filtered.map((it) => {
+          const checked = selected.has(it.key);
+          return (
+            <Pressable
+              key={it.key}
+              disabled={it.isDisabled || isDisabled}
+              onPress={() => toggle(it)}
+              style={({ pressed }) => ({
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                paddingVertical: 8,
+                backgroundColor: checked
+                  ? theme.colors.intent.primary.subtle
+                  : pressed
+                    ? theme.colors.intent.neutral.subtle
+                    : 'transparent',
+              })}
+            >
+              <View
+                style={{
+                  width: 16,
+                  height: 16,
+                  borderRadius: Number(theme.radii.sm),
+                  borderWidth: 1,
+                  borderColor: theme.colors.border,
+                  backgroundColor: checked ? theme.colors.intent.primary.solid : 'transparent',
+                  marginRight: 8,
+                }}
+              />
+              <Text style={{ flex: 1, color: it.isDisabled ? theme.colors.fgSubtle : theme.colors.fg, fontSize: 13 }}>
+                {it.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+export function Transfer(props: TransferProps) {
+  const { dataSource, value: valueProp, defaultValue, onChange, titles, showSearch, isDisabled, style, ...rest } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<string[]>(defaultValue ?? []);
+  const targetKeys = valueProp ?? internal;
+  const [leftSelected, setLeftSelected] = useState<Set<string>>(new Set());
+  const [rightSelected, setRightSelected] = useState<Set<string>>(new Set());
+
+  const leftItems = dataSource.filter((it) => !targetKeys.includes(it.key));
+  const rightItems = dataSource.filter((it) => targetKeys.includes(it.key));
+
+  const setTargets = (next: string[]) => {
+    if (valueProp === undefined) setInternal(next);
+    onChange?.(next);
+  };
+
+  const moveRight = () => {
+    const keys = leftItems.filter((it) => leftSelected.has(it.key) && !it.isDisabled).map((it) => it.key);
+    if (keys.length === 0) return;
+    setTargets([...targetKeys, ...keys]);
+    setLeftSelected(new Set());
+  };
+
+  const moveLeft = () => {
+    const keys = new Set(targetKeys);
+    rightItems.forEach((it) => {
+      if (rightSelected.has(it.key) && !it.isDisabled) keys.delete(it.key);
+    });
+    setTargets(Array.from(keys));
+    setRightSelected(new Set());
+  };
+
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'stretch', gap: 12 }, style]} {...rest}>
+      <ColumnList
+        title={titles?.[0] ?? 'Source'}
+        items={leftItems}
+        selected={leftSelected}
+        setSelected={setLeftSelected}
+        showSearch={showSearch}
+        isDisabled={isDisabled}
+      />
+      <View style={{ justifyContent: 'center', gap: 8 }}>
+        <Pressable
+          disabled={isDisabled || leftSelected.size === 0}
+          onPress={moveRight}
+          style={({ pressed }) => ({
+            paddingVertical: 6,
+            paddingHorizontal: 8,
+            borderRadius: Number(theme.radii.sm),
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+            opacity: isDisabled || leftSelected.size === 0 ? 0.4 : 1,
+          })}
+        >
+          <Text style={{ color: theme.colors.fg }}>›</Text>
+        </Pressable>
+        <Pressable
+          disabled={isDisabled || rightSelected.size === 0}
+          onPress={moveLeft}
+          style={({ pressed }) => ({
+            paddingVertical: 6,
+            paddingHorizontal: 8,
+            borderRadius: Number(theme.radii.sm),
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+            opacity: isDisabled || rightSelected.size === 0 ? 0.4 : 1,
+          })}
+        >
+          <Text style={{ color: theme.colors.fg }}>‹</Text>
+        </Pressable>
+      </View>
+      <ColumnList
+        title={titles?.[1] ?? 'Target'}
+        items={rightItems}
+        selected={rightSelected}
+        setSelected={setRightSelected}
+        showSearch={showSearch}
+        isDisabled={isDisabled}
+      />
+    </View>
+  );
+}

package/src/Tree.tsx

@@ -0,0 +1,144 @@
+import { useCallback, useState, type ReactNode } from 'react';
+import { Pressable, ScrollView, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface TreeNode {
+  key: string;
+  label: ReactNode;
+  children?: TreeNode[];
+  isDisabled?: boolean;
+}
+
+export interface TreeProps extends Omit<ViewProps, 'onSelect'> {
+  treeData: TreeNode[];
+  expandedKeys?: string[];
+  defaultExpandedKeys?: string[];
+  onExpand?: (keys: string[]) => void;
+  selectedKeys?: string[];
+  defaultSelectedKeys?: string[];
+  onSelect?: (keys: string[], info: { node: TreeNode }) => void;
+  multiple?: boolean;
+}
+
+interface NodeProps {
+  node: TreeNode;
+  depth: number;
+  expandedKeys: Set<string>;
+  toggleExpand: (key: string) => void;
+  selectedKeys: Set<string>;
+  onClickNode: (node: TreeNode) => void;
+}
+
+function NodeView({ node, depth, expandedKeys, toggleExpand, selectedKeys, onClickNode }: NodeProps) {
+  const theme = useTheme();
+  const hasChildren = !!node.children && node.children.length > 0;
+  const isExpanded = expandedKeys.has(node.key);
+  const isSelected = selectedKeys.has(node.key);
+
+  return (
+    <View>
+      <Pressable
+        disabled={node.isDisabled}
+        onPress={() => {
+          if (node.isDisabled) return;
+          if (hasChildren) toggleExpand(node.key);
+          onClickNode(node);
+        }}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: 6,
+          paddingHorizontal: 8,
+          marginLeft: depth * 16,
+          borderRadius: 6,
+          backgroundColor: isSelected ? theme.colors.intent.primary.subtle : 'transparent',
+        }}
+      >
+        <Text style={{ width: 14, color: theme.colors.fgSubtle, fontSize: 12 }}>
+          {hasChildren ? (isExpanded ? '▾' : '▸') : ' '}
+        </Text>
+        <Text style={{ color: node.isDisabled ? theme.colors.fgSubtle : theme.colors.fg, fontSize: 14 }}>
+          {typeof node.label === 'string' ? node.label : null}
+        </Text>
+      </Pressable>
+      {hasChildren && isExpanded
+        ? node.children!.map((child) => (
+            <NodeView
+              key={child.key}
+              node={child}
+              depth={depth + 1}
+              expandedKeys={expandedKeys}
+              toggleExpand={toggleExpand}
+              selectedKeys={selectedKeys}
+              onClickNode={onClickNode}
+            />
+          ))
+        : null}
+    </View>
+  );
+}
+
+export function Tree(props: TreeProps) {
+  const {
+    treeData,
+    expandedKeys: expandedProp,
+    defaultExpandedKeys,
+    onExpand,
+    selectedKeys: selectedProp,
+    defaultSelectedKeys,
+    onSelect,
+    multiple,
+    style,
+    ...rest
+  } = props;
+  const [expandedInternal, setExpandedInternal] = useState<string[]>(defaultExpandedKeys ?? []);
+  const [selectedInternal, setSelectedInternal] = useState<string[]>(defaultSelectedKeys ?? []);
+
+  const expandedKeys = new Set(expandedProp ?? expandedInternal);
+  const selectedKeys = new Set(selectedProp ?? selectedInternal);
+
+  const toggleExpand = useCallback(
+    (key: string) => {
+      const next = new Set(expandedKeys);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      const list = Array.from(next);
+      if (expandedProp === undefined) setExpandedInternal(list);
+      onExpand?.(list);
+    },
+    [expandedKeys, expandedProp, onExpand],
+  );
+
+  const onClickNode = useCallback(
+    (node: TreeNode) => {
+      const next = new Set(selectedKeys);
+      if (multiple) {
+        if (next.has(node.key)) next.delete(node.key);
+        else next.add(node.key);
+      } else {
+        next.clear();
+        next.add(node.key);
+      }
+      const list = Array.from(next);
+      if (selectedProp === undefined) setSelectedInternal(list);
+      onSelect?.(list, { node });
+    },
+    [selectedKeys, selectedProp, multiple, onSelect],
+  );
+
+  return (
+    <ScrollView style={style} {...rest}>
+      {treeData.map((node) => (
+        <NodeView
+          key={node.key}
+          node={node}
+          depth={0}
+          expandedKeys={expandedKeys}
+          toggleExpand={toggleExpand}
+          selectedKeys={selectedKeys}
+          onClickNode={onClickNode}
+        />
+      ))}
+    </ScrollView>
+  );
+}

package/src/TreeSelect.tsx

@@ -0,0 +1,221 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Modal, Pressable, ScrollView, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface TreeNode {
+  value: string;
+  label: ReactNode;
+  children?: TreeNode[];
+  isDisabled?: boolean;
+}
+
+export interface TreeSelectProps extends Omit<ViewProps, 'onChange'> {
+  options: TreeNode[];
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  multiple?: boolean;
+  placeholder?: string;
+  defaultExpanded?: string[];
+  isDisabled?: boolean;
+}
+
+function findNode(nodes: TreeNode[], v: string): TreeNode | undefined {
+  for (const n of nodes) {
+    if (n.value === v) return n;
+    if (n.children) {
+      const f = findNode(n.children, v);
+      if (f) return f;
+    }
+  }
+  return undefined;
+}
+
+interface NodeRowProps {
+  node: TreeNode;
+  depth: number;
+  expanded: Set<string>;
+  toggle: (v: string) => void;
+  isSelected: (v: string) => boolean;
+  onSelect: (n: TreeNode) => void;
+  multiple: boolean;
+}
+
+function NodeRow({ node, depth, expanded, toggle, isSelected, onSelect, multiple }: NodeRowProps) {
+  const theme = useTheme();
+  const hasChildren = !!node.children?.length;
+  const isExpanded = expanded.has(node.value);
+  const selected = isSelected(node.value);
+
+  return (
+    <View>
+      <Pressable
+        disabled={node.isDisabled}
+        onPress={() => onSelect(node)}
+        style={({ pressed }) => ({
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 8 + depth * 14,
+          paddingVertical: 6,
+          backgroundColor: selected ? theme.colors.intent.primary.subtle : pressed ? theme.colors.intent.neutral.subtle : 'transparent',
+        })}
+      >
+        {hasChildren ? (
+          <Pressable
+            onPress={() => toggle(node.value)}
+            hitSlop={6}
+            style={{ width: 16, alignItems: 'center', marginRight: 4 }}
+          >
+            <Text style={{ color: theme.colors.fgMuted }}>{isExpanded ? '▾' : '▸'}</Text>
+          </Pressable>
+        ) : (
+          <View style={{ width: 20 }} />
+        )}
+        {multiple ? (
+          <View
+            style={{
+              width: 16,
+              height: 16,
+              borderRadius: Number(theme.radii.sm),
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+              backgroundColor: selected ? theme.colors.intent.primary.solid : 'transparent',
+              marginRight: 8,
+            }}
+          />
+        ) : null}
+        <Text style={{ color: node.isDisabled ? theme.colors.fgSubtle : theme.colors.fg, fontSize: 13 }}>{node.label}</Text>
+      </Pressable>
+      {hasChildren && isExpanded ? (
+        <View>
+          {node.children!.map((child) => (
+            <NodeRow
+              key={child.value}
+              node={child}
+              depth={depth + 1}
+              expanded={expanded}
+              toggle={toggle}
+              isSelected={isSelected}
+              onSelect={onSelect}
+              multiple={multiple}
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export function TreeSelect(props: TreeSelectProps) {
+  const {
+    options,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    multiple = false,
+    placeholder = 'Please select',
+    defaultExpanded,
+    isDisabled,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<string | string[]>(defaultValue ?? (multiple ? [] : ''));
+  const value = valueProp !== undefined ? valueProp : internal;
+  const [isOpen, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set(defaultExpanded ?? []));
+
+  const setValue = (next: string | string[]) => {
+    if (valueProp === undefined) setInternal(next);
+    onChange?.(next);
+  };
+
+  const toggle = (v: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(v)) next.delete(v);
+      else next.add(v);
+      return next;
+    });
+  };
+
+  const isSelected = (v: string): boolean => {
+    if (multiple) return Array.isArray(value) && value.includes(v);
+    return value === v;
+  };
+
+  const onSelectNode = (n: TreeNode) => {
+    if (multiple) {
+      const arr = Array.isArray(value) ? [...value] : [];
+      const idx = arr.indexOf(n.value);
+      if (idx >= 0) arr.splice(idx, 1);
+      else arr.push(n.value);
+      setValue(arr);
+    } else {
+      setValue(n.value);
+      setOpen(false);
+    }
+  };
+
+  const displayed = useMemo(() => {
+    if (multiple) {
+      const arr = Array.isArray(value) ? value : [];
+      return arr.map((v) => findNode(options, v)?.label).filter(Boolean) as ReactNode[];
+    }
+    return typeof value === 'string' && value ? [findNode(options, value)?.label].filter(Boolean) : [];
+  }, [value, options, multiple]);
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={() => setOpen(true)}
+        style={({ pressed }) => ({
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        })}
+      >
+        <Text style={{ color: displayed.length === 0 ? theme.colors.fgMuted : theme.colors.fg, fontSize: 14 }}>
+          {displayed.length === 0 ? placeholder : displayed.map((d, i) => (i > 0 ? `, ${d}` : d)).join('')}
+        </Text>
+      </Pressable>
+      <Modal transparent visible={isOpen} animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onPress={() => setOpen(false)}
+        >
+          <Pressable
+            onPress={() => undefined}
+            style={{
+              backgroundColor: theme.colors.surfaceElevated,
+              borderRadius: Number(theme.radii.md),
+              width: 280,
+              maxHeight: 360,
+            }}
+          >
+            <ScrollView>
+              {options.map((opt) => (
+                <NodeRow
+                  key={opt.value}
+                  node={opt}
+                  depth={0}
+                  expanded={expanded}
+                  toggle={toggle}
+                  isSelected={isSelected}
+                  onSelect={onSelectNode}
+                  multiple={multiple}
+                />
+              ))}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

package/src/Upload.tsx

@@ -0,0 +1,109 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface UploadFile {
+  id: string;
+  name: string;
+  size?: number;
+  uri?: string;
+  status?: 'pending' | 'uploading' | 'done' | 'error';
+  error?: string;
+}
+
+export interface UploadProps extends ViewProps {
+  files?: UploadFile[];
+  defaultFiles?: UploadFile[];
+  onChange?: (files: UploadFile[]) => void;
+  /**
+   * Called when the user taps the picker area. Host app is expected to launch
+   * the platform file picker (e.g., expo-document-picker) and add the resulting
+   * files via `onChange`.
+   */
+  onPick?: () => void;
+  description?: ReactNode;
+  isDisabled?: boolean;
+}
+
+let nextId = 0;
+
+export function Upload(props: UploadProps) {
+  const { files: filesProp, defaultFiles = [], onChange, onPick, description, isDisabled, style, ...rest } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<UploadFile[]>(defaultFiles);
+  const files = filesProp ?? internal;
+
+  const setFiles = (next: UploadFile[]) => {
+    if (filesProp === undefined) setInternal(next);
+    onChange?.(next);
+  };
+
+  const remove = (id: string) => setFiles(files.filter((f) => f.id !== id));
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={onPick}
+        style={({ pressed }) => ({
+          padding: 20,
+          borderRadius: Number(theme.radii.md),
+          borderWidth: 2,
+          borderStyle: 'dashed',
+          borderColor: pressed ? theme.colors.intent.primary.solid : theme.colors.border,
+          backgroundColor: pressed ? theme.colors.intent.primary.subtle : theme.colors.surface,
+          alignItems: 'center',
+          opacity: isDisabled ? 0.6 : 1,
+        })}
+      >
+        <Text style={{ fontSize: 14, color: theme.colors.fg, fontWeight: '500' }}>Tap to add files</Text>
+        {description ? <Text style={{ marginTop: 4, fontSize: 12, color: theme.colors.fgMuted }}>{description}</Text> : null}
+      </Pressable>
+      {files.length > 0 ? (
+        <View style={{ marginTop: 12, gap: 6 }}>
+          {files.map((f) => (
+            <View
+              key={f.id}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+                borderRadius: Number(theme.radii.sm),
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                backgroundColor: theme.colors.surface,
+              }}
+            >
+              <View style={{ flex: 1 }}>
+                <Text style={{ fontSize: 13, color: theme.colors.fg }} numberOfLines={1}>
+                  {f.name}
+                </Text>
+                <Text style={{ fontSize: 11, color: theme.colors.fgMuted }}>
+                  {f.size != null ? `${(f.size / 1024).toFixed(1)} KB` : ''} {f.status && f.status !== 'pending' ? `• ${f.status}` : ''}
+                </Text>
+              </View>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={`Remove ${f.name}`}
+                onPress={() => remove(f.id)}
+                style={({ pressed }) => ({
+                  padding: 6,
+                  borderRadius: Number(theme.radii.sm),
+                  backgroundColor: pressed ? theme.colors.intent.neutral.subtle : 'transparent',
+                })}
+              >
+                <Text style={{ color: theme.colors.fgMuted }}>×</Text>
+              </Pressable>
+            </View>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export function makeUploadFile(name: string, opts: Partial<UploadFile> = {}): UploadFile {
+  return { id: `upload-${++nextId}`, name, ...opts };
+}