rn-backstage 1.2.1 → 1.4.0

package/lib/module/components/StorageTab.js

@@ -0,0 +1,667 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Alert, FlatList, KeyboardAvoidingView, Modal, Platform, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { MonospaceFont } from '../constants';
+import { useBackstageTheme } from '../ThemeContext';
+import { JsonTreeView } from './JsonTreeView';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function tryParseJSON(text) {
+  try {
+    const parsed = JSON.parse(text);
+    return typeof parsed === 'object' && parsed !== null ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function truncateValue(value, max = 80) {
+  if (value.length <= max) return value;
+  return value.substring(0, max) + '…';
+}
+
+// ─── Editor Modal ────────────────────────────────────────────────────────────
+
+const EditorModal = ({
+  visible,
+  title,
+  storageKey,
+  storageValue,
+  isNewEntry,
+  onChangeKey,
+  onChangeValue,
+  onSave,
+  onCancel,
+  theme
+}) => {
+  const s = useMemo(() => createStyles(theme), [theme]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    animationType: "slide",
+    transparent: false,
+    onRequestClose: onCancel,
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: s.modalContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.modalHeader,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onCancel,
+          hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: s.modalCancelText,
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.modalTitle,
+          children: title
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onSave,
+          hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: s.modalSaveText,
+            children: "Save"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+        style: s.modalBody,
+        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+        children: /*#__PURE__*/_jsxs(ScrollView, {
+          contentContainerStyle: s.modalBodyContent,
+          keyboardShouldPersistTaps: "handled",
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: s.modalLabel,
+            children: "Key"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: [s.modalInput, !isNewEntry && s.modalInputDisabled],
+            value: storageKey,
+            onChangeText: onChangeKey,
+            editable: isNewEntry,
+            autoCapitalize: "none",
+            autoCorrect: false,
+            placeholderTextColor: theme.textMuted,
+            placeholder: "Storage key"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [s.modalLabel, {
+              marginTop: 16
+            }],
+            children: "Value"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: [s.modalInput, s.modalValueInput],
+            value: storageValue,
+            onChangeText: onChangeValue,
+            multiline: true,
+            autoFocus: !isNewEntry,
+            textAlignVertical: "top",
+            placeholderTextColor: theme.textMuted,
+            placeholder: "Value"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const StorageTab = ({
+  adapter,
+  jsonMaxDepth
+}) => {
+  const theme = useBackstageTheme();
+  const s = useMemo(() => createStyles(theme), [theme]);
+  const [entries, setEntries] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchText, setSearchText] = useState('');
+
+  // Editor modal state
+  const [editorVisible, setEditorVisible] = useState(false);
+  const [editorIsNew, setEditorIsNew] = useState(false);
+  const [editorKey, setEditorKey] = useState('');
+  const [editorValue, setEditorValue] = useState('');
+
+  // Expanded entries (for JSON preview)
+  const [expandedKeys, setExpandedKeys] = useState(new Set());
+
+  // ─── Load Entries ────────────────────────────────────────
+  const loadEntries = useCallback(async () => {
+    setLoading(true);
+    try {
+      const keys = await adapter.getAllKeys();
+      const sorted = [...keys].sort((a, b) => a.localeCompare(b));
+      const results = [];
+      for (const key of sorted) {
+        const value = await adapter.getItem(key);
+        results.push({
+          key,
+          value: value ?? ''
+        });
+      }
+      setEntries(results);
+    } catch (err) {
+      console.error('[Backstage] StorageTab load error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [adapter]);
+  useEffect(() => {
+    loadEntries();
+  }, [loadEntries]);
+
+  // ─── Filter ──────────────────────────────────────────────
+  const filteredEntries = useMemo(() => {
+    if (!searchText.trim()) return entries;
+    const query = searchText.toLowerCase();
+    return entries.filter(e => e.key.toLowerCase().includes(query) || e.value.toLowerCase().includes(query));
+  }, [entries, searchText]);
+
+  // ─── Toggle Expand ───────────────────────────────────────
+  const toggleExpand = useCallback(key => {
+    setExpandedKeys(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  // ─── Editor ──────────────────────────────────────────────
+  const openEditor = useCallback(entry => {
+    setEditorIsNew(false);
+    setEditorKey(entry.key);
+    setEditorValue(entry.value);
+    setEditorVisible(true);
+  }, []);
+  const openAddEditor = useCallback(() => {
+    setEditorIsNew(true);
+    setEditorKey('');
+    setEditorValue('');
+    setEditorVisible(true);
+  }, []);
+  const closeEditor = useCallback(() => {
+    setEditorVisible(false);
+    setEditorKey('');
+    setEditorValue('');
+  }, []);
+  const saveEditor = useCallback(async () => {
+    const trimmedKey = editorKey.trim();
+    if (!trimmedKey) {
+      Alert.alert('Error', 'Key cannot be empty');
+      return;
+    }
+    try {
+      await adapter.setItem(trimmedKey, editorValue);
+      setEntries(prev => {
+        const exists = prev.findIndex(e => e.key === trimmedKey);
+        if (exists >= 0) {
+          const updated = [...prev];
+          updated[exists] = {
+            key: trimmedKey,
+            value: editorValue
+          };
+          return updated;
+        }
+        return [...prev, {
+          key: trimmedKey,
+          value: editorValue
+        }].sort((a, b) => a.key.localeCompare(b.key));
+      });
+      closeEditor();
+    } catch (err) {
+      Alert.alert('Error', `Failed to save: ${err}`);
+    }
+  }, [adapter, editorKey, editorValue, closeEditor]);
+
+  // ─── Delete ──────────────────────────────────────────────
+  const confirmDelete = useCallback(key => {
+    Alert.alert('Delete Entry', `Remove "${key}" from storage?`, [{
+      text: 'Cancel',
+      style: 'cancel'
+    }, {
+      text: 'Delete',
+      style: 'destructive',
+      onPress: async () => {
+        try {
+          await adapter.removeItem(key);
+          setEntries(prev => prev.filter(e => e.key !== key));
+          setExpandedKeys(prev => {
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+          });
+        } catch (err) {
+          Alert.alert('Error', `Failed to delete: ${err}`);
+        }
+      }
+    }]);
+  }, [adapter]);
+
+  // ─── Render Entry ────────────────────────────────────────
+  const renderItem = useCallback(({
+    item
+  }) => {
+    const isExpanded = expandedKeys.has(item.key);
+    const jsonValue = tryParseJSON(item.value);
+    const isJSON = jsonValue !== null;
+    return /*#__PURE__*/_jsxs(View, {
+      style: s.entryContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.entryHeader,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: s.entryKeyContainer,
+          onPress: () => toggleExpand(item.key),
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: s.entryChevron,
+            children: isExpanded ? '▼' : '▶'
+          }), /*#__PURE__*/_jsx(Text, {
+            style: s.entryKey,
+            numberOfLines: 1,
+            children: item.key
+          }), isJSON && /*#__PURE__*/_jsx(Text, {
+            style: s.jsonBadge,
+            children: "JSON"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: s.entryActions,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => openEditor(item),
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: s.actionIcon,
+              children: "\u270E"
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => confirmDelete(item.key),
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [s.actionIcon, s.deleteIcon],
+              children: "\u2715"
+            })
+          })]
+        })]
+      }), isExpanded ? /*#__PURE__*/_jsx(View, {
+        style: s.expandedValue,
+        children: isJSON ? /*#__PURE__*/_jsx(View, {
+          style: s.jsonContainer,
+          children: /*#__PURE__*/_jsx(JsonTreeView, {
+            data: jsonValue,
+            hideRoot: true,
+            maxDepth: jsonMaxDepth
+          })
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: s.valueText,
+          selectable: true,
+          children: item.value || '(empty)'
+        })
+      }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => toggleExpand(item.key),
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.valuePreview,
+          numberOfLines: 1,
+          children: truncateValue(item.value) || '(empty)'
+        })
+      })]
+    });
+  }, [expandedKeys, jsonMaxDepth, s, toggleExpand, openEditor, confirmDelete]);
+  const keyExtractor = useCallback(item => item.key, []);
+  return /*#__PURE__*/_jsxs(View, {
+    style: s.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: s.searchContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.searchInputWrapper,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.searchIcon,
+          children: "\u2315"
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: s.searchInput,
+          placeholder: "Filter by key or value...",
+          placeholderTextColor: theme.textMuted,
+          value: searchText,
+          onChangeText: setSearchText,
+          autoCapitalize: "none",
+          autoCorrect: false,
+          clearButtonMode: "while-editing",
+          returnKeyType: "search"
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: s.addButton,
+        onPress: openAddEditor,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.addButtonText,
+          children: "\uFF0B"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: s.statsBar,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: s.statText,
+        children: filteredEntries.length === entries.length ? `${entries.length} entr${entries.length !== 1 ? 'ies' : 'y'}` : `${filteredEntries.length} of ${entries.length}`
+      }), /*#__PURE__*/_jsx(Text, {
+        style: s.pullHint,
+        children: "\u2193 pull to refresh"
+      })]
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: filteredEntries,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      refreshing: loading,
+      onRefresh: loadEntries,
+      style: s.list,
+      contentContainerStyle: filteredEntries.length === 0 ? s.emptyContainer : undefined,
+      ListEmptyComponent: /*#__PURE__*/_jsxs(View, {
+        style: s.emptyState,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.emptyIcon,
+          children: "\uD83D\uDDC4"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.emptyTitle,
+          children: loading ? 'Loading…' : 'No entries'
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.emptySubtitle,
+          children: loading ? 'Reading storage keys' : 'Storage is empty or no entries match'
+        })]
+      }),
+      maxToRenderPerBatch: 20,
+      windowSize: 10,
+      initialNumToRender: 20,
+      removeClippedSubviews: true
+    }), /*#__PURE__*/_jsx(EditorModal, {
+      visible: editorVisible,
+      title: editorIsNew ? 'Add Entry' : `Edit "${editorKey}"`,
+      storageKey: editorKey,
+      storageValue: editorValue,
+      isNewEntry: editorIsNew,
+      onChangeKey: setEditorKey,
+      onChangeValue: setEditorValue,
+      onSave: saveEditor,
+      onCancel: closeEditor,
+      theme: theme
+    })]
+  });
+};
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const createStyles = t => StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  // ── Search ─────────────────────
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: t.border
+  },
+  searchInputWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: t.border,
+    paddingHorizontal: 12,
+    height: 38
+  },
+  searchIcon: {
+    fontSize: 16,
+    color: t.textMuted,
+    marginRight: 8
+  },
+  searchInput: {
+    flex: 1,
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: t.text,
+    padding: 0
+  },
+  addButton: {
+    width: 38,
+    height: 38,
+    borderRadius: 10,
+    backgroundColor: t.accentDim,
+    borderWidth: 1,
+    borderColor: t.accent,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  addButtonText: {
+    fontSize: 18,
+    color: t.accent,
+    fontWeight: '700'
+  },
+  // ── Stats ──────────────────────
+  statsBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    backgroundColor: t.surface
+  },
+  statText: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    color: t.textMuted
+  },
+  pullHint: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: t.textMuted,
+    fontStyle: 'italic'
+  },
+  // ── List ───────────────────────
+  list: {
+    flex: 1
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  emptyState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40
+  },
+  emptyIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+    opacity: 0.5
+  },
+  emptyTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 16,
+    fontWeight: '700',
+    color: t.textSecondary,
+    marginBottom: 8
+  },
+  emptySubtitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: t.textMuted,
+    textAlign: 'center'
+  },
+  // ── Entry ──────────────────────
+  entryContainer: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: t.border
+  },
+  entryHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 4
+  },
+  entryKeyContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  entryChevron: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: t.textMuted,
+    marginRight: 6,
+    width: 12
+  },
+  entryKey: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    fontWeight: '700',
+    color: t.text,
+    flex: 1
+  },
+  jsonBadge: {
+    fontFamily: MonospaceFont,
+    fontSize: 9,
+    fontWeight: '800',
+    color: t.info,
+    backgroundColor: t.infoDim,
+    borderRadius: 3,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    marginLeft: 6,
+    overflow: 'hidden'
+  },
+  entryActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginLeft: 8
+  },
+  actionIcon: {
+    fontSize: 16,
+    color: t.textMuted
+  },
+  deleteIcon: {
+    color: t.error
+  },
+  // ── Value Preview ──────────────
+  valuePreview: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    color: t.textSecondary,
+    paddingLeft: 18,
+    lineHeight: 18
+  },
+  expandedValue: {
+    marginTop: 4,
+    paddingLeft: 18
+  },
+  valueText: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    color: t.text,
+    lineHeight: 18
+  },
+  jsonContainer: {
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    padding: 8
+  },
+  // ── Editor Modal ───────────────
+  modalContainer: {
+    flex: 1,
+    backgroundColor: t.background
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: t.border
+  },
+  modalTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 16,
+    fontWeight: '700',
+    color: t.text,
+    flex: 1,
+    textAlign: 'center'
+  },
+  modalCancelText: {
+    fontFamily: MonospaceFont,
+    fontSize: 14,
+    color: t.textSecondary,
+    fontWeight: '600'
+  },
+  modalSaveText: {
+    fontFamily: MonospaceFont,
+    fontSize: 14,
+    color: t.accent,
+    fontWeight: '700'
+  },
+  modalBody: {
+    flex: 1
+  },
+  modalBodyContent: {
+    padding: 16
+  },
+  modalLabel: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    fontWeight: '700',
+    color: t.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  modalInput: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: t.text,
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  modalInputDisabled: {
+    opacity: 0.5
+  },
+  modalValueInput: {
+    minHeight: 160,
+    lineHeight: 20
+  }
+});
+//# sourceMappingURL=StorageTab.js.map