mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
Merge pull request #159 from johndoe6345789/codex/remove-old-json-system-cruft
Remove legacy JSON docs and component report
This commit is contained in:
GitHub
@@ -1,184 +0,0 @@
|
||||
# JSON Compatibility Implementation Summary
|
||||
|
||||
## Overview
|
||||
This document summarizes the low-hanging fruit implemented from the JSON_COMPATIBILITY_ANALYSIS.md document.
|
||||
|
||||
## ✅ Completed Work
|
||||
|
||||
### 1. Added 6 Molecular Components to JSON Registry
|
||||
|
||||
The following components have been successfully integrated into the JSON UI system:
|
||||
|
||||
#### Components Added:
|
||||
1. **AppBranding** - Application branding with logo, title, and subtitle
|
||||
2. **LabelWithBadge** - Label with optional badge indicator (supports variant customization)
|
||||
3. **EmptyEditorState** - Empty state display for editor contexts
|
||||
4. **LoadingFallback** - Loading message display with spinner
|
||||
5. **LoadingState** - Configurable loading state indicator (supports size variants)
|
||||
6. **NavigationGroupHeader** - Navigation group header with expand/collapse indicator
|
||||
|
||||
### 2. Updated Type Definitions
|
||||
|
||||
**File: `src/types/json-ui.ts`**
|
||||
- Added all 6 new component types to the `ComponentType` union type
|
||||
- Ensures full TypeScript support for the new components in JSON schemas
|
||||
|
||||
### 3. Updated Component Registry
|
||||
|
||||
**File: `src/lib/json-ui/component-registry.tsx`**
|
||||
- Added imports for all 6 new molecular components
|
||||
- Registered components in `componentRegistry` object
|
||||
- Added components to `customComponents` export for enhanced discoverability
|
||||
|
||||
### 4. Created Showcase Schema
|
||||
|
||||
**File: `src/schemas/new-molecules-showcase.json`**
|
||||
- Created `newMoleculesShowcaseSchema` - A comprehensive demonstration page
|
||||
- Showcases each new component with realistic use cases
|
||||
- Includes data bindings and multiple variants
|
||||
- Demonstrates integration within Card layouts
|
||||
|
||||
### 5. Enhanced JSON UI Showcase Page
|
||||
|
||||
**File: `src/components/JSONUIShowcasePage.tsx`**
|
||||
- Added new "New Molecules" tab to the showcase
|
||||
- Integrated the new showcase schema with PageRenderer
|
||||
- Provides instant visual verification of the new components
|
||||
|
||||
## 📊 Impact
|
||||
|
||||
### Before:
|
||||
- JSON-compatible molecules: 3 (DataCard, SearchInput, ActionBar)
|
||||
- Total JSON components: ~60 (mostly atoms and UI primitives)
|
||||
|
||||
### After:
|
||||
- JSON-compatible molecules: 9 (+6 new)
|
||||
- Total JSON components: ~66 (+10% increase)
|
||||
- Enhanced showcase with dedicated demonstration page
|
||||
|
||||
## 🎯 Components Analysis Results
|
||||
|
||||
From the original 13 "fully compatible" molecules identified:
|
||||
|
||||
| Component | Status | Reason |
|
||||
|-----------|--------|--------|
|
||||
| AppBranding | ✅ Added | Simple props, no state |
|
||||
| LabelWithBadge | ✅ Added | Simple props, no state |
|
||||
| EmptyEditorState | ✅ Added | No props, pure display |
|
||||
| LoadingFallback | ✅ Added | Simple props, no state |
|
||||
| LoadingState | ✅ Added | Simple props, no state |
|
||||
| NavigationGroupHeader | ✅ Added | Simple props, display-only |
|
||||
| Breadcrumb | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
| SaveIndicator | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
| LazyBarChart | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
| LazyD3BarChart | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
| LazyLineChart | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
| SeedDataManager | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
| StorageSettings | ✅ Compatible | Component tree is JSON; hooks live in custom layer |
|
||||
|
||||
**Success Rate: 13/13 (100%)** - Refactoring allows JSON trees with custom hooks and typed interfaces in separate files.
|
||||
|
||||
## ✅ JSON Compatibility Table (Refactored)
|
||||
|
||||
All components can be represented as JSON component trees. Any stateful behavior, side effects, or data fetching should live in custom hooks, while shared types live in `types` files and shared interfaces live in `interfaces` files. This keeps JSON schemas focused on structure and bindings.
|
||||
|
||||
| Component | Compatibility Status | Required Bindings | Blocking Hooks | Notes |
|
||||
|-----------|----------------------|-------------------|----------------|-------|
|
||||
| AppBranding | ✅ Compatible | None required | None | Pure JSON tree; optional data bindings for text/imagery. |
|
||||
| LabelWithBadge | ✅ Compatible | Optional badge/value bindings | None | Pure JSON tree; bindings supply counts/labels. |
|
||||
| EmptyEditorState | ✅ Compatible | None required | None | Pure JSON tree; static placeholder. |
|
||||
| LoadingFallback | ✅ Compatible | Optional message bindings | None | Pure JSON tree; use bindings for dynamic copy. |
|
||||
| LoadingState | ✅ Compatible | Optional message/size bindings | None | Pure JSON tree; use bindings for dynamic copy. |
|
||||
| NavigationGroupHeader | ✅ Compatible | Optional label bindings | None | Pure JSON tree; structure only. |
|
||||
| Breadcrumb | ✅ Compatible | Navigation items binding | None | Hooks (e.g., navigation history) move to custom layer. |
|
||||
| SaveIndicator | ✅ Compatible | Save state binding | None | Hook-based timers/state live in custom layer. |
|
||||
| LazyBarChart | ✅ Compatible | Data/series bindings | None | Data loading hooks live in custom layer; JSON renders chart tree. |
|
||||
| LazyD3BarChart | ✅ Compatible | Data/series bindings | None | Data loading hooks live in custom layer; JSON renders chart tree. |
|
||||
| LazyLineChart | ✅ Compatible | Data/series bindings | None | Data loading hooks live in custom layer; JSON renders chart tree. |
|
||||
| SeedDataManager | ✅ Compatible | Actions/data bindings | None | Side effects move to custom hooks; JSON covers layout. |
|
||||
| StorageSettings | ✅ Compatible | Settings bindings | None | Side effects move to custom hooks; JSON covers layout. |
|
||||
|
||||
## 📝 Usage Example
|
||||
|
||||
Here's how to use the new components in JSON schemas:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "my-component",
|
||||
"type": "AppBranding",
|
||||
"props": {
|
||||
"title": "My Application",
|
||||
"subtitle": "Powered by JSON"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "label-with-count",
|
||||
"type": "LabelWithBadge",
|
||||
"props": {
|
||||
"label": "Active Users",
|
||||
"badgeVariant": "default"
|
||||
},
|
||||
"bindings": {
|
||||
"badge": { "source": "userCount" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "empty-state",
|
||||
"type": "EmptyEditorState",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "loading",
|
||||
"type": "LoadingState",
|
||||
"props": {
|
||||
"message": "Loading your data...",
|
||||
"size": "md"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🔄 Next Steps
|
||||
|
||||
### Immediate Opportunities:
|
||||
1. **Chart Components** - Create simplified wrapper components for charts that don't require hooks
|
||||
2. **Event Binding System** - Implement the event binding system described in the analysis
|
||||
3. **State Binding System** - Implement the state binding system for interactive components
|
||||
4. **Component Wrappers** - Create JSON-friendly wrappers for complex existing components
|
||||
|
||||
### Medium-term Goals:
|
||||
1. Add the 27 "maybe compatible" molecules with event binding support
|
||||
2. Implement computed prop transformations for dynamic component behavior
|
||||
3. Create JSON-friendly versions of the 14 organisms
|
||||
4. Build a visual component palette showing all JSON-compatible components
|
||||
|
||||
## 📚 Documentation
|
||||
|
||||
- Main analysis: `JSON_COMPATIBILITY_ANALYSIS.md`
|
||||
- Implementation summary: `JSON_COMPATIBILITY_IMPLEMENTATION.md` (this file)
|
||||
- Component registry: `src/lib/json-ui/component-registry.tsx`
|
||||
- Type definitions: `src/types/json-ui.ts`
|
||||
- Showcase schema: `src/schemas/new-molecules-showcase.json`
|
||||
- Live demo: Navigate to JSON UI Showcase → "New Molecules" tab
|
||||
|
||||
## ✨ Key Achievements
|
||||
|
||||
1. ✅ Successfully identified and added truly simple JSON-compatible components
|
||||
2. ✅ Maintained type safety throughout the implementation
|
||||
3. ✅ Created comprehensive demonstration with real-world examples
|
||||
4. ✅ Updated all relevant documentation
|
||||
5. ✅ Provided clear path forward for future additions
|
||||
|
||||
## 🎉 Conclusion
|
||||
|
||||
We successfully implemented the low-hanging fruit from the JSON compatibility analysis, adding 6 new molecular components to the JSON UI registry. These components are now fully usable in JSON schemas and have been demonstrated in the enhanced showcase page.
|
||||
|
||||
With the refactoring approach in place, all component trees can be JSON-driven while behavioral logic lives in custom hooks and shared types/interfaces remain in their dedicated files. This removes the prior compatibility blockers without compromising the JSON-first schema model.
|
||||
@@ -1,289 +0,0 @@
|
||||
# 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
|
||||
|
||||
## JSON Eligibility Checklist
|
||||
|
||||
Use this checklist during every conversion to determine whether a component can be safely represented in JSON.
|
||||
|
||||
### Core requirements (must all be true)
|
||||
- **No side-effects**: The component should be render-only; it must not perform data fetching, subscriptions, timers, or imperative DOM work. Side-effects belong in wrappers or higher-level orchestration.
|
||||
- **Supported bindings only**: Props must map to supported JSON bindings (static values, expression bindings, or schema-recognized props). Avoid custom callbacks, ref usage, or passing functions through JSON.
|
||||
- **Stable props**: Props should be serializable and deterministic (strings, numbers, booleans, arrays, objects). Avoid non-serializable values like class instances, functions, or dates unless explicitly supported by the JSON schema.
|
||||
|
||||
### Derived state guidance
|
||||
- **Prefer pure derivation**: If state can be derived from props or data bindings, compute it at render time in the renderer or via expression bindings rather than introducing component state.
|
||||
- **Avoid local state in JSON components**: If a component needs internal state to function, wrap it in a React component and expose only the minimal, declarative props to JSON.
|
||||
- **Keep calculations explicit**: Use named props (e.g., `selectedCount`, `isComplete`) rather than embedding complex logic that would need component state.
|
||||
|
||||
### Event handler guidance
|
||||
- **Use schema-recognized actions**: Wire events to supported JSON actions or expression handlers (e.g., `onClick` -> `actions.navigate`, `actions.submit`), not raw functions.
|
||||
- **Pass data, not closures**: Event handlers should reference IDs, routes, or action payloads so the runtime can resolve them.
|
||||
- **Escalate complex logic**: If an event handler needs branching logic or side-effects, move that logic into an app-level action or wrapper component and keep JSON props declarative.
|
||||
|
||||
## Naming & Value Conventions
|
||||
|
||||
Use these conventions to keep JSON component schemas consistent and easy to validate.
|
||||
|
||||
### Core naming rules
|
||||
- **`id`**: Required, unique within a page or component subtree. Use **kebab-case** (`panel-header`, `user-card`) so IDs remain stable across tools and scripts.
|
||||
- **`type`**: Must match a registered `ComponentType` or HTML element name exactly (case-sensitive). Avoid aliases or custom casing.
|
||||
- **`props` keys**: Use **camelCase** for prop names (`className`, `defaultValue`, `onClick`). Avoid nesting `children` under multiple keys.
|
||||
|
||||
### `children` rules
|
||||
- **Accepted values**: Either a **string** (text-only) or an **array of component objects**.
|
||||
- **Do not mix**: If `children` is an array, text content should be represented by a nested `Text`/`Heading` component.
|
||||
- **Prefer `props.children` only for leaf text**: When a component has no nested child components, you can set `props.children` to a string. Do not set both `children` and `props.children` at the same time.
|
||||
|
||||
### `variant` rules
|
||||
Use `variant` for style tokens rather than ad-hoc CSS classes.
|
||||
- **Shadcn-style variants (buttons, badges, dialog actions)**:
|
||||
`default`, `secondary`, `destructive`, `outline`, `ghost`, `link`
|
||||
- **Feedback/status variants (alerts, toasts, status messaging)**:
|
||||
`success`, `error`, `info`, `warning`
|
||||
|
||||
### `size` rules
|
||||
- **Dialog size**:
|
||||
`sm`, `md`, `lg`, `xl`, `full`
|
||||
- **Token-based sizes** (progress indicators, spinners, badges):
|
||||
`sm`, `md`, `lg`
|
||||
- **Numeric sizes** (icons or pixel-based controls):
|
||||
Use a number (e.g., `16`, `20`, `24`) when the component expects pixel sizes.
|
||||
|
||||
## 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
|
||||
- `FileUpload` - File upload control
|
||||
|
||||
### 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
|
||||
- `ProgressBar` - Linear progress
|
||||
- `Divider` - Section divider
|
||||
|
||||
### 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**: 51 (85%)
|
||||
- **Planned**: 9 (15%)
|
||||
|
||||
## Status Summary
|
||||
|
||||
| Status | Count |
|
||||
| --- | ---: |
|
||||
| Supported | 51 |
|
||||
| Maybe | 0 |
|
||||
| Planned | 9 |
|
||||
|
||||
## 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
|
||||
|
||||
### JSON Compatibility Checklist
|
||||
|
||||
Before migrating a component, confirm all required conditions are met:
|
||||
|
||||
- [ ] **Hooks/state are registry-safe**: hooks and internal state are acceptable when the component registry can control or expose them through JSON bindings.
|
||||
- [ ] **Bindings are defined**: any required actions, event handlers, or state bindings are already supported by the JSON UI binding system.
|
||||
- [ ] **Refactoring covered by PR**: JSON compatibility gaps should be resolved via refactoring as part of the same pull request.
|
||||
|
||||
### Step-by-Step Migration Path
|
||||
|
||||
Use this repeatable migration flow for planned components:
|
||||
|
||||
1. **Update the type union** in `src/types/json-ui.ts` to include the new component type name.
|
||||
2. **Register the component** in `src/lib/json-ui/component-registry.tsx` so JSON schemas can resolve it at runtime.
|
||||
3. **Define component metadata** in `src/lib/component-definitions.ts` (defaults, prop schema, and any JSON-driven constraints).
|
||||
4. **Validate JSON schema usage** by rendering a sample schema that uses the new type.
|
||||
5. **Update registry metadata** in `json-components-registry.json` so the CLI/listing reflects the new status.
|
||||
|
||||
## 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
|
||||
|
||||
## Deprecation & JSON Migration Process
|
||||
|
||||
Use this process when retiring legacy components or renaming JSON component types.
|
||||
|
||||
### Deprecation workflow
|
||||
1. **Assess usage**: Identify schemas and component usage (search in `src/config/schemas` or project JSON). Flag any external consumers.
|
||||
2. **Define a replacement**: Ensure a supported JSON-safe replacement exists (or create a wrapper) and document prop differences.
|
||||
3. **Mark deprecated in the registry**: Update `json-components-registry.json` with `"status": "deprecated"` and optional `"deprecated"` metadata:
|
||||
- `replacedBy`: the new component type to use.
|
||||
- `message`: extra guidance for migrations.
|
||||
4. **Update definitions**: If needed, adjust `src/lib/component-definitions.ts` to align defaults and prop expectations for the replacement.
|
||||
5. **Communicate the change**: Add a note to release documentation or changelog and note the replacement.
|
||||
6. **Set a removal window**: Target the next minor/major release for removal once migration is complete.
|
||||
|
||||
### JSON migration checklist
|
||||
- [ ] Replace deprecated component types in schemas with their replacements.
|
||||
- [ ] Validate props against the replacement component definition.
|
||||
- [ ] Run JSON renderer previews to confirm layout and bindings.
|
||||
- [ ] Remove any legacy bindings or props that are no longer supported.
|
||||
|
||||
### Runtime warning mechanism
|
||||
The schema renderer emits a `console.warn` when a deprecated component type appears in a JSON schema. This warning uses the metadata in `json-components-registry.json` to suggest replacements and highlight remediation guidance.
|
||||
|
||||
## 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
|
||||
@@ -1,460 +0,0 @@
|
||||
# JSON Expression System
|
||||
|
||||
This document describes the JSON-friendly expression system for handling events without requiring external TypeScript functions.
|
||||
|
||||
## Overview
|
||||
|
||||
The JSON Expression System allows you to define dynamic behaviors entirely within JSON schemas, eliminating the need for external compute functions. This makes schemas more portable and easier to edit.
|
||||
|
||||
## Expression Types
|
||||
|
||||
### 1. Simple Expressions
|
||||
|
||||
Use the `expression` field to evaluate dynamic values:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "username",
|
||||
"expression": "event.target.value"
|
||||
}
|
||||
```
|
||||
|
||||
**Supported Expression Patterns:**
|
||||
|
||||
- **Data Access**: `"data.fieldName"`, `"data.user.name"`, `"data.items.0.id"`
|
||||
- Access any field in the data context
|
||||
- Supports nested objects using dot notation
|
||||
|
||||
- **Event Access**: `"event.target.value"`, `"event.key"`, `"event.type"`
|
||||
- You can also reference the full event payload with `"event"`
|
||||
- Access event properties
|
||||
- Commonly used for form inputs
|
||||
|
||||
- **Date Operations**: `"Date.now()"`
|
||||
- Get current timestamp
|
||||
- Useful for creating unique IDs
|
||||
|
||||
- **Literals**: `42`, `"hello"`, `true`, `false`, `null`
|
||||
- Direct values
|
||||
|
||||
### 2. Value Templates
|
||||
|
||||
Use the `valueTemplate` field to create objects with dynamic values:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "create",
|
||||
"target": "todos",
|
||||
"valueTemplate": {
|
||||
"id": "Date.now()",
|
||||
"text": "data.newTodo",
|
||||
"completed": false,
|
||||
"createdBy": "data.currentUser"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Template Behavior:**
|
||||
- String values starting with `"data."` or `"event."` are evaluated as expressions
|
||||
- Other values are used as-is
|
||||
- Perfect for creating new objects with dynamic fields
|
||||
|
||||
### 3. Static Values
|
||||
|
||||
Use the `value` field for static values:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "isLoading",
|
||||
"value": false
|
||||
}
|
||||
```
|
||||
|
||||
## Action Types with Expression Support
|
||||
|
||||
### set-value
|
||||
Update a data source with a new value.
|
||||
|
||||
**With Expression:**
|
||||
```json
|
||||
{
|
||||
"id": "update-filter",
|
||||
"type": "set-value",
|
||||
"target": "searchQuery",
|
||||
"expression": "event.target.value"
|
||||
}
|
||||
```
|
||||
|
||||
**With Static Value:**
|
||||
```json
|
||||
{
|
||||
"id": "reset-filter",
|
||||
"type": "set-value",
|
||||
"target": "searchQuery",
|
||||
"value": ""
|
||||
}
|
||||
```
|
||||
|
||||
**Target-path convention:**
|
||||
To update nested values inside a data source, use a dotted `target` where the prefix is the data source ID and the remainder is the nested path:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "set-city",
|
||||
"type": "set-value",
|
||||
"target": "profile.address.city",
|
||||
"expression": "event.target.value"
|
||||
}
|
||||
```
|
||||
|
||||
This dotted `target` format works with `set-value`, `update`, `toggle-value`, `increment`, and `decrement`.
|
||||
|
||||
## Conditional Expressions
|
||||
|
||||
Conditional rendering uses `conditional.if` strings that are evaluated against the current data context:
|
||||
|
||||
```json
|
||||
{
|
||||
"conditional": {
|
||||
"if": "statusFilter === 'running'"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Legacy conditional objects (with `source`/`operator`/`value`) should be migrated to these inline expressions so schemas stay compatible with the JSON UI renderer.
|
||||
|
||||
### create
|
||||
Add a new item to an array data source.
|
||||
|
||||
**With Value Template:**
|
||||
```json
|
||||
{
|
||||
"id": "add-todo",
|
||||
"type": "create",
|
||||
"target": "todos",
|
||||
"valueTemplate": {
|
||||
"id": "Date.now()",
|
||||
"text": "data.newTodo",
|
||||
"completed": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### update
|
||||
Update an existing value (similar to set-value).
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "update-count",
|
||||
"type": "update",
|
||||
"target": "viewCount",
|
||||
"expression": "data.viewCount + 1"
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** Arithmetic expressions are not yet supported. Use `increment` action type instead.
|
||||
|
||||
### delete
|
||||
Remove an item from an array.
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "remove-todo",
|
||||
"type": "delete",
|
||||
"target": "todos",
|
||||
"path": "id",
|
||||
"expression": "data.selectedId"
|
||||
}
|
||||
```
|
||||
|
||||
Example with the selector derived from event data:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "remove-clicked",
|
||||
"type": "delete",
|
||||
"target": "todos",
|
||||
"path": "meta.id",
|
||||
"expression": "event.todoId ?? data.selectedId"
|
||||
}
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### 1. Input Field Updates
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "name-input",
|
||||
"type": "Input",
|
||||
"bindings": {
|
||||
"value": { "source": "userName" }
|
||||
},
|
||||
"events": [
|
||||
{
|
||||
"event": "change",
|
||||
"actions": [
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "userName",
|
||||
"expression": "event.target.value"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Creating Objects with IDs
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "create",
|
||||
"target": "items",
|
||||
"valueTemplate": {
|
||||
"id": "Date.now()",
|
||||
"name": "data.newItemName",
|
||||
"status": "pending",
|
||||
"createdAt": "Date.now()"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Resetting Forms
|
||||
|
||||
```json
|
||||
{
|
||||
"event": "click",
|
||||
"actions": [
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "formField1",
|
||||
"value": ""
|
||||
},
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "formField2",
|
||||
"value": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Success Notifications
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "show-toast",
|
||||
"message": "Item saved successfully!",
|
||||
"variant": "success"
|
||||
}
|
||||
```
|
||||
|
||||
## Complex Expression Use Cases
|
||||
|
||||
### 1. Building Nested Records from Existing Data
|
||||
|
||||
Use a single `create` action to stitch together multiple sources. Complex objects can be sourced from data fields (the expression returns the object), while top-level fields can mix event and data values.
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "create-audit-entry",
|
||||
"type": "create",
|
||||
"target": "auditLog",
|
||||
"valueTemplate": {
|
||||
"id": "Date.now()",
|
||||
"actorId": "data.currentUser.id",
|
||||
"action": "event.type",
|
||||
"metadata": "data.auditMetadata",
|
||||
"createdAt": "Date.now()"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Selecting Deep Values for Conditional Deletions
|
||||
|
||||
Pick a deeply nested value for the delete path without needing a compute function.
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "remove-primary-address",
|
||||
"type": "delete",
|
||||
"target": "addresses",
|
||||
"path": "id",
|
||||
"expression": "data.user.profile.primaryAddressId"
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Multi-Step Updates with Event + Data Context
|
||||
|
||||
Use sequential actions to update multiple fields from a single event.
|
||||
|
||||
```json
|
||||
{
|
||||
"event": "change",
|
||||
"actions": [
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "filters.query",
|
||||
"expression": "event.target.value"
|
||||
},
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "filters.lastUpdatedBy",
|
||||
"expression": "data.currentUser.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Escaping Literal Strings
|
||||
|
||||
Because any string that starts with `data.` or `event.` is treated as an expression, use a quoted literal to force a static string. This works in both `expression` and `valueTemplate` fields.
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "rawText",
|
||||
"expression": "\"data.user.name\""
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "create",
|
||||
"target": "labels",
|
||||
"valueTemplate": {
|
||||
"label": "\"event.target.value\""
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you simply need a static value, prefer the `value` field instead of `expression`.
|
||||
|
||||
## Fallback Behavior
|
||||
|
||||
- If an expression does not match a supported pattern, the system returns the original string and logs a warning.
|
||||
- If an expression throws during evaluation, the result is `undefined` and the error is logged.
|
||||
- Conditional checks default to `true` when they cannot be evaluated (fail-open behavior).
|
||||
- Data bindings that use a binding object can provide a `fallback` value (see the binding resolver in UI schemas).
|
||||
|
||||
When fallback behavior matters, guard the data source with defaults or use the legacy `compute` functions for stricter control.
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
- Expression evaluation happens synchronously on every event. Keep expressions short and avoid repeated deep reads in high-frequency events (e.g., `input` or `mousemove`).
|
||||
- Prefer precomputing derived values in your data model and referencing them directly in expressions.
|
||||
- Batch related updates into a single event handler to reduce re-renders.
|
||||
- For heavy or repeated logic, use legacy `compute` functions where memoization or caching can be applied.
|
||||
|
||||
## Backward Compatibility
|
||||
|
||||
The system maintains backward compatibility with the legacy `compute` function approach:
|
||||
|
||||
**Legacy (still supported):**
|
||||
```json
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "userName",
|
||||
"compute": "updateUserName"
|
||||
}
|
||||
```
|
||||
|
||||
**New (preferred):**
|
||||
```json
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "userName",
|
||||
"expression": "event.target.value"
|
||||
}
|
||||
```
|
||||
|
||||
The schema loader will automatically hydrate legacy `compute` references while new schemas can use pure JSON expressions.
|
||||
|
||||
## Limitations
|
||||
|
||||
Current limitations (may be addressed in future updates):
|
||||
|
||||
1. **No Arithmetic**: Cannot do `"data.count + 1"` - use `increment` action type instead
|
||||
2. **No String Concatenation**: Cannot do `"Hello " + data.name` - use template strings in future
|
||||
3. **No Complex Logic**: Cannot do nested conditionals or loops
|
||||
4. **No Custom Functions**: Cannot call user-defined functions
|
||||
|
||||
For complex logic, you can still use the legacy `compute` functions or create custom action types.
|
||||
|
||||
## Migration Guide
|
||||
|
||||
### From Compute Functions to Expressions
|
||||
|
||||
**Before:**
|
||||
```typescript
|
||||
// In compute-functions.ts
|
||||
export const updateNewTodo = (data: any, event: any) => event.target.value
|
||||
|
||||
// In schema
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "newTodo",
|
||||
"compute": "updateNewTodo"
|
||||
}
|
||||
```
|
||||
|
||||
**After:**
|
||||
```json
|
||||
{
|
||||
"type": "set-value",
|
||||
"target": "newTodo",
|
||||
"expression": "event.target.value"
|
||||
}
|
||||
```
|
||||
|
||||
**Before:**
|
||||
```typescript
|
||||
// In compute-functions.ts
|
||||
export const computeAddTodo = (data: any) => ({
|
||||
id: Date.now(),
|
||||
text: data.newTodo,
|
||||
completed: false,
|
||||
})
|
||||
|
||||
// In schema
|
||||
{
|
||||
"type": "create",
|
||||
"target": "todos",
|
||||
"compute": "computeAddTodo"
|
||||
}
|
||||
```
|
||||
|
||||
**After:**
|
||||
```json
|
||||
{
|
||||
"type": "create",
|
||||
"target": "todos",
|
||||
"valueTemplate": {
|
||||
"id": "Date.now()",
|
||||
"text": "data.newTodo",
|
||||
"completed": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
See the example schemas:
|
||||
- `/src/schemas/todo-list-json.json` - Pure JSON event system example
|
||||
- `/src/schemas/todo-list.json` - Legacy compute function approach
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Planned features for future versions:
|
||||
|
||||
1. **Arithmetic Expressions**: `"data.count + 1"`
|
||||
2. **String Templates**: `"Hello ${data.userName}"`
|
||||
3. **Comparison Operators**: `"data.age > 18"`
|
||||
4. **Logical Operators**: `"data.isActive && data.isVerified"`
|
||||
5. **Array Operations**: `"data.items.filter(...)"`, `"data.items.map(...)"`
|
||||
6. **String Methods**: `"data.text.trim()"`, `"data.email.toLowerCase()"`
|
||||
|
||||
For now, use the legacy `compute` functions for these complex scenarios.
|
||||
@@ -4,6 +4,8 @@
|
||||
|
||||
The JSON UI System is a declarative framework for building React user interfaces from JSON configurations. Instead of writing React components, you define your UI structure, data sources, and event handlers in JSON files, which are then rendered dynamically.
|
||||
|
||||
This document now serves as the consolidated reference for the JSON UI system. Legacy notes like `JSON_COMPONENTS.md`, `JSON_EXPRESSION_SYSTEM.md`, `JSON_COMPATIBILITY_IMPLEMENTATION.md`, the component usage report, and the old `json-components-list.json` artifact have been retired in favor of keeping the guidance in one place.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Fully Declarative**: Define complete UIs without writing React code
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
# Component Usage Report
|
||||
|
||||
## Method
|
||||
Scanned JSX tags in `src/**/*.tsx` and `src/**/*.jsx` using the regex `<[A-Z][A-Za-z0-9_]*` to count component usage occurrences.
|
||||
|
||||
### Command
|
||||
```bash
|
||||
python - <<'PY'
|
||||
import json, re
|
||||
from pathlib import Path
|
||||
src = Path('src')
|
||||
pattern = re.compile(r'<([A-Z][A-Za-z0-9_]*)\\b')
|
||||
counts = {}
|
||||
files = list(src.rglob('*.tsx')) + list(src.rglob('*.jsx'))
|
||||
for path in files:
|
||||
text = path.read_text(encoding='utf-8')
|
||||
for match in pattern.findall(text):
|
||||
counts[match] = counts.get(match, 0) + 1
|
||||
|
||||
json_list = json.loads(Path('json-components-list.json').read_text(encoding='utf-8'))
|
||||
json_supported = {item['type'] for item in json_list if item.get('status') == 'supported'}
|
||||
json_planned = {item['type'] for item in json_list if item.get('status') == 'planned'}
|
||||
subcomponents = {}
|
||||
for item in json_list:
|
||||
if item.get('status') == 'supported':
|
||||
for sub in item.get('subComponents', []) or []:
|
||||
subcomponents[sub] = item['type']
|
||||
|
||||
sorted_counts = sorted(counts.items(), key=lambda x: x[1], reverse=True)
|
||||
not_supported = [(n, c) for n, c in sorted_counts if n not in json_supported and n not in subcomponents]
|
||||
print(sorted_counts[:10])
|
||||
print(not_supported[:10])
|
||||
PY
|
||||
```
|
||||
|
||||
## Top 10 Components by Usage
|
||||
| Rank | Component | Usage Count | JSON Status |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | Button | 215 | supported |
|
||||
| 2 | Card | 172 | supported |
|
||||
| 3 | CardContent | 123 | supported (subcomponent of Card) |
|
||||
| 4 | Label | 105 | supported |
|
||||
| 5 | Badge | 102 | supported |
|
||||
| 6 | CardHeader | 101 | supported (subcomponent of Card) |
|
||||
| 7 | CardTitle | 100 | supported (subcomponent of Card) |
|
||||
| 8 | Stack | 95 | supported |
|
||||
| 9 | Text | 82 | supported |
|
||||
| 10 | Input | 66 | supported |
|
||||
|
||||
## Top 10 Components Not Yet Supported (for conversion priority)
|
||||
| Rank | Component | Usage Count | JSON Status |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | SelectItem | 48 | not-listed |
|
||||
| 2 | Database | 39 | not-listed |
|
||||
| 3 | CheckCircle | 39 | not-listed |
|
||||
| 4 | ScrollArea | 34 | not-listed |
|
||||
| 5 | Trash | 33 | not-listed |
|
||||
| 6 | Plus | 28 | not-listed |
|
||||
| 7 | DialogContent | 20 | not-listed |
|
||||
| 8 | DialogHeader | 20 | not-listed |
|
||||
| 9 | DialogTitle | 20 | not-listed |
|
||||
| 10 | Tooltip | 20 | not-listed |
|
||||
@@ -1,494 +0,0 @@
|
||||
[
|
||||
{
|
||||
"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": "supported"
|
||||
},
|
||||
{
|
||||
"type": "FileUpload",
|
||||
"name": "FileUpload",
|
||||
"category": "input",
|
||||
"canHaveChildren": false,
|
||||
"description": "File upload control",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"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": "supported"
|
||||
},
|
||||
{
|
||||
"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": "supported"
|
||||
},
|
||||
{
|
||||
"type": "CircularProgress",
|
||||
"name": "CircularProgress",
|
||||
"category": "display",
|
||||
"canHaveChildren": false,
|
||||
"description": "Circular progress indicator",
|
||||
"status": "supported"
|
||||
},
|
||||
{
|
||||
"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