mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
Add comprehensive documentation and JSON export
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
192
JSON_COMPONENTS.md
Normal file
192
JSON_COMPONENTS.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# JSON UI Components Registry
|
||||
|
||||
This document describes the JSON UI component system and lists all components that can be rendered from JSON schemas.
|
||||
|
||||
## Overview
|
||||
|
||||
The JSON UI system allows you to define user interfaces using JSON schemas instead of writing React code. This is useful for:
|
||||
- Dynamic UI generation
|
||||
- No-code/low-code interfaces
|
||||
- Configuration-driven UIs
|
||||
- Rapid prototyping
|
||||
|
||||
## Quick Start
|
||||
|
||||
### List All JSON-Compatible Components
|
||||
|
||||
```bash
|
||||
# List all components with details
|
||||
npm run components:list
|
||||
|
||||
# List only supported components
|
||||
npm run components:list -- --status=supported
|
||||
|
||||
# List only planned components
|
||||
npm run components:list -- --status=planned
|
||||
|
||||
# Output as JSON
|
||||
npm run components:list -- --format=json
|
||||
```
|
||||
|
||||
### Using JSON UI Components
|
||||
|
||||
Components are defined in the `ComponentType` union in `src/types/json-ui.ts` and registered in `src/lib/json-ui/component-registry.tsx`.
|
||||
|
||||
Example JSON schema:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "example-page",
|
||||
"type": "Card",
|
||||
"props": {
|
||||
"className": "p-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "heading",
|
||||
"type": "Heading",
|
||||
"props": {
|
||||
"level": 2,
|
||||
"children": "Welcome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "description",
|
||||
"type": "Text",
|
||||
"props": {
|
||||
"children": "This is a dynamically rendered component"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cta",
|
||||
"type": "Button",
|
||||
"props": {
|
||||
"variant": "default",
|
||||
"children": "Get Started"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Component Categories
|
||||
|
||||
### Layout Components (12)
|
||||
Container elements for organizing content:
|
||||
- `div`, `section`, `article`, `header`, `footer`, `main` - HTML semantic elements
|
||||
- `Card` - Container with optional header, content, and footer
|
||||
- `Grid` - Responsive grid layout
|
||||
- `Stack` - Vertical or horizontal stack layout
|
||||
- `Flex` - Flexible box layout
|
||||
- `Container` - Centered container with max-width
|
||||
- `Dialog` - Modal dialog overlay
|
||||
|
||||
### Input Components (11)
|
||||
Form inputs and interactive controls:
|
||||
- `Button` - Interactive button
|
||||
- `Input` - Text input field
|
||||
- `TextArea` - Multi-line text input
|
||||
- `Select` - Dropdown select
|
||||
- `Checkbox` - Checkbox toggle
|
||||
- `Radio` - Radio button
|
||||
- `Switch` - Toggle switch
|
||||
- `Slider` - Numeric range slider
|
||||
- `NumberInput` - Numeric input with increment/decrement
|
||||
- `DatePicker` - Date selection (planned)
|
||||
- `FileUpload` - File upload control (planned)
|
||||
|
||||
### Display Components (16)
|
||||
Presentation and visual elements:
|
||||
- `Heading` - Heading text (h1-h6)
|
||||
- `Text` - Text content with typography
|
||||
- `Label` - Form label
|
||||
- `Badge` - Status or count indicator
|
||||
- `Tag` - Removable tag/chip
|
||||
- `Code` - Inline or block code
|
||||
- `Image` - Image with loading states
|
||||
- `Avatar` - User avatar image
|
||||
- `Icon` - Icon from library (planned)
|
||||
- `Progress` - Progress bar
|
||||
- `Spinner` - Loading spinner
|
||||
- `Skeleton` - Loading placeholder
|
||||
- `Separator` - Visual divider
|
||||
- `CircularProgress` - Circular indicator (planned)
|
||||
- `ProgressBar` - Linear progress (planned)
|
||||
- `Divider` - Section divider (planned)
|
||||
|
||||
### Navigation Components (3)
|
||||
Navigation and routing:
|
||||
- `Link` - Hyperlink element
|
||||
- `Breadcrumb` - Navigation trail (planned)
|
||||
- `Tabs` - Tabbed interface
|
||||
|
||||
### Feedback Components (7)
|
||||
Alerts, notifications, and status:
|
||||
- `Alert` - Alert notification message
|
||||
- `InfoBox` - Information box with icon
|
||||
- `EmptyState` - Empty state placeholder
|
||||
- `StatusBadge` - Status indicator
|
||||
- `StatusIcon` - Status icon (planned)
|
||||
- `ErrorBadge` - Error state (planned)
|
||||
- `Notification` - Toast notification (planned)
|
||||
|
||||
### Data Components (8)
|
||||
Data display and visualization:
|
||||
- `List` - Generic list renderer
|
||||
- `Table` - Data table
|
||||
- `KeyValue` - Key-value pair display
|
||||
- `StatCard` - Statistic card
|
||||
- `DataList` - Styled data list (planned)
|
||||
- `DataTable` - Advanced table with sorting/filtering (planned)
|
||||
- `Timeline` - Timeline visualization (planned)
|
||||
- `MetricCard` - Metric display (planned)
|
||||
|
||||
### Custom Components (3)
|
||||
Domain-specific components:
|
||||
- `DataCard` - Custom data display card
|
||||
- `SearchInput` - Search input with icon
|
||||
- `ActionBar` - Action button toolbar
|
||||
|
||||
## Current Status
|
||||
|
||||
- **Total Components**: 60
|
||||
- **Supported**: 46 (77%)
|
||||
- **Planned**: 14 (23%)
|
||||
|
||||
## Files
|
||||
|
||||
- `json-components-registry.json` - Complete registry with metadata
|
||||
- `src/types/json-ui.ts` - TypeScript types and ComponentType union
|
||||
- `src/lib/json-ui/component-registry.tsx` - Component registry mapping
|
||||
- `src/lib/component-definitions.ts` - Component definitions with defaults
|
||||
- `scripts/list-json-components.cjs` - CLI tool to list components
|
||||
|
||||
## Adding New Components
|
||||
|
||||
To add a new component to the JSON UI system:
|
||||
|
||||
1. Add the component type to `ComponentType` union in `src/types/json-ui.ts`
|
||||
2. Import and register it in `src/lib/json-ui/component-registry.tsx`
|
||||
3. Add component definition in `src/lib/component-definitions.ts`
|
||||
4. Update `json-components-registry.json` with metadata
|
||||
5. Test the component in a JSON schema
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
Components marked as "planned" are:
|
||||
- Available in the codebase as React components
|
||||
- Not yet integrated into the JSON UI system
|
||||
- Can be migrated following the steps above
|
||||
|
||||
Priority for migration:
|
||||
1. High-usage components
|
||||
2. Components with simple props
|
||||
3. Components with good atomic design
|
||||
4. Components without complex state management
|
||||
|
||||
## Related Documentation
|
||||
|
||||
- [PRD.md](./PRD.md) - Product requirements document
|
||||
- [REDUX_DOCUMENTATION.md](./REDUX_DOCUMENTATION.md) - Redux integration
|
||||
- [src/types/json-ui.ts](./src/types/json-ui.ts) - Type definitions
|
||||
- [src/lib/component-definitions.ts](./src/lib/component-definitions.ts) - Component metadata
|
||||
494
json-components-list.json
Normal file
494
json-components-list.json
Normal file
@@ -0,0 +1,494 @@
|
||||
[
|
||||
{
|
||||
"type": "div",
|
||||
"name": "Container (div)",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Generic container element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "section",
|
||||
"name": "Section",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Semantic section element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "article",
|
||||
"name": "Article",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Semantic article element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"name": "Header",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Semantic header element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "footer",
|
||||
"name": "Footer",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Semantic footer element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "main",
|
||||
"name": "Main",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Semantic main content element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Card",
|
||||
"name": "Card",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Container card with optional header, content, and footer",
|
||||
"status": "supported",
|
||||
"subComponents": [
|
||||
"CardHeader",
|
||||
"CardTitle",
|
||||
"CardDescription",
|
||||
"CardContent",
|
||||
"CardFooter"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Grid",
|
||||
"name": "Grid",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Responsive grid layout",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Flex",
|
||||
"name": "Flex",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Flexible box layout container",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Stack",
|
||||
"name": "Stack",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Vertical or horizontal stack layout",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Container",
|
||||
"name": "Container",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Centered container with max-width",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"name": "Button",
|
||||
"category": "input",
|
||||
"canHaveChildren": true,
|
||||
"description": "Interactive button element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Input",
|
||||
"name": "Input",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Text input field",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "TextArea",
|
||||
"name": "TextArea",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Multi-line text input",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Select",
|
||||
"name": "Select",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Dropdown select control",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Checkbox",
|
||||
"name": "Checkbox",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Checkbox toggle control",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Radio",
|
||||
"name": "Radio",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Radio button selection",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Switch",
|
||||
"name": "Switch",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Toggle switch control",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Slider",
|
||||
"name": "Slider",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Numeric range slider",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "NumberInput",
|
||||
"name": "NumberInput",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Numeric input with increment/decrement",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "DatePicker",
|
||||
"name": "DatePicker",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "Date selection input",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "FileUpload",
|
||||
"name": "FileUpload",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "File upload control",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "Text",
|
||||
"name": "Text",
|
||||
"category": "display",
|
||||
"canHaveChildren": true,
|
||||
"description": "Text content with typography variants",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Heading",
|
||||
"name": "Heading",
|
||||
"category": "display",
|
||||
"canHaveChildren": true,
|
||||
"description": "Heading text with level (h1-h6)",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Label",
|
||||
"name": "Label",
|
||||
"category": "display",
|
||||
"canHaveChildren": true,
|
||||
"description": "Form label element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Badge",
|
||||
"name": "Badge",
|
||||
"category": "display",
|
||||
"canHaveChildren": true,
|
||||
"description": "Small status or count indicator",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Tag",
|
||||
"name": "Tag",
|
||||
"category": "display",
|
||||
"canHaveChildren": true,
|
||||
"description": "Removable tag or chip",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Code",
|
||||
"name": "Code",
|
||||
"category": "display",
|
||||
"canHaveChildren": true,
|
||||
"description": "Inline or block code display",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Image",
|
||||
"name": "Image",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Image element with loading states",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Avatar",
|
||||
"name": "Avatar",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "User avatar image",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Icon",
|
||||
"name": "Icon",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Icon from icon library",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "Separator",
|
||||
"name": "Separator",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Visual divider line",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Divider",
|
||||
"name": "Divider",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Visual section divider",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "Progress",
|
||||
"name": "Progress",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Progress bar indicator",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "ProgressBar",
|
||||
"name": "ProgressBar",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Linear progress bar",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "CircularProgress",
|
||||
"name": "CircularProgress",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Circular progress indicator",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "Spinner",
|
||||
"name": "Spinner",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Loading spinner",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Skeleton",
|
||||
"name": "Skeleton",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Loading skeleton placeholder",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Link",
|
||||
"name": "Link",
|
||||
"category": "navigation",
|
||||
"canHaveChildren": true,
|
||||
"description": "Hyperlink element",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Breadcrumb",
|
||||
"name": "Breadcrumb",
|
||||
"category": "navigation",
|
||||
"canHaveChildren": false,
|
||||
"description": "Navigation breadcrumb trail",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "Tabs",
|
||||
"name": "Tabs",
|
||||
"category": "navigation",
|
||||
"canHaveChildren": true,
|
||||
"description": "Tabbed interface container",
|
||||
"status": "supported",
|
||||
"subComponents": [
|
||||
"TabsList",
|
||||
"TabsTrigger",
|
||||
"TabsContent"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Alert",
|
||||
"name": "Alert",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": true,
|
||||
"description": "Alert notification message",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "InfoBox",
|
||||
"name": "InfoBox",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": true,
|
||||
"description": "Information box with icon",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Notification",
|
||||
"name": "Notification",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": true,
|
||||
"description": "Toast notification",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "StatusBadge",
|
||||
"name": "StatusBadge",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": false,
|
||||
"description": "Status indicator badge",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "StatusIcon",
|
||||
"name": "StatusIcon",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": false,
|
||||
"description": "Status indicator icon",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "EmptyState",
|
||||
"name": "EmptyState",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": true,
|
||||
"description": "Empty state placeholder",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "ErrorBadge",
|
||||
"name": "ErrorBadge",
|
||||
"category": "feedback",
|
||||
"canHaveChildren": false,
|
||||
"description": "Error state badge",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "List",
|
||||
"name": "List",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Generic list renderer with custom items",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "DataList",
|
||||
"name": "DataList",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Styled data list",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "Table",
|
||||
"name": "Table",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Data table",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "DataTable",
|
||||
"name": "DataTable",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Advanced data table with sorting and filtering",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "KeyValue",
|
||||
"name": "KeyValue",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Key-value pair display",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Timeline",
|
||||
"name": "Timeline",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Timeline visualization",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "StatCard",
|
||||
"name": "StatCard",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Statistic card display",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "MetricCard",
|
||||
"name": "MetricCard",
|
||||
"category": "data",
|
||||
"canHaveChildren": false,
|
||||
"description": "Metric display card",
|
||||
"status": "planned"
|
||||
},
|
||||
{
|
||||
"type": "DataCard",
|
||||
"name": "DataCard",
|
||||
"category": "custom",
|
||||
"canHaveChildren": false,
|
||||
"description": "Custom data display card",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "SearchInput",
|
||||
"name": "SearchInput",
|
||||
"category": "custom",
|
||||
"canHaveChildren": false,
|
||||
"description": "Search input with icon",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "ActionBar",
|
||||
"name": "ActionBar",
|
||||
"category": "custom",
|
||||
"canHaveChildren": false,
|
||||
"description": "Action button toolbar",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"type": "Dialog",
|
||||
"name": "Dialog",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Modal dialog overlay",
|
||||
"status": "supported"
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user