appkit-ui 0.7.6__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.
@@ -0,0 +1,114 @@
1
+ __pycache__/
2
+ __pypackages__/
3
+ .cache
4
+ .coverage
5
+ .coverage.*
6
+ .dmypy.json
7
+ .DS_Store
8
+ .eggs/
9
+ .env
10
+ .env.backup
11
+ .env.docker
12
+ .hypothesis/
13
+ .idea/
14
+ .installed.cfg
15
+ .ipynb_checkpoints
16
+ .mypy_cache/
17
+ .nox/
18
+ .pdm.toml
19
+ .pybuilder/
20
+ .pyre/
21
+ .pytest_cache/
22
+ .Python
23
+ .python_packages
24
+ .pytype/
25
+ .ropeproject
26
+ .scrapy
27
+ .spyderproject
28
+ .spyproject
29
+ .states
30
+ .tox/
31
+ .venv
32
+ .venv.mac
33
+ .web
34
+ .webassets-cache
35
+ *.bak
36
+ *.cover
37
+ *.db
38
+ *.egg
39
+ *.egg-info/
40
+ *.kv-env.*
41
+ *.log
42
+ *.manifest
43
+ *.mo
44
+ *.pot
45
+ *.py,cover
46
+ *.py[cod]
47
+ *.sage.py
48
+ *.so
49
+ *.spec
50
+ *.terraform.lock.hcl
51
+ *.tfplan
52
+ *.tfstate
53
+ *.tfstate.*.backup
54
+ *.tfstate.backup
55
+ *.tfvars
56
+ **/.terraform/*
57
+ *$py.class
58
+ /site
59
+ /vectorstore/
60
+ aila-storage/
61
+ assets/external/
62
+ build/
63
+ celerybeat-schedule
64
+ celerybeat.pid
65
+ configuration/config.abaz009.yaml
66
+ configuration/config.bubb001.yaml
67
+ configuration/config.stie104.yaml
68
+ configuration/config.voro047.yaml
69
+ connector examples/sharepoint.json
70
+ cover/
71
+ coverage.xml
72
+ cython_debug/
73
+ db.sqlite3
74
+ db.sqlite3-journal
75
+ develop-eggs/
76
+ dist/
77
+ dmypy.json
78
+ docs/_build/
79
+ Documents/
80
+ downloads/
81
+ eggs/
82
+ env.bak/
83
+ env/
84
+ ENV/
85
+ htmlcov/
86
+ instance/
87
+ ipython_config.py
88
+ knowledge/migrate.py
89
+ lib/
90
+ lib64/
91
+ local_settings.py
92
+ local.settings.json
93
+ MANIFEST
94
+ nosetests.xml
95
+ out
96
+ parts/
97
+ pip-delete-this-directory.txt
98
+ pip-log.txt
99
+ Pipfile
100
+ profile_default/
101
+ sdist/
102
+ share/python-wheels/
103
+ sketchpad/
104
+ sketchpad/
105
+ stores/
106
+ target/
107
+ tests/mcp_test.py
108
+ tmp.txt
109
+ uploaded_files/
110
+ uploads/
111
+ var/
112
+ venv.bak/
113
+ venv/
114
+ wheels/
@@ -0,0 +1,530 @@
1
+ Metadata-Version: 2.4
2
+ Name: appkit-ui
3
+ Version: 0.7.6
4
+ Summary: Add your description here
5
+ Project-URL: Homepage, https://github.com/jenreh/appkit
6
+ Project-URL: Documentation, https://github.com/jenreh/appkit/tree/main/docs
7
+ Project-URL: Repository, https://github.com/jenreh/appkit
8
+ Project-URL: Issues, https://github.com/jenreh/appkit/issues
9
+ Author: Jens Rehpöhler
10
+ Keywords: components,mantine,reflex,ui,web
11
+ Classifier: Intended Audience :: Developers
12
+ Classifier: License :: OSI Approved :: MIT License
13
+ Classifier: Programming Language :: Python :: 3
14
+ Classifier: Programming Language :: Python :: 3.13
15
+ Classifier: Topic :: Software Development :: Libraries :: Python Modules
16
+ Classifier: Topic :: Software Development :: User Interfaces
17
+ Requires-Python: >=3.13
18
+ Requires-Dist: appkit-mantine
19
+ Requires-Dist: reflex>=0.8.20
20
+ Description-Content-Type: text/markdown
21
+
22
+ # appkit-ui
23
+
24
+ [![Python 3.13+](https://img.shields.io/badge/python-3.13+-blue.svg)](https://www.python.org/downloads/)
25
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
26
+
27
+ **Shared UI components and layouts for AppKit applications.**
28
+
29
+ appkit-ui provides a collection of reusable UI components, layouts, and styling utilities designed to create consistent, professional interfaces across AppKit applications. It includes responsive page templates, navigation components, form helpers, and common UI patterns built on Reflex and Mantine.
30
+
31
+ ---
32
+
33
+ ## ✨ Features
34
+
35
+ - **Layout Components** - Responsive page templates and navigation headers
36
+ - **Form Helpers** - Pre-built form inputs with validation and styling
37
+ - **Dialog Components** - Confirmation dialogs and modal interfaces
38
+ - **Rich Text Editor** - Full-featured WYSIWYG editor based on SunEditor
39
+ - **Collapsible Sections** - Expandable/collapsible content areas
40
+ - **Global State Management** - Shared state for loading indicators and UI feedback
41
+ - **Styling Utilities** - Consistent themes, colors, and CSS utilities
42
+ - **Responsive Design** - Mobile-first components that work across all screen sizes
43
+
44
+ ---
45
+
46
+ ## 🚀 Installation
47
+
48
+ ### As Part of AppKit Workspace
49
+
50
+ If you're using the full AppKit workspace:
51
+
52
+ ```bash
53
+ git clone https://github.com/jenreh/appkit.git
54
+ cd appkit
55
+ uv sync
56
+ ```
57
+
58
+ ### Standalone Installation
59
+
60
+ Install from PyPI:
61
+
62
+ ```bash
63
+ pip install appkit-ui
64
+ ```
65
+
66
+ Or with uv:
67
+
68
+ ```bash
69
+ uv add appkit-ui
70
+ ```
71
+
72
+ ### Dependencies
73
+
74
+ - `appkit-commons` (shared utilities)
75
+ - `reflex>=0.8.12` (UI framework)
76
+
77
+ ---
78
+
79
+ ## 🏁 Quick Start
80
+
81
+ ### Basic Layout
82
+
83
+ Create a responsive page layout with header:
84
+
85
+ ```python
86
+ import reflex as rx
87
+ import appkit_ui as ui
88
+
89
+ def my_page():
90
+ return rx.vstack(
91
+ ui.header("My Application"),
92
+ rx.container(
93
+ rx.text("Welcome to my app!"),
94
+ max_width="800px",
95
+ padding="2em"
96
+ ),
97
+ spacing="0",
98
+ min_height="100vh"
99
+ )
100
+ ```
101
+
102
+ ### Using Form Components
103
+
104
+ Add styled form inputs:
105
+
106
+ ```python
107
+ from appkit_ui.components.form_inputs import inline_form_field
108
+
109
+ def contact_form():
110
+ return rx.form(
111
+ inline_form_field(
112
+ icon="user",
113
+ label="Name",
114
+ placeholder="Enter your name",
115
+ required=True
116
+ ),
117
+ inline_form_field(
118
+ icon="mail",
119
+ label="Email",
120
+ type="email",
121
+ placeholder="Enter your email"
122
+ ),
123
+ rx.button("Submit", type="submit")
124
+ )
125
+ ```
126
+
127
+ ### Rich Text Editor
128
+
129
+ Add a WYSIWYG editor to your page:
130
+
131
+ ```python
132
+ from appkit_ui.components import editor
133
+
134
+ def blog_editor():
135
+ return editor(
136
+ placeholder="Write your blog post...",
137
+ button_list=editor.EditorButtonList.COMPLEX,
138
+ height="400px"
139
+ )
140
+ ```
141
+
142
+ ---
143
+
144
+ ## 📖 Usage
145
+
146
+ ### Layout Components
147
+
148
+ #### Header
149
+
150
+ Create a fixed header with responsive design:
151
+
152
+ ```python
153
+ from appkit_ui.components.header import header
154
+
155
+ # Basic header
156
+ header("Application Title")
157
+
158
+ # Indented header (for sidebar layouts)
159
+ header("Dashboard", indent=True)
160
+ ```
161
+
162
+ #### Styles and Themes
163
+
164
+ Apply consistent styling:
165
+
166
+ ```python
167
+ import appkit_ui.styles as styles
168
+
169
+ def styled_page():
170
+ return rx.box(
171
+ rx.text("Content"),
172
+ **styles.splash_container # Gradient background
173
+ )
174
+ ```
175
+
176
+ ### Form Components
177
+
178
+ #### Inline Form Fields
179
+
180
+ Create labeled form inputs with icons:
181
+
182
+ ```python
183
+ from appkit_ui.components.form_inputs import inline_form_field
184
+
185
+ # Text input
186
+ inline_form_field(
187
+ icon="user",
188
+ label="Username",
189
+ placeholder="Enter username",
190
+ min_length=3,
191
+ max_length=50
192
+ )
193
+
194
+ # Email input
195
+ inline_form_field(
196
+ icon="mail",
197
+ label="Email",
198
+ type="email",
199
+ required=True
200
+ )
201
+
202
+ # Password input
203
+ inline_form_field(
204
+ icon="lock",
205
+ label="Password",
206
+ type="password",
207
+ hint="Must be at least 8 characters"
208
+ )
209
+ ```
210
+
211
+ #### Hidden Fields
212
+
213
+ Add hidden form data:
214
+
215
+ ```python
216
+ from appkit_ui.components.form_inputs import hidden_field
217
+
218
+ hidden_field(name="csrf_token", value="abc123")
219
+ ```
220
+
221
+ ### Dialog Components
222
+
223
+ #### Delete Confirmation Dialog
224
+
225
+ Create a confirmation dialog for destructive actions:
226
+
227
+ ```python
228
+ from appkit_ui.components.dialogs import delete_dialog
229
+
230
+ def user_management():
231
+ return rx.vstack(
232
+ delete_dialog(
233
+ title="Delete User",
234
+ content="user@example.com",
235
+ on_click=lambda: print("User deleted")
236
+ ),
237
+ # Other user management UI
238
+ )
239
+ ```
240
+
241
+ ### Editor Component
242
+
243
+ #### Rich Text Editor
244
+
245
+ Configure the editor with different button sets:
246
+
247
+ ```python
248
+ from appkit_ui.components import editor
249
+
250
+ # Basic editor
251
+ editor(placeholder="Enter text...")
252
+
253
+ # Full-featured editor
254
+ editor(
255
+ button_list=editor.EditorButtonList.COMPLEX,
256
+ height="500px",
257
+ placeholder="Write your content...",
258
+ on_change=lambda value: print(f"Content: {value}")
259
+ )
260
+ ```
261
+
262
+ #### Editor Options
263
+
264
+ Customize editor behavior:
265
+
266
+ ```python
267
+ from appkit_ui.components.editor import EditorOptions
268
+
269
+ custom_options = EditorOptions(
270
+ height="400px",
271
+ placeholder="Custom placeholder...",
272
+ button_list=[
273
+ ["bold", "italic"],
274
+ ["link", "image"],
275
+ ["undo", "redo"]
276
+ ]
277
+ )
278
+
279
+ editor(options=custom_options)
280
+ ```
281
+
282
+ ### Collapsible Components
283
+
284
+ #### Collapsible Sections
285
+
286
+ Create expandable content areas:
287
+
288
+ ```python
289
+ from appkit_ui.components import collabsible
290
+
291
+ def settings_page():
292
+ return rx.vstack(
293
+ collabsible(
294
+ rx.text("Account settings content..."),
295
+ title="Account Settings",
296
+ info_text="Configure your account",
297
+ expanded=True
298
+ ),
299
+ collabsible(
300
+ rx.text("Notification settings content..."),
301
+ title="Notifications",
302
+ info_text="Manage email preferences"
303
+ )
304
+ )
305
+ ```
306
+
307
+ ### Global State
308
+
309
+ #### Loading State
310
+
311
+ Manage loading indicators across your app:
312
+
313
+ ```python
314
+ from appkit_ui.global_states import LoadingState
315
+
316
+ class MyState(LoadingState):
317
+ def load_data(self):
318
+ self.set_is_loading(True)
319
+ # Simulate async operation
320
+ await asyncio.sleep(2)
321
+ self.set_is_loading(False)
322
+
323
+ def loading_component():
324
+ return rx.cond(
325
+ LoadingState.is_loading,
326
+ rx.text(LoadingState.is_loading_message),
327
+ rx.text("Content loaded")
328
+ )
329
+ ```
330
+
331
+ ---
332
+
333
+ ## 🔧 Configuration
334
+
335
+ ### Editor Configuration
336
+
337
+ Customize the rich text editor:
338
+
339
+ ```python
340
+ from appkit_ui.components.editor import EditorOptions
341
+
342
+ options = EditorOptions(
343
+ mode="classic", # or "inline", "balloon"
344
+ height="300px",
345
+ min_height="200px",
346
+ max_height="600px",
347
+ placeholder="Start writing...",
348
+ button_list=editor.EditorButtonList.FORMATTING,
349
+ font_size: ["8px", "10px", "12px", "14px", "16px", "18px", "20px"],
350
+ color_list: ["#ff0000", "#00ff00", "#0000ff"],
351
+ # Additional SunEditor options...
352
+ )
353
+ ```
354
+
355
+ ### Styling Customization
356
+
357
+ Override default styles:
358
+
359
+ ```python
360
+ import appkit_ui.styles as styles
361
+
362
+ # Custom dialog styles
363
+ custom_dialog_styles = {
364
+ **styles.dialog_styles,
365
+ "border_radius": "15px",
366
+ "box_shadow": "0 10px 25px rgba(0,0,0,0.1)"
367
+ }
368
+ ```
369
+
370
+ ---
371
+
372
+ ## 📋 API Reference
373
+
374
+ ### Component API
375
+
376
+ #### Layout API
377
+
378
+ - `header()` - Fixed page header with responsive design
379
+
380
+ #### Form API
381
+
382
+ - `inline_form_field()` - Labeled form input with icon and validation
383
+ - `hidden_field()` - Hidden form input field
384
+
385
+ #### Dialog API
386
+
387
+ - `delete_dialog()` - Confirmation dialog for delete operations
388
+
389
+ #### Editor API
390
+
391
+ - `editor()` - Rich text WYSIWYG editor
392
+ - `EditorButtonList` - Predefined button configurations (BASIC, FORMATTING, COMPLEX)
393
+ - `EditorOptions` - Editor configuration options
394
+
395
+ #### Utility API
396
+
397
+ - `collabsible()` - Expandable/collapsible content sections
398
+
399
+ #### State API
400
+
401
+ - `LoadingState` - Global loading state with message support
402
+
403
+ #### Style API
404
+
405
+ - `splash_container` - Gradient background styles
406
+ - `dialog_styles` - Dialog component styling
407
+ - `label_styles` - Form label styling
408
+
409
+ ---
410
+
411
+ ## 🔒 Security
412
+
413
+ > [!IMPORTANT]
414
+ > Form components include basic client-side validation, but always implement server-side validation for security.
415
+
416
+ - Input sanitization for editor content
417
+ - CSRF protection support through hidden fields
418
+ - Secure handling of form data
419
+
420
+ ---
421
+
422
+ ## 🤝 Integration Examples
423
+
424
+ ### With AppKit Components
425
+
426
+ Combine with other AppKit packages:
427
+
428
+ ```python
429
+ import reflex as rx
430
+ import appkit_ui as ui
431
+ import appkit_mantine as mn
432
+ import appkit_user as user
433
+
434
+ def dashboard():
435
+ return rx.vstack(
436
+ ui.header("Dashboard", indent=True),
437
+ rx.hstack(
438
+ # Sidebar navigation
439
+ mn.sidebar(),
440
+ # Main content
441
+ rx.container(
442
+ ui.collabsible(
443
+ mn.data_table(), # From appkit-mantine
444
+ title="User Data",
445
+ expanded=True
446
+ ),
447
+ max_width="1200px"
448
+ ),
449
+ flex_grow="1"
450
+ ),
451
+ min_height="100vh"
452
+ )
453
+ ```
454
+
455
+ ### Custom Form with Validation
456
+
457
+ Create forms with integrated validation:
458
+
459
+ ```python
460
+ from appkit_ui.components.form_inputs import inline_form_field
461
+
462
+ def registration_form():
463
+ return rx.form(
464
+ inline_form_field(
465
+ icon="user",
466
+ label="Username",
467
+ name="username",
468
+ min_length=3,
469
+ max_length=20,
470
+ pattern=r"^[a-zA-Z0-9_]+$",
471
+ required=True
472
+ ),
473
+ inline_form_field(
474
+ icon="mail",
475
+ label="Email",
476
+ name="email",
477
+ type="email",
478
+ required=True
479
+ ),
480
+ inline_form_field(
481
+ icon="lock",
482
+ label="Password",
483
+ name="password",
484
+ type="password",
485
+ min_length=8,
486
+ hint="At least 8 characters",
487
+ required=True
488
+ ),
489
+ rx.button("Register", type="submit")
490
+ )
491
+ ```
492
+
493
+ ### Editor Integration
494
+
495
+ Use the editor in content management:
496
+
497
+ ```python
498
+ from appkit_ui.components import editor
499
+
500
+ class BlogState(rx.State):
501
+ content: str = ""
502
+
503
+ def save_post(self):
504
+ # Save self.content to database
505
+ pass
506
+
507
+ def blog_editor_page():
508
+ return rx.vstack(
509
+ ui.header("New Blog Post"),
510
+ editor(
511
+ value=BlogState.content,
512
+ on_change=BlogState.set_content,
513
+ button_list=editor.EditorButtonList.COMPLEX,
514
+ height="600px",
515
+ placeholder="Write your blog post..."
516
+ ),
517
+ rx.button("Save", on_click=BlogState.save_post),
518
+ spacing="4",
519
+ padding="2em"
520
+ )
521
+ ```
522
+
523
+ ---
524
+
525
+ ## 📚 Related Components
526
+
527
+ - **[appkit-mantine](./../appkit-mantine)** - Mantine UI components used throughout appkit-ui
528
+ - **[appkit-user](./../appkit-user)** - User authentication components
529
+ - **[appkit-commons](./../appkit-commons)** - Shared utilities and configuration
530
+ - **[appkit-assistant](./../appkit-assistant)** - AI assistant with UI components