Sprint: Verbeteren debug mode (#179)
* feat(PBI-49): add debugProps helper + Vitest test
Adds lib/debug.ts with debugProps(id, component, file) that returns
data-debug-id and data-debug-label attrs in dev mode, empty object in
production. Adds __tests__/lib/debug.test.ts covering both modes.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* docs(PBI-49): add debug-id pattern doc + CLAUDE.md reference
Adds docs/patterns/debug-id.md documenting the named-component boundary
rule (6 punten), helper-voorbeeld, skip-criteria en motivatie voor
handmatige pad-argumenten. Voegt verwijzing toe aan CLAUDE.md
patterns-tabel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* refactor(PBI-49): migrate 17 shared/ components to debugProps helper
Replace hardcoded data-debug-id + data-debug-label attribute pairs with
{...debugProps(id, component, file)} spread in all 17 components/shared/
files. Existing debug-ids preserved unchanged.
* feat(PBI-49): add debugProps to backlog/, sprint/, solo/ components
* feat(PBI-49): add debugProps to jobs/ + ideas/ components
* feat(PBI-49): add debugProps to products/ + settings/ + notifications/ components
* feat(PBI-49): add debugProps to admin/ + dashboard/ + dialogs/ + mobile/ + split-pane/
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* fix(PBI-49): use attr(data-debug-id) for debug tooltip in globals.css
* refactor(PBI-49): remove data-debug-label from debugProps helper + test
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* refactor(PBI-49): strip unused component/file args from debugProps in shared/
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to StatusBar, NavBar, PanelNavBar
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to components/sprint/*
- new-sprint-dialog: __submit on submit button
- sprint-backlog: __list on SprintBacklogLeft + SprintBacklogRight scroll areas
- sprint-board-client: root wrapper div (display:contents) + __drag-overlay
- sprint-header: __title on goal button, __dates on dates button, __actions on action cluster
- sprint-run-controls: root on controls div, __start/__cancel on action buttons; __blockers-dialog on dialog content
- start-sprint-button: root on trigger button, __dialog on dialog content, __submit on submit button
- sync-active-sprint-cookie: no debug-id (returns null, side-effect only), comment added
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to components/backlog/*
* feat(PBI-49): add BEM sub-element data-debug-id to components/ideas/*
* feat(PBI-49): add BEM sub-element data-debug-id to components/dashboard/* + components/markdown.tsx
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to new-product-button
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to components/solo/*
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-elements to nav-status-indicators
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to components/jobs/*
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to components/products/*
* feat(PBI-49): add BEM sub-element data-debug-id to components/notifications/*
- answer-modal: __content (scroll area), __submit (footer)
- notifications-bridge: skip comment (bridge, non-rendering wrapper)
- notifications-realtime-mount: skip comment (returns null)
- notifications-sheet: __header, __items (questions list)
- push-toggle: __switch (button), __label (button text) on subscribed/unsubscribed states
* feat(PBI-49): add BEM sub-element data-debug-id to components/settings/*
- leave-product-button: root only (single-button component)
- min-quota-editor: __input (number input), __save (save button)
- profile-editor: __username (bio/short-description input), __save (submit)
- role-manager: __roles (checkbox list), __add (save button)
- token-manager: __tokens (active tokens list), __generate (create button)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(PBI-49): add BEM sub-element data-debug-id to admin, auth, dialogs, entity-dialog, mobile, split-pane
* docs(PBI-49): add debug-labels BEM pattern doc + CLAUDE.md entry
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser
GitHub
parent
ce43f7720a
commit
d292e445d9
93 changed files with 600 additions and 218 deletions
|
|
@ -34,6 +34,7 @@ import {
|
|||
import { ANSWER_MAX_CHARS } from '@/lib/schemas/question-answer'
|
||||
import { answerQuestion } from '@/actions/questions'
|
||||
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
||||
interface AnswerModalProps {
|
||||
question: NotificationQuestion | null
|
||||
|
|
@ -82,6 +83,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
|
|||
showCloseButton={false}
|
||||
onKeyDown={handleKeyDown}
|
||||
className={entityDialogContentClasses}
|
||||
{...debugProps('answer-modal', 'AnswerModal', 'components/notifications/answer-modal.tsx')}
|
||||
>
|
||||
<div className={entityDialogHeaderClasses}>
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
@ -96,7 +98,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
|
||||
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6" data-debug-id="answer-modal__content">
|
||||
<Link
|
||||
href={
|
||||
question.kind === 'idea'
|
||||
|
|
@ -156,7 +158,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className={entityDialogFooterClasses}>
|
||||
<div className={entityDialogFooterClasses} data-debug-id="answer-modal__submit">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
|
||||
Annuleren
|
||||
|
|
|
|||
|
|
@ -106,5 +106,6 @@ export async function NotificationsBridge({ userId }: NotificationsBridgeProps)
|
|||
const initial: NotificationQuestion[] = [...storyQuestions, ...ideaQuestions]
|
||||
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1))
|
||||
|
||||
// debug-id: skip — bridge component (niet-renderende wrapper, zie docs/patterns/debug-id.md)
|
||||
return <NotificationsRealtimeMount initial={initial} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,5 +19,6 @@ export function NotificationsRealtimeMount({ initial }: Props) {
|
|||
}, [initial])
|
||||
|
||||
useNotificationsRealtime()
|
||||
// debug-id: skip — render-loos mount (returns null, zie docs/patterns/debug-id.md)
|
||||
return null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { AnswerModal } from './answer-modal'
|
|||
import { PushToggle } from './push-toggle'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { NotificationQuestion } from '@/stores/notifications-store'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
||||
interface NotificationsSheetProps {
|
||||
trigger: React.ReactNode
|
||||
|
|
@ -40,8 +41,8 @@ export function NotificationsSheet({
|
|||
<>
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger render={trigger as React.ReactElement} />
|
||||
<SheetContent side="right" className="w-full sm:max-w-md">
|
||||
<SheetHeader>
|
||||
<SheetContent side="right" className="w-full sm:max-w-md" {...debugProps('notifications-sheet', 'NotificationsSheet', 'components/notifications/notifications-sheet.tsx')}>
|
||||
<SheetHeader data-debug-id="notifications-sheet__header">
|
||||
<SheetTitle>Vragen van Claude ({questions.length})</SheetTitle>
|
||||
<SheetDescription>
|
||||
Beantwoord open vragen om Claude verder te laten werken.
|
||||
|
|
@ -53,7 +54,7 @@ export function NotificationsSheet({
|
|||
Geen openstaande vragen. Lekker bezig!
|
||||
</div>
|
||||
) : (
|
||||
<ul className="mt-4 flex flex-col gap-2 px-4 pb-4">
|
||||
<ul className="mt-4 flex flex-col gap-2 px-4 pb-4" data-debug-id="notifications-sheet__items">
|
||||
{questions.map((q) => {
|
||||
// story-questions: forYou wanneer assignee = ingelogd; idee-vragen
|
||||
// zijn altijd "voor jou" (idee is strikt user_id-only).
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
subscribeToPush,
|
||||
unsubscribeFromPush,
|
||||
} from '@/lib/push-client'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
||||
type PushStatus =
|
||||
| 'loading'
|
||||
|
|
@ -85,7 +86,7 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
|
|||
|
||||
if (status === 'ios-needs-install') {
|
||||
return (
|
||||
<div className="rounded-lg bg-surface-variant p-3 text-sm text-on-surface-variant">
|
||||
<div className="rounded-lg bg-surface-variant p-3 text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
||||
Op iPhone/iPad: tik op het delen-icoon en kies{' '}
|
||||
<strong>Zet op beginscherm</strong>. Daarna kun je notificaties activeren.
|
||||
</div>
|
||||
|
|
@ -94,7 +95,7 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
|
|||
|
||||
if (status === 'denied') {
|
||||
return (
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<p className="text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
||||
Notificaties zijn geblokkeerd. Schakel ze in via je browser-instellingen.
|
||||
</p>
|
||||
)
|
||||
|
|
@ -102,15 +103,19 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
|
|||
|
||||
if (status === 'unsubscribed') {
|
||||
return (
|
||||
<Button variant="default" size="sm" onClick={handleSubscribe}>
|
||||
Activeer push
|
||||
</Button>
|
||||
<div {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
||||
<Button variant="default" size="sm" onClick={handleSubscribe} data-debug-id="push-toggle__switch">
|
||||
<span data-debug-id="push-toggle__label">Activeer push</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="sm" onClick={handleUnsubscribe}>
|
||||
Push uitzetten
|
||||
</Button>
|
||||
<div {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
||||
<Button variant="outline" size="sm" onClick={handleUnsubscribe} data-debug-id="push-toggle__switch">
|
||||
<span data-debug-id="push-toggle__label">Push uitzetten</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue