@anymux/ui-kit 0.1.0

package/src/git/DiffViewer.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import {
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  Minus,
+  FileText,
+  FilePlus2,
+  FileX2,
+  FileEdit,
+  ArrowRightLeft,
+} from 'lucide-react';
+import type { GitDiffEntry } from '@anymux/file-system';
+
+// ---- Helpers ----
+
+function statusIcon(status: GitDiffEntry['status']) {
+  switch (status) {
+    case 'added':
+      return <FilePlus2 className="h-3.5 w-3.5 text-green-500" />;
+    case 'deleted':
+      return <FileX2 className="h-3.5 w-3.5 text-red-500" />;
+    case 'modified':
+      return <FileEdit className="h-3.5 w-3.5 text-yellow-500" />;
+    case 'renamed':
+      return <ArrowRightLeft className="h-3.5 w-3.5 text-blue-500" />;
+  }
+}
+
+function statusLabel(status: GitDiffEntry['status']): string {
+  switch (status) {
+    case 'added': return 'Added';
+    case 'deleted': return 'Deleted';
+    case 'modified': return 'Modified';
+    case 'renamed': return 'Renamed';
+  }
+}
+
+function statusBadgeClass(status: GitDiffEntry['status']): string {
+  switch (status) {
+    case 'added':
+      return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+    case 'deleted':
+      return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+    case 'modified':
+      return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+    case 'renamed':
+      return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
+  }
+}
+
+interface PatchLine {
+  type: 'context' | 'addition' | 'deletion' | 'header';
+  content: string;
+}
+
+function parsePatch(patch: string): PatchLine[] {
+  const lines = patch.split('\n');
+  return lines.map((line) => {
+    if (line.startsWith('@@')) {
+      return { type: 'header', content: line };
+    } else if (line.startsWith('+')) {
+      return { type: 'addition', content: line };
+    } else if (line.startsWith('-')) {
+      return { type: 'deletion', content: line };
+    }
+    return { type: 'context', content: line };
+  });
+}
+
+function lineClassName(type: PatchLine['type']): string {
+  switch (type) {
+    case 'addition':
+      return 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-300';
+    case 'deletion':
+      return 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-300';
+    case 'header':
+      return 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium';
+    default:
+      return 'text-gray-700 dark:text-gray-300';
+  }
+}
+
+// ---- Types ----
+
+export interface DiffViewerProps {
+  entries: GitDiffEntry[];
+  className?: string;
+}
+
+// ---- File Diff Section ----
+
+interface FileDiffSectionProps {
+  entry: GitDiffEntry;
+  defaultExpanded?: boolean;
+}
+
+function FileDiffSection({ entry, defaultExpanded = false }: FileDiffSectionProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const patchLines = entry.patch ? parsePatch(entry.patch) : [];
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      {/* File header */}
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors text-left"
+      >
+        <span className="flex-shrink-0 text-gray-400">
+          {expanded ? (
+            <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5" />
+          )}
+        </span>
+
+        {statusIcon(entry.status)}
+
+        <span className="text-xs font-mono truncate flex-1">
+          {entry.previousPath && entry.status === 'renamed' ? (
+            <>
+              <span className="text-gray-400">{entry.previousPath}</span>
+              <span className="text-gray-500 mx-1">&rarr;</span>
+              <span>{entry.path}</span>
+            </>
+          ) : (
+            entry.path
+          )}
+        </span>
+
+        <span className={`px-1.5 py-0.5 text-[9px] font-medium rounded flex-shrink-0 ${statusBadgeClass(entry.status)}`}>
+          {statusLabel(entry.status)}
+        </span>
+
+        <div className="flex items-center gap-1.5 flex-shrink-0 text-[10px]">
+          {entry.additions > 0 && (
+            <span className="flex items-center gap-0.5 text-green-600 dark:text-green-400">
+              <Plus className="h-2.5 w-2.5" />
+              {entry.additions}
+            </span>
+          )}
+          {entry.deletions > 0 && (
+            <span className="flex items-center gap-0.5 text-red-600 dark:text-red-400">
+              <Minus className="h-2.5 w-2.5" />
+              {entry.deletions}
+            </span>
+          )}
+        </div>
+      </button>
+
+      {/* Patch content */}
+      {expanded && (
+        <div className="overflow-x-auto">
+          {patchLines.length > 0 ? (
+            <pre className="text-[11px] leading-[1.6] font-mono">
+              {patchLines.map((line, i) => (
+                <div
+                  key={i}
+                  className={`px-3 ${lineClassName(line.type)}`}
+                >
+                  {line.content}
+                </div>
+              ))}
+            </pre>
+          ) : (
+            <div className="px-3 py-4 text-center text-xs text-gray-400 italic">
+              No diff content available
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- DiffViewer Component ----
+
+export const DiffViewer: React.FC<DiffViewerProps> = ({ entries, className }) => {
+  if (entries.length === 0) {
+    return (
+      <div className={`flex items-center justify-center py-8 text-xs text-gray-400 ${className ?? ''}`}>
+        No changes to display
+      </div>
+    );
+  }
+
+  const totalAdditions = entries.reduce((sum, e) => sum + e.additions, 0);
+  const totalDeletions = entries.reduce((sum, e) => sum + e.deletions, 0);
+
+  return (
+    <div className={`space-y-2 ${className ?? ''}`}>
+      {/* Summary bar */}
+      <div className="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-xs text-gray-600 dark:text-gray-300">
+        <div className="flex items-center gap-1">
+          <FileText className="h-3.5 w-3.5 text-gray-400" />
+          <span className="font-medium">{entries.length}</span>
+          <span>file{entries.length !== 1 ? 's' : ''} changed</span>
+        </div>
+        <div className="flex items-center gap-1 text-green-600 dark:text-green-400">
+          <Plus className="h-3 w-3" />
+          <span>{totalAdditions}</span>
+        </div>
+        <div className="flex items-center gap-1 text-red-600 dark:text-red-400">
+          <Minus className="h-3 w-3" />
+          <span>{totalDeletions}</span>
+        </div>
+      </div>
+
+      {/* File diffs */}
+      {entries.map((entry) => (
+        <FileDiffSection
+          key={entry.path}
+          entry={entry}
+          defaultExpanded={entries.length <= 5}
+        />
+      ))}
+    </div>
+  );
+};

package/src/git/index.ts

@@ -0,0 +1,4 @@
+export { CommitList, type CommitListProps } from './CommitList';
+export { CommitGraph, computeGraphLayout, graphWidth, type GraphNode, type GraphConnection } from './CommitGraph';
+export { DiffViewer, type DiffViewerProps } from './DiffViewer';
+export { BranchList, type BranchListProps } from './BranchList';

package/src/icons/iconMap.ts

@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  File, FileText, FileImage, FileVideo, FileAudio, FileCode,
+  Folder, FolderOpen, FolderPlus, FilePlus, Archive, FileSpreadsheet, FileType, Settings,
+  FileJson, FileTerminal, Database, Globe, Presentation, FileKey,
+  Eye, Pencil, Trash2, Copy, Download, Upload, Share2, Scissors,
+  Star, Heart, Bookmark, Tag, Info, AlertTriangle, AlertCircle,
+  CheckCircle, Plus, Minus, X, Check, ZoomIn, List,
+  type LucideIcon
+} from 'lucide-react';
+
+// Icon name to Lucide component mapping for resolving string icon identifiers
+export const lucideIconMap: Record<string, LucideIcon> = {
+  'file': File, 'file-text': FileText, 'file-image': FileImage,
+  'file-video': FileVideo, 'file-audio': FileAudio, 'file-code': FileCode,
+  'folder': Folder, 'folder-open': FolderOpen, 'folder-plus': FolderPlus, 'file-plus': FilePlus, 'archive': Archive,
+  'file-spreadsheet': FileSpreadsheet, 'file-type': FileType, 'settings': Settings,
+  'file-json': FileJson, 'file-terminal': FileTerminal,
+  'database': Database, 'globe': Globe, 'presentation': Presentation, 'file-key': FileKey,
+};
+
+// Semantic color mapping for icon types
+export const iconColorMap: Record<string, string> = {
+  'folder': 'text-blue-500',
+  'folder-open': 'text-blue-500',
+  'file-image': 'text-emerald-500',
+  'file-video': 'text-orange-500',
+  'file-audio': 'text-violet-500',
+  'file-code': 'text-blue-500',
+  'file-text': 'text-gray-500',
+  'file-type': 'text-gray-500',
+  'file-json': 'text-yellow-500',
+  'file-terminal': 'text-green-500',
+  'file-spreadsheet': 'text-emerald-600',
+  'file-key': 'text-red-500',
+  'archive': 'text-amber-500',
+  'database': 'text-purple-500',
+  'globe': 'text-blue-400',
+  'presentation': 'text-orange-500',
+  'file': 'text-gray-400',
+};
+
+// Comprehensive file extension to icon name mapping
+export const fileExtensionIconMap: Record<string, string> = {
+  // Images
+  'jpg': 'file-image', 'jpeg': 'file-image', 'png': 'file-image', 'gif': 'file-image',
+  'svg': 'file-image', 'webp': 'file-image', 'bmp': 'file-image', 'ico': 'file-image',
+  'tiff': 'file-image', 'tif': 'file-image', 'avif': 'file-image', 'heic': 'file-image',
+  // Video
+  'mp4': 'file-video', 'avi': 'file-video', 'mkv': 'file-video', 'mov': 'file-video',
+  'wmv': 'file-video', 'flv': 'file-video', 'webm': 'file-video', 'm4v': 'file-video',
+  // Audio
+  'mp3': 'file-audio', 'wav': 'file-audio', 'flac': 'file-audio', 'aac': 'file-audio',
+  'ogg': 'file-audio', 'wma': 'file-audio', 'm4a': 'file-audio', 'opus': 'file-audio',
+  // Documents
+  'txt': 'file-text', 'md': 'file-text', 'mdx': 'file-text', 'rst': 'file-text',
+  'rtf': 'file-text', 'log': 'file-text', 'csv': 'file-text',
+  'pdf': 'file-type', 'doc': 'file-text', 'docx': 'file-text',
+  // Spreadsheets
+  'xls': 'file-spreadsheet', 'xlsx': 'file-spreadsheet', 'ods': 'file-spreadsheet',
+  // Presentations
+  'ppt': 'presentation', 'pptx': 'presentation', 'odp': 'presentation',
+  // Code - JavaScript/TypeScript
+  'js': 'file-code', 'jsx': 'file-code', 'ts': 'file-code', 'tsx': 'file-code',
+  'mjs': 'file-code', 'cjs': 'file-code',
+  // Code - Web
+  'html': 'globe', 'htm': 'globe', 'css': 'file-code', 'scss': 'file-code',
+  'sass': 'file-code', 'less': 'file-code', 'vue': 'file-code', 'svelte': 'file-code',
+  // Code - Data
+  'json': 'file-json', 'jsonc': 'file-json', 'json5': 'file-json',
+  'xml': 'file-code', 'yaml': 'file-code', 'yml': 'file-code', 'toml': 'file-code',
+  // Code - General
+  'py': 'file-code', 'rb': 'file-code', 'java': 'file-code', 'kt': 'file-code',
+  'go': 'file-code', 'rs': 'file-code', 'c': 'file-code', 'cpp': 'file-code',
+  'h': 'file-code', 'hpp': 'file-code', 'cs': 'file-code', 'swift': 'file-code',
+  'php': 'file-code', 'r': 'file-code', 'lua': 'file-code', 'dart': 'file-code',
+  'scala': 'file-code', 'zig': 'file-code', 'ex': 'file-code', 'exs': 'file-code',
+  // Shell / Config
+  'sh': 'file-terminal', 'bash': 'file-terminal', 'zsh': 'file-terminal',
+  'fish': 'file-terminal', 'ps1': 'file-terminal', 'bat': 'file-terminal',
+  'cmd': 'file-terminal',
+  // Config files
+  'env': 'file-key', 'ini': 'settings', 'conf': 'settings', 'cfg': 'settings',
+  'properties': 'settings',
+  // Database
+  'sql': 'database', 'sqlite': 'database', 'db': 'database',
+  // Archives
+  'zip': 'archive', 'tar': 'archive', 'gz': 'archive', 'bz2': 'archive',
+  'xz': 'archive', '7z': 'archive', 'rar': 'archive', 'tgz': 'archive',
+  // Lock / package files
+  'lock': 'file-key',
+};
+
+// Get icon name for a file extension
+export function getIconForExtension(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  return fileExtensionIconMap[ext] || 'file';
+}
+
+// Get icon name for a file (handles directories too)
+export function getIconForFile(filename: string, isDirectory: boolean): string {
+  if (isDirectory) return 'folder';
+  return getIconForExtension(filename);
+}
+
+// Context menu icon mapping - Lucide icons for menu items
+export const contextMenuIconMap: Record<string, LucideIcon> = {
+  'eye': Eye,
+  'edit': Pencil,
+  'trash': Trash2,
+  'folder-open': FolderOpen,
+  'copy': Copy,
+  'download': Download,
+  'upload': Upload,
+  'share': Share2,
+  'scissors': Scissors,
+  'star': Star,
+  'heart': Heart,
+  'bookmark': Bookmark,
+  'tag': Tag,
+  'settings': Settings,
+  'info': Info,
+  'warning': AlertTriangle,
+  'error': AlertCircle,
+  'success': CheckCircle,
+  'plus': Plus,
+  'minus': Minus,
+  'x': X,
+  'check': Check,
+  'file': File,
+  'folder': Folder,
+  'folder-plus': FolderPlus,
+  'file-plus': FilePlus,
+  'archive': Archive,
+  'zoom-in': ZoomIn,
+  'list': List,
+};
+
+// Resolve an icon name to a React element
+export function resolveIcon(name: string, className?: string): React.ReactElement {
+  const iconName = name || 'file';
+  const MappedIcon = lucideIconMap[iconName] || File;
+  const colorClass = iconColorMap[iconName] || 'text-gray-400';
+  const finalClassName = className ? `${className} ${colorClass}` : `w-4 h-4 ${colorClass}`;
+  return React.createElement(MappedIcon, { className: finalClassName });
+}

package/src/icons/index.ts

@@ -0,0 +1,9 @@
+export {
+  lucideIconMap,
+  iconColorMap,
+  fileExtensionIconMap,
+  contextMenuIconMap,
+  getIconForExtension,
+  getIconForFile,
+  resolveIcon,
+} from './iconMap';

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './file-browser';
+export * from './tree';
+export * from './list';
+export * from './git';
+export * from './layout';
+export * from './media';
+export * from './calendar';
+export * from './contacts';
+export * from './icons';
+
+// Aliases for backwards compatibility with @anymux/fs-ui
+export { Tree as TreeComponent } from './tree';
+export type { TreeProps as TreeComponentProps } from './tree/components/Tree';