@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/gantt/GanttFilterBar.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { format } from 'date-fns'
+import type { GanttFilterState } from './types'
+
+export interface GanttFilterBarProps {
+  filters: GanttFilterState
+  onFilterChange: (filters: GanttFilterState) => void
+  uniqueStatuses: string[]
+  uniqueCategories: string[]
+}
+
+export function GanttFilterBar({ filters, onFilterChange, uniqueStatuses, uniqueCategories }: GanttFilterBarProps) {
+  const hasActiveFilters =
+    filters.search !== '' ||
+    filters.statuses.length > 0 ||
+    filters.categories.length > 0 ||
+    filters.dateRange.start !== null ||
+    filters.dateRange.end !== null
+
+  return (
+    <div className="gantt-filter-bar">
+      <input
+        type="text"
+        className="gantt-filter-search"
+        placeholder="Search items..."
+        value={filters.search}
+        onChange={(e) => onFilterChange({ ...filters, search: e.target.value })}
+      />
+      {uniqueStatuses.length > 0 && (
+        <select
+          className="gantt-filter-select"
+          value=""
+          onChange={(e) => {
+            const val = e.target.value
+            if (!val) return
+            onFilterChange({
+              ...filters,
+              statuses: filters.statuses.includes(val) ? filters.statuses.filter((s) => s !== val) : [...filters.statuses, val],
+            })
+          }}
+        >
+          <option value="">Status{filters.statuses.length > 0 ? ` (${filters.statuses.length})` : ''}</option>
+          {uniqueStatuses.map((s) => (
+            <option key={s} value={s}>{filters.statuses.includes(s) ? '\u2713 ' : ''}{s.replace(/_/g, ' ')}</option>
+          ))}
+        </select>
+      )}
+      {uniqueCategories.length > 0 && (
+        <select
+          className="gantt-filter-select"
+          value=""
+          onChange={(e) => {
+            const val = e.target.value
+            if (!val) return
+            onFilterChange({
+              ...filters,
+              categories: filters.categories.includes(val) ? filters.categories.filter((c) => c !== val) : [...filters.categories, val],
+            })
+          }}
+        >
+          <option value="">Category{filters.categories.length > 0 ? ` (${filters.categories.length})` : ''}</option>
+          {uniqueCategories.map((c) => (
+            <option key={c} value={c}>{filters.categories.includes(c) ? '\u2713 ' : ''}{c}</option>
+          ))}
+        </select>
+      )}
+      <input
+        type="date"
+        className="gantt-filter-date"
+        value={filters.dateRange.start ? format(filters.dateRange.start, 'yyyy-MM-dd') : ''}
+        onChange={(e) => onFilterChange({ ...filters, dateRange: { ...filters.dateRange, start: e.target.value ? new Date(e.target.value) : null } })}
+        title="Filter from date"
+      />
+      <input
+        type="date"
+        className="gantt-filter-date"
+        value={filters.dateRange.end ? format(filters.dateRange.end, 'yyyy-MM-dd') : ''}
+        onChange={(e) => onFilterChange({ ...filters, dateRange: { ...filters.dateRange, end: e.target.value ? new Date(e.target.value) : null } })}
+        title="Filter to date"
+      />
+      {hasActiveFilters && (
+        <button className="gantt-filter-clear" onClick={() => onFilterChange({ search: '', statuses: [], categories: [], dateRange: { start: null, end: null } })}>Clear</button>
+      )}
+      {/* Active filter pills */}
+      {filters.statuses.map((s) => (
+        <span key={`s-${s}`} className="gantt-filter-pill">
+          {s.replace(/_/g, ' ')}
+          <button onClick={() => onFilterChange({ ...filters, statuses: filters.statuses.filter((x) => x !== s) })}>x</button>
+        </span>
+      ))}
+      {filters.categories.map((c) => (
+        <span key={`c-${c}`} className="gantt-filter-pill">
+          {c}
+          <button onClick={() => onFilterChange({ ...filters, categories: filters.categories.filter((x) => x !== c) })}>x</button>
+        </span>
+      ))}
+    </div>
+  )
+}

