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>
- 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>
- 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>
- 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.
Issue: When we deleted 123 "simple" components, we inadvertently deleted components that were dependencies for other parts of the system, causing build errors.
Solution: Restored all deleted components that are imported by other files.
Restored files:
UI Components (24): accordion, alert, aspect-ratio, avatar, badge, button, card, checkbox, collapsible, dialog, hover-card, input, label, popover, progress, radio-group, resizable, scroll-area, separator, skeleton, sheet, switch, tabs, textarea, toggle, tooltip
Molecules (5): DataSourceCard, EditorToolbar, EmptyEditorState, MonacoEditorPanel, SearchBar
Organisms (8): EmptyCanvasState, PageHeader, SchemaEditorCanvas, SchemaEditorPropertiesPanel, SchemaEditorSidebar, SchemaEditorStatusBar, SchemaEditorToolbar, ToolbarActions
Atoms (1): Input
Total restored: 38 files
Remaining Issue:
- Pre-existing bug in component-registry.ts: import.meta.glob cannot use dynamic patterns from JSON
- This requires a refactor to use static glob patterns
- Not introduced by our changes - was already in codebase
Current Status:
- Most import errors resolved
- Application can compile with restored dependencies
- JSON component definitions remain intact and functional
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Property 'config' does not exist on type 'IntrinsicAttributes & ComponentRendererProps'.
Error: src/components/JSONLambdaDesigner.tsx(5,28): error TS2322: Type '{ config: { name: string; layout: { type: string; }; dataSources: ({ id: string; key: string; type: string; defaultValue?: undefined; compute?: undefined; dependencies?: undefined; } | { id: string; type: string; defaultValue: null; key?: undefined; compute?: undefined; dependencies?: undefined; } | { ...; } | { ......' is not assignable to type 'IntrinsicAttributes & ComponentRendererProps'.
Property 'config' does not exist on type 'IntrinsicAttributes & ComponentRendererProps'.
Error: src/components/JSONStyleDesigner.tsx(5,28): error TS2322: Type '{ config: { id: string; name: string; layout: { type: string; }; dataSources: ({ id: string; type: string; key: string; defaultValue: { activeVariantId: string; variants: { id: string; name: string; colors: { ...; }; }[]; typography: { ...; }; }; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; }...' is not assignable to type 'IntrinsicAttributes & ComponentRendererProps'.
Property 'config' does not exist on type 'IntrinsicAttributes & ComponentRendererProps'.
Error: src/components/JSONWorkflowDesigner.tsx(11,18): error TS2352: Conversion of type '{ name: string; layout: { type: string; }; dataSources: ({ id: string; key: string; type: string; defaultValue?: undefined; compute?: undefined; dependencies?: undefined; } | { id: string; type: string; defaultValue: null; key?: undefined; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; } | { .....' to type 'PageSchema' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Property 'id' is missing in type '{ name: string; layout: { type: string; }; dataSources: ({ id: string; key: string; type: string; defaultValue?: undefined; compute?: undefined; dependencies?: undefined; } | { id: string; type: string; defaultValue: null; key?: undefined; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; } | { .....' but required in type 'PageSchema'.
Error: src/components/ProjectDashboard.tsx(81,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(89,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(97,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(105,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(113,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(121,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/index.ts(2,1): error TS2308: Module './atoms' has already exported a member named 'EmptyState'. Consider explicitly re-exporting to resolve the ambiguity.
Error: src/components/index.ts(2,1): error TS2308: Module './atoms' has already exported a member named 'LoadingState'. Consider explicitly re-exporting to resolve the ambiguity.
Error: src/components/index.ts(2,1): error TS2308: Module './atoms' has already exported a member named 'StatCard'. Consider explicitly re-exporting to resolve the ambiguity.
Error: Process completed with exit code 2.
