laif-ds/dist/agent-docs/components/GanttChart.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # GanttChart
 
 ## Overview
 
 Composable Gantt chart with a tree, time scale, and draggable bars. Built as a root `Gantt` component with subcomponents `Gantt.Controls` and `Gantt.Chart`. Supports zoom dimensions, drag step sizes, programmatic callbacks, and custom left-render content for items.
 
 ---
 
 ## Components & Props
 
 ### Gantt (root)
 
 | Prop                  | Type                                   | Default                | Description |
 | --------------------- | -------------------------------------- | ---------------------- | ----------- |
 | `children`            | `React.ReactNode`                      | —                      | Compose `Gantt.Controls` and `Gantt.Chart`. |
 | `draggable`           | `boolean`                              | `false`                | Enable dragging/resizing of bars. |
 | `defaultDimension`    | `GanttDimensions`                      | `GanttDimensions.HOUR` | Initial zoom (hour, day, etc.). |
 | `defaultDragStepSize` | `DragStepSizes`                        | `DragStepSizes.THIRTY_MIN` | Initial drag step. |
 | `treeTitle`           | `string`                               | `"Attività"`          | Title of the left tree column. |
 
 See `enums` in `ui/gantt/enums/` for `GanttDimensions` and `DragStepSizes` values.
 
 ### Gantt.Chart
 
 | Prop              | Type                        | Default     | Description |
 | ----------------- | --------------------------- | ----------- | ----------- |
 | `data`            | `GanttDataType[]`           | **required**| Items to render (with optional nested children). |
 | `className`       | `string`                    | `undefined` | Wrapper classes. |
 | `onBarDoubleClick`| `(bar) => void`             | `undefined` | Invoked on item double click. |
 | `onBarChange`     | `(bar, newData) => void`    | `undefined` | Invoked after drag/resize changes. |
 
 ### Gantt.Controls
 
 | Prop        | Type     | Default     | Description |
 | ----------- | -------- | ----------- | ----------- |
 | `className` | `string` | `undefined` | Toolbar wrapper classes. |
 
 ---
 
 ## Data Types
 
 Minimal item structure (`ui/gantt/types/GanttData.tsx`):
 
 ```ts
 type RawGanttDataType = {
   key: string
   title: string
   color?: string
   data?: BarItemDataType            // Repeat or fixed datetime interval
   children?: GanttDataType[]        // Nested items
   leftRender?: React.ReactNode | ((bar) => React.ReactNode)
 }
 
 type NoRepeatDataType = { startDate: string; endDate: string }
 type RepeatDataType = {
   repeatType: DataRepeatTypes
   fromTime: number
   toTime: number
   fromDate?: string
   toDate?: string
   weekdays?: number[]
   monthdays?: number[]
 }
 ```
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import Gantt from "laif-ds/ui/gantt/components/Gantt/Gantt";
 
 export function Basic() {
   return (
     <div className="h-[500px]">
       <Gantt>
         <Gantt.Controls />
         <Gantt.Chart data={sampleData} />
       </Gantt>
     </div>
   );
 }
 ```
 
 ### Draggable + Defaults
 
 ```tsx
 import { GanttDimensions, DragStepSizes } from "laif-ds/ui/gantt/enums";
 
 export function Draggable() {
   return (
     <div className="h-[500px]">
       <Gantt draggable defaultDimension={GanttDimensions.DAY} defaultDragStepSize={DragStepSizes.ONE_DAY}>
         <Gantt.Controls />
         <Gantt.Chart data={sampleData} />
       </Gantt>
     </div>
   );
 }
 ```
 
 ### Custom Tree Title
 
 ```tsx
 <div className="h-[500px]">
   <Gantt draggable treeTitle="Progetti">
     <Gantt.Controls />
     <Gantt.Chart data={sampleData} />
   </Gantt>
 </div>
 ```
 
 ---
 
 ## Notes
 
 - **Virtualization**: Tree, bars, and scale use windowed lists for performance.
 - **Current time**: Auto-updates while scrolling to keep the date indicator in sync.
 - **Left render**: Use `leftRender` to inject icons/actions next to item titles.