feat(tabs): implement tabbed interface with controller (#3) #5
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Extension now runs automatically when pi starts - Shows UI simulator widget above editor by default - Added /ds-demo command to toggle visibility on/off - Shows status indicator when active - Widget displays all design system components: - Interactive buttons and controls - Message bubbles (user, AI, system) - Code blocks with syntax highlighting - Alerts (success, warning, error, info) - Thinking level indicators - Form elements (inputs, checkboxes, validation)
- Create epic-62d4d25c-pi-ds-tui-design-system.md with vision, phases, and roadmap - Create research-e193044a-tabs-component-specification.md with API and architecture - Create phase-f89b39da-tabs-component-implementation.md with 12-task plan - Update summary.md with epic status and next steps - Update todo.md with human review tasks - Update team.md with planning session details Related to: #4 Epic: pi-ds TUI Design System Phase: Planning & Specification
Phase 2 (Testing Infrastructure Setup) has been completed successfully: BREAKING CHANGE: Project status transitions from Phase 2 to Phase 3 Accomplishments: - 121 tests passing across 4 component test suites - Alert Component: 21 tests covering all functionality - Container Component: 20 tests for layout and styling - Flex Component: 40 tests for flexbox behavior - Grid Component: 40 tests for grid layouts - Test helper utilities fully implemented - Snapshot testing infrastructure configured and working - Testing patterns and best practices documented Updated memory files: - epic-62d4d25c-pi-ds-tui-design-system.md: Marked Phase 2 complete with completion date - summary.md: Updated current status to Phase 3, documented accomplishments - todo.md: Removed Phase 2 tasks, added completion summary - team.md: Logged phase completion activity and assessment results Next: Phase 3 - Interactive Components (Tabs implementation) Refs: #4
- Created 12 individual task files following MDTM naming convention - Each task has proper structure: title, status, priority, time, dependencies - Tasks include detailed acceptance criteria and expected outcomes - Updated .memory/todo.md to reference new task files - Updated .memory/summary.md to reflect task structure - Total estimated time: 18-22 hours over 3-5 days Task breakdown: 1. Setup & Structure (30 min) 2. Implement TabController (2 hours) 3. Implement Tab Component (2 hours) 4. Implement Pane Component (1 hour) 5. Wire Controller to Components (1 hour) 6. Unit Tests - TabController (2 hours) 7. Unit Tests - Tab Component (2 hours) 8. Unit Tests - Pane Component (1.5 hours) 9. Integration Tests (3 hours) 10. Snapshot Tests (2 hours) 11. Documentation (2 hours) 12. Code Review & Polish (1 hour) Related: Phase 3 Tabs Component Implementation Issue: #4
- Add --otp flag for npm two-factor authentication - Refactor provenance flag into flags array for cleaner logic - Fix dry-run flag comparison (use true instead of string) - Consolidate npm publish arguments into single flags array Improves publish task flexibility for 2FA-enabled npm accounts and makes provenance handling more maintainable.
Replace inline task details in phase file with links to 12 individual task files. This follows miniproject best practices by keeping detailed task information in dedicated task files while maintaining high-level overview in phase files. Changes: - phase-f89b39da: Replace detailed task descriptions with task file links - epic-62d4d25c: Add link to phase implementation plan for Phase 3 - summary.md: Update to reflect new task file structure Improves navigation and maintains separation of concerns between overview (phase) and detailed implementation (task files).
- Create src/tabs/ directory with TabController, Tab, Pane components - Add types.ts for TypeScript interfaces (TabOptions) - Create barrel exports in src/tabs/index.ts - Export tabs module from main src/index.ts - Update ESLint config to allow unused params with underscore prefix - Fix Alert.ts unused param to use underscore prefix - All files created with proper TypeScript structure - Build succeeds (32 modules bundled in 7ms) - Lint passes with no errors (5 warnings only) Implements Task 1 of Phase 3: Tabs Component Implementation Related to #4
- Implement addTab() with bidirectional linking to Tab component - Implement addTabs() for batch registration - Implement addPane() with bidirectional linking to Pane component - Implement addPanes() for batch registration - Implement setActive() with error handling for invalid IDs - Implement getActive() to retrieve current activeId - Implement getTab() and getPane() for component lookup - Auto-activate first tab or tab marked as active in options - Full TypeScript strict mode compliance - Build succeeds (32 modules bundled) - Lint passes with no errors Implements Task 2 of Phase 3: Tabs Component Implementation Related to #4
- Implement Tab component with render(), isActive(), getId() methods - Tab queries controller for active state, falls back to options.active - Implement Pane component with render(), isActive(), getTabId() methods - Pane returns empty array when inactive, renders content when active - Bidirectional wiring already implemented in TabController (Task 2) - TabController.addTab() calls tab.setController(this) - TabController.addPane() calls pane.setController(this) - Both components use Component interface from @mariozechner/pi-tui - Full TypeScript strict mode compliance - Build succeeds (32 modules bundled) - Lint passes with no errors Implements Tasks 3, 4, 5 of Phase 3: Tabs Component Implementation Progress: 5/12 tasks complete (42%) Related to #4
- Create TabController.test.ts with 21 test cases - Test initialization, adding tabs/panes, active state management - Test error handling for invalid tab IDs - Test edge cases: empty arrays, duplicate IDs, non-existent lookups - Fix TabController.addTab() to check active option before setting controller - Add Tab.wasMarkedActive() helper method for registration logic - All 21 tests passing with 35 expect() calls - Follow existing test patterns from Alert.test.ts Implements Task 6 of Phase 3: Tabs Component Implementation Progress: 6/12 tasks complete (50%) Related to #4
- Create Tab.test.ts with 28 test cases covering: - Basic rendering (content, widths, edge cases) - Active/inactive state management - Callback storage and handling - ID management and format support - Controller integration and standalone mode - Label rendering with Text components - Edge cases (special chars, small widths, consistency) - wasMarkedActive() helper method - Create Pane.test.ts with 21 test cases covering: - Basic rendering when active/inactive - Active state management and transitions - Tab ID management - Controller integration - Content rendering delegation - Visibility control and tab switching - Edge cases (special chars, invalid widths, consistency) - Fix Text component usage in tests (requires styled string, x, y) - Add createText() helper in test files for consistent Text creation - Update TabController.test.ts to use createText() helper - Add width validation to Pane.render() (exit early for width < 1) All 70 tests passing (28 Tab + 21 Pane + 21 TabController) Total: 119 expect() calls across 3 test files Implements Tasks 7 & 8 of Phase 3: Tabs Component Implementation Progress: 8/12 tasks complete (67%) Related to #4
Integration Tests (18 tests): - Complete tabbed interface with multiple tabs/panes - Tab switching workflow with state updates - Layout integration with Flex and Sized components - Responsive rendering at 80, 120, 160 widths - Real-world patterns (navigation menu, wizard steps) - Edge cases (orphan panes, rapid switching) Snapshot Tests (15 snapshots): - Single tab rendering (active/inactive) - Multiple tabs at various widths - Tabs in Flex layout (side-by-side, stacked) - Pane content rendering (active, inactive, long content) - Complete tabbed interfaces (simple, multi-tab) - Edge cases (long labels, narrow widths, special chars) Test Coverage Summary: - TabController: 21 tests - Tab Component: 28 tests - Pane Component: 21 tests - Integration: 18 tests - Snapshots: 15 snapshots Total: 103 tests passing, 210 expect() calls Implements Tasks 9 & 10 of Phase 3: Tabs Component Implementation Progress: 10/12 tasks complete (83%) Related to #4
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Introduces a full tabs feature set with TabController-driven coordination, Tab/Pane components, comprehensive tests, and updated documentation/demos so the UI library ships a cohesive tab system.
Linked Artifact
GitHub: Closes #3
Changes
Testing