janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ST-201-ST-210 M2 stories, drag-and-drop en Zustand stores

Browse source 
- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201)
- useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202)
- PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203)
- PBI slepen over prioriteitsgrens wijzigt priority (ST-204)
- Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206)
- Story drag-and-drop horizontaal binnen en tussen groepen (ST-207)
- Story detail slide-over met bewerkformulier (ST-208)
- Story verwijderen met bevestigingsstap (ST-209)
- Filter op status en prioriteit in rechterpaneel (ST-210)
- Fix: infinite loop in useEffect door stabiele string dependency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-24 11:46:18 +02:00
parent ffda65490f
commit 4dd62c199c
25 changed files with 1794 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

22
CLAUDE.md
View file

@ -21,6 +21,9 @@ Lees het relevante document voordat je aan een feature begint. Nooit gokken over
| `scrum4me-backlog.md` | Welke task bouwen, in welke volgorde, "done when"-criteria |
| `scrum4me-personas.md` | Lars (primaire gebruiker), Dina, Remi — gebruik bij UI-beslissingen |
| `scrum4me-product-backlog.md` | Testdata voor de seed — PBI's en stories van Scrum4Me zelf |
| `scrum4me-styling.md` | **Lees dit voor elk component** — MD3-kleuren, shadcn gebruik, component-patronen |
| `theme.css` | Bronbestand — kopieer naar `styles/theme.css`, importeer in `app/globals.css` |
| `MD3_Color_Scheme_Documentation.md` | Volledige MD3-kleurendocumentatie als referentie |
---
@ -47,7 +50,8 @@ Per task:
```
Next.js 15 (App Router) + React 19
TypeScript strict
Tailwind CSS + shadcn/ui
Tailwind CSS + shadcn/ui ← UI-primitieven (Button, Dialog, Sheet, Badge, etc.)
MD3 kleurensysteem via theme.css ← semantische tokens, nooit willekeurige Tailwind-kleuren
Zustand (client state)
dnd-kit (drag-and-drop)
Prisma v7 (ORM)
@ -58,6 +62,10 @@ Zod (validatie)
Sonner (toasts)
```
> **Stylingregel:** Gebruik **nooit** `bg-blue-500`, `bg-green-600` of andere willekeurige Tailwind-kleuren.
> Gebruik altijd semantische MD3-tokens: `bg-primary`, `bg-status-done`, `bg-priority-critical`, etc.
> Zie `scrum4me-styling.md` voor alle patronen en regels.
---
## Exacte dependencies (package.json)
@ -97,6 +105,18 @@ Sonner (toasts)
---
## theme.css installeren
```bash
# Kopieer theme.css naar de project root of styles map
cp theme.css app/styles/theme.css
# Importeer bovenaan app/globals.css:
# @import './styles/theme.css';
```
Dark mode werkt via `.dark` class op `<html>`. Zie `scrum4me-styling.md` voor het ThemeToggle component.
## shadcn/ui componenten om te installeren
Voer deze uit na `npx shadcn@latest init`: