App
├── Header (logo, project name, user menu)
├── Toolbar (list of ToolButtons)
│ └── ToolButton (icon, name, active state, click)
├── CanvasArea (canvas element, zoom controls)
├── SettingsPanel (list of FilterSliders)
│ ├── FilterSlider (label, range, value display)
│ └── ResetButton
├── Toast (message, type, auto-dismiss)
└── Modal (title, content, close button)
Create each component in /components/:
src/components/
├── Header.jsx
├── Toolbar.jsx
├── ToolButton.jsx
├── CanvasArea.jsx
├── SettingsPanel.jsx
├── FilterSlider.jsx
├── Toast.jsx
└── Modal.jsx
Each file exports one component. Each component receives all its data through props.
function App() {
return (
<div className="app-container">
<Header />
<Toolbar tools={toolList} />
<CanvasArea />
<SettingsPanel filters={filterList} />
</div>
);
}
Every component should be configurable through props — not hardcoded. ToolButton takes name, icon, onClick, active. FilterSlider takes label, min, max, value, onChange. Toast takes message, type, onDismiss.
All 8 components composed into the full PixelCraft UI. The layout should visually match the vanilla version: header at top, toolbar on left, canvas center, settings panel on right.
git switch -c feature/PIXELCRAFT-029-component-library
git add src/components/ src/App.jsx
git commit -m "Build 8-component library for PixelCraft React (PIXELCRAFT-029)"
git push origin feature/PIXELCRAFT-029-component-library
# PR → Review → Merge → Close ticket ✅
Component composition is the UI equivalent of function composition.
Small, focused, reusable parts combined into complex wholes.