@startsimpli/ui 0.1.7 → 0.3.0

package/src/components/gantt/index.ts

@@ -0,0 +1,19 @@
+export { GanttChart } from './GanttChart'
+export type {
+  TimelineItem,
+  TimelineDependency,
+  GanttTask,
+  GanttChartProps,
+  GanttFilterState,
+  GanttViewMode,
+  HealthStatus,
+} from './types'
+export {
+  calculateExpectedProgress,
+  calculateHealthStatus,
+  getHealthColor,
+} from './lib/progress'
+export {
+  parseDateRangeFromTitle,
+  getHierarchyLevel,
+} from './lib/dates'

package/src/components/gantt/lib/dates.ts

@@ -0,0 +1,61 @@
+import { startOfYear, endOfYear, startOfMonth, endOfMonth, addYears } from 'date-fns'
+
+const MONTHS: Record<string, number> = {
+  JAN: 0, FEB: 1, MAR: 2, APR: 3, MAY: 4, JUN: 5,
+  JUL: 6, AUG: 7, SEP: 8, OCT: 9, NOV: 10, DEC: 11,
+}
+
+export function parseDateRangeFromTitle(
+  title: string,
+  referenceYear: number = new Date().getFullYear()
+): { start: Date; end: Date } | null {
+  const match = title.match(/^\[([^\]]+)\]/)
+  if (!match) return null
+
+  const tag = match[1].toUpperCase()
+  const baseDate = new Date(referenceYear, 0, 1)
+
+  const yearMatch = tag.match(/^(\d+)YR$/)
+  if (yearMatch) {
+    const years = parseInt(yearMatch[1])
+    return { start: startOfYear(baseDate), end: endOfYear(addYears(baseDate, years - 1)) }
+  }
+
+  if (tag === 'H1') return { start: new Date(referenceYear, 0, 1), end: new Date(referenceYear, 5, 30) }
+  if (tag === 'H2') return { start: new Date(referenceYear, 6, 1), end: new Date(referenceYear, 11, 31) }
+
+  const quarterMatch = tag.match(/^Q([1-4])$/)
+  if (quarterMatch) {
+    const q = parseInt(quarterMatch[1])
+    const startMonth = (q - 1) * 3
+    return { start: new Date(referenceYear, startMonth, 1), end: endOfMonth(new Date(referenceYear, startMonth + 2, 1)) }
+  }
+
+  if (tag in MONTHS) {
+    const month = MONTHS[tag]
+    return { start: startOfMonth(new Date(referenceYear, month, 1)), end: endOfMonth(new Date(referenceYear, month, 1)) }
+  }
+
+  const weekMatch = tag.match(/^W(\d+)$/)
+  if (weekMatch) {
+    const week = parseInt(weekMatch[1])
+    const start = new Date(referenceYear, 0, 1 + (week - 1) * 7)
+    const end = new Date(start)
+    end.setDate(end.getDate() + 6)
+    return { start, end }
+  }
+
+  return null
+}
+
+export function getHierarchyLevel(title: string): number {
+  const match = title.match(/^\[([^\]]+)\]/)
+  if (!match) return 0
+  const tag = match[1].toUpperCase()
+  if (/^\d+YR$/.test(tag)) return 100 + parseInt(tag)
+  if (/^H[12]$/.test(tag)) return 50
+  if (/^Q[1-4]$/.test(tag)) return 40
+  if (tag in MONTHS) return 30
+  if (/^W\d+$/.test(tag)) return 20
+  return 10
+}

package/src/components/gantt/lib/progress.ts

@@ -0,0 +1,39 @@
+import type { HealthStatus } from '../types'
+
+export interface HealthStatusResult {
+  status: HealthStatus
+  reason?: string
+}
+
+export function calculateExpectedProgress(
+  startDate: Date,
+  endDate: Date,
+  currentDate: Date = new Date()
+): number {
+  if (currentDate <= startDate) return 0
+  if (currentDate >= endDate) return 100
+  const totalDuration = endDate.getTime() - startDate.getTime()
+  const elapsed = currentDate.getTime() - startDate.getTime()
+  return Math.round((elapsed / totalDuration) * 100)
+}
+
+export function calculateHealthStatus(
+  progress: number,
+  expectedProgress: number,
+  hasBlockers: boolean = false
+): HealthStatusResult {
+  if (hasBlockers) return { status: 'blocked', reason: 'Has active blockers' }
+  if (progress === 0 && expectedProgress > 0) return { status: 'not_started', reason: 'Work has not started' }
+  if (progress - expectedProgress < -10) return { status: 'at_risk', reason: 'Behind schedule' }
+  return { status: 'on_track' }
+}
+
+export function getHealthColor(status: HealthStatus): string {
+  const colors: Record<HealthStatus, string> = {
+    on_track: '#22c55e',
+    at_risk: '#eab308',
+    blocked: '#ef4444',
+    not_started: '#9ca3af',
+  }
+  return colors[status]
+}

