unflow 0.1.1

Unflow is a DSL to convert design to code. 
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

project: DesignDSL
feature: "design basic dsl"
type: web
width: 1080px

flow 登录 {
    SEE 首页
    DO [Click] "登录".Button
        REACT Success: SHOW "Login Success".Toast with ANIMATE(bounce)
        REACT Failure: SHOW "Login Failure".Dialog

    SEE "登录失败".窗口
    DO [Click] "忘记密码".Button
        REACT: GOTO ForgotPasswordPage

    SEE 忘记密码面
    DO [Click] "重置密码".Button
        REACT: SHOW "Please Check Email".Message
}

flow 登出 {
    SEE 个人信息面
    DO [Click] "登出".按钮
    REACT Success: SHOW "登出成功".Toast with ANIMATE(bounce)
}

page HomePage {
    LayoutGrid: 12x
    LayoutId: HomePage
    Router: "/home"
}

page ForgotPasswordPage {
    Router: "/profile/reset-password/"
}

Layout HomePage {
--------------------------
|      Navigation(RIGHT) |
--------------------------
| Empty(2x) | TitleComponent | Empty(2x) |
--------------------------
|     ImageComponent     |
--------------------------
| BlogList(8x)  | Archives(2x) |
--------------------------
| Footer                 |
--------------------------
}

component Navigation {
    LayoutId: Navigation
}

component Dialog {
    width: 320px
    height: 240px
}


Layout Navigation {
--------------------------------------
| "home" |"detail" | Button("Login") |
--------------------------------------
}

component TitleComponent {}
component ImageComponent {
    width: 1080px
    height: 320px
}
component Toast {
    width: 320px
    height: 120px
}
component 窗口 {
    width: 320px
    height: 120px
}
component Message {
    width: 320px
    height: 120px
}
component BlogList {
    BlogDetail, Space8
    BlogDetail, Space8
    BlogDetail, Space8
    BlogDetail, Space8
    BlogDetail, Space8
    BlogDetail, Space8
}

library FontSize {
    H1 = 32px
    H2 = 28px
    H3 = 24px
    H4 = 20px
    H5 = 18px
    H6 = 16px
}

library Color {
    Primary {
        label = "Primary"
        value = "#E53935"
    }
    Secondary {
        label = "Blue"
        value = "#1E88E5"
    }
    Third {
        label = "Third"
        value = "#000000"
    }
}

library Button {
    Default = [
        FontSize.H2, Color.Primary
    ]
    Primary = [
        FontSize.H2, Color.Primary
    ]
}