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>
Delete 7 organisms that have JSON equivalents and are no longer needed:
- AppHeader (routes to @/lib/json-ui/json-components)
- EmptyCanvasState (routes to JSON)
- NavigationMenu (routes to JSON with useNavigationMenu hook)
- PageHeader (routes to JSON)
- SchemaCodeViewer (routes to JSON)
- ToolbarActions (routes to JSON)
- TreeListPanel (routes to JSON)
Updated imports in 2 files to use JSON versions:
- AppMainPanel: AppHeader from json-components
- AppLayout: NavigationMenu from json-components
Remaining organisms (6):
- SchemaEditorLayout, SchemaEditorCanvas, SchemaEditorPropertiesPanel
- SchemaEditorSidebar, SchemaEditorStatusBar, SchemaEditorToolbar
(These don't have JSON equivalents yet)
Build: passing ✓
Component types: 343 ✓
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Deleted molecules now using JSON-ui implementations:
- AppBranding, CodeExplanationDialog, ComponentBindingDialog
- DataSourceCard, DataSourceEditorDialog, GitHubBuildStatus
- LazyBarChart, LazyD3BarChart, LazyLineChart
- NavigationGroupHeader, SaveIndicator, StorageSettings
Updated src/components/molecules/index.ts to import these from
@/lib/json-ui/json-components instead of TSX files.
Updated src/components/CodeEditor.tsx to import CodeExplanationDialog
from json-components.
Organisms still depend on some molecules (CanvasRenderer, ComponentPalette,
ComponentTree, PropertyEditor, etc) so those remain as TSX.
Build passes successfully with no errors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Migrated EmptyCanvasState, SchemaCodeViewer, ToolbarActions, and AppHeader
from TSX to JSON-based components. These are display-focused organisms with
no complex state management requirements.
Changes:
- Create JSON definitions for 4 organisms in src/components/json-definitions/
- Create TypeScript interfaces in src/lib/json-ui/interfaces/
- Add exports to src/lib/json-ui/json-components.ts
- Update interfaces/index.ts to export new interfaces
- Registry entries already marked as jsonCompatible: true
All organisms are pure JSON components (no custom hooks needed):
- EmptyCanvasState: Display component with optional action buttons
- SchemaCodeViewer: Display component showing JSON schema with tabs
- ToolbarActions: Flex container with conditional toolbar buttons
- AppHeader: Complex header layout with multiple sub-components
Build passing with no errors.
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>
- Updated DisplayTab.tsx to use Breadcrumb instead of BreadcrumbNav
- Updated atoms/index.ts to re-export JSON components that were previously unavailable from atoms module (Notification, ProgressBar, Pulse, etc.)
- Fixed build errors from missing component exports by consolidating exports from json-components module
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Created JSON interface files: PageHeader, ProgressBar, Pulse, QuickActionButton, SearchInput, SeedDataStatus, Sparkle
- Created JSON definitions for all 12 components with full bindings
- Updated json-components.ts with imports and exports for new components
- Updated interfaces/index.ts to export new interface types
- Updated json-components-registry.json marking components as migrated and jsonCompatible
- Deleted 12 legacy TSX files from src/components/atoms/
- Updated atom imports where the deleted components were used
This completes the migration of the second batch of atoms, moving stateless UI components to JSON-driven architecture.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Migrated the following 12 atoms to JSON:
- DatePicker
- DetailRow
- Divider
- Drawer
- EmptyMessage
- ErrorBadge
- FileIcon
- Form
- FormField
- GlowCard
- Heading
- HelperText
Created JSON definitions in src/components/json-definitions/
Created TypeScript interfaces in src/lib/json-ui/interfaces/
Exported all 12 components from src/lib/json-ui/json-components.ts
Updated src/lib/json-ui/interfaces/index.ts with new exports
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>
Completed JSON migration for 6 atomic components:
- Breadcrumb: Navigation breadcrumb with configurable items
- Button: Interactive button with icons, loading, and full width support
- Calendar: Date picker using shadcn/ui Calendar
- Card: Container with variants (default, bordered, elevated, flat) and padding options
- Checkbox: Checkbox control with indeterminate state and size variants
- ContextMenu: Right-click context menu with nested submenu support
Changes:
- Created interface definitions in src/lib/json-ui/interfaces/
- Created JSON definitions in src/components/json-definitions/
- Exported all components from src/lib/json-ui/json-components.ts
- Updated json-components-registry.json with conversion metadata
- All components are pure stateless JSON (no hooks required)
- Build verified successful with no new TypeScript errors
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
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.
- Added BasicPageHeader export to atoms/index.ts (was only exported as PageHeader)
- Added Accordion export to atoms/index.ts (file existed but wasn't exported)
- Created AppBranding component in molecules/ (was missing)
- Added AppBranding export to molecules/index.ts
- Added missing exports to FeatureIdeaCloud/constants.ts (GROUP_COLORS, CATEGORIES, PRIORITIES, STATUSES)
- Build now completely clean with zero errors
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
- Fixed lazy-d3-bar-chart.json className binding to use className instead of data
- Fixed component-tree.json className binding to use className instead of data
- Code review feedback addressed
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
- 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>
- Deleted ComponentBindingDialogWrapper.tsx and DataSourceEditorDialogWrapper.tsx
- These already have JSON definitions and were exported from json-components
- Updated molecules/index.ts to export from json-components instead of wrappers
- Reduced remaining wrappers from 6 to 4
- All deleted wrappers now pure JSON components
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>
- Deleted TreeCard.tsx and TreeListHeader.tsx
- These components are now loaded dynamically through JSON registry
- import.meta.glob automatically discovers them without TypeScript files
- Consumers already refactored to not import from these files
- JSON system working correctly - no more rigid TypeScript components needed
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
- Import DataCard from @/components/atoms/json-ui instead of molecules
- Replace ActionBar with inline Button components
- This bypasses the molecules/index.ts exports as intended
- Components now loaded directly or through JSON registry
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
