225 lines
8.8 KiB
Markdown
225 lines
8.8 KiB
Markdown
---
|
|
story_id: sprint_4_story_1
|
|
sprint: sprint_4
|
|
priority: P0
|
|
status: completed
|
|
story_points: 5
|
|
estimated_days: 3
|
|
created_date: 2025-11-05
|
|
completion_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
|
|
|
|
- [x] [Task 1](sprint_4_story_1_task_1.md) - Create Story detail page route and layout
|
|
- [x] [Task 2](sprint_4_story_1_task_2.md) - Implement Story header component
|
|
- [x] [Task 3](sprint_4_story_1_task_3.md) - Implement Story metadata sidebar component
|
|
- [x] [Task 4](sprint_4_story_1_task_4.md) - Integrate Story API data loading and error handling
|
|
- [x] [Task 5](sprint_4_story_1_task_5.md) - Add Edit and Delete actions with dialogs
|
|
- [x] [Task 6](sprint_4_story_1_task_6.md) - Implement responsive design and accessibility
|
|
|
|
**Progress**: 6/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
|