iris-gantt 1.0.4 → 1.0.6

package/README.md

@@ -1,83 +1,57 @@
-# iris-gantt
+# Iris Gantt
 
-A comprehensive, production-ready Gantt chart component for React with TypeScript support.
+A comprehensive, production-ready Gantt chart component built with React and TypeScript. Easy to install, simple to use, fully customizable, and responsive.
 
-[![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
-
-### 1. Install
-
-```bash
-npm install iris-gantt
-```
-
-### 2. Install Peer Dependencies
-
-```bash
-npm install react react-dom antd@^5.29.3 dayjs @fortawesome/react-fontawesome@^3.1.0 @fortawesome/fontawesome-svg-core@^7.1.0 @fortawesome/free-solid-svg-icons@^7.1.0
-```
-
-### 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,
-    },
-  ]
+## ✨ Features
 
-  return <Gantt tasks={tasks} />
-}
-```
+### Core Features
+- ✅ Interactive task management
+- ✅ Drag & drop task bars
+- ✅ Task dependencies with 4 link types (end-to-start, start-to-start, end-to-end, start-to-end)
+- ✅ Hierarchical tasks (parent/child)
+- ✅ Progress tracking
+- ✅ Multiple task types (task, milestone, project)
+- ✅ Customizable timeline scales
+- ✅ Light & dark themes
 
-**That's it!** Your Gantt chart is ready. 🎉
+### Advanced Features
+- ✅ Auto-scheduling
+- ✅ Critical path analysis
+- ✅ **Baselines (always visible, automatically created)**
+- ✅ Undo/Redo (Ctrl+Z/Y)
+- ✅ Export (CSV, Excel, JSON, PDF)
+- ✅ Filtering & search
+- ✅ Resource leveling
+- ✅ **Fully responsive** (desktop, tablet, mobile)
+- ✅ **Fully customizable** (all text, buttons, colors, fonts)
 
 ## 📦 Installation
 
-### Option 1: Install Everything at Once
-
 ```bash
-npm install iris-gantt react react-dom antd@^5.29.3 dayjs @fortawesome/react-fontawesome@^3.1.0 @fortawesome/fontawesome-svg-core@^7.1.0 @fortawesome/free-solid-svg-icons@^7.1.0
+npm install iris-gantt
 ```
 
-### Option 2: Install Separately
+### Peer Dependencies
 
-```bash
-# Install the package
-npm install iris-gantt
+Make sure you have these installed:
 
-# Install peer dependencies
-npm install react react-dom antd@^5.29.3 dayjs @fortawesome/react-fontawesome@^3.1.0 @fortawesome/fontawesome-svg-core@^7.1.0 @fortawesome/free-solid-svg-icons@^7.1.0
+```bash
+npm install react@^18.3.1 react-dom@^18.3.1
+npm install antd@^5.29.3
+npm install dayjs@^1.11.0
+npm install @fortawesome/fontawesome-svg-core@^7.1.0
+npm install @fortawesome/free-solid-svg-icons@^7.1.0
+npm install @fortawesome/react-fontawesome@^3.1.0
 ```
 
-## 💻 Basic Usage
+## 🚀 Quick Start
 
 ```tsx
-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[] = [
+  const tasks = [
     {
       id: '1',
       text: 'Project Planning',
@@ -97,46 +71,16 @@ function MyGantt() {
     },
   ]
 
-  const links: Link[] = [
-    { id: 'l1', source: '1', target: '2', type: 'e2s' },
-  ]
-
-  return (
-    <Gantt
-      tasks={tasks}
-      links={links}
-      onTaskUpdate={(task) => console.log('Updated:', task)}
-    />
-  )
+  return <Gantt tasks={tasks} />
 }
 ```
 
