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,552 +0,0 @@
1
- # # Features Test Page - Client-side UI
2
- # # Demonstrates: props, exports, cl files, TypeScript imports, string methods,
3
- # # imports from JAC/JS/TS, spawning walkers from cl file
4
-
5
- import from "@jac-client/utils" { Link, useNavigate }
6
- import from react { useState, useEffect }
7
-
8
- # # Import TypeScript component
9
- # import from ..components.PieChart { PieChart }
10
-
11
- # # Import JavaScript helpers
12
- import from ..utils.helpers { generateId, calculatePercentage, sumBy }
13
-
14
- # # Import from other JAC files
15
- import from ..utils.formatters { formatCurrency }
16
-
17
- # ============================================================================
18
- # REUSABLE COMPONENTS WITH PROPS
19
- # ============================================================================
20
-
21
- # Button component demonstrating props - NEW PATTERN: Direct parameters
22
- def:pub TestButton(text: str, onClick: any, variant: str) -> any {
23
- bg_color = "#3b82f6" if variant == "primary" else "#6b7280";
24
- hover_color = "#2563eb" if variant == "primary" else "#4b5563";
25
-
26
- return <button
27
- onClick={onClick}
28
- style={{
29
- "padding": "10px 20px",
30
- "backgroundColor": bg_color,
31
- "color": "white",
32
- "border": "none",
33
- "borderRadius": "6px",
34
- "cursor": "pointer",
35
- "fontSize": "14px",
36
- "fontWeight": "600",
37
- "transition": "all 0.2s"
38
- }}
39
- onMouseOver={lambda e: any -> None {
40
- e.target.style.backgroundColor = hover_color;
41
- }}
42
- onMouseOut={lambda e: any -> None {
43
- e.target.style.backgroundColor = bg_color;
44
- }}
45
- >
46
- {text}
47
- </button>;
48
- }
49
-
50
- # # Card component with props - NEW PATTERN: Direct parameters
51
- def:pub TestCard(title: str, children: any, color: str) -> any {
52
- return <div style={{
53
- "backgroundColor": "white",
54
- "border": "1px solid #e5e7eb",
55
- "borderRadius": "8px",
56
- "padding": "20px",
57
- "marginBottom": "20px",
58
- "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
59
- }}>
60
- <div style={{
61
- "backgroundColor": color,
62
- "padding": "10px",
63
- "borderRadius": "6px",
64
- "marginBottom": "15px"
65
- }}>
66
- <h3 style={{
67
- "margin": "0",
68
- "fontSize": "18px",
69
- "fontWeight": "600",
70
- "color": "#1f2937"
71
- }}>{title}</h3>
72
- </div>
73
- <div>{children}</div>
74
- </div>;
75
- }
76
-
77
- # Result display component - NEW PATTERN: Direct parameters
78
- def:pub ResultDisplay(data: any, label: str) -> any {
79
- if not data {
80
- return <div style={{"color": "#9ca3af", "fontStyle": "italic"}}>
81
- No data to display
82
- </div>;
83
- }
84
-
85
- return <div style={{
86
- "backgroundColor": "#f9fafb",
87
- "padding": "15px",
88
- "borderRadius": "6px",
89
- "border": "1px solid #e5e7eb"
90
- }}>
91
- <strong style={{"color": "#374151"}}>{label}:</strong>
92
- <pre style={{
93
- "marginTop": "10px",
94
- "padding": "10px",
95
- "backgroundColor": "#1f2937",
96
- "color": "#10b981",
97
- "borderRadius": "4px",
98
- "overflow": "auto",
99
- "fontSize": "12px",
100
- "fontFamily": "monospace"
101
- }}>
102
- {JSON.stringify(data, None, 2)}
103
- </pre>
104
- </div>;
105
- }
106
-
107
- # ============================================================================
108
- # MAIN PAGE COMPONENT
109
- # ============================================================================
110
-
111
- def:pub FeaturesTest() -> any {
112
- navigate = useNavigate();
113
-
114
- # State management
115
- has testMessage: str = "";
116
- has testData: list = [];
117
- has stringInput: str = "Hello JAC World!";
118
- has stringResult: any = None;
119
- has numberList: str = "1,2,3,4,5";
120
- has listResult: any = None;
121
- has complexResult: any = None;
122
- has loading: bool = false;
123
-
124
- # Load test data on mount
125
- useEffect(lambda -> None {
126
- async def loadData() -> None {
127
- try {
128
- result = root spawn read_test_data();
129
- testData = result.reports if result.reports[0] else [];
130
- } except Exception as e {
131
- console.log("Error loading data:", e);
132
- }
133
- }
134
- loadData();
135
- }, []);
136
-
137
- # ========================================================================
138
- # EVENT HANDLERS - Demonstrating Walker Spawning from CL
139
- # ========================================================================
140
-
141
- # Create test data
142
- async def handleCreate() -> None {
143
- if not testMessage.trim() {
144
- alert("Please enter a message");
145
- return;
146
- }
147
-
148
- loading = true;
149
- try {
150
- response = root spawn create_test_data(message=testMessage.trim());
151
- new_item = response.reports[0][0];
152
- testData = testData.concat([new_item]);
153
- testMessage = "";
154
- alert("Data created successfully!");
155
- } except Exception as e {
156
- console.error("Error creating data:", e);
157
- alert("Error creating data: " + e.toString());
158
- }
159
- loading = false;
160
- }
161
-
162
- # Update test data
163
- async def handleUpdate(item_id: any) -> None {
164
- new_msg = prompt("Enter new message:");
165
- if not new_msg {
166
- return;
167
- }
168
-
169
- loading = true;
170
- try {
171
- item_id spawn update_test_data(new_message=new_msg);
172
- # Reload data
173
- result = root spawn read_test_data();
174
- testData = result.reports if result.reports[0] else [];
175
- alert("Data updated successfully!");
176
- } except Exception as e {
177
- console.error("Error updating data:", e);
178
- alert("Error updating data: " + e.toString());
179
- }
180
- loading = false;
181
- }
182
-
183
- # Delete test data
184
- async def handleDelete(item_id: any) -> None {
185
- if not confirm("Are you sure you want to delete this item?") {
186
- return;
187
- }
188
-
189
- loading = true;
190
- try {
191
- item_id spawn delete_test_data();
192
- # Remove from local state
193
- testData = testData.filter(lambda item: any -> bool {
194
- return item._jac_id != item_id;
195
- });
196
- alert("Data deleted successfully!");
197
- } except Exception as e {
198
- console.error("Error deleting data:", e);
199
- alert("Error deleting data: " + e.toString());
200
- }
201
- loading = false;
202
- }
203
-
204
- # Test string methods via walker
205
- async def handleStringTest() -> None {
206
- loading = true;
207
- try {
208
- response = root spawn test_string_methods(input_text=stringInput);
209
- result = response.reports[0];
210
- stringResult = result;
211
- } except Exception as e {
212
- console.error("Error testing strings:", e);
213
- alert("Error testing strings: " + e.toString());
214
- }
215
- loading = false;
216
- }
217
-
218
- # Test list operations via walker
219
- async def handleListTest() -> None {
220
- loading = true;
221
- try {
222
- # Parse number list
223
- numbers = numberList.split(",").map(lambda x: str -> int {
224
- return parseInt(x.trim());
225
- }).filter(lambda x: any -> bool {
226
- return not isNaN(x);
227
- });
228
-
229
- response = root spawn test_list_operations(numbers=numbers);
230
- result = response.reports[0];
231
- listResult = result;
232
- } except Exception as e {
233
- console.error("Error testing lists:", e);
234
- alert("Error testing lists: " + e.toString());
235
- }
236
- loading = false;
237
- }
238
-
239
- # Test complex data processing
240
- async def handleComplexTest() -> None {
241
- loading = true;
242
- try {
243
- # Generate sample data using JS helper
244
- sample_items = [
245
- {"id": generateId(), "name": "apple", "value": 10},
246
- {"id": generateId(), "name": "banana", "value": 20},
247
- {"id": generateId(), "name": "cherry", "value": 30}
248
- ];
249
-
250
- response = root spawn process_complex_data(items=sample_items);
251
- result = response.reports[0];
252
- complexResult = result;
253
- } except Exception as e {
254
- console.error("Error processing complex data:", e);
255
- alert("Error processing complex data: " + e.toString());
256
- }
257
- loading = false;
258
- }
259
-
260
- # ========================================================================
261
- # DEMONSTRATION OF STRING METHODS (CLIENT-SIDE)
262
- # ========================================================================
263
- demo_text = "JAC Language Features";
264
- string_demos = {
265
- "Original": demo_text,
266
- "Uppercase": demo_text.toUpperCase(),
267
- "Lowercase": demo_text.toLowerCase(),
268
- "Length": demo_text.length.toString(),
269
- "Split by space": demo_text.split(" ").join(", ")
270
- };
271
-
272
- # Demo chart data for TypeScript component
273
- chart_data = [
274
- {"name": "Walker Tests", "value": 5},
275
- {"name": "String Methods", "value": 8},
276
- {"name": "List Operations", "value": 7},
277
- {"name": "Components", "value": 4}
278
- ];
279
-
280
- # Calculate total using JS helper
281
- total_tests = sumBy(chart_data, "value");
282
-
283
-
284
- # ========================================================================
285
- # RENDER
286
- # ========================================================================
287
- return <div style={{
288
- "maxWidth": "1200px",
289
- "margin": "0 auto",
290
- "padding": "20px",
291
- "fontFamily": "system-ui, -apple-system, sans-serif"
292
- }}>
293
- # Header
294
- <div style={{
295
- "display": "flex",
296
- "justifyContent": "space-between",
297
- "alignItems": "center",
298
- "marginBottom": "30px"
299
- }}>
300
- <h1 style={{"color": "#1f2937", "margin": "0"}}>
301
- JAC Features Test Suite
302
- </h1>
303
- <Link to="/">
304
- <TestButton text="← Back Home" onClick={lambda -> None {}} variant="secondary" />
305
- </Link>
306
- </div>
307
-
308
- # Loading indicator
309
- {loading and <div style={{
310
- "position": "fixed",
311
- "top": "20px",
312
- "right": "20px",
313
- "backgroundColor": "#3b82f6",
314
- "color": "white",
315
- "padding": "10px 20px",
316
- "borderRadius": "6px",
317
- "boxShadow": "0 4px 6px rgba(0,0,0,0.2)",
318
- "zIndex": "1000"
319
- }}>
320
- Processing...
321
- </div>}
322
-
323
- # Section 1: Walker CRUD Operations
324
- <TestCard title="1. Walker CRUD Operations (Spawn from CL)" color="#dbeafe">
325
- <div style={{"marginBottom": "15px"}}>
326
- <p style={{"color": "#4b5563", "marginBottom": "10px"}}>
327
- Test creating, reading, updating, and deleting data using walkers spawned from client code.
328
- </p>
329
-
330
- <div style={{"display": "flex", "gap": "10px", "marginBottom": "15px"}}>
331
- <input
332
- type="text"
333
- value={testMessage}
334
- onChange={lambda e: any -> None { testMessage = e.target.value; }}
335
- placeholder="Enter test message..."
336
- style={{
337
- "flex": "1",
338
- "padding": "10px",
339
- "border": "1px solid #d1d5db",
340
- "borderRadius": "6px",
341
- "fontSize": "14px"
342
- }}
343
- />
344
- <TestButton
345
- text="Create"
346
- onClick={lambda -> None { handleCreate(); }}
347
- variant="primary"
348
- />
349
- </div>
350
-
351
- <div style={{"marginTop": "20px"}}>
352
- <strong style={{"color": "#374151"}}>Stored Data ({testData.length} items):</strong>
353
- {testData.length == 0 and <p style={{"color": "#9ca3af", "fontStyle": "italic"}}>
354
- No data yet. Create some!
355
- </p>}
356
- {testData.map(lambda item: any -> any {
357
- return <div
358
- key={item._jac_id}
359
- style={{
360
- "backgroundColor": "#f9fafb",
361
- "padding": "12px",
362
- "borderRadius": "6px",
363
- "marginTop": "8px",
364
- "display": "flex",
365
- "justifyContent": "space-between",
366
- "alignItems": "center"
367
- }}
368
- >
369
- <div>
370
- <div style={{"fontWeight": "600", "color": "#1f2937"}}>
371
- {item.message}
372
- </div>
373
- <div style={{"fontSize": "12px", "color": "#6b7280"}}>
374
- Count: {item.count} | Created: {item.created_at}
375
- </div>
376
- </div>
377
- <div style={{"display": "flex", "gap": "8px"}}>
378
- <TestButton
379
- text="Edit"
380
- onClick={lambda -> None { handleUpdate(item._jac_id); }}
381
- variant="secondary"
382
- />
383
- <TestButton
384
- text="Delete"
385
- onClick={lambda -> None { handleDelete(item._jac_id); }}
386
- variant="secondary"
387
- />
388
- </div>
389
- </div>;
390
- })}
391
- </div>
392
- </div>
393
- </TestCard>
394
-
395
- # # Section 2: String Methods
396
- <TestCard title="2. String Methods (Client & Walker)" color="#fce7f3">
397
- <div>
398
- <p style={{"color": "#4b5563", "marginBottom": "10px"}}>
399
- Client-side string manipulation and walker-based string processing.
400
- </p>
401
-
402
- # Client-side demo
403
- <div style={{"marginBottom": "20px"}}>
404
- <strong style={{"color": "#374151"}}>Client-side String Demo:</strong>
405
- <div style={{
406
- "backgroundColor": "#fef3c7",
407
- "padding": "10px",
408
- "borderRadius": "6px",
409
- "marginTop": "8px"
410
- }}>
411
- {Object.keys(string_demos).map(lambda key: str -> any {
412
- return <div key={key} style={{"marginBottom": "5px"}}>
413
- <span style={{"fontWeight": "600"}}>{key}:</span> {string_demos[key]}
414
- </div>;
415
- })}
416
- </div>
417
- </div>
418
-
419
- # Walker-based test
420
- <div>
421
- <strong style={{"color": "#374151"}}>Walker String Processing:</strong>
422
- <div style={{"display": "flex", "gap": "10px", "marginTop": "10px"}}>
423
- <input
424
- type="text"
425
- value={stringInput}
426
- onChange={lambda e: any -> None { stringInput = e.target.value; }}
427
- style={{
428
- "flex": "1",
429
- "padding": "10px",
430
- "border": "1px solid #d1d5db",
431
- "borderRadius": "6px",
432
- "fontSize": "14px"
433
- }}
434
- />
435
- <TestButton
436
- text="Process with Walker"
437
- onClick={lambda -> None { handleStringTest(); }}
438
- variant="primary"
439
- />
440
- </div>
441
- {stringResult and <ResultDisplay data={stringResult} label="Walker Result" />}
442
- </div>
443
- </div>
444
- </TestCard>
445
-
446
- # # Section 3: List Operations
447
- <TestCard title="3. List/Array Operations" color="#ddd6fe">
448
- <div>
449
- <p style={{"color": "#4b5563", "marginBottom": "10px"}}>
450
- Process arrays/lists using walker operations.
451
- </p>
452
-
453
- <div style={{"display": "flex", "gap": "10px", "marginTop": "10px"}}>
454
- <input
455
- type="text"
456
- value={numberList}
457
- onChange={lambda e: any -> None { numberList = e.target.value; }}
458
- placeholder="Enter numbers (comma-separated)"
459
- style={{
460
- "flex": "1",
461
- "padding": "10px",
462
- "border": "1px solid #d1d5db",
463
- "borderRadius": "6px",
464
- "fontSize": "14px"
465
- }}
466
- />
467
- <TestButton
468
- text="Process List"
469
- onClick={lambda -> None { handleListTest(); }}
470
- variant="primary"
471
- />
472
- </div>
473
- {listResult and <ResultDisplay data={listResult} label="List Operations Result" />}
474
- </div>
475
- </TestCard>
476
-
477
- # # Section 4: TypeScript Component Integration
478
- # <TestCard title="4. TypeScript Component (PieChart.tsx)" color="#ccfbf1">
479
- # <div>
480
- # <p style={{"color": "#4b5563", "marginBottom": "10px"}}>
481
- # Imported TypeScript React component with data from JAC.
482
- # </p>
483
- # # <PieChart data={chart_data} title="Feature Test Distribution" />
484
- # <p style={{"marginTop": "10px", "color": "#6b7280", "fontSize": "14px"}}>
485
- # Total tests: {total_tests} (calculated using JS helper: sumBy)
486
- # </p>
487
- # </div>
488
- # </TestCard>
489
-
490
- # # Section 5: Import Demonstrations
491
- <TestCard title="5. Import Demonstrations" color="#fed7aa">
492
- <div>
493
- <p style={{"color": "#4b5563", "marginBottom": "15px"}}>
494
- This page demonstrates various import types:
495
- </p>
496
-
497
- <ul style={{"color": "#374151", "lineHeight": "1.8"}}>
498
- <li><strong>JAC-Client Utils:</strong> Router components (Link, useNavigate)</li>
499
- <li><strong>React:</strong> Hooks (useState, useEffect)</li>
500
- # <li><strong>TypeScript:</strong> PieChart component from .tsx file</li>
501
- <li><strong>JavaScript:</strong> Helper functions from .js file (generateId, sumBy)</li>
502
- <li><strong>JAC Files:</strong> formatCurrency from utils/formatters.jac</li>
503
- </ul>
504
-
505
- <div style={{
506
- "backgroundColor": "#f0fdf4",
507
- "padding": "15px",
508
- "borderRadius": "6px",
509
- "marginTop": "15px"
510
- }}>
511
- <strong style={{"color": "#065f46"}}>Examples:</strong>
512
- <div style={{"marginTop": "8px", "fontSize": "14px", "color": "#047857"}}>
513
- <div>Generated ID: {generateId()}</div>
514
- <div>Formatted Currency: {formatCurrency(1234.56)}</div>
515
- <div>Percentage Calc: {calculatePercentage(75, 100)}%</div>
516
- </div>
517
- </div>
518
- </div>
519
- </TestCard>
520
-
521
- # # Section 6: Complex Data Processing
522
- <TestCard title="6. Complex Data Processing" color="#e0e7ff">
523
- <div>
524
- <p style={{"color": "#4b5563", "marginBottom": "10px"}}>
525
- Process complex nested data structures with walkers.
526
- </p>
527
-
528
- <TestButton
529
- text="Process Sample Data"
530
- onClick={lambda -> None { handleComplexTest(); }}
531
- variant="primary"
532
- />
533
-
534
- {complexResult and <ResultDisplay data={complexResult} label="Complex Processing Result" />}
535
- </div>
536
- </TestCard>
537
-
538
- # Footer
539
- <div style={{
540
- "marginTop": "30px",
541
- "padding": "20px",
542
- "backgroundColor": "#f9fafb",
543
- "borderRadius": "8px",
544
- "textAlign": "center",
545
- "color": "#6b7280"
546
- }}>
547
- <p style={{"margin": "0"}}>
548
- ✅ All features tested: Props, Exports, CL Files, TypeScript, JavaScript, JAC Imports, String Methods, Walker Spawning
549
- </p>
550
- </div>
551
- </div>;
552
- }
@@ -1,88 +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
- useEffect(lambda -> None{ console.log("Count: ", count);} , [count]);
9
- return <div
10
- style={{
11
- padding: "20px",
12
- textAlign: "center",
13
- fontFamily: "Arial, sans-serif"
14
- }}
15
- >
16
- <h1>
17
- 🍔 Burger Counter App
18
- </h1>
19
- <img
20
- src="/static/assets/burger.png"
21
- alt="Delicious Burger"
22
- style={{
23
- width: "200px",
24
- height: "auto",
25
- margin: "20px 0",
26
- borderRadius: "10px",
27
- boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
28
- }}
29
- />
30
- <p
31
- style={{fontSize: "18px", margin: "20px 0"}}
32
- >
33
- You've clicked the burger
34
- <strong>
35
- {count}
36
- </strong>
37
- times!
38
- </p>
39
- <button
40
- onClick={lambda e: any -> None{ count = count + 1;} }
41
- style={{
42
- padding: "10px 20px",
43
- fontSize: "16px",
44
- backgroundColor: "#ff6b35",
45
- color: "white",
46
- border: "none",
47
- borderRadius: "5px",
48
- cursor: "pointer",
49
- boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
50
- }}
51
- >
52
- Click the Burger! 🍔
53
- </button>
54
- <h2
55
- style={{marginTop: "40px", marginBottom: "20px"}}
56
- >
57
- CSS Asset Examples
58
- </h2>
59
- <div className="container">
60
- <h3
61
- style={{color: "white", textShadow: "2px 2px 4px rgba(0,0,0,0.5)"}}
62
- >
63
- Background Image Example
64
- </h3>
65
- <p
66
- style={{color: "white", textShadow: "2px 2px 4px rgba(0,0,0,0.5)"}}
67
- >
68
- This container uses the burger image as a background via CSS
69
- </p>
70
- </div>
71
- <div className="card">
72
- <h3>
73
- Image in Card
74
- </h3>
75
- <img
76
- src="/static/assets/burger.png"
77
- alt="Burger in Card"
78
- className="burgerImage"
79
- />
80
- <p
81
- style={{marginTop: "15px", color: "#666"}}
82
- >
83
- This image is displayed within a styled card using CSS classes
84
- </p>
85
- </div>
86
- </div>;
87
- }
88
- }