package/src/components/gantt/GanttListView.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { format } from 'date-fns'
+import { getHealthColor } from './lib/progress'
+import { INDENT_WIDTH } from './hooks/useGanttState'
+import type { UseGanttStateReturn } from './hooks/useGanttState'
+
+export interface GanttListViewProps {
+  listItems: UseGanttStateReturn['listItems']
+  focusedRowIndex: UseGanttStateReturn['focusedRowIndex']
+  categoryColors: UseGanttStateReturn['categoryColors']
+  handleItemClick: UseGanttStateReturn['handleItemClick']
+}
+
+export function GanttListView({
+  listItems,
+  focusedRowIndex,
+  categoryColors,
+  handleItemClick,
+}: GanttListViewProps) {
+  return (
+    <div className="gantt-list">
+      <div className="gantt-list-header">
+        <span className="gantt-list-col-title">Title</span>
+        <span className="gantt-list-col-status">Status</span>
+        <span className="gantt-list-col-category">Category</span>
+        <span className="gantt-list-col-dates">Dates</span>
+        <span className="gantt-list-col-progress">Progress</span>
+      </div>
+      {listItems.map((task, idx) => (
+        <div
+          key={task.item.id}
+          className={`gantt-list-row ${focusedRowIndex === idx ? 'gantt-row-focused' : ''}`}
+          onClick={() => handleItemClick(task.item)}
+        >
+          <span className="gantt-list-col-title">
+            {task.depth > 0 && <span style={{ width: task.depth * INDENT_WIDTH, display: 'inline-block' }} />}
+            {task.item.title}
+          </span>
+          <span className="gantt-list-col-status">
+            <span className={`gantt-status-badge gantt-status-${task.item.status}`}>{task.item.status.replace(/_/g, ' ')}</span>
+          </span>
+          <span className="gantt-list-col-category">
+            {task.item.category && (
+              <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[task.item.category] || categoryColors.other || '#6b7280' }}>
+                {task.item.category}
+              </span>
+            )}
+          </span>
+          <span className="gantt-list-col-dates">
+            {format(task.start, 'MMM d')} \u2013 {format(task.end, 'MMM d')}
+          </span>
+          <span className="gantt-list-col-progress">
+            <div className="gantt-list-progress-bar">
+              <div className="gantt-list-progress-fill" style={{ width: `${task.progress}%`, backgroundColor: getHealthColor(task.healthStatus) }} />
+            </div>
+            <span>{task.progress}%</span>
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/gantt/GanttTimelineView.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { differenceInDays, format, isWeekend, isToday } from 'date-fns'
+import type { GanttTask, TimelineItem } from './types'
+import { getHealthColor } from './lib/progress'
+import { ROW_HEIGHT, ZOOM_LEVELS, INDENT_WIDTH } from './hooks/useGanttState'
+import type { UseGanttStateReturn } from './hooks/useGanttState'
+
+export interface GanttTimelineViewProps {
+  // Layout props
+  infoColumnWidth: number
+  infoColumnLabel: string
+  showCategory: boolean
+  showStatus: boolean
+  showFullscreen: boolean
+
+  // State from useGanttState
+  zoomIndex: UseGanttStateReturn['zoomIndex']
+  setZoomIndex: UseGanttStateReturn['setZoomIndex']
+  collapsed: UseGanttStateReturn['collapsed']
+  mounted: UseGanttStateReturn['mounted']
+  dragState: UseGanttStateReturn['dragState']
+  focusedRowIndex: UseGanttStateReturn['focusedRowIndex']
+  dayWidth: UseGanttStateReturn['dayWidth']
+  tasks: UseGanttStateReturn['tasks']
+  startDate: UseGanttStateReturn['startDate']
+  days: UseGanttStateReturn['days']
+  months: UseGanttStateReturn['months']
+  timeHeaderUnits: UseGanttStateReturn['timeHeaderUnits']
+  dependencyPaths: UseGanttStateReturn['dependencyPaths']
+  timelineWidth: UseGanttStateReturn['timelineWidth']
+  bodyHeight: UseGanttStateReturn['bodyHeight']
+  isFullscreen: UseGanttStateReturn['isFullscreen']
+  categoryColors: UseGanttStateReturn['categoryColors']
+  onDateChange: UseGanttStateReturn['onDateChange']
+
+  // Refs
+  bodyScrollRef: UseGanttStateReturn['bodyScrollRef']
+  headerTimelineRef: UseGanttStateReturn['headerTimelineRef']
+  infoColumnRef: UseGanttStateReturn['infoColumnRef']
+
+  // Handlers
+  toggleFullscreen: UseGanttStateReturn['toggleFullscreen']
+  handleItemClick: UseGanttStateReturn['handleItemClick']
+  toggleCollapse: UseGanttStateReturn['toggleCollapse']
+  handleBodyScroll: UseGanttStateReturn['handleBodyScroll']
+  getBarPosition: UseGanttStateReturn['getBarPosition']
+  handleDragStart: UseGanttStateReturn['handleDragStart']
+}
+
+export function GanttTimelineView({
+  infoColumnWidth,
+  infoColumnLabel,
+  showCategory,
+  showStatus,
+  showFullscreen,
+  zoomIndex,
+  setZoomIndex,
+  collapsed,
+  mounted,
+  dragState,
+  focusedRowIndex,
+  dayWidth,
+  tasks,
+  startDate,
+  days,
+  months,
+  timeHeaderUnits,
+  dependencyPaths,
+  timelineWidth,
+  bodyHeight,
+  isFullscreen,
+  categoryColors,
+  onDateChange,
+  bodyScrollRef,
+  headerTimelineRef,
+  infoColumnRef,
+  toggleFullscreen,
+  handleItemClick,
+  toggleCollapse,
+  handleBodyScroll,
+  getBarPosition,
+  handleDragStart,
+}: GanttTimelineViewProps) {
+  return (
+    <>
+      {/* Header row */}
+      <div className="gantt-header-row">
+        <div className="gantt-info-header" style={{ width: infoColumnWidth }}>
+          <span style={{ flex: 1 }}>{infoColumnLabel}</span>
+          <div className="gantt-zoom-controls">
+            <button onClick={() => setZoomIndex((i) => Math.max(i - 1, 0))} disabled={zoomIndex === 0} aria-label="Zoom out">-</button>
+            <input type="range" min="0" max={ZOOM_LEVELS.length - 1} value={zoomIndex} onChange={(e) => setZoomIndex(parseInt(e.target.value))} className="gantt-zoom-slider" aria-label={`Zoom level: ${dayWidth}px per day`} />
+            <button onClick={() => setZoomIndex((i) => Math.min(i + 1, ZOOM_LEVELS.length - 1))} disabled={zoomIndex === ZOOM_LEVELS.length - 1} aria-label="Zoom in">+</button>
+            {showFullscreen && (
+              <button onClick={toggleFullscreen} aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'} title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
+                {isFullscreen ? '\u22A0' : '\u229E'}
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="gantt-timeline-header" ref={headerTimelineRef}>
+          <div style={{ width: timelineWidth }}>
+            <div className="gantt-month-header" style={{ width: timelineWidth }}>
+              {months.map((m, i) => (<div key={i} className="gantt-month" style={{ width: m.days * dayWidth }}>{m.label}</div>))}
+            </div>
+            <div className="gantt-day-header" style={{ width: timelineWidth }}>
+              {timeHeaderUnits.mode === 'weeks' ? (
+                timeHeaderUnits.units.map((unit, i) => (
+                  <div key={i} className={`gantt-week ${unit.hasToday ? 'has-today' : ''}`} style={{ width: unit.width }}>{unit.width > 40 ? unit.label : ''}</div>
+                ))
+              ) : (
+                timeHeaderUnits.units.map((unit, i) => (
+                  <div key={i} className={`gantt-day ${unit.isWeekend ? 'weekend' : ''} ${unit.isToday ? 'today' : ''}`} style={{ width: unit.width }}>{unit.label}</div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Scrollable body */}
+      <div className="gantt-body-scroll" ref={bodyScrollRef} onScroll={handleBodyScroll}>
+        <div className="gantt-info-column" ref={infoColumnRef} style={{ width: infoColumnWidth }}>
+          {tasks.map((task, rowIdx) => (
+            <div key={task.item.id} className={`gantt-info-row ${focusedRowIndex === rowIdx ? 'gantt-row-focused' : ''}`}>
+              <div className="gantt-row-indent" style={{ width: task.depth * INDENT_WIDTH }} />
+              {task.hasChildren ? (
+                <button className="gantt-collapse-btn" onClick={() => toggleCollapse(task.item.id)} aria-label={collapsed.has(task.item.id) ? 'Expand' : 'Collapse'}>
+                  {collapsed.has(task.item.id) ? '\u25B6' : '\u25BC'}
+                </button>
+              ) : (<span className="gantt-collapse-spacer" />)}
+              <span className="gantt-row-title" onClick={() => handleItemClick(task.item)} title={task.item.title} style={{ cursor: 'pointer' }}>
+                {task.item.title}
+              </span>
+              {showCategory && task.item.category && (
+                <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[task.item.category] || categoryColors.other || '#6b7280' }}>
+                  {task.item.category}
+                </span>
+              )}
+              {showStatus && (
+                <span className={`gantt-status-badge gantt-status-${task.item.status}`}>{task.item.status.replace(/_/g, ' ')}</span>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="gantt-timeline-body" style={{ width: timelineWidth, height: bodyHeight }}>
+          {days.map((day, i) => (
+            <div key={i} className={`gantt-grid-line ${isWeekend(day) ? 'weekend' : ''} ${mounted && isToday(day) ? 'today' : ''}`} style={{ left: i * dayWidth, width: dayWidth, height: bodyHeight }} />
+          ))}
+          {tasks.map((_, i) => (<div key={i} className="gantt-row-line" style={{ top: (i + 1) * ROW_HEIGHT - 1 }} />))}
+
+          {dependencyPaths.length > 0 && (
+            <svg className="gantt-deps-svg" style={{ width: timelineWidth, height: bodyHeight }} aria-hidden="true">
+              {dependencyPaths.map((dep, i) => (<path key={`${dep.fromId}-${dep.toId}-${i}`} d={dep.path} className="gantt-dep-line" />))}
+            </svg>
+          )}
+
+          {tasks.map((task, rowIndex) => {
+            const isDragging = dragState?.taskId === task.item.id
+            const pos = getBarPosition(task, rowIndex, true)
+            const barColor = getHealthColor(task.healthStatus)
+            const dates = isDragging ? { start: dragState!.currentStart, end: dragState!.currentEnd } : { start: task.start, end: task.end }
+
+            return (
+              <div
+                key={task.item.id}
+                className={`gantt-bar depth-${Math.min(task.depth, 3)} ${isDragging ? 'dragging' : ''}`}
+                style={{
+                  left: pos.left, width: pos.width, top: pos.top, height: pos.height,
+                  backgroundColor: barColor,
+                  cursor: onDateChange ? (dragState ? (dragState.type === 'move' ? 'grabbing' : 'ew-resize') : 'grab') : 'pointer',
+                  opacity: task.item.status === 'completed' || task.item.status === 'closed' ? 0.7 : 0.85,
+                }}
+                onClick={() => !dragState && handleItemClick(task.item)}
+                onMouseDown={(e) => handleDragStart(e, task, 'move')}
+                title={`${task.item.title}\n${format(dates.start, 'MMM d, yyyy')} \u2013 ${format(dates.end, 'MMM d, yyyy')}\nProgress: ${task.progress}%`}
+              >
+                {onDateChange && (
+                  <>
+                    <div className="gantt-bar-handle gantt-bar-handle-left" onMouseDown={(e) => { e.stopPropagation(); handleDragStart(e, task, 'resize-start') }} />
+                    <div className="gantt-bar-handle gantt-bar-handle-right" onMouseDown={(e) => { e.stopPropagation(); handleDragStart(e, task, 'resize-end') }} />
+                  </>
+                )}
+                {task.timeProgress > 0 && task.timeProgress < 100 && (
+                  <div className="gantt-bar-time-marker" style={{ left: `${task.timeProgress}%` }} />
+                )}
+                {task.progress > 0 && (
+                  <div className={`gantt-bar-progress ${task.progress < task.timeProgress - 10 ? 'behind' : task.progress > task.timeProgress + 10 ? 'ahead' : ''}`} style={{ width: `${task.progress}%` }} />
+                )}
+                <span className="gantt-bar-label">{pos.width > 80 ? task.item.title.replace(/^\[[^\]]+\]\s*/, '') : ''}</span>
+                {isDragging && (<div className="gantt-drag-tooltip">{format(dates.start, 'MMM d')} \u2013 {format(dates.end, 'MMM d')}</div>)}
+              </div>
+            )
+          })}
+
+          {mounted && (() => {
+            const todayOffset = differenceInDays(new Date(), startDate)
+            if (todayOffset >= 0 && todayOffset < days.length) return <div className="gantt-today-line" style={{ left: todayOffset * dayWidth + dayWidth / 2 }} />
+            return null
+          })()}
+        </div>
+      </div>
+
+      <div className="gantt-legend">
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#22c55e' }} /><span>On Track</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#eab308' }} /><span>At Risk</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#ef4444' }} /><span>Blocked</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#9ca3af' }} /><span>Not Started</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#3b82f6', width: 2, height: 12 }} /><span>Today</span></div>
+      </div>
+    </>
+  )
+}