iris-gantt 1.0.0 → 1.0.2

package/README.md

@@ -1,278 +1,246 @@
-# SVAR Gantt Chart - Complete React Implementation
+# iris-gantt
 
-A comprehensive, production-ready Gantt chart component built with React and TypeScript, featuring all FREE and PRO capabilities from SVAR Gantt in a single, unified component.
+A comprehensive, production-ready Gantt chart component for React with TypeScript support.
 
-![Gantt Chart Demo](https://img.shields.io/badge/React-19.2.0-blue)
-![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-blue)
-![Storybook](https://img.shields.io/badge/Storybook-10.1.11-ff69b4)
-![License](https://img.shields.io/badge/License-MIT-green)
-
-## ✨ Features
-
-### 🎯 Core Features
-- ✅ **Multi-column Task Grid** - Name, dates, duration, progress
-- ✅ **Hierarchical Structure** - Parent/child tasks with expand/collapse
-- ✅ **Configurable Timeline** - Hour/day/week/month/quarter/year scales
-- ✅ **Zoom Controls** - In, out, reset with smooth transitions
-- ✅ **Synchronized Scrolling** - Grid and timeline stay in sync
-- ✅ **Weekend & Holiday Highlighting** - Visual differentiation
-- ✅ **Light & Dark Themes** - Professional styling
-
-### 🎨 Interactive Features
-- ✅ **Drag & Drop** - Move tasks by dragging bars
-- ✅ **Task Resize** - Adjust start/end dates from edges
-- ✅ **Dependencies** - 4 types with curved arrows (e2s, s2s, e2e, s2e)
-- ✅ **Progress Tracking** - Visual indicators on bars
-- ✅ **Task Types** - Regular tasks, milestones, projects
-- ✅ **Color Coding** - Custom colors per task
-
-### 💎 PRO Features
-- ✅ **Undo/Redo System** - 50-action history with Ctrl+Z/Y
-- ✅ **Critical Path Analysis** - Automatic calculation and highlighting
-- ✅ **Auto-Scheduling** - Forward/backward scheduling modes
-- ✅ **Baselines** - Visual variance tracking with purple bars
-- ✅ **Resource Leveling** - Prevent overallocation
-- ✅ **Task Creation UI** - Beautiful modal form
-- ✅ **Task Editing UI** - Double-click to edit
-- ✅ **Advanced Filtering** - By status, priority, owner
-- ✅ **Search** - Real-time across all fields
-- ✅ **Export** - CSV, Excel, JSON, PDF
+[![npm version](https://img.shields.io/npm/v/iris-gantt)](https://www.npmjs.com/package/iris-gantt)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## 🚀 Quick Start
 
-### Installation
+### 1. Install
 
 ```bash
-npm install
+npm install iris-gantt
 ```
 
-### Run Storybook
+### 2. Install Peer Dependencies
 
 ```bash
-npm run storybook
+npm install react react-dom antd dayjs @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
+```
+
+### 3. Use in Your Component
+
+**Important:** Don't forget to import the CSS!
+
+```tsx
+// Option 1: Named import (recommended)
+import { Gantt } from 'iris-gantt'
+import 'iris-gantt/gantt.css'
+
+// Option 2: Default import (also supported)
+import Gantt from 'iris-gantt'
+import 'iris-gantt/gantt.css'
+
+function App() {
+  const tasks = [
+    {
+      id: '1',
+      text: 'My First Task',
+      start: new Date(2024, 0, 1),
+      end: new Date(2024, 0, 10),
+      duration: 9,
+      progress: 50,
+    },
+  ]
+
+  return <Gantt tasks={tasks} />
+}
 ```
 
-Or use the helper script:
+**That's it!** Your Gantt chart is ready. 🎉
+
+## 📦 Installation
+
+### Option 1: Install Everything at Once
 
 ```bash
-./run-storybook.sh
+npm install iris-gantt react react-dom antd dayjs @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
 ```
 
-Visit http://localhost:6006 to see all demos!
+### Option 2: Install Separately
 
-## 📖 Usage
+```bash
+# Install the package
+npm install iris-gantt
+
+# Install peer dependencies
+npm install react react-dom antd dayjs @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
+```
+
+## 💻 Basic Usage
 
 ```tsx
-import { Gantt } from './components/Gantt';
-import type { Task, Link } from './components/types';
-
-const tasks: Task[] = [
-  {
-    id: '1',
-    text: 'Project Planning',
-    start: new Date(2024, 0, 1),
-    end: new Date(2024, 0, 15),
-    duration: 14,
-    progress: 100,
-    type: 'project',
-    owner: 'John Smith',
-    priority: 'high',
-  },
-  {
-    id: '2',
-    text: 'Development',
-    start: new Date(2024, 0, 15),
-    end: new Date(2024, 1, 15),
-    duration: 31,
-    progress: 60,
-    owner: 'Jane Doe',
-    priority: 'high',
-  },
-];
-
-const links: Link[] = [
-  { id: 'l1', source: '1', target: '2', type: 'e2s' },
-];
+import React from 'react'
+import { Gantt } from 'iris-gantt'
+import 'iris-gantt/gantt.css'
+import type { Task, Link } from 'iris-gantt'
+
+function MyGantt() {
+  const tasks: Task[] = [
+    {
+      id: '1',
+      text: 'Project Planning',
+      start: new Date(2024, 0, 1),
+      end: new Date(2024, 0, 15),
+      duration: 14,
+      progress: 100,
+      type: 'project',
+    },
+    {
+      id: '2',
+      text: 'Development',
+      start: new Date(2024, 0, 15),
+      end: new Date(2024, 1, 15),
+      duration: 31,
+      progress: 60,
+    },
+  ]
+
+  const links: Link[] = [
+    { id: 'l1', source: '1', target: '2', type: 'e2s' },
+  ]
 
-function App() {
   return (
     <Gantt
       tasks={tasks}
       links={links}
-      config={{
-        weekends: true,
-        theme: 'light',
-      }}
       onTaskUpdate={(task) => console.log('Updated:', task)}
-      onTaskCreate={(task) => console.log('Created:', task)}
-      onTaskDelete={(id) => console.log('Deleted:', id)}
     />
-  );
+  )
 }
 ```
 
-## 🎨 Storybook Demos
-
-The project includes comprehensive Storybook demos:
-
-- **Gantt Chart/Basic Examples** - Simple projects and use cases
-- **Gantt Chart/Advanced Features** - All PRO features in action
-- **Gantt Chart/Baselines** - Baseline tracking demonstrations
+## ✨ Features
 
-## 🛠️ Configuration
+### Core Features
+- ✅ Interactive task management
+- ✅ Drag & drop task bars
+- ✅ Task dependencies with 4 link types
+- ✅ Hierarchical tasks (parent/child)
+- ✅ Progress tracking
+- ✅ Multiple task types (task, milestone, project)
+- ✅ Customizable timeline scales
+- ✅ Light & dark themes
+
+### Advanced Features
+- ✅ Auto-scheduling
+- ✅ Critical path analysis
+- ✅ Baselines
+- ✅ Undo/Redo (Ctrl+Z/Y)
+- ✅ Export (CSV, Excel, JSON, PDF)
+- ✅ Filtering & search
+- ✅ Resource leveling
+
+## 📚 Documentation
+
+- **[Complete Usage Guide](./USAGE.md)** - Comprehensive documentation with examples
+- **[API Reference](./USAGE.md#api-reference)** - Full TypeScript API
+- **[Examples](./USAGE.md#examples)** - Real-world usage examples
+
+## 🎯 Common Imports
 
 ```tsx
-interface GanttConfig {
-  columns?: Column[];              // Custom columns
-  scales?: Scale[];                // Timeline scales
-  readonly?: boolean;              // Disable editing
-  editable?: boolean;              // Enable inline editing
-  taskHeight?: number;             // Task bar height
-  rowHeight?: number;              // Row height
-  columnWidth?: number;            // Timeline column width
-  weekends?: boolean;              // Highlight weekends
-  holidays?: Date[];               // Holiday dates
-  theme?: 'light' | 'dark';        // Theme
-}
-```
-
-## 🎯 Interactive Controls
+// Main component (named import - recommended)
+import { Gantt } from 'iris-gantt'
 
-### Toolbar Buttons
-- **+ Add Task** - Create new tasks
-- **↶ Undo / ↷ Redo** - Undo/redo with Ctrl+Z/Y
-- **⚡ Auto-Schedule** - Auto-schedule based on dependencies
-- **📊 Level Resources** - Balance workload
-- **🎯 Critical Path** - Highlight critical tasks
-- **📍 Baselines** - Create and toggle baselines
-- **🔍 Zoom** - Zoom in/out/reset
-- **💾 Export** - CSV, Excel, JSON, PDF
+// Main component (default import - also works)
+import Gantt from 'iris-gantt'
 
-### Keyboard Shortcuts
-- **Ctrl+Z** - Undo
-- **Ctrl+Y** or **Ctrl+Shift+Z** - Redo
-- **Double-click task** - Edit task
+// Types
+import type { Task, Link, GanttConfig } from 'iris-gantt'
 
-### Mouse Actions
-- **Drag task bar** - Move task
-- **Drag task edges** - Resize (adjust dates)
-- **Click task** - Select
-- **Hover dependencies** - Highlight relationships
+// CSS (required!)
+import 'iris-gantt/gantt.css'
+```
 
-## 📁 Project Structure
+## 🔧 Configuration Example
 
+```tsx
+<Gantt
+  tasks={tasks}
+  links={links}
+  config={{
+    theme: 'light',        // 'light' | 'dark'
+    weekends: true,        // Highlight weekends
+    criticalPath: true,    // Show critical path
+    autoSchedule: true,    // Enable auto-scheduling
+  }}
+  onTaskUpdate={(task) => {
+    // Handle task updates
+    console.log('Task updated:', task)
+  }}
+  onTaskCreate={(task) => {
+    // Handle new tasks
+    console.log('Task created:', task)
+  }}
+  onTaskDelete={(id) => {
+    // Handle task deletion
+    console.log('Task deleted:', id)
+  }}
+/>
 ```
-src/
-├── components/
-│   ├── Gantt/
-│   │   ├── Gantt.tsx              # Main unified component
-│   │   ├── Grid.tsx               # Task list grid
-│   │   ├── Timeline.tsx           # Timeline rendering
-│   │   ├── TaskBar.tsx            # Task visualization
-│   │   ├── TaskCreator.tsx        # Task creation modal
-│   │   ├── TaskEditor.tsx         # Task editing modal
-│   │   ├── LinkRenderer.tsx       # Dependency arrows
-│   │   ├── DragDrop.tsx           # Drag & drop logic
-│   │   ├── FilterSearch.tsx       # Filtering system
-│   │   ├── UndoRedo.tsx           # Undo/redo system
-│   │   ├── CriticalPath.tsx       # Critical path algorithm
-│   │   ├── AutoScheduler.tsx      # Auto-scheduling
-│   │   ├── Baselines.tsx          # Baseline tracking
-│   │   ├── ExportUtils.tsx        # Export functionality
-│   │   └── gantt.css              # All styles
-│   ├── types.ts                   # TypeScript interfaces
-│   └── utils/
-│       └── dateUtils.ts           # Date calculations
-└── stories/
-    ├── AdvancedGantt.stories.tsx  # Basic examples
-    ├── GanttProFeatures.stories.tsx # Advanced features
-    └── BaselinesDemo.stories.tsx   # Baseline demos
-```
 
-## 🎭 Task Types
+## 📖 More Examples
+
+### With State Management
 
 ```tsx
-interface Task {
-  id: string;
-  text: string;
-  start: Date;
-  end: Date;
-  duration: number;
-  progress: number;
-  type?: 'task' | 'milestone' | 'project';
-  parent?: string;
-  color?: string;
-  owner?: string;
-  priority?: 'low' | 'medium' | 'high';
-  details?: string;
-}
-```
+import { useState } from 'react'
+import { Gantt } from 'iris-gantt'
+import 'iris-gantt/gantt.css'
 
-## 🔗 Dependency Types
+function App() {
+  const [tasks, setTasks] = useState([
+    {
+      id: '1',
+      text: 'Task 1',
+      start: new Date(2024, 0, 1),
+      end: new Date(2024, 0, 10),
+      duration: 9,
+      progress: 50,
+    },
+  ])
 
-- **e2s** (End-to-Start) - Task B starts when Task A ends
-- **s2s** (Start-to-Start) - Tasks start together
-- **e2e** (End-to-End) - Tasks end together
-- **s2e** (Start-to-End) - Task B ends when Task A starts
+  return (
+    <Gantt
+      tasks={tasks}
+      onTaskUpdate={(task) => {
+        setTasks(prev => prev.map(t => t.id === task.id ? task : t))
+      }}
+    />
+  )
+}
+```
 
-## 🎨 Theming
+### Read-Only Mode
 
 ```tsx
 <Gantt
   tasks={tasks}
-  config={{ theme: 'dark' }}  // or 'light'
+  config={{ readonly: true }}
 />
 ```
 
-Custom colors can be applied per task:
-```tsx
-{
-  id: '1',
-  text: 'High Priority',
-  color: '#E74C3C',  // Red
-  // ...
-}
-```
-
-## 📊 Export Formats
-
-- **CSV** - Simple comma-separated values
-- **Excel** - .xls format with UTF-8 BOM
-- **JSON** - Complete project data (can be imported)
-- **PDF** - Text report (can be enhanced with jsPDF)
+## 🛠️ Requirements
 
-## 🤝 Comparison with SVAR Gantt
-
-This implementation provides **ALL** features from both SVAR Free and PRO editions in a single component:
-
-| Feature | SVAR Free | SVAR PRO | This Implementation |
-|---------|-----------|----------|---------------------|
-| Task Management | ✅ | ✅ | ✅ |
-| Dependencies | ✅ | ✅ | ✅ |
-| Drag & Drop | ✅ | ✅ | ✅ |
-| Progress Tracking | ✅ | ✅ | ✅ |
-| Undo/Redo | ❌ | ✅ | ✅ |
-| Auto-Scheduling | ❌ | ✅ | ✅ |
-| Critical Path | ❌ | ✅ | ✅ |
-| Baselines | ❌ | ✅ | ✅ |
-| Resource Leveling | ❌ | ✅ | ✅ |
-| Export | ❌ | ✅ | ✅ |
-| Filtering | ❌ | ✅ | ✅ |
+- React 18+ or 19+
+- TypeScript (recommended)
+- Peer dependencies (see installation above)
 
 ## 📝 License
 
-MIT - Free for commercial and personal use
-
-## 🙏 Acknowledgments
-
-- Inspired by [SVAR Gantt Chart](https://svar.dev/demos/react/gantt/)
-- Built with React 19, TypeScript 5.9, and Storybook 10
+MIT License - see [LICENSE](./LICENSE) file for details
 
 ## 🔗 Links
 
 - [GitHub Repository](https://github.com/TimJerry725/ganttchart)
-- [Documentation](./GANTT_FEATURES.md)
-- [Storybook Demos](http://localhost:6006)
+- [Full Documentation](./USAGE.md)
+- [npm Package](https://www.npmjs.com/package/iris-gantt)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
 
 ---