@buoy-gg/storage 1.7.2

package/lib/module/storage/components/DiffViewer/modes/ThemedSplitView.js

@@ -0,0 +1,415 @@
+"use strict";
+
+import { Fragment } from "react";
+import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { computeLineDiff, DiffType } from "../../../utils/lineDiff";
+import { DiffSummary } from "../components/DiffSummary";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function ThemedSplitView({
+  oldValue,
+  newValue,
+  theme,
+  options = {
+    hideLineNumbers: false,
+    disableWordDiff: false,
+    showDiffOnly: false,
+    compareMethod: "words",
+    contextLines: 3,
+    lineOffset: 0
+  },
+  showThemeName = false
+}) {
+  // Compute line-by-line diff with options
+  const diffComputeOptions = {
+    compareMethod: options.compareMethod,
+    disableWordDiff: options.disableWordDiff,
+    showDiffOnly: options.showDiffOnly,
+    contextLines: options.contextLines
+  };
+  const lineDiffs = computeLineDiff(oldValue, newValue, diffComputeOptions);
+
+  // Create dynamic styles based on theme
+  const dynamicStyles = createDynamicStyles(theme);
+
+  // Render word diff content
+  const renderWordDiff = wordDiffs => {
+    return wordDiffs.map((word, idx) => {
+      let backgroundColor = "transparent";
+      if (word.type === DiffType.ADDED) {
+        backgroundColor = theme.addedWordHighlight;
+      } else if (word.type === DiffType.REMOVED) {
+        backgroundColor = theme.removedWordHighlight;
+      }
+      return /*#__PURE__*/_jsx(Text, {
+        style: [dynamicStyles.wordDiff, {
+          backgroundColor
+        }],
+        children: word.value
+      }, idx);
+    });
+  };
+
+  // Get colors for diff type
+  const getDiffColors = (type, isModified = false) => {
+    if (isModified) {
+      return {
+        background: theme.modifiedBackground,
+        text: theme.modifiedText,
+        markerBg: theme.markerModifiedBackground
+      };
+    }
+    switch (type) {
+      case DiffType.ADDED:
+        return {
+          background: theme.addedBackground,
+          text: theme.addedText,
+          markerBg: theme.markerAddedBackground
+        };
+      case DiffType.REMOVED:
+        return {
+          background: theme.removedBackground,
+          text: theme.removedText,
+          markerBg: theme.markerRemovedBackground
+        };
+      case DiffType.DEFAULT:
+        return {
+          background: theme.unchangedBackground,
+          text: theme.unchangedText,
+          markerBg: "transparent"
+        };
+      default:
+        return {
+          background: theme.unchangedBackground,
+          text: theme.unchangedText,
+          markerBg: "transparent"
+        };
+    }
+  };
+
+  // Render a single line side (left or right)
+  const renderLineSide = (lineNumber, content, type, marker, isEmpty = false) => {
+    if (isEmpty) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
+          style: [dynamicStyles.gutter, dynamicStyles.emptyGutter],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: dynamicStyles.lineNumber,
+            children: " "
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [dynamicStyles.marker, dynamicStyles.emptyMarker],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: dynamicStyles.markerText,
+            children: " "
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [dynamicStyles.contentCell, dynamicStyles.emptyContent],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: dynamicStyles.content,
+            children: " "
+          })
+        })]
+      });
+    }
+    const colors = getDiffColors(type);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
+        style: [dynamicStyles.gutter, {
+          backgroundColor: theme.lineNumberBackground
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.lineNumber,
+          children: lineNumber || " "
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [dynamicStyles.marker, {
+          backgroundColor: colors.markerBg
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [dynamicStyles.markerText, {
+            color: theme.markerText
+          }],
+          children: marker
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [dynamicStyles.contentCell, {
+          backgroundColor: colors.background
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [dynamicStyles.content, {
+            color: colors.text
+          }],
+          children: Array.isArray(content) ? renderWordDiff(content) : content || " "
+        })
+      })]
+    });
+  };
+
+  // Check if we should show a separator (gap in line numbers)
+  const shouldShowSeparator = (idx, diffs) => {
+    if (!options.showDiffOnly || idx === 0) return false;
+    const prevDiff = diffs[idx - 1];
+    const currDiff = diffs[idx];
+
+    // Check for gap in line numbers
+    const leftGap = currDiff.leftLineNumber && prevDiff.leftLineNumber && currDiff.leftLineNumber - prevDiff.leftLineNumber > 1;
+    const rightGap = currDiff.rightLineNumber && prevDiff.rightLineNumber && currDiff.rightLineNumber - prevDiff.rightLineNumber > 1;
+    return leftGap || rightGap;
+  };
+
+  // Render a complete row with both left and right sides
+  const renderDiffRow = (diff, idx, diffs) => {
+    const isRemoved = diff.type === DiffType.REMOVED;
+    const isAdded = diff.type === DiffType.ADDED;
+    const isModified = diff.type === DiffType.MODIFIED;
+    const isDefault = diff.type === DiffType.DEFAULT;
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [shouldShowSeparator(idx, diffs) && /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.separator,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.separatorText,
+          children: "\u2022 \u2022 \u2022"
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: dynamicStyles.row,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: dynamicStyles.leftSide,
+          children: isRemoved || isModified || isDefault ? renderLineSide(diff.leftLineNumber, diff.leftContent, isModified ? DiffType.REMOVED : diff.type, isRemoved || isModified ? "-" : " ") : renderLineSide(undefined, undefined, DiffType.DEFAULT, " ", true)
+        }), /*#__PURE__*/_jsx(View, {
+          style: dynamicStyles.centerDivider
+        }), /*#__PURE__*/_jsx(View, {
+          style: dynamicStyles.rightSide,
+          children: isAdded || isModified || isDefault ? renderLineSide(diff.rightLineNumber, diff.rightContent, isModified ? DiffType.ADDED : diff.type, isAdded || isModified ? "+" : " ") : renderLineSide(undefined, undefined, DiffType.DEFAULT, " ", true)
+        })]
+      })]
+    }, idx);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [dynamicStyles.container, theme.glowColor && {
+      shadowColor: theme.glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: theme.neonIntensity && theme.neonIntensity > 0.7 ? 0.5 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 0.3 : 0.1,
+      shadowRadius: theme.neonIntensity && theme.neonIntensity > 0.7 ? 10 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 5 : 2
+    }],
+    children: [showThemeName && /*#__PURE__*/_jsxs(View, {
+      style: dynamicStyles.themeBadge,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.themeName,
+        children: theme.name
+      }), /*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.themeDescription,
+        children: theme.description
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: dynamicStyles.header,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.headerLeft,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.headerTitle,
+          children: "PREV"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.divider
+      }), /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.headerRight,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.headerTitle,
+          children: "CUR"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(DiffSummary, {
+      added: lineDiffs.filter(d => d.type === DiffType.ADDED).length,
+      removed: lineDiffs.filter(d => d.type === DiffType.REMOVED).length,
+      modified: lineDiffs.filter(d => d.type === DiffType.MODIFIED).length,
+      theme: theme
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: dynamicStyles.scrollView,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: dynamicStyles.scrollContent,
+      children: lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.emptyState,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.emptyText,
+          children: options.showDiffOnly ? "No differences found" : "No content to display"
+        })
+      }) : lineDiffs.map((diff, idx) => renderDiffRow(diff, idx, lineDiffs))
+    })]
+  });
+}
+
+// Create dynamic styles based on theme
+function createDynamicStyles(theme) {
+  return StyleSheet.create({
+    container: {
+      height: 400,
+      backgroundColor: theme.background,
+      borderRadius: 8,
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: theme.borderColor
+    },
+    themeBadge: {
+      backgroundColor: theme.panelBackground,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.borderColor
+    },
+    themeName: {
+      fontSize: 12,
+      fontWeight: "700",
+      color: theme.accentColor || theme.unchangedText,
+      fontFamily: "monospace",
+      letterSpacing: 0.5
+    },
+    themeDescription: {
+      fontSize: 10,
+      color: theme.unchangedText,
+      fontFamily: "monospace",
+      marginTop: 2,
+      opacity: 0.8
+    },
+    header: {
+      flexDirection: "row",
+      backgroundColor: theme.headerBackground,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.borderColor
+    },
+    headerLeft: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    },
+    headerRight: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    },
+    headerTitle: {
+      fontSize: 10,
+      fontWeight: "700",
+      color: theme.accentColor || theme.unchangedText,
+      fontFamily: "monospace",
+      letterSpacing: 0.5,
+      textTransform: "uppercase"
+    },
+    divider: {
+      width: 1,
+      backgroundColor: theme.dividerColor
+    },
+    scrollView: {
+      flex: 1
+    },
+    scrollContent: {
+      paddingBottom: 10
+    },
+    row: {
+      flexDirection: "row",
+      minHeight: 20
+    },
+    leftSide: {
+      flex: 1,
+      flexDirection: "row"
+    },
+    rightSide: {
+      flex: 1,
+      flexDirection: "row"
+    },
+    centerDivider: {
+      width: 1,
+      backgroundColor: theme.dividerColor
+    },
+    gutter: {
+      width: 35,
+      paddingHorizontal: 4,
+      justifyContent: "center",
+      alignItems: "flex-end",
+      backgroundColor: theme.lineNumberBackground,
+      borderRightWidth: 1,
+      borderRightColor: theme.lineNumberBorder
+    },
+    emptyGutter: {
+      backgroundColor: theme.contextBackground
+    },
+    lineNumber: {
+      fontSize: 9,
+      fontFamily: "monospace",
+      color: theme.lineNumberText
+    },
+    marker: {
+      width: 20,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    emptyMarker: {
+      backgroundColor: theme.contextBackground
+    },
+    markerText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      fontWeight: "600"
+    },
+    contentCell: {
+      flex: 1,
+      paddingHorizontal: 8,
+      paddingVertical: 2
+    },
+    emptyContent: {
+      backgroundColor: theme.contextBackground
+    },
+    content: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      lineHeight: 16
+    },
+    wordDiff: {
+      fontSize: 10,
+      fontFamily: "monospace"
+    },
+    summaryBar: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 16,
+      paddingVertical: 6,
+      backgroundColor: theme.summaryBackground,
+      borderTopWidth: 1,
+      borderTopColor: theme.borderColor
+    },
+    summaryItem: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    summaryText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      fontWeight: "700"
+    },
+    separator: {
+      height: 20,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.separatorBackground
+    },
+    separatorText: {
+      fontSize: 8,
+      color: theme.separatorText,
+      fontFamily: "monospace",
+      letterSpacing: 2
+    },
+    emptyState: {
+      padding: 40,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    emptyText: {
+      fontSize: 11,
+      color: theme.emptyStateText,
+      fontStyle: "italic",
+      fontFamily: "monospace"
+    }
+  });
+}

package/lib/module/storage/components/DiffViewer/themes/diffThemes.js

@@ -0,0 +1,118 @@
+"use strict";
+
+/**
+ * Diff Viewer Theme System
+ *
+ * Only three official themes:
+ * 1. Git Classic - Traditional Git colors
+ * 2. VS Code Dark Modern - Exact VS Code Dark Modern theme
+ * 3. Dev Tools Default - Custom dark theme for our dev tools
+ */
+
+/**
+ * Git Classic Theme
+ * Traditional Git diff colors - simple and familiar
+ */
+export const gitClassicTheme = {
+  name: "Git Classic",
+  description: "Traditional Git diff colors - simple and familiar",
+  background: "#FFFFFF",
+  panelBackground: "#F8F8F8",
+  headerBackground: "#F0F0F0",
+  addedBackground: "#E6FFED",
+  removedBackground: "#FFEEF0",
+  modifiedBackground: "#FFF5DD",
+  unchangedBackground: "transparent",
+  contextBackground: "#FAFAFA",
+  addedText: "#22863A",
+  removedText: "#CB2431",
+  modifiedText: "#B08800",
+  unchangedText: "#24292E",
+  addedWordHighlight: "#ACF2BD",
+  removedWordHighlight: "#FDB8C0",
+  lineNumberBackground: "#F6F8FA",
+  lineNumberText: "#959DA5",
+  lineNumberBorder: "#E1E4E8",
+  markerAddedBackground: "#CDFFD8",
+  markerRemovedBackground: "#FFDCE0",
+  markerModifiedBackground: "#FFF5B1",
+  markerText: "#666666",
+  borderColor: "#E1E4E8",
+  dividerColor: "#E1E4E8",
+  summaryBackground: "#F6F8FA",
+  summaryAddedText: "#28A745",
+  summaryRemovedText: "#D73A49",
+  summaryModifiedText: "#0366D6",
+  emptyStateText: "#586069",
+  separatorBackground: "#F6F8FA",
+  separatorText: "#586069"
+};
+
+/**
+ * Dev Tools Default Theme
+ * Clean dark theme using our gameUIColors
+ */
+export const devToolsDefaultTheme = {
+  name: "Dev Tools Default",
+  description: "Clean dark theme with our game UI colors",
+  // Use our gameUIColors-inspired dark theme
+  background: "#0A0E1A",
+  // Dark background
+  panelBackground: "#0F1420",
+  // Slightly lighter panel
+  headerBackground: "#141925",
+  // Header background
+
+  // Diff colors with our cyan/yellow/red scheme
+  addedBackground: "rgba(74, 255, 159, 0.1)",
+  // Green-cyan for additions
+  removedBackground: "rgba(255, 82, 82, 0.1)",
+  // Red for removals
+  modifiedBackground: "rgba(0, 184, 230, 0.1)",
+  // Cyan for modifications
+  unchangedBackground: "transparent",
+  contextBackground: "rgba(255, 255, 255, 0.02)",
+  // Text colors
+  addedText: "#4AFF9F",
+  // Bright green-cyan
+  removedText: "#FF5252",
+  // Bright red
+  modifiedText: "#00B8E6",
+  // Bright cyan
+  unchangedText: "#B8BFC9",
+  // Muted text
+
+  // Word-level highlights
+  addedWordHighlight: "rgba(74, 255, 159, 0.3)",
+  removedWordHighlight: "rgba(255, 82, 82, 0.3)",
+  // UI elements
+  lineNumberBackground: "#0A0E1A",
+  lineNumberText: "#7A8599",
+  lineNumberBorder: "#1F2937",
+  // Markers
+  markerAddedBackground: "rgba(74, 255, 159, 0.2)",
+  markerRemovedBackground: "rgba(255, 82, 82, 0.2)",
+  markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
+  markerText: "#7A8599",
+  // Borders and dividers
+  borderColor: "#1F2937",
+  dividerColor: "#1F2937",
+  // Summary bar
+  summaryBackground: "#0F1420",
+  summaryAddedText: "#4AFF9F",
+  summaryRemovedText: "#FF5252",
+  summaryModifiedText: "#00B8E6",
+  // Empty state
+  emptyStateText: "#7A8599",
+  // Separator
+  separatorBackground: "#141925",
+  separatorText: "#7A8599"
+};
+
+/**
+ * Theme collection
+ */
+export const diffThemes = {
+  gitClassic: gitClassicTheme,
+  devToolsDefault: devToolsDefaultTheme
+};