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>
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>
- Create JSON definition in src/components/json-definitions/data-source-manager.json
- Create TypeScript interface in src/lib/json-ui/interfaces/data-source-manager.ts
- Create custom hook useDataSourceManagerState in src/hooks/use-data-source-manager-state.ts
- Register hook in src/lib/json-ui/hooks-registry.ts
- Export DataSourceManager from src/lib/json-ui/json-components.ts
- Update imports in src/components/DataBindingDesigner.tsx
- Remove legacy TSX files and sub-components
- Update exports in src/components/organisms/index.ts
- Add hook export in src/hooks/index.ts
DataSourceManager now uses JSON-driven architecture with custom hooks for state management.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Introduced Timestamp component for displaying formatted dates and relative time.
- Added Toggle component for switch-like functionality with customizable sizes.
- Implemented TreeIcon component for rendering tree icons using Phosphor icons.
- Created EditorActions component for explain and improve actions with icons.
- Developed FileTabs component for managing open files with close functionality.
- Added LazyInlineMonacoEditor and LazyMonacoEditor for lazy loading Monaco editor.
- Implemented NavigationItem for navigation with badges and icons.
- Created PageHeaderContent for displaying page headers with icons and descriptions.
- Added JSON configuration files for various UI components and layouts.
- Enhanced data binding with new computed data source hook.
- Updated component registry and types for new components.
- Configured Vite for improved hot module replacement experience.
