masonry/examples/lang/example.masonry

// Enhanced Masonry DSL example demonstrating simplified unified structure
// This shows how containers, tabs, panels, modals, and master-detail are now unified as sections

// Server configuration
server MyApp {
    host "localhost"
    port 8080
}

// Entity definitions with various field types and relationships
entity User desc "User account management" {
    id: uuid required unique
    email: string required validate email validate min_length "5"
    name: string default "Anonymous"
    created_at: timestamp default "now()"
    profile_id: uuid relates to Profile as one via "user_id"
}

entity Profile desc "User profile information" {
    id: uuid required unique
    user_id: uuid required relates to User as one
    bio: text validate max_length "500"
    avatar_url: string validate url
    updated_at: timestamp
    posts: uuid relates to Post as many
}

entity Post desc "Blog posts" {
    id: uuid required unique
    title: string required validate min_length "1" validate max_length "200"
    content: text required
    author_id: uuid required relates to User as one
    published: boolean default "false"
    created_at: timestamp default "now()"
    tags: uuid relates to Tag as many through "post_tags"
}

entity Tag desc "Content tags" {
    id: uuid required unique
    name: string required unique validate min_length "1" validate max_length "50"
    slug: string required unique indexed
    created_at: timestamp default "now()"
}

// API Endpoints with different HTTP methods and parameter sources
endpoint GET "/users" for User desc "List users" auth {
    param page: int from query
    param limit: int required from query
    returns list as "json" fields [id, email, name]
}

endpoint POST "/users" for User desc "Create user" {
    param user_data: object required from body
    returns object as "json" fields [id, email, name]
}

endpoint PUT "/users/{id}" for User desc "Update user" {
    param id: uuid required from path
    param user_data: object required from body
    returns object
    custom "update_user_logic"
}

endpoint DELETE "/users/{id}" for User desc "Delete user" auth {
    param id: uuid required from path
    returns object
}

endpoint GET "/posts" for Post desc "List posts" {
    param author_id: uuid from query
    param published: boolean from query
    param page: int from query
    returns list as "json" fields [id, title, author_id, published]
}

endpoint POST "/posts" for Post desc "Create post" auth {
    param post_data: object required from body
    returns object fields [id, title, content, author_id]
}

// Enhanced User Management page with unified section layout
page UserManagement at "/admin/users" layout AdminLayout title "User Management" auth {
    meta description "Manage system users"
    meta keywords "users, admin, management"

    section main type container class "grid grid-cols-3 gap-4" {
        section sidebar class "col-span-1" {
            component UserStats for User {
                data from "/users/stats"
            }
        }

        section content class "col-span-2" {
            component UserTable for User {
                fields [email, name, role, created_at]
                actions [edit, delete, view]
                data from "/users"
            }

            section editPanel type panel trigger "edit" position "slide-right" for User {
                component UserForm for User {
                    field email type text label "Email" required
                    field name type text label "Name" required
                    field role type select options ["admin", "user"]
                    button save label "Save User" style "primary" via "/users/{id}"
                    button cancel label "Cancel" style "secondary"
                }
            }
        }
    }
}

// Enhanced Form component with detailed field configurations
page UserFormPage at "/admin/users/new" layout AdminLayout title "Create User" auth {
    component Form for User {
        field email type text label "Email Address" placeholder "Enter your email" required validate email
        field name type text label "Full Name" placeholder "Enter your full name" required
        field role type select label "User Role" options ["admin", "user", "moderator"] default "user"
        field avatar type file label "Profile Picture" accept "image/*"
        field bio type textarea label "Biography" placeholder "Tell us about yourself" rows 4

        when role equals "admin" {
            component AdminPermissions {
                field permissions type multiselect label "Permissions" {
                    options ["users.manage", "posts.manage", "system.config"]
                }
            }
        }

        section actions {
            component ActionButtons {
                button save label "Save User" style "primary" loading "Saving..." via "/users"
                button cancel label "Cancel" style "secondary"
            }
        }
    }
}

