From a96ea8db29d6ccfd5e431e1e42add5039c6c40cf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 17 Jan 2026 21:55:58 +0000 Subject: [PATCH] Add comprehensive documentation and JSON export Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com> --- JSON_COMPONENTS.md | 192 +++++++++++++++ json-components-list.json | 494 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 686 insertions(+) create mode 100644 JSON_COMPONENTS.md create mode 100644 json-components-list.json diff --git a/JSON_COMPONENTS.md b/JSON_COMPONENTS.md new file mode 100644 index 0000000..c07496e --- /dev/null +++ b/JSON_COMPONENTS.md @@ -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 diff --git a/json-components-list.json b/json-components-list.json new file mode 100644 index 0000000..0c9a2ed --- /dev/null +++ b/json-components-list.json @@ -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" + } +]