feat(editor): extract Button/Panel/DataTable UI primitives - #17
Merged
Conversation
Design consensus for extracting the button/panel-shell/table patterns already duplicated across editor/ panels into shared components plus design tokens, ahead of implementation. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
10 task cards for subagent-driven-development: wave 0 builds tokens/ui CSS plus the Button/Panel/DataTable components (parallel, contract-free), wave 1 migrates the seven consuming panels/App.tsx shell (parallel, no file overlap), then a serial app.css cleanup and closeout verification. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Add editor/src/styles/tokens.css with color design tokens and editor/src/styles/ui.css with base styles for Button (.btn--nav, .btn--menu, .btn--primary), Panel (.panel, .panel--boxed, .panel--warning), and DataTable (.data-table) components. Import both new stylesheets before app.css in main.tsx to establish the visual foundation for Wave 0 UI primitives implementation (editor-ui-button, editor-ui-panel, editor-ui-datatable). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Design tokens (tokens.css) and shared component base styles (ui.css) for the Button/Panel/DataTable UI primitives; wired into main.tsx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Button UI primitive (variant/active props, class contract matching ui.css's .btn--* rules), TDD unit tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Panel UI primitive (tone/variant/as/title props, class contract matching ui.css's .panel* rules), TDD unit tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Generic DataTable<T> UI primitive (columns/rows/rowKey props, class contract matching ui.css's .data-table rules), TDD unit tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Per .spec/tasks/README.md directory discipline: only in-flight cards stay in .spec/tasks/; history lives in git. Wave 0 (tokens+ui styles, Button, Panel, DataTable) is merged into main. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Migrate DiffPreview to Panel/DataTable; data-testid values preserved. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Replace the hand-rolled <section>/<table>/<button> markup in ConflictPanel with the shared Panel(tone="warning")/DataTable/Button UI primitives. Pure refactor — all data-testid values are preserved byte-for-byte; visible behavior and styling are unchanged.
Migrate ConflictPanel to Panel(tone=warning)/DataTable/Button; data-testid values preserved. Full e2e suite verified (26/26), including host-rebase.spec.ts. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…App shell buttons to Button/Panel Pure refactor per editor-ui-migrate-simple-panels task card: replace hand-rolled <button>/section/ul shells in the tableless panels (TableList, SettingsPanel, ErrorPanel, ExportPanel) and App.tsx's four-state-menu + draft-refresh button with Button/Panel from editor/src/components/ui. No visible behavior or styling change; all data-testid values preserved byte-for-byte and verified green by the full Playwright e2e suite (26/26). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Migrate TableList, App.tsx shell (four-state-menu + refresh button), SettingsPanel, ErrorPanel, ExportPanel to Button/Panel; data-testid values preserved. Full e2e suite verified (26/26). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Drop app.css rules now owned by ui.css's Button/Panel/DataTable classes; token-substitute remaining hex colors. Pure visual no-op. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The Python host serves editor/ from this checked-in build output (src/lumio_config/editor/server.py's STATIC_DIR); it was stale since before the Button/Panel/DataTable refactor started, so the actually served bundle still ran the pre-refactor panels. Rebuilt via `pnpm build` from the final merged source — no source changes here, only regenerated output. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Run the editor-ui-verify card's own job (it had never actually been executed, despite the design doc and code already being merged): pnpm lint / pnpm build / pnpm test (52/52) / pnpm e2e (26/26) all green on HEAD. Mark the feature doc delivered and sync its Button/ Panel signatures to what actually shipped (Button gained a "menu" variant distinct from "nav"; Panel's scroll prop was dropped in favor of CSS-only handling) — closeout review caught both the missing verify step and the doc/code drift. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
editor/'s panels (ConflictPanel, DiffPreview, ErrorPanel, ExportPanel, SettingsPanel, TableList, App.tsx shell) into three minimal reusable components —Button,Panel,DataTable— plus a design-token stylesheet, all undereditor/src/components/ui/.data-testidpreserved verbatim; the existing Playwright e2e suite (26 specs) is the regression net and passes unchanged.src/lumio_config/editor_static/(the Python host's actually-served editor bundle) from the final refactored source, so the change is live for real users, not just in source.dist/— stays entirely insideeditor/. Design doc:.spec/knowledge/features/editor-ui-primitives.md.Process
Built via
brainstorming→writing-plans(10 task cards, contract-first with 3 parallel waves) →subagent-driven-development. Went through a deep closeout review (agents/reviewer.md) that caught two closeout gaps (the verify step never actually run; the generatededitor_staticbundle left stale) — both fixed and re-reviewed to a pass.Test plan
pnpm lint— eslint + tsc --noEmit + check-depspnpm buildpnpm test— 52/52 (includes newButton.test.tsx/Panel.test.tsx/DataTable.test.tsx)pnpm e2e— 26/26 Playwright specs🤖 Generated with Claude Code