appkit-mantine 0.7.3__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.
Files changed (38) hide show
  1. appkit_mantine-0.7.3/.gitignore +114 -0
  2. appkit_mantine-0.7.3/PKG-INFO +441 -0
  3. appkit_mantine-0.7.3/README.md +419 -0
  4. appkit_mantine-0.7.3/docs/MANTINE_INPUTS_GUIDE.md +836 -0
  5. appkit_mantine-0.7.3/docs/MANTINE_TEXTAREA_GUIDE.md +702 -0
  6. appkit_mantine-0.7.3/docs/MANTINE_TIPTAP_GUIDE.md +692 -0
  7. appkit_mantine-0.7.3/docs/NUMBER_FORMAT_QUICK_REF.md +206 -0
  8. appkit_mantine-0.7.3/pyproject.toml +46 -0
  9. appkit_mantine-0.7.3/src/appkit_mantine/__init__.py +59 -0
  10. appkit_mantine-0.7.3/src/appkit_mantine/action_icon.py +117 -0
  11. appkit_mantine-0.7.3/src/appkit_mantine/autocomplete.py +52 -0
  12. appkit_mantine-0.7.3/src/appkit_mantine/base.py +351 -0
  13. appkit_mantine-0.7.3/src/appkit_mantine/button.py +90 -0
  14. appkit_mantine-0.7.3/src/appkit_mantine/date.py +76 -0
  15. appkit_mantine-0.7.3/src/appkit_mantine/inputs.py +158 -0
  16. appkit_mantine-0.7.3/src/appkit_mantine/json_input.py +44 -0
  17. appkit_mantine-0.7.3/src/appkit_mantine/mantine_provider.js +27 -0
  18. appkit_mantine-0.7.3/src/appkit_mantine/markdown_preview.py +149 -0
  19. appkit_mantine-0.7.3/src/appkit_mantine/markdown_preview_wrapper.js +426 -0
  20. appkit_mantine-0.7.3/src/appkit_mantine/markdown_zoom.py +26 -0
  21. appkit_mantine-0.7.3/src/appkit_mantine/masked_input.py +169 -0
  22. appkit_mantine-0.7.3/src/appkit_mantine/mermaid_zoom_loader.js +204 -0
  23. appkit_mantine-0.7.3/src/appkit_mantine/multi_select.py +132 -0
  24. appkit_mantine-0.7.3/src/appkit_mantine/nav_link.py +66 -0
  25. appkit_mantine-0.7.3/src/appkit_mantine/navigation_progress.js +12 -0
  26. appkit_mantine-0.7.3/src/appkit_mantine/nprogress.py +85 -0
  27. appkit_mantine-0.7.3/src/appkit_mantine/number_formatter.py +33 -0
  28. appkit_mantine-0.7.3/src/appkit_mantine/number_input.py +134 -0
  29. appkit_mantine-0.7.3/src/appkit_mantine/password_input.py +54 -0
  30. appkit_mantine-0.7.3/src/appkit_mantine/rich_select.jsx +204 -0
  31. appkit_mantine-0.7.3/src/appkit_mantine/rich_select.py +262 -0
  32. appkit_mantine-0.7.3/src/appkit_mantine/scroll_area.py +803 -0
  33. appkit_mantine-0.7.3/src/appkit_mantine/select.py +63 -0
  34. appkit_mantine-0.7.3/src/appkit_mantine/table.py +108 -0
  35. appkit_mantine-0.7.3/src/appkit_mantine/tags_input.py +141 -0
  36. appkit_mantine-0.7.3/src/appkit_mantine/textarea.py +120 -0
  37. appkit_mantine-0.7.3/src/appkit_mantine/tiptap.py +325 -0
  38. appkit_mantine-0.7.3/src/appkit_mantine/tiptap_wrapper.js +235 -0
