Converts 8 atom components from TSX to JSON-driven architecture:
- ActionButton: Action trigger with optional tooltip
- ActionCard: Interactive card with icon and description
- ActionIcon: Icon mapper for common actions
- Alert: Variant-based alert notifications
- AppLogo: Branding logo component
- Avatar: User profile images with fallbacks
- AvatarGroup: Grouped avatar display with overflow
- Badge: Status and count indicators
Changes:
- Created interface files for all 8 components in src/lib/json-ui/interfaces/
- Created JSON definitions in src/components/json-definitions/
- Updated json-components.ts with imports and pure JSON exports
- Updated interfaces/index.ts with new exports
- Updated json-components-registry.json to mark all as jsonCompatible
All components are stateless pure JSON implementations using createJsonComponent.
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>
- Create NavigationMenuProps interface for type safety
- Implement useNavigationMenu hook with:
- expandedGroups state management
- toggleGroup, expandAll, collapseAll actions
- isItemVisible, getVisibleItemsCount, getItemBadge utilities
- handleItemHover, handleItemLeave with route preloading
- Create comprehensive JSON definition with:
- Nested Collapsible groups for navigation sections
- Dynamic item rendering with visibility filtering
- Badge support for error count and item badges
- Active state styling and hover effects
- Register hook in hooks-registry
- Export from json-components.ts with hook integration
- Update json-components-registry.json (source: organisms, jsonCompatible: true)
All state management delegated to useNavigationMenu hook.
Navigation logic fully expressible in JSON with custom hooks.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Converts AppMainPanel from TSX to pure JSON component. AppMainPanel is a
simple container that composes PWAStatusBar, PWAUpdatePrompt, AppHeader,
and RouterProvider components.
- Create interface in src/lib/json-ui/interfaces/app-main-panel.ts
- Create JSON definition in src/components/json-definitions/app-main-panel.json
- Export from json-components.ts as pure component
- Update registry with AppMainPanel entry
- Update interfaces/index.ts to export new interface
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.
- Created lazy-d3-bar-chart.json with SVG rendering using chartData hook
- Created storage-settings.json with backend switching and import/export
- Deleted LazyD3BarChartWrapper.tsx and StorageSettingsWrapper.tsx
- Updated exports to use JSON components
- ALL 11 components now pure JSON - zero wrappers remaining
- Complete JSON component system with hooks loader proven working
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
- Created useComponentTree hook to flatten recursive tree structure
- Created useStorageBackendInfo hook for backend icon/copy logic
- Created useD3BarChart hook for chart calculations
- Registered all new hooks in hooks-registry
- Created component-tree.json with list rendering using treeData from hook
- Created seed-data-manager.json with full Card/Alert/Button structure
- Deleted ComponentTreeWrapper.tsx and SeedDataManagerWrapper.tsx
- Updated exports to use JSON components
- 9 components now pure JSON, 2 wrappers remaining
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
- Created hooks-registry.ts for registering custom React hooks
- Created createJsonComponentWithHooks for JSON components that need hooks
- Implemented SaveIndicator as pure JSON with useSaveIndicator hook
- Moved JSON definitions from wrappers/definitions to components/json-definitions
- Removed wrappers folder entirely
- Fixed NavigationItem JSON to include onClick handler binding
- Deleted legacy NavigationItem.tsx and PageHeaderContent.tsx files
- Architecture: JSON + interfaces + hook loader = fully functional components
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
- Created src/lib/json-ui/interfaces/ folder for component interfaces
- Created createJsonComponent() helper for pure JSON component creation
- Deleted wrapper TypeScript files (LoadingFallbackWrapper, NavigationItemWrapper, PageHeaderContentWrapper, TreeCardWrapper)
- Components now export directly from JSON definitions via json-components.ts
- No more wrapper layer - components are pure JSON with separate interface definitions
- Architecture simplified: JSON definition + interface = component
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.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.
Fixed two critical syntax errors:
1. renderer.tsx:363 - Extra closing brace in form field rendering
2. syncSlice.ts:81-86 - Missing closing brace and duplicate code in sync loop
Changes:
- Fixed renderer.tsx form field map closing
- Cleaned up syncSlice.ts for loop structure
- Dev server now starts successfully on port 5001
These were pre-existing errors unrelated to JSON component conversion.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
git
copilot-swe-agent[bot]