various changes

This commit is contained in:
2026-03-09 22:30:41 +00:00
parent 26417fd4d8
commit 862cc29457
8637 changed files with 1228196 additions and 38401 deletions
@@ -0,0 +1,13 @@
{
"shortcuts": {
"search": "Search",
"shortcuts": "Shortcuts",
"preview": "Preview"
},
"messages": {
"loading": "Loading CodeForge...",
"projectLoaded": "Project loaded",
"aiComingSoon": "AI generation coming soon",
"exportComingSoon": "Export coming soon"
}
}
@@ -0,0 +1,246 @@
{
"pageHeader": {
"title": "Atomic Component Library",
"description": "Comprehensive collection of reusable atomic components"
},
"sections": {
"buttonsActions": {
"title": "Buttons & Actions",
"buttonVariantsLabel": "Button Variants",
"buttonVariants": [
{ "label": "Default", "variant": "default" },
{ "label": "Secondary", "variant": "secondary" },
{ "label": "Outline", "variant": "outline" },
{ "label": "Ghost", "variant": "ghost" },
{ "label": "Destructive", "variant": "destructive" },
{ "label": "Loading", "variant": "default", "loading": true },
{ "label": "With Icon", "variant": "default", "icon": "plus", "iconPosition": "left" },
{ "label": "Download", "variant": "default", "icon": "download", "iconPosition": "right" }
],
"buttonGroupLabel": "Button Group",
"buttonGroupButtons": ["Left", "Middle", "Right"],
"iconButtonsLabel": "Icon Buttons",
"actionButtonsLabel": "Action Buttons",
"actionButtons": [
{ "label": "Like", "tooltip": "Like this item", "variant": "default", "icon": "heart" },
{ "label": "Favorite", "variant": "outline", "icon": "star" }
]
},
"badgesIndicators": {
"title": "Badges & Indicators",
"badgesLabel": "Badges",
"badges": [
{ "label": "Default", "variant": "default" },
{ "label": "Secondary", "variant": "secondary" },
{ "label": "Destructive", "variant": "destructive" },
{ "label": "Outline", "variant": "outline" },
{ "label": "With Icon", "variant": "default", "icon": "star" },
{ "label": "Small", "variant": "default", "size": "sm" },
{ "label": "Large", "variant": "default", "size": "lg" }
],
"statusBadgesLabel": "Status Badges",
"chipsLabel": "Chips",
"chips": [
{ "label": "React", "variant": "primary" },
{ "label": "TypeScript", "variant": "accent" },
{ "label": "Tailwind", "variant": "muted" },
{ "label": "Removable", "variant": "default", "removable": true }
],
"dotsLabel": "Dots",
"countBadgeLabel": "Count Badge",
"countItems": [
{ "label": "Notifications", "count": 5 },
{ "label": "Messages", "count": 99, "max": 99, "variant": "destructive" }
]
},
"typography": {
"title": "Typography",
"headingsLabel": "Headings",
"headings": ["Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
"textVariantsLabel": "Text Variants",
"textVariants": [
"Body text - regular content",
"Caption text - smaller descriptive text",
"Muted text - less important information",
"Small text - compact information"
],
"inlineElementsLabel": "Inline Elements",
"inlineElements": {
"kbd": {
"before": "Press",
"after": "to search",
"keys": ["Ctrl", "K"]
},
"code": {
"before": "Run",
"content": "npm install",
"after": "to get started"
},
"link": {
"before": "Visit",
"content": "our documentation",
"after": "to learn more"
}
}
},
"formControls": {
"title": "Form Controls",
"switchLabel": "Switch",
"switch": {
"label": "Enable notifications",
"description": "Receive updates about your account"
},
"datePickerLabel": "Date Picker",
"datePlaceholder": "Select a date",
"filterInputLabel": "Filter Input",
"filterPlaceholder": "Filter items...",
"ratingLabel": "Rating",
"rangeSliderLabel": "Range Slider",
"rangeSlider": {
"label": "Price Range"
}
},
"progressLoading": {
"title": "Progress & Loading",
"progressBarLabel": "Progress Bar",
"circularProgressLabel": "Circular Progress",
"skeletonLabel": "Skeleton Loading"
},
"feedback": {
"title": "Feedback",
"alerts": [
{ "variant": "info", "title": "Information", "message": "This is an informational alert message." },
{ "variant": "success", "title": "Success", "message": "Your changes have been saved successfully." },
{ "variant": "warning", "title": "Warning", "message": "Please review your input before submitting." },
{ "variant": "error", "title": "Error", "message": "Something went wrong. Please try again." }
],
"infoPanels": [
{ "variant": "info", "title": "Info Panel", "message": "This is an informational panel with helpful content." },
{ "variant": "success", "title": "Success Panel", "message": "Operation completed successfully!" },
{ "variant": "warning", "title": "Warning Panel", "message": "Please proceed with caution." },
{ "variant": "error", "title": "Error Panel", "message": "An error has occurred." }
]
},
"avatarsUserElements": {
"title": "Avatars & User Elements",
"avatarSizesLabel": "Avatar Sizes",
"avatarFallbacks": ["XS", "SM", "MD", "LG", "XL"],
"avatarGroupLabel": "Avatar Group",
"avatarGroup": [
{ "fallback": "JD", "alt": "John Doe" },
{ "fallback": "AS", "alt": "Alice Smith" },
{ "fallback": "BJ", "alt": "Bob Jones" },
{ "fallback": "MK", "alt": "Mary Kay" },
{ "fallback": "TW", "alt": "Tom Wilson" },
{ "fallback": "SB", "alt": "Sarah Brown" },
{ "fallback": "PG", "alt": "Paul Green" }
]
},
"cardsMetrics": {
"title": "Cards & Metrics",
"metrics": [
{ "label": "Total Users", "value": "12,345", "icon": "user", "trend": { "value": 12, "direction": "up" } },
{ "label": "Orders", "value": "1,234", "icon": "cart", "trend": { "value": 5, "direction": "up" } },
{ "label": "Notifications", "value": "45", "icon": "bell" }
]
},
"interactiveElements": {
"title": "Interactive Elements",
"hoverCardLabel": "Hover Card",
"hoverCardTrigger": "Hover over me",
"hoverCardTitle": "Additional Information",
"hoverCardDescription": "This is extra content shown in a hover card.",
"tooltipLabel": "Tooltip",
"tooltipContent": "This is a helpful tooltip",
"tooltipTrigger": "Hover for tooltip",
"colorSwatchesLabel": "Color Swatches",
"colorSwatches": [
{ "label": "Primary", "color": "#8b5cf6" },
{ "label": "Success", "color": "#10b981" },
{ "label": "Error", "color": "#ef4444" },
{ "label": "Warning", "color": "#f59e0b" }
]
},
"layoutComponents": {
"title": "Layout Components",
"responsiveGridLabel": "Responsive Grid",
"gridItemLabel": "Item",
"flexLayoutLabel": "Flex Layout",
"flexLeft": "Left Content",
"flexCenter": "Center",
"flexRightAction": "Right Action",
"stackLayoutLabel": "Stack Layout",
"stackItems": ["Stacked Item 1", "Stacked Item 2", "Stacked Item 3"]
},
"enhancedComponents": {
"title": "Enhanced Components",
"panelHeader": {
"title": "Panel Header Component",
"subtitle": "A reusable header with optional icon and actions",
"actionLabel": "Action"
},
"numberInputLabel": "Number Input",
"numberInput": {
"label": "Quantity"
},
"textGradientLabel": "Text Gradient",
"textGradientText": "Beautiful Gradient Text",
"statusIndicatorsLabel": "Status Indicators",
"statusActiveLabel": "Active",
"statusFeaturedLabel": "Featured",
"quickActionButtonsLabel": "Quick Action Buttons",
"quickActionButtons": [
{
"label": "Code",
"description": "Edit files",
"variant": "primary",
"alertMessage": "Code clicked"
},
{
"label": "Deploy",
"description": "Launch app",
"variant": "accent",
"alertMessage": "Deploy clicked"
},
{
"label": "Favorite",
"description": "Save for later",
"variant": "default",
"alertMessage": "Favorite clicked"
},
{
"label": "Shop",
"description": "Browse items",
"variant": "muted",
"alertMessage": "Shop clicked"
}
],
"glowCardsLabel": "Glow Cards",
"glowCards": [
{
"title": "Primary Glow",
"description": "Card with primary glow effect",
"glowColor": "primary",
"intensity": "medium"
},
{
"title": "Accent Glow",
"description": "Card with accent glow effect",
"glowColor": "accent",
"intensity": "high"
},
{
"title": "Success Glow",
"description": "Card with success glow effect",
"glowColor": "success",
"intensity": "medium"
}
]
},
"summary": {
"title": "Summary",
"panelHeading": "Atomic Component Library Complete!",
"panelText": "The atomic component library includes 60+ production-ready components covering buttons, badges, typography, forms, progress indicators, feedback, avatars, cards, enhanced inputs, gradient effects, and layout utilities. All components are fully typed, accessible, and follow the design system."
}
}
}
@@ -0,0 +1,69 @@
{
"displayTitle": "Display Components",
"avatarTitle": "Avatar",
"avatarFallback": "JD",
"ratingTitle": "Rating",
"colorSwatchesTitle": "Color Swatches",
"colorSwatches": [
{ "color": "#8b5cf6", "label": "Primary" },
{ "color": "#06b6d4", "label": "Accent" },
{ "color": "#ef4444", "label": "Error" }
],
"timestampTitle": "Timestamp",
"stepperTitle": "Stepper",
"stepperSteps": [
{ "label": "Account", "description": "Create your account" },
{ "label": "Profile", "description": "Add personal details" },
{ "label": "Complete", "description": "Finish setup" }
],
"timelineTitle": "Timeline",
"timelineItems": [
{
"title": "Project Created",
"description": "Initial setup completed",
"timestamp": "2 hours ago",
"status": "completed"
},
{
"title": "Development",
"description": "Currently building features",
"timestamp": "now",
"status": "current"
},
{
"title": "Testing",
"description": "QA phase",
"status": "pending"
}
],
"tableTitle": "Table",
"tableColumns": [
{ "key": "name", "header": "Name" },
{ "key": "email", "header": "Email" },
{ "key": "status", "header": "Status" }
],
"tableData": [
{ "id": 1, "name": "John Doe", "email": "john@example.com", "status": "active" },
{ "id": 2, "name": "Jane Smith", "email": "jane@example.com", "status": "inactive" },
{ "id": 3, "name": "Bob Johnson", "email": "bob@example.com", "status": "active" }
],
"accordionTitle": "Accordion",
"accordionItems": [
{
"id": "1",
"title": "What is an atomic component?",
"content": "Atomic components are the smallest building blocks in a design system, representing basic UI elements that cannot be broken down further."
},
{
"id": "2",
"title": "How do I use these components?",
"content": "Import the components from the atoms folder and use them in your React components with full TypeScript support."
}
],
"navigationTitle": "Navigation",
"breadcrumbs": [
{ "label": "Home" },
{ "label": "Components" },
{ "label": "Showcase" }
]
}
@@ -0,0 +1,68 @@
{
"formTitle": "Form Components",
"email": {
"label": "Email",
"placeholder": "you@example.com",
"helperText": "Enter your email address"
},
"password": {
"label": "Password",
"helperText": "Must be at least 8 characters"
},
"search": {
"placeholder": "Search components..."
},
"textArea": {
"label": "Description",
"placeholder": "Enter a description...",
"helperText": "Optional field"
},
"select": {
"label": "Framework",
"placeholder": "Select a framework",
"options": [
{ "value": "react", "label": "React" },
{ "value": "vue", "label": "Vue" },
{ "value": "angular", "label": "Angular" }
]
},
"toggle": {
"label": "Enable notifications"
},
"checkbox": {
"label": "I agree to the terms and conditions"
},
"radio": {
"name": "size",
"options": [
{ "value": "sm", "label": "Small" },
{ "value": "md", "label": "Medium" },
{ "value": "lg", "label": "Large" }
]
},
"slider": {
"label": "Volume",
"min": 0,
"max": 100
},
"buttonTitle": "Button Components",
"buttons": [
{ "label": "Default" },
{ "label": "Primary", "variant": "default" },
{ "label": "Outline", "variant": "outline" },
{ "label": "Ghost", "variant": "ghost" },
{ "label": "Destructive", "variant": "destructive" }
],
"iconButtons": [
{ "variant": "default" },
{ "variant": "outline" },
{ "variant": "destructive" }
],
"iconActions": [
{ "label": "Like", "variant": "default" },
{ "label": "Share", "variant": "outline" }
],
"copyButtonText": "Copy this text",
"fileUploadTitle": "File Upload",
"fileUploadAccept": "image/*"
}
@@ -0,0 +1,4 @@
{
"title": "Atomic Component Library",
"description": "A comprehensive showcase of all available atomic components"
}
@@ -0,0 +1,5 @@
[
{ "id": "typography", "label": "Typography", "icon": "house" },
{ "id": "forms", "label": "Forms", "icon": "pencil" },
{ "id": "display", "label": "Display", "icon": "user" }
]
@@ -0,0 +1,73 @@
{
"sectionTitle": "Typography Components",
"headingsTitle": "Headings",
"headingSamples": [
{ "level": 1, "text": "Heading Level 1" },
{ "level": 2, "text": "Heading Level 2" },
{ "level": 3, "text": "Heading Level 3" }
],
"textVariantsTitle": "Text Variants",
"textVariants": [
{ "variant": "body", "text": "Body text with default styling" },
{ "variant": "muted", "text": "Muted text for less emphasis" },
{ "variant": "caption", "text": "Caption text for descriptions" },
{ "variant": "small", "text": "Small text for fine print" }
],
"linksCodeTitle": "Links & Code",
"links": [
{ "variant": "default", "label": "Default Link" },
{ "variant": "accent", "label": "Accent Link" }
],
"codeSample": "npm install react",
"kbd": {
"prefix": "Press",
"keys": ["Ctrl", "K"],
"suffix": "to search"
},
"badgesTitle": "Badges & Indicators",
"statusBadgesTitle": "Status Badges",
"statusBadges": ["active", "inactive", "pending", "error", "success", "warning"],
"tagsTitle": "Tags",
"tags": [
{ "variant": "default", "label": "Default" },
{ "variant": "primary", "label": "Primary" },
{ "variant": "secondary", "label": "Secondary" },
{ "variant": "accent", "label": "Accent" },
{ "variant": "destructive", "label": "Destructive" }
],
"dotsTitle": "Dots",
"dots": [
{ "variant": "default" },
{ "variant": "primary" },
{ "variant": "accent", "pulse": true },
{ "variant": "success" },
{ "variant": "warning", "pulse": true },
{ "variant": "error" }
],
"chipsTitle": "Chips",
"chips": [
{ "variant": "default", "label": "React" },
{ "variant": "primary", "label": "TypeScript" },
{ "variant": "accent", "label": "Tailwind" }
],
"feedbackTitle": "Feedback Components",
"alerts": [
{ "variant": "info", "title": "Information", "message": "This is an informational message" },
{ "variant": "success", "title": "Success", "message": "Operation completed successfully" },
{ "variant": "warning", "title": "Warning", "message": "Please review this warning" },
{ "variant": "error", "title": "Error", "message": "Something went wrong" }
],
"notification": {
"type": "success",
"title": "Notification",
"message": "This is a notification with a close button"
},
"loadingTitle": "Loading States",
"progressTitle": "Progress Bar",
"progressBars": [
{ "value": 35, "showLabel": true },
{ "value": 65, "variant": "accent" },
{ "value": 85, "variant": "destructive" }
],
"skeletonTitle": "Skeleton Loaders"
}
@@ -0,0 +1,27 @@
{
"muiComponents": [
"Box",
"Container",
"Grid",
"Stack",
"Paper",
"Card",
"CardContent",
"CardActions",
"Button",
"TextField",
"Typography",
"AppBar",
"Toolbar",
"List",
"ListItem",
"ListItemText",
"Divider",
"Avatar",
"Chip",
"IconButton"
],
"prompts": {
"generateComponentDescription": "Describe the component you want to create:"
}
}
@@ -0,0 +1,31 @@
{
"header": {
"title": "Component Trees",
"subtitle": "Molecules and organisms loaded from JSON",
"loadedLabel": "trees loaded",
"reloadLabel": "Reload"
},
"tabs": {
"molecules": "Molecules",
"organisms": "Organisms",
"all": "All"
},
"status": {
"errorTitle": "Error loading component trees",
"selectPrompt": "Select a tree to view details"
},
"labels": {
"rootNodes": "root nodes",
"id": "ID",
"structureTitle": "Component Tree Structure",
"props": "Props"
},
"categories": {
"molecule": "molecule",
"organism": "organism"
},
"toast": {
"reloadSuccess": "Component trees reloaded from JSON",
"reloadError": "Failed to reload component trees"
}
}
@@ -0,0 +1,65 @@
{
"header": {
"title": "Advanced Task Manager",
"subtitle": "Demonstrating atomic components, custom hooks, and reactive state management"
},
"stats": {
"total": "Total Tasks",
"completed": "Completed",
"pending": "Pending",
"completion": "Completion"
},
"taskCard": {
"title": "Your Tasks",
"description": "Manage your tasks with advanced features",
"addTask": "Add Task",
"searchPlaceholder": "Search tasks...",
"empty": {
"noMatch": "No tasks match your search",
"noTasks": "No tasks yet. Click \"Add Task\" to get started!"
},
"deleteTitle": "Delete task"
},
"architecture": {
"title": "Architecture Highlights",
"description": "What makes this demo special",
"items": [
{
"title": "Custom Hooks",
"description": "useCRUD for data management, useSearch for filtering, useDialog for modals"
},
{
"title": "Atomic Components",
"description": "ActionButton, IconButton, DataList, SearchBar - all under 150 LOC"
},
{
"title": "KV Persistence",
"description": "All data persists between sessions using IndexedDB"
},
{
"title": "Reactive State",
"description": "Computed stats update automatically when todos change"
}
]
},
"dialog": {
"title": "Add New Task",
"description": "Create a new task with priority",
"taskDescriptionLabel": "Task Description",
"taskDescriptionPlaceholder": "What needs to be done?",
"priorityLabel": "Priority",
"addButton": "Add Task",
"cancelButton": "Cancel"
},
"priorityLabels": {
"low": "low",
"medium": "medium",
"high": "high"
},
"toast": {
"added": "Task added successfully!",
"pending": "Task marked as pending",
"completed": "Task completed!",
"deleted": "Task deleted"
}
}
@@ -0,0 +1,68 @@
{
"card": {
"timeDifferenceSuffix": "m difference",
"localVersionLabel": "Local Version",
"remoteVersionLabel": "Remote Version",
"newerLabel": "Newer",
"keepLocal": "Keep Local",
"keepRemote": "Keep Remote",
"mergeBoth": "Merge Both",
"details": "Details"
},
"detailsDialog": {
"title": "Conflict Details",
"localVersionLabel": "Local Version",
"remoteVersionLabel": "Remote Version",
"newerLabel": "Newer",
"differencesLabel": "Differences",
"localTabLabel": "Local",
"remoteTabLabel": "Remote",
"conflictBadge": "Conflict",
"matchBadge": "Match",
"localFieldLabel": "Local:",
"remoteFieldLabel": "Remote:",
"onlyInLocal": "Only in local",
"onlyInRemote": "Only in remote",
"cancel": "Cancel",
"keepLocal": "Keep Local",
"keepRemote": "Keep Remote",
"mergeBoth": "Merge Both"
},
"demo": {
"title": "Conflict Resolution System",
"subtitle": "Demo and test the conflict detection and resolution features",
"statusTitle": "Status",
"conflictsLabel": "Conflicts:",
"filesLabel": "Files:",
"modelsLabel": "Models:",
"noneLabel": "None",
"demoActionsTitle": "Demo Actions",
"demoActionsDescription": "Test the conflict resolution workflow",
"simulateConflict": "Simulate Conflict",
"detectConflicts": "Detect Conflicts",
"resolveAllLocal": "Resolve All (Local)",
"conflictSingular": "conflict",
"conflictPlural": "conflicts",
"detectedSuffix": "detected",
"navigateMessage": "Navigate to the Conflict Resolution page to review and resolve them",
"resolutionStrategiesTitle": "Resolution Strategies",
"resolutionStrategiesDescription": "Available approaches for handling conflicts",
"strategyKeepLocalTitle": "Keep Local",
"strategyKeepLocalDescription": "Preserve the local version and discard remote changes",
"strategyKeepRemoteTitle": "Keep Remote",
"strategyKeepRemoteDescription": "Accept the remote version and overwrite local changes",
"strategyMergeBothTitle": "Merge Both",
"strategyMergeBothDescription": "Combine local and remote changes into a single version",
"strategyManualEditTitle": "Manual Edit",
"strategyManualEditDescription": "Manually edit the conflicting data to create a custom resolution",
"indicatorTitle": "Conflict Indicator Component",
"indicatorDescription": "The conflict indicator can be placed anywhere in the UI to show active conflicts",
"badgeVariantLabel": "Badge variant:",
"compactVariantLabel": "Compact variant:",
"toastLocalCreated": "Simulated local file created. Now simulating a remote conflict...",
"toastSimulationComplete": "Conflict simulation complete! Click \"Detect Conflicts\" to see it.",
"toastSimulationError": "Failed to simulate conflict",
"toastResolveAllSuccess": "All conflicts resolved using local versions",
"toastResolveAllError": "Failed to resolve conflicts"
}
}
@@ -0,0 +1,65 @@
{
"header": {
"title": "Conflict Resolution",
"description": "Manage sync conflicts between local and remote data"
},
"buttons": {
"detect": "Detect Conflicts",
"clearAll": "Clear All",
"keepAllLocal": "Keep All Local",
"keepAllRemote": "Keep All Remote",
"mergeAll": "Merge All",
"checkAgain": "Check Again"
},
"stats": {
"total": "Total Conflicts",
"files": "Files",
"models": "Models",
"other": "Other"
},
"bulk": {
"title": "Bulk Resolution",
"description": "Apply a resolution strategy to all conflicts at once",
"autoResolveLabel": "Auto-resolve:",
"autoResolveOptions": {
"none": "Disabled",
"local": "Always Local",
"remote": "Always Remote",
"merge": "Always Merge"
}
},
"filters": {
"label": "Filter by type:",
"allTypes": "All Types",
"files": "Files",
"models": "Models",
"components": "Components",
"workflows": "Workflows",
"lambdas": "Lambdas",
"componentTrees": "Component Trees"
},
"badges": {
"conflictCount": "{count} {label}"
},
"emptyStates": {
"filtered": "No conflicts found for this filter",
"noConflictsTitle": "No Conflicts Detected",
"noConflictsDescription": "Your local and remote data are in sync"
},
"labels": {
"conflictSingular": "conflict",
"conflictPlural": "conflicts"
},
"toasts": {
"noConflictsDetected": "No conflicts detected",
"foundConflicts": "Found {count} {label}",
"detectFailed": "Failed to detect conflicts",
"resolved": "Conflict resolved using {strategy} version",
"resolveFailed": "Failed to resolve conflict",
"resolvedAll": "All conflicts resolved using {strategy} version",
"resolveAllFailed": "Failed to resolve all conflicts"
},
"error": {
"title": "Error"
}
}
@@ -0,0 +1,78 @@
{
"header": {
"title": "Data Binding Designer",
"description": "Connect UI components to KV storage and static data"
},
"bindingsCard": {
"title": "Component Bindings",
"description": "Example components with data bindings",
"emptyState": "No bindings configured",
"actionLabel": "Bind"
},
"howItWorks": {
"title": "How It Works",
"steps": [
"Create data sources (KV store for persistence, static for constants)",
"Bind component properties to data sources for reactive updates"
]
},
"seed": {
"dataSources": [
{
"id": "userProfile",
"type": "kv",
"key": "user-profile",
"defaultValue": {
"name": "John Doe",
"email": "john@example.com"
}
},
{
"id": "counter",
"type": "kv",
"key": "app-counter",
"defaultValue": 0
}
],
"components": [
{
"id": "title",
"type": "Heading",
"props": {
"className": "text-2xl font-bold"
},
"bindings": {
"children": {
"source": "userProfile",
"path": "name"
}
}
},
{
"id": "counter-display",
"type": "Text",
"props": {
"className": "text-lg"
},
"bindings": {
"children": {
"source": "counter"
}
}
},
{
"id": "email-input",
"type": "Input",
"props": {
"placeholder": "Enter email"
},
"bindings": {
"value": {
"source": "userProfile",
"path": "email"
}
}
}
]
}
}
@@ -0,0 +1,25 @@
{
"title": "Edit Data Source",
"description": "Configure the data source settings",
"fields": {
"id": {
"label": "ID",
"placeholder": "unique-id"
}
},
"kv": {
"keyLabel": "KV Store Key",
"keyPlaceholder": "storage-key",
"keyHelp": "Key used for persistent storage in the KV store",
"defaultLabel": "Default Value (JSON)",
"defaultPlaceholder": "{\"key\": \"value\"}"
},
"static": {
"valueLabel": "Value (JSON)",
"valuePlaceholder": "{\"key\": \"value\"}"
},
"actions": {
"cancel": "Cancel",
"save": "Save Changes"
}
}
@@ -0,0 +1,27 @@
{
"header": {
"title": "Data Sources",
"description": "Manage KV storage and static data"
},
"actions": {
"add": "Add Data Source"
},
"menu": {
"kv": "KV Store",
"static": "Static Data"
},
"emptyState": {
"title": "No data sources yet",
"description": "Create your first data source to start binding data to components"
},
"groups": {
"kv": "KV Store",
"static": "Static Data"
},
"toasts": {
"deleteBlockedTitle": "Cannot delete",
"deleteBlockedDescription": "This source is used by {count} dependent {noun}",
"deleted": "Data source deleted",
"updated": "Data source updated"
}
}
@@ -0,0 +1,46 @@
{
"tabs": {
"analyzer": {
"label": "Log Analyzer",
"shortLabel": "Analyze"
},
"knowledge": {
"label": "Knowledge Base",
"shortLabel": "Knowledge"
}
},
"analyzer": {
"title": "Paste Build Log",
"description": "Copy your Docker build output and paste it below for analysis",
"placeholder": "Paste your Docker build log here...\n\nExample:\n#30 50.69 Error: Cannot find module @rollup/rollup-linux-arm64-musl\n#30 ERROR: process '/bin/sh -c npm run build' did not complete successfully: exit code: 1",
"analyzeButton": "Analyze Log",
"clearButton": "Clear",
"emptyLogError": "Please paste a Docker build log first",
"noErrorsToast": "No errors detected in the log",
"errorsFoundToast": "Found {{count}} error{{plural}}"
},
"errors": {
"title": "Error #{{index}}",
"exitCodeLabel": "Exit Code:",
"contextTitle": "Error Context",
"solutionsTitle": "Recommended Solutions",
"copiedToast": "{{label}} copied to clipboard"
},
"knowledge": {
"title": "Search Knowledge Base",
"description": "Browse common Docker build errors and their solutions",
"searchPlaceholder": "Search errors, categories, or keywords...",
"noResults": "No results found for \"{{query}}\". Try different keywords.",
"closeButton": "Close",
"patternLabel": "Pattern:",
"explanationTitle": "Explanation",
"solutionsTitle": "Solutions"
},
"common": {
"stepsLabel": "Steps:",
"codeLabel": "Code:",
"codeCopyLabel": "Code",
"copyButton": "Copy",
"languageLabel": "Language:"
}
}
@@ -0,0 +1,206 @@
[
{
"id": "rollup-missing",
"category": "Dependencies",
"title": "Rollup Platform-Specific Binary Missing",
"pattern": "Cannot find module @rollup/rollup-*",
"explanation": "Rollup uses platform-specific native binaries that are installed as optional dependencies. In Docker multi-platform builds, npm may not install the correct optional dependencies for all target platforms.",
"solutions": [
{
"title": "Install Optional Dependencies Explicitly",
"description": "Force npm to install all optional dependencies during the Docker build.",
"steps": [
"Modify the RUN npm install command in your Dockerfile",
"Add the --include=optional flag",
"Rebuild your Docker image"
],
"code": "RUN npm install --legacy-peer-deps --include=optional",
"codeLanguage": "dockerfile"
}
]
},
{
"id": "multi-platform",
"category": "Architecture",
"title": "Multi-Platform Build Issues",
"pattern": "--platform linux/amd64,linux/arm64",
"explanation": "Building Docker images for multiple CPU architectures (amd64 and arm64) requires proper setup of buildx and may encounter platform-specific dependency issues.",
"solutions": [
{
"title": "Build for Single Platform Only",
"description": "Simplify by targeting only one architecture.",
"steps": [
"Choose the primary platform (usually linux/amd64)",
"Remove multi-platform flags from build command",
"Update deployment configuration"
],
"code": "docker build --platform linux/amd64 -t myimage:latest .",
"codeLanguage": "bash"
}
]
},
{
"id": "node-modules",
"category": "Dependencies",
"title": "Node Modules Not Found",
"pattern": "MODULE_NOT_FOUND",
"explanation": "A required npm package is missing from node_modules, either because npm install failed, the package isn't in package.json, or Docker layer caching is stale.",
"solutions": [
{
"title": "Verify Dockerfile Order",
"description": "Ensure proper layer ordering in your Dockerfile.",
"steps": [
"Copy package.json and package-lock.json first",
"Run npm install",
"Then copy the rest of the source code",
"Finally run the build"
],
"code": "COPY package*.json ./\nRUN npm install\nCOPY . .\nRUN npm run build",
"codeLanguage": "dockerfile"
}
]
},
{
"id": "build-exit-1",
"category": "Build Process",
"title": "Build Process Exit Code 1",
"pattern": "exit code: 1",
"explanation": "The build command failed with a generic error code. This usually indicates a compilation error, missing dependency, or configuration issue.",
"solutions": [
{
"title": "Check Build Logs for Specific Error",
"description": "Look earlier in the build output for the actual error message.",
"steps": [
"Scroll up to find the first ERROR or Error message",
"Look for stack traces or line numbers",
"Test the build locally with the same commands",
"Check for environment-specific issues"
]
}
]
},
{
"id": "network-timeout",
"category": "Network",
"title": "Network Timeout During Build",
"pattern": "timeout|ETIMEDOUT|ECONNREFUSED",
"explanation": "Docker build couldn't connect to external services like npm registry, causing the build to fail.",
"solutions": [
{
"title": "Configure Network Settings",
"description": "Adjust Docker network configuration and retry logic.",
"steps": [
"Check Docker daemon network settings",
"Configure npm registry timeout",
"Consider using a mirror or proxy",
"Retry the build"
],
"code": "# In Dockerfile, before npm install:\nRUN npm config set fetch-timeout 60000\nRUN npm config set fetch-retries 5",
"codeLanguage": "dockerfile"
}
]
},
{
"id": "memory-limit",
"category": "Resources",
"title": "Out of Memory During Build",
"pattern": "JavaScript heap out of memory|ENOMEM",
"explanation": "The Node.js build process exceeded available memory limits, common with large applications or many dependencies.",
"solutions": [
{
"title": "Increase Node Memory Limit",
"description": "Allocate more memory to the Node.js process during build.",
"steps": [
"Set NODE_OPTIONS environment variable",
"Increase max-old-space-size value",
"Rebuild Docker image"
],
"code": "# In Dockerfile, before build command:\nENV NODE_OPTIONS=\"--max-old-space-size=4096\"\nRUN npm run build",
"codeLanguage": "dockerfile"
}
]
},
{
"id": "cache-corruption",
"category": "Cache",
"title": "Docker Layer Cache Issues",
"pattern": "Cached layer|using cache",
"explanation": "Docker's layer caching can sometimes use stale or corrupted cached layers, leading to inconsistent builds.",
"solutions": [
{
"title": "Clear Build Cache",
"description": "Force a clean build without using cached layers.",
"steps": [
"Run docker builder prune to clear cache",
"Build with --no-cache flag",
"Verify the clean build succeeds"
],
"code": "docker builder prune -af\ndocker build --no-cache -t myimage:latest .",
"codeLanguage": "bash"
}
]
},
{
"id": "base-image-issue",
"category": "Images",
"title": "Base Image Not Found or Incompatible",
"pattern": "pull access denied|manifest unknown|not found",
"explanation": "The base image specified in FROM instruction is unavailable, misspelled, or incompatible with the target platform.",
"solutions": [
{
"title": "Verify Base Image",
"description": "Check that the base image exists and is accessible.",
"steps": [
"Verify image name and tag on Docker Hub",
"Check if the image supports your target platform",
"Try pulling the image manually first",
"Consider using a different tag or base image"
],
"code": "# Test pulling the image first:\ndocker pull node:20-alpine\n\n# Verify platform support:\ndocker manifest inspect node:20-alpine",
"codeLanguage": "bash"
}
]
},
{
"id": "dockerfile-syntax",
"category": "Configuration",
"title": "Dockerfile Syntax Error",
"pattern": "unknown instruction|unexpected token",
"explanation": "The Dockerfile contains syntax errors or uses unsupported instructions.",
"solutions": [
{
"title": "Validate Dockerfile Syntax",
"description": "Check your Dockerfile for common syntax issues.",
"steps": [
"Ensure all instructions are uppercase (FROM, RUN, COPY)",
"Check for typos in instruction names",
"Verify line continuations with backslash",
"Use hadolint to lint your Dockerfile"
],
"code": "# Install and run hadolint:\ndocker run --rm -i hadolint/hadolint < Dockerfile",
"codeLanguage": "bash"
}
]
},
{
"id": "copy-failed",
"category": "Files",
"title": "COPY Instruction Failed",
"pattern": "COPY failed|no such file or directory",
"explanation": "Docker couldn't find the files or directories specified in a COPY instruction, or they're excluded by .dockerignore.",
"solutions": [
{
"title": "Check File Paths and Context",
"description": "Verify files exist and are included in build context.",
"steps": [
"Confirm files exist in your repository",
"Check .dockerignore isn't excluding them",
"Ensure COPY paths are relative to build context",
"List build context: docker build -t test --progress=plain ."
],
"code": "# In .dockerignore, check for overly broad patterns:\n# These might exclude too much:\n# *\n# node_modules/*\n# src/*",
"codeLanguage": "text"
}
]
}
]
@@ -0,0 +1,236 @@
{
"title": "Agents Files",
"subtitle": "AI agent configuration and service architecture",
"overviewTitle": "AI Service Architecture",
"coreServicesTitle": "Core AI Services",
"coreServicesDescription": "Primary modules handling AI operations",
"coreServicesFeaturesLabel": "Key Features:",
"integrationPointsTitle": "AI Integration Points",
"integrationPointsDescription": "Features enhanced by AI capabilities",
"promptEngineeringTitle": "Prompt Engineering",
"promptEngineeringDescription": "How we optimize AI interactions",
"futureEnhancementsTitle": "Future AI Enhancements",
"overview": "CodeForge uses a modular AI service architecture that integrates OpenAI's GPT models across all features. Each designer has specialized prompts and validation logic to ensure high-quality generated code.",
"coreServices": [
{
"filename": "ai-service.ts",
"path": "/src/lib/ai-service.ts",
"description": "Central AI service orchestrating OpenAI API calls",
"features": [
"Complete application generation from descriptions",
"Model generation with Prisma schema validation",
"Component generation with Material UI integration",
"Theme generation with color theory and accessibility",
"Code explanation and documentation",
"Code improvement and optimization",
"Test generation for Playwright, Storybook, and unit tests"
]
},
{
"filename": "error-repair-service.ts",
"path": "/src/lib/error-repair-service.ts",
"description": "Error detection and automated repair system",
"features": [
"Syntax error detection and repair",
"Import statement validation and fixes",
"TypeScript type error resolution",
"ESLint violation detection and fixes",
"Context-aware repair using related files",
"Batch repair operations",
"Repair explanation generation"
]
},
{
"filename": "generateNextJSProject.ts",
"path": "/src/lib/generators/generateNextJSProject.ts",
"description": "Generates Next.js project scaffolding",
"features": [
"Next.js project structure generation",
"Package.json defaults and scripts",
"Prisma schema wiring for data models",
"Material UI theme bootstrap",
"README and environment defaults"
]
},
{
"filename": "generatePrismaSchema.ts",
"path": "/src/lib/generators/generatePrismaSchema.ts",
"description": "Creates Prisma schema files from models",
"features": [
"Model definition generation",
"Field-level attributes and defaults",
"Datasource and client config",
"Array and optional field handling"
]
},
{
"filename": "generateMUITheme.ts",
"path": "/src/lib/generators/generateMUITheme.ts",
"description": "Builds Material UI theme configuration",
"features": [
"Light and dark palette generation",
"Typography and spacing configuration",
"Shape/border radius settings",
"Theme export defaults"
]
},
{
"filename": "generatePlaywrightTests.ts",
"path": "/src/lib/generators/generatePlaywrightTests.ts",
"description": "Generates Playwright test suites",
"features": [
"Test suite scaffolding",
"Step-by-step action scripts",
"Assertion generation",
"Default test fallback"
]
},
{
"filename": "generateStorybookStories.ts",
"path": "/src/lib/generators/generateStorybookStories.ts",
"description": "Creates Storybook story files",
"features": [
"Stories grouped by component",
"Meta configuration generation",
"Args mapping for variants",
"Story file structure"
]
},
{
"filename": "generateUnitTests.ts",
"path": "/src/lib/generators/generateUnitTests.ts",
"description": "Generates unit test files",
"features": [
"Component, hook, and module tests",
"Test setup and teardown blocks",
"Assertion generation",
"Dynamic test naming"
]
},
{
"filename": "generateFlaskApp.ts",
"path": "/src/lib/generators/generateFlaskApp.ts",
"description": "Creates Flask backend scaffolding",
"features": [
"App factory generation",
"Blueprint registration",
"Environment and requirements files",
"README and setup instructions"
]
}
],
"integrationPoints": [
{
"component": "ModelDesigner",
"capabilities": [
"Generate models from natural language",
"Suggest appropriate field types",
"Create relations between models",
"Generate realistic field names and structures"
]
},
{
"component": "ComponentTreeBuilder",
"capabilities": [
"Generate component hierarchies",
"Suggest Material UI components",
"Create prop configurations",
"Build complex layouts from descriptions"
]
},
{
"component": "StyleDesigner",
"capabilities": [
"Generate color palettes from descriptions",
"Ensure WCAG accessibility compliance",
"Create harmonious color relationships",
"Suggest typography pairings"
]
},
{
"component": "CodeEditor",
"capabilities": [
"Explain code functionality",
"Improve code quality and performance",
"Suggest best practices",
"Generate inline documentation"
]
},
{
"component": "PlaywrightDesigner",
"capabilities": [
"Generate E2E test scenarios",
"Create test steps from user flows",
"Suggest appropriate selectors",
"Generate assertions for validations"
]
},
{
"component": "StorybookDesigner",
"capabilities": [
"Generate component stories",
"Create meaningful story variations",
"Configure args based on prop types",
"Organize stories by categories"
]
},
{
"component": "UnitTestDesigner",
"capabilities": [
"Generate comprehensive test suites",
"Create test cases with assertions",
"Generate setup and teardown code",
"Cover edge cases and error scenarios"
]
},
{
"component": "ErrorPanel",
"capabilities": [
"Analyze error patterns",
"Generate context-aware fixes",
"Explain error causes",
"Prevent similar errors in future"
]
}
],
"promptEngineering": [
{
"title": "Context Preservation",
"description": "All AI prompts include relevant project context such as existing models, components, and theme configurations to ensure generated code integrates seamlessly."
},
{
"title": "Format Specification",
"description": "Prompts specify exact output formats (JSON, TypeScript, Python) with strict schemas to ensure parseable and valid responses."
},
{
"title": "Best Practices Enforcement",
"description": "Generated code follows Next.js, React, and Flask best practices through detailed prompt instructions and post-processing validation."
},
{
"title": "Error Handling",
"description": "Fallback mechanisms and retry logic ensure graceful degradation when AI services are unavailable or responses are malformed."
}
],
"futureEnhancements": [
{
"title": "Multi-Model Support",
"description": "Integration with Claude, Gemini, and other LLMs for specialized tasks"
},
{
"title": "Fine-Tuned Models",
"description": "Custom models trained on specific frameworks and design patterns"
},
{
"title": "Code Review Agent",
"description": "Automated code review with security and performance analysis"
},
{
"title": "Conversational Interface",
"description": "Chat-based project building with natural language commands"
},
{
"title": "Learning System",
"description": "AI that learns from user corrections and preferences over time"
}
]
}
@@ -0,0 +1,248 @@
{
"title": "CI/CD Guide",
"subtitle": "Complete deployment automation for multiple platforms",
"overviewTitle": "Overview",
"platformsTitle": "Available Configurations",
"platformsFeaturesLabel": "Key Features:",
"pipelineTitle": "Pipeline Stages",
"dockerTitle": "Docker Configuration",
"dockerDescription": "Containerization for production deployment",
"dockerFilesTitle": "Files Included",
"dockerCommandsTitle": "Docker Commands",
"dockerFeaturesTitle": "Features",
"envVarsTitle": "Environment Variables",
"envVarsDescription": "Required configuration for CI/CD platforms",
"envVarsColumns": ["Variable", "Description", "Required"],
"branchStrategyTitle": "Branch Strategy",
"quickStartTitle": "Quick Start",
"bestPracticesTitle": "Best Practices",
"resourcesTitle": "Additional Resources",
"overview": "CodeForge includes production-ready CI/CD configurations for GitHub Actions, GitLab CI, Jenkins, and CircleCI. Each pipeline includes linting, testing, security scanning, Docker image building, and automated deployment workflows.",
"platforms": [
{
"name": "GitHub Actions",
"file": ".github/workflows/ci.yml",
"description": "Complete CI/CD with GHCR Docker registry integration",
"features": [
"Parallel lint and test execution",
"E2E tests with Playwright",
"Docker build and push to GitHub Container Registry",
"Security scanning with Trivy",
"Automated staging and production deployments",
"Release workflow with versioned artifacts"
]
},
{
"name": "GitLab CI",
"file": ".gitlab-ci.yml",
"description": "Multi-stage pipeline with GitLab Container Registry",
"features": [
"Dependency caching for faster builds",
"Coverage reporting with Cobertura",
"Docker-in-Docker builds",
"Manual production approval gates",
"Webhook-based deployment triggers"
]
},
{
"name": "Jenkins",
"file": "Jenkinsfile",
"description": "Declarative pipeline with Slack notifications",
"features": [
"Node.js environment configuration",
"HTML report publishing for tests and coverage",
"Artifact archiving and fingerprinting",
"Manual production deployment approval",
"Slack integration for deployment notifications"
]
},
{
"name": "CircleCI",
"file": ".circleci/config.yml",
"description": "Workflow orchestration with orb integrations",
"features": [
"Docker layer caching for optimization",
"Job dependency management",
"Test results and artifact storage",
"Approval workflows for production",
"Slack notifications via orb"
]
}
],
"pipeline": {
"intro": "All CI/CD configurations follow a similar multi-stage pipeline structure:",
"stages": [
{
"stage": "Lint",
"description": "ESLint and TypeScript type checking to ensure code quality",
"duration": "~1-2 min"
},
{
"stage": "Test",
"description": "Unit tests with coverage reporting and result artifacts",
"duration": "~2-3 min"
},
{
"stage": "Build",
"description": "Production build with artifact generation for deployment",
"duration": "~2-4 min"
},
{
"stage": "E2E Tests",
"description": "Playwright end-to-end tests with HTML reports",
"duration": "~3-5 min"
},
{
"stage": "Security",
"description": "npm audit and Trivy vulnerability scanning",
"duration": "~1-2 min"
},
{
"stage": "Docker Build",
"description": "Multi-stage Docker image build and push to registry",
"duration": "~3-5 min"
},
{
"stage": "Deploy",
"description": "Automated deployment to staging and production environments",
"duration": "~1-3 min"
}
]
},
"docker": {
"files": [
{
"name": "Dockerfile",
"description": "Multi-stage build with Node.js builder and Nginx runtime"
},
{
"name": "nginx.conf",
"description": "Production Nginx configuration with health checks and caching"
},
{
"name": "docker-compose.yml",
"description": "Local development and deployment orchestration"
},
{
"name": ".dockerignore",
"description": "Optimized build context by excluding unnecessary files"
}
],
"commands": "# Build image locally\ndocker build -t codeforge:local .\n\n# Run container\ndocker run -p 3000:80 codeforge:local\n\n# Use docker-compose\ndocker-compose up -d\n\n# Pull from registry\ndocker pull ghcr.io/<username>/<repo>:latest",
"features": [
"Multi-stage build reduces final image size to ~50MB",
"Nginx serves static files with gzip compression",
"Health check endpoint at /health for orchestration",
"Automatic cache headers for static assets",
"SPA routing support with fallback to index.html"
]
},
"environmentVariables": [
{
"variable": "NODE_VERSION",
"description": "Node.js version (default: 20)",
"required": "No"
},
{
"variable": "REGISTRY",
"description": "Docker registry URL (default: ghcr.io)",
"required": "No"
},
{
"variable": "STAGING_WEBHOOK_URL",
"description": "Webhook for staging deployments",
"required": "Optional"
},
{
"variable": "PRODUCTION_WEBHOOK_URL",
"description": "Webhook for production deployments",
"required": "Optional"
},
{
"variable": "CODECOV_TOKEN",
"description": "Codecov integration token",
"required": "Optional"
},
{
"variable": "SLACK_WEBHOOK",
"description": "Slack webhook for notifications",
"required": "Optional"
}
],
"branches": [
{
"name": "main",
"description": "Production branch - deploys to production environment (manual approval required)",
"tone": "green"
},
{
"name": "develop",
"description": "Development branch - automatically deploys to staging environment",
"tone": "blue"
},
{
"name": "feature/*",
"description": "Feature branches - runs tests only, no deployment",
"tone": "purple"
},
{
"name": "v* tags",
"description": "Version tags - triggers release workflow with artifacts and changelog",
"tone": "orange"
}
],
"quickStart": [
{
"step": 1,
"title": "Choose Your Platform",
"description": "Select GitHub Actions, GitLab CI, Jenkins, or CircleCI based on your infrastructure"
},
{
"step": 2,
"title": "Configure Secrets",
"description": "Add required environment variables and secrets in your platform's settings"
},
{
"step": 3,
"title": "Push to Repository",
"description": "Push code to main or develop branch to trigger the CI/CD pipeline"
},
{
"step": 4,
"title": "Monitor Pipeline",
"description": "View pipeline status, test results, and deployment logs in your platform's dashboard"
}
],
"bestPractices": [
"Never commit secrets - use environment variables and platform secret management",
"Enable branch protection on main and develop branches",
"Require code reviews and passing tests before merging",
"Use manual approval gates for production deployments",
"Monitor security scan results and fix vulnerabilities promptly",
"Keep dependencies updated with Dependabot or Renovate",
"Use semantic versioning for releases (v1.0.0, v1.1.0, etc.)",
"Configure Slack or email notifications for deployment status"
],
"resources": [
{
"label": "CI_CD_GUIDE.md",
"description": "Detailed setup guide for all platforms"
},
{
"label": ".github/workflows/",
"description": "GitHub Actions workflows"
},
{
"label": ".gitlab-ci.yml",
"description": "GitLab CI configuration"
},
{
"label": "Jenkinsfile",
"description": "Jenkins pipeline definition"
},
{
"label": ".circleci/config.yml",
"description": "CircleCI configuration"
}
]
}
@@ -0,0 +1,141 @@
{
"title": "Progressive Web App",
"subtitle": "Offline-first experience with native-like capabilities",
"overviewTitle": "Overview",
"featuresTitle": "PWA Features",
"featuresDescription": "Native app capabilities in your browser",
"installationTitle": "Installation",
"installationDesktopTitle": "Desktop Installation",
"installationMobileTitle": "Mobile Installation",
"settingsTitle": "PWA Settings",
"settingsDescription": "Navigate to the PWA tab to manage all Progressive Web App features:",
"settingsCardTitle": "Available Controls",
"offlineTitle": "Offline Capabilities",
"offlineWorksTitle": "Works Offline",
"offlineRequiresTitle": "Requires Internet",
"proTipsTitle": "Pro Tips",
"overview": "CodeForge is a fully-featured Progressive Web App that can be installed on any device and works offline. With intelligent caching, automatic updates, and native app-like features, you can build applications anywhere, anytime.",
"features": [
{
"title": "Installable",
"description": "Install on desktop or mobile for quick access from your home screen or applications menu"
},
{
"title": "Offline Support",
"description": "Work without internet connection; changes sync automatically when you reconnect"
},
{
"title": "Automatic Updates",
"description": "Get notified when new versions are available with one-click updates"
},
{
"title": "Push Notifications",
"description": "Opt-in to receive updates about builds, errors, and new features"
},
{
"title": "App Shortcuts",
"description": "Quick access to Dashboard, Code Editor, and Models from your OS"
},
{
"title": "Share Target",
"description": "Share code files directly to CodeForge from other apps"
}
],
"installation": {
"desktop": [
{
"title": "Chrome/Edge/Brave:",
"steps": [
"Look for install icon (⊕) in address bar",
"Click \"Install\" or use prompt in app",
"App added to applications menu"
]
},
{
"title": "Safari (macOS):",
"steps": [
"Click File → Add to Dock",
"App appears in Dock"
]
}
],
"mobile": [
{
"title": "iOS (Safari):",
"steps": [
"Tap Share button",
"Select \"Add to Home Screen\"",
"Tap \"Add\""
]
},
{
"title": "Android (Chrome):",
"steps": [
"Tap menu (three dots)",
"Select \"Install app\"",
"Confirm installation"
]
}
]
},
"settings": [
{
"title": "Installation Status",
"description": "Check if app is installed and trigger installation if available"
},
{
"title": "Network Status",
"description": "Real-time online/offline indicator with connectivity information"
},
{
"title": "Push Notifications",
"description": "Toggle notifications and manage permissions"
},
{
"title": "Cache Management",
"description": "View cache size, service worker status, and clear cached data"
},
{
"title": "Update Management",
"description": "Install pending updates when new versions are available"
}
],
"offline": {
"worksOffline": [
"View and edit existing projects",
"Browse files and code",
"Use Monaco editor",
"Navigate all tabs",
"View documentation",
"Make changes locally"
],
"requiresInternet": [
"AI-powered generation",
"External font loading",
"Database sync",
"External resources"
]
},
"proTips": [
{
"title": "Install for best performance",
"description": "Installed apps load faster and work more reliably offline"
},
{
"title": "Save before going offline",
"description": "Ensure projects are saved to local storage before losing connection"
},
{
"title": "Clear cache if issues arise",
"description": "Use PWA settings to clear cache and reload with fresh data"
},
{
"title": "Enable notifications",
"description": "Stay informed about updates and build completions"
},
{
"title": "Update regularly",
"description": "New versions bring performance improvements and features"
}
]
}
@@ -0,0 +1,152 @@
{
"title": "CodeForge",
"subtitle": "Low-Code Next.js App Builder with AI",
"sections": {
"overviewTitle": "Overview",
"featuresTitle": "Key Features",
"gettingStartedTitle": "Getting Started",
"aiFeaturesTitle": "AI-Powered Features",
"aiFeaturesDescription": "CodeForge integrates OpenAI across every designer to accelerate development:",
"techStackTitle": "Technology Stack",
"techStackFrontendTitle": "Frontend",
"techStackBackendTitle": "Backend & Tools",
"proTipsTitle": "Pro Tips"
},
"overview": "CodeForge is a comprehensive visual low-code platform for generating production-ready Next.js applications. It combines the power of visual designers with direct code editing, AI-powered generation, and a complete full-stack development toolkit.",
"features": [
{
"icon": "Code",
"title": "Monaco Code Editor",
"description": "Full-featured code editor with syntax highlighting, autocomplete, and AI-powered improvements"
},
{
"icon": "Database",
"title": "Prisma Schema Designer",
"description": "Visual database model designer with automatic schema generation and AI assistance"
},
{
"icon": "Tree",
"title": "Component Tree Builder",
"description": "Hierarchical component structure builder with drag-and-drop and AI generation"
},
{
"icon": "PaintBrush",
"title": "Theme Designer",
"description": "Material UI theme customizer with multiple variants, custom colors, and AI theme generation"
},
{
"icon": "Flask",
"title": "Flask Backend Designer",
"description": "Visual Python Flask API designer with blueprints, endpoints, and CORS configuration"
},
{
"icon": "Play",
"title": "Playwright Test Designer",
"description": "E2E test builder with step configuration and AI test generation"
},
{
"icon": "Cube",
"title": "Unit Test Designer",
"description": "Comprehensive test suite builder for components, functions, hooks, and integration tests"
},
{
"icon": "Wrench",
"title": "Auto Error Repair",
"description": "Automated error detection and AI-powered code repair system"
},
{
"icon": "Gear",
"title": "Project Settings",
"description": "Configure Next.js options, npm packages, scripts, and build settings"
},
{
"icon": "Sparkle",
"title": "AI Integration",
"description": "OpenAI-powered generation across all features for rapid development"
}
],
"gettingStarted": [
{
"step": 1,
"title": "Create Your First Model",
"description": "Navigate to the Models tab and create your database schema using the visual designer or describe your data model to the AI."
},
{
"step": 2,
"title": "Design Your Components",
"description": "Use the Components tab to build your UI hierarchy visually or let the AI generate component structures based on your requirements."
},
{
"step": 3,
"title": "Customize Your Theme",
"description": "Head to the Styling tab to create custom color palettes, manage theme variants (light/dark), and configure typography."
},
{
"step": 4,
"title": "Build Your Backend",
"description": "Configure your Flask API in the Flask API tab by creating blueprints and endpoints with full CORS and authentication support."
},
{
"step": 5,
"title": "Export Your Project",
"description": "Click Export Project to generate all files including Next.js pages, Prisma schemas, Flask backend, tests, and configuration files ready for deployment."
}
],
"aiFeatures": [
{
"title": "Complete App Generation",
"description": "Describe your application and get a full project structure with models, components, and styling"
},
{
"title": "Model Generation",
"description": "Generate Prisma models with fields and relations from natural language descriptions"
},
{
"title": "Component Creation",
"description": "Build complex React components with proper structure and Material UI integration"
},
{
"title": "Theme Generation",
"description": "Create beautiful, accessible color palettes that match your brand or description"
},
{
"title": "Test Generation",
"description": "Generate comprehensive E2E, unit, and integration tests with proper assertions"
},
{
"title": "Code Explanation",
"description": "Get detailed explanations of any code snippet to understand implementation details"
},
{
"title": "Code Improvement",
"description": "Automatically optimize code for performance, readability, and best practices"
},
{
"title": "Error Repair",
"description": "Automatically detect and fix syntax, type, import, and lint errors with context-aware fixes"
}
],
"techStack": {
"frontend": [
"Next.js 14 with App Router",
"React 18 with TypeScript",
"Material UI 5",
"Monaco Editor",
"Tailwind CSS"
],
"backend": [
"Flask REST API",
"Prisma ORM",
"Playwright E2E Testing",
"Vitest & React Testing Library",
"Storybook for Components"
]
},
"proTips": [
"💡 Use the AI Generate feature to quickly scaffold entire applications from descriptions",
"💡 The Error Repair tab automatically scans and fixes common issues - check it before exporting",
"💡 Create multiple theme variants (light, dark, custom) in the Styling tab for complete theme support",
"💡 Test your components with Storybook stories before writing full E2E tests",
"💡 Flask blueprints help organize your API endpoints by feature or resource"
]
}
@@ -0,0 +1,147 @@
{
"title": "Product Roadmap",
"subtitle": "Features delivered and planned for CodeForge development",
"sections": {
"completedTitle": "Completed Features",
"plannedTitle": "Planned Features"
},
"completed": [
{
"title": "Monaco Code Editor Integration",
"description": "Full-featured code editor with syntax highlighting, multi-file tabs, and auto-save",
"version": "v1.0"
},
{
"title": "Prisma Schema Designer",
"description": "Visual database model designer with fields, relations, and schema generation",
"version": "v1.0"
},
{
"title": "Component Tree Builder",
"description": "Hierarchical React component structure builder with Material UI components",
"version": "v1.0"
},
{
"title": "Theme Designer",
"description": "Material UI theme customizer with color palettes and typography configuration",
"version": "v1.1"
},
{
"title": "OpenAI Integration",
"description": "AI-powered generation across models, components, themes, and code",
"version": "v2.0"
},
{
"title": "Multi-Theme Variants",
"description": "Support for light, dark, and custom theme variants with unlimited custom colors",
"version": "v2.1"
},
{
"title": "Playwright Test Designer",
"description": "Visual E2E test builder with step-by-step configuration and AI generation",
"version": "v3.0"
},
{
"title": "Storybook Story Designer",
"description": "Component story builder with args configuration and category organization",
"version": "v3.0"
},
{
"title": "Unit Test Designer",
"description": "Comprehensive test suite builder for components, functions, hooks, and integration tests",
"version": "v3.0"
},
{
"title": "Auto Error Detection & Repair",
"description": "Automated error scanning with AI-powered context-aware code repair",
"version": "v3.1"
},
{
"title": "Responsive UI Improvements",
"description": "Multi-row tab support and improved layout for complex applications",
"version": "v3.2"
},
{
"title": "Flask Backend Designer",
"description": "Python Flask REST API designer with blueprints, endpoints, and CORS configuration",
"version": "v4.0"
},
{
"title": "Project Settings Designer",
"description": "Next.js configuration, npm package management, and build script customization",
"version": "v4.0"
},
{
"title": "CI/CD Configuration",
"description": "Complete CI/CD pipelines for GitHub Actions, GitLab CI, Jenkins, and CircleCI",
"version": "v4.2"
},
{
"title": "Docker Containerization",
"description": "Multi-stage Docker builds with Nginx, docker-compose, and health checks",
"version": "v4.2"
}
],
"planned": [
{
"title": "Real-Time Preview",
"description": "Live preview of generated applications with hot reload",
"version": "v4.1"
},
{
"title": "Database Seeding Designer",
"description": "Visual interface for creating seed data for Prisma models",
"version": "v4.2"
},
{
"title": "API Client Generator",
"description": "Generate TypeScript API clients from Flask backend definitions",
"version": "v4.2"
},
{
"title": "Form Builder",
"description": "Visual form designer with validation, field types, and submission handling",
"version": "v4.3"
},
{
"title": "Authentication Designer",
"description": "Configure authentication flows (JWT, OAuth, sessions) for both frontend and backend",
"version": "v5.0"
},
{
"title": "Docker Configuration",
"description": "Generate Docker and docker-compose files for containerized deployment",
"version": "v5.0"
},
{
"title": "GraphQL API Designer",
"description": "Alternative to Flask REST - design GraphQL schemas and resolvers",
"version": "v5.1"
},
{
"title": "State Management Designer",
"description": "Configure Redux, Zustand, or Jotai state management patterns",
"version": "v5.2"
},
{
"title": "CI/CD Pipeline Generator",
"description": "Generate GitHub Actions, GitLab CI, or CircleCI configuration files",
"version": "v5.3"
},
{
"title": "Component Library Export",
"description": "Export designed components as a standalone npm package",
"version": "v6.0"
},
{
"title": "Design System Generator",
"description": "Create complete design systems with tokens, components, and documentation",
"version": "v6.0"
},
{
"title": "Collaboration Features",
"description": "Real-time collaborative editing and commenting system",
"version": "v6.1"
}
]
}
@@ -0,0 +1,187 @@
{
"title": "Sass Styles Guide",
"subtitle": "Custom Material UI components with Sass",
"overviewTitle": "Overview",
"fileStructureTitle": "File Structure",
"componentsTitle": "Available Components",
"componentsDescription": "Custom Material UI components built with Sass",
"layoutTitle": "Layout Components",
"layoutDescription": "Sass-powered layout utilities",
"utilitiesTitle": "Sass Utilities & Mixins",
"utilitiesDescription": "Reusable functions for custom styling",
"animationsTitle": "Animation Classes",
"animationsDescription": "Pre-built animation utilities",
"quickStartTitle": "Quick Start Example",
"bestPracticesTitle": "Best Practices",
"overview": "CodeForge includes a comprehensive Sass-based styling system for non-standard Material UI components. This system provides pre-built components, utilities, mixins, and animations that extend beyond the standard Material UI component library.",
"fileStructure": [
{
"file": "src/styles/_variables.scss",
"description": "Color palettes, spacing scales, typography, transitions, and other design tokens"
},
{
"file": "src/styles/_utilities.scss",
"description": "Mixins and functions for responsive design, colors, typography, and layout helpers"
},
{
"file": "src/styles/_animations.scss",
"description": "Keyframe animations and animation utility classes for transitions and effects"
},
{
"file": "src/styles/material-ui-custom.scss",
"description": "Custom Material UI component styles with variants and states"
},
{
"file": "src/styles/main.scss",
"description": "Main entry point that imports all Sass modules and provides layout components"
}
],
"components": [
{
"name": "Buttons",
"classes": [
"mui-custom-button--primary",
"mui-custom-button--secondary",
"mui-custom-button--accent",
"mui-custom-button--outline",
"mui-custom-button--ghost"
],
"description": "Custom styled buttons with hover effects and variants"
},
{
"name": "Cards",
"classes": ["mui-custom-card", "mui-custom-card--gradient", "mui-custom-card--glass"],
"description": "Elevated cards with gradient and glassmorphism variants"
},
{
"name": "Inputs",
"classes": ["mui-custom-input", "mui-custom-input--error", "mui-custom-input--success"],
"description": "Form inputs with focus states and validation styling"
},
{
"name": "Chips",
"classes": ["mui-custom-chip--primary", "mui-custom-chip--success", "mui-custom-chip--error", "mui-custom-chip--warning"],
"description": "Status chips and tags with color variants"
},
{
"name": "Panels",
"classes": ["mui-custom-panel", "mui-custom-panel--with-header"],
"description": "Content panels with headers and footers"
},
{
"name": "Dialogs",
"classes": ["mui-custom-dialog"],
"description": "Modal dialogs with backdrop blur effects"
},
{
"name": "Badges",
"classes": ["custom-mui-badge", "custom-mui-badge--dot"],
"description": "Notification badges and indicators"
},
{
"name": "Progress",
"classes": ["mui-custom-progress", "mui-custom-progress--indeterminate"],
"description": "Loading progress bars with animations"
},
{
"name": "Skeletons",
"classes": ["mui-custom-skeleton--text", "mui-custom-skeleton--circle", "mui-custom-skeleton--rect"],
"description": "Loading skeleton placeholders with shimmer effect"
},
{
"name": "Accordions",
"classes": ["mui-custom-accordion"],
"description": "Collapsible content sections with animations"
}
],
"layoutComponents": [
{
"title": "custom-mui-container",
"description": "Max-width container with responsive padding"
},
{
"title": "custom-mui-grid",
"description": "CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)"
},
{
"title": "custom-mui-flex",
"description": "Flexbox utilities (--row, --col, --wrap, --center, --between, --around)"
},
{
"title": "custom-mui-stack",
"description": "Vertical/horizontal stacks with configurable gaps"
},
{
"title": "custom-mui-surface",
"description": "Interactive surfaces with elevation and hover effects"
}
],
"utilities": [
{
"title": "Responsive Design",
"mixin": "@include respond-to($breakpoint)",
"description": "Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints",
"snippet": "@include respond-to('lg') {\n padding: 2rem;\n}"
},
{
"title": "Elevation & Shadows",
"mixin": "@include elevation($level)",
"description": "Apply box shadows with levels 1-4",
"snippet": "@include elevation(2);"
},
{
"title": "Glassmorphism",
"mixin": "@include glassmorphism($blur, $opacity)",
"description": "Create frosted glass effects with backdrop blur",
"snippet": "@include glassmorphism(16px, 0.1);"
},
{
"title": "Color Functions",
"mixin": "get-color($palette, $shade)",
"description": "Access colors from predefined palettes (primary, secondary, accent, success, error, warning)",
"snippet": "color: get-color('primary', 500);"
},
{
"title": "Text Truncation",
"mixin": "@include truncate($lines)",
"description": "Truncate text with ellipsis after specified lines",
"snippet": "@include truncate(2);"
},
{
"title": "Custom Scrollbars",
"mixin": "@include show-scrollbar($track, $thumb)",
"description": "Style webkit scrollbars with custom colors",
"snippet": "@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));"
}
],
"animations": [
{ "name": "animate-fade-in", "description": "Fade in from opacity 0" },
{ "name": "animate-slide-in-up", "description": "Slide in from bottom" },
{ "name": "animate-slide-in-down", "description": "Slide in from top" },
{ "name": "animate-scale-in", "description": "Scale in from 95%" },
{ "name": "animate-pulse", "description": "Pulsing opacity effect" },
{ "name": "animate-bounce", "description": "Bouncing effect" },
{ "name": "animate-spin", "description": "Continuous rotation" },
{ "name": "animate-shimmer", "description": "Shimmer effect for loading" },
{ "name": "animate-float", "description": "Floating up and down" },
{ "name": "animate-glow", "description": "Glowing shadow effect" }
],
"quickStart": {
"components": {
"title": "Using Custom Components",
"code": "import './styles/main.scss'\n\nfunction MyComponent() {\n return (\n <div className=\"custom-mui-container\">\n <div className=\"custom-mui-grid custom-mui-grid--cols-3\">\n <div className=\"mui-custom-card\">\n <h3>Card Title</h3>\n <p>Card content</p>\n <button className=\"mui-custom-button mui-custom-button--primary\">\n Click Me\n </button>\n </div>\n </div>\n </div>\n )\n}"
},
"mixins": {
"title": "Creating Custom Styles with Mixins",
"code": "@use './styles/utilities' as *;\n@use './styles/variables' as *;\n\n.my-custom-component {\n @include elevation(2);\n @include responsive-padding(spacing('6'));\n background: get-color('primary', 500);\n \n @include respond-to('md') {\n @include elevation(3);\n }\n \n &:hover {\n @include glassmorphism(12px, 0.15);\n }\n}"
}
},
"bestPractices": [
"Import main.scss in your index.css to access all Sass components and utilities",
"Use @use instead of @import for better module encapsulation",
"Leverage mixins for consistent spacing, elevation, and responsive design",
"Extend existing component classes rather than creating from scratch",
"Use animation classes sparingly and respect prefers-reduced-motion",
"Customize variables in _variables.scss to match your design system"
]
}
@@ -0,0 +1,47 @@
{
"header": {
"title": "Error Detection & Repair",
"scan": "Scan",
"scanning": "Scanning...",
"repairAll": "Repair All",
"repairing": "Repairing..."
},
"counts": {
"errorSingular": "Error",
"errorPlural": "Errors",
"warningSingular": "Warning",
"warningPlural": "Warnings",
"issueSingular": "issue",
"issuePlural": "issues"
},
"actions": {
"open": "Open",
"repair": "Repair",
"fixed": "Fixed",
"showCode": "Show code",
"hideCode": "Hide code"
},
"labels": {
"line": "Line"
},
"emptyStates": {
"noIssuesTitle": "No Issues Found",
"noIssuesDescription": "All files are looking good! Click 'Scan' to check again.",
"scanningTitle": "Scanning Files...",
"scanningDescription": "Analyzing your code for errors and issues"
},
"toast": {
"noErrorsFound": "No errors found!",
"foundIssues": "Found {count} issue{plural}",
"scanFailed": "Error scanning failed",
"fixedSingle": "Fixed: {message}",
"repairErrorFailed": "Failed to repair error",
"repairFailed": "Repair failed",
"repairedFiles": "Repaired {count} file{plural}",
"noFilesRepaired": "No files could be repaired",
"batchRepairFailed": "Batch repair failed",
"repairedFile": "Repaired {fileName}",
"repairFileFailed": "Failed to repair file",
"contextRepairFailed": "Context-aware repair failed"
}
}
@@ -0,0 +1,36 @@
{
"presetSizes": [16, 32, 48, 64, 128, 256, 512],
"elementTypes": [
{ "value": "circle", "label": "Circle" },
{ "value": "square", "label": "Square" },
{ "value": "triangle", "label": "Triangle" },
{ "value": "star", "label": "Star" },
{ "value": "heart", "label": "Heart" },
{ "value": "polygon", "label": "Polygon" },
{ "value": "text", "label": "Text" },
{ "value": "emoji", "label": "Emoji" }
],
"defaultDesign": {
"id": "default",
"name": "My Favicon",
"size": 128,
"backgroundColor": "#7c3aed",
"elements": [
{
"id": "1",
"type": "text",
"x": 64,
"y": 64,
"width": 100,
"height": 100,
"color": "#ffffff",
"rotation": 0,
"text": "CF",
"fontSize": 48,
"fontWeight": "bold"
}
],
"createdAt": 0,
"updatedAt": 0
}
}
@@ -0,0 +1,120 @@
{
"toolbar": {
"newDesign": "New Design",
"duplicate": "Duplicate",
"delete": "Delete"
},
"modes": {
"select": "Select",
"draw": "Draw",
"erase": "Erase"
},
"toasts": {
"designDuplicated": "Design duplicated",
"cannotDeleteLast": "Cannot delete the last design",
"designDeleted": "Design deleted",
"exportedPng": "Exported as {size}x{size} PNG",
"exportedIco": "Exported as ICO",
"exportedSvg": "Exported as SVG",
"exportAll": "Exporting all sizes..."
},
"canvas": {
"exportPresetTitle": "Export {size}x{size}",
"brushBadge": "{effect}: {size}px",
"eraserBadge": "Eraser: {size}px",
"presetLabel": "{size}px"
},
"export": {
"png": "Export PNG",
"svg": "Export SVG",
"all": "Export All Sizes"
},
"design": {
"nameLabel": "Design Name",
"namePlaceholder": "My Favicon",
"newDesignName": "Favicon {count}",
"duplicateSuffix": " (Copy)",
"selectLabel": "Select Design",
"sizeLabel": "Canvas Size",
"backgroundLabel": "Background Color",
"backgroundPlaceholder": "#7c3aed",
"filterLabel": "Image Filter",
"filterIntensity": "Filter Intensity: {value}%"
},
"filters": {
"none": "None",
"blur": "Blur",
"brightness": "Brightness",
"contrast": "Contrast",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"hue-rotate": "Hue Rotate",
"pixelate": "Pixelate"
},
"elements": {
"addTitle": "Add Elements",
"selectHint": "Switch to Select mode to add elements",
"listTitle": "Elements ({count})",
"empty": "No elements yet. Add some or start drawing!"
},
"brush": {
"settingsTitle": "Brush Settings",
"eraserSettingsTitle": "Eraser Settings",
"effectLabel": "Brush Effect",
"colorLabel": "Brush Color",
"gradientColorLabel": "Gradient End Color",
"glowIntensity": "Glow Intensity: {value}px",
"sizeLabel": "{mode} Size: {size}px"
},
"inspector": {
"title": "Edit Element",
"strokeColor": "Stroke Color",
"strokeWidth": "Stroke Width: {value}px",
"textLabel": "Text",
"textPlaceholder": "Enter text",
"emojiLabel": "Emoji",
"emojiPlaceholder": "😀",
"fontSize": "Font Size: {value}px",
"fontWeight": "Font Weight",
"width": "Width: {value}px",
"height": "Height: {value}px",
"xPosition": "X Position: {value}px",
"yPosition": "Y Position: {value}px",
"rotation": "Rotation: {value}°",
"color": "Color"
},
"effects": {
"solid": "Solid",
"gradient": "Gradient",
"spray": "Spray Paint",
"glow": "Glow"
},
"fontWeights": {
"normal": "Normal",
"bold": "Bold",
"lighter": "Light"
},
"elementTypes": {
"circle": "Circle",
"square": "Square",
"triangle": "Triangle",
"star": "Star",
"heart": "Heart",
"polygon": "Polygon",
"text": "Text",
"emoji": "Emoji",
"freehand": "Freehand"
},
"defaults": {
"designName": "My Favicon",
"designText": "CF",
"newText": "A",
"newEmoji": "😀"
},
"placeholders": {
"color": "#ffffff",
"gradient": "#ff00ff"
}
}
@@ -0,0 +1,120 @@
{
"ideas": [
{
"id": "idea-1",
"title": "AI Code Assistant",
"description": "Integrate an AI assistant that can suggest code improvements and answer questions",
"category": "AI/ML",
"priority": "high",
"status": "completed",
"createdAtOffset": -10000000
},
{
"id": "idea-2",
"title": "Real-time Collaboration",
"description": "Allow multiple developers to work on the same project simultaneously",
"category": "Collaboration",
"priority": "high",
"status": "idea",
"createdAtOffset": -9000000
},
{
"id": "idea-3",
"title": "Component Marketplace",
"description": "A marketplace where users can share and download pre-built components",
"category": "Community",
"priority": "medium",
"status": "idea",
"createdAtOffset": -8000000
},
{
"id": "idea-4",
"title": "Visual Git Integration",
"description": "Git operations through a visual interface with branch visualization",
"category": "DevOps",
"priority": "high",
"status": "planned",
"createdAtOffset": -7000000
},
{
"id": "idea-5",
"title": "API Mock Server",
"description": "Built-in mock server for testing API integrations",
"category": "Testing",
"priority": "medium",
"status": "idea",
"createdAtOffset": -6000000
},
{
"id": "idea-6",
"title": "Performance Profiler",
"description": "Analyze and optimize application performance with visual metrics",
"category": "Performance",
"priority": "medium",
"status": "idea",
"createdAtOffset": -5000000
},
{
"id": "idea-7",
"title": "Theme Presets",
"description": "Pre-designed theme templates for quick project setup",
"category": "Design",
"priority": "low",
"status": "completed",
"createdAtOffset": -4000000
},
{
"id": "idea-8",
"title": "Database Schema Migrations",
"description": "Visual tool for creating and managing database migrations",
"category": "Database",
"priority": "high",
"status": "in-progress",
"createdAtOffset": -3000000
},
{
"id": "idea-9",
"title": "Mobile App Preview",
"description": "Live preview on actual mobile devices or simulators",
"category": "Mobile",
"priority": "medium",
"status": "planned",
"createdAtOffset": -2000000
},
{
"id": "idea-10",
"title": "Accessibility Checker",
"description": "Automated accessibility testing and suggestions",
"category": "Accessibility",
"priority": "high",
"status": "idea",
"createdAtOffset": -1000000
}
],
"edges": [
{
"id": "edge-1",
"source": "idea-1",
"target": "idea-8",
"sourceHandle": "right-0",
"targetHandle": "left-0",
"label": "requires"
},
{
"id": "edge-2",
"source": "idea-2",
"target": "idea-4",
"sourceHandle": "bottom-0",
"targetHandle": "top-0",
"label": "works with"
},
{
"id": "edge-3",
"source": "idea-8",
"target": "idea-5",
"sourceHandle": "bottom-0",
"targetHandle": "left-0",
"label": "includes"
}
]
}
@@ -0,0 +1,50 @@
{
"header": {
"title": "Files"
},
"dialog": {
"title": "Add New File",
"tabs": {
"manual": "Manual",
"ai": "AI Generate"
},
"fields": {
"fileName": "File Name",
"language": "Language",
"fileType": "File Type",
"description": "Description"
},
"placeholders": {
"manualFileName": "example.tsx",
"aiFileName": "UserCard.tsx",
"description": "Describe what this file should do..."
},
"buttons": {
"addFile": "Add File",
"generate": "Generate with AI",
"generating": "Generating..."
}
},
"options": {
"languages": {
"typescript": "TypeScript",
"javascript": "JavaScript",
"css": "CSS",
"json": "JSON",
"prisma": "Prisma"
},
"fileTypes": {
"component": "Component",
"page": "Page",
"api": "API Route",
"utility": "Utility"
}
},
"toast": {
"missingFields": "Please provide both a filename and description",
"generating": "Generating code with AI...",
"generated": "File generated successfully!",
"generationFailed": "AI generation failed. Please try again.",
"generationError": "Failed to generate file"
}
}
@@ -0,0 +1,44 @@
{
"title": "GitHub Actions",
"loading": {
"description": "Recent workflow runs"
},
"error": {
"description": "Unable to fetch workflow status",
"retry": "Try Again"
},
"empty": {
"description": "No workflow runs found",
"body": "No GitHub Actions workflows have been run yet."
},
"header": {
"description": "Build status badges and recent workflow runs",
"refresh": "Refresh"
},
"tabs": {
"badges": "Status Badges",
"runs": "Recent Runs"
},
"sections": {
"workflowBadges": "Workflow Badges",
"branchBadges": "Branch-Specific Badges"
},
"actions": {
"viewAllWorkflows": "View All Workflows"
},
"toast": {
"badgeCopied": "Badge markdown copied to clipboard"
},
"status": {
"success": "Success",
"failed": "Failed",
"cancelled": "Cancelled",
"running": "Running"
},
"time": {
"daysAgo": "{count}d ago",
"hoursAgo": "{count}h ago",
"minutesAgo": "{count}m ago",
"justNow": "just now"
}
}
@@ -0,0 +1,182 @@
[
{
"id": "nav-dashboard",
"title": "Dashboard",
"subtitle": "View project overview and statistics",
"category": "Navigation",
"icon": "ChartBar",
"tab": "dashboard",
"tags": ["home", "overview", "stats", "metrics"]
},
{
"id": "nav-code",
"title": "Code Editor",
"subtitle": "Edit project files with Monaco",
"category": "Navigation",
"icon": "Code",
"tab": "code",
"tags": ["editor", "monaco", "typescript", "javascript"]
},
{
"id": "nav-models",
"title": "Models",
"subtitle": "Design Prisma database models",
"category": "Navigation",
"icon": "Database",
"tab": "models",
"tags": ["prisma", "database", "schema", "orm"]
},
{
"id": "nav-components",
"title": "Components",
"subtitle": "Build React components",
"category": "Navigation",
"icon": "Tree",
"tab": "components",
"tags": ["react", "mui", "ui", "design"]
},
{
"id": "nav-component-trees",
"title": "Component Trees",
"subtitle": "Manage component hierarchies",
"category": "Navigation",
"icon": "Tree",
"tab": "component-trees",
"tags": ["hierarchy", "structure", "layout"]
},
{
"id": "nav-workflows",
"title": "Workflows",
"subtitle": "Design n8n-style workflows",
"category": "Navigation",
"icon": "FlowArrow",
"tab": "workflows",
"tags": ["automation", "n8n", "flow", "pipeline"]
},
{
"id": "nav-lambdas",
"title": "Lambdas",
"subtitle": "Create serverless functions",
"category": "Navigation",
"icon": "Code",
"tab": "lambdas",
"tags": ["serverless", "functions", "api"]
},
{
"id": "nav-styling",
"title": "Styling",
"subtitle": "Design themes and colors",
"category": "Navigation",
"icon": "PaintBrush",
"tab": "styling",
"tags": ["theme", "colors", "css", "design"]
},
{
"id": "nav-flask",
"title": "Flask API",
"subtitle": "Configure Flask backend",
"category": "Navigation",
"icon": "Flask",
"tab": "flask",
"tags": ["python", "backend", "api", "rest"]
},
{
"id": "nav-playwright",
"title": "Playwright Tests",
"subtitle": "E2E testing configuration",
"category": "Navigation",
"icon": "Play",
"tab": "playwright",
"tags": ["testing", "e2e", "automation"]
},
{
"id": "nav-storybook",
"title": "Storybook",
"subtitle": "Component documentation",
"category": "Navigation",
"icon": "BookOpen",
"tab": "storybook",
"tags": ["documentation", "components", "stories"]
},
{
"id": "nav-unit-tests",
"title": "Unit Tests",
"subtitle": "Configure unit testing",
"category": "Navigation",
"icon": "Cube",
"tab": "unit-tests",
"tags": ["testing", "jest", "vitest"]
},
{
"id": "nav-errors",
"title": "Error Repair",
"subtitle": "Auto-detect and fix errors",
"category": "Navigation",
"icon": "Wrench",
"tab": "errors",
"tags": ["debugging", "errors", "fixes"]
},
{
"id": "nav-docs",
"title": "Documentation",
"subtitle": "View project documentation",
"category": "Navigation",
"icon": "FileText",
"tab": "docs",
"tags": ["readme", "guide", "help"]
},
{
"id": "nav-sass",
"title": "Sass Styles",
"subtitle": "Custom Sass styling",
"category": "Navigation",
"icon": "PaintBrush",
"tab": "sass",
"tags": ["sass", "scss", "styles", "css"]
},
{
"id": "nav-favicon",
"title": "Favicon Designer",
"subtitle": "Design app icons",
"category": "Navigation",
"icon": "Image",
"tab": "favicon",
"tags": ["icon", "logo", "design"]
},
{
"id": "nav-settings",
"title": "Settings",
"subtitle": "Configure Next.js and npm",
"category": "Navigation",
"icon": "Gear",
"tab": "settings",
"tags": ["config", "nextjs", "npm", "packages"]
},
{
"id": "nav-pwa",
"title": "PWA Settings",
"subtitle": "Progressive Web App config",
"category": "Navigation",
"icon": "DeviceMobile",
"tab": "pwa",
"tags": ["mobile", "install", "offline"]
},
{
"id": "nav-features",
"title": "Feature Toggles",
"subtitle": "Enable or disable features",
"category": "Navigation",
"icon": "Faders",
"tab": "features",
"tags": ["settings", "toggles", "enable"]
},
{
"id": "nav-ideas",
"title": "Feature Ideas",
"subtitle": "Brainstorm and organize ideas",
"category": "Navigation",
"icon": "Lightbulb",
"tab": "ideas",
"tags": ["brainstorm", "ideas", "planning"]
}
]
@@ -0,0 +1,7 @@
{
"labels": {
"title": "Navigation",
"expandAll": "Expand All",
"collapseAll": "Collapse All"
}
}
@@ -0,0 +1,58 @@
{
"sections": [
{
"title": "Main",
"items": [
{ "href": "/", "label": "Dashboard", "icon": "dashboard" },
{ "href": "/code", "label": "Code Editor", "icon": "code" },
{ "href": "/components", "label": "Components", "icon": "widgets" },
{ "href": "/models", "label": "Models", "icon": "schema" }
]
},
{
"title": "Design",
"items": [
{ "href": "/component-trees", "label": "Component Trees", "icon": "account_tree" },
{ "href": "/styling", "label": "Styling", "icon": "palette" },
{ "href": "/sass", "label": "Sass", "icon": "style" },
{ "href": "/atomic-library", "label": "Atomic Library", "icon": "library_books" },
{ "href": "/templates", "label": "Templates", "icon": "content_copy" }
]
},
{
"title": "Workflows",
"items": [
{ "href": "/workflows", "label": "Workflows", "icon": "share" },
{ "href": "/lambdas", "label": "Lambdas", "icon": "functions" }
]
},
{
"title": "Tools",
"items": [
{ "href": "/json-ui", "label": "JSON UI", "icon": "data_object" },
{ "href": "/schema-editor", "label": "Schema Editor", "icon": "edit_note" },
{ "href": "/data-binding", "label": "Data Binding", "icon": "link" },
{ "href": "/database", "label": "Database", "icon": "database" }
]
},
{
"title": "Testing",
"items": [
{ "href": "/playwright", "label": "Playwright", "icon": "bug_report" },
{ "href": "/unit-tests", "label": "Unit Tests", "icon": "science" },
{ "href": "/storybook", "label": "Storybook", "icon": "auto_stories" }
]
},
{
"title": "System",
"items": [
{ "href": "/settings", "label": "Settings", "icon": "settings" },
{ "href": "/docs", "label": "Documentation", "icon": "description" },
{ "href": "/features", "label": "Features", "icon": "toggle_on" },
{ "href": "/errors", "label": "Errors", "icon": "error" },
{ "href": "/persistence", "label": "Persistence", "icon": "storage" },
{ "href": "/pwa", "label": "PWA", "icon": "install_desktop" }
]
}
]
}
@@ -0,0 +1,80 @@
{
"title": "Persistence & Sync Dashboard",
"status": {
"disconnected": "Disconnected",
"syncing": "Syncing...",
"synced": "Synced",
"error": "Error",
"idle": "Idle"
},
"format": {
"never": "Never"
},
"cards": {
"connection": {
"title": "Connection Status",
"localStorageLabel": "Local Storage:",
"localStorageValue": "IndexedDB",
"remoteStorageLabel": "Remote Storage:",
"remoteStorageConnected": "DBAL API",
"remoteStorageDisconnected": "Offline",
"lastSyncLabel": "Last Sync:"
},
"metrics": {
"title": "Sync Metrics",
"totalOperationsLabel": "Total Operations:",
"successRateLabel": "Success Rate:",
"avgDurationLabel": "Avg Duration:",
"failedLabel": "Failed:"
},
"autoSync": {
"title": "Auto-Sync",
"statusLabel": "Status:",
"statusEnabled": "Enabled",
"statusDisabled": "Disabled",
"changesPendingLabel": "Changes Pending:",
"nextSyncLabel": "Next Sync:",
"nextSyncNotAvailable": "N/A"
},
"manualSync": {
"title": "Manual Sync Operations",
"pushButton": "Push to DBAL",
"pullButton": "Pull from DBAL",
"triggerButton": "Trigger Auto-Sync",
"checkButton": "Check Connection"
},
"error": {
"title": "Sync Error"
},
"howItWorks": {
"title": "How Persistence Works",
"items": [
{
"title": "Automatic Persistence:",
"description": "All Redux state changes are automatically persisted to IndexedDB with a 300ms debounce."
},
{
"title": "DBAL Sync:",
"description": "When connected, data is synced bidirectionally with the DBAL C++ daemon."
},
{
"title": "Auto-Sync:",
"description": "Enable auto-sync to automatically push changes to DBAL at regular intervals (default: 30s)."
},
{
"title": "Conflict Resolution:",
"description": "When conflicts are detected during sync, you'll be notified to resolve them manually."
}
]
}
},
"toasts": {
"syncToSuccess": "Successfully synced to DBAL",
"syncFromSuccess": "Successfully synced from DBAL",
"syncFailed": "Sync failed: {{error}}",
"autoSyncEnabled": "Auto-sync enabled",
"autoSyncDisabled": "Auto-sync disabled",
"manualSyncSuccess": "Manual sync completed",
"manualSyncFailed": "Manual sync failed: {{error}}"
}
}
@@ -0,0 +1,57 @@
{
"title": "Persistence Middleware Example",
"description": "Demonstrates automatic persistence of Redux state to IndexedDB and DBAL API",
"editor": {
"titleCreate": "Create File",
"titleEdit": "Edit File",
"editingBadge": "Editing",
"fileNameLabel": "File Name",
"fileNamePlaceholder": "example.js",
"contentLabel": "Content",
"contentPlaceholder": "console.log('Hello, world!')",
"saveButton": "Save File",
"updateButton": "Update File",
"cancelButton": "Cancel"
},
"info": {
"automaticTitle": "Automatic Persistence",
"automaticDescription": "Data is automatically saved to IndexedDB with 300ms debounce",
"dbalTitle": "DBAL Sync",
"dbalDescription": "Changes are synced to DBAL API backend automatically"
},
"files": {
"title": "Saved Files",
"countLabel": "files",
"emptyTitle": "No files yet",
"emptyDescription": "Create your first file to see it appear here",
"updatedLabel": "Updated:",
"editButton": "Edit",
"deleteButton": "Delete"
},
"howItWorks": {
"title": "How It Works",
"steps": [
{
"title": "1. Redux Action",
"description": "When you save or delete a file, a Redux action is dispatched"
},
{
"title": "2. Middleware Intercepts",
"description": "Persistence middleware automatically intercepts the action and queues the operation"
},
{
"title": "3. Auto-Sync",
"description": "After 300ms debounce, data is saved to IndexedDB and synced to DBAL API"
}
]
},
"toasts": {
"fileNameRequired": "File name is required",
"saveSuccess": "File \"{{name}}\" saved automatically!",
"saveDescription": "Synced to IndexedDB and DBAL API",
"saveErrorTitle": "Failed to save file",
"deleteSuccess": "File \"{{name}}\" deleted",
"deleteDescription": "Automatically synced to storage",
"deleteErrorTitle": "Failed to delete file"
}
}
@@ -0,0 +1,65 @@
{
"actions": {
"navigate": "Navigate",
"click": "Click",
"fill": "Fill",
"expect": "Expect",
"wait": "Wait",
"select": "Select",
"check": "Check",
"uncheck": "Uncheck"
},
"buttons": {
"addStep": "Add Step",
"createTest": "Create Test",
"runTest": "Run Test"
},
"defaults": {
"newTestName": "New Test"
},
"descriptions": {
"testSteps": "Define the actions for this test"
},
"emptyStates": {
"noSteps": "No steps yet. Click \"Add Step\" to create test actions.",
"noTestSelectedBody": "Create or select a test to configure",
"noTestSelectedTitle": "No test selected",
"noTests": "No tests yet. Click + to create one."
},
"fields": {
"action": "Action",
"assertion": "Assertion",
"description": "Description",
"pageUrl": "Page URL",
"selector": "Selector",
"testName": "Test Name",
"timeout": "Timeout (ms)",
"value": "Value"
},
"headers": {
"testConfiguration": "Test Configuration",
"testDetails": "Test Details",
"testSteps": "Test Steps",
"tests": "E2E Tests"
},
"labels": {
"steps": "steps",
"stepPrefix": "Step"
},
"messages": {
"generated": "Test generated successfully!",
"generating": "Generating test with AI...",
"failed": "Failed to generate test"
},
"placeholders": {
"assertion": "toBeVisible(), toHaveText('...')",
"description": "What does this test verify?",
"pageUrl": "/login",
"selector": "button, #login, [data-testid='submit']",
"value": "Text to enter"
},
"prompts": {
"describeTest": "Describe the E2E test you want to generate:",
"template": "You are a Playwright test generator. Create an E2E test based on: \"{description}\"\n\nReturn a valid JSON object with a single property \"test\":\n{\n \"test\": {\n \"id\": \"unique-id\",\n \"name\": \"Test Name\",\n \"description\": \"What this test does\",\n \"pageUrl\": \"/path\",\n \"steps\": [\n {\n \"id\": \"step-id\",\n \"action\": \"navigate\" | \"click\" | \"fill\" | \"expect\" | \"wait\" | \"select\" | \"check\" | \"uncheck\",\n \"selector\": \"css selector or text\",\n \"value\": \"value for fill/select actions\",\n \"assertion\": \"expected value for expect action\",\n \"timeout\": 5000\n }\n ]\n }\n}\n\nCreate a complete test flow with appropriate selectors and assertions."
}
}
@@ -0,0 +1,121 @@
{
"header": {
"title": "Project Settings",
"description": "Configure Next.js and npm settings"
},
"tabs": {
"nextjs": "Next.js Config",
"packages": "NPM Packages",
"scripts": "Scripts",
"data": "Data",
"language": "Language"
},
"nextjs": {
"application": {
"title": "Application Settings",
"description": "Basic Next.js application configuration",
"fields": {
"appName": {
"label": "Application Name",
"placeholder": "my-nextjs-app"
},
"importAlias": {
"label": "Import Alias",
"placeholder": "@/*",
"helper": "Used for module imports (e.g., import { Button } from \"@/components\")"
}
}
},
"features": {
"title": "Features",
"description": "Enable or disable Next.js features",
"items": {
"typescript": {
"label": "TypeScript",
"description": "Use TypeScript for type safety"
},
"eslint": {
"label": "ESLint",
"description": "Code linting and formatting"
},
"tailwind": {
"label": "Tailwind CSS",
"description": "Utility-first CSS framework"
},
"srcDirectory": {
"label": "Use src/ Directory",
"description": "Organize code inside src/ folder"
},
"appRouter": {
"label": "App Router",
"description": "Use the new App Router (vs Pages Router)"
},
"turbopack": {
"label": "Turbopack (Beta)",
"description": "Faster incremental bundler"
}
}
}
},
"packages": {
"title": "NPM Packages",
"description": "Manage project dependencies",
"packageManager": {
"label": "Package Manager"
},
"dependencies": {
"title": "Dependencies",
"empty": "No dependencies added yet"
},
"devDependencies": {
"title": "Dev Dependencies",
"empty": "No dev dependencies added yet"
},
"dialog": {
"title": {
"add": "Add Package",
"edit": "Edit Package"
},
"description": "Configure npm package details",
"fields": {
"name": {
"label": "Package Name",
"placeholder": "e.g., react-query, axios"
},
"version": {
"label": "Version",
"placeholder": "latest, ^1.0.0, ~2.3.4"
},
"description": {
"label": "Description (Optional)",
"placeholder": "What is this package for?"
},
"devDependency": {
"label": "Development Dependency"
}
}
}
},
"scripts": {
"title": "NPM Scripts",
"description": "Define custom commands for your project",
"empty": "No scripts defined yet",
"dialog": {
"title": {
"add": "Add Script",
"edit": "Edit Script"
},
"description": "Define a custom npm script command",
"fields": {
"name": {
"label": "Script Name",
"placeholder": "e.g., dev, build, test"
},
"command": {
"label": "Command",
"placeholder": "e.g., next dev, tsc --noEmit"
}
}
}
}
}
@@ -0,0 +1,91 @@
{
"header": {
"title": "PWA Settings",
"description": "Configure Progressive Web App features and behavior"
},
"install": {
"title": "Installation Status",
"description": "Install the app for offline access and better performance",
"label": "App Installation",
"status": {
"installed": "Installed",
"available": "Available",
"notAvailable": "Not available"
},
"badge": {
"installed": "Installed",
"notAvailable": "Not Available"
},
"action": {
"install": "Install Now"
}
},
"connection": {
"title": "Connection Status",
"description": "Current network connectivity status",
"label": "Network Status",
"status": {
"online": "Connected to internet",
"offline": "Working offline"
},
"badge": {
"online": "Online",
"offline": "Offline"
}
},
"update": {
"title": "Update Available",
"description": "A new version of the app is ready to install",
"label": "App Update",
"status": "Update now for latest features",
"action": "Update Now"
},
"notifications": {
"title": "Notifications",
"description": "Receive updates about your projects and builds",
"label": "Push Notifications",
"permissionLabel": "Permission:",
"blocked": "Notifications are blocked. Please enable them in your browser settings.",
"unsupported": "Notifications aren't supported in this browser."
},
"cache": {
"title": "Cache Management",
"description": "Manage offline storage and cached resources",
"labels": {
"size": "Cache Size",
"serviceWorker": "Service Worker"
},
"status": {
"active": "Active",
"inactive": "Inactive"
},
"action": {
"clear": "Clear Cache & Reload"
},
"helper": "This will remove all cached files and reload the app",
"storageUnit": "MB"
},
"features": {
"title": "PWA Features",
"description": "Progressive Web App capabilities",
"items": {
"offline": "Offline Support",
"installable": "Installable",
"backgroundSync": "Background Sync",
"pushNotifications": "Push Notifications",
"shortcuts": "App Shortcuts"
}
},
"toasts": {
"installSuccess": "App installed successfully!",
"installCancelled": "Installation cancelled",
"update": "Updating app...",
"cacheCleared": "Cache cleared! Reloading...",
"notificationsEnabled": "Notifications enabled",
"notificationsDenied": "Notification permission denied"
},
"defaults": {
"cacheCalculating": "Calculating...",
"cacheUnavailable": "Unavailable"
}
}
@@ -0,0 +1,76 @@
{
"page": {
"title": "Redux Integration Demo",
"description": "Comprehensive Redux Toolkit integration with IndexedDB and DBAL API synchronization"
},
"cards": {
"indexedDb": {
"title": "IndexedDB Status",
"description": "Local browser storage",
"labels": {
"files": "Files",
"componentTrees": "Component Trees",
"createTestFile": "Create Test File"
}
},
"dbal": {
"title": "DBAL API Status",
"description": "Remote server connection",
"labels": {
"connection": "Connection",
"totalKeys": "Total Keys",
"storageSize": "Storage Size",
"storageUnit": "KB",
"checkConnection": "Check Connection"
},
"status": {
"connected": "Connected",
"disconnected": "Disconnected"
}
},
"sync": {
"title": "Sync Status",
"description": "Data synchronization",
"labels": {
"status": "Status",
"autoSync": "Auto Sync",
"lastSync": "Last Sync",
"push": "Push",
"pull": "Pull"
},
"status": {
"idle": "Idle",
"syncing": "Syncing...",
"success": "Success",
"error": "Error"
},
"autoSync": {
"enabled": "Enabled",
"disabled": "Disabled"
}
}
},
"files": {
"title": "Files in Redux Store",
"description": "Files managed by Redux and synced with IndexedDB/DBAL",
"empty": "No files yet. Create a test file to get started.",
"updatedLabel": "Updated"
},
"componentTrees": {
"title": "Component Trees in Redux Store",
"description": "JSON component trees loaded from components.json",
"empty": "No component trees loaded yet."
},
"danger": {
"title": "Danger Zone",
"description": "Irreversible operations - use with caution",
"clearButton": "Clear DBAL Storage"
},
"toast": {
"createTestFile": "Test file created and saved to IndexedDB",
"deleteFile": "File deleted from IndexedDB",
"syncUp": "Syncing to DBAL API...",
"syncDown": "Syncing from DBAL API...",
"clearDBAL": "Clearing DBAL storage..."
}
}
@@ -0,0 +1,227 @@
{
"page": {
"title": "Custom Material UI Sass Styles",
"description": "Non-standard Material UI CSS components built with Sass"
},
"tabOrder": ["buttons", "inputs", "cards", "chips", "layout", "animations"],
"tabs": {
"buttons": {
"label": "Buttons",
"title": "Custom Button Styles",
"rows": [
[
{
"label": "Primary Button",
"className": "mui-custom-button mui-custom-button--primary"
},
{
"label": "Secondary Button",
"className": "mui-custom-button mui-custom-button--secondary"
},
{
"label": "Accent Button",
"className": "mui-custom-button mui-custom-button--accent"
}
],
[
{
"label": "Outline Button",
"className": "mui-custom-button mui-custom-button--outline"
},
{
"label": "Ghost Button",
"className": "mui-custom-button mui-custom-button--ghost"
}
]
],
"codeSample": "<button className=\"mui-custom-button mui-custom-button--primary\">\n Primary Button\n</button>\n\n<button className=\"mui-custom-button mui-custom-button--accent\">\n Accent Button\n</button>"
},
"inputs": {
"label": "Inputs",
"title": "Custom Input Styles",
"fields": [
{
"placeholder": "Default input",
"className": "mui-custom-input w-full"
},
{
"placeholder": "Error state",
"className": "mui-custom-input mui-custom-input--error w-full"
},
{
"placeholder": "Success state",
"className": "mui-custom-input mui-custom-input--success w-full"
}
],
"codeSample": "<input\n className=\"mui-custom-input\"\n placeholder=\"Your input\"\n/>\n\n<input\n className=\"mui-custom-input mui-custom-input--error\"\n placeholder=\"Error state\"\n/>"
},
"cards": {
"label": "Cards",
"title": "Custom Card Styles",
"items": [
{
"title": "Standard Card",
"description": "Basic card with elevation and hover effect",
"className": "mui-custom-card p-6",
"descriptionClassName": "text-sm text-muted-foreground"
},
{
"title": "Gradient Card",
"description": "Card with gradient background",
"className": "mui-custom-card mui-custom-card--gradient p-6",
"descriptionClassName": "text-sm opacity-90"
},
{
"title": "Glass Card",
"description": "Glassmorphism effect card",
"className": "mui-custom-card mui-custom-card--glass p-6",
"descriptionClassName": "text-sm text-muted-foreground"
}
],
"codeSample": "<div className=\"mui-custom-card\">\n Standard Card\n</div>\n\n<div className=\"mui-custom-card mui-custom-card--gradient\">\n Gradient Card\n</div>\n\n<div className=\"mui-custom-card mui-custom-card--glass\">\n Glass Card\n</div>"
},
"chips": {
"label": "Chips",
"chipCardTitle": "Custom Chip/Badge Styles",
"chips": [
{
"label": "Primary",
"className": "mui-custom-chip mui-custom-chip--primary"
},
{
"label": "Secondary",
"className": "mui-custom-chip mui-custom-chip--secondary"
},
{
"label": "Accent",
"className": "mui-custom-chip mui-custom-chip--accent"
},
{
"label": "Success",
"className": "mui-custom-chip mui-custom-chip--success",
"showIcon": true
},
{
"label": "Error",
"className": "mui-custom-chip mui-custom-chip--error"
},
{
"label": "Warning",
"className": "mui-custom-chip mui-custom-chip--warning"
}
],
"codeSample": "<span className=\"mui-custom-chip mui-custom-chip--primary\">\n Primary\n</span>\n\n<span className=\"mui-custom-chip mui-custom-chip--success\">\n <CheckCircle size={14} />\n Success\n</span>",
"tagCardTitle": "Custom Tags",
"tags": [
{
"label": "Default",
"className": "custom-mui-tag"
},
{
"label": "Small",
"className": "custom-mui-tag custom-mui-tag--sm"
},
{
"label": "Large",
"className": "custom-mui-tag custom-mui-tag--lg"
}
]
},
"layout": {
"label": "Layout",
"title": "Custom Layout Components",
"sections": [
{
"title": "Custom Stack",
"containerClassName": "custom-mui-stack custom-mui-stack--gap-3",
"itemTag": "div",
"items": [
{
"label": "Item 1",
"className": "p-4 bg-card border rounded"
},
{
"label": "Item 2",
"className": "p-4 bg-card border rounded"
},
{
"label": "Item 3",
"className": "p-4 bg-card border rounded"
}
]
},
{
"title": "Custom Grid (Responsive)",
"containerClassName": "custom-mui-grid custom-mui-grid--responsive",
"itemTag": "div",
"items": [
{
"label": "Grid 1",
"className": "p-4 bg-card border rounded"
},
{
"label": "Grid 2",
"className": "p-4 bg-card border rounded"
},
{
"label": "Grid 3",
"className": "p-4 bg-card border rounded"
},
{
"label": "Grid 4",
"className": "p-4 bg-card border rounded"
}
]
},
{
"title": "Custom Surface",
"containerClassName": "custom-mui-surface custom-mui-surface--interactive",
"itemTag": "p",
"items": [
{
"label": "Interactive surface with hover effects"
}
]
}
],
"codeSample": "<div className=\"custom-mui-stack custom-mui-stack--gap-3\">\n <div>Item 1</div>\n <div>Item 2</div>\n</div>\n\n<div className=\"custom-mui-grid custom-mui-grid--responsive\">\n <div>Grid Item</div>\n</div>"
},
"animations": {
"label": "Animations",
"title": "Animation Classes",
"items": [
{
"label": "Fade In",
"className": "p-4 bg-card border rounded animate-fade-in"
},
{
"label": "Slide Up",
"className": "p-4 bg-card border rounded animate-slide-in-up"
},
{
"label": "Scale In",
"className": "p-4 bg-card border rounded animate-scale-in"
},
{
"label": "Pulse",
"className": "p-4 bg-card border rounded animate-pulse"
},
{
"label": "Bounce",
"className": "p-4 bg-card border rounded animate-bounce"
},
{
"label": "Float",
"className": "p-4 bg-card border rounded animate-float"
}
],
"codeSample": "<div className=\"animate-fade-in\">Fade In</div>\n<div className=\"animate-slide-in-up\">Slide Up</div>\n<div className=\"animate-pulse\">Pulse</div>\n<div className=\"animate-bounce\">Bounce</div>",
"skeletonTitle": "Skeleton Loading",
"skeletonClasses": [
"mui-custom-skeleton mui-custom-skeleton--text",
"mui-custom-skeleton mui-custom-skeleton--text",
"mui-custom-skeleton mui-custom-skeleton--rect"
]
}
}
}
@@ -0,0 +1,16 @@
{
"icon": "tree",
"title": "Component Tree",
"subtitle": {
"singular": "component",
"plural": "components"
},
"tooltips": {
"expandAll": "Expand All",
"collapseAll": "Collapse All"
},
"emptyState": {
"title": "No components yet",
"description": "Drag components from the palette"
}
}
@@ -0,0 +1,91 @@
{
"icon": "sliders",
"title": "Properties",
"emptyState": {
"title": "No component selected",
"description": "Select a component to edit its properties"
},
"sections": {
"componentProps": "Component Properties",
"commonProps": "Common Properties"
},
"commonProps": [
{
"name": "className",
"label": "CSS Classes",
"type": "text"
}
],
"typeSpecificProps": {
"Button": [
{
"name": "variant",
"label": "Variant",
"type": "select",
"options": [
{ "label": "Default", "value": "default" },
{ "label": "Destructive", "value": "destructive" },
{ "label": "Outline", "value": "outline" },
{ "label": "Secondary", "value": "secondary" },
{ "label": "Ghost", "value": "ghost" },
{ "label": "Link", "value": "link" }
]
},
{ "name": "children", "label": "Text", "type": "text" },
{ "name": "disabled", "label": "Disabled", "type": "boolean" }
],
"Input": [
{ "name": "placeholder", "label": "Placeholder", "type": "text" },
{
"name": "type",
"label": "Type",
"type": "select",
"options": [
{ "label": "Text", "value": "text" },
{ "label": "Password", "value": "password" },
{ "label": "Email", "value": "email" },
{ "label": "Number", "value": "number" }
]
},
{ "name": "disabled", "label": "Disabled", "type": "boolean" }
],
"Heading": [
{
"name": "level",
"label": "Level",
"type": "select",
"options": [
{ "label": "H1", "value": "1" },
{ "label": "H2", "value": "2" },
{ "label": "H3", "value": "3" },
{ "label": "H4", "value": "4" }
]
},
{ "name": "children", "label": "Text", "type": "text" }
],
"Text": [
{ "name": "children", "label": "Content", "type": "textarea" }
],
"Badge": [
{
"name": "variant",
"label": "Variant",
"type": "select",
"options": [
{ "label": "Default", "value": "default" },
{ "label": "Secondary", "value": "secondary" },
{ "label": "Destructive", "value": "destructive" },
{ "label": "Outline", "value": "outline" }
]
},
{ "name": "children", "label": "Text", "type": "text" }
],
"Progress": [
{ "name": "value", "label": "Value", "type": "number" }
],
"Grid": [
{ "name": "columns", "label": "Columns", "type": "number" },
{ "name": "gap", "label": "Gap", "type": "number" }
]
}
}
@@ -0,0 +1,18 @@
{
"schema": {
"id": "custom-page",
"name": "Custom Page",
"layout": {
"type": "single"
}
},
"export": {
"fileName": "schema.json"
},
"import": {
"accept": ".json"
},
"preview": {
"message": "Preview mode coming soon"
}
}
@@ -0,0 +1,12 @@
{
"cookie": {
"name": "sidebar_state",
"maxAgeSeconds": 604800
},
"keyboardShortcut": "b",
"labels": {
"toggleSidebar": "Toggle Sidebar",
"sidebarTitle": "Sidebar",
"sidebarDescription": "Displays the mobile sidebar."
}
}
@@ -0,0 +1,36 @@
{
"title": "Storage Example",
"description": "Demonstrates IndexedDB storage with DBAL backend fallback",
"counter": {
"title": "Simple Counter (useStorage)",
"incrementButton": "Increment",
"helper": "This counter persists across page refreshes using hybrid storage"
},
"todo": {
"title": "Todo List (useStorage)",
"placeholder": "Enter todo...",
"addButton": "Add",
"emptyState": "No todos yet. Add one above!",
"deleteButton": "Delete",
"footer": "Todos are stored in IndexedDB with DBAL backend fallback"
},
"howItWorks": {
"title": "How It Works",
"steps": [
{
"title": "1. Primary: IndexedDB",
"description": "Data is first saved to IndexedDB for fast, structured storage with indexes"
},
{
"title": "2. Fallback: DBAL Backend",
"description": "If IndexedDB fails or is unavailable, DBAL backend is used automatically"
},
{
"title": "3. Sync Both",
"description": "Data is kept in sync between both storage systems for redundancy"
}
],
"codeExampleTitle": "Code Example:",
"codeSample": "import { useStorage } from '@/hooks/use-storage'\n\nconst [todos, setTodos] = useStorage('todos', [])\n\n// Use functional updates for safety\nsetTodos((current) => [...current, newTodo])"
}
}
@@ -0,0 +1,43 @@
{
"defaults": {
"componentName": "Button",
"storyName": "Default",
"category": "Components"
},
"list": {
"title": "Stories",
"empty": "No stories yet. Click + to create one."
},
"editor": {
"title": "Story Configuration",
"previewButton": "Preview Story",
"detailsTitle": "Story Details",
"componentNameLabel": "Component Name",
"componentNamePlaceholder": "Button",
"storyNameLabel": "Story Name",
"storyNamePlaceholder": "Primary",
"categoryLabel": "Category",
"categoryPlaceholder": "Components",
"descriptionLabel": "Description",
"descriptionPlaceholder": "Describe what this story demonstrates..."
},
"args": {
"title": "Args / Props",
"description": "Configure component props for this story",
"argNamePlaceholder": "Arg name",
"argValuePlaceholder": "Value (JSON or string)",
"empty": "No args configured yet. Add props above to showcase component variations."
},
"emptyState": {
"title": "No story selected",
"subtitle": "Create or select a story to configure",
"button": "Create Story"
},
"ai": {
"descriptionPrompt": "Describe the component and story you want to generate:",
"toastGenerating": "Generating story with AI...",
"toastSuccess": "Story generated successfully!",
"toastError": "Failed to generate story",
"promptTemplate": "You are a Storybook story generator. Create a story based on: \"{description}\"\n\nReturn a valid JSON object with a single property \"story\":\n{\n \"story\": {\n \"id\": \"unique-id\",\n \"componentName\": \"ComponentName (e.g., Button, Card, Input)\",\n \"storyName\": \"StoryName (e.g., Primary, Large, Disabled)\",\n \"args\": {\n \"variant\": \"primary\",\n \"size\": \"large\",\n \"disabled\": false\n },\n \"description\": \"Description of what this story demonstrates\",\n \"category\": \"Components\" (e.g., Components, Forms, Layout, Data Display)\n }\n}\n\nCreate appropriate props/args that showcase the component variation."
}
}
@@ -0,0 +1,55 @@
{
"labels": {
"testSuites": "Test Suites",
"testSuiteConfiguration": "Test Suite Configuration",
"testSuiteDetails": "Test Suite Details",
"testSuiteName": "Test Suite Name",
"description": "Description",
"testType": "Test Type",
"targetFile": "Target File",
"testCases": "Test Cases",
"testCasesDescription": "Define individual test cases",
"case": "Case",
"caseDescription": "Description (it...)",
"setupCode": "Setup Code (optional)",
"assertions": "Assertions",
"teardownCode": "Teardown Code (optional)",
"runTests": "Run Tests",
"addTestCase": "Add Test Case",
"createTestSuite": "Create Test Suite",
"noTestSuiteSelected": "No test suite selected",
"noTestSuiteSelectedBody": "Create or select a test suite to configure",
"noTestSuitesYet": "No test suites yet. Click + to create one.",
"noTestCasesYet": "No test cases yet. Click \"Add Test Case\" to create one.",
"noFile": "No file",
"casesSuffix": "cases"
},
"placeholders": {
"testSuiteDescription": "What does this test suite cover?",
"targetFile": "/src/components/Button.tsx",
"caseDescription": "should render correctly",
"setupCode": "const { getByText } = render(<Component />)",
"assertion": "expect(...).toBe(...)",
"teardownCode": "cleanup()"
},
"defaults": {
"testSuiteName": "New Test Suite",
"testCaseDescription": "should work correctly",
"assertion": "expect(...).toBe(...)"
},
"prompts": {
"generateDescription": "Describe the component/function you want to test:",
"generatePromptTemplate": "You are a unit test generator. Create tests based on: \"{{description}}\"\n\nReturn a valid JSON object with a single property \"test\":\n{\n \"test\": {\n \"id\": \"unique-id\",\n \"name\": \"ComponentName/FunctionName Tests\",\n \"description\": \"Test suite description\",\n \"testType\": \"component\" | \"function\" | \"hook\" | \"integration\",\n \"targetFile\": \"/path/to/file.tsx\",\n \"testCases\": [\n {\n \"id\": \"case-id\",\n \"description\": \"should render correctly\",\n \"assertions\": [\n \"expect(screen.getByText('Hello')).toBeInTheDocument()\",\n \"expect(result).toBe(true)\"\n ],\n \"setup\": \"const { getByText } = render(<Component />)\",\n \"teardown\": \"cleanup()\"\n }\n ]\n }\n}\n\nCreate comprehensive test cases with appropriate assertions for React Testing Library or Vitest."
},
"toasts": {
"generating": "Generating test with AI...",
"generateSuccess": "Test suite generated successfully!",
"generateError": "Failed to generate test"
},
"testTypes": {
"component": "Component",
"function": "Function",
"hook": "Hook",
"integration": "Integration"
}
}