git/low-code-react-app-b
1
0
Fork 0
mirror of https://github.com/johndoe6345789/low-code-react-app-b.git synced 2026-04-29 16:14:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generated by Spark: Work on low hanging fruit from JSON_COMPATIBILITY_ANALYSIS.md

Browse Source
This commit is contained in:
johndoe6345789
2026-01-17 22:21:40 +00:00
committed by GitHub
parent 9652993f66
commit ab152bbd67
6 changed files with 528 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/JSONUIShowcasePage.tsx
View File

@@ -2,7 +2,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { AtomicComponentDemo } from '@/components/AtomicComponentDemo'
import { DashboardDemoPage } from '@/components/DashboardDemoPage'
import { PageRenderer } from '@/lib/json-ui/page-renderer'
import { todoListSchema } from '@/schemas/page-schemas'
import { todoListSchema, newMoleculesShowcaseSchema } from '@/schemas/page-schemas'
export function JSONUIShowcasePage() {
return (
@@ -19,6 +19,7 @@ export function JSONUIShowcasePage() {
</div>
<TabsList className="w-full justify-start">
<TabsTrigger value="atomic">Atomic Components</TabsTrigger>
<TabsTrigger value="molecules">New Molecules</TabsTrigger>
<TabsTrigger value="dashboard">JSON Dashboard</TabsTrigger>
<TabsTrigger value="todos">JSON Todo List</TabsTrigger>
</TabsList>
@@ -29,6 +30,10 @@ export function JSONUIShowcasePage() {
<AtomicComponentDemo />
</TabsContent>
<TabsContent value="molecules" className="h-full m-0 data-[state=active]:block">
<PageRenderer schema={newMoleculesShowcaseSchema} />
</TabsContent>
<TabsContent value="dashboard" className="h-full m-0 data-[state=active]:block">
<DashboardDemoPage />
</TabsContent>

18
src/lib/json-ui/component-registry.tsx
View File

@@ -38,6 +38,12 @@ import { StatusBadge } from '@/components/atoms/StatusBadge'
import { DataCard } from '@/components/molecules/DataCard'
import { SearchInput } from '@/components/molecules/SearchInput'
import { ActionBar } from '@/components/molecules/ActionBar'
import { AppBranding } from '@/components/molecules/AppBranding'
import { LabelWithBadge } from '@/components/molecules/LabelWithBadge'
import { EmptyEditorState } from '@/components/molecules/EmptyEditorState'
import { LoadingFallback } from '@/components/molecules/LoadingFallback'
import { LoadingState } from '@/components/molecules/LoadingState'
import { NavigationGroupHeader } from '@/components/molecules/NavigationGroupHeader'
export const componentRegistry: Record<ComponentType, any> = {
'div': 'div',
@@ -86,6 +92,12 @@ export const componentRegistry: Record<ComponentType, any> = {
'DataCard': DataCard,
'SearchInput': SearchInput,
'ActionBar': ActionBar,
'AppBranding': AppBranding,
'LabelWithBadge': LabelWithBadge,
'EmptyEditorState': EmptyEditorState,
'LoadingFallback': LoadingFallback,
'LoadingState': LoadingState,
'NavigationGroupHeader': NavigationGroupHeader,
}
export const cardSubComponents = {
@@ -113,6 +125,12 @@ export const customComponents = {
'Alert': Alert,
'InfoBox': InfoBox,
'EmptyState': EmptyState,
'AppBranding': AppBranding,
'LabelWithBadge': LabelWithBadge,
'EmptyEditorState': EmptyEditorState,
'LoadingFallback': LoadingFallback,
'LoadingState': LoadingState,
'NavigationGroupHeader': NavigationGroupHeader,
}
export function getComponent(type: ComponentType | string): any {

304
src/schemas/page-schemas.ts
View File

@@ -287,3 +287,307 @@ export const dashboardSchema: PageSchema = {
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: [],
}

1
src/types/json-ui.ts
View File

@@ -9,6 +9,7 @@ export type ComponentType =
| 'Link' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
| 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge'
| 'Table' | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar'
| 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'
export type ActionType =
| 'create' | 'update' | 'delete' | 'navigate'