rn-backstage 1.2.0 → 1.3.0

package/lib/commonjs/components/StorageTab.js

@@ -0,0 +1,655 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StorageTab = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _constants = require("../constants");
+var _ThemeContext = require("../ThemeContext");
+var _JsonTreeView = require("./JsonTreeView");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// ─── 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) + '…';
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+const StorageTab = ({
+  adapter,
+  jsonMaxDepth
+}) => {
+  const theme = (0, _ThemeContext.useBackstageTheme)();
+  const s = (0, _react.useMemo)(() => createStyles(theme), [theme]);
+  const [entries, setEntries] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [searchText, setSearchText] = (0, _react.useState)('');
+
+  // Edit state
+  const [editingKey, setEditingKey] = (0, _react.useState)(null);
+  const [editValue, setEditValue] = (0, _react.useState)('');
+
+  // Add new entry state
+  const [showAddForm, setShowAddForm] = (0, _react.useState)(false);
+  const [newKey, setNewKey] = (0, _react.useState)('');
+  const [newValue, setNewValue] = (0, _react.useState)('');
+
+  // Expanded entries (for JSON preview)
+  const [expandedKeys, setExpandedKeys] = (0, _react.useState)(new Set());
+
+  // ─── Load Entries ────────────────────────────────────────
+  const loadEntries = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    loadEntries();
+  }, [loadEntries]);
+
+  // ─── Filter ──────────────────────────────────────────────
+  const filteredEntries = (0, _react.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 = (0, _react.useCallback)(key => {
+    setExpandedKeys(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  // ─── Edit ────────────────────────────────────────────────
+  const startEditing = (0, _react.useCallback)(entry => {
+    setEditingKey(entry.key);
+    setEditValue(entry.value);
+  }, []);
+  const cancelEditing = (0, _react.useCallback)(() => {
+    setEditingKey(null);
+    setEditValue('');
+  }, []);
+  const saveEdit = (0, _react.useCallback)(async () => {
+    if (editingKey === null) return;
+    try {
+      await adapter.setItem(editingKey, editValue);
+      setEntries(prev => prev.map(e => e.key === editingKey ? {
+        ...e,
+        value: editValue
+      } : e));
+      setEditingKey(null);
+      setEditValue('');
+    } catch (err) {
+      _reactNative.Alert.alert('Error', `Failed to save: ${err}`);
+    }
+  }, [adapter, editingKey, editValue]);
+
+  // ─── Delete ──────────────────────────────────────────────
+  const confirmDelete = (0, _react.useCallback)(key => {
+    _reactNative.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) {
+          _reactNative.Alert.alert('Error', `Failed to delete: ${err}`);
+        }
+      }
+    }]);
+  }, [adapter]);
+
+  // ─── Add New Entry ───────────────────────────────────────
+  const handleAddEntry = (0, _react.useCallback)(async () => {
+    const trimmedKey = newKey.trim();
+    if (!trimmedKey) {
+      _reactNative.Alert.alert('Error', 'Key cannot be empty');
+      return;
+    }
+    try {
+      await adapter.setItem(trimmedKey, newValue);
+      setEntries(prev => {
+        const exists = prev.findIndex(e => e.key === trimmedKey);
+        if (exists >= 0) {
+          const updated = [...prev];
+          updated[exists] = {
+            key: trimmedKey,
+            value: newValue
+          };
+          return updated;
+        }
+        return [...prev, {
+          key: trimmedKey,
+          value: newValue
+        }].sort((a, b) => a.key.localeCompare(b.key));
+      });
+      setNewKey('');
+      setNewValue('');
+      setShowAddForm(false);
+    } catch (err) {
+      _reactNative.Alert.alert('Error', `Failed to save: ${err}`);
+    }
+  }, [adapter, newKey, newValue]);
+
+  // ─── Render Entry ────────────────────────────────────────
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    const isEditing = editingKey === item.key;
+    const isExpanded = expandedKeys.has(item.key);
+    const jsonValue = tryParseJSON(item.value);
+    const isJSON = jsonValue !== null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: s.entryContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: s.entryHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: s.entryKeyContainer,
+          onPress: () => toggleExpand(item.key),
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.entryChevron,
+            children: isExpanded ? '▼' : '▶'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.entryKey,
+            numberOfLines: 1,
+            children: item.key
+          }), isJSON && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.jsonBadge,
+            children: "JSON"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: s.entryActions,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => startEditing(item),
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: s.actionIcon,
+              children: "\u270E"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => confirmDelete(item.key),
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [s.actionIcon, s.deleteIcon],
+              children: "\u2715"
+            })
+          })]
+        })]
+      }), isEditing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: s.editContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: s.editInput,
+          value: editValue,
+          onChangeText: setEditValue,
+          multiline: true,
+          autoFocus: true,
+          textAlignVertical: "top",
+          placeholderTextColor: theme.textMuted,
+          placeholder: "Value"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: s.editActions,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: s.cancelButton,
+            onPress: cancelEditing,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: s.cancelButtonText,
+              children: "Cancel"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: s.saveButton,
+            onPress: saveEdit,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: s.saveButtonText,
+              children: "Save"
+            })
+          })]
+        })]
+      }) : isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: s.expandedValue,
+        children: isJSON ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: s.jsonContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonTreeView.JsonTreeView, {
+            data: jsonValue,
+            hideRoot: true,
+            maxDepth: jsonMaxDepth
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.valueText,
+          selectable: true,
+          children: item.value || '(empty)'
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: () => toggleExpand(item.key),
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.valuePreview,
+          numberOfLines: 1,
+          children: truncateValue(item.value) || '(empty)'
+        })
+      })]
+    });
+  }, [editingKey, editValue, expandedKeys, jsonMaxDepth, s, theme.textMuted, toggleExpand, startEditing, cancelEditing, saveEdit, confirmDelete]);
+  const keyExtractor = (0, _react.useCallback)(item => item.key, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: s.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: s.searchContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: s.searchInputWrapper,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.searchIcon,
+          children: "\u2315"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: s.addButton,
+        onPress: () => setShowAddForm(prev => !prev),
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.addButtonText,
+          children: showAddForm ? '✕' : '＋'
+        })
+      })]
+    }), showAddForm && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: s.addForm,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: s.addInput,
+        placeholder: "Key",
+        placeholderTextColor: theme.textMuted,
+        value: newKey,
+        onChangeText: setNewKey,
+        autoCapitalize: "none",
+        autoCorrect: false
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: [s.addInput, s.addValueInput],
+        placeholder: "Value",
+        placeholderTextColor: theme.textMuted,
+        value: newValue,
+        onChangeText: setNewValue,
+        multiline: true,
+        textAlignVertical: "top"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: s.addSubmitButton,
+        onPress: handleAddEntry,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.addSubmitText,
+          children: "Add Entry"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: s.statsBar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: s.statText,
+        children: filteredEntries.length === entries.length ? `${entries.length} entr${entries.length !== 1 ? 'ies' : 'y'}` : `${filteredEntries.length} of ${entries.length}`
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: s.pullHint,
+        children: "\u2193 pull to refresh"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: filteredEntries,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      refreshing: loading,
+      onRefresh: loadEntries,
+      style: s.list,
+      contentContainerStyle: filteredEntries.length === 0 ? s.emptyContainer : undefined,
+      ListEmptyComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: s.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.emptyIcon,
+          children: "\uD83D\uDDC4"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.emptyTitle,
+          children: loading ? 'Loading…' : 'No entries'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.emptySubtitle,
+          children: loading ? 'Reading storage keys' : 'Storage is empty or no entries match'
+        })]
+      }),
+      maxToRenderPerBatch: 20,
+      windowSize: 10,
+      initialNumToRender: 20,
+      removeClippedSubviews: true
+    })]
+  });
+};
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+exports.StorageTab = StorageTab;
+const createStyles = t => _reactNative.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: _constants.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'
+  },
+  // ── Add Form ───────────────────
+  addForm: {
+    padding: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: t.border,
+    backgroundColor: t.surface,
+    gap: 8
+  },
+  addInput: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 13,
+    color: t.text,
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  addValueInput: {
+    minHeight: 60
+  },
+  addSubmitButton: {
+    backgroundColor: t.accent,
+    borderRadius: 8,
+    paddingVertical: 10,
+    alignItems: 'center'
+  },
+  addSubmitText: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#FFFFFF'
+  },
+  // ── Stats ──────────────────────
+  statsBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    backgroundColor: t.surface
+  },
+  statText: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 11,
+    color: t.textMuted
+  },
+  pullHint: {
+    fontFamily: _constants.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: _constants.MonospaceFont,
+    fontSize: 16,
+    fontWeight: '700',
+    color: t.textSecondary,
+    marginBottom: 8
+  },
+  emptySubtitle: {
+    fontFamily: _constants.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: _constants.MonospaceFont,
+    fontSize: 10,
+    color: t.textMuted,
+    marginRight: 6,
+    width: 12
+  },
+  entryKey: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 13,
+    fontWeight: '700',
+    color: t.text,
+    flex: 1
+  },
+  jsonBadge: {
+    fontFamily: _constants.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: _constants.MonospaceFont,
+    fontSize: 12,
+    color: t.textSecondary,
+    paddingLeft: 18,
+    lineHeight: 18
+  },
+  expandedValue: {
+    marginTop: 4,
+    paddingLeft: 18
+  },
+  valueText: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 12,
+    color: t.text,
+    lineHeight: 18
+  },
+  jsonContainer: {
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    padding: 8
+  },
+  // ── Edit ───────────────────────
+  editContainer: {
+    marginTop: 6,
+    paddingLeft: 18,
+    gap: 8
+  },
+  editInput: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 12,
+    color: t.text,
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.accent,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    minHeight: 60,
+    lineHeight: 18
+  },
+  editActions: {
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'flex-end'
+  },
+  cancelButton: {
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: t.border,
+    paddingHorizontal: 14,
+    paddingVertical: 6
+  },
+  cancelButtonText: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 12,
+    fontWeight: '600',
+    color: t.textSecondary
+  },
+  saveButton: {
+    borderRadius: 6,
+    backgroundColor: t.accent,
+    paddingHorizontal: 14,
+    paddingVertical: 6
+  },
+  saveButtonText: {
+    fontFamily: _constants.MonospaceFont,
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#FFFFFF'
+  }
+});
+//# sourceMappingURL=StorageTab.js.map