sdui-python 1.0.7__tar.gz
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.
- sdui_python-1.0.7/MANIFEST.in +11 -0
- sdui_python-1.0.7/PKG-INFO +693 -0
- sdui_python-1.0.7/README.md +667 -0
- sdui_python-1.0.7/bin/component-cli.js +94 -0
- sdui_python-1.0.7/bin/serialize-cli.js +91 -0
- sdui_python-1.0.7/bin/type-check-cli.js +103 -0
- sdui_python-1.0.7/examples/__init__.py +0 -0
- sdui_python-1.0.7/examples/basic_usage.py +124 -0
- sdui_python-1.0.7/examples/variant_driven_examples.py +260 -0
- sdui_python-1.0.7/pyproject.toml +49 -0
- sdui_python-1.0.7/requirements.txt +7 -0
- sdui_python-1.0.7/sdui_python/__init__.py +296 -0
- sdui_python-1.0.7/sdui_python/cli.py +87 -0
- sdui_python-1.0.7/sdui_python.egg-info/PKG-INFO +693 -0
- sdui_python-1.0.7/sdui_python.egg-info/SOURCES.txt +34 -0
- sdui_python-1.0.7/sdui_python.egg-info/dependency_links.txt +1 -0
- sdui_python-1.0.7/sdui_python.egg-info/entry_points.txt +4 -0
- sdui_python-1.0.7/sdui_python.egg-info/top_level.txt +4 -0
- sdui_python-1.0.7/setup.cfg +4 -0
- sdui_python-1.0.7/setup.py +54 -0
- sdui_python-1.0.7/tests/README.md +29 -0
- sdui_python-1.0.7/tests/__init__.py +0 -0
- sdui_python-1.0.7/tests/test_action_serialization.py +184 -0
- sdui_python-1.0.7/tests/test_action_state_validation.py +139 -0
- sdui_python-1.0.7/tests/test_all.py +238 -0
- sdui_python-1.0.7/tests/test_common_properties.py +43 -0
- sdui_python-1.0.7/tests/test_component_registry.py +167 -0
- sdui_python-1.0.7/tests/test_component_types.py +359 -0
- sdui_python-1.0.7/tests/test_direct_validation.py +212 -0
- sdui_python-1.0.7/tests/test_error_handling.py +244 -0
- sdui_python-1.0.7/tests/test_functionality.py +257 -0
- sdui_python-1.0.7/tests/test_integration_scenarios.py +721 -0
- sdui_python-1.0.7/tests/test_property_rendering.py +171 -0
- sdui_python-1.0.7/tests/test_sdui_toggle.py +161 -0
- sdui_python-1.0.7/tests/test_template_expressions.py +249 -0
- sdui_python-1.0.7/tests/test_todo_app.py +95 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
include README.md
|
|
2
|
+
include pyproject.toml
|
|
3
|
+
include requirements.txt
|
|
4
|
+
include setup.py
|
|
5
|
+
recursive-include sdui_python *.py
|
|
6
|
+
recursive-include bin *.js
|
|
7
|
+
recursive-include dist *.js *.css *.d.ts
|
|
8
|
+
recursive-include tests *.py
|
|
9
|
+
include tests/README.md
|
|
10
|
+
recursive-include examples *.py
|
|
11
|
+
include examples/README.md
|
|
@@ -0,0 +1,693 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: sdui-python
|
|
3
|
+
Version: 1.0.7
|
|
4
|
+
Summary: Python bindings for the SDUI Components Library
|
|
5
|
+
Home-page: https://github.com/SuperKnowledge/sdui-components-library
|
|
6
|
+
Author: leetao
|
|
7
|
+
Author-email: leetao <leetao94cn@gmail.com>
|
|
8
|
+
License: MIT
|
|
9
|
+
Project-URL: Homepage, https://github.com/SuperKnowledge/sdui-components-library
|
|
10
|
+
Project-URL: Repository, https://github.com/SuperKnowledge/sdui-components-library
|
|
11
|
+
Classifier: Development Status :: 4 - Beta
|
|
12
|
+
Classifier: Intended Audience :: Developers
|
|
13
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
14
|
+
Classifier: Operating System :: OS Independent
|
|
15
|
+
Classifier: Programming Language :: Python :: 3
|
|
16
|
+
Classifier: Programming Language :: Python :: 3.8
|
|
17
|
+
Classifier: Programming Language :: Python :: 3.9
|
|
18
|
+
Classifier: Programming Language :: Python :: 3.10
|
|
19
|
+
Classifier: Programming Language :: Python :: 3.11
|
|
20
|
+
Classifier: Programming Language :: JavaScript
|
|
21
|
+
Requires-Python: >=3.8
|
|
22
|
+
Description-Content-Type: text/markdown
|
|
23
|
+
Dynamic: author
|
|
24
|
+
Dynamic: home-page
|
|
25
|
+
Dynamic: requires-python
|
|
26
|
+
|
|
27
|
+
# SDUI Components Library - Python Package
|
|
28
|
+
|
|
29
|
+
The SDUI Components Library includes a comprehensive Python package that exposes core functionality of the TypeScript library. This allows Python developers to leverage SDUI features in server-side applications.
|
|
30
|
+
|
|
31
|
+
## Overview
|
|
32
|
+
|
|
33
|
+
The Python package is implemented as a wrapper around the TypeScript functionality, using Node.js CLI tools to perform the actual processing. This approach ensures complete feature parity between the TypeScript and Python implementations while maintaining optimal performance.
|
|
34
|
+
|
|
35
|
+
## Variant-Driven Architecture
|
|
36
|
+
|
|
37
|
+
The Python package now supports the new **variant-driven architecture** introduced in the TypeScript library. This architecture provides:
|
|
38
|
+
|
|
39
|
+
- **Consistent styling** through predefined variants instead of scattered style properties
|
|
40
|
+
- **Simplified component definitions** with focus on core functionality
|
|
41
|
+
- **Better maintainability** with centralized style management
|
|
42
|
+
- **28 available components** including the new `SduiFloatingButton` and `SduiGrid` components
|
|
43
|
+
|
|
44
|
+
### Key Changes in Variant-Driven System
|
|
45
|
+
|
|
46
|
+
1. **Component Properties**: Components now use variant properties (`variant`, `size`, etc.) instead of individual style properties
|
|
47
|
+
2. **Common Properties**: Reduced from 23 to 5 essential properties that are not handled by variants
|
|
48
|
+
3. **Style Management**: All styling is now managed through variant definitions
|
|
49
|
+
|
|
50
|
+
## Package Structure
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
python-package/
|
|
54
|
+
├── sdui_python/
|
|
55
|
+
│ └── __init__.py # Main package module with Python API
|
|
56
|
+
├── bin/
|
|
57
|
+
│ ├── component-cli.js # Component registry CLI tool
|
|
58
|
+
│ ├── type-check-cli.js # Type checker CLI tool
|
|
59
|
+
│ └── serialize-cli.js # AST serializer CLI tool
|
|
60
|
+
├── setup.py # Package setup script
|
|
61
|
+
├── pyproject.toml # Modern Python packaging config
|
|
62
|
+
├── requirements.txt # Dependencies
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Installation
|
|
66
|
+
|
|
67
|
+
### Prerequisites
|
|
68
|
+
|
|
69
|
+
- Python 3.8 or higher
|
|
70
|
+
- Node.js 16.0 or higher
|
|
71
|
+
- npm (Node Package Manager)
|
|
72
|
+
|
|
73
|
+
### Important Note
|
|
74
|
+
|
|
75
|
+
The Python package depends on the TypeScript library being built first. Before installing or using the Python package, you must build the TypeScript library:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
# From the project root directory
|
|
79
|
+
npm install
|
|
80
|
+
npm run build
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
This creates the necessary JavaScript modules in the `dist/` directory that the Python package's CLI tools depend on.
|
|
84
|
+
|
|
85
|
+
### Installation
|
|
86
|
+
|
|
87
|
+
The simplest way to install the SDUI Python package is directly from the GitHub repository:
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
pip install git+https://github.com/SuperKnowledge/sdui-components-library.git#subdirectory=python-package
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Note: This installation method requires Node.js and npm to be installed on your system, as the package depends on the TypeScript library components.
|
|
94
|
+
|
|
95
|
+
## Python API Reference
|
|
96
|
+
|
|
97
|
+
### Available Functions
|
|
98
|
+
|
|
99
|
+
The Python package exposes six main functions:
|
|
100
|
+
|
|
101
|
+
#### `get_available_components()`
|
|
102
|
+
Returns a list of all available SDUI component types with their properties and default values.
|
|
103
|
+
|
|
104
|
+
```python
|
|
105
|
+
from sdui_python import get_available_components
|
|
106
|
+
|
|
107
|
+
components = get_available_components()
|
|
108
|
+
print("Number of available components:", len(components))
|
|
109
|
+
print("First component:", components[0])
|
|
110
|
+
# Output: {'name': 'SduiApp', 'props': {'initialRoute': {'type': 'string'}, ...}}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
#### `validate_from_source(source_code)`
|
|
114
|
+
Validates a component source code string using auto-detection.
|
|
115
|
+
|
|
116
|
+
```python
|
|
117
|
+
from sdui_python import validate_from_source
|
|
118
|
+
|
|
119
|
+
source_code = """
|
|
120
|
+
function MyComponent() {
|
|
121
|
+
return <SduiText text="Hello World" />;
|
|
122
|
+
}
|
|
123
|
+
"""
|
|
124
|
+
result = validate_from_source(source_code)
|
|
125
|
+
print(result["isValid"])
|
|
126
|
+
# Output: True
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
#### `serialize_from_source(source_code)`
|
|
130
|
+
Serialize JSX source code to ComponentJSON.
|
|
131
|
+
|
|
132
|
+
```python
|
|
133
|
+
from sdui_python import serialize_from_source
|
|
134
|
+
|
|
135
|
+
source_code = """
|
|
136
|
+
function MyComponent() {
|
|
137
|
+
return <SduiText text="Hello World" font="headline" />;
|
|
138
|
+
}
|
|
139
|
+
"""
|
|
140
|
+
result = serialize_from_source(source_code)
|
|
141
|
+
print(result["type"])
|
|
142
|
+
# Output: "SduiText"
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
#### `validate_and_serialize(source_code)`
|
|
146
|
+
Validates a component source code string and then serializes it if valid.
|
|
147
|
+
|
|
148
|
+
```python
|
|
149
|
+
from sdui_python import validate_and_serialize
|
|
150
|
+
|
|
151
|
+
source_code = """
|
|
152
|
+
function MyComponent() {
|
|
153
|
+
return <SduiText text="Hello World" />;
|
|
154
|
+
}
|
|
155
|
+
"""
|
|
156
|
+
result = validate_and_serialize(source_code)
|
|
157
|
+
print(result["isValid"])
|
|
158
|
+
# Output: True
|
|
159
|
+
print(result["serialized"]["type"])
|
|
160
|
+
# Output: "SduiText"
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
#### `get_all_common_properties()`
|
|
164
|
+
Returns a dictionary of all common properties that can be applied to any component.
|
|
165
|
+
|
|
166
|
+
```python
|
|
167
|
+
from sdui_python import get_all_common_properties
|
|
168
|
+
|
|
169
|
+
common_properties = get_all_common_properties()
|
|
170
|
+
print("Number of common properties:", len(common_properties))
|
|
171
|
+
print("Frame property info:", common_properties["frame"])
|
|
172
|
+
# Output: {'type': "{ width?: number | 'ideal' | 'max'; height?: number | 'ideal' | 'max'; alignment?: string; }", 'description': 'SwiftUI .frame() modifier. Sets the width and height of the view.', 'optional': True}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
**Note**: In the variant-driven system, common properties have been reduced from 23 to 5 essential properties:
|
|
176
|
+
- `frame`: Layout control (width, height, alignment)
|
|
177
|
+
- `hidden`: Visibility control
|
|
178
|
+
- `accessibilityLabel`, `accessibilityHint`, `accessibilityValue`: Accessibility support
|
|
179
|
+
|
|
180
|
+
Style-related properties (colors, fonts, spacing, etc.) are now handled through component variants.
|
|
181
|
+
|
|
182
|
+
#### `get_all_themes()`
|
|
183
|
+
Returns a dictionary of supported themes with metadata.
|
|
184
|
+
|
|
185
|
+
```python
|
|
186
|
+
from sdui_python import get_all_themes
|
|
187
|
+
|
|
188
|
+
themes = get_all_themes()
|
|
189
|
+
print(themes["clean-slate"])
|
|
190
|
+
# Output:
|
|
191
|
+
# "clean, focused, modern utility; crisp blues on white/soft-gray keep it neutral and productive."
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
## Variant-Driven Components
|
|
195
|
+
|
|
196
|
+
The Python package now supports all 28 components with variant-driven styling. Here are some examples of the new components:
|
|
197
|
+
|
|
198
|
+
### SduiFloatingButton
|
|
199
|
+
A floating action button with position variants:
|
|
200
|
+
|
|
201
|
+
```python
|
|
202
|
+
import json
|
|
203
|
+
from sdui_python import get_available_components
|
|
204
|
+
|
|
205
|
+
# Check SduiFloatingButton properties
|
|
206
|
+
components = get_available_components()
|
|
207
|
+
floating_button = next(c for c in components if c['name'] == 'SduiFloatingButton')
|
|
208
|
+
print("SduiFloatingButton properties:")
|
|
209
|
+
for prop, info in floating_button['props'].items():
|
|
210
|
+
print(f" {prop}: {info}")
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### SduiGrid
|
|
214
|
+
A responsive grid layout component:
|
|
215
|
+
|
|
216
|
+
```python
|
|
217
|
+
# Example component JSON
|
|
218
|
+
grid_component = {
|
|
219
|
+
"type": "SduiGrid",
|
|
220
|
+
"props": {
|
|
221
|
+
"variant": "default",
|
|
222
|
+
"columnCount": 2,
|
|
223
|
+
"minimumItemWidth": 200
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
# Validate using CLI tool
|
|
228
|
+
import subprocess
|
|
229
|
+
import json
|
|
230
|
+
|
|
231
|
+
result = subprocess.run([
|
|
232
|
+
'node', 'bin/component-cli.js', '--validate-structure'
|
|
233
|
+
], input=json.dumps(grid_component), capture_output=True, text=True)
|
|
234
|
+
validation_result = json.loads(result.stdout)
|
|
235
|
+
print(f"Grid component valid: {validation_result['isValid']}")
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### Component Variants
|
|
239
|
+
|
|
240
|
+
Each component supports different variants for styling:
|
|
241
|
+
|
|
242
|
+
```python
|
|
243
|
+
# Example: Button variants
|
|
244
|
+
button_variants = {
|
|
245
|
+
"type": "SduiButton",
|
|
246
|
+
"props": {
|
|
247
|
+
"text": "Click me",
|
|
248
|
+
"variant": "primary", # Options: default, destructive, outline, secondary, ghost, link, icon
|
|
249
|
+
"size": "large" # Options: default, sm, lg, icon
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
## CLI Tools
|
|
255
|
+
|
|
256
|
+
The Python package uses three Node.js CLI tools under the hood:
|
|
257
|
+
|
|
258
|
+
### component-cli.js
|
|
259
|
+
Handles component registry functions:
|
|
260
|
+
- `--available`: Returns list of available components with their properties
|
|
261
|
+
- `--validate-structure`: Validates component structure (JSON via stdin)
|
|
262
|
+
- `--common-properties`: Returns all common properties
|
|
263
|
+
- `--themes`: Returns supported themes with metadata
|
|
264
|
+
|
|
265
|
+
### type-check-cli.js
|
|
266
|
+
Handles type checking functions:
|
|
267
|
+
- `--component`: Validates component JSON (JSON via stdin)
|
|
268
|
+
|
|
269
|
+
### serialize-cli.js
|
|
270
|
+
Handles serialization functions:
|
|
271
|
+
- `--source`: Serializes JSX source code (code via stdin)
|
|
272
|
+
|
|
273
|
+
## Usage Examples
|
|
274
|
+
|
|
275
|
+
### Basic Usage
|
|
276
|
+
|
|
277
|
+
```python
|
|
278
|
+
from sdui_python import (
|
|
279
|
+
get_available_components,
|
|
280
|
+
validate_from_source,
|
|
281
|
+
serialize_from_source,
|
|
282
|
+
get_all_common_properties
|
|
283
|
+
)
|
|
284
|
+
|
|
285
|
+
# Get available components with their properties and default values
|
|
286
|
+
components = get_available_components()
|
|
287
|
+
print("Number of available components:", len(components))
|
|
288
|
+
print("First component:", components[0])
|
|
289
|
+
|
|
290
|
+
# Validate component structure
|
|
291
|
+
component = """
|
|
292
|
+
function MyComponent() {
|
|
293
|
+
return <SduiText text="Hello World" />;
|
|
294
|
+
}
|
|
295
|
+
"""
|
|
296
|
+
result = validate_from_source(component)
|
|
297
|
+
print("Component structure valid?", result["isValid"])
|
|
298
|
+
|
|
299
|
+
# Serialize JSX source code with variant-driven styling
|
|
300
|
+
jsx_code = """
|
|
301
|
+
function MyComponent() {
|
|
302
|
+
return <SduiText text="Hello World" variant="h1" />;
|
|
303
|
+
}
|
|
304
|
+
"""
|
|
305
|
+
result = serialize_from_source(jsx_code)
|
|
306
|
+
print("Serialized component type:", result["type"])
|
|
307
|
+
|
|
308
|
+
# Get all common properties
|
|
309
|
+
common_properties = get_all_common_properties()
|
|
310
|
+
print("Number of common properties:", len(common_properties))
|
|
311
|
+
print("Frame property:", common_properties["frame"])
|
|
312
|
+
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### Component Operations
|
|
316
|
+
|
|
317
|
+
```python
|
|
318
|
+
from sdui_python import (
|
|
319
|
+
get_available_components,
|
|
320
|
+
validate_from_source
|
|
321
|
+
)
|
|
322
|
+
|
|
323
|
+
def demonstrate_component_operations():
|
|
324
|
+
"""Demonstrate component operations"""
|
|
325
|
+
# Get all available components
|
|
326
|
+
components = get_available_components()
|
|
327
|
+
print(f"Found {len(components)} components")
|
|
328
|
+
|
|
329
|
+
# Show details of first few components
|
|
330
|
+
print("First 3 components:")
|
|
331
|
+
for i, component in enumerate(components[:3]):
|
|
332
|
+
print(f" {i+1}. {component['name']}")
|
|
333
|
+
print(f" Props: {list(component['props'].keys())}")
|
|
334
|
+
# Show properties with their types and default values
|
|
335
|
+
for prop_name, prop_info in component['props'].items():
|
|
336
|
+
print(f" {prop_name}: {prop_info['type']}")
|
|
337
|
+
if 'defaultValue' in prop_info:
|
|
338
|
+
print(f" Default: {prop_info['defaultValue']}")
|
|
339
|
+
|
|
340
|
+
# Validate component structure
|
|
341
|
+
print("\nComponent structure validation:")
|
|
342
|
+
valid_component = """
|
|
343
|
+
function MyComponent() {
|
|
344
|
+
return <SduiText text=\"Hello World\" />;
|
|
345
|
+
}
|
|
346
|
+
"""
|
|
347
|
+
result = validate_from_source(valid_component)
|
|
348
|
+
print(f"Valid component structure: {result['isValid']}")
|
|
349
|
+
print(f"Errors: {result['errors']}")
|
|
350
|
+
|
|
351
|
+
invalid_component = """
|
|
352
|
+
function MyComponent() {
|
|
353
|
+
return <SduiText />;
|
|
354
|
+
}
|
|
355
|
+
"""
|
|
356
|
+
result = validate_from_source(invalid_component)
|
|
357
|
+
print(f"Invalid component structure: {result['isValid']}")
|
|
358
|
+
print(f"Errors: {result['errors']}")
|
|
359
|
+
|
|
360
|
+
demonstrate_component_operations()
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
### Serialization Examples
|
|
364
|
+
|
|
365
|
+
```python
|
|
366
|
+
from sdui_python import serialize_from_source
|
|
367
|
+
|
|
368
|
+
def demonstrate_serialization():
|
|
369
|
+
"""Demonstrate serialization capabilities"""
|
|
370
|
+
# Serialize simple component
|
|
371
|
+
print("1. Serializing a simple component:")
|
|
372
|
+
source_code = """
|
|
373
|
+
function MyComponent() {
|
|
374
|
+
return <SduiText text="Hello World" font="headline" />;
|
|
375
|
+
}
|
|
376
|
+
"""
|
|
377
|
+
result = serialize_from_source(source_code)
|
|
378
|
+
if result:
|
|
379
|
+
print(f" Serialized type: {result['type']}")
|
|
380
|
+
print(f" Text prop: {result['props']['text']}")
|
|
381
|
+
print(f" Font prop: {result['props']['font']}")
|
|
382
|
+
else:
|
|
383
|
+
print(" Failed to serialize component")
|
|
384
|
+
|
|
385
|
+
# Serialize complex component
|
|
386
|
+
print("\n2. Serializing a complex component:")
|
|
387
|
+
complex_component = """
|
|
388
|
+
function ComplexComponent() {
|
|
389
|
+
return (
|
|
390
|
+
<SduiVStack spacing={16}>
|
|
391
|
+
<SduiText text="Welcome" variant="h1" />
|
|
392
|
+
<SduiHStack spacing={8}>
|
|
393
|
+
<SduiButton text="Save" variant="default" />
|
|
394
|
+
<SduiButton text="Cancel" variant="outline" />
|
|
395
|
+
</SduiHStack>
|
|
396
|
+
</SduiVStack>
|
|
397
|
+
);
|
|
398
|
+
}
|
|
399
|
+
"""
|
|
400
|
+
|
|
401
|
+
result = serialize_from_source(complex_component)
|
|
402
|
+
if result:
|
|
403
|
+
print(f" Root component type: {result['type']}")
|
|
404
|
+
print(f" Root component props: {result['props']}")
|
|
405
|
+
if 'children' in result and result['children']:
|
|
406
|
+
print(f" Number of children: {len(result['children'])}")
|
|
407
|
+
for i, child in enumerate(result['children']):
|
|
408
|
+
print(f" Child {i+1}: {child['type']}")
|
|
409
|
+
else:
|
|
410
|
+
print(" Failed to serialize component")
|
|
411
|
+
|
|
412
|
+
demonstrate_serialization()
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
### Integration with Server-Side Applications
|
|
416
|
+
|
|
417
|
+
```python
|
|
418
|
+
import json
|
|
419
|
+
from sdui_python import serialize_from_source, validate_from_source
|
|
420
|
+
|
|
421
|
+
def process_sdui_component(jsx_code):
|
|
422
|
+
"""
|
|
423
|
+
Process SDUI JSX code and return validated JSON
|
|
424
|
+
"""
|
|
425
|
+
# Serialize the JSX code
|
|
426
|
+
component_json = serialize_from_source(jsx_code)
|
|
427
|
+
|
|
428
|
+
if component_json is None:
|
|
429
|
+
return {"error": "Failed to serialize component"}
|
|
430
|
+
|
|
431
|
+
# Validate the component structure
|
|
432
|
+
validation_result = validate_from_source(jsx_code)
|
|
433
|
+
|
|
434
|
+
if not validation_result["isValid"]:
|
|
435
|
+
return {"error": "Invalid component", "details": validation_result["errors"]}
|
|
436
|
+
|
|
437
|
+
return {"component": component_json}
|
|
438
|
+
|
|
439
|
+
# Example usage
|
|
440
|
+
jsx_code = """
|
|
441
|
+
function WelcomeComponent() {
|
|
442
|
+
return (
|
|
443
|
+
<SduiVStack spacing={16}>
|
|
444
|
+
<SduiText text="Welcome to SDUI!" variant="h1" />
|
|
445
|
+
<SduiButton text="Get Started" variant="default" size="lg" />
|
|
446
|
+
</SduiVStack>
|
|
447
|
+
);
|
|
448
|
+
}
|
|
449
|
+
"""
|
|
450
|
+
|
|
451
|
+
result = process_sdui_component(jsx_code)
|
|
452
|
+
if "error" in result:
|
|
453
|
+
print("Error:", result["error"])
|
|
454
|
+
else:
|
|
455
|
+
print("Component processed successfully!")
|
|
456
|
+
print("Type:", result["component"]["type"])
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
### Error Handling
|
|
460
|
+
|
|
461
|
+
```python
|
|
462
|
+
from sdui_python import validate_from_source, validate_and_serialize
|
|
463
|
+
|
|
464
|
+
def safe_validate_component(source_code):
|
|
465
|
+
"""
|
|
466
|
+
Safely validate a component with proper error handling
|
|
467
|
+
"""
|
|
468
|
+
try:
|
|
469
|
+
# Validate structure
|
|
470
|
+
structure_result = validate_from_source(source_code)
|
|
471
|
+
if not structure_result["isValid"]:
|
|
472
|
+
return {"error": "Invalid structure", "details": structure_result["errors"]}
|
|
473
|
+
|
|
474
|
+
return {
|
|
475
|
+
"isValid": structure_result["isValid"],
|
|
476
|
+
"errors": structure_result["errors"]
|
|
477
|
+
}
|
|
478
|
+
except Exception as e:
|
|
479
|
+
return {"error": f"Validation failed: {str(e)}"}
|
|
480
|
+
|
|
481
|
+
# Test with valid component
|
|
482
|
+
valid_component = """
|
|
483
|
+
function MyComponent() {
|
|
484
|
+
return <SduiText text="Hello World" />;
|
|
485
|
+
}
|
|
486
|
+
"""
|
|
487
|
+
|
|
488
|
+
result = safe_validate_component(valid_component)
|
|
489
|
+
print("Valid component result:", result)
|
|
490
|
+
|
|
491
|
+
# Test with invalid component
|
|
492
|
+
invalid_component = """
|
|
493
|
+
function MyComponent() {
|
|
494
|
+
return <SduiText />;
|
|
495
|
+
}
|
|
496
|
+
"""
|
|
497
|
+
|
|
498
|
+
result = safe_validate_component(invalid_component)
|
|
499
|
+
print("Invalid component result:", result)
|
|
500
|
+
|
|
501
|
+
# Test validate_and_serialize with valid component
|
|
502
|
+
result = validate_and_serialize(valid_component)
|
|
503
|
+
print("Validate and serialize result:", result)
|
|
504
|
+
|
|
505
|
+
# Test validate_and_serialize with invalid component
|
|
506
|
+
result = validate_and_serialize(invalid_component)
|
|
507
|
+
print("Invalid validate and serialize result:", result)
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
### Variant-Driven Examples
|
|
511
|
+
|
|
512
|
+
Here are examples showing how to work with the new variant-driven system:
|
|
513
|
+
|
|
514
|
+
#### Working with Button Variants
|
|
515
|
+
```python
|
|
516
|
+
import json
|
|
517
|
+
from sdui_python import get_available_components
|
|
518
|
+
|
|
519
|
+
# Get button component info
|
|
520
|
+
components = get_available_components()
|
|
521
|
+
button = next(c for c in components if c['name'] == 'SduiButton')
|
|
522
|
+
|
|
523
|
+
print("Button variants available:")
|
|
524
|
+
if 'variant' in button['props']:
|
|
525
|
+
print(f" Variant options: {button['props']['variant']['enumValues']}")
|
|
526
|
+
if 'size' in button['props']:
|
|
527
|
+
print(f" Size options: {button['props']['size']['enumValues']}")
|
|
528
|
+
|
|
529
|
+
# Create buttons with different variants
|
|
530
|
+
primary_button = {
|
|
531
|
+
"type": "SduiButton",
|
|
532
|
+
"props": {
|
|
533
|
+
"text": "Primary Action",
|
|
534
|
+
"variant": "default",
|
|
535
|
+
"size": "lg"
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
secondary_button = {
|
|
540
|
+
"type": "SduiButton",
|
|
541
|
+
"props": {
|
|
542
|
+
"text": "Secondary Action",
|
|
543
|
+
"variant": "outline",
|
|
544
|
+
"size": "sm"
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
# Validate using CLI tool
|
|
549
|
+
import subprocess
|
|
550
|
+
|
|
551
|
+
for button in [primary_button, secondary_button]:
|
|
552
|
+
result = subprocess.run([
|
|
553
|
+
'node', 'bin/component-cli.js', '--validate-structure'
|
|
554
|
+
], input=json.dumps(button), capture_output=True, text=True)
|
|
555
|
+
validation_result = json.loads(result.stdout)
|
|
556
|
+
print(f"Button '{button['props']['text']}' valid: {validation_result['isValid']}")
|
|
557
|
+
```
|
|
558
|
+
|
|
559
|
+
#### Working with Text Variants
|
|
560
|
+
```python
|
|
561
|
+
# Different text variants
|
|
562
|
+
text_variants = [
|
|
563
|
+
{"type": "SduiText", "props": {"text": "Heading 1", "variant": "h1"}},
|
|
564
|
+
{"type": "SduiText", "props": {"text": "Heading 2", "variant": "h2"}},
|
|
565
|
+
{"type": "SduiText", "props": {"text": "Body text", "variant": "p"}},
|
|
566
|
+
{"type": "SduiText", "props": {"text": "Quote", "variant": "blockquote"}},
|
|
567
|
+
{"type": "SduiText", "props": {"text": "Code sample", "variant": "code"}}
|
|
568
|
+
]
|
|
569
|
+
|
|
570
|
+
# Validate all text variants
|
|
571
|
+
for text_component in text_variants:
|
|
572
|
+
result = subprocess.run([
|
|
573
|
+
'node', 'bin/component-cli.js', '--validate-structure'
|
|
574
|
+
], input=json.dumps(text_component), capture_output=True, text=True)
|
|
575
|
+
validation_result = json.loads(result.stdout)
|
|
576
|
+
print(f"Text '{text_component['props']['text']}' with variant '{text_component['props']['variant']}' valid: {validation_result['isValid']}")
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
#### Working with New Components
|
|
580
|
+
```python
|
|
581
|
+
# SduiFloatingButton example
|
|
582
|
+
floating_button = {
|
|
583
|
+
"type": "SduiFloatingButton",
|
|
584
|
+
"props": {
|
|
585
|
+
"icon": "plus",
|
|
586
|
+
"variant": "default",
|
|
587
|
+
"size": "lg",
|
|
588
|
+
"floatingVariant": "bottomRight"
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
# SduiGrid example
|
|
593
|
+
grid_component = {
|
|
594
|
+
"type": "SduiGrid",
|
|
595
|
+
"props": {
|
|
596
|
+
"variant": "default",
|
|
597
|
+
"columnCount": 3,
|
|
598
|
+
"minimumItemWidth": 200
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
# Validate new components
|
|
603
|
+
for component in [floating_button, grid_component]:
|
|
604
|
+
result = subprocess.run([
|
|
605
|
+
'node', 'bin/component-cli.js', '--validate-structure'
|
|
606
|
+
], input=json.dumps(component), capture_output=True, text=True)
|
|
607
|
+
validation_result = json.loads(result.stdout)
|
|
608
|
+
print(f"Component '{component['type']}' valid: {validation_result['isValid']}")
|
|
609
|
+
if not validation_result['isValid']:
|
|
610
|
+
print(f" Errors: {validation_result['errors']}")
|
|
611
|
+
```
|
|
612
|
+
|
|
613
|
+
These examples demonstrate the core functionality of the SDUI Python package and how it can be integrated into server-side applications for processing SDUI components.
|
|
614
|
+
|
|
615
|
+
## Requirements
|
|
616
|
+
|
|
617
|
+
### Runtime Requirements
|
|
618
|
+
- Python 3.8 or higher
|
|
619
|
+
- Node.js 16.0 or higher
|
|
620
|
+
- npm 7.0 or higher
|
|
621
|
+
|
|
622
|
+
### No Additional Python Dependencies
|
|
623
|
+
The package uses only the Python standard library, making it lightweight and easy to install.
|
|
624
|
+
|
|
625
|
+
## Error Handling
|
|
626
|
+
|
|
627
|
+
The Python package provides comprehensive error handling:
|
|
628
|
+
|
|
629
|
+
```python
|
|
630
|
+
from sdui_python import get_available_components, validate_from_source
|
|
631
|
+
|
|
632
|
+
try:
|
|
633
|
+
# This will work fine
|
|
634
|
+
components = get_available_components()
|
|
635
|
+
print(f"Found {len(components)} components")
|
|
636
|
+
|
|
637
|
+
# This might raise an exception if Node.js is not available
|
|
638
|
+
component = """
|
|
639
|
+
function MyComponent() {
|
|
640
|
+
return <SduiText text="Hello" />;
|
|
641
|
+
}
|
|
642
|
+
"""
|
|
643
|
+
result = validate_from_source(component)
|
|
644
|
+
print(f"Validation result: {result['isValid']}")
|
|
645
|
+
|
|
646
|
+
except Exception as e:
|
|
647
|
+
print(f"An error occurred: {e}")
|
|
648
|
+
```
|
|
649
|
+
|
|
650
|
+
## Integration with Server-Side Applications
|
|
651
|
+
|
|
652
|
+
The Python package is designed for server-side usage in web applications:
|
|
653
|
+
|
|
654
|
+
```python
|
|
655
|
+
from sdui_python import serialize_from_source, validate_from_source
|
|
656
|
+
from flask import Flask, request, jsonify
|
|
657
|
+
|
|
658
|
+
app = Flask(__name__)
|
|
659
|
+
|
|
660
|
+
@app.route('/process-component', methods=['POST'])
|
|
661
|
+
def process_component():
|
|
662
|
+
jsx_code = request.json.get('code')
|
|
663
|
+
|
|
664
|
+
if not jsx_code:
|
|
665
|
+
return jsonify({"error": "No code provided"}), 400
|
|
666
|
+
|
|
667
|
+
try:
|
|
668
|
+
# Validate the component source code first
|
|
669
|
+
validation = validate_from_source(jsx_code)
|
|
670
|
+
|
|
671
|
+
if not validation["isValid"]:
|
|
672
|
+
return jsonify({
|
|
673
|
+
"error": "Invalid component source code",
|
|
674
|
+
"details": validation["errors"]
|
|
675
|
+
}), 400
|
|
676
|
+
|
|
677
|
+
# Serialize the component after validation
|
|
678
|
+
component = serialize_from_source(jsx_code)
|
|
679
|
+
|
|
680
|
+
if component is None:
|
|
681
|
+
return jsonify({"error": "Failed to serialize component"}), 400
|
|
682
|
+
|
|
683
|
+
return jsonify({
|
|
684
|
+
"component": component,
|
|
685
|
+
"validation": validation
|
|
686
|
+
})
|
|
687
|
+
|
|
688
|
+
except Exception as e:
|
|
689
|
+
return jsonify({"error": str(e)}), 500
|
|
690
|
+
|
|
691
|
+
if __name__ == '__main__':
|
|
692
|
+
app.run(debug=True)
|
|
693
|
+
```
|