@buoy-gg/zustand 7.0.30 → 7.0.32

package/lib/module/zustand/components/ZustandStoreDetailContent.js

@@ -0,0 +1,469 @@
+"use strict";
+
+/**
+ * One store, on a screen of its own — the React Query detail-screen shape
+ * pointed at a live zustand store.
+ *
+ * Tapping a store card opens this instead of expanding in place. Top to
+ * bottom, mirroring RQ's `DataEditorMode`:
+ *
+ *   1. STATE EDITOR — the shared LiveExplorer. No draft, no Save: an edit
+ *      writes into the live store as you make it and the app reacts
+ *      immediately. Typing commits on a short debounce (~300ms, flushed on
+ *      blur) so a word is one recorded change, not one per keystroke —
+ *      zustand writes land in the change log and count against the free
+ *      tier's cap, which is the one way this tool differs from RQ's
+ *      unlogged cache writes.
+ *   2. STORE DETAILS — what the expanded card used to say: backing,
+ *      change count (with the road to history), the store's actions.
+ *   3. STATE EXPLORER — the read-only tree of the same state.
+ *
+ * THE WRITE RULE (unchanged from the previous editor — see editableState.ts):
+ * merge-only, always. However deep the edit, it is written as
+ * `setState({ [topKey]: rewritten }, false)`, which cannot delete a top-level
+ * key and cannot touch the action functions stores keep in state. The
+ * explorer's delete affordance is therefore vetoed at depth 1 via
+ * `canRemove`, and the Raw escape hatch (whole-state JSON, for the add-key /
+ * restructure cases live editing can't express) refuses drops through
+ * `computeMergePartial`, naming the key.
+ *
+ * On a desktop mirror the same writes go over the wire: the mirrored store's
+ * `api.setState` forwards to the device's sync adapter (the time-travel
+ * path), fire-and-forget, with the next snapshot as confirmation.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { buoyColors, Database, ExpandedInfoRow, FileJson, night, PillBadge, parseValue } from "@buoy-gg/shared-ui";
+import { DataViewer, LiveExplorer, ValueEditModal, updateNestedDataByPath, deleteNestedDataByPath } from "@buoy-gg/shared-ui/dataViewer";
+import { computeMergePartial, editableStateOf, isPlainObjectLike } from "../utils/editableState";
+import { ZUSTAND_TEST_ID, storeRowTestID } from "../utils/testIDs";
+
+/** How long typed edits coalesce before the single merge write fires. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TYPING_COMMIT_MS = 300;
+
+/** `buoy-zustand-detail-…` — this screen's own handle root. */
+const DETAIL_ID = `${ZUSTAND_TEST_ID}-detail`;
+function detailExplorerTestID(dataPath) {
+  const slug = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return dataPath.length === 0 ? `${DETAIL_ID}-explorer-root` : `${DETAIL_ID}-explorer-${dataPath.map(slug).filter(Boolean).join("-")}`;
+}
+export function ZustandStoreDetailContent({
+  store,
+  onViewHistory
+}) {
+  const rowID = storeRowTestID(store.name);
+
+  // Re-render on every store write — our own edits included — so the tree,
+  // the read-only explorer, and the change count all track the live store.
+  // On a desktop mirror the stub subscribe is a no-op and the re-render
+  // arrives via the stores snapshot refreshing this component's props.
+  const [version, setVersion] = useState(0);
+  useEffect(() => store.api.subscribe(() => setVersion(v => v + 1)), [store.api]);
+  const state = store.api.getState();
+  // Recomputed per write on purpose — this screen edits LIVE state, so every
+  // view of it derives from the store's current answer, never a seed.
+  const editable = useMemo(() => editableStateOf(state),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state, version]);
+  const [rawOpen, setRawOpen] = useState(false);
+  const writer = useMemo(() => {
+    if (editable.data === null) return undefined;
+    return {
+      update: (path, value) => {
+        const current = store.api.getState();
+        if (!isPlainObjectLike(current) || path.length === 0) return;
+        const topKey = path[0];
+        const nextTop = path.length === 1 ? value : updateNestedDataByPath(
+        // The live value, not the stripped view — although below the
+        // top level they are the same thing (a store with functions
+        // nested in data keys is refused editing entirely).
+        current[topKey], path.slice(1), value);
+        store.api.setState({
+          [topKey]: nextTop
+        }, false);
+      },
+      remove: path => {
+        // Depth 1 is vetoed by canRemove; this guard is the belt to that
+        // suspender — a merge write cannot delete a top-level key.
+        const current = store.api.getState();
+        if (!isPlainObjectLike(current) || path.length <= 1) return;
+        const topKey = path[0];
+        const nextTop = deleteNestedDataByPath(current[topKey], path.slice(1));
+        store.api.setState({
+          [topKey]: nextTop
+        }, false);
+      },
+      canRemove: path => path.length > 1
+    };
+  }, [store.api, editable.data === null]);
+
+  /** Raw-hatch save: whole-document edit diffed into one merge write. */
+  const applyRaw = useCallback(next => {
+    const current = editableStateOf(store.api.getState());
+    if (current.data === null) return;
+    const partial = computeMergePartial(current.data, next);
+    if (Object.keys(partial).length > 0) {
+      store.api.setState(partial, false);
+    }
+    setRawOpen(false);
+  }, [store.api]);
+  const displayState = useMemo(() => {
+    if (state && typeof state === "object") {
+      const filtered = {};
+      for (const [key, value] of Object.entries(state)) {
+        if (typeof value !== "function") filtered[key] = value;
+      }
+      return parseValue(filtered);
+    }
+    return parseValue(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, version]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      testID: `${DETAIL_ID}-scroll`,
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.editorContainer,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.sectionHeaderRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              testID: `${DETAIL_ID}-editor-header`,
+              style: styles.sectionHeaderText,
+              children: "State Editor"
+            }), editable.data !== null ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+              onPress: () => setRawOpen(true),
+              testID: `${DETAIL_ID}-raw`,
+              accessibilityRole: "button",
+              accessibilityLabel: "Edit raw JSON",
+              style: styles.rawButton,
+              hitSlop: {
+                top: 6,
+                bottom: 6,
+                left: 6,
+                right: 6
+              },
+              children: [/*#__PURE__*/_jsx(FileJson, {
+                size: 13,
+                color: night.color.accent
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.rawButtonText,
+                children: "Raw"
+              })]
+            }) : null]
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.sectionBody,
+            children: editable.data !== null ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(LiveExplorer, {
+                editable: true,
+                label: "State",
+                value: editable.data,
+                defaultExpanded: ["State"],
+                writer: writer,
+                dataVersion: version,
+                testIDForPath: detailExplorerTestID,
+                debounceMs: TYPING_COMMIT_MS
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.editorHint,
+                children: "Edits write into the live store as you make them \u2014 merged, so the store's actions and untouched keys survive."
+              })]
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.blockedText,
+              testID: `${DETAIL_ID}-edit-blocked`,
+              children: editable.blockedReason
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionHeaderTextPlain,
+            children: "Store Details"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.infoBody,
+            children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
+              label: "Type",
+              children: /*#__PURE__*/_jsx(PillBadge, {
+                color: store.color,
+                testID: `${rowID}-type`,
+                children: "ZUSTAND"
+              })
+            }), /*#__PURE__*/_jsxs(ExpandedInfoRow, {
+              label: "Backing",
+              children: [/*#__PURE__*/_jsx(PillBadge, {
+                color: buoyColors.info,
+                icon: store.isPersisted ? /*#__PURE__*/_jsx(Database, {
+                  size: 9,
+                  color: buoyColors.info
+                }) : undefined,
+                testID: `${rowID}-persist`,
+                children: store.isPersisted ? store.persistName || "persisted" : "in-memory"
+              }), store.isPersisted ? /*#__PURE__*/_jsx(RereadSavedValue, {
+                store: store,
+                rowID: rowID
+              }) : null]
+            }), store.stateChangeCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
+              label: "Changes",
+              children: [/*#__PURE__*/_jsx(PillBadge, {
+                color: buoyColors.warning,
+                testID: `${rowID}-changes`,
+                children: String(store.stateChangeCount)
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: () => onViewHistory(store.name),
+                style: styles.inlineLinkButton,
+                hitSlop: {
+                  top: 6,
+                  bottom: 6,
+                  left: 6,
+                  right: 6
+                },
+                testID: `${rowID}-history`,
+                accessibilityRole: "button",
+                accessibilityLabel: `View ${store.name} history`,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.inlineLinkText, {
+                    color: store.color
+                  }],
+                  children: "view history \u2192"
+                })
+              })]
+            }), editable.fnPaths.length > 0 && /*#__PURE__*/_jsx(ExpandedInfoRow, {
+              label: "Actions",
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.actionsText,
+                testID: `${DETAIL_ID}-actions`,
+                numberOfLines: 2,
+                children: editable.fnPaths.join(" · ")
+              })
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionHeaderTextPlain,
+            children: "State Explorer"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.viewerBody,
+            testID: `${rowID}-state`,
+            children: displayState && typeof displayState === "object" ? /*#__PURE__*/_jsx(DataViewer, {
+              title: "",
+              data: displayState,
+              showTypeFilter: true,
+              rawMode: true,
+              initialExpanded: false
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.blockedText,
+              children: "Empty state"
+            })
+          })]
+        })
+      })]
+    }), rawOpen && editable.data !== null ? /*#__PURE__*/_jsx(ValueEditModal, {
+      path: [],
+      value: editable.data,
+      onSave: next => {
+        try {
+          applyRaw(next);
+        } catch {
+          // computeMergePartial refuses dropped top-level keys; the modal
+          // stays open with its own validation, so just don't close it.
+        }
+      },
+      onCancel: () => setRawOpen(false),
+      saveLabel: "Apply",
+      testIDPrefix: `${ZUSTAND_TEST_ID}-value`
+    }) : null]
+  });
+}
+
+/**
+ * Pull this store's saved value back into memory.
+ *
+ * Lives on the store rather than in the Storage tool because here there is
+ * nothing to infer: `store.rehydrate` IS the store's own `persist.rehydrate`.
+ * The merge keeps the store's action functions, and it does not write back
+ * unless a version migration ran. A store registered before its persist
+ * middleware attached has no handle — then there is simply no button.
+ */
+function RereadSavedValue({
+  store,
+  rowID
+}) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  if (!store.rehydrate) return null;
+  const reread = () => {
+    setBusy(true);
+    setError(null);
+    void (async () => {
+      try {
+        await store.rehydrate?.();
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        setBusy(false);
+      }
+    })();
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: reread,
+      disabled: busy,
+      style: styles.inlineLinkButton,
+      hitSlop: {
+        top: 6,
+        bottom: 6,
+        left: 6,
+        right: 6
+      },
+      testID: `${rowID}-reread`,
+      accessibilityRole: "button",
+      accessibilityLabel: `Re-read ${store.name} from storage`,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.inlineLinkText, {
+          color: store.color
+        }],
+        children: busy ? "re-reading…" : "re-read saved value →"
+      })
+    }), error ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.inlineLinkText, {
+        color: night.color.danger
+      }],
+      children: error
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 24
+  },
+  section: {
+    marginBottom: 16
+  },
+  // The editable section wears the accent, like RQ's Data Editor — the one
+  // box on this screen that changes things should read differently from the
+  // two that don't.
+  editorContainer: {
+    minWidth: 200,
+    backgroundColor: night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.accent + "4D",
+    overflow: "hidden",
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  sectionHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: night.color.accent + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: night.color.accent + "33"
+  },
+  sectionHeaderText: {
+    fontWeight: "600",
+    fontSize: 12,
+    color: night.color.accent,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  rawButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  rawButtonText: {
+    color: night.color.accent,
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  sectionBody: {
+    padding: 8
+  },
+  editorHint: {
+    color: night.color.textTertiary,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4,
+    lineHeight: 14
+  },
+  blockedText: {
+    color: night.color.textSecondary,
+    fontSize: 12,
+    padding: 12,
+    lineHeight: 18
+  },
+  infoContainer: {
+    minWidth: 200,
+    backgroundColor: night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    overflow: "hidden"
+  },
+  sectionHeaderTextPlain: {
+    backgroundColor: night.color.surfaceElevated,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontWeight: "600",
+    fontSize: 12,
+    color: night.color.textSecondary,
+    borderBottomWidth: 1,
+    borderBottomColor: night.color.border,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  infoBody: {
+    padding: 12,
+    gap: 10
+  },
+  viewerBody: {
+    backgroundColor: night.color.bg,
+    minHeight: 60
+  },
+  inlineLinkButton: {
+    marginLeft: 4
+  },
+  inlineLinkText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  actionsText: {
+    flex: 1,
+    color: night.color.textSecondary,
+    fontSize: 10,
+    fontFamily: "monospace",
+    lineHeight: 15
+  }
+});