package/src/components/gantt/types.ts

@@ -0,0 +1,93 @@
+/**
+ * Generic timeline item interface.
+ * Consumers map their domain models (Goals, Beads, etc.) to this shape.
+ */
+export interface TimelineItem {
+  id: string
+  title: string
+  description?: string
+  status: string
+  category?: string
+  progress?: number // 0-100
+  start_date?: string | null
+  end_date?: string | null
+  created_at?: string
+  children?: TimelineItem[]
+}
+
+/**
+ * Dependency between two timeline items.
+ */
+export interface TimelineDependency {
+  from_id: string
+  to_id: string
+  type?: string
+}
+
+export type HealthStatus = 'on_track' | 'at_risk' | 'blocked' | 'not_started'
+
+export interface GanttTask {
+  item: TimelineItem
+  start: Date
+  end: Date
+  progress: number
+  timeProgress: number
+  depth: number
+  hasChildren: boolean
+  parentId: string | null
+  healthStatus: HealthStatus
+}
+
+export interface GanttFilterState {
+  search: string
+  statuses: string[]
+  categories: string[]
+  dateRange: { start: Date | null; end: Date | null }
+}
+
+export type GanttViewMode = 'timeline' | 'board' | 'list'
+
+export interface GanttChartProps {
+  /** Items to display on the timeline */
+  items: TimelineItem[]
+  /** Optional dependencies between items */
+  dependencies?: TimelineDependency[]
+  /** Callback when an item is clicked */
+  onItemClick?: (item: TimelineItem) => void
+  /** Callback when dates are changed via drag */
+  onDateChange?: (id: string, startDate: Date, endDate: Date) => void
+  /** Callback when an item is edited via the detail modal. Return updated item or void. */
+  onItemEdit?: (id: string, changes: Partial<TimelineItem>) => void
+  /** Callback when item status changes (e.g. board drag-and-drop) */
+  onStatusChange?: (id: string, newStatus: string) => void
+  /** Map a status string to a progress value (0-100) */
+  statusToProgress?: (status: string) => number
+  /** Map a category string to a bar color */
+  categoryColors?: Record<string, string>
+  /** Whether items have hierarchy via children[] arrays. Default: true */
+  hierarchical?: boolean
+  /** Initial zoom index (0-5). Default: 3 */
+  initialZoom?: number
+  /** Custom CSS class for the wrapper */
+  className?: string
+  /** Info column header label. Default: 'Item' */
+  infoColumnLabel?: string
+  /** Info column width in px. Default: 320 */
+  infoColumnWidth?: number
+  /** Show category badge in info column. Default: true */
+  showCategory?: boolean
+  /** Show status badge in info column. Default: true */
+  showStatus?: boolean
+  /** Show filter bar above the gantt. Default: false */
+  showFilterBar?: boolean
+  /** Show fullscreen toggle button. Default: false */
+  showFullscreen?: boolean
+  /** Show view mode switcher (timeline/board/list). Default: false */
+  showViewSwitcher?: boolean
+  /** Initial view mode. Default: 'timeline' */
+  initialViewMode?: GanttViewMode
+  /** Available statuses for the board view columns. If not provided, extracted from items. */
+  boardStatuses?: string[]
+  /** localStorage key for persisting collapse state. If set, collapse state is saved/restored. */
+  persistCollapseKey?: string
+}

package/src/theme/tailwind.config.d.ts

@@ -1,3 +1,3 @@
-import type { Config } from 'tailwindcss'
-declare const config: Config
-export default config
+import type { Config } from 'tailwindcss';
+declare const config: Config;
+export default config;