// Dashboard with tabbed interface using unified sections
page Dashboard at "/dashboard" layout MainLayout title "Dashboard" {
    section tabs type container {
        section overview type tab label "Overview" active {
            component StatsCards
            component RecentActivity
        }

        section users type tab label "Users" {
            component UserTable for User {
                data from "/users"
            }
        }

        section posts type tab label "Posts" {
            component PostTable for Post {
                data from "/posts"
            }
        }
    }

    section createUserModal type modal trigger "create-user" {
        component UserForm for User {
            field email type text label "Email" required
            field name type text label "Name" required
            button save label "Create" via "/users"
            button cancel label "Cancel"
        }
    }
}

// Post Management with master-detail layout using unified sections
page PostManagement at "/admin/posts" layout AdminLayout title "Post Management" auth {
    section master type master {
        component PostTable for Post {
            field title type text label "Title" sortable
            field author type relation label "Author" display "name" relates to User
            field status type badge label "Status"
        }
    }

    section detail type detail trigger "edit" {
        component PostForm for Post {
            section basic class "mb-4" {
                component BasicFields {
                    field title type text label "Post Title" required
                    field content type richtext label "Content" required
                }
            }

            section metadata class "grid grid-cols-2 gap-4" {
                component MetadataFields {
                    field author_id type autocomplete label "Author" {
                        source "/users" display "name" value "id"
                    }
                    field published type toggle label "Published" default "false"
                    field tags type multiselect label "Tags" {
                        source "/tags" display "name" value "id"
                    }
                }
            }
        }
    }
}

// Simple table component with smart defaults
page SimpleUserList at "/users" layout MainLayout title "Users" {
    component SimpleTable for User {
        fields [email, name, created_at]
        actions [edit, delete]
        data from "/users"
    }
}

// Detailed table with simplified component attributes
page DetailedUserList at "/admin/users/detailed" layout AdminLayout title "Detailed User Management" auth {
    component DetailedTable for User {
        data from "/users"
        pagination size 20
        field email type text label "Email Address"
        field name type text label "Full Name"
    }
}

// Complex nested sections example
page ComplexLayout at "/complex" layout MainLayout title "Complex Layout" {
    section mainContainer type container class "flex h-screen" {
        section sidebar type container class "w-64 bg-gray-100" {
            section navigation {
                component NavMenu
            }

            section userInfo type panel trigger "profile" position "bottom" {
                component UserProfile
            }
        }

        section content type container class "flex-1" {
            section header class "h-16 border-b" {
                component PageHeader
            }

            section body class "flex-1 p-4" {
                section tabs type container {
                    section overview type tab label "Overview" active {
                        section metrics class "grid grid-cols-3 gap-4" {
                            component MetricCard
                            component MetricCard
                            component MetricCard
                        }
                    }

                    section details type tab label "Details" {
                        component DetailView
                    }
                }
            }
        }
    }
}

// Conditional rendering with sections and components
page ConditionalForm at "/conditional" layout MainLayout title "Conditional Form" {
    component UserForm for User {
        field email type text label "Email" required
        field role type select options ["admin", "user", "moderator"]

        when role equals "admin" {
            section adminSection class "border-l-4 border-red-500 pl-4" {
                component AdminPermissions {
                    field permissions type multiselect label "Admin Permissions" {
                        options ["users.manage", "posts.manage", "system.config"]
                    }
                }

                component AdminSettings {
                    field max_users type number label "Max Users"
                }
            }
        }

        when role equals "moderator" {
            component ModeratorSettings {
                field moderation_level type select label "Moderation Level" {
                    options ["basic", "advanced", "full"]
                }
            }
        }

        section actions {
            component ActionButtons {
                button save label "Save User" style "primary" loading "Saving..."
                button cancel label "Cancel" style "secondary"
            }
        }
    }
}