- Create conflict-resolution-demo.json with demo component
- Create conflict-resolution-page.json with full page layout
- Update hooks registry with new hook registrations
- Update interface exports for new components
- Update json-components.ts with new component exports
- Update audit report with current migration status
Build: passing ✓
Audit: 0 issues ✓
Converts two additional components to JSON architecture with custom hooks:
- ConflictDetailsDialog: Dialog component with conflict diff analysis
- DataBindingDesigner: Designer for data binding configuration
Includes:
- JSON definitions in src/components/json-definitions/
- Custom hooks (useConflictDetailsDialog, useDataBindingDesigner)
- TypeScript interfaces for type safety
- Registry updates and exports
All tests passing, build clean (0 audit issues).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added 3 additional JSON component definitions and interfaces:
- ComponentTreeDemoPage: Demo page for component tree visualization
- JsonFlaskDesigner: Designer for Flask app config using JSON
- JsonStyleDesigner: Designer for styling config using JSON
Changes:
- Created 2 JSON definitions in src/components/json-definitions/
- Created 3 TypeScript interfaces in src/lib/json-ui/interfaces/
- Updated interfaces/index.ts to export all new interfaces
- Updated json-components.ts exports for all 3 new components
- Updated json-components-registry.json with 3 new entries
- Updated registry statistics: 373 → 376 total, 223 → 226 JSON-compatible
Build status: PASS ✓
All components verified and building successfully.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Removed deleted EditorToolbar and MonacoEditorPanel from CodeEditor
- Fixed SearchBar import in ComprehensiveDemoTaskList (replaced with Input)
- Updated AtomicComponentDemo to remove missing Grid component import
- Fixed atoms/index.ts to export only available JSON components
- Re-added Container component support (JSON definition exists)
- All build errors resolved, production build passes successfully
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
All component index files (atoms, molecules, organisms) have been verified
to correctly export only existing TSX files after the massive deletion of
141 duplicate components.
Verification Summary:
- Atoms: 27 TSX exports + JSON-UI imports ✓
- Molecules: 8 TSX exports + 1 function export + JSON-UI imports ✓
- Organisms: 6 TSX exports + 1 root export + JSON-UI imports ✓
All files verified to exist, no broken imports detected.
Build: PASSED (9.30s)
Audit: 68 remaining duplicates, 11 potential conversions identified
No changes needed to index files - they were already cleaned during
the previous TSX deletion commits.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Converted AppBranding, DataSourceCard, CodeExplanationDialog, ComponentPalette, and CanvasRenderer from TSX to JSON-based architecture.
Changes:
- Created JSON definitions in src/components/json-definitions/
- Created TypeScript interfaces in src/lib/json-ui/interfaces/
- Added exports to src/lib/json-ui/json-components.ts
- Updated json-components-registry.json with 5 new components
- Updated registry statistics (total: 347, molecules: 50, jsonCompatible: 124)
All components use createJsonComponent for pure JSON rendering without hooks.
Build passes with no errors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Migrate the following components from TSX to JSON-driven architecture:
- Slider - range input control with label and value display
- Spinner - rotating loading indicator with Phosphor icons
- StatusIcon - saved/synced status indicators
- StepIndicator - step-by-step progress display
- Stepper - numbered step progression indicator
- Switch - toggle control with optional label
- Table - data table with columns and row handling
- Tabs - tabbed navigation with active state
- Tag - inline tag/badge with optional remove button
- TextArea - multiline text input with error state
- TextGradient - gradient text effect component
- TextHighlight - highlighted/emphasized text span
- Timeline - vertical timeline with status indicators
- Timestamp - date/time display with relative formatting
- Toggle - simple toggle switch control
- Tooltip - popover tooltip with positioning
Created:
- 17 TypeScript interface files in src/lib/json-ui/interfaces/
- 17 JSON definition files in src/components/json-definitions/
- Updated json-components.ts with imports and exports
- Updated json-components-registry.json to mark components as jsonCompatible
All components are pure JSON with no custom hooks required (stateless rendering).
Build successfully completes with no errors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Introduced `menu.json` for menu component structure with bindings for trigger and content.
- Created `password-input.json` for password input handling visibility and value changes.
- Added `popover.json` for popover component with trigger and content bindings.
feat: Implement custom hooks for UI interactions
- Added `useAccordion` for managing accordion state with single/multiple item support.
- Created `useBindingEditor` for managing bindings in a dynamic editor.
- Implemented `useCopyState` for clipboard copy functionality with feedback.
- Developed `useFileUpload` for handling file uploads with drag-and-drop support.
- Introduced `useFocusState` for managing focus state in components.
- Created `useImageState` for handling image loading and error states.
- Added `useMenuState` for managing menu interactions and item clicks.
- Implemented `usePasswordVisibility` for toggling password visibility.
- Developed `usePopoverState` for managing popover visibility and interactions.
feat: Add constants and interfaces for JSON UI components
- Introduced constants for sizes, placements, styles, and object-fit handling.
- Created interfaces for various components including Accordion, Binding Editor, Copy Button, Data Source Editor, File Upload, and more.
- Added type definitions for menu items, popover props, and other UI elements to enhance type safety and maintainability.
