@mandujs/core 0.18.22 → 0.19.2

package/src/devtools/client/components/panel/diff-viewer.tsx

@@ -0,0 +1,219 @@
+/**
+ * Mandu Kitchen DevTools - Diff Viewer
+ * @version 2.0.0
+ */
+
+import React from 'react';
+import { colors, typography, spacing, borderRadius, animation } from '../../../design-tokens';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DiffLine {
+  type: 'add' | 'remove' | 'context';
+  content: string;
+  oldLine?: number;
+  newLine?: number;
+}
+
+export interface DiffHunk {
+  header: string;
+  lines: DiffLine[];
+}
+
+export interface FileDiff {
+  filePath: string;
+  hunks: DiffHunk[];
+  additions: number;
+  deletions: number;
+  isNew: boolean;
+}
+
+export interface DiffViewerProps {
+  diff: FileDiff;
+  onClose: () => void;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    height: '100%',
+    overflow: 'hidden',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `${spacing.sm} ${spacing.md}`,
+    borderBottom: `1px solid ${colors.background.light}`,
+    backgroundColor: colors.background.medium,
+    flexShrink: 0,
+  },
+  headerLeft: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    overflow: 'hidden',
+  },
+  fileName: {
+    fontSize: typography.fontSize.sm,
+    fontFamily: typography.fontFamily.mono,
+    color: colors.text.primary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap' as const,
+  },
+  stats: {
+    display: 'flex',
+    gap: spacing.sm,
+    fontSize: typography.fontSize.xs,
+    flexShrink: 0,
+  },
+  addStat: {
+    color: colors.semantic.success,
+    fontWeight: typography.fontWeight.medium,
+  },
+  removeStat: {
+    color: colors.semantic.error,
+    fontWeight: typography.fontWeight.medium,
+  },
+  closeBtn: {
+    background: 'transparent',
+    border: 'none',
+    color: colors.text.secondary,
+    fontSize: typography.fontSize.md,
+    cursor: 'pointer',
+    padding: spacing.xs,
+    borderRadius: borderRadius.sm,
+    transition: `color ${animation.duration.fast}`,
+    flexShrink: 0,
+  },
+  body: {
+    flex: 1,
+    overflow: 'auto',
+    fontFamily: typography.fontFamily.mono,
+    fontSize: typography.fontSize.xs,
+    lineHeight: typography.lineHeight.normal,
+  },
+  hunkHeader: {
+    padding: `${spacing.xs} ${spacing.md}`,
+    backgroundColor: `${colors.semantic.info}10`,
+    color: colors.semantic.info,
+    fontSize: typography.fontSize.xs,
+    borderBottom: `1px solid ${colors.background.light}`,
+  },
+  line: {
+    display: 'flex',
+    minHeight: '20px',
+    borderBottom: `1px solid ${colors.background.dark}`,
+  },
+  lineNumber: {
+    width: '40px',
+    padding: `0 ${spacing.xs}`,
+    textAlign: 'right' as const,
+    color: colors.text.muted,
+    userSelect: 'none' as const,
+    flexShrink: 0,
+    fontSize: typography.fontSize.xs,
+    lineHeight: '20px',
+  },
+  lineContent: {
+    flex: 1,
+    padding: `0 ${spacing.sm}`,
+    whiteSpace: 'pre' as const,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    lineHeight: '20px',
+  },
+  emptyState: {
+    padding: spacing.xl,
+    textAlign: 'center' as const,
+    color: colors.text.muted,
+    fontSize: typography.fontSize.sm,
+  },
+};
+
+const lineStyles: Record<string, React.CSSProperties> = {
+  add: {
+    backgroundColor: `${colors.semantic.success}15`,
+    color: colors.text.primary,
+  },
+  remove: {
+    backgroundColor: `${colors.semantic.error}15`,
+    color: colors.text.primary,
+  },
+  context: {
+    backgroundColor: 'transparent',
+    color: colors.text.secondary,
+  },
+};
+
+const linePrefix: Record<string, string> = {
+  add: '+',
+  remove: '-',
+  context: ' ',
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function DiffViewer({ diff, onClose }: DiffViewerProps): React.ReactElement {
+  if (diff.hunks.length === 0) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.header}>
+          <div style={styles.headerLeft}>
+            <span style={styles.fileName}>{diff.filePath}</span>
+          </div>
+          <button style={styles.closeBtn} onClick={onClose} aria-label="닫기">×</button>
+        </div>
+        <div style={styles.emptyState}>변경 사항 없음</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <div style={styles.headerLeft}>
+          <span style={styles.fileName}>
+            {diff.isNew ? '(new) ' : ''}{diff.filePath}
+          </span>
+          <div style={styles.stats}>
+            <span style={styles.addStat}>+{diff.additions}</span>
+            <span style={styles.removeStat}>-{diff.deletions}</span>
+          </div>
+        </div>
+        <button style={styles.closeBtn} onClick={onClose} aria-label="닫기">×</button>
+      </div>
+
+      <div style={styles.body}>
+        {diff.hunks.map((hunk, hi) => (
+          <div key={hi}>
+            <div style={styles.hunkHeader}>{hunk.header}</div>
+            {hunk.lines.map((line, li) => (
+              <div key={li} style={{ ...styles.line, ...lineStyles[line.type] }}>
+                <span style={styles.lineNumber}>
+                  {line.type !== 'add' ? (line.oldLine ?? '') : ''}
+                </span>
+                <span style={styles.lineNumber}>
+                  {line.type !== 'remove' ? (line.newLine ?? '') : ''}
+                </span>
+                <span style={styles.lineContent}>
+                  {linePrefix[line.type]}{line.content}
+                </span>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}