-## ✨ Features
-
-### 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
+- **[Complete Usage Guide](./USAGE.md)** - Comprehensive documentation with all props and examples
 - **[API Reference](./USAGE.md#api-reference)** - Full TypeScript API
-- **[Examples](./USAGE.md#examples)** - Real-world usage examples
+- **[Responsive Design Guide](./RESPONSIVE_STYLING.md)** - How to make it responsive and match your project styles
+- **[Customization Guide](./CUSTOMIZATION_GUIDE.md)** - Advanced customization options
 
 ## 🎯 Common Imports
 
@@ -148,100 +92,296 @@ import { Gantt } from 'iris-gantt'
 import Gantt from 'iris-gantt'
 
 // Types
-import type { Task, Link, GanttConfig } from 'iris-gantt'
+import type { Task, Link, GanttConfig, GanttUIConfig, GanttStyleConfig } from 'iris-gantt'
 
 // CSS (required!)
 import 'iris-gantt/gantt.css'
 ```
 
-## 🔧 Configuration Example
+## 🔧 Basic Configuration
 
 ```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
+    theme: 'light',
+    weekends: true,
+    containerHeight: '100%',
+    containerMinHeight: '400px',
+  }}
+  onTaskUpdate={(task) => console.log('Updated:', task)}
+/>
+```
+
+## 🎨 Full Customization
+
+### UI Configuration (All Text & Buttons)
+
+```tsx
+<Gantt
+  tasks={tasks}
+  uiConfig={{
+    // Header
+    headerTitle: 'My Project Gantt',
+    showHeader: true,
+    
+    // Toolbar Buttons
+    showAddTaskButton: true,
+    showZoomButtons: true,
+    showExportButtons: true,
+    showFilterSearch: true,
+    addTaskButtonText: 'Add New Task',
+    
+    // All labels, placeholders, tooltips are configurable
+    // See USAGE.md for complete list
+  }}
+/>
+```
+
+### Style Configuration (Colors & Fonts)
+
+```tsx
+<Gantt
+  tasks={tasks}
+  styleConfig={{
+    // Colors - Match your brand
+    primary: '#37a9ef',
+    success: '#77d257',
+    warning: '#fcba2e',
+    danger: '#fe6158',
+    background: '#ffffff',
+    fontColor: '#333333',
+    
+    // Fonts - Use your project fonts
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '14px',
+    
+    // See USAGE.md for complete list
+  }}
+/>
+```
+
+### Responsive Design
+
+```tsx
+<Gantt
+  tasks={tasks}
+  config={{
+    // Responsive container
+    containerHeight: '100%',
+    containerMinHeight: '400px',
+    
+    // Responsive grid width
+    gridWidth: 'clamp(280px, 30vw, 720px)', // Adapts to viewport
   }}
+/>
+```
+
+### Style Integration (CSS Variables)
+
+```css
+/* In your project's CSS */
+.my-gantt-wrapper {
+  /* Match your brand colors */
+  --wx-gantt-primary: #your-brand-color;
+  --wx-gantt-background: var(--your-bg-color);
+  --wx-gantt-font-color: var(--your-text-color);
+  
+  /* Use your project fonts */
+  --wx-gantt-font-family: 'Your Font', sans-serif;
+  
+  /* Responsive sizing */
+  --gantt-grid-width: clamp(280px, 30vw, 720px);
+}
+```
+
+## 📱 Responsive
+
+The component is fully responsive and adapts to:
+- ✅ Desktop (1024px+)
+- ✅ Tablet (768px - 1024px)
+- ✅ Mobile Landscape (480px - 768px)
+- ✅ Mobile Portrait (< 480px)
+
+## 🎯 Baselines
+
+Baselines are **always visible** and **automatically created** when tasks are set or updated. No button is needed - baselines are automatically generated from the current task state.
+
+```tsx
+// Baselines are automatically created and displayed
+<Gantt
+  tasks={tasks}
+  config={{
+    baselines: true, // Always enabled
+  }}
+/>
+```
+
+## 🔄 Event Handlers
+
+```tsx
+<Gantt
+  tasks={tasks}
   onTaskUpdate={(task) => {
-    // Handle task updates
-    console.log('Task updated:', task)
+    // Save to your backend
   }}
   onTaskCreate={(task) => {
-    // Handle new tasks
-    console.log('Task created:', task)
+    // Add to your backend
+  }}
+  onTaskDelete={(taskId) => {
+    // Remove from your backend
   }}
