mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-02 17:44:52 +00:00
things
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
import { PageRenderer } from '@/lib/json-ui/page-renderer'
|
||||
import { LoadingFallback } from '@/components/molecules'
|
||||
import { useSchemaLoader } from '@/hooks/use-schema-loader'
|
||||
|
||||
interface JSONSchemaPageLoaderProps {
|
||||
schemaPath: string
|
||||
}
|
||||
|
||||
export function JSONSchemaPageLoader({ schemaPath }: JSONSchemaPageLoaderProps) {
|
||||
const { schema, loading, error } = useSchemaLoader(schemaPath)
|
||||
|
||||
if (loading) {
|
||||
return <LoadingFallback message={`Loading ${schemaPath}...`} />
|
||||
}
|
||||
|
||||
if (error || !schema) {
|
||||
return (
|
||||
<div className="p-8 text-center">
|
||||
<p className="text-destructive">{error || 'Schema not found'}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <PageRenderer schema={schema} />
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import pagesConfig from './pages.json'
|
||||
import { PageConfig } from '@/types/page-config'
|
||||
import { FeatureToggles } from '@/types/project'
|
||||
|
||||
export function getEnabledPages(featureToggles?: FeatureToggles): PageConfig[] {
|
||||
console.log('[CONFIG] 🔍 getEnabledPages called with toggles:', featureToggles)
|
||||
const enabled = pagesConfig.pages.filter(page => {
|
||||
if (!page.enabled) {
|
||||
console.log('[CONFIG] ⏭️ Skipping disabled page:', page.id)
|
||||
return false
|
||||
}
|
||||
if (!page.toggleKey) return true
|
||||
return featureToggles?.[page.toggleKey as keyof FeatureToggles] !== false
|
||||
}).sort((a, b) => a.order - b.order)
|
||||
console.log('[CONFIG] ✅ Enabled pages:', enabled.map(p => p.id).join(', '))
|
||||
return enabled as PageConfig[]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import pagesConfig from './pages.json'
|
||||
import { PageConfig } from '@/types/page-config'
|
||||
|
||||
export function getPageById(id: string): PageConfig | undefined {
|
||||
console.log('[CONFIG] 🔍 getPageById called for:', id)
|
||||
const page = pagesConfig.pages.find(page => page.id === id)
|
||||
console.log('[CONFIG]', page ? '✅ Page found' : '❌ Page not found')
|
||||
return page as PageConfig | undefined
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import pagesConfig from './pages.json'
|
||||
import { PagesConfig } from '@/types/pages-config'
|
||||
|
||||
export function getPageConfig(): PagesConfig {
|
||||
console.log('[CONFIG] 📄 getPageConfig called')
|
||||
const config = pagesConfig as PagesConfig
|
||||
console.log('[CONFIG] ✅ Pages config loaded:', config.pages.length, 'pages')
|
||||
return config
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { FeatureToggles } from '@/types/project'
|
||||
import { getEnabledPages } from './get-enabled-pages'
|
||||
|
||||
export function getPageShortcuts(featureToggles?: FeatureToggles): Array<{
|
||||
key: string
|
||||
ctrl?: boolean
|
||||
shift?: boolean
|
||||
description: string
|
||||
action: string
|
||||
}> {
|
||||
console.log('[CONFIG] ⌨️ getPageShortcuts called')
|
||||
const shortcuts = getEnabledPages(featureToggles)
|
||||
.filter(page => page.shortcut)
|
||||
.map(page => {
|
||||
const parts = page.shortcut!.toLowerCase().split('+')
|
||||
const ctrl = parts.includes('ctrl')
|
||||
const shift = parts.includes('shift')
|
||||
const key = parts[parts.length - 1]
|
||||
|
||||
return {
|
||||
key,
|
||||
ctrl,
|
||||
shift,
|
||||
description: `Go to ${page.title}`,
|
||||
action: page.id
|
||||
}
|
||||
})
|
||||
console.log('[CONFIG] ✅ Shortcuts configured:', shortcuts.length)
|
||||
return shortcuts
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"type": "create",
|
||||
"target": ""
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"type": "delete",
|
||||
"target": ""
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "navigate",
|
||||
"params": {
|
||||
"to": ""
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"type": "update",
|
||||
"target": ""
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "atomic-library-showcase-page",
|
||||
"name": "Atomic Library Showcase",
|
||||
"description": "Showcase of atomic design components",
|
||||
"icon": "Atom",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "atomic-library-showcase-component",
|
||||
"type": "AtomicLibraryShowcase",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Alert",
|
||||
"props": {
|
||||
"variant": "default"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Badge",
|
||||
"props": {
|
||||
"variant": "default"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Button",
|
||||
"props": {
|
||||
"variant": "destructive"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Button",
|
||||
"props": {
|
||||
"variant": "outline"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "CardContent"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "CardFooter"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "CardHeader"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "Card"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex flex-col"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "grid"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"type": "Heading",
|
||||
"props": {
|
||||
"level": 1,
|
||||
"className": "text-3xl font-bold"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"type": "Heading",
|
||||
"props": {
|
||||
"level": 2,
|
||||
"className": "text-2xl font-semibold"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "icon-base",
|
||||
"type": "Icon",
|
||||
"props": {
|
||||
"size": 20
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "icon-folder",
|
||||
"$ref": "./icon-base.json",
|
||||
"props": {
|
||||
"name": "Folder"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Input",
|
||||
"props": {
|
||||
"type": "text"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "Label"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "loading-spinner",
|
||||
"type": "LoadingSpinner",
|
||||
"props": {
|
||||
"size": "md"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "section"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Separator",
|
||||
"props": {
|
||||
"className": "my-4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Text",
|
||||
"props": {
|
||||
"className": "text-muted-foreground"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "text-small",
|
||||
"type": "Text",
|
||||
"props": {
|
||||
"variant": "small"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "Text"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"type": "Textarea",
|
||||
"props": {
|
||||
"rows": 4
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "code-editor-page",
|
||||
"name": "Code Editor",
|
||||
"description": "Edit your project files",
|
||||
"icon": "Code",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "code-editor-component",
|
||||
"type": "CodeEditor",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "component-tree-builder-page",
|
||||
"name": "Component Tree Builder",
|
||||
"description": "Build component hierarchies",
|
||||
"icon": "Tree",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "component-tree-builder-component",
|
||||
"type": "ComponentTreeBuilder",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "component-tree-manager-page",
|
||||
"name": "Component Tree Manager",
|
||||
"description": "Manage component trees",
|
||||
"icon": "Tree",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "component-tree-manager-component",
|
||||
"type": "ComponentTreeManager",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"id": "components-page",
|
||||
"name": "Components",
|
||||
"description": "Component tree builder",
|
||||
"icon": "Cube",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [
|
||||
{
|
||||
"id": "components",
|
||||
"$ref": "./data-sources/kv-storage.json",
|
||||
"key": "components",
|
||||
"defaultValue": []
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Components"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "button-primary",
|
||||
"type": "Button",
|
||||
"props": {
|
||||
"variant": "default"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "button-secondary",
|
||||
"type": "Button",
|
||||
"props": {
|
||||
"variant": "secondary"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"id": "card-container",
|
||||
"type": "Card",
|
||||
"children": [
|
||||
{
|
||||
"id": "card-header-slot",
|
||||
"type": "CardHeader"
|
||||
},
|
||||
{
|
||||
"id": "card-content-slot",
|
||||
"type": "CardContent"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "form-input",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "space-y-2"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "input-label",
|
||||
"type": "Label"
|
||||
},
|
||||
{
|
||||
"id": "input-field",
|
||||
"type": "Input"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "grid-2-col",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "grid grid-cols-1 md:grid-cols-2 gap-4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "grid-3-col",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"id": "page-header",
|
||||
"type": "section",
|
||||
"props": {
|
||||
"className": "mb-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "page-title",
|
||||
"type": "Heading",
|
||||
"props": {
|
||||
"level": 1,
|
||||
"className": "text-3xl font-bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "page-description",
|
||||
"type": "Text",
|
||||
"props": {
|
||||
"className": "text-muted-foreground mt-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"id": "stat-card",
|
||||
"type": "Card",
|
||||
"props": {
|
||||
"className": "p-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "stat-icon",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "mb-4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "stat-value",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-2xl font-bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "stat-label",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "conflict-resolution-page",
|
||||
"name": "Conflict Resolution",
|
||||
"description": "Resolve merge conflicts",
|
||||
"icon": "GitMerge",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "conflict-resolution-component",
|
||||
"type": "ConflictResolutionPage",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "dashboard-simple",
|
||||
"name": "Project Dashboard",
|
||||
"description": "Overview of your project",
|
||||
"icon": "ChartBar",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [
|
||||
{
|
||||
"id": "projectStats",
|
||||
"$ref": "./data-sources/kv-storage.json",
|
||||
"key": "project-stats",
|
||||
"defaultValue": {
|
||||
"files": 0,
|
||||
"models": 0,
|
||||
"components": 0
|
||||
}
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/dashboard-header.json"
|
||||
},
|
||||
{
|
||||
"$ref": "./molecules/stats-grid.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "data-binding-page",
|
||||
"name": "Data Binding",
|
||||
"description": "Data binding designer",
|
||||
"icon": "Link",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Data Binding Designer"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"id": "kv-storage",
|
||||
"type": "kv",
|
||||
"defaultValue": {}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "docker-build-debugger-page",
|
||||
"name": "Docker Build Debugger",
|
||||
"description": "Debug Docker builds",
|
||||
"icon": "Bug",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "docker-build-debugger-component",
|
||||
"type": "DockerBuildDebugger",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "docs-page",
|
||||
"name": "Documentation",
|
||||
"description": "Project docs",
|
||||
"icon": "Book",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Documentation"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "documentation-view-page",
|
||||
"name": "Documentation",
|
||||
"description": "View project documentation",
|
||||
"icon": "Book",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "documentation-view-component",
|
||||
"type": "DocumentationView",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "error-panel-page",
|
||||
"name": "Error Panel",
|
||||
"description": "View application errors",
|
||||
"icon": "Warning",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "error-panel-component",
|
||||
"type": "ErrorPanel",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "errors-page",
|
||||
"name": "Errors",
|
||||
"description": "Error diagnosis",
|
||||
"icon": "Warning",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Errors & Diagnostics"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "favicon-designer-page",
|
||||
"name": "Favicon Designer",
|
||||
"description": "Design your application favicon",
|
||||
"icon": "Image",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "favicon-designer-component",
|
||||
"type": "FaviconDesigner",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "favicon-page",
|
||||
"name": "Favicon Designer",
|
||||
"description": "Design your favicon",
|
||||
"icon": "Image",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Favicon Designer"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "feature-idea-cloud-page",
|
||||
"name": "Feature Ideas",
|
||||
"description": "Browse and manage feature ideas",
|
||||
"icon": "Lightbulb",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "feature-idea-cloud-component",
|
||||
"type": "FeatureIdeaCloud",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "feature-toggle-settings-page",
|
||||
"name": "Feature Toggle Settings",
|
||||
"description": "Manage feature toggles",
|
||||
"icon": "ToggleLeft",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "feature-toggle-settings-component",
|
||||
"type": "FeatureToggleSettings",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "features-page",
|
||||
"name": "Features",
|
||||
"description": "Feature toggles",
|
||||
"icon": "ToggleLeft",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Feature Toggles"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"id": "flask-page",
|
||||
"name": "Flask API",
|
||||
"description": "Flask API designer",
|
||||
"icon": "Flask",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [
|
||||
{
|
||||
"id": "flaskConfig",
|
||||
"$ref": "./data-sources/kv-storage.json",
|
||||
"key": "flask-config",
|
||||
"defaultValue": {
|
||||
"blueprints": []
|
||||
}
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Flask API"
|
||||
}
|
||||
},
|
||||
{
|
||||
"$ref": "./atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Design your Flask REST API"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$ref": "./dashboard-simple.json",
|
||||
"id": "home-page",
|
||||
"name": "Home"
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "ideas-page",
|
||||
"name": "Feature Ideas",
|
||||
"description": "Brainstorm features",
|
||||
"icon": "Lightbulb",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Feature Ideas"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "json-component-tree-manager-page",
|
||||
"name": "JSON Component Tree Manager",
|
||||
"description": "Manage JSON component trees",
|
||||
"icon": "Tree",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "json-component-tree-manager-component",
|
||||
"type": "JSONComponentTreeManager",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "json-ui-page",
|
||||
"name": "JSON UI Showcase",
|
||||
"description": "JSON UI components",
|
||||
"icon": "Code",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [],
|
||||
"components": [
|
||||
{
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "JSON UI Showcase"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "json-ui-showcase-page",
|
||||
"name": "JSON UI Showcase",
|
||||
"description": "Showcase of JSON UI components",
|
||||
"icon": "Stack",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "json-ui-showcase-component",
|
||||
"type": "JSONUIShowcase",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "lambda-designer-page",
|
||||
"name": "Lambda Designer",
|
||||
"description": "Design serverless functions",
|
||||
"icon": "Function",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "lambda-designer-component",
|
||||
"type": "JSONLambdaDesigner",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"id": "lambdas-page",
|
||||
"name": "Lambda Functions",
|
||||
"description": "Serverless functions",
|
||||
"icon": "Function",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [
|
||||
{
|
||||
"id": "lambdas",
|
||||
"$ref": "./data-sources/kv-storage.json",
|
||||
"key": "lambdas",
|
||||
"defaultValue": []
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"id": "lambdas-header",
|
||||
"$ref": "./molecules/page-header-standard.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Lambda Functions"
|
||||
}
|
||||
},
|
||||
{
|
||||
"$ref": "./atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Create serverless backend functions"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"$ref": "./molecules/toolbar-with-actions.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "toolbar-right",
|
||||
"type": "div",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./components/button-primary.json",
|
||||
"props": {
|
||||
"children": "New Lambda"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "single"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "./schema/page-schema.json",
|
||||
"id": "model-designer-page",
|
||||
"name": "Model Designer",
|
||||
"description": "Design your data models",
|
||||
"icon": "Database",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "model-designer-component",
|
||||
"type": "JSONModelDesigner",
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
{
|
||||
"id": "models-page",
|
||||
"name": "Models Designer",
|
||||
"description": "Design your database models",
|
||||
"icon": "Database",
|
||||
"layout": {
|
||||
"$ref": "./layouts/single-column.json"
|
||||
},
|
||||
"dataSources": [
|
||||
{
|
||||
"id": "models",
|
||||
"$ref": "./data-sources/kv-storage.json",
|
||||
"key": "models",
|
||||
"defaultValue": []
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"id": "models-header",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "p-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "models-title",
|
||||
"type": "Heading",
|
||||
"props": {
|
||||
"level": 1,
|
||||
"children": "Database Models"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "models-description",
|
||||
"type": "Text",
|
||||
"props": {
|
||||
"children": "Define your Prisma database schemas",
|
||||
"className": "text-muted-foreground mt-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "models-toolbar",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex justify-between items-center p-6 border-b"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "model-count",
|
||||
"type": "Text",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "span",
|
||||
"dataBinding": {
|
||||
"source": "models",
|
||||
"transform": "data => `${data.length} models`"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "add-model-button",
|
||||
"$ref": "./components/button-primary.json",
|
||||
"props": {
|
||||
"children": "Add Model"
|
||||
},
|
||||
"events": {
|
||||
"onClick": {
|
||||
"actions": [
|
||||
{
|
||||
"$ref": "./actions/create-action.json",
|
||||
"target": "models",
|
||||
"value": {
|
||||
"id": "",
|
||||
"name": "NewModel",
|
||||
"fields": []
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "models-list",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "p-6 space-y-4"
|
||||
},
|
||||
"children": [],
|
||||
"loop": {
|
||||
"source": "models",
|
||||
"itemVar": "model",
|
||||
"template": {
|
||||
"id": "model-card-${model.id}",
|
||||
"$ref": "./components/card-container.json",
|
||||
"children": [
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "font-semibold"
|
||||
},
|
||||
"dataBinding": {
|
||||
"source": "model",
|
||||
"path": "name"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "action-bar",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center gap-2 p-4 border-b bg-muted/30"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "action-primary",
|
||||
"$ref": "../atoms/button-primary.json"
|
||||
},
|
||||
{
|
||||
"id": "action-secondary",
|
||||
"$ref": "../atoms/button-secondary.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"id": "app-branding",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center gap-3"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "logo",
|
||||
"$ref": "../atoms/text.json",
|
||||
"props": {
|
||||
"className": "text-xl font-bold",
|
||||
"children": "CodeForge"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "version",
|
||||
"$ref": "../atoms/badge.json",
|
||||
"props": {
|
||||
"children": "v1.0",
|
||||
"variant": "secondary"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "breadcrumb",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center gap-2 text-sm"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "breadcrumb-home",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Home"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "breadcrumb-separator",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "/"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"type": "Card",
|
||||
"children": [
|
||||
{
|
||||
"id": "card-header",
|
||||
"type": "CardHeader",
|
||||
"children": [
|
||||
{
|
||||
"id": "card-title",
|
||||
"type": "CardTitle"
|
||||
},
|
||||
{
|
||||
"id": "card-description",
|
||||
"type": "CardDescription"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "card-content",
|
||||
"type": "CardContent"
|
||||
},
|
||||
{
|
||||
"id": "card-footer",
|
||||
"type": "CardFooter",
|
||||
"props": {
|
||||
"className": "flex justify-end gap-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"id": "component-palette",
|
||||
"$ref": "../atoms/div-flex-col.json",
|
||||
"props": {
|
||||
"className": "p-2 space-y-2"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "palette-search",
|
||||
"$ref": "../atoms/input-text.json",
|
||||
"props": {
|
||||
"placeholder": "Search components...",
|
||||
"className": "mb-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "palette-list",
|
||||
"$ref": "../atoms/div-flex-col.json",
|
||||
"props": {
|
||||
"className": "space-y-1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "component-tree",
|
||||
"$ref": "../atoms/div-flex-col.json",
|
||||
"props": {
|
||||
"className": "space-y-1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"id": "dashboard-header",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "p-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "dashboard-title",
|
||||
"$ref": "../atoms/heading-1.json",
|
||||
"props": {
|
||||
"children": "Project Dashboard"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "dashboard-description",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Overview of your CodeForge project",
|
||||
"className": "text-muted-foreground mt-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"id": "data-card",
|
||||
"$ref": "../atoms/card.json",
|
||||
"children": [
|
||||
{
|
||||
"$ref": "../atoms/card-header.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "card-title",
|
||||
"$ref": "../atoms/heading-2.json"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"$ref": "../atoms/card-content.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "editor-toolbar",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center justify-between border-b p-2 bg-muted/30"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "toolbar-left",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center gap-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "toolbar-right",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center gap-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"id": "empty-editor-state",
|
||||
"$ref": "./empty-state.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "empty-title",
|
||||
"$ref": "../atoms/heading-2.json",
|
||||
"props": {
|
||||
"children": "No items yet"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-description",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Get started by creating your first item"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-action",
|
||||
"$ref": "../atoms/button-primary.json",
|
||||
"props": {
|
||||
"children": "Create Item"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex flex-col items-center justify-center p-12 text-center"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "empty-icon",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-muted-foreground mb-4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-title",
|
||||
"$ref": "../atoms/heading-2.json",
|
||||
"props": {
|
||||
"className": "text-xl font-semibold mb-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-description",
|
||||
"$ref": "../atoms/text-muted.json"
|
||||
},
|
||||
{
|
||||
"id": "empty-action",
|
||||
"$ref": "../atoms/button-primary.json",
|
||||
"props": {
|
||||
"className": "mt-4"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"id": "file-tabs",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center gap-1 border-b bg-muted/30 overflow-x-auto"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "space-y-2"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "field-label",
|
||||
"type": "Label"
|
||||
},
|
||||
{
|
||||
"id": "field-input",
|
||||
"$ref": "../atoms/input-text.json"
|
||||
},
|
||||
{
|
||||
"id": "field-error",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"className": "text-destructive text-sm"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"id": "label-with-badge",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex items-center gap-2"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "label-text",
|
||||
"$ref": "../atoms/text-small.json",
|
||||
"props": {
|
||||
"className": "font-medium"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "badge",
|
||||
"type": "Badge",
|
||||
"props": {
|
||||
"variant": "secondary",
|
||||
"className": "text-xs"
|
||||
},
|
||||
"conditional": {
|
||||
"source": "badge",
|
||||
"operator": "neq",
|
||||
"value": null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"id": "loading-state",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex flex-col items-center justify-center gap-3 py-12"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "loading-spinner",
|
||||
"$ref": "../atoms/loading-spinner.json"
|
||||
},
|
||||
{
|
||||
"id": "loading-message",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground",
|
||||
"children": "Loading..."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"id": "page-header-content",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex items-start gap-3"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "page-icon",
|
||||
"$ref": "../atoms/icon-base.json"
|
||||
},
|
||||
{
|
||||
"id": "page-info",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex flex-col gap-1"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "page-title",
|
||||
"$ref": "../atoms/heading-2.json"
|
||||
},
|
||||
{
|
||||
"id": "page-description",
|
||||
"$ref": "../atoms/text-muted.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "p-6 border-b"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "page-title",
|
||||
"$ref": "../atoms/heading-1.json"
|
||||
},
|
||||
{
|
||||
"id": "page-description",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"className": "text-muted-foreground mt-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"id": "save-indicator",
|
||||
"dataSources": [
|
||||
{
|
||||
"id": "lastSaved",
|
||||
"type": "static",
|
||||
"defaultValue": null
|
||||
},
|
||||
{
|
||||
"id": "currentTime",
|
||||
"type": "static",
|
||||
"defaultValue": 0,
|
||||
"polling": {
|
||||
"interval": 10000,
|
||||
"update": "() => Date.now()"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "isRecent",
|
||||
"type": "computed",
|
||||
"compute": "(data) => { if (!data.lastSaved) return false; return Date.now() - data.lastSaved < 3000; }",
|
||||
"dependencies": ["lastSaved", "currentTime"]
|
||||
},
|
||||
{
|
||||
"id": "timeAgo",
|
||||
"type": "computed",
|
||||
"compute": "(data) => { if (!data.lastSaved) return ''; const seconds = Math.floor((Date.now() - data.lastSaved) / 1000); if (seconds < 60) return 'just now'; if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`; if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`; return `${Math.floor(seconds / 86400)}d ago`; }",
|
||||
"dependencies": ["lastSaved", "currentTime"]
|
||||
}
|
||||
],
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex items-center gap-1.5 text-xs text-muted-foreground"
|
||||
},
|
||||
"conditional": {
|
||||
"source": "lastSaved",
|
||||
"operator": "neq",
|
||||
"value": null
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "status-icon",
|
||||
"type": "StatusIcon",
|
||||
"dataBinding": {
|
||||
"type": {
|
||||
"source": "isRecent",
|
||||
"transform": "isRecent => isRecent ? 'saved' : 'synced'"
|
||||
},
|
||||
"animate": {
|
||||
"source": "isRecent"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "time-text",
|
||||
"type": "span",
|
||||
"props": {
|
||||
"className": "hidden sm:inline"
|
||||
},
|
||||
"dataBinding": {
|
||||
"children": {
|
||||
"source": "isRecent",
|
||||
"path": null,
|
||||
"transform": "(isRecent, data) => isRecent ? 'Saved' : data.timeAgo"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"id": "schema-editor-status-bar",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center justify-between border-t p-2 text-sm bg-muted/30"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "status-left",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Ready"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "status-right",
|
||||
"$ref": "../atoms/text-muted.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"id": "search-input",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "relative flex items-center"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "search-icon",
|
||||
"type": "icon",
|
||||
"props": {
|
||||
"name": "MagnifyingGlass",
|
||||
"className": "absolute left-3 text-muted-foreground",
|
||||
"size": 16
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "search-field",
|
||||
"type": "Input",
|
||||
"props": {
|
||||
"placeholder": "Search...",
|
||||
"className": "pl-9 pr-9"
|
||||
},
|
||||
"dataBinding": {
|
||||
"value": {
|
||||
"source": "searchValue"
|
||||
}
|
||||
},
|
||||
"events": [
|
||||
{
|
||||
"event": "onChange",
|
||||
"actions": [
|
||||
{
|
||||
"type": "setState",
|
||||
"target": "searchValue",
|
||||
"valueFrom": "event.target.value"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "clear-button",
|
||||
"type": "Button",
|
||||
"props": {
|
||||
"variant": "ghost",
|
||||
"size": "sm",
|
||||
"className": "absolute right-1 h-7 w-7 p-0"
|
||||
},
|
||||
"conditional": {
|
||||
"source": "searchValue",
|
||||
"operator": "neq",
|
||||
"value": ""
|
||||
},
|
||||
"events": [
|
||||
{
|
||||
"event": "onClick",
|
||||
"actions": [
|
||||
{
|
||||
"type": "setState",
|
||||
"target": "searchValue",
|
||||
"value": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "icon",
|
||||
"props": {
|
||||
"name": "X",
|
||||
"size": 14
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"id": "stat-card-base",
|
||||
"type": "Card",
|
||||
"props": {
|
||||
"className": "p-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "stat-value",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-2xl font-bold",
|
||||
"children": "0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "stat-label",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground mt-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "components-stat",
|
||||
"$ref": "./stat-card-base.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "components-value",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-2xl font-bold",
|
||||
"children": "0"
|
||||
},
|
||||
"dataBinding": {
|
||||
"source": "projectStats",
|
||||
"path": "components"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "components-label",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground mt-2",
|
||||
"children": "React Components"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "files-stat",
|
||||
"$ref": "./stat-card-base.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "files-value",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-2xl font-bold",
|
||||
"children": "0"
|
||||
},
|
||||
"dataBinding": {
|
||||
"source": "projectStats",
|
||||
"path": "files"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "files-label",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground mt-2",
|
||||
"children": "Code Files"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "models-stat",
|
||||
"$ref": "./stat-card-base.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "models-value",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-2xl font-bold",
|
||||
"children": "0"
|
||||
},
|
||||
"dataBinding": {
|
||||
"source": "projectStats",
|
||||
"path": "models"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "models-label",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "text-sm text-muted-foreground mt-2",
|
||||
"children": "Database Models"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"id": "stats-grid",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "grid grid-cols-1 md:grid-cols-3 gap-4 p-6"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"$ref": "./stat-card-files.json"
|
||||
},
|
||||
{
|
||||
"$ref": "./stat-card-models.json"
|
||||
},
|
||||
{
|
||||
"$ref": "./stat-card-components.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex justify-between items-center p-6 border-b bg-muted/30"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "toolbar-left",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex items-center gap-4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "toolbar-right",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "flex items-center gap-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "app-header",
|
||||
"type": "header",
|
||||
"props": {
|
||||
"className": "border-b bg-background"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "header-content",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex items-center justify-between px-6 py-4"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "branding",
|
||||
"$ref": "../molecules/app-branding.json"
|
||||
},
|
||||
{
|
||||
"id": "toolbar",
|
||||
"$ref": "../molecules/toolbar-with-actions.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"id": "empty-canvas-state",
|
||||
"type": "div",
|
||||
"props": {
|
||||
"className": "h-full flex flex-col items-center justify-center p-8 bg-muted/20"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"$ref": "../molecules/empty-state.json",
|
||||
"children": [
|
||||
{
|
||||
"id": "empty-canvas-icon",
|
||||
"$ref": "../atoms/icon-folder.json",
|
||||
"props": {
|
||||
"size": 64,
|
||||
"weight": "duotone"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-canvas-title",
|
||||
"$ref": "../atoms/heading-2.json",
|
||||
"props": {
|
||||
"children": "Empty Canvas"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-canvas-description",
|
||||
"$ref": "../atoms/text-muted.json",
|
||||
"props": {
|
||||
"children": "Start building your UI by dragging components from the left panel, or import an existing schema."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "empty-canvas-actions",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "flex gap-2 mt-4"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "import-schema-button",
|
||||
"$ref": "../atoms/button-secondary.json",
|
||||
"props": {
|
||||
"children": "Import Schema"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "add-component-button",
|
||||
"$ref": "../atoms/button-primary.json",
|
||||
"props": {
|
||||
"children": "Add Component"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "navigation-menu",
|
||||
"type": "nav",
|
||||
"props": {
|
||||
"className": "border-r bg-muted/30 w-64"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "nav-header",
|
||||
"$ref": "../atoms/div-flex.json",
|
||||
"props": {
|
||||
"className": "p-4 border-b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "nav-items",
|
||||
"$ref": "../atoms/div-flex-col.json",
|
||||
"props": {
|
||||
"className": "p-2 space-y-1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user