mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 06:14:59 +00:00
156 lines
5.3 KiB
Markdown
156 lines
5.3 KiB
Markdown
# JSON-Driven UI Refactoring Project
|
|
|
|
**Experience Qualities**:
|
|
|
|
|
|
This is a comprehensive refactoring that introduces a sophisticated JSON rendering engine, brea
|
|
## Essential Features
|
|
### JSON Schema Engine
|
|
|
|
**Complexity Level**: Complex Application (advanced functionality with multiple views)
|
|
This is a comprehensive refactoring that introduces a sophisticated JSON rendering engine, breaks down large monolithic components into atomic pieces, and extracts complex logic into custom hooks for maximum reusability.
|
|
|
|
## Essential Features
|
|
|
|
### JSON Schema Engine
|
|
- **Functionality**: Interprets JSON declarations to render complete UI hierarchies
|
|
- **Purpose**: Enable rapid UI changes without code modifications
|
|
- **Trigger**: Page load with JSON schema file
|
|
|
|
- **Functionality**: Extract all business logic, state management, and side effects into focused hoo
|
|
|
|
- **Success criteria**: Comp
|
|
### Dynamic Data Binding
|
|
- **Purpose**: Connect UI declarations to application s
|
|
- **Progression**: Parse binding → Evaluate ex
|
|
|
|
- **Functionality**: Map string function names in JSON to actual function implementations
|
|
|
|
- **Success criteria**: All
|
|
## Edge Case Handling
|
|
- **Invalid JSON Schema**: Validate schemas on load, show helpful error m
|
|
- **Unknown Components**: Log warning and render p
|
|
- **Performance Issues**: Implement memoization and virtualization for large lists
|
|
|
|
|
|
|
|
|
|
|
|
- Card backgrounds: `oklch(0.
|
|
|
|
|
|
|
|
- Primary (`oklch(0.55 0.
|
|
|
|
|
|
|
|
- H1 (Page Title): Space Grotesk Bold/32px/tight letter spacing/-0.02em
|
|
- H3 (Card Title): Space Grotesk Medium/18px/normal/0em
|
|
|
|
|
|
|
|
|
|
|
|
- **Card** - Primary container for grouped content, heavy use throughout
|
|
- **Button** - All sizes from icon-only to full CTAs
|
|
- **Dialog** - Modals for editing schemas, previewing renders
|
|
- **Select/Combobox** - Component type selection, binding target selection
|
|
|
|
|
|
|
|
- Binding expression builder with autocomplete
|
|
|
|
- Buttons: Hover l
|
|
|
|
**Icon Selection**:
|
|
|
|
- Lightning for actio
|
|
- Stack for composed components
|
|
- Wrench for configuration
|
|
|
|
- Card padding: p-6
|
|
|
|
**Foreground/Background Pairings**:
|
|
- Background (`oklch(0.12 0.02 260)`): Foreground (`oklch(0.95 0.005 260)`) - Ratio 17.8:1 ✓
|
|
- Card (`oklch(0.16 0.02 260)`): Card Foreground (`oklch(0.95 0.005 260)`) - Ratio 15.2:1 ✓
|
|
- Primary (`oklch(0.55 0.18 280)`): Primary Foreground (`oklch(1 0 0)`) - Ratio 6.1:1 ✓
|
|
- Accent (`oklch(0.75 0.15 195)`): Accent Foreground (`oklch(0.12 0.02 260)`) - Ratio 11.4:1 ✓
|
|
|
|
## Font Selection
|
|
|
|
Use a distinctive technical aesthetic with modern developer-focused typefaces that communicate precision and clarity.
|
|
|
|
**Typographic Hierarchy**:
|
|
- H1 (Page Title): Space Grotesk Bold/32px/tight letter spacing/-0.02em
|
|
- H2 (Section Header): Space Grotesk SemiBold/24px/normal/0em
|
|
- H3 (Card Title): Space Grotesk Medium/18px/normal/0em
|
|
- Body: Inter Regular/14px/relaxed/1.6 line height
|
|
- Code: JetBrains Mono Regular/13px/monospace/1.5 line height
|
|
- Caption: Inter Regular/12px/relaxed/tracking-wide
|
|
|
|
## Animations
|
|
|
|
Animations should emphasize the technical nature while remaining subtle. Use sharp, precise movements that reflect data flow and system operations. Key moments: schema loading (pulse effect), component mounting (fade-up), data updates (highlight flash), and navigation transitions (slide).
|
|
|
|
## Component Selection
|
|
|
|
**Components**:
|
|
- **Card** - Primary container for grouped content, heavy use throughout
|
|
- **Badge** - Status indicators for components, data sources, build status
|
|
- **Button** - All sizes from icon-only to full CTAs
|
|
- **Tabs** - Navigation between schemas, configuration views
|
|
- **Dialog** - Modals for editing schemas, previewing renders
|
|
- **ScrollArea** - Custom scrollbars for code editors and tree views
|
|
- **Select/Combobox** - Component type selection, binding target selection
|
|
- **Input/Textarea** - JSON editing, binding expressions
|
|
- **Accordion** - Collapsible sections in property panels
|
|
- **Separator** - Visual hierarchy in dense information displays
|
|
|
|
**Customizations**:
|
|
- Custom JSON editor component with syntax highlighting
|
|
- Schema visualizer component showing component hierarchy
|
|
- Binding expression builder with autocomplete
|
|
- Component palette with drag-and-drop preview
|
|
|
|
**States**:
|
|
- Buttons: Hover lifts slightly with shadow, active presses down, disabled grays out with reduced opacity
|
|
- Inputs: Focus shows accent ring, error shows destructive ring with shake animation
|
|
- Cards: Hover subtly brightens border, selected shows accent border
|
|
|
|
**Icon Selection**:
|
|
- Code/FileCode for schemas and JSON files
|
|
- Tree/TreeStructure for component hierarchies
|
|
- Database for data bindings
|
|
- Lightning for actions and functions
|
|
- Cube for atomic components
|
|
- Stack for composed components
|
|
- Eye for preview modes
|
|
- Wrench for configuration
|
|
|
|
**Spacing**:
|
|
- Base unit: 4px (Tailwind's spacing scale)
|
|
- Card padding: p-6
|
|
- Section gaps: gap-6
|
|
- Grid gaps: gap-4
|
|
- Inline gaps: gap-2
|
|
- Tight groups: gap-1
|
|
|
|
**Mobile**:
|
|
- Stack navigation tabs vertically in sheet
|
|
- Single column grid for stat cards
|
|
- Collapsible property panels
|
|
- Full-screen modals
|
|
- Bottom sheet for quick actions
|
|
- Touch-optimized hit areas (min 44px)
|
|
- Grid gaps: gap-4
|
|
- Inline gaps: gap-2
|
|
- Tight groups: gap-1
|
|
|
|
**Mobile**:
|
|
- Stack navigation tabs vertically in sheet
|
|
- Single column grid for stat cards
|
|
- Collapsible property panels
|
|
- Full-screen modals
|
|
- Bottom sheet for quick actions
|
|
- Touch-optimized hit areas (min 44px)
|