@@ -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,441 @@
1
+ Metadata-Version: 2.4
2
+ Name: appkit-mantine
3
+ Version: 0.7.3
4
+ Summary: Mantine UI input components for Reflex with type safety and comprehensive examples
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
+ License: MIT
10
+ Keywords: components,forms,input,mantine,react,reflex,ui,web
11
+ Classifier: Development Status :: 3 - Alpha
12
+ Classifier: Framework :: AsyncIO
13
+ Classifier: Intended Audience :: Developers
14
+ Classifier: License :: OSI Approved :: MIT License
15
+ Classifier: Programming Language :: Python :: 3
16
+ Classifier: Programming Language :: Python :: 3.12
17
+ Classifier: Topic :: Software Development :: Libraries :: Python Modules
18
+ Classifier: Topic :: Software Development :: User Interfaces
19
+ Requires-Python: >=3.12
20
+ Requires-Dist: reflex>=0.8.12
21
+ Description-Content-Type: text/markdown
22
+
23
+ # appkit-mantine
24
+
25
+ [![PyPI version](https://badge.fury.io/py/appkit-mantine.svg)](https://badge.fury.io/py/appkit-mantine)
26
+ [![Python 3.12+](https://img.shields.io/badge/python-3.12+-blue.svg)](https://www.python.org/downloads/)
27
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
28
+ [![Pre-release](https://img.shields.io/badge/status-pre--release-orange.svg)](https://github.com/jenreh/reflex-mantine)
29
+
30
+ **reflex.dev components based on MantineUI**
31
+
32
+ A Reflex wrapper library focusing on [Mantine UI v8.3.3](https://mantine.dev) input components, designed for building robust forms and data entry interfaces in Python web applications.
33
+
34
+ ---
35
+
36
+ ## ✨ Features
37
+
38
+ - **🎯 Input-Focused** - Comprehensive coverage of form inputs: text, password, number, date, masked inputs, textarea, and rich text editor
39
+ - **🔒 Type-Safe** - Full type annotations with IDE autocomplete support for all props and event handlers
40
+ - **📚 Rich Examples** - Production-ready code examples for every component with common patterns and edge cases
41
+ - **🏗️ Clean Architecture** - Inheritance-based design eliminating code duplication across 40+ common props
42
+ - **🎨 Mantine Integration** - Seamless integration with Mantine's theming, color modes, and design system
43
+ - **⚡ Modern Stack** - Built on Reflex 0.8.13+ with React 18 and Mantine 8.3.3
44
+
45
+ ---
46
+
47
+ ## 📦 Installation
48
+
49
+ ### Using pip
50
+
51
+ ```bash
52
+ pip install appkit-mantine
53
+ ```
54
+
55
+ ### Using uv (recommended)
56
+
57
+ ```bash
58
+ uv add appkit-mantine
59
+ ```
60
+
61
+ ### Development Installation
62
+
63
+ For local development or to run the demo application:
64
+
65
+ ```bash
66
+ # Clone the repository
67
+ git clone https://github.com/jenreh/appkit.git
68
+ cd appkit
69
+
70
+ # Install with uv (installs workspace components)
71
+ uv sync
72
+
73
+ # Run the demo app
74
+ reflex run
75
+ ```
76
+
77
+ > **⚠️ Pre-release Notice:** This library is in development. APIs may change before the 1.0 release.
78
+
79
+ ---
80
+
81
+ ## 🚀 Quick Start
82
+
83
+ ```python
84
+ import reflex as rx
85
+ import appkit_mantine as mn
86
+
87
+ class FormState(rx.State):
88
+ email: str = ""
89
+ password: str = ""
90
+
91
+ def login_form() -> rx.Component:
92
+ return rx.container(
93
+ rx.vstack(
94
+ rx.heading("Login"),
95
+
96
+ # Basic input with validation
97
+ mn.form.input(
98
+ label="Email",
99
+ placeholder="you@example.com",
100
+ value=FormState.email,
101
+ on_change=FormState.set_email,
102
+ required=True,
103
+ type="email",
104
+ ),
105
+
106
+ # Password input with visibility toggle
107
+ mn.password_input(
108
+ label="Password",
109
+ value=FormState.password,
110
+ on_change=FormState.set_password,
111
+ required=True,
112
+ ),
113
+
114
+ rx.button("Sign In", on_click=FormState.handle_login),
115
+ spacing="4",
116
+ ),
117
+ max_width="400px",
118
+ )
119
+
120
+ app = rx.App()
121
+ app.add_page(login_form)
122
+ ```
123
+
124
+ ---
125
+
126
+ ## 📋 Available Components
127
+
128
+ ### Inputs
129
+
130
+ | Component | Description | Documentation |
131
+ |-----------|-------------|---------------|
132
+ | **`text_input`** | Basic text input / text inputs showcase | [Guide](docs/MANTINE_INPUTS_GUIDE.md) |
133
+ | **`input`** | Polymorphic base input element with sections, variants, sizes | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/input_examples.py) |
134
+ | **`password_input`** | Password field with visibility toggle | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/password_input_examples.py) |
135
+ | **`date_input`** | Date picker with range constraints and formatting | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/date_input_examples.py) |
136
+ | **`number_input`** | Numeric input with formatting, min/max, step controls | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/number_input_examples.py) |
137
+ | **`textarea`** | Multi-line text input with auto-resize | [Guide](docs/MANTINE_TEXTAREA_GUIDE.md) |
138
+ | **`json_input`** | JSON input with formatting, validation, parser, pretty printing | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/json_input_examples.py) |
139
+ | **`select`** | Dropdown select with data array, inherits input props | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/select_examples.py) |
140
+ | **`multi_select`** | Multi-select dropdown for selecting multiple values | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/multi_select_examples.py) |
141
+ | **`tags_input`** | Free-form tags input component | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/tags_input_examples.py) |
142
+ | **`autocomplete`** | Autocomplete input with string data array | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/autocomplete_examples.py) |
143
+ | **`rich_text_editor`** | WYSIWYG editor powered by Tiptap | [Guide](docs/MANTINE_TIPTAP_GUIDE.md) |
144
+ | **`masked_input`** | Input masking for phone numbers, credit cards, custom patterns | [Guide](docs/MANTINE_INPUTS_GUIDE.md) |
145
+
146
+ ### Buttons
147
+
148
+ | Component | Description | Documentation |
149
+ |-----------|-------------|---------------|
150
+ | **`action_icon`** | Lightweight button for icons with size, variant, radius, disabled state | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/action_icon_examples.py) |
151
+ | **`button`** | Button with variants, sizes, gradient, loading states, sections | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/button_examples.py) |
152
+
153
+ ### Others
154
+
155
+ | Component | Description | Documentation |
156
+ |-----------|-------------|---------------|
157
+ | **`navigation_progress`** | Page loading progress indicator | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/nprogress_examples.py) |
158
+ | **`nav_link`** | Navigation link with label, description, icons, nested links, active/disabled states | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/nav_link_examples.py) |
159
+ | **`number_formatter`** | Formats numeric input with parser/formatter, returns parsed value | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/number_formatter_examples.py) |
160
+ | **`scroll_area`** | Scrollable container with custom scrollbars and virtualization | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/scroll_area_examples.py) |
161
+ | **`table`** | Table component for tabular data display | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/table_examples.py) |
162
+
163
+ ### Common Props (Inherited by All Inputs)
164
+
165
+ All input components inherit ~40 common props from `MantineInputComponentBase`:
166
+
167
+ ```python
168
+ # Input.Wrapper props
169
+ label="Field Label"
170
+ description="Helper text"
171
+ error="Validation error"
172
+ required=True
173
+ with_asterisk=True # Show red asterisk for required fields
174
+
175
+ # Visual variants
176
+ variant="filled" # "default" | "filled" | "unstyled"
177
+ size="md" # "xs" | "sm" | "md" | "lg" | "xl"
178
+ radius="md" # "xs" | "sm" | "md" | "lg" | "xl"
179
+
180
+ # State management
181
+ value=State.field_value
182
+ default_value="Initial value"
183
+ placeholder="Enter text..."
184
+ disabled=False
185
+
186
+ # Sections (icons, buttons)
187
+ left_section=rx.icon("search")
188
+ right_section=rx.button("Clear")
189
+ left_section_pointer_events="none" # Click-through
190
+
191
+ # Mantine style props
192
+ w="100%" # width
193
+ maw="500px" # max-width
194
+ m="md" # margin
195
+ p="sm" # padding
196
+
197
+ # Event handlers
198
+ on_change=State.handle_change
199
+ on_focus=State.handle_focus
200
+ on_blur=State.handle_blur
201
+ ```
202
+
203
+ ## 📖 Usage Examples
204
+
205
+ ### Basic Input with Validation
206
+
207
+ ```python
208
+ import reflex as rx
209
+ import appkit_mantine as mn
210
+
211
+ class EmailState(rx.State):
212
+ email: str = ""
213
+ error: str = ""
214
+
215
+ def validate_email(self):
216
+ if "@" not in self.email:
217
+ self.error = "Invalid email format"
218
+ else:
219
+ self.error = ""
220
+
221
+ def email_input():
222
+ return mn.form.input(
223
+ label="Email Address",
224
+ description="We'll never share your email",
225
+ placeholder="you@example.com",
226
+ value=EmailState.email,
227
+ on_change=EmailState.set_email,
228
+ on_blur=EmailState.validate_email,
229
+ error=EmailState.error,
230
+ required=True,
231
+ type="email",
232
+ left_section=rx.icon("mail"),
233
+ )
234
+ ```
235
+
236
+ ### Number Input with Formatting
237
+
238
+ ```python
239
+ class PriceState(rx.State):
240
+ price: float = 0.0
241
+
242
+ def price_input():
243
+ return mn.number_input(
244
+ label="Product Price",
245
+ value=PriceState.price,
246
+ on_change=PriceState.set_price,
247
+ prefix="$",
248
+ decimal_scale=2,
249
+ fixed_decimal_scale=True,
250
+ thousand_separator=",",
251
+ min=0,
252
+ max=999999.99,
253
+ step=0.01,
254
+ )
255
+ ```
256
+
257
+ ### Masked Input (Phone Number)
258
+
259
+ ```python
260
+ class PhoneState(rx.State):
261
+ phone: str = ""
262
+
263
+ def phone_input():
264
+ return mn.masked_input(
265
+ label="Phone Number",
266
+ mask="+1 (000) 000-0000",
267
+ value=PhoneState.phone,
268
+ on_accept=PhoneState.set_phone, # Note: on_accept, not on_change
269
+ placeholder="+1 (555) 123-4567",
270
+ )
271
+ ```
272
+
273
+ ### Date Input with Constraints
274
+
275
+ ```python
276
+ from datetime import date, timedelta
277
+
278
+ class BookingState(rx.State):
279
+ checkin: str = ""
280
+
281
+ def date_picker():
282
+ today = date.today()
283
+ max_date = today + timedelta(days=365)
284
+
285
+ return mn.date_input(
286
+ label="Check-in Date",
287
+ value=BookingState.checkin,
288
+ on_change=BookingState.set_checkin,
289
+ min_date=today.isoformat(),
290
+ max_date=max_date.isoformat(),
291
+ clear_button_props={"aria_label": "Clear date"},
292
+ )
293
+ ```
294
+
295
+ ### Rich Text Editor
296
+
297
+ ```python
298
+ class EditorState(rx.State):
299
+ content: str = "<p>Start typing...</p>"
300
+
301
+ def editor():
302
+ return mn.rich_text_editor(
303
+ value=EditorState.content,
304
+ on_change=EditorState.set_content,
305
+ toolbar_config=mn.EditorToolbarConfig(
306
+ controls=[
307
+ mn.ToolbarControlGroup.FORMATTING,
308
+ mn.ToolbarControlGroup.LISTS,
309
+ mn.ToolbarControlGroup.LINKS,
310
+ ]
311
+ ),
312
+ )
313
+ ```
314
+
315
+ ### Action Icon
316
+
317
+ ```python
318
+ def action_icon_example():
319
+ return mn.action_icon(
320
+ rx.icon("heart"),
321
+ variant="filled",
322
+ color="red",
323
+ size="lg",
324
+ on_click=State.like_item,
325
+ )
326
+ ```
327
+
328
+ ### Autocomplete
329
+
330
+ ```python
331
+ class SearchState(rx.State):
332
+ query: str = ""
333
+
334
+ def autocomplete_example():
335
+ return mn.autocomplete(
336
+ label="Search",
337
+ placeholder="Type to search...",
338
+ data=["Apple", "Banana", "Cherry"],
339
+ value=SearchState.query,
340
+ on_change=SearchState.set_query,
341
+ )
342
+ ```
343
+
344
+ ### Button
345
+
346
+ ```python
347
+ def button_example():
348
+ return mn.button(
349
+ "Click me",
350
+ variant="gradient",
351
+ gradient={"from": "blue", "to": "cyan"},
352
+ size="lg",
353
+ on_click=State.handle_click,
354
+ )
355
+ ```
356
+
357
+ ### Combobox
358
+
359
+ ```python
360
+ def combobox_example():
361
+ return mn.combobox(
362
+ label="Select option",
363
+ data=[
364
+ {"value": "react", "label": "React"},
365
+ {"value": "vue", "label": "Vue"},
366
+ ],
367
+ on_option_submit=State.set_selected,
368
+ )
369
+ ```
370
+
371
+ ### Input
372
+
373
+ ```python
374
+ def input_example():
375
+ return mn.input(
376
+ placeholder="Enter text...",
377
+ left_section=rx.icon("search"),
378
+ right_section=rx.button("Clear"),
379
+ )
380
+ ```
381
+
382
+ ### JSON Input
383
+
384
+ ```python
385
+ class JsonState(rx.State):
386
+ data: str = '{"name": "example"}'
387
+
388
+ def json_input_example():
389
+ return mn.json_input(
390
+ label="JSON Data",
391
+ value=JsonState.data,
392
+ on_change=JsonState.set_data,
393
+ format_on_blur=True,
394
+ )
395
+ ```
396
+
397
+ ### Nav Link
398
+
399
+ ```python
400
+ def nav_link_example():
401
+ return mn.nav_link(
402
+ label="Dashboard",
403
+ left_section=rx.icon("home"),
404
+ active=True,
405
+ on_click=State.navigate_to_dashboard,
406
+ )
407
+ ```
408
+
409
+ ### Number Formatter
410
+
411
+ ```python
412
+ class PriceState(rx.State):
413
+ amount: float = 1234.56
414
+
415
+ def number_formatter_example():
416
+ return mn.number_formatter(
417
+ value=PriceState.amount,
418
+ prefix="$",
419
+ thousand_separator=",",
420
+ decimal_scale=2,
421
+ )
422
+ ```
423
+
424
+ ### Select
425
+
426
+ ```python
427
+ class SelectState(rx.State):
428
+ choice: str = ""
429
+
430
+ def select_example():
431
+ return mn.select(
432
+ label="Choose one",
433
+ data=["Option 1", "Option 2", "Option 3"],
434
+ value=SelectState.choice,
435
+ on_change=SelectState.set_choice,
436
+ )
437
+ ```
438
+
439
+ ## 📄 License
440
+
441
+ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.