-  onTaskDelete={(id) => {
-    // Handle task deletion
-    console.log('Task deleted:', id)
+  onLinkCreate={(link) => {
+    // Save dependency to your backend
+  }}
+  onLinkDelete={(linkId) => {
+    // Remove dependency from your backend
   }}
 />
 ```
 
-## 📖 More Examples
+## 🐛 Troubleshooting
+
+### CSS Import Error
+
+If you get: `Module not found: Error: Package path ./dist/gantt.css is not exported`
+
+**Solution:**
+```tsx
+import 'iris-gantt/gantt.css'
+// or
+import 'iris-gantt/dist/gantt.css'
+```
+
+### Default Import Error
+
+If you get: `export 'default' was not found`
+
+**Solution:**
+```tsx
+// Use named import instead
+import { Gantt } from 'iris-gantt'
+```
+
+### Runtime Error: recentlyCreatedOwnerStacks
+
+This is a **cached code issue** in your project, not the package.
+
+**Solution:**
+```bash
+# In your project directory
+rm -rf node_modules package-lock.json .next .cache dist build
+npm cache clean --force
+npm install
+npm start
+```
 
-### With State Management
+## 📖 Complete Example
 
 ```tsx
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { Gantt } from 'iris-gantt'
 import 'iris-gantt/gantt.css'
+import type { Task, Link } from 'iris-gantt'
 
-function App() {
-  const [tasks, setTasks] = useState([
+function ProjectGantt() {
+  const [tasks, setTasks] = useState<Task[]>([
     {
       id: '1',
-      text: 'Task 1',
+      text: 'Project Planning',
       start: new Date(2024, 0, 1),
-      end: new Date(2024, 0, 10),
-      duration: 9,
-      progress: 50,
+      end: new Date(2024, 0, 15),
+      duration: 14,
+      progress: 100,
+      type: 'project',
     },
   ])
 
+  const [links, setLinks] = useState<Link[]>([
+    { id: 'l1', source: '1', target: '2', type: 'e2s' },
+  ])
+
   return (
-    <Gantt
-      tasks={tasks}
-      onTaskUpdate={(task) => {
-        setTasks(prev => prev.map(t => t.id === task.id ? task : t))
-      }}
-    />
+    <div style={{ width: '100%', height: '100vh' }}>
+      <Gantt
+        tasks={tasks}
+        links={links}
+        config={{
+          theme: 'light',
+          weekends: true,
+          containerHeight: '100%',
+          containerMinHeight: '500px',
+          gridWidth: 'clamp(300px, 35vw, 800px)',
+        }}
+        uiConfig={{
+          headerTitle: 'My Project Timeline',
+          addTaskButtonText: 'New Task',
+        }}
+        styleConfig={{
+          primary: '#6366f1',
+          fontFamily: 'Inter, sans-serif',
+        }}
+        onTaskUpdate={(task) => {
+          setTasks(tasks.map(t => t.id === task.id ? task : t))
+        }}
+        onTaskCreate={(task) => {
+          setTasks([...tasks, task])
+        }}
+        onTaskDelete={(taskId) => {
+          setTasks(tasks.filter(t => t.id !== taskId))
+        }}
+        onLinkCreate={(link) => {
+          setLinks([...links, link])
+        }}
+        onLinkDelete={(linkId) => {
+          setLinks(links.filter(l => l.id !== linkId))
+        }}
+      />
+    </div>
   )
 }
+
+export default ProjectGantt
 ```
 
-### Read-Only Mode
+## 📝 TypeScript Support
+
+Full TypeScript support is included:
 
 ```tsx
-<Gantt
-  tasks={tasks}
-  config={{ readonly: true }}
-/>
+import { Gantt } from 'iris-gantt'
+import type { Task, Link, GanttConfig, GanttUIConfig, GanttStyleConfig } from 'iris-gantt'
+
+const tasks: Task[] = [...]
+const config: GanttConfig = {...}
+const uiConfig: GanttUIConfig = {...}
+const styleConfig: GanttStyleConfig = {...}
 ```
 
-## 🛠️ Requirements
+## 🎨 Customization Highlights
 
-- React 18+ or 19+
-- TypeScript (recommended)
-- Peer dependencies (see installation above)
+- ✅ **All text is configurable** - buttons, labels, placeholders, tooltips
+- ✅ **All buttons are toggleable** - show/hide any button
+- ✅ **All colors are customizable** - match your brand
+- ✅ **All fonts are customizable** - use your project fonts
+- ✅ **Fully responsive** - adapts to all screen sizes
+- ✅ **Style integration** - uses CSS variables that inherit from your project
 
-## 📝 License
+## 📚 More Documentation
 
-MIT License - see [LICENSE](./LICENSE) file for details
+- **[USAGE.md](./USAGE.md)** - Complete usage guide with all props
+- **[RESPONSIVE_STYLING.md](./RESPONSIVE_STYLING.md)** - Responsive design guide
+- **[CUSTOMIZATION_GUIDE.md](./CUSTOMIZATION_GUIDE.md)** - Advanced customization
 
-## 🔗 Links
+## 🤝 Contributing
 
-- [GitHub Repository](https://github.com/TimJerry725/ganttchart)
-- [Full Documentation](./USAGE.md)
-- [npm Package](https://www.npmjs.com/package/iris-gantt)
+Contributions are welcome! Please feel free to submit a Pull Request.
 
-## 🤝 Contributing
+## 📄 License
 
-Contributions are welcome! Please open an issue or submit a pull request.
+MIT
 
----
+## 🔗 Links
 
-**Made with ❤️ using React + TypeScript**
+- GitHub: https://github.com/TimJerry725/ganttchart.git