jac-client 0.2.8__py3-none-any.whl → 0.2.11__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. jac_client/examples/all-in-one/button.jac +4 -3
  2. jac_client/examples/all-in-one/components/CategoryFilter.jac +36 -24
  3. jac_client/examples/all-in-one/components/Header.jac +12 -8
  4. jac_client/examples/all-in-one/components/ProfitOverview.jac +49 -35
  5. jac_client/examples/all-in-one/components/Summary.jac +59 -36
  6. jac_client/examples/all-in-one/components/TransactionForm.jac +142 -112
  7. jac_client/examples/all-in-one/components/TransactionItem.jac +37 -30
  8. jac_client/examples/all-in-one/components/TransactionList.jac +33 -26
  9. jac_client/examples/all-in-one/components/button.jac +4 -3
  10. jac_client/examples/all-in-one/components/navigation.jac +111 -117
  11. jac_client/examples/all-in-one/constants/categories.jac +23 -24
  12. jac_client/examples/all-in-one/constants/clients.jac +7 -8
  13. jac_client/examples/all-in-one/context/BudgetContext.jac +9 -6
  14. jac_client/examples/all-in-one/hooks/useBudget.jac +18 -12
  15. jac_client/examples/all-in-one/hooks/useLocalStorage.jac +14 -13
  16. jac_client/examples/all-in-one/main.jac +542 -0
  17. jac_client/examples/all-in-one/pages/BudgetPlanner.jac +26 -12
  18. jac_client/examples/all-in-one/pages/FeaturesTest.jac +43 -12
  19. jac_client/examples/all-in-one/pages/LandingPage.jac +113 -90
  20. jac_client/examples/all-in-one/pages/budget_planner_ui.cl.jac +65 -0
  21. jac_client/examples/all-in-one/pages/features_test_ui.cl.jac +675 -0
  22. jac_client/examples/all-in-one/pages/loginPage.jac +114 -119
  23. jac_client/examples/all-in-one/pages/nestedDemo.jac +44 -51
  24. jac_client/examples/all-in-one/pages/notFound.jac +15 -21
  25. jac_client/examples/all-in-one/pages/signupPage.jac +113 -119
  26. jac_client/examples/all-in-one/utils/formatters.jac +5 -8
  27. jac_client/examples/asset-serving/css-with-image/main.jac +92 -0
  28. jac_client/examples/asset-serving/image-asset/main.jac +56 -0
  29. jac_client/examples/asset-serving/import-alias/main.jac +109 -0
  30. jac_client/examples/basic/main.jac +23 -0
  31. jac_client/examples/basic-auth/main.jac +363 -0
  32. jac_client/examples/basic-auth-with-router/main.jac +451 -0
  33. jac_client/examples/basic-full-stack/main.jac +362 -0
  34. jac_client/examples/css-styling/js-styling/main.jac +63 -0
  35. jac_client/examples/css-styling/material-ui/main.jac +122 -0
  36. jac_client/examples/css-styling/pure-css/main.jac +55 -0
  37. jac_client/examples/css-styling/sass-example/main.jac +55 -0
  38. jac_client/examples/css-styling/styled-components/main.jac +62 -0
  39. jac_client/examples/css-styling/tailwind-example/main.jac +74 -0
  40. jac_client/examples/full-stack-with-auth/main.jac +696 -0
  41. jac_client/examples/little-x/main.jac +681 -0
  42. jac_client/examples/little-x/src/submit-button.jac +15 -14
  43. jac_client/examples/nested-folders/nested-advance/main.jac +26 -0
  44. jac_client/examples/nested-folders/nested-advance/src/ButtonRoot.jac +4 -6
  45. jac_client/examples/nested-folders/nested-advance/src/level1/ButtonSecondL.jac +9 -13
  46. jac_client/examples/nested-folders/nested-advance/src/level1/Card.jac +29 -32
  47. jac_client/examples/nested-folders/nested-advance/src/level1/level2/ButtonThirdL.jac +12 -18
  48. jac_client/examples/nested-folders/nested-basic/{src/app.jac → main.jac} +7 -5
  49. jac_client/examples/nested-folders/nested-basic/src/button.jac +4 -3
  50. jac_client/examples/nested-folders/nested-basic/src/components/button.jac +4 -3
  51. jac_client/examples/ts-support/main.jac +35 -0
  52. jac_client/examples/with-router/main.jac +286 -0
  53. jac_client/plugin/cli.jac +491 -411
  54. jac_client/plugin/client.jac +25 -0
  55. jac_client/plugin/client_runtime.cl.jac +10 -4
  56. jac_client/plugin/impl/client.impl.jac +96 -55
  57. jac_client/plugin/impl/client_runtime.impl.jac +155 -1
  58. jac_client/plugin/plugin_config.jac +211 -29
  59. jac_client/plugin/src/__init__.jac +0 -2
  60. jac_client/plugin/src/compiler.jac +0 -1
  61. jac_client/plugin/src/config_loader.jac +1 -0
  62. jac_client/plugin/src/desktop_config.jac +31 -0
  63. jac_client/plugin/src/impl/compiler.impl.jac +49 -17
  64. jac_client/plugin/src/impl/config_loader.impl.jac +8 -0
  65. jac_client/plugin/src/impl/desktop_config.impl.jac +191 -0
  66. jac_client/plugin/src/impl/jac_to_js.impl.jac +5 -1
  67. jac_client/plugin/src/impl/package_installer.impl.jac +20 -20
  68. jac_client/plugin/src/impl/vite_bundler.impl.jac +191 -64
  69. jac_client/plugin/src/targets/desktop/sidecar/main.py +144 -0
  70. jac_client/plugin/src/targets/desktop_target.jac +37 -0
  71. jac_client/plugin/src/targets/impl/desktop_target.impl.jac +2347 -0
  72. jac_client/plugin/src/targets/impl/registry.impl.jac +64 -0
  73. jac_client/plugin/src/targets/impl/web_target.impl.jac +157 -0
  74. jac_client/plugin/src/targets/register.jac +21 -0
  75. jac_client/plugin/src/targets/registry.jac +87 -0
  76. jac_client/plugin/src/targets/web_target.jac +35 -0
  77. jac_client/plugin/src/vite_bundler.jac +6 -0
  78. jac_client/plugin/utils/__init__.jac +3 -0
  79. jac_client/plugin/utils/bun_installer.jac +16 -0
  80. jac_client/plugin/utils/impl/bun_installer.impl.jac +99 -0
  81. jac_client/templates/client.jacpack +72 -0
  82. jac_client/templates/fullstack.jacpack +61 -0
  83. jac_client/tests/conftest.py +103 -47
  84. jac_client/tests/fixtures/spawn_test/app.jac +49 -52
  85. jac_client/tests/fixtures/with-ts/app.jac +27 -27
  86. jac_client/tests/test_cli.py +182 -71
  87. jac_client/tests/test_e2e.py +232 -0
  88. jac_client/tests/test_helpers.py +58 -0
  89. jac_client/tests/test_it.py +91 -135
  90. jac_client/tests/test_it_desktop.py +891 -0
  91. {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/METADATA +6 -6
  92. jac_client-0.2.11.dist-info/RECORD +113 -0
  93. {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/WHEEL +1 -1
  94. jac_client/examples/all-in-one/app.jac +0 -573
  95. jac_client/examples/all-in-one/pages/BudgetPlanner.cl.jac +0 -70
  96. jac_client/examples/all-in-one/pages/FeaturesTest.cl.jac +0 -552
  97. jac_client/examples/asset-serving/css-with-image/src/app.jac +0 -88
  98. jac_client/examples/asset-serving/image-asset/src/app.jac +0 -55
  99. jac_client/examples/asset-serving/import-alias/src/app.jac +0 -111
  100. jac_client/examples/basic/src/app.jac +0 -21
  101. jac_client/examples/basic-auth/src/app.jac +0 -371
  102. jac_client/examples/basic-auth-with-router/src/app.jac +0 -464
  103. jac_client/examples/basic-full-stack/src/app.jac +0 -359
  104. jac_client/examples/css-styling/js-styling/src/app.jac +0 -84
  105. jac_client/examples/css-styling/material-ui/src/app.jac +0 -122
  106. jac_client/examples/css-styling/pure-css/src/app.jac +0 -64
  107. jac_client/examples/css-styling/sass-example/src/app.jac +0 -64
  108. jac_client/examples/css-styling/styled-components/src/app.jac +0 -71
  109. jac_client/examples/css-styling/tailwind-example/src/app.jac +0 -63
  110. jac_client/examples/full-stack-with-auth/src/app.jac +0 -722
  111. jac_client/examples/little-x/src/app.jac +0 -719
  112. jac_client/examples/nested-folders/nested-advance/src/app.jac +0 -35
  113. jac_client/examples/ts-support/src/app.jac +0 -35
  114. jac_client/examples/with-router/src/app.jac +0 -323
  115. jac_client/plugin/src/babel_processor.jac +0 -18
  116. jac_client/plugin/src/impl/babel_processor.impl.jac +0 -89
  117. jac_client-0.2.8.dist-info/RECORD +0 -97
  118. {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/entry_points.txt +0 -0
  119. {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/top_level.txt +0 -0
@@ -1,359 +0,0 @@
1
- # Todo App
2
- cl import from react { useEffect }
3
-
4
- node Todo {
5
- has text: str,
6
- done: bool = False;
7
- }
8
-
9
- walker create_todo {
10
- has text: str;
11
-
12
- can create with `root entry {
13
- new_todo = here ++> Todo(text=self.text);
14
- report new_todo ;
15
- }
16
- }
17
-
18
- walker toggle_todo {
19
- can toggle with Todo entry {
20
- here.done = not here.done;
21
- report here ;
22
- }
23
- }
24
-
25
- walker read_todos {
26
- can read with `root entry {
27
- visit [-->(`?Todo)];
28
- }
29
-
30
- can report_todos with exit {
31
- report here ;
32
- }
33
- }
34
-
35
- cl {
36
- def:pub app -> any {
37
- has todos: list = [];
38
- has inputValue: str = "";
39
- has filter: str = "all";
40
-
41
- useEffect(
42
- lambda -> None{ async def loadTodos -> None {
43
- result = root spawn read_todos();
44
- todos = result.reports;
45
- } loadTodos();} ,
46
- []
47
- );
48
-
49
- # Add a new todo
50
- async def addTodo -> None {
51
- if not inputValue.trim() {
52
- return;
53
- }
54
- newTodo = {"id": Date.now(), "text": inputValue.trim(), "done": False};
55
- response = root spawn create_todo(text=inputValue.trim());
56
- newTodos = todos.concat([response.reports[0][0]]);
57
- todos = newTodos;
58
- inputValue = "";
59
- }
60
-
61
- # Toggle todo completion status
62
- async def toggleTodo(id: any) -> None {
63
- console.log("toggleTodo", id);
64
- id spawn toggle_todo();
65
- todos = todos.map(
66
- lambda todo: any -> any{ if todo._jac_id == id {
67
- updatedTodo = {
68
- "_jac_id": todo._jac_id,
69
- "text": todo.text,
70
- "done": not todo.done,
71
- "id": todo.id
72
- };
73
- return updatedTodo;
74
- }return todo; }
75
- );
76
- }
77
-
78
- # Delete a todo
79
- def deleteTodo(id: any) -> None {
80
- todos = todos.filter(lambda todo: any -> bool{ return todo.id != id; } );
81
- }
82
-
83
- # Clear all completed todos
84
- def clearCompleted -> None {
85
- todos = todos.filter(lambda todo: any -> bool{ return not todo.done; } );
86
- }
87
-
88
- # Filter todos based on current filter
89
- def getFilteredTodos -> list {
90
- if filter == "active" {
91
- return todos.filter(
92
- lambda todo: any -> bool{ return not todo.done; }
93
- );
94
- } elif filter == "completed" {
95
- return todos.filter(lambda todo: any -> bool{ return todo.done; } );
96
- }
97
- return todos;
98
- }
99
-
100
- # Count active todos
101
- activeCount = todos.filter(
102
- lambda todo: any -> bool{ return not todo.done; }
103
- ).length;
104
-
105
- filteredTodos = getFilteredTodos();
106
-
107
- return <div
108
- style={{
109
- "maxWidth": "600px",
110
- "margin": "40px auto",
111
- "padding": "24px",
112
- "fontFamily": "system-ui, -apple-system, sans-serif",
113
- "background": "#f9fafb",
114
- "minHeight": "100vh"
115
- }}
116
- >
117
- <h1
118
- style={{
119
- "textAlign": "center",
120
- "color": "#1f2937",
121
- "marginBottom": "32px",
122
- "fontSize": "2.5rem",
123
- "fontWeight": "700"
124
- }}
125
- >
126
- 📝 My Todo App
127
- </h1>
128
- # Add todo form
129
- <div
130
- style={{
131
- "display": "flex",
132
- "gap": "8px",
133
- "marginBottom": "24px",
134
- "background": "#ffffff",
135
- "padding": "16px",
136
- "borderRadius": "12px",
137
- "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
138
- }}
139
- >
140
- <input
141
- type="text"
142
- value={inputValue}
143
- onChange={lambda e: any -> None{ inputValue = e.target.value;} }
144
- onKeyPress={lambda e: any -> None{ if e.key == "Enter" {
145
- addTodo();
146
- }} }
147
- placeholder="What needs to be done?"
148
- style={{
149
- "flex": "1",
150
- "padding": "12px 16px",
151
- "border": "1px solid #e5e7eb",
152
- "borderRadius": "8px",
153
- "fontSize": "16px",
154
- "outline": "none"
155
- }}
156
- />
157
- <button
158
- onClick={addTodo}
159
- style={{
160
- "padding": "12px 24px",
161
- "background": "#3b82f6",
162
- "color": "#ffffff",
163
- "border": "none",
164
- "borderRadius": "8px",
165
- "fontSize": "16px",
166
- "fontWeight": "600",
167
- "cursor": "pointer",
168
- "transition": "background 0.2s"
169
- }}
170
- >
171
- Add
172
- </button>
173
- </div>
174
- # Filter buttons
175
- <div
176
- style={{
177
- "display": "flex",
178
- "gap": "8px",
179
- "marginBottom": "24px",
180
- "justifyContent": "center"
181
- }}
182
- >
183
- <button
184
- onClick={lambda -> None{ filter = "all";} }
185
- style={{
186
- "padding": "8px 16px",
187
- "background": ("#3b82f6" if filter == "all" else "#ffffff"),
188
- "color": ("#ffffff" if filter == "all" else "#3b82f6"),
189
- "border": "1px solid #3b82f6",
190
- "borderRadius": "6px",
191
- "fontSize": "14px",
192
- "fontWeight": "600",
193
- "cursor": "pointer"
194
- }}
195
- >
196
- All
197
- </button>
198
- <button
199
- onClick={lambda -> None{ filter = "active";} }
200
- style={{
201
- "padding": "8px 16px",
202
- "background": ("#3b82f6" if filter == "active" else "#ffffff"),
203
- "color": ("#ffffff" if filter == "active" else "#3b82f6"),
204
- "border": "1px solid #3b82f6",
205
- "borderRadius": "6px",
206
- "fontSize": "14px",
207
- "fontWeight": "600",
208
- "cursor": "pointer"
209
- }}
210
- >
211
- Active
212
- </button>
213
- <button
214
- onClick={lambda -> None{ filter = "completed";} }
215
- style={{
216
- "padding": "8px 16px",
217
- "background": (
218
- "#3b82f6" if filter == "completed" else "#ffffff"
219
- ),
220
- "color": ("#ffffff" if filter == "completed" else "#3b82f6"),
221
- "border": "1px solid #3b82f6",
222
- "borderRadius": "6px",
223
- "fontSize": "14px",
224
- "fontWeight": "600",
225
- "cursor": "pointer"
226
- }}
227
- >
228
- Completed
229
- </button>
230
- </div>
231
- # Todo list
232
- <div
233
- style={{
234
- "background": "#ffffff",
235
- "borderRadius": "12px",
236
- "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
237
- "overflow": "hidden"
238
- }}
239
- >
240
- {(
241
- <div
242
- style={{
243
- "padding": "40px",
244
- "textAlign": "center",
245
- "color": "#9ca3af"
246
- }}
247
- >
248
- {(
249
- "No todos yet. Add one above!"
250
- if filter == "all"
251
- else (
252
- "No active todos!"
253
- if filter == "active"
254
- else "No completed todos!"
255
- )
256
- )}
257
- </div>
258
- )
259
- if filteredTodos.length == 0
260
- else (
261
- filteredTodos.map(
262
- lambda todo: any -> any{ return <div
263
- key={todo._jac_id}
264
- style={{
265
- "display": "flex",
266
- "alignItems": "center",
267
- "gap": "12px",
268
- "padding": "16px",
269
- "borderBottom": "1px solid #e5e7eb",
270
- "transition": "background 0.2s"
271
- }}
272
- >
273
- <input
274
- type="checkbox"
275
- checked={todo.done}
276
- onChange={lambda -> None{ toggleTodo(todo._jac_id);} }
277
- style={{
278
- "width": "20px",
279
- "height": "20px",
280
- "cursor": "pointer"
281
- }}
282
- />
283
- <span
284
- style={{
285
- "flex": "1",
286
- "textDecoration": (
287
- "line-through" if todo.done else "none"
288
- ),
289
- "color": ("#9ca3af" if todo.done else "#1f2937"),
290
- "fontSize": "16px"
291
- }}
292
- >
293
- {todo.text}
294
- </span>
295
- <button
296
- onClick={lambda -> None{ deleteTodo(todo.__jac_id);} }
297
- style={{
298
- "padding": "6px 12px",
299
- "background": "#ef4444",
300
- "color": "#ffffff",
301
- "border": "none",
302
- "borderRadius": "6px",
303
- "fontSize": "14px",
304
- "fontWeight": "500",
305
- "cursor": "pointer",
306
- "transition": "background 0.2s"
307
- }}
308
- >
309
- Delete
310
- </button>
311
- </div>; }
312
- )
313
- )}
314
- </div>
315
- # Stats and clear completed button
316
- {(
317
- <div
318
- style={{
319
- "display": "flex",
320
- "justifyContent": "space-between",
321
- "alignItems": "center",
322
- "marginTop": "24px",
323
- "padding": "16px",
324
- "background": "#ffffff",
325
- "borderRadius": "12px",
326
- "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
327
- }}
328
- >
329
- <span
330
- style={{"color": "#6b7280", "fontSize": "14px"}}
331
- >
332
- {activeCount} {"item" if activeCount == 1 else "items"} left
333
- </span>
334
- {(
335
- <button
336
- onClick={clearCompleted}
337
- style={{
338
- "padding": "8px 16px",
339
- "background": "#ef4444",
340
- "color": "#ffffff",
341
- "border": "none",
342
- "borderRadius": "6px",
343
- "fontSize": "14px",
344
- "fontWeight": "600",
345
- "cursor": "pointer"
346
- }}
347
- >
348
- Clear Completed
349
- </button>
350
- )
351
- if todos.some(lambda todo: any -> bool{ return todo.done; } )
352
- else None}
353
- </div>
354
- )
355
- if todos.length > 0
356
- else None}
357
- </div>;
358
- }
359
- }
@@ -1,84 +0,0 @@
1
- # Pages
2
- cl import from react { useEffect }
3
- cl import from .styles { default as styles }
4
-
5
- cl {
6
- def:pub app -> any {
7
- has count: int = 0;
8
-
9
- useEffect(lambda -> None{ console.log("Count changed: ", count);} , [count]);
10
-
11
- handleIncrement = lambda e: any -> None{ count = count + 1;} ;
12
-
13
- handleDecrement = lambda e: any -> None{ count = count - 1;} ;
14
-
15
- handleReset = lambda e: any -> None{ count = 0;} ;
16
-
17
- countStyle = styles.countDisplayZero
18
- if count == 0
19
- else (
20
- styles.countDisplayPositive if count > 0 else styles.countDisplayNegative
21
- );
22
-
23
- return <div
24
- style={styles.container}
25
- >
26
- <div
27
- style={styles.card}
28
- >
29
- <h1
30
- style={styles.title}
31
- >
32
- Counter Application
33
- </h1>
34
- <div
35
- style={styles.divider}
36
- ></div>
37
- <div
38
- style={styles.counterSection}
39
- >
40
- <div
41
- style={styles.label}
42
- >
43
- Current Count
44
- </div>
45
- <div
46
- style={countStyle}
47
- >
48
- {count}
49
- </div>
50
- </div>
51
- <div
52
- style={styles.divider}
53
- ></div>
54
- <div
55
- style={styles.buttonGroup}
56
- >
57
- <button
58
- style={styles.buttonDecrement}
59
- onClick={handleDecrement}
60
- >
61
- -
62
- </button>
63
- <button
64
- style={styles.buttonReset}
65
- onClick={handleReset}
66
- >
67
-
68
- </button>
69
- <button
70
- style={styles.buttonIncrement}
71
- onClick={handleIncrement}
72
- >
73
- +
74
- </button>
75
- </div>
76
- <div
77
- style={styles.hint}
78
- >
79
- Click the buttons to increment, decrement, or reset the counter
80
- </div>
81
- </div>
82
- </div>;
83
- }
84
- }
@@ -1,122 +0,0 @@
1
- cl import from react { useEffect }
2
- cl import from '@mui/material/Button' { default as Button }
3
- cl import from '@mui/material/Card' { default as Card }
4
- cl import from '@mui/material/CardContent' { default as CardContent }
5
- cl import from '@mui/material/CardActions' { default as CardActions }
6
- cl import from '@mui/material/Typography' { default as Typography }
7
- cl import from '@mui/material/IconButton' { default as IconButton }
8
- cl import from '@mui/material/Box' { default as Box }
9
- cl import from '@mui/material/Divider' { default as Divider }
10
- cl import from '@mui/icons-material/Add' { default as AddIcon }
11
- cl import from '@mui/icons-material/Remove' { default as RemoveIcon }
12
- cl import from '@mui/icons-material/Refresh' { default as RefreshIcon }
13
-
14
- cl {
15
- def:pub app -> any {
16
- has count: int = 0;
17
-
18
- useEffect(lambda -> None{ console.log("Count changed: ", count);} , [count]);
19
-
20
- handleIncrement = lambda e: any -> None{ count = count + 1;} ;
21
-
22
- handleDecrement = lambda e: any -> None{ count = count - 1;} ;
23
-
24
- handleReset = lambda e: any -> None{ count = 0;} ;
25
-
26
- return <Box
27
- sx={{
28
- "display": "flex",
29
- "justifyContent": "center",
30
- "alignItems": "center",
31
- "minHeight": "100vh",
32
- "backgroundColor": "#f5f5f5"
33
- }}
34
- >
35
- <Card
36
- sx={{"minWidth": 400, "boxShadow": 3}}
37
- >
38
- <CardContent>
39
- <Typography
40
- variant="h4"
41
- component="div"
42
- gutterBottom
43
- sx={{"textAlign": "center", "color": "primary.main"}}
44
- >
45
- Counter Application
46
- </Typography>
47
- <Divider
48
- sx={{"my": 2}}
49
- />
50
- <Box
51
- sx={{
52
- "display": "flex",
53
- "flexDirection": "column",
54
- "alignItems": "center",
55
- "py": 3
56
- }}
57
- >
58
- <Typography
59
- variant="h6"
60
- color="text.secondary"
61
- gutterBottom
62
- >
63
- Current Count
64
- </Typography>
65
- <Typography
66
- variant="h1"
67
- component="div"
68
- sx={{
69
- "fontWeight": "bold",
70
- "color": "success.main"
71
- if count > 0
72
- else "error.main" if count < 0 else "text.primary"
73
- }}
74
- >
75
- {count}
76
- </Typography>
77
- </Box>
78
- </CardContent>
79
- <Divider />
80
- <CardActions
81
- sx={{"display": "flex", "justifyContent": "space-around", "p": 2}}
82
- >
83
- <IconButton
84
- color="error"
85
- size="large"
86
- onClick={handleDecrement}
87
- sx={{"border": "2px solid", "borderColor": "error.main"}}
88
- >
89
- <RemoveIcon />
90
- </IconButton>
91
- <IconButton
92
- color="primary"
93
- size="large"
94
- onClick={handleReset}
95
- sx={{"border": "2px solid", "borderColor": "primary.main"}}
96
- >
97
- <RefreshIcon />
98
- </IconButton>
99
- <IconButton
100
- color="success"
101
- size="large"
102
- onClick={handleIncrement}
103
- sx={{"border": "2px solid", "borderColor": "success.main"}}
104
- >
105
- <AddIcon />
106
- </IconButton>
107
- </CardActions>
108
- <Box
109
- sx={{"px": 3, "pb": 2}}
110
- >
111
- <Typography
112
- variant="caption"
113
- color="text.secondary"
114
- sx={{"display": "block", "textAlign": "center"}}
115
- >
116
- Click the buttons to increment, decrement, or reset the counter
117
- </Typography>
118
- </Box>
119
- </Card>
120
- </Box>;
121
- }
122
- }
@@ -1,64 +0,0 @@
1
- # Pages
2
- cl import from react { useEffect }
3
- cl import ".styles.css";
4
-
5
- cl {
6
- def:pub app -> any {
7
- has count: int = 0;
8
-
9
- useEffect(lambda -> None{ console.log("Count changed: ", count);} , [count]);
10
-
11
- handleIncrement = lambda e: any -> None{ count = count + 1;} ;
12
-
13
- handleDecrement = lambda e: any -> None{ count = count - 1;} ;
14
-
15
- handleReset = lambda e: any -> None{ count = 0;} ;
16
-
17
- countClass = "countDisplay " + (
18
- "positive" if count > 0 else "negative" if count < 0 else "zero"
19
- );
20
-
21
- return <div className="container">
22
- <div className="card">
23
- <h1 className="title">
24
- Counter Application
25
- </h1>
26
- <div className="divider"></div>
27
- <div className="counterSection">
28
- <div className="label">
29
- Current Count
30
- </div>
31
- <div
32
- className={countClass}
33
- >
34
- {count}
35
- </div>
36
- </div>
37
- <div className="divider"></div>
38
- <div className="buttonGroup">
39
- <button
40
- className="btn btnDecrement"
41
- onClick={handleDecrement}
42
- >
43
- -
44
- </button>
45
- <button
46
- className="btn btnReset"
47
- onClick={handleReset}
48
- >
49
-
50
- </button>
51
- <button
52
- className="btn btnIncrement"
53
- onClick={handleIncrement}
54
- >
55
- +
56
- </button>
57
- </div>
58
- <div className="hint">
59
- Click the buttons to increment, decrement, or reset the counter
60
- </div>
61
- </div>
62
- </div>;
63
- }
64
- }
@@ -1,64 +0,0 @@
1
- # Pages
2
- cl import from react { useEffect }
3
- cl import ".styles.scss";
4
-
5
- cl {
6
- def:pub app -> any {
7
- has count: int = 0;
8
-
9
- useEffect(lambda -> None{ console.log("Count changed: ", count);} , [count]);
10
-
11
- handleIncrement = lambda e: any -> None{ count = count + 1;} ;
12
-
13
- handleDecrement = lambda e: any -> None{ count = count - 1;} ;
14
-
15
- handleReset = lambda e: any -> None{ count = 0;} ;
16
-
17
- countClass = "countDisplay " + (
18
- "positive" if count > 0 else "negative" if count < 0 else "zero"
19
- );
20
-
21
- return <div className="container">
22
- <div className="card">
23
- <h1 className="title">
24
- Counter Application
25
- </h1>
26
- <div className="divider"></div>
27
- <div className="counterSection">
28
- <div className="label">
29
- Current Count
30
- </div>
31
- <div
32
- className={countClass}
33
- >
34
- {count}
35
- </div>
36
- </div>
37
- <div className="divider"></div>
38
- <div className="buttonGroup">
39
- <button
40
- className="btn btnDecrement"
41
- onClick={handleDecrement}
42
- >
43
- -
44
- </button>
45
- <button
46
- className="btn btnReset"
47
- onClick={handleReset}
48
- >
49
-
50
- </button>
51
- <button
52
- className="btn btnIncrement"
53
- onClick={handleIncrement}
54
- >
55
- +
56
- </button>
57
- </div>
58
- <div className="hint">
59
- Click the buttons to increment, decrement, or reset the counter
60
- </div>
61
- </div>
62
- </div>;
63
- }
64
- }