iris-gantt 1.0.5 → 1.0.6

package/USAGE.md

@@ -1,54 +1,26 @@
-# iris-gantt Usage Documentation
-
-Complete guide to using the iris-gantt React component library.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Quick Start](#quick-start)
-- [Basic Usage](#basic-usage)
-- [Task Management](#task-management)
-- [Dependencies](#dependencies)
-- [Configuration](#configuration)
-- [Advanced Features](#advanced-features)
-- [API Reference](#api-reference)
-- [Examples](#examples)
-- [Common Patterns](#common-patterns)
-- [Troubleshooting](#troubleshooting)
+# Iris Gantt - Complete Usage Guide
 
 ## Installation
 
-### Install the Package
-
 ```bash
 npm install iris-gantt
 ```
 
-### 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
-```
-
-**Note:** These are required peer dependencies. Make sure they're installed in your project.
-
 ## 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 App() {
-  const tasks: Task[] = [
+function MyGantt() {
+  const tasks = [
     {
       id: '1',
-      text: 'Project Planning',
+      text: 'My Task',
       start: new Date(2024, 0, 1),
-      end: new Date(2024, 0, 15),
-      duration: 14,
-      progress: 100,
+      end: new Date(2024, 0, 10),
+      duration: 9,
+      progress: 50,
     },
   ]
 
@@ -56,567 +28,415 @@ function App() {
 }
 ```
 
-**Important:** Don't forget to import the CSS file: `import 'iris-gantt/gantt.css'`
-
-## Basic Usage
-
-### Minimal Example
+## Import Options
 
+### Named Import (Recommended)
 ```tsx
 import { Gantt } from 'iris-gantt'
 import 'iris-gantt/gantt.css'
-
-const tasks = [
-  {
-    id: '1',
-    text: 'Task 1',
-    start: new Date(2024, 0, 1),
-    end: new Date(2024, 0, 10),
-    duration: 9,
-    progress: 50,
-  },
-]
-
-function MyGantt() {
-  return <Gantt tasks={tasks} />
-}
 ```
 
-### With Event Handlers
-
+### Default Import
 ```tsx
-import { Gantt } from 'iris-gantt'
+import Gantt from 'iris-gantt'
 import 'iris-gantt/gantt.css'
-import type { Task, Link } from 'iris-gantt'
-
-function MyGantt() {
-  const [tasks, setTasks] = useState<Task[]>([])
-  const [links, setLinks] = useState<Link[]>([])
-
-  const handleTaskUpdate = (task: Task) => {
-    setTasks(prev => prev.map(t => t.id === task.id ? task : t))
-    // Or sync with your backend
-    // await updateTask(task)
-  }
-
-  const handleTaskCreate = (task: Task) => {
-    setTasks(prev => [...prev, task])
-    // await createTask(task)
-  }
-
-  const handleTaskDelete = (taskId: string) => {
-    setTasks(prev => prev.filter(t => t.id !== taskId))
-    // await deleteTask(taskId)
-  }
-
-  return (
-    <Gantt
-      tasks={tasks}
-      links={links}
-      onTaskUpdate={handleTaskUpdate}
-      onTaskCreate={handleTaskCreate}
-      onTaskDelete={handleTaskDelete}
-      onLinkCreate={(link) => setLinks(prev => [...prev, link])}
-      onLinkDelete={(linkId) => setLinks(prev => prev.filter(l => l.id !== linkId))}
-    />
-  )
-}
 ```
 
-## Task Management
-
-### Creating Tasks
-
-Tasks are created through the built-in task creator (click the "+ Add Task" button) or programmatically:
-
+### CSS Import
 ```tsx
-const newTask: Task = {
-  id: 'unique-id',
-  text: 'Task Name',
-  start: new Date(2024, 0, 1),
-  end: new Date(2024, 0, 10),
-  duration: 9, // days
-  progress: 0, // 0-100
-  type: 'task', // 'task' | 'milestone' | 'project'
-  color: '#4A90E2',
-  owner: 'John Doe',
-  priority: 'high', // 'low' | 'medium' | 'high'
-  details: 'Task description',
-}
-```
-
-### Task Properties
-
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `id` | `string` | ✅ | Unique identifier |
-| `text` | `string` | ✅ | Task name/label |
-| `start` | `Date` | ✅ | Start date |
-| `end` | `Date` | ✅ | End date |
-| `duration` | `number` | ✅ | Duration in days |
-| `progress` | `number` | ✅ | Progress 0-100 |
-| `type` | `'task' \| 'milestone' \| 'project'` | ❌ | Task type |
-| `parent` | `string` | ❌ | Parent task ID (for hierarchy) |
-| `open` | `boolean` | ❌ | Whether parent is expanded |
-| `color` | `string` | ❌ | Hex color code |
-| `owner` | `string` | ❌ | Assigned person |
-| `priority` | `'low' \| 'medium' \| 'high'` | ❌ | Priority level |
-| `details` | `string` | ❌ | Task description |
-| `dependencies` | `string[]` | ❌ | Array of task IDs this depends on |
-| `segments` | `TaskSegment[]` | ❌ | For split tasks |
-
-### Hierarchical Tasks (Parent/Child)
+// Option 1 (preferred)
+import 'iris-gantt/gantt.css'
 
-```tsx
-const tasks: Task[] = [
-  {
-    id: '1',
-    text: 'Project',
-    start: new Date(2024, 0, 1),
-    end: new Date(2024, 2, 31),
-    duration: 90,
-    progress: 30,
-    type: 'project',
-    open: true, // Expanded by default
-  },
-  {
-    id: '2',
-    text: 'Phase 1',
-    start: new Date(2024, 0, 1),
-    end: new Date(2024, 1, 15),
-    duration: 45,
-    progress: 50,
-    parent: '1', // Child of task '1'
-  },
-  {
-    id: '3',
-    text: 'Phase 2',
-    start: new Date(2024, 1, 16),
-    end: new Date(2024, 2, 31),
-    duration: 45,
-    progress: 10,
-    parent: '1', // Child of task '1'
-  },
-]
+// Option 2 (if Option 1 doesn't work)
+import 'iris-gantt/dist/gantt.css'
 ```
 
-### Task Types
+## Basic Usage
 
 ```tsx
-// Regular task
-{ type: 'task', ... }
-
-// Milestone (rendered as a diamond)
-{ type: 'milestone', ... }
-
-// Project (summary task, can have children)
-{ type: 'project', ... }
-```
-
-### Split Tasks
-
-Tasks can be split into multiple segments:
+import { Gantt } from 'iris-gantt'
+import 'iris-gantt/gantt.css'
+import type { Task, Link } from 'iris-gantt'
 
-```tsx
-const task: Task = {
-  id: '1',
-  text: 'Split Task',
-  start: new Date(2024, 0, 1),
-  end: new Date(2024, 0, 20),
-  duration: 20,
-  progress: 50,
-  segments: [
+function MyGantt() {
+  const tasks: Task[] = [
     {
+      id: '1',
+      text: 'Project Planning',
       start: new Date(2024, 0, 1),
-      end: new Date(2024, 0, 10),
-      duration: 9,
+      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, 0, 20),
-      duration: 5,
+      end: new Date(2024, 1, 15),
+      duration: 31,
+      progress: 60,
+      type: 'task',
     },
-  ],
-}
-```
-
-## Dependencies
-
-### Creating Links
-
-Links define relationships between tasks:
-
-```tsx
-const links: Link[] = [
-  {
-    id: 'l1',
-    source: '1', // Source task ID
-    target: '2', // Target task ID
-    type: 'e2s', // Dependency type
-    lag: 0, // Optional lag time
-    lagUnit: 'day', // 'day' | 'hour' | 'week' | 'month'
-  },
-]
-```
-
-### Dependency Types
-
-| Type | Code | Description |
-|------|------|-------------|
-| End-to-Start | `'e2s'` | Task B starts when Task A ends (most common) |
-| Start-to-Start | `'s2s'` | Tasks start together |
-| End-to-End | `'e2e'` | Tasks end together |
-| Start-to-End | `'s2e'` | Task B ends when Task A starts |
-
-### Example with Dependencies
-
-```tsx
-const tasks: Task[] = [
-  { id: '1', text: 'Design', start: new Date(2024, 0, 1), end: new Date(2024, 0, 10), duration: 9, progress: 100 },
-  { id: '2', text: 'Development', start: new Date(2024, 0, 11), end: new Date(2024, 0, 25), duration: 14, progress: 50 },
-  { id: '3', text: 'Testing', start: new Date(2024, 0, 26), end: new Date(2024, 1, 5), duration: 10, progress: 0 },
-]
-
-const links: Link[] = [
-  { id: 'l1', source: '1', target: '2', type: 'e2s' }, // Development starts after Design
-  { id: 'l2', source: '2', target: '3', type: 'e2s' }, // Testing starts after Development
-]
-```
-
-### Lag Time
+  ]
 
-Add delays or lead time to dependencies:
+  const links: Link[] = [
+    { id: 'l1', source: '1', target: '2', type: 'e2s' },
+  ]
 
-```tsx
-const links: Link[] = [
-  {
-    id: 'l1',
-    source: '1',
-    target: '2',
-    type: 'e2s',
-    lag: 2, // 2 days delay
-    lagUnit: 'day',
-  },
-  {
-    id: 'l2',
-    source: '2',
-    target: '3',
-    type: 'e2s',
-    lag: -1, // 1 day lead time (negative = starts early)
-    lagUnit: 'day',
-  },
-]
+  return (
+    <Gantt
+      tasks={tasks}
+      links={links}
+      onTaskUpdate={(task) => console.log('Updated:', task)}
+    />
+  )
+}
 ```
 
-## Configuration
+## Complete Props Configuration
 
-### Basic Configuration
+### Main Props
 
 ```tsx
 <Gantt
-  tasks={tasks}
-  config={{
-    theme: 'light', // or 'dark'
-    weekends: true,
-    readonly: false,
-    editable: true,
-  }}
+  // Required
+  tasks={Task[]}
+  
+  // Optional
+  links={Link[]}
+  config={GanttConfig}
+  uiConfig={GanttUIConfig}
+  styleConfig={GanttStyleConfig}
+  iconConfig={GanttIconConfig}
+  
+  // Event Handlers
+  onTaskUpdate={(task: Task) => void}
+  onTaskCreate={(task: Task) => void}
+  onTaskDelete={(taskId: string) => void}
+  onLinkCreate={(link: Link) => void}
+  onLinkDelete={(linkId: string) => void}
 />
 ```
 
-### Timeline Scales
+## UI Configuration (uiConfig)
 
-Customize the timeline display:
+All text, labels, and button visibility can be customized:
 
 ```tsx
-import type { Scale } from 'iris-gantt'
-
-const scales: Scale[] = [
-  { unit: 'month', step: 1, format: 'MMM YYYY' },
-  { unit: 'week', step: 1, format: 'W' },
-  { unit: 'day', step: 1, format: 'D' },
-]
-
 <Gantt
   tasks={tasks}
-  config={{ scales }}
+  uiConfig={{
+    // Header
+    headerTitle: 'My Project Gantt',
+    showHeader: true,
+    
+    // Toolbar Buttons Visibility
+    showAddTaskButton: true,
+    showBaselineButton: false, // Baselines are always visible, no button needed
+    showZoomButtons: true,
+    showExportButtons: true,
+    showFilterSearch: true,
+    
+    // Toolbar Button Labels
+    addTaskButtonText: 'Add New Task',
+    zoomOutTooltip: 'Zoom Out',
+    zoomInTooltip: 'Zoom In',
+    resetZoomTooltip: 'Reset Zoom',
+    exportCSVTooltip: 'Export to CSV',
+    exportExcelTooltip: 'Export to Excel',
+    exportJSONTooltip: 'Export to JSON',
+    exportPDFTooltip: 'Export to PDF',
+    
+    // Task Creator Modal
+    taskCreatorTitle: 'Create New Task',
+    taskCreatorOkText: 'Create',
+    taskCreatorCancelText: 'Cancel',
+    taskNameLabel: 'Task Name',
+    taskNamePlaceholder: 'Enter task name',
+    typeLabel: 'Type',
+    priorityLabel: 'Priority',
+    startDateLabel: 'Start Date',
+    durationLabel: 'Duration (days)',
+    colorLabel: 'Color',
+    progressLabel: 'Progress (%)',
+    ownerLabel: 'Owner',
+    ownerPlaceholder: 'Assign to...',
+    detailsLabel: 'Details',
+    detailsPlaceholder: 'Add task description...',
+    taskTypeOptions: {
+      task: 'Task',
+      milestone: 'Milestone',
+      project: 'Project',
+    },
+    priorityOptions: {
+      low: 'Low',
+      medium: 'Medium',
+      high: 'High',
+    },
+    
+    // Task Editor Modal
+    taskEditorTitle: 'Edit Task',
+    taskEditorSaveText: 'Save',
+    taskEditorCancelText: 'Cancel',
+    taskEditorDeleteText: 'Delete',
+    deleteConfirmTitle: 'Delete Task',
+    deleteConfirmContent: 'This action cannot be undone.',
+    deleteConfirmOkText: 'Yes, Delete',
+    deleteConfirmCancelText: 'No',
+    
+    // Filter Search
+    searchPlaceholder: 'Search tasks...',
+    allOwnersText: 'All Owners',
+    allStatusText: 'All Status',
+    allPriorityText: 'All Priority',
+    clearFiltersText: 'Clear',
+    statusOptions: {
+      all: 'All Status',
+      notStarted: 'Not Started',
+      inProgress: 'In Progress',
+      completed: 'Completed',
+    },
+    priorityFilterOptions: {
+      all: 'All Priority',
+      low: 'Low',
+      medium: 'Medium',
+      high: 'High',
+    },
+    
+    // Column Labels
+    columnLabels: {
+      name: 'Name',
+      dependsOn: 'Depends on',
+      duration: 'Duration',
+      start: 'Start',
+    },
+    
+    // Validation
+    taskNameRequired: 'Please enter task name',
+  }}
 />
 ```
 
-Available units: `'hour'`, `'day'`, `'week'`, `'month'`, `'quarter'`, `'year'`
+## Style Configuration (styleConfig)
 
-### Custom Columns
+Customize colors, fonts, and spacing to match your project:
 
 ```tsx
-import type { Column } from 'iris-gantt'
-
-const columns: Column[] = [
-  { name: 'text', label: 'Task', width: 300, align: 'left', resize: true },
-  { name: 'owner', label: 'Owner', width: 150, align: 'left' },
-  { name: 'priority', label: 'Priority', width: 100, align: 'center' },
-  { name: 'duration', label: 'Duration', width: 100, align: 'right' },
-]
-
 <Gantt
   tasks={tasks}
-  config={{ columns }}
-/>
-```
-
-### Custom Column Templates
-
-```tsx
-const columns: Column[] = [
-  {
-    name: 'status',
-    label: 'Status',
-    width: 120,
-    template: (task) => {
-      if (task.progress === 100) return '✅ Complete'
-      if (task.progress > 0) return '🔄 In Progress'
-      return '⏳ Not Started'
+  styleConfig={{
+    // Colors
+    primary: '#37a9ef',
+    primarySelected: '#d5eaf7',
+    success: '#77d257',
+    warning: '#fcba2e',
+    danger: '#fe6158',
+    background: '#ffffff',
+    backgroundAlt: '#f2f3f7',
+    backgroundHover: '#eaedf5',
+    selectColor: '#eaedf5',
+    taskColor: '#37a9ef',
+    taskFillColor: 'rgba(0, 0, 0, 0.15)',
+    projectColor: '#81C784',
+    milestoneColor: '#9c27b0',
+    fontColor: '#333333',
+    fontColorAlt: '#9fa1ae',
+    iconColor: '#9fa1ae',
+    borderColor: '#e6e6e6',
+    
+    // Fonts
+    fontFamily: 'Inter, sans-serif',
+    fontMono: 'Fira Code, monospace',
+    fontSize: '14px',
+    fontWeight: '400',
+    lineHeight: '1.5',
+    
+    // Spacing
+    spacingXS: '4px',
+    spacingSM: '8px',
+    spacingMD: '12px',
+    spacingLG: '16px',
+    
+    // Custom CSS Variables (advanced)
+    customCSSVariables: {
+      '--my-custom-var': 'value',
     },
-  },
-]
-```
-
-### Holidays
-
-```tsx
-<Gantt
-  tasks={tasks}
-  config={{
-    holidays: [
-      new Date(2024, 0, 1), // New Year
-      new Date(2024, 6, 4), // Independence Day
-      new Date(2024, 11, 25), // Christmas
-    ],
   }}
 />
 ```
 
-### Markers
+## Icon Configuration (iconConfig)
 
-Add vertical markers to highlight important dates:
+Customize icons throughout the component:
 
 ```tsx
-import type { Marker } from 'iris-gantt'
-
-const markers: Marker[] = [
-  {
-    id: 'm1',
-    date: new Date(2024, 2, 15),
-    text: 'Release Date',
-    css: 'border-left: 2px solid red;',
-  },
-]
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faSearch } from '@fortawesome/free-solid-svg-icons'
 
 <Gantt
   tasks={tasks}
-  config={{ markers }}
+  iconConfig={{
+    // Toolbar icons
+    addTask: <FontAwesomeIcon icon={faPlus} />,
+    zoomIn: 'search-plus', // FontAwesome icon name
+    zoomOut: <CustomIcon />, // Custom React component
+    resetZoom: faRotateLeft,
+    exportCSV: faFileCsv,
+    exportExcel: faFileExcel,
+    exportJSON: faFileCode,
+    exportPDF: faFilePdf,
+    
+    // Grid icons
+    gripVertical: faGripVertical,
+    chevronRight: faChevronRight,
+    chevronDown: faChevronDown,
+    plus: faPlus,
+    
+    // Context menu icons
+    edit: faEdit,
+    delete: faTrash,
+    copy: faCopy,
+    link: faLink,
+    flag: faFlag,
+    folder: faFolder,
+    tasks: faTasks,
+    rotateLeft: faRotateLeft,
+  }}
 />
 ```
 
-### Sizing
+## Configuration (config)
 
 ```tsx
 <Gantt
   tasks={tasks}
   config={{
-    taskHeight: 30, // Height of task bars
-    rowHeight: 44, // Height of each row
-    scaleHeight: 28, // Height of timeline scales
-    columnWidth: 50, // Width of timeline columns
-    minColumnWidth: 30, // Minimum column width
+    // Layout
+    columns: Column[], // Custom columns
+    scales: Scale[], // Timeline scales
+    readonly: false,
+    editable: true,
+    
+    // Sizing
+    taskHeight: 28,
+    rowHeight: 44,
+    scaleHeight: 28,
+    columnWidth: 80,
+    minColumnWidth: 60,
+    
+    // Features
+    autoSchedule: false,
+    criticalPath: false,
+    baselines: true, // Always enabled - automatically created
+    weekends: true,
+    holidays: [],
+    
+    // Theme
+    theme: 'light' | 'dark',
+    locale: 'en',
+    
+    // Responsive
+    containerHeight: '100%', // or '600px', '50vh', etc.
+    containerMinHeight: '400px',
+    gridWidth: 'clamp(280px, 30vw, 720px)', // Responsive width
   }}
 />
 ```
 
-## Advanced Features
+## Responsive Design
 
-### Auto-Scheduling
+The component is fully responsive and adapts to:
+- ✅ Desktop (1024px+)
+- ✅ Tablet (768px - 1024px)
+- ✅ Mobile Landscape (480px - 768px)
+- ✅ Mobile Portrait (< 480px)
 
-Automatically schedule tasks based on dependencies:
+### Responsive Configuration
 
 ```tsx
 <Gantt
   tasks={tasks}
-  links={links}
   config={{
-    autoSchedule: true,
+    // Responsive container
+    containerHeight: '100%',
+    containerMinHeight: '400px',
+    
+    // Responsive grid width
+    gridWidth: 'clamp(280px, 30vw, 720px)', // Adapts to viewport
+    // or fixed: '720px'
+    // or percentage: '30vw'
   }}
 />
 ```
 
-The toolbar includes an "Auto-Schedule" button that recalculates task dates based on dependencies.
+### Style Integration
+
+Override CSS variables to match your project:
 
-### Critical Path
+```css
+/* In your project's CSS */
+.my-gantt-wrapper {
+  /* Colors - Match your brand */
+  --wx-gantt-primary: #your-brand-color;
+  --wx-gantt-background: var(--your-bg-color, #ffffff);
+  --wx-gantt-font-color: var(--your-text-color, #333);
+  
+  /* Fonts - Use your project fonts */
+  --wx-gantt-font-family: 'Your Font', -apple-system, sans-serif;
+  --wx-gantt-font-size: 14px;
+  
+  /* Layout - Responsive sizing */
+  --gantt-container-height: 100%;
+  --gantt-container-min-height: 400px;
+  --gantt-grid-width: clamp(280px, 30vw, 720px);
+  --gantt-row-height: 44px;
+}
+```
 
-Highlight the critical path (longest path through dependencies):
+## 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}
-  links={links}
   config={{
-    criticalPath: true,
+    baselines: true, // Always enabled
   }}
 />
 ```
 
-Critical tasks are highlighted in red.
-
-### Baselines
-
-Track original plans vs. current state:
+## Event Handlers
 
 ```tsx
-import { createBaseline } from 'iris-gantt'
-
-// Create baseline from current tasks
-const baseline = createBaseline(tasks)
-
-// Later, compare current tasks to baseline
 <Gantt
-  tasks={currentTasks}
-  config={{
-    baselines: true,
-    // Baselines are stored internally
+  tasks={tasks}
+  onTaskUpdate={(task) => {
+    console.log('Task updated:', task)
+    // Save to your backend
+  }}
+  onTaskCreate={(task) => {
+    console.log('Task created:', task)
+    // Add to your backend
+  }}
+  onTaskDelete={(taskId) => {
+    console.log('Task deleted:', taskId)
+    // Remove from your backend
+  }}
+  onLinkCreate={(link) => {
+    console.log('Link created:', link)
+    // Save dependency to your backend
+  }}
+  onLinkDelete={(linkId) => {
+    console.log('Link deleted:', linkId)
+    // Remove dependency from your backend
   }}
 />
 ```
 
-### Undo/Redo
-
-Built-in undo/redo system (Ctrl+Z / Ctrl+Y):
-
-```tsx
-// No configuration needed - works automatically
-<Gantt tasks={tasks} />
-```
-
-The toolbar includes undo/redo buttons.
-
-### Export
-
-Export your Gantt chart data:
-
-```tsx
-import * as ExportUtils from 'iris-gantt'
-
-// Export to CSV
-const csv = ExportUtils.exportToCSV(tasks, links)
-
-// Export to JSON
-const json = ExportUtils.exportToJSON(tasks, links)
-
-// Export to Excel
-const excel = ExportUtils.exportToExcel(tasks, links)
-```
-
-The toolbar includes an export button with a dropdown menu.
-
-### Filtering and Search
-
-```tsx
-import { FilterSearch, applyFilters, type FilterOptions } from 'iris-gantt'
-
-const [filteredTasks, setFilteredTasks] = useState(tasks)
-const [filters, setFilters] = useState<FilterOptions>({
-  search: '',
-  status: 'all',
-  priority: 'all',
-  owner: '',
-})
-
-// Apply filters
-useEffect(() => {
-  const filtered = applyFilters(tasks, filters)
-  setFilteredTasks(filtered)
-}, [tasks, filters])
-
-<Gantt tasks={filteredTasks} />
-```
-
-## API Reference
-
-### Gantt Component Props
-
-```tsx
-interface GanttProps {
-  tasks: Task[]                    // Required: Array of tasks
-  links?: Link[]                   // Optional: Array of dependency links
-  config?: Partial<GanttConfig>    // Optional: Configuration object
-  onTaskUpdate?: (task: Task) => void
-  onTaskCreate?: (task: Task) => void
-  onTaskDelete?: (taskId: string) => void
-  onLinkCreate?: (link: Link) => void
-  onLinkDelete?: (linkId: string) => void
-}
-```
-
-### GanttConfig
-
-```tsx
-interface GanttConfig {
-  columns?: Column[]
-  scales?: Scale[]
-  readonly?: boolean
-  editable?: boolean
-  taskHeight?: number
-  rowHeight?: number
-  scaleHeight?: number
-  columnWidth?: number
-  minColumnWidth?: number
-  autoSchedule?: boolean
-  criticalPath?: boolean
-  baselines?: boolean
-  markers?: Marker[]
-  weekends?: boolean
-  holidays?: Date[]
-  theme?: 'light' | 'dark'
-  locale?: string
-}
-```
-
-### Task
-
-```tsx
-interface Task {
-  id: string
-  text: string
-  start: Date
-  end: Date
-  duration: number
-  progress: number
-  type?: 'task' | 'milestone' | 'project'
-  parent?: string
-  open?: boolean
-  color?: string
-  details?: string
-  owner?: string
-  priority?: 'low' | 'medium' | 'high'
-  dependencies?: string[]
-  segments?: TaskSegment[]
-}
-```
-
-### Link
-
-```tsx
-interface Link {
-  id: string
-  source: string
-  target: string
-  type: 'e2s' | 's2s' | 'e2e' | 's2e'
-  lag?: number
-  lagUnit?: 'day' | 'hour' | 'week' | 'month'
-}
-```
-
-## Examples
-
-### Complete Example with State Management
+## Complete Example
 
 ```tsx
 import React, { useState } from 'react'
@@ -628,211 +448,187 @@ function ProjectGantt() {
   const [tasks, setTasks] = useState<Task[]>([
     {
       id: '1',
-      text: 'Project Setup',
+      text: 'Project Planning',
       start: new Date(2024, 0, 1),
-      end: new Date(2024, 0, 5),
-      duration: 4,
+      end: new Date(2024, 0, 15),
+      duration: 14,
       progress: 100,
       type: 'project',
-      open: true,
+      color: '#81C784',
     },
     {
       id: '2',
-      text: 'Design Phase',
-      start: new Date(2024, 0, 6),
-      end: new Date(2024, 0, 20),
-      duration: 14,
-      progress: 75,
-      parent: '1',
-      owner: 'Alice',
-      priority: 'high',
-    },
-    {
-      id: '3',
       text: 'Development',
-      start: new Date(2024, 0, 21),
+      start: new Date(2024, 0, 15),
       end: new Date(2024, 1, 15),
-      duration: 25,
-      progress: 30,
-      parent: '1',
-      owner: 'Bob',
+      duration: 31,
+      progress: 60,
+      type: 'task',
+      color: '#37a9ef',
+      owner: 'John Doe',
       priority: 'high',
     },
   ])
 
   const [links, setLinks] = useState<Link[]>([
-    { id: 'l1', source: '2', target: '3', type: 'e2s' },
+    { id: 'l1', source: '1', target: '2', type: 'e2s' },
   ])
 
   return (
-    <div style={{ height: '600px' }}>
+    <div style={{ width: '100%', height: '100vh' }}>
       <Gantt
         tasks={tasks}
         links={links}
         config={{
           theme: 'light',
           weekends: true,
-          criticalPath: true,
-          autoSchedule: true,
+          containerHeight: '100%',
+          containerMinHeight: '500px',
+          gridWidth: 'clamp(300px, 35vw, 800px)',
+        }}
+        uiConfig={{
+          headerTitle: 'My Project Timeline',
+          addTaskButtonText: 'New Task',
+          showHeader: true,
+        }}
+        styleConfig={{
+          primary: '#6366f1',
+          fontFamily: 'Inter, sans-serif',
         }}
         onTaskUpdate={(task) => {
-          setTasks(prev => prev.map(t => t.id === task.id ? task : t))
+          setTasks(tasks.map(t => t.id === task.id ? task : t))
         }}
         onTaskCreate={(task) => {
-          setTasks(prev => [...prev, task])
+          setTasks([...tasks, task])
         }}
-        onTaskDelete={(id) => {
-          setTasks(prev => prev.filter(t => t.id !== id))
-          setLinks(prev => prev.filter(l => l.source !== id && l.target !== id))
+        onTaskDelete={(taskId) => {
+          setTasks(tasks.filter(t => t.id !== taskId))
         }}
         onLinkCreate={(link) => {
-          setLinks(prev => [...prev, link])
+          setLinks([...links, link])
         }}
-        onLinkDelete={(id) => {
-          setLinks(prev => prev.filter(l => l.id !== id))
+        onLinkDelete={(linkId) => {
+          setLinks(links.filter(l => l.id !== linkId))
         }}
       />
     </div>
   )
 }
-```
-
-### With React Query
-
-```tsx
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Gantt } from 'iris-gantt'
-import 'iris-gantt/gantt.css'
-
-function GanttWithBackend() {
-  const queryClient = useQueryClient()
-
-  const { data: tasks = [] } = useQuery({
-    queryKey: ['tasks'],
-    queryFn: () => fetch('/api/tasks').then(r => r.json()),
-  })
-
-  const { data: links = [] } = useQuery({
-    queryKey: ['links'],
-    queryFn: () => fetch('/api/links').then(r => r.json()),
-  })
-
-  const updateTask = useMutation({
-    mutationFn: (task) => fetch(`/api/tasks/${task.id}`, {
-      method: 'PUT',
-      body: JSON.stringify(task),
-    }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['tasks'] })
-    },
-  })
 
-  return (
-    <Gantt
-      tasks={tasks}
-      links={links}
-      onTaskUpdate={(task) => updateTask.mutate(task)}
-    />
-  )
-}
+export default ProjectGantt
 ```
 
-## Common Patterns
+## Troubleshooting
 
-### Controlled Component Pattern
+### CSS Import Error
 
-```tsx
-const [tasks, setTasks] = useState(initialTasks)
+If you get: `Module not found: Error: Package path ./dist/gantt.css is not exported`
 
-<Gantt
-  tasks={tasks}
-  onTaskUpdate={(task) => {
-    // Update local state
-    setTasks(prev => prev.map(t => t.id === task.id ? task : t))
-    // Sync with backend
-    updateTaskInBackend(task)
-  }}
-/>
+**Solution:**
+```tsx
+// Try this instead
+import 'iris-gantt/gantt.css'
+// or
+import 'iris-gantt/dist/gantt.css'
 ```
 
-### Read-Only Mode
+### Default Import Error
+
+If you get: `export 'default' was not found`
 
+**Solution:**
 ```tsx
-<Gantt
-  tasks={tasks}
-  config={{ readonly: true }}
-/>
+// Use named import instead
+import { Gantt } from 'iris-gantt'
 ```
 
-### Custom Styling
+### Runtime Error: recentlyCreatedOwnerStacks
 
-The component uses CSS variables that you can override:
+This is a **cached code issue** in your project, not the package.
 
-```css
-.gantt-container {
-  --wx-gantt-primary: #your-color;
-  --gantt-row-height: 50px;
-  /* etc. */
-}
+**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
 ```
 
-## Troubleshooting
-
-### CSS Not Loading
+## TypeScript Support
 
-**Problem:** Styles are not applied.
+Full TypeScript support is included:
 
-**Solution:** Make sure you import the CSS:
 ```tsx
-import 'iris-gantt/gantt.css'
+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 = {...}
 ```
 
-### Tasks Not Rendering
+## Peer Dependencies
 
-**Problem:** Tasks don't appear on the chart.
+Make sure you have these installed:
 
-**Solution:** 
-- Check that `start` and `end` are `Date` objects, not strings
-- Verify `duration` is a positive number
-- Ensure tasks are within the visible date range
+```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
+```
 
-### TypeScript Errors
+## API Reference
 
-**Problem:** Type errors when using the component.
+### Task Interface
 
-**Solution:** Import types explicitly:
 ```tsx
-import type { Task, Link, GanttProps } from 'iris-gantt'
+interface Task {
+  id: string
+  text: string
+  start: Date
+  end: Date
+  duration: number
+  progress: number
+  type?: 'task' | 'milestone' | 'project'
+  parent?: string
+  open?: boolean
+  color?: string
+  details?: string
+  owner?: string
+  priority?: 'low' | 'medium' | 'high'
+  dependencies?: string[]
+  segments?: TaskSegment[]
+}
 ```
 
-### Dependencies Not Showing
-
-**Problem:** Dependency arrows don't appear.
-
-**Solution:**
-- Ensure `links` array is provided
-- Check that `source` and `target` IDs match task IDs
-- Verify tasks exist for all link references
-
-### Date Format Issues
-
-**Problem:** Dates are incorrect or not displaying.
+### Link Interface
 
-**Solution:** Always use `Date` objects, not strings:
 ```tsx
-// ✅ Correct
-start: new Date(2024, 0, 1)
-
-// ❌ Wrong
-start: '2024-01-01'
+interface Link {
+  id: string
+  source: string
+  target: string
+  type: 'e2s' | 's2s' | 'e2e' | 's2e'
+  lag?: number
+  lagUnit?: 'day' | 'hour' | 'week' | 'month'
+}
 ```
 
-## Additional Resources
+## Best Practices
 
-- [GitHub Repository](https://github.com/TimJerry725/ganttchart)
-- [API Reference](./README.md)
-- [Publishing Guide](./PUBLISHING.md)
+1. **Always import CSS**: `import 'iris-gantt/gantt.css'`
+2. **Use TypeScript**: Full type support is available
+3. **Handle events**: Use `onTaskUpdate`, `onTaskCreate`, etc. to sync with your backend
+4. **Customize styles**: Use `styleConfig` and CSS variables to match your project
+5. **Responsive design**: Use `clamp()` for truly responsive widths
+6. **Test on mobile**: The component is responsive, test on all devices
 
----
+## Support
 
-**Need Help?** Open an issue on GitHub or check the examples in the Storybook demos.
+For issues, questions, or contributions, please visit:
+- GitHub: https://github.com/TimJerry725/ganttchart.git