Project Docs Components
Reusable components and MDX patterns used inside bearlabs.net project documentation and review workflows.
Bearlabs.netWalkingweekend.com
13:0014:00
1h planned2026-06-271h remaining
Problem / Opportunity
Project docs on bearlabs.net use a set of reusable React components to communicate status, scope, decisions, and follow-ups. Without a live example, it is hard to see how these components compose into the standard project-doc template.
📋
Status at a glance
Banner, header, and timeline keep the project state visible without reading prose.
💬
Review conversations
Review cards capture questions, concerns, and the decisions that resolved them.
🐛
Issue tracking
Issue cards and follow-ups document blockers, severity, and file-level changes.
Wireframe
/ui/project-docs layout
Visual block diagram of the project-doc template. Each block maps to a section on this page.
ProjectBanner
Status
Projects
Timeline
Problem / Opportunity — 3-column card grid
Wireframe — HTML block diagram
Solution — text + table
PaperSection — solution card
Task Board — phase grid
Timeline — vertical dotted line
Key Context — numbered steps
Review — ReviewCard + ReviewComment
Issues — IssueCard + IssueFollowup
Open Questions — Q1 / Q2 rows
ProjectFooter
Solution
This page is both a project doc and a component showcase. It renders each component in the context where it is normally used, with a sample ProjectContext so banner and footer work outside a real docs page.
| Component | Section | Purpose |
|---|---|---|
| ProjectBanner | Top | Status badge, project tags, and timeline summary |
| ProjectTimeline | Timeline | Date, time range, status, and last-updated line |
| ReviewCard / ReviewComment | Review | Collapsible review summary and individual comments. The navigable prop opts a comment out of the page Comment navigator; replies nest inside a parent comment. |
| IssueCard / IssueFollowup | Issues | Severity, status, files changed, and downstream impacts |
| PaperSection | Solution | Card wrapper that gives the solution block a paper-like background and border. |
Task Board
Phase 1: Inventory
☐ List project-doc components
☐ Identify context dependencies
☐ Create sample ProjectContext
Phase 2: Showcase
☐ Render banner + footer variants
☐ Render timeline states
☐ Render review and issue components
Phase 3: Template
☐ Restructure page as example doc
☐ Add problem / wireframe / task sections
☐ Verify every component renders
Phase 4: Polish
☐ Add navigation links
☐ Run lint and build checks
☐ Merge to main
Timeline
Planning (live progress)
13:0014:00
1h planned2026-06-271h remaining
Completed
13:0016:00
3h planned2026-06-263h actualcompleted 16:00
Key Context
1
ProjectContext dependency:
ProjectBanner and ProjectFooter read frontmatter from context. The sample provider in this page supplies the same shape a real docs page would.2
TTS speaker buttons:
ReviewCard and IssueFollowup call /api/reviews/tts. These work in the gallery because the route already exists in bearlabs.net.3
Template order: Sections follow this page's ordering: Problem → Wireframe → Solution → Task Board → Timeline → Context → Review → Issues → Questions → Footer.
Review
#1Page should follow the project-doc templateResolved
#2Move issue components to dedicated Issues sectionResolved
#3Add Open Questions and fix Key Context placementResolved
Benben#1suggestionJun 29Restructure /ui/project-docs so it reads like a real project doc, with Problem, Wireframe, Solution, Task Board, Timeline, Key Context, Review, Issues, and Open Questions sections.
Benben#2suggestionJun 29Remove the Component Gallery subsection. Move IssueCard and IssueFollowup into their own Issues section placed after Review and before Open Questions.
Benben#3suggestionJun 29Re-draw the wireframe using HTML blocks, add the missing Open Questions section, and move Key Context to its correct position right after Timeline.
navigable prop + nested reply
#anavigable opt-out keeps this out of the sidebarResolved
#breply nested inside the parent commentResolved
Benben#anoteJul 2A ReviewComment with the navigable prop set to false omits data-comment-id, so the page-level ReviewNavigator does not list it. Use this for per-phase code-review comments that should appear only in the content area, not in the right-hand Comment navigator.
Benben#bsuggestionJul 2Replies nest inside the parent ReviewComment as a bordered avatar box — the same shape Open Questions use — rather than being emitted as a separate ReviewComment that would pollute the navigator.
Agreed — nesting the reply groups the resolution with the original comment and keeps the Comment navigator clean.
Agreed — nesting the reply groups the resolution with the original comment and keeps the Comment navigator clean.Issues
Issue list
#1Proxy route needs auth + size capInvestigating
#2Web Speech API unsupported in FirefoxKnown Issue
Resolved issue with files changed
A1
Open Questions
Q1
Should each component get its own /ui sub-page?
Stanley
Not for now. A single combined page is easier to maintain. Split into separate pages only if the gallery grows beyond 6–8 component groups.
Q2
Do we need interactive prop controls in the gallery?
Stanley
Static variants are sufficient for documentation. Add live prop knobs later if designers and engineers ask for them.
Last updated: 2026-06-27T13:00:00.000Z