All files / examples basic-usage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// Basic component example - Greeting component with conditional rendering
export const Greeting = ({ name = 'World', mood = 'happy' }) => ({
    div: {
        className: `greeting greeting--${mood}`,
        children: [
            { h2: { text: `Hello, ${name}!` } },
            { p: { text: `You seem ${mood} today` } },
            mood === 'fantastic' ? {
                div: {
                    className: 'celebration',
                    children: [
                        { span: { text: '🎉 Amazing! 🎉' } }
                    ]
                }
            } : null
        ].filter(Boolean)
    }
});
 
// User profile component with styling
export const UserCard = ({ user }) => ({
    div: {
        className: 'user-card',
        style: 'border: 1px solid #ccc; padding: 10px; margin: 10px;',
        children: [
            { h3: { text: user.name } },
            { p: { text: `Email: ${user.email}` } },
            { p: { text: `Role: ${user.role}` } }
        ]
    }
});
 
// List component rendering multiple user cards
export const UserList = ({ users = [] }) => ({
    div: {
        className: 'user-list',
        children: [
            { h2: { text: 'User List' } },
            users.length > 0 ? {
                ul: {
                    children: users.map(user => ({
                        li: {
                            key: user.id,
                            children: [UserCard({ user })]
                        }
                    }))
                }
            } : {
                p: { text: 'No users found' }
            }
        ]
    }
});
 
// Sample data for demonstration
const sampleUsers = [
    { id: 1, name: 'Alice', email: 'alice@example.com', role: 'Admin' },
    { id: 2, name: 'Bob', email: 'bob@example.com', role: 'User' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com', role: 'User' }
];
 
// Complete page example with embedded styles
export const completePage = {
    html: {
        children: [
            {
                head: {
                    children: [
                        { title: { text: 'Coherent Framework Demo' } },
                        {
                            style: {
                                text: `
                                .greeting { 
                                    padding: 20px; 
                                    margin: 10px; 
                                    border: 1px solid #ddd; 
                                    border-radius: 4px;
                                }
                                .greeting--happy { border-color: #4CAF50; }
                                .greeting--fantastic { 
                                    border-color: #FF5722; 
                                    background: #fff3e0; 
                                }
                                .celebration { 
                                    margin-top: 10px; 
                                    font-size: 1.2em; 
                                    text-align: center; 
                                }
                                .user-list { margin: 20px 0; }
                                .user-list ul { list-style-type: none; padding: 0; }
                                .user-list li { padding: 8px; margin: 4px 0; background: #f5f5f5; }
                                .user-card { 
                                    border-radius: 4px; 
                                    background: white; 
                                }
                                body { 
                                    font-family: Arial, sans-serif; 
                                    max-width: 800px; 
                                    margin: 0 auto; 
                                    padding: 20px; 
                                }
                                `
                            }
                        }
                    ]
                }
            },
            {
                body: {
                    children: [
                        { h1: { text: 'Coherent Framework Demo' } },
                        { p: { text: 'This page demonstrates basic component usage, composition, and styling.' } },
                        Greeting({ name: 'Coherent User', mood: 'fantastic' }),
                        UserList({ users: sampleUsers })
                    ]
                }
            }
        ]
    }
};
 
// Export the complete page as default for live preview
export default completePage;