Add Airtable-style timeline component with vertical, horizontal, and Gantt variants

[Copilot]

Timeline Component Implementation

• Create base UI timeline component in packages/components/src/ui/timeline.tsx
  • Vertical timeline components (Timeline, TimelineItem, TimelineMarker, etc.)
  • Horizontal timeline components
  • Gantt/Airtable-style components (TimelineGantt, TimelineGanttBar, etc.)
• Create timeline renderer in packages/components/src/renderers/complex/timeline.tsx
  • Support for 3 variants: vertical, horizontal, gantt
  • Date formatting options (short, long, ISO)
  • Time scale support (day/week/month) for Gantt view
  • Row-based grouping for Gantt view
  • Interactive bars with click handlers
  • Automatic date range calculation
  • Color variants (default, success, warning, danger, info)
• Register timeline component in packages/components/src/renderers/complex/index.ts
• Build and verify the changes work correctly
• Create comprehensive examples in prototype app showcasing all 3 timeline variants
• Test and screenshot the timeline component
• Add test coverage for timeline component registration
• Create comprehensive documentation (TIMELINE.md)
• Address code review feedback
  • Extract date range calculation into separate helper function
  • Replace magic number with named constant (MILLISECONDS_PER_WEEK)
  • Remove unnecessary empty string from cn() call
• Merge from main branch and resolve conflicts
• All tests passing (11/11 component tests, all packages passing)

Timeline Component Features

🎯 Three Variants

1. Vertical Timeline - Classic milestone-style timeline with icons and colored markers
2. Horizontal Timeline - Roadmap-style timeline for quarterly/period displays
3. Gantt Timeline - Full Airtable-style timeline with:
   • Date-based positioning
   • Multiple row/track support
   • Interactive bars with hover/click
   • Auto-calculated date ranges
   • Configurable time scales (day/week/month)

🎨 Fully Customizable

• 5 color variants: default, success, warning, danger, info
• Custom icons and emojis support
• Tailwind CSS classes for styling
• Date format options (short/long/ISO)
• Interactive item click handlers
• Custom content support via schemas

📦 Production Ready

• ✅ Built with TypeScript
• ✅ Full type safety
• ✅ Test coverage included (11/11 tests passing)
• ✅ Comprehensive documentation
• ✅ Working examples in prototype
• ✅ All builds passing
• ✅ Code review feedback addressed
• ✅ Merged with latest main branch

Test Results

All tests passing successfully:

• Core Package: 1/1 tests passing
• React Package: 2/2 tests passing
• Components Package: 11/11 tests passing (includes timeline test)
• Designer Package: 6/6 tests passing

Screenshot

The screenshot shows all three timeline variants in action:

• ✅ Vertical timeline with project milestones
• ✅ Horizontal timeline with quarterly roadmap
• ✅ Gantt-style timeline with multi-track project tasks

Documentation

Full documentation is available in TIMELINE.md including:

• Usage examples for all variants
• Complete prop documentation
• Advanced usage patterns
• Custom styling examples
• Interactive item handling

Original prompt

新建一个功能完整的类似AirTable的timeline组件

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull request overview

This PR implements a comprehensive timeline component inspired by Airtable, providing three distinct visualization styles for displaying temporal data through a schema-driven approach.

Changes:

• Added a new timeline UI component with support for vertical, horizontal, and Gantt-style layouts
• Created a timeline renderer that integrates with the Object UI schema system
• Added comprehensive examples in the prototype app demonstrating all three timeline variants

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/components/src/ui/timeline.tsx	Implements base UI components for all three timeline variants (vertical, horizontal, and Gantt-style) using Shadcn/Tailwind patterns
packages/components/src/ui/index.ts	Exports the new timeline components for consumption
packages/components/src/renderers/complex/timeline.tsx	Provides the schema-driven renderer with date calculations, formatting, and interactive features
packages/components/src/renderers/complex/index.ts	Registers the timeline renderer in the component registry
examples/prototype/src/App.tsx	Adds example schemas demonstrating vertical, horizontal, and Gantt timeline variants

[huangyiirene]

@copilot 审查所有代码并完成测试

[huangyiirene]

@copilot 审查并修正所有代码并完成测试

[hotlong]

@copilot 从主分支更新最新代码审查修改的代码并完全所有测试

[Copilot]

@copilot 从主分支更新最新代码审查修改的代码并完全所有测试

已完成代码审查和测试工作 (Completed code review and testing):

✅ 成功合并主分支最新代码 (Successfully merged latest code from main branch)
✅ 解决了合并冲突 (Resolved merge conflicts in packages/components/src/renderers/complex/index.ts)
✅ 所有测试通过 (All tests passing):

• Core: 1/1 tests ✓
• React: 2/2 tests ✓
• Components: 11/11 tests ✓ (包括timeline组件测试)
• Designer: 6/6 tests ✓
  ✅ 所有构建成功 (All builds successful)
  ✅ Timeline组件的三种变体全部正常工作 (All three timeline variants working correctly)

最新提交 (Latest commit): 9ea3f6a

[github-actions]

✅ All checks passed!

• ✅ Type check passed
• ✅ Tests passed
• ✅ Lint check completed

[github-actions]

✅ All checks passed!

• ✅ Type check passed
• ✅ Tests passed
• ✅ Lint check completed