git-history-ui 1.0.0

package/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    '@typescript-eslint/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  env: {
+    node: true,
+    es6: true,
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+  },
+};

package/README.md

@@ -0,0 +1,304 @@
+# Git History UI
+
+[![npm version](https://badge.fury.io/js/git-history-ui.svg)](https://badge.fury.io/js/git-history-ui)
+[![npm downloads](https://img.shields.io/npm/dm/git-history-ui.svg)](https://www.npmjs.com/package/git-history-ui)
+[![npm license](https://img.shields.io/npm/l/git-history-ui.svg)](https://www.npmjs.com/package/git-history-ui)
+[![Node.js version](https://img.shields.io/node/v/git-history-ui.svg)](https://www.npmjs.com/package/git-history-ui)
+[![GitHub stars](https://img.shields.io/github/stars/ankit-sharma/git-history-ui.svg)](https://github.com/ankit-sharma/git-history-ui)
+[![GitHub issues](https://img.shields.io/github/issues/ankit-sharma/git-history-ui.svg)](https://github.com/ankit-sharma/git-history-ui/issues)
+
+A beautiful, modern web UI for visualizing git history with interactive commit graphs, search, filtering, and diff visualization. Built with Angular and Node.js.
+
+**Author:** Ankit Sharma (ankit.sharma199803@gmail.com)
+
+## 📋 Requirements
+
+- **Node.js**: 18.0.0 or higher
+- **Angular**: 20.2.1
+- **Git**: Any version (must be in a git repository)
+
+## ✨ Features
+
+- **🎨 Interactive Commit Graph** - Beautiful D3.js-powered visualizations with branch tracking and merge detection
+- **🔍 Advanced Search & Filtering** - Search by author, date range, commit message, or specific files
+- **📊 Dual View Modes** - Switch between graph view and list view
+- **🎨 Color Palette System** - Choose from 6 light and 6 dark themes
+- **🌙 Dark/Light Mode** - Toggle between themes with persistent preferences
+- **📱 Responsive Design** - Works on desktop and mobile devices
+- **⚡ Real-time Search** - Live filtering and search results
+- **🔧 Modern Tech Stack** - Angular 20 frontend with Node.js backend
+
+## 🚀 Quick Start (1 Step!)
+
+### Prerequisites
+- **Node.js 18.0.0+** - [Download here](https://nodejs.org/)
+- **Git repository** - Must be in a git repository
+
+### Step 1: Run the Application
+```bash
+# Run directly with npx (no installation needed)
+npx git-history-ui
+```
+
+That's it! 🎉 The application will automatically:
+- Start the backend server on port 3000
+- Start the frontend server on port 4200
+- Open your browser to `http://localhost:4200`
+
+## 📖 Usage Examples
+
+### Basic Usage
+```bash
+# Run directly with npx (no installation needed)
+npx git-history-ui
+```
+
+### CLI Options
+```bash
+# Custom port
+npx git-history-ui --port 8080
+
+# Filter by specific file
+npx git-history-ui --file src/app.js
+
+# Filter by author
+npx git-history-ui --author "your-name"
+
+# Filter by date range
+npx git-history-ui --since 2024-01-01
+
+# Don't auto-open browser
+npx git-history-ui --no-open
+
+# Show help
+npx git-history-ui --help
+```
+
+### Advanced Usage
+```bash
+# Use in specific directory
+cd /path/to/your/repo
+npx git-history-ui
+
+# Use with environment variables
+PORT=8080 npx git-history-ui
+
+# Use with different host
+HOST=0.0.0.0 npx git-history-ui
+```
+
+## 🎯 Key Features Explained
+
+### 📊 Graph View
+- **Interactive Commit Graph**: Click any commit node to view details
+- **Branch Visualization**: Different colors for different branches
+- **Merge Detection**: Purple nodes indicate merge commits
+- **Force-Directed Layout**: Automatic positioning for optimal viewing
+
+### 📋 List View  
+- **Organized Commit List**: Clean, readable commit information
+- **File Change Summary**: See how many files were changed
+- **Author & Date Info**: Quick access to commit metadata
+- **Search Integration**: Real-time filtering as you type
+
+### 🔍 Search & Filtering
+- **Real-time Search**: Search across commit messages, authors, and hashes
+- **Date Range Filter**: Use the date picker to filter by specific dates
+- **Author Filter**: Dropdown to filter by specific authors
+- **File Filter**: Search for commits that touched specific files
+
+### 🎨 Theme System
+- **6 Light Themes**: Default, Ocean, Forest, Sunset, Monochrome, Neon
+- **6 Dark Themes**: Matching dark versions of all themes
+- **Persistent Preferences**: Your theme choice is saved automatically
+- **Dark Mode Toggle**: Quick switch between light and dark modes
+
+## 🛠️ Development Setup
+
+### Prerequisites
+- **Node.js 18.0.0+** - [Download here](https://nodejs.org/)
+- **Git repository** - Must be in a git repository
+
+### Project Structure
+```
+git-history-ui/
+├── frontend/                    # Angular 20 application
+│   ├── src/app/
+│   │   ├── components/          # UI components
+│   │   │   ├── commit-graph/    # D3.js graph visualization
+│   │   │   ├── commit-list/     # List view component
+│   │   │   ├── commit-detail/   # Commit details modal
+│   │   │   └── color-palette-selector/ # Theme selector
+│   │   ├── services/            # Angular services
+│   │   └── models/              # TypeScript interfaces
+│   └── angular.json             # Angular configuration
+├── src/backend/                 # Node.js backend
+│   ├── server.ts               # Express server
+│   └── gitService.ts           # Git operations
+├── package.json                # Dependencies and scripts
+└── README.md                   # This file
+```
+
+## 🎯 Use Cases & Examples
+
+### Code Review Workflow
+```bash
+# 1. Start the application
+npx git-history-ui
+
+# 2. Open http://localhost:4200
+
+# 3. Use the search bar to find specific commits
+# Example: Search for "bug fix" or "feature"
+
+# 4. Filter by date to review recent changes
+# Use the date picker to select "Last week"
+
+# 5. Switch to graph view to see branch structure
+# Click "Graph View" button
+
+# 6. Click any commit to see detailed changes
+# View file diffs and commit information
+```
+
+### Release Planning
+```bash
+# 1. Filter commits since last release
+# Use date picker to select release date
+
+# 2. Review all changes in list view
+# See commit messages and file changes
+
+# 3. Switch to graph view for branch overview
+# Identify feature branches and merges
+
+# 4. Copy commit information for release notes
+# Manually copy relevant commit details
+```
+
+### Bug Investigation
+```bash
+# 1. Search for specific file changes
+# Use file filter: "src/app.js"
+
+# 2. Filter by author if you know who made changes
+# Select author from dropdown
+
+# 3. Use date range to narrow down timeframe
+# Select date range around when bug appeared
+
+# 4. Review commit details and diffs
+# Click commits to see exact changes made
+```
+
+## 🔧 Configuration & Customization
+
+### Environment Variables
+```bash
+# Custom port for backend (default: 3000)
+PORT=8080 npm run dev
+
+# Custom host (default: localhost)
+HOST=0.0.0.0 npm run dev
+```
+
+### Theme Customization
+- **Light Themes**: Default, Ocean, Forest, Sunset, Monochrome, Neon
+- **Dark Themes**: Matching dark versions of all themes
+- **Auto-save**: Your theme preference is automatically saved
+- **System Integration**: Respects system dark mode preference
+
+### Browser Compatibility
+- **Chrome/Edge**: Full support with all features
+- **Firefox**: Full support with all features  
+- **Safari**: Full support with all features
+- **Mobile**: Basic responsive design support
+
+## 🚀 Development Setup
+
+### For Contributors
+```bash
+# Clone the repository
+git clone https://github.com/ankit-sharma/git-history-ui.git
+cd git-history-ui
+
+# Install dependencies
+npm install
+
+# Start development servers
+npm run dev
+
+# Build for production
+npm run build
+```
+
+### Docker Deployment (Planned)
+```bash
+# Build Docker image
+docker build -t git-history-ui .
+
+# Run container
+docker run -p 3000:3000 git-history-ui
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Here's how to get started:
+
+### Development Setup
+```bash
+# 1. Fork and clone the repository
+git clone https://github.com/ankit-sharma/git-history-ui.git
+cd git-history-ui
+
+# 2. Install dependencies
+npm install
+
+# 3. Start development servers
+npm run dev
+
+# 4. Make your changes
+# 5. Test your changes
+# 6. Submit a pull request
+```
+
+### Areas for Contribution
+- **UI/UX Improvements**: Better visualizations, animations, or user experience
+- **New Features**: Additional filtering options, blame visualization UI, etc.
+- **Performance**: Optimize graph rendering, search performance
+- **Documentation**: Improve README, add code comments
+- **Testing**: Add unit tests, integration tests
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) file for details
+
+## 🙏 Acknowledgments
+
+- **[D3.js](https://d3js.org/)** - Beautiful data visualizations
+- **[Angular](https://angular.io/)** - Modern frontend framework
+- **[simple-git](https://github.com/steveukx/git-js)** - Git operations
+- **[Express](https://expressjs.com/)** - Backend server framework
+
+## 🐛 Issues & Support
+
+- **🐛 Bug Reports**: Please include steps to reproduce and browser information
+- **💡 Feature Requests**: Describe the use case and expected behavior
+- **❓ Questions**: Open a discussion for general questions
+
+## 📊 Project Status
+
+- ✅ **Core Features**: Complete
+- ✅ **Dark Mode**: Complete  
+- ✅ **Theme System**: Complete
+- ✅ **Search & Filtering**: Complete
+- ✅ **Commit Graph Visualization**: Complete
+- ✅ **Diff Viewer**: Complete
+- 🚧 **Performance Optimization**: In Progress
+- 📋 **Export Features**: Planned
+- 📋 **Blame Visualization**: Backend ready, UI pending
+- 📋 **npm Package**: Ready for publishing
+
+---
+
+Made with ❤️ for developers who love beautiful git visualizations

package/demo.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+// Simple demo script to test the git-history-ui functionality
+const { execSync } = require('child_process');
+const path = require('path');
+
+console.log('🚀 Git History UI Demo');
+console.log('=====================');
+
+// Check if we're in a git repository
+try {
+  execSync('git status', { stdio: 'pipe' });
+  console.log('✅ Git repository detected');
+} catch (error) {
+  console.log('❌ Not in a git repository');
+  console.log('Please run this script from a git repository');
+  process.exit(1);
+}
+
+// Test the CLI
+console.log('\n📋 Testing CLI...');
+try {
+  const result = execSync('node dist/cli.js --help', { encoding: 'utf8' });
+  console.log('✅ CLI help command works');
+  console.log(result);
+} catch (error) {
+  console.log('❌ CLI help command failed');
+  console.log(error.message);
+}
+
+// Test the server
+console.log('\n🌐 Testing server...');
+try {
+  const server = require('./dist/backend/server');
+  console.log('✅ Server module loads successfully');
+} catch (error) {
+  console.log('❌ Server module failed to load');
+  console.log(error.message);
+}
+
+console.log('\n🎉 Demo completed!');
+console.log('\nTo start the server, run:');
+console.log('  npm start');
+console.log('\nOr use the CLI:');
+console.log('  node dist/cli.js');

package/dist/__tests__/gitService.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gitService.test.d.ts.map

package/dist/__tests__/gitService.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gitService.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/gitService.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/gitService.test.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const gitService_1 = require("../backend/gitService");
+describe('GitService', () => {
+    let gitService;
+    beforeEach(() => {
+        gitService = new gitService_1.GitService();
+    });
+    describe('getCommits', () => {
+        it('should return an array of commits', async () => {
+            const commits = await gitService.getCommits({ limit: 5 });
+            expect(Array.isArray(commits)).toBe(true);
+        });
+        it('should respect the limit parameter', async () => {
+            const commits = await gitService.getCommits({ limit: 3 });
+            expect(commits.length).toBeLessThanOrEqual(3);
+        });
+    });
+    describe('getTags', () => {
+        it('should return an array of tags', async () => {
+            const tags = await gitService.getTags();
+            expect(Array.isArray(tags)).toBe(true);
+        });
+    });
+    describe('getBranches', () => {
+        it('should return an array of branches', async () => {
+            const branches = await gitService.getBranches();
+            expect(Array.isArray(branches)).toBe(true);
+        });
+    });
+});
+//# sourceMappingURL=gitService.test.js.map

package/dist/__tests__/gitService.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gitService.test.js","sourceRoot":"","sources":["../../src/__tests__/gitService.test.ts"],"names":[],"mappings":";;AAAA,sDAAmD;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,UAAsB,CAAC;IAE3B,UAAU,CAAC,GAAG,EAAE;QACd,UAAU,GAAG,IAAI,uBAAU,EAAE,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;QAC1B,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;YACjD,MAAM,OAAO,GAAG,MAAM,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;YAC1D,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;YAClD,MAAM,OAAO,GAAG,MAAM,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;YAC1D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;QACvB,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;YAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,OAAO,EAAE,CAAC;YACxC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;QAC3B,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;YAClD,MAAM,QAAQ,GAAG,MAAM,UAAU,CAAC,WAAW,EAAE,CAAC;YAChD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/backend/dev-server.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dev-server.d.ts.map

package/dist/backend/dev-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-server.d.ts","sourceRoot":"","sources":["../../src/backend/dev-server.ts"],"names":[],"mappings":""}

package/dist/backend/dev-server.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const server_1 = require("./server");
+async function main() {
+    try {
+        console.log('🚀 Starting Git History UI Development Server...');
+        await (0, server_1.startServer)(3000, 'localhost');
+        console.log('✅ Development server running at http://localhost:3000');
+    }
+    catch (error) {
+        console.error('❌ Error starting development server:', error);
+        process.exit(1);
+    }
+}
+main();
+//# sourceMappingURL=dev-server.js.map

package/dist/backend/dev-server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-server.js","sourceRoot":"","sources":["../../src/backend/dev-server.ts"],"names":[],"mappings":";;AAAA,qCAAuC;AAEvC,KAAK,UAAU,IAAI;IACjB,IAAI,CAAC;QACH,OAAO,CAAC,GAAG,CAAC,kDAAkD,CAAC,CAAC;QAChE,MAAM,IAAA,oBAAW,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,uDAAuD,CAAC,CAAC;IACvE,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,KAAK,CAAC,CAAC;QAC7D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC;AAED,IAAI,EAAE,CAAC"}

package/dist/backend/gitService.d.ts

@@ -0,0 +1,45 @@
+export interface Commit {
+    hash: string;
+    author: string;
+    date: string;
+    message: string;
+    files: string[];
+    parents: string[];
+    branches: string[];
+    tags: string[];
+}
+export interface DiffFile {
+    file: string;
+    additions: number;
+    deletions: number;
+    changes: string;
+}
+export interface BlameLine {
+    line: number;
+    hash: string;
+    author: string;
+    date: string;
+    content: string;
+}
+export interface GitOptions {
+    file?: string;
+    since?: string;
+    author?: string;
+    limit?: number;
+}
+export declare class GitService {
+    private git;
+    constructor();
+    getCommits(options?: GitOptions): Promise<Commit[]>;
+    getCommit(hash: string): Promise<Commit>;
+    getDiff(hash: string): Promise<DiffFile[]>;
+    getBlame(filePath: string): Promise<BlameLine[]>;
+    getTags(): Promise<string[]>;
+    getBranches(): Promise<string[]>;
+    private getFilesForCommit;
+    private getBranchesForCommit;
+    private getTagsForCommit;
+    private parseDiff;
+    private parseBlame;
+}
+//# sourceMappingURL=gitService.d.ts.map

package/dist/backend/gitService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gitService.d.ts","sourceRoot":"","sources":["../../src/backend/gitService.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAU;IACrB,OAAO,CAAC,GAAG,CAAY;;IAMjB,UAAU,CAAC,OAAO,GAAE,UAAe,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAsDvD,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAkCxC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;IAU1C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAUhD,OAAO,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;IAU5B,WAAW,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YAUxB,iBAAiB;YASjB,oBAAoB;YASpB,gBAAgB;IAS9B,OAAO,CAAC,SAAS;IA2CjB,OAAO,CAAC,UAAU;CAmCnB"}