feat(frontend): Create Sprint 4 Stories and Tasks for Story Management
Created comprehensive Story and Task files for Sprint 4 frontend implementation: Story 1: Story Detail Page Foundation (P0 Critical - 3 days) - 6 tasks: route creation, header, sidebar, data loading, Edit/Delete, responsive design - Fixes critical 404 error when clicking Story cards - Two-column layout consistent with Epic detail page Story 2: Task Management in Story Detail (P0 Critical - 2 days) - 6 tasks: API verification, hooks, TaskList, TaskCard, TaskForm, integration - Complete Task CRUD with checkbox status toggle - Filters, sorting, and optimistic UI updates Story 3: Enhanced Story Form (P1 High - 2 days) - 6 tasks: acceptance criteria, assignee selector, tags, story points, integration - Aligns with UX design specification - Backward compatible with existing Stories Story 4: Quick Add Story Workflow (P1 High - 2 days) - 5 tasks: inline form, keyboard shortcuts, batch creation, navigation - Rapid Story creation with minimal fields - Keyboard shortcut (Cmd/Ctrl + N) Story 5: Story Card Component (P2 Medium - 1 day) - 4 tasks: component variants, visual states, Task count, optimization - Reusable component with list/kanban/compact variants - React.memo optimization Story 6: Kanban Story Creation Enhancement (P2 Optional - 2 days) - 4 tasks: Epic card enhancement, inline form, animation, real-time updates - Contextual Story creation from Kanban - Stretch goal - implement only if ahead of schedule Total: 6 Stories, 31 Tasks, 12 days estimated Priority breakdown: P0 (2), P1 (2), P2 (2 optional) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
223
docs/plans/sprint_4_story_1.md
Normal file
223
docs/plans/sprint_4_story_1.md
Normal file
@@ -0,0 +1,223 @@
|
||||
---
|
||||
story_id: sprint_4_story_1
|
||||
sprint: sprint_4
|
||||
priority: P0
|
||||
status: not_started
|
||||
story_points: 5
|
||||
estimated_days: 3
|
||||
created_date: 2025-11-05
|
||||
assignee: Frontend Team
|
||||
---
|
||||
|
||||
# Story 1: Story Detail Page Foundation
|
||||
|
||||
**Sprint**: Sprint 4
|
||||
**Priority**: P0 (Critical)
|
||||
**Estimated**: 3 days
|
||||
**Owner**: Frontend Team
|
||||
|
||||
## Description
|
||||
|
||||
Create the Story detail page (`/stories/[id]`) to fix the critical 404 error when users click on Story cards. This page will display comprehensive Story information including title, description, status, priority, metadata, and parent Epic context using a two-column layout consistent with the existing Epic detail page.
|
||||
|
||||
## User Story
|
||||
|
||||
**As a** project manager or developer,
|
||||
**I want** to view detailed Story information by clicking on a Story card,
|
||||
**So that** I can see the full Story description, acceptance criteria, Tasks, and manage Story metadata.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] Clicking Story card from Epic detail page navigates to `/stories/{id}` page (no 404 error)
|
||||
- [ ] Page displays Story title, description, status, priority, and all metadata
|
||||
- [ ] Two-column layout with main content area and metadata sidebar
|
||||
- [ ] Breadcrumb navigation shows: Projects > Project > Epics > Epic > Stories > Story
|
||||
- [ ] Metadata sidebar shows status, priority, assignee, time tracking, dates, and parent Epic card
|
||||
- [ ] Edit button opens Story form dialog with current Story data
|
||||
- [ ] Delete button shows confirmation dialog and removes Story
|
||||
- [ ] Loading states display skeleton loaders
|
||||
- [ ] Error states handle 404, network errors, and permission errors
|
||||
- [ ] Responsive design works on mobile, tablet, and desktop
|
||||
- [ ] Back button (or ESC key) navigates to parent Epic detail page
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
**New Route**:
|
||||
- `app/(dashboard)/stories/[id]/page.tsx` - Story detail page (400-500 lines)
|
||||
|
||||
**New Components**:
|
||||
- `components/projects/story-header.tsx` - Story page header (100-150 lines)
|
||||
- `components/projects/story-metadata-sidebar.tsx` - Story sidebar (150-200 lines)
|
||||
|
||||
**Reuse Pattern**: 85% similar to Epic detail page
|
||||
- Reference: `app/(dashboard)/epics/[id]/page.tsx` (534 lines)
|
||||
- Adapt Epic structure for Story context
|
||||
- Replace Stories list with Tasks list (Story 2 dependency)
|
||||
|
||||
**API Integration**:
|
||||
- Use `useStory(id)` hook (already exists)
|
||||
- Use `useUpdateStory()` hook for Edit action
|
||||
- Use `useDeleteStory()` hook for Delete action
|
||||
|
||||
**Layout Structure**:
|
||||
```
|
||||
┌────────────────────────────────────────────────────────┐
|
||||
│ [Breadcrumb Navigation] [Actions] │
|
||||
├────────────────────────────────────────────────────────┤
|
||||
│ [←] Story Title [Edit][Delete] │
|
||||
│ [Status Badge] [Priority Badge] │
|
||||
├────────────────────────────────────────────────────────┤
|
||||
│ ┌────────────────────────┐ ┌──────────────────────┐ │
|
||||
│ │ Main Content │ │ Metadata Sidebar │ │
|
||||
│ │ - Description │ │ - Status │ │
|
||||
│ │ - Acceptance Criteria │ │ - Priority │ │
|
||||
│ │ - Tasks (Story 2) │ │ - Assignee │ │
|
||||
│ │ │ │ - Time Tracking │ │
|
||||
│ │ │ │ - Dates │ │
|
||||
│ │ │ │ - Parent Epic Card │ │
|
||||
│ └────────────────────────┘ └──────────────────────┘ │
|
||||
└────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] [Task 1](sprint_4_story_1_task_1.md) - Create Story detail page route and layout
|
||||
- [ ] [Task 2](sprint_4_story_1_task_2.md) - Implement Story header component
|
||||
- [ ] [Task 3](sprint_4_story_1_task_3.md) - Implement Story metadata sidebar component
|
||||
- [ ] [Task 4](sprint_4_story_1_task_4.md) - Integrate Story API data loading and error handling
|
||||
- [ ] [Task 5](sprint_4_story_1_task_5.md) - Add Edit and Delete actions with dialogs
|
||||
- [ ] [Task 6](sprint_4_story_1_task_6.md) - Implement responsive design and accessibility
|
||||
|
||||
**Progress**: 0/6 tasks completed
|
||||
|
||||
## Dependencies
|
||||
|
||||
**Prerequisites**:
|
||||
- ✅ Story API ready (`GET /api/v1/stories/{id}`)
|
||||
- ✅ `useStory(id)` hook implemented (`lib/hooks/use-stories.ts`)
|
||||
- ✅ Story types defined (`types/project.ts`)
|
||||
- ✅ Story form component exists (`components/projects/story-form.tsx`)
|
||||
- ✅ Epic detail page as reference pattern
|
||||
|
||||
**Blocked By**: None (can start immediately)
|
||||
|
||||
**Blocks**:
|
||||
- Story 2 (Task Management) - depends on Story detail page existing
|
||||
|
||||
## Definition of Done
|
||||
|
||||
- All 6 tasks completed
|
||||
- Story detail page accessible at `/stories/{id}` route
|
||||
- Page displays all Story information correctly
|
||||
- Layout consistent with Epic detail page
|
||||
- Edit and Delete actions working
|
||||
- Loading and error states implemented
|
||||
- Responsive design tested on all breakpoints
|
||||
- Accessibility requirements met (keyboard navigation, ARIA labels)
|
||||
- Code reviewed and approved
|
||||
- Git commit created with descriptive message
|
||||
|
||||
## Test Plan
|
||||
|
||||
**Manual Testing**:
|
||||
1. Navigate to Epic detail page
|
||||
2. Click any Story card → Verify navigates to `/stories/{id}` (no 404)
|
||||
3. Verify Story title, description, status, priority display correctly
|
||||
4. Verify breadcrumb navigation shows full hierarchy
|
||||
5. Verify metadata sidebar shows assignee, time, dates, parent Epic
|
||||
6. Click Edit → Verify form opens with Story data
|
||||
7. Edit Story → Verify changes saved and reflected
|
||||
8. Click Delete → Verify confirmation dialog appears
|
||||
9. Delete Story → Verify redirected to Epic detail page
|
||||
10. Test invalid Story ID → Verify 404 error page
|
||||
11. Test mobile/tablet/desktop responsive layouts
|
||||
12. Test keyboard navigation (Tab, Enter, ESC)
|
||||
|
||||
**E2E Test** (Playwright):
|
||||
```typescript
|
||||
test('user can view story details', async ({ page }) => {
|
||||
await page.goto('/epics/epic-123');
|
||||
await page.click('[data-testid="story-card"]');
|
||||
await expect(page).toHaveURL(/\/stories\/story-\w+/);
|
||||
await expect(page.locator('h1')).toContainText('Story Title');
|
||||
await expect(page.locator('[data-testid="story-status"]')).toBeVisible();
|
||||
});
|
||||
```
|
||||
|
||||
**Verification Commands**:
|
||||
```bash
|
||||
# Check route exists
|
||||
ls app/(dashboard)/stories/[id]/page.tsx
|
||||
|
||||
# Run dev server and test
|
||||
npm run dev
|
||||
# Navigate to http://localhost:3000/stories/[valid-id]
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
# Verify no build errors
|
||||
```
|
||||
|
||||
## UX Design Reference
|
||||
|
||||
**Design Document**: `docs/designs/STORY_UX_UI_DESIGN.md`
|
||||
- Section: "Story Detail Page Design" (lines 117-164)
|
||||
- Layout: Two-column (main content + metadata sidebar)
|
||||
- Breadcrumb: Projects > Project > Epics > Epic > Stories > Story
|
||||
- Header: Title, Status, Priority, Edit, Delete actions
|
||||
- Sidebar: Metadata fields and parent Epic card
|
||||
|
||||
**Design Tokens**:
|
||||
```css
|
||||
/* Status Colors */
|
||||
Backlog: bg-slate-100 text-slate-700
|
||||
Todo: bg-blue-100 text-blue-700
|
||||
InProgress: bg-amber-100 text-amber-700
|
||||
Done: bg-green-100 text-green-700
|
||||
|
||||
/* Priority Colors */
|
||||
Low: bg-blue-100 text-blue-700
|
||||
Medium: bg-yellow-100 text-yellow-700
|
||||
High: bg-orange-100 text-orange-700
|
||||
Critical: bg-red-100 text-red-700
|
||||
|
||||
/* Typography */
|
||||
Story Title: 32px, Bold, Line-height 1.2
|
||||
Story Description: 16px, Regular, Line-height 1.6
|
||||
Metadata Label: 14px, Medium
|
||||
Metadata Value: 14px, Regular
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
**Why This Matters**:
|
||||
- **Critical Bug**: Users currently see 404 error when clicking Story cards
|
||||
- **User Experience**: Enables Epic → Story → Task navigation
|
||||
- **Foundation**: Required for Story 2 (Task Management)
|
||||
- **Consistency**: Maintains design patterns established by Epic detail page
|
||||
|
||||
**Code Reuse Strategy**:
|
||||
- Copy `app/(dashboard)/epics/[id]/page.tsx` structure
|
||||
- Replace `useEpic` → `useStory`
|
||||
- Replace `useStories` → `useTasks` (Story 2)
|
||||
- Update breadcrumb (add Story level)
|
||||
- Adapt sidebar (Parent Project → Parent Epic)
|
||||
- 85% code reuse, 50-60% faster development
|
||||
|
||||
**Performance Targets**:
|
||||
- Page load time: < 1 second
|
||||
- Time to interactive: < 2 seconds
|
||||
- Lighthouse score: >= 90
|
||||
- No layout shift (CLS < 0.1)
|
||||
|
||||
**Accessibility Requirements** (WCAG 2.1 Level AA):
|
||||
- Keyboard navigation: All interactive elements
|
||||
- Focus indicators: 2px solid outline
|
||||
- ARIA labels: All buttons and links
|
||||
- Screen reader: Proper heading hierarchy (h1 → h2 → h3)
|
||||
- Color contrast: 4.5:1 minimum for text
|
||||
|
||||
---
|
||||
|
||||
**Created**: 2025-11-05 by Frontend Agent
|
||||
**Updated**: 2025-11-05
|
||||
Reference in New Issue
Block a user