mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 21:54:56 +00:00
Remove old TypeScript schema files
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -1,321 +0,0 @@
|
||||
import { PageSchema } from '@/types/json-ui'
|
||||
|
||||
export const dashboardSchema: PageSchema = {
|
||||
id: 'analytics-dashboard',
|
||||
name: 'Analytics Dashboard',
|
||||
layout: {
|
||||
type: 'single',
|
||||
},
|
||||
dataSources: [
|
||||
{
|
||||
id: 'users',
|
||||
type: 'kv',
|
||||
key: 'dashboard-users',
|
||||
defaultValue: [
|
||||
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'active', joined: '2024-01-15' },
|
||||
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'active', joined: '2024-02-20' },
|
||||
{ id: 3, name: 'Charlie Brown', email: 'charlie@example.com', status: 'inactive', joined: '2023-12-10' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'filterQuery',
|
||||
type: 'static',
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'filteredUsers',
|
||||
type: 'computed',
|
||||
compute: (data) => {
|
||||
const query = (data.filterQuery || '').toLowerCase()
|
||||
if (!query) return data.users || []
|
||||
return (data.users || []).filter((user: any) =>
|
||||
user.name.toLowerCase().includes(query) ||
|
||||
user.email.toLowerCase().includes(query)
|
||||
)
|
||||
},
|
||||
dependencies: ['users', 'filterQuery'],
|
||||
},
|
||||
{
|
||||
id: 'stats',
|
||||
type: 'computed',
|
||||
compute: (data) => ({
|
||||
total: data.users?.length || 0,
|
||||
active: data.users?.filter((u: any) => u.status === 'active').length || 0,
|
||||
inactive: data.users?.filter((u: any) => u.status === 'inactive').length || 0,
|
||||
}),
|
||||
dependencies: ['users'],
|
||||
},
|
||||
],
|
||||
components: [
|
||||
{
|
||||
id: 'root',
|
||||
type: 'div',
|
||||
props: {
|
||||
className: 'h-full overflow-auto p-6 bg-gradient-to-br from-background via-background to-accent/5',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'header',
|
||||
type: 'div',
|
||||
props: { className: 'mb-8' },
|
||||
children: [
|
||||
{
|
||||
id: 'title',
|
||||
type: 'Heading',
|
||||
props: {
|
||||
className: 'text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent',
|
||||
children: 'Analytics Dashboard',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'subtitle',
|
||||
type: 'Text',
|
||||
props: {
|
||||
className: 'text-muted-foreground text-lg',
|
||||
children: 'Monitor your user activity and key metrics',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'metrics-row',
|
||||
type: 'div',
|
||||
props: { className: 'grid grid-cols-1 md:grid-cols-3 gap-6 mb-8' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-total',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-total-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-total-label',
|
||||
type: 'div',
|
||||
props: { className: 'text-sm font-medium text-muted-foreground mb-2', children: 'Total Users' },
|
||||
},
|
||||
{
|
||||
id: 'metric-total-value',
|
||||
type: 'div',
|
||||
props: { className: 'text-4xl font-bold text-primary' },
|
||||
bindings: {
|
||||
children: { source: 'stats', path: 'total' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'metric-total-description',
|
||||
type: 'div',
|
||||
props: { className: 'text-xs text-muted-foreground mt-2', children: 'Registered accounts' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'metric-active',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-gradient-to-br from-green-500/10 to-green-500/5 border-green-500/20' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-active-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-active-label',
|
||||
type: 'div',
|
||||
props: { className: 'text-sm font-medium text-muted-foreground mb-2', children: 'Active Users' },
|
||||
},
|
||||
{
|
||||
id: 'metric-active-value',
|
||||
type: 'div',
|
||||
props: { className: 'text-4xl font-bold text-green-600' },
|
||||
bindings: {
|
||||
children: { source: 'stats', path: 'active' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'metric-active-description',
|
||||
type: 'div',
|
||||
props: { className: 'text-xs text-muted-foreground mt-2', children: 'Currently engaged' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'metric-inactive',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-gradient-to-br from-orange-500/10 to-orange-500/5 border-orange-500/20' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-inactive-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'metric-inactive-label',
|
||||
type: 'div',
|
||||
props: { className: 'text-sm font-medium text-muted-foreground mb-2', children: 'Inactive Users' },
|
||||
},
|
||||
{
|
||||
id: 'metric-inactive-value',
|
||||
type: 'div',
|
||||
props: { className: 'text-4xl font-bold text-orange-600' },
|
||||
bindings: {
|
||||
children: { source: 'stats', path: 'inactive' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'metric-inactive-description',
|
||||
type: 'div',
|
||||
props: { className: 'text-xs text-muted-foreground mt-2', children: 'Need re-engagement' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'users-section',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-card/50 backdrop-blur' },
|
||||
children: [
|
||||
{
|
||||
id: 'users-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'users-title-row',
|
||||
type: 'div',
|
||||
props: { className: 'flex items-center justify-between' },
|
||||
children: [
|
||||
{
|
||||
id: 'users-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'User Directory' },
|
||||
},
|
||||
{
|
||||
id: 'users-badge',
|
||||
type: 'Badge',
|
||||
props: { variant: 'secondary' },
|
||||
bindings: {
|
||||
children: {
|
||||
source: 'filteredUsers',
|
||||
transform: (users: any[]) => `${users.length} users`,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'users-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'Manage and filter your user base' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'users-content',
|
||||
type: 'CardContent',
|
||||
children: [
|
||||
{
|
||||
id: 'filter-row',
|
||||
type: 'div',
|
||||
props: { className: 'mb-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'filter-input',
|
||||
type: 'Input',
|
||||
props: { placeholder: 'Search users by name or email...' },
|
||||
events: [
|
||||
{
|
||||
event: 'onChange',
|
||||
actions: [
|
||||
{
|
||||
id: 'update-filter',
|
||||
type: 'set-value',
|
||||
target: 'filterQuery',
|
||||
compute: (_, event) => event.target.value,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'users-list',
|
||||
type: 'div',
|
||||
props: { className: 'space-y-4' },
|
||||
bindings: {
|
||||
children: {
|
||||
source: 'filteredUsers',
|
||||
transform: (users: any[]) => users.map((user: any) => ({
|
||||
type: 'Card',
|
||||
id: `user-${user.id}`,
|
||||
props: {
|
||||
className: 'bg-background/50 hover:bg-background/80 transition-colors border-l-4 border-l-primary',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'CardContent',
|
||||
id: `user-content-${user.id}`,
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
type: 'div',
|
||||
id: `user-row-${user.id}`,
|
||||
props: { className: 'flex items-start justify-between' },
|
||||
children: [
|
||||
{
|
||||
type: 'div',
|
||||
id: `user-info-${user.id}`,
|
||||
props: { className: 'flex-1' },
|
||||
children: [
|
||||
{
|
||||
type: 'div',
|
||||
id: `user-name-${user.id}`,
|
||||
props: { className: 'font-semibold text-lg mb-1', children: user.name },
|
||||
},
|
||||
{
|
||||
type: 'div',
|
||||
id: `user-email-${user.id}`,
|
||||
props: { className: 'text-sm text-muted-foreground', children: user.email },
|
||||
},
|
||||
{
|
||||
type: 'div',
|
||||
id: `user-joined-${user.id}`,
|
||||
props: { className: 'text-xs text-muted-foreground mt-2', children: `Joined ${user.joined}` },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'Badge',
|
||||
id: `user-status-${user.id}`,
|
||||
props: {
|
||||
variant: user.status === 'active' ? 'default' : 'secondary',
|
||||
children: user.status,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,593 +0,0 @@
|
||||
import { PageSchema } from '@/types/json-ui'
|
||||
|
||||
export const todoListSchema: PageSchema = {
|
||||
id: 'todo-list',
|
||||
name: 'Todo List',
|
||||
layout: {
|
||||
type: 'single',
|
||||
},
|
||||
dataSources: [
|
||||
{
|
||||
id: 'todos',
|
||||
type: 'kv',
|
||||
key: 'app-todos',
|
||||
defaultValue: [
|
||||
{ id: 1, text: 'Learn JSON-driven UI', completed: true },
|
||||
{ id: 2, text: 'Build atomic components', completed: false },
|
||||
{ id: 3, text: 'Create custom hooks', completed: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'newTodo',
|
||||
type: 'static',
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'stats',
|
||||
type: 'computed',
|
||||
compute: (data) => ({
|
||||
total: data.todos?.length || 0,
|
||||
completed: data.todos?.filter((t: any) => t.completed).length || 0,
|
||||
remaining: data.todos?.filter((t: any) => !t.completed).length || 0,
|
||||
}),
|
||||
dependencies: ['todos'],
|
||||
},
|
||||
],
|
||||
components: [
|
||||
{
|
||||
id: 'root',
|
||||
type: 'div',
|
||||
props: {
|
||||
className: 'h-full overflow-auto p-6 bg-gradient-to-br from-background via-background to-primary/5',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'header',
|
||||
type: 'div',
|
||||
props: { className: 'mb-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'title',
|
||||
type: 'Heading',
|
||||
props: {
|
||||
className: 'text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent',
|
||||
children: 'Task Manager',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'subtitle',
|
||||
type: 'Text',
|
||||
props: {
|
||||
className: 'text-muted-foreground',
|
||||
children: 'Built entirely from JSON schema',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'stats-row',
|
||||
type: 'div',
|
||||
props: { className: 'grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 max-w-3xl' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-total',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-card/50 backdrop-blur' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-total-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-total-label',
|
||||
type: 'div',
|
||||
props: { className: 'text-sm text-muted-foreground mb-1', children: 'Total Tasks' },
|
||||
},
|
||||
{
|
||||
id: 'stat-total-value',
|
||||
type: 'div',
|
||||
props: { className: 'text-3xl font-bold' },
|
||||
bindings: {
|
||||
children: { source: 'stats', path: 'total' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'stat-completed',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-accent/10 backdrop-blur border-accent/20' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-completed-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-completed-label',
|
||||
type: 'div',
|
||||
props: { className: 'text-sm text-muted-foreground mb-1', children: 'Completed' },
|
||||
},
|
||||
{
|
||||
id: 'stat-completed-value',
|
||||
type: 'div',
|
||||
props: { className: 'text-3xl font-bold text-accent' },
|
||||
bindings: {
|
||||
children: { source: 'stats', path: 'completed' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'stat-remaining',
|
||||
type: 'Card',
|
||||
props: { className: 'bg-primary/5 backdrop-blur border-primary/20' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-remaining-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'pt-6' },
|
||||
children: [
|
||||
{
|
||||
id: 'stat-remaining-label',
|
||||
type: 'div',
|
||||
props: { className: 'text-sm text-muted-foreground mb-1', children: 'Remaining' },
|
||||
},
|
||||
{
|
||||
id: 'stat-remaining-value',
|
||||
type: 'div',
|
||||
props: { className: 'text-3xl font-bold text-primary' },
|
||||
bindings: {
|
||||
children: { source: 'stats', path: 'remaining' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'main-card',
|
||||
type: 'Card',
|
||||
props: { className: 'max-w-3xl' },
|
||||
children: [
|
||||
{
|
||||
id: 'card-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'card-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'Your Tasks' },
|
||||
},
|
||||
{
|
||||
id: 'card-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'Manage your daily tasks efficiently' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'card-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'space-y-4' },
|
||||
children: [
|
||||
{
|
||||
id: 'input-group',
|
||||
type: 'div',
|
||||
props: { className: 'flex gap-2' },
|
||||
children: [
|
||||
{
|
||||
id: 'todo-input',
|
||||
type: 'Input',
|
||||
props: {
|
||||
placeholder: 'What needs to be done?',
|
||||
},
|
||||
bindings: {
|
||||
value: { source: 'newTodo' },
|
||||
},
|
||||
events: [
|
||||
{
|
||||
event: 'change',
|
||||
actions: [
|
||||
{
|
||||
id: 'update-input',
|
||||
type: 'set-value',
|
||||
target: 'newTodo',
|
||||
compute: (data, event) => event.target.value,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'add-button',
|
||||
type: 'Button',
|
||||
props: { children: 'Add Task' },
|
||||
events: [
|
||||
{
|
||||
event: 'click',
|
||||
actions: [
|
||||
{
|
||||
id: 'add-todo',
|
||||
type: 'create',
|
||||
target: 'todos',
|
||||
compute: (data) => ({
|
||||
id: Date.now(),
|
||||
text: data.newTodo,
|
||||
completed: false,
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'clear-input',
|
||||
type: 'set-value',
|
||||
target: 'newTodo',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
id: 'show-success',
|
||||
type: 'show-toast',
|
||||
message: 'Task added successfully!',
|
||||
variant: 'success',
|
||||
},
|
||||
],
|
||||
condition: (data) => data.newTodo?.trim().length > 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'separator',
|
||||
type: 'Separator',
|
||||
props: { className: 'my-4' },
|
||||
},
|
||||
{
|
||||
id: 'todo-list',
|
||||
type: 'div',
|
||||
props: { className: 'space-y-2' },
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
globalActions: [],
|
||||
}
|
||||
|
||||
export const dashboardSchema: PageSchema = {
|
||||
id: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
layout: {
|
||||
type: 'grid',
|
||||
columns: 2,
|
||||
gap: 4,
|
||||
},
|
||||
dataSources: [
|
||||
{
|
||||
id: 'stats',
|
||||
type: 'static',
|
||||
defaultValue: {
|
||||
users: 1247,
|
||||
revenue: 45230,
|
||||
orders: 892,
|
||||
conversion: 3.2,
|
||||
},
|
||||
},
|
||||
],
|
||||
components: [],
|
||||
globalActions: [],
|
||||
}
|
||||
|
||||
export const newMoleculesShowcaseSchema: PageSchema = {
|
||||
id: 'new-molecules-showcase',
|
||||
name: 'New Molecules Showcase',
|
||||
layout: {
|
||||
type: 'single',
|
||||
},
|
||||
dataSources: [
|
||||
{
|
||||
id: 'itemCount',
|
||||
type: 'static',
|
||||
defaultValue: 42,
|
||||
},
|
||||
{
|
||||
id: 'isLoading',
|
||||
type: 'static',
|
||||
defaultValue: false,
|
||||
},
|
||||
],
|
||||
components: [
|
||||
{
|
||||
id: 'root',
|
||||
type: 'div',
|
||||
props: {
|
||||
className: 'h-full overflow-auto p-8 bg-background',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'page-header',
|
||||
type: 'div',
|
||||
props: { className: 'mb-8' },
|
||||
children: [
|
||||
{
|
||||
id: 'page-title',
|
||||
type: 'Heading',
|
||||
props: {
|
||||
level: 1,
|
||||
className: 'text-4xl font-bold mb-2',
|
||||
children: 'New JSON-Compatible Molecules',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'page-description',
|
||||
type: 'Text',
|
||||
props: {
|
||||
className: 'text-muted-foreground text-lg',
|
||||
children: 'Showcasing the newly added molecular components',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'showcase-grid',
|
||||
type: 'Grid',
|
||||
props: { cols: 2, gap: 'lg', className: 'max-w-5xl' },
|
||||
children: [
|
||||
{
|
||||
id: 'branding-card',
|
||||
type: 'Card',
|
||||
children: [
|
||||
{
|
||||
id: 'branding-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'branding-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'AppBranding' },
|
||||
},
|
||||
{
|
||||
id: 'branding-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'Application branding with logo, title, and subtitle' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'branding-content',
|
||||
type: 'CardContent',
|
||||
children: [
|
||||
{
|
||||
id: 'branding-demo',
|
||||
type: 'AppBranding',
|
||||
props: {
|
||||
title: 'My Amazing App',
|
||||
subtitle: 'Built with JSON-Powered Components',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'label-badge-card',
|
||||
type: 'Card',
|
||||
children: [
|
||||
{
|
||||
id: 'label-badge-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'label-badge-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'LabelWithBadge' },
|
||||
},
|
||||
{
|
||||
id: 'label-badge-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'Label with optional badge indicator' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'label-badge-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'space-y-3' },
|
||||
children: [
|
||||
{
|
||||
id: 'label-badge-demo-1',
|
||||
type: 'LabelWithBadge',
|
||||
props: {
|
||||
label: 'Total Items',
|
||||
},
|
||||
bindings: {
|
||||
badge: { source: 'itemCount' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-badge-demo-2',
|
||||
type: 'LabelWithBadge',
|
||||
props: {
|
||||
label: 'Warning',
|
||||
badge: '3',
|
||||
badgeVariant: 'destructive',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-badge-demo-3',
|
||||
type: 'LabelWithBadge',
|
||||
props: {
|
||||
label: 'Success',
|
||||
badge: 'New',
|
||||
badgeVariant: 'default',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'empty-state-card',
|
||||
type: 'Card',
|
||||
children: [
|
||||
{
|
||||
id: 'empty-state-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'empty-state-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'EmptyEditorState' },
|
||||
},
|
||||
{
|
||||
id: 'empty-state-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'Empty state display for editor contexts' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'empty-state-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'h-48' },
|
||||
children: [
|
||||
{
|
||||
id: 'empty-state-demo',
|
||||
type: 'EmptyEditorState',
|
||||
props: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'loading-states-card',
|
||||
type: 'Card',
|
||||
children: [
|
||||
{
|
||||
id: 'loading-states-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'loading-states-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'Loading States' },
|
||||
},
|
||||
{
|
||||
id: 'loading-states-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'LoadingFallback and LoadingState components' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'loading-states-content',
|
||||
type: 'CardContent',
|
||||
props: { className: 'space-y-4' },
|
||||
children: [
|
||||
{
|
||||
id: 'loading-fallback-wrapper',
|
||||
type: 'div',
|
||||
props: { className: 'h-24 border border-border rounded-md' },
|
||||
children: [
|
||||
{
|
||||
id: 'loading-fallback-demo',
|
||||
type: 'LoadingFallback',
|
||||
props: {
|
||||
message: 'Loading your data...',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'loading-state-demo',
|
||||
type: 'LoadingState',
|
||||
props: {
|
||||
message: 'Processing request...',
|
||||
size: 'sm',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'nav-header-card',
|
||||
type: 'Card',
|
||||
props: { className: 'col-span-2' },
|
||||
children: [
|
||||
{
|
||||
id: 'nav-header-header',
|
||||
type: 'CardHeader',
|
||||
children: [
|
||||
{
|
||||
id: 'nav-header-title',
|
||||
type: 'CardTitle',
|
||||
props: { children: 'NavigationGroupHeader' },
|
||||
},
|
||||
{
|
||||
id: 'nav-header-description',
|
||||
type: 'CardDescription',
|
||||
props: { children: 'Collapsible navigation group header (Note: requires Collapsible wrapper in production)' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'nav-header-content',
|
||||
type: 'CardContent',
|
||||
children: [
|
||||
{
|
||||
id: 'nav-header-demo',
|
||||
type: 'NavigationGroupHeader',
|
||||
props: {
|
||||
label: 'Components',
|
||||
count: 24,
|
||||
isExpanded: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'info-section',
|
||||
type: 'Alert',
|
||||
props: {
|
||||
className: 'max-w-5xl mt-8',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'info-title',
|
||||
type: 'div',
|
||||
props: {
|
||||
className: 'font-semibold mb-2',
|
||||
children: '✅ Successfully Added to JSON Registry',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'info-text',
|
||||
type: 'div',
|
||||
props: {
|
||||
className: 'text-sm',
|
||||
children: 'All components shown above are now available in the JSON UI component registry and can be used in JSON schemas.',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
globalActions: [],
|
||||
}
|
||||
Reference in New Issue
Block a user