reflex-silverpoint-react 0.7.0__tar.gz → 0.7.1__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.
- {reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react.egg-info → reflex_silverpoint_react-0.7.1}/PKG-INFO +62 -36
- reflex_silverpoint_react-0.7.0/PKG-INFO → reflex_silverpoint_react-0.7.1/README.md +60 -61
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/__init__.py +54 -3
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/assets/trigger.jsx +63 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/base.py +40 -12
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/base.pyi +6 -3
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/charts.pyi +1 -1
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/composed.py +633 -0
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/composed.pyi +684 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/dashboard.py +5 -3
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/dashboard.pyi +1 -1
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/overlays.py +784 -0
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/overlays.pyi +674 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/palette.py +85 -70
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/surfaces.py +235 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/surfaces.pyi +30 -106
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/timeline.py +172 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/timeline.pyi +43 -15
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/ui.py +3 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/ui.pyi +1 -1
- reflex_silverpoint_react-0.7.0/README.md → reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react.egg-info/PKG-INFO +87 -32
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react.egg-info/SOURCES.txt +3 -4
- reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react.egg-info/requires.txt +9 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/pyproject.toml +8 -7
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/tests/test_components.py +3 -3
- reflex_silverpoint_react-0.7.1/tests/test_v07.py +322 -0
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/surface.jsx +0 -219
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/surfaces.css +0 -375
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/timeline.css +0 -225
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/timeline.jsx +0 -64
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/composed.py +0 -702
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/overlays.py +0 -835
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/surfaces.py +0 -329
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/timeline.py +0 -157
- reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react.egg-info/requires.txt +0 -11
- reflex_silverpoint_react-0.7.0/tests/test_v07.py +0 -234
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/LICENSE +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/catalog.py +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/charts.py +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/helpers.py +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/ui_catalog.py +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react.egg-info/dependency_links.txt +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react.egg-info/top_level.txt +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/setup.cfg +0 -0
- {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/tests/test_demo_data.py +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: reflex-silverpoint-react
|
|
3
|
-
Version: 0.7.
|
|
4
|
-
Summary: The 60 silverpoint charts, the Dashboard,
|
|
3
|
+
Version: 0.7.1
|
|
4
|
+
Summary: The 60 silverpoint charts, the Dashboard, 38 UI, composed and overlay components, palettes and a Knight Lab timeline (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react 0.7
|
|
5
5
|
Author-email: Ernesto Crespo <ecrespo@gmail.com>
|
|
6
6
|
License: MIT
|
|
7
7
|
Project-URL: Homepage, https://github.com/ecrespo/reflex-silverpoint-react
|
|
@@ -18,13 +18,11 @@ Description-Content-Type: text/markdown
|
|
|
18
18
|
License-File: LICENSE
|
|
19
19
|
Requires-Dist: reflex>=0.10.0
|
|
20
20
|
Provides-Extra: timeline
|
|
21
|
-
Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "timeline"
|
|
22
21
|
Provides-Extra: dev
|
|
23
22
|
Requires-Dist: build; extra == "dev"
|
|
24
23
|
Requires-Dist: twine; extra == "dev"
|
|
25
24
|
Requires-Dist: pytest; extra == "dev"
|
|
26
25
|
Requires-Dist: ruff; extra == "dev"
|
|
27
|
-
Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "dev"
|
|
28
26
|
Dynamic: license-file
|
|
29
27
|
|
|
30
28
|
# reflex-silverpoint-react
|
|
@@ -36,17 +34,40 @@ prepared ground, tone built from hatching, and white heightening on the live val
|
|
|
36
34
|
The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
|
|
37
35
|
has a `precision` mode that turns the inking off.
|
|
38
36
|
|
|
39
|
-
It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.
|
|
37
|
+
It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) **0.7.0** and exposes
|
|
40
38
|
**all 60 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the **17 UI
|
|
41
|
-
components** (buttons, inputs, tabs, cards, alerts…), the
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
39
|
+
components** (buttons, inputs, tabs, cards, alerts…), the **12 composed components** (table,
|
|
40
|
+
pagination, breadcrumb, avatar…), the **7 overlays** and the toaster (modal, drawer, popover,
|
|
41
|
+
tooltip, select, dropdown menu, toast), the **palettes**, the **Knight Lab timeline**, the
|
|
42
|
+
`SilverpointProvider`, both grounds (`silverpoint` and `cyanotype`), the interaction events, custom
|
|
43
|
+
readouts and the imperative handle (SVG export and geometry) as Python.
|
|
44
|
+
|
|
45
|
+
Everything it renders is an npm component of silverpoint, under its parity contract: the same
|
|
46
|
+
markup React, Vue and Angular render.
|
|
47
|
+
|
|
48
|
+
### New in 0.7.1
|
|
49
|
+
|
|
50
|
+
- Wraps **`@silverpoint/react` 0.7.0** (0.7.0 wrapped 0.6.0). silverpoint 0.7 took this package's
|
|
51
|
+
palettes, composed components, overlays and timeline into the library itself, so they are now the
|
|
52
|
+
npm components, not Reflex-composed copies: same Python builders, the library's markup.
|
|
53
|
+
- **Palettes** are the npm `palette` prop: they merge element → dashboard → provider field by field,
|
|
54
|
+
`silverpoint_provider(palette=...)` works, and `silverpoint_palette(...)` is a provider with a
|
|
55
|
+
palette. `check_palette()` measures the core's nine contrast pairs (the focus ring and the white
|
|
56
|
+
heightening included); `"ironGall"` names the `iron_gall` preset too.
|
|
57
|
+
- **Composed components and overlays read `silverpoint_provider`**, as the `Sp` components do.
|
|
58
|
+
Overlays are a native `<dialog>` and the Popover API (no Radix); they render in place, so a
|
|
59
|
+
section's palette reaches them.
|
|
60
|
+
- **Logical sides**: `side="start"`/`"end"` and `position="bottom-end"`…; `left`/`right` still work
|
|
61
|
+
with a `DeprecationWarning`. `sp_drawer(size=)` is `extent=`, `sp_popover(side_offset=)` is
|
|
62
|
+
`offset=`; `sp_modal` gains `label` and `dismissible`, `sp_result`/`sp_descriptions`
|
|
63
|
+
`heading_level`.
|
|
64
|
+
- `sp_textarea(textarea_id=)` and `sp_input_number(input_id=)` are `id=` (deprecated aliases kept);
|
|
65
|
+
`sp_textarea` has no `on_blur`. `sp_collapse_item(on_toggle=)` receives the new open state (a bool).
|
|
66
|
+
- **`sp_timeline`** is the npm `SpTimeline`: TimelineJS is an npm dependency of that component, so the
|
|
67
|
+
`[timeline]` extra pulls in nothing any more (it is kept so existing installs keep working).
|
|
68
|
+
- `sort_rows()` follows the core's `uiSortRows` order (numbers first, then text by code point).
|
|
69
|
+
|
|
70
|
+
### New in 0.7.0
|
|
50
71
|
|
|
51
72
|
- **Reflex 0.10.0**, and therefore **Python 3.11 or later** (Python 3.10 is no longer supported).
|
|
52
73
|
Reflex 0.10 removed `reflex component build`: stubs are regenerated with `scripts/make_stubs.py`.
|
|
@@ -63,7 +84,7 @@ components** built on silverpoint's own frames and tones (tables, overlays, toas
|
|
|
63
84
|
`sp_trigger` as their drawn button. See [Composed components](#composed-components).
|
|
64
85
|
- **`sp_timeline`** — Knight Lab TimelineJS drawn in silverpoint: a skin on the ground's colours and
|
|
65
86
|
type, plus the ground's own hand-inked frames and tone tiles on its markers, eras and buttons.
|
|
66
|
-
Optional extra: `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
|
|
87
|
+
Optional extra (until 0.7.1): `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
|
|
67
88
|
- `sp_surface`, `sp_glyph`: the building blocks, for components of your own.
|
|
68
89
|
|
|
69
90
|
### New in 0.6
|
|
@@ -396,19 +417,19 @@ silverpoint_palette(dashboard(...), sp_card(...), palette="indigo") # a whole s
|
|
|
396
417
|
```
|
|
397
418
|
|
|
398
419
|
Fields: `substrate`, `ink`, `ink_secondary`, `heighten`, `rule`, `grid`, `text`, `text_muted` and
|
|
399
|
-
`focus` (the UI focus ring). Unset fields keep the ground's own.
|
|
400
|
-
wins over its section's. A palette is
|
|
401
|
-
(Art. 6), so a chart has two inks (`ink`
|
|
402
|
-
|
|
403
|
-
|
|
420
|
+
`focus` (the UI focus ring). Unset fields keep the ground's own. Palettes merge field by field,
|
|
421
|
+
element → dashboard → provider, so an element's own `palette` wins over its section's. A palette is
|
|
422
|
+
**monochrome by design**: tone is built from hatch density (Art. 6), so a chart has two inks (`ink`
|
|
423
|
+
for the main series, `ink_secondary` for the second), never a colour per series. `precision` mode and
|
|
424
|
+
the system's high-contrast modes still apply on top. `silverpoint_palette(...)` is
|
|
425
|
+
`silverpoint_provider(palette=...)` around the section.
|
|
404
426
|
|
|
405
427
|
## Composed components
|
|
406
428
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
`silverpoint_provider`: pass `ground`, `substrate`, `mode` and `palette` explicitly.
|
|
429
|
+
silverpoint 0.7's composed components and overlays, the npm components of `@silverpoint/react/ui`:
|
|
430
|
+
native markup drawn by the core with the ground's hand-inked frames, hatched tones and
|
|
431
|
+
heightening, exactly as the `Sp` components are. Like them they read `silverpoint_provider` (and
|
|
432
|
+
the dashboard they sit in); a prop on the component always wins.
|
|
412
433
|
|
|
413
434
|
```python
|
|
414
435
|
from reflex_silverpoint_react import sort_rows, sp_pagination, sp_table
|
|
@@ -428,7 +449,7 @@ sp_table(
|
|
|
428
449
|
sp_pagination(total=240, current=State.page, on_change=State.set_page, show_total=True)
|
|
429
450
|
```
|
|
430
451
|
|
|
431
|
-
|
|
|
452
|
+
| Composed (native markup) | |
|
|
432
453
|
|---|---|
|
|
433
454
|
| `sp_table` | Card-framed table: small-caps header, tabular figures, hatched striping, sortable headers with `aria-sort` |
|
|
434
455
|
| `sp_pagination` | Previous/next, first/last, a window around the current page (heightened); `on_change(page)` |
|
|
@@ -441,7 +462,7 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
|
|
|
441
462
|
| `sp_empty`, `sp_result` | Empty state; outcome with a drawn round mark |
|
|
442
463
|
| `sp_textarea`, `sp_input_number` | On the `SpInput` contract; `on_change` receives the value (text or number) |
|
|
443
464
|
|
|
444
|
-
|
|
|
465
|
+
| Overlays (`<dialog>`, Popover API) | |
|
|
445
466
|
|---|---|
|
|
446
467
|
| `sp_modal`, `sp_drawer` | Dialog on a card frame over a hatched backdrop; drawer from any edge |
|
|
447
468
|
| `sp_popover`, `sp_tooltip` | Anchored content; tooltip on hover or keyboard focus |
|
|
@@ -449,10 +470,15 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
|
|
|
449
470
|
| `sp_dropdown_menu` | Commands with shortcuts, separators and labels; `on_select(key)` |
|
|
450
471
|
| `sp_toast`, `sp_toaster` | Notices that stack in a corner; `error`/`warning` are announced assertively |
|
|
451
472
|
|
|
452
|
-
Behaviour (
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
473
|
+
Behaviour is the platform's: `showModal()` for the modal and the drawer (focus stays inside, Escape
|
|
474
|
+
and the backdrop close it unless `dismissible=False`), the Popover API for the rest (light
|
|
475
|
+
dismiss), keyboard and placement from `@silverpoint/core` (APG listbox and menu, typeahead, flip and
|
|
476
|
+
shift). Overlays render in place (the top layer, no portal), so a section's palette reaches them.
|
|
477
|
+
Sides are logical (`start`/`end`) and mirror in right-to-left text. An overlay clones its `trigger`
|
|
478
|
+
with its ARIA and a toggling click, so the trigger must keep the props it is given: a native
|
|
479
|
+
`rx.el.button`, or `sp_trigger(...)`, the drawn button strings become (`sp_button` drops them in
|
|
480
|
+
silverpoint 0.7.0). `sp_trigger` does not read the provider: give it `ground`, `substrate`, `mode`
|
|
481
|
+
and `palette`.
|
|
456
482
|
|
|
457
483
|
```python
|
|
458
484
|
sp_modal(
|
|
@@ -471,15 +497,15 @@ sp_toaster(sp_toast("Saved", State.text, kind="success", open=State.toast_open,
|
|
|
471
497
|
|
|
472
498
|
## Timeline
|
|
473
499
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
500
|
+
The npm `SpTimeline` of `@silverpoint/react/timeline`. TimelineJS (`@knight-lab/timelinejs` 3.9.13)
|
|
501
|
+
is an npm dependency of this component: Reflex installs it when a page uses `sp_timeline`, and no
|
|
502
|
+
Python extra is needed. If it cannot be loaded, the component warns `SP025` and renders `fallback`.
|
|
477
503
|
|
|
478
504
|
```python
|
|
479
505
|
from reflex_silverpoint_react import sp_timeline
|
|
480
506
|
|
|
481
507
|
sp_timeline(
|
|
482
|
-
DATA, # TimelineJS data: title, events, eras (or
|
|
508
|
+
DATA, # TimelineJS data: title, events, eras (or any object with to_dict())
|
|
483
509
|
height=560,
|
|
484
510
|
ground="silverpoint",
|
|
485
511
|
substrate="cream",
|
|
@@ -564,7 +590,7 @@ The exported SVG carries its own ground colours, so it renders the same outside
|
|
|
564
590
|
## Demo app
|
|
565
591
|
|
|
566
592
|
```bash
|
|
567
|
-
uv venv && uv pip install -e
|
|
593
|
+
uv venv && uv pip install -e .
|
|
568
594
|
cd silverpoint_react_demo
|
|
569
595
|
uv run reflex run
|
|
570
596
|
```
|
|
@@ -1,32 +1,3 @@
|
|
|
1
|
-
Metadata-Version: 2.4
|
|
2
|
-
Name: reflex-silverpoint-react
|
|
3
|
-
Version: 0.7.0
|
|
4
|
-
Summary: The 60 silverpoint charts, the Dashboard, 17 UI components, palettes, 20 composed components and a Knight Lab timeline (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react
|
|
5
|
-
Author-email: Ernesto Crespo <ecrespo@gmail.com>
|
|
6
|
-
License: MIT
|
|
7
|
-
Project-URL: Homepage, https://github.com/ecrespo/reflex-silverpoint-react
|
|
8
|
-
Project-URL: Source, https://github.com/ecrespo/reflex-silverpoint-react
|
|
9
|
-
Project-URL: Issues, https://github.com/ecrespo/reflex-silverpoint-react/issues
|
|
10
|
-
Project-URL: Upstream, https://github.com/ecrespo/silverpoint
|
|
11
|
-
Keywords: reflex,reflex-custom-components,charts,silverpoint,data-visualization,svg,ui-components,palette,timeline
|
|
12
|
-
Classifier: Development Status :: 4 - Beta
|
|
13
|
-
Classifier: License :: OSI Approved :: MIT License
|
|
14
|
-
Classifier: Programming Language :: Python :: 3
|
|
15
|
-
Classifier: Topic :: Scientific/Engineering :: Visualization
|
|
16
|
-
Requires-Python: >=3.11
|
|
17
|
-
Description-Content-Type: text/markdown
|
|
18
|
-
License-File: LICENSE
|
|
19
|
-
Requires-Dist: reflex>=0.10.0
|
|
20
|
-
Provides-Extra: timeline
|
|
21
|
-
Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "timeline"
|
|
22
|
-
Provides-Extra: dev
|
|
23
|
-
Requires-Dist: build; extra == "dev"
|
|
24
|
-
Requires-Dist: twine; extra == "dev"
|
|
25
|
-
Requires-Dist: pytest; extra == "dev"
|
|
26
|
-
Requires-Dist: ruff; extra == "dev"
|
|
27
|
-
Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "dev"
|
|
28
|
-
Dynamic: license-file
|
|
29
|
-
|
|
30
1
|
# reflex-silverpoint-react
|
|
31
2
|
|
|
32
3
|
A [Reflex](https://reflex.dev) custom component for **[silverpoint](https://github.com/ecrespo/silverpoint)**:
|
|
@@ -36,17 +7,40 @@ prepared ground, tone built from hatching, and white heightening on the live val
|
|
|
36
7
|
The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
|
|
37
8
|
has a `precision` mode that turns the inking off.
|
|
38
9
|
|
|
39
|
-
It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.
|
|
10
|
+
It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) **0.7.0** and exposes
|
|
40
11
|
**all 60 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the **17 UI
|
|
41
|
-
components** (buttons, inputs, tabs, cards, alerts…), the
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
12
|
+
components** (buttons, inputs, tabs, cards, alerts…), the **12 composed components** (table,
|
|
13
|
+
pagination, breadcrumb, avatar…), the **7 overlays** and the toaster (modal, drawer, popover,
|
|
14
|
+
tooltip, select, dropdown menu, toast), the **palettes**, the **Knight Lab timeline**, the
|
|
15
|
+
`SilverpointProvider`, both grounds (`silverpoint` and `cyanotype`), the interaction events, custom
|
|
16
|
+
readouts and the imperative handle (SVG export and geometry) as Python.
|
|
17
|
+
|
|
18
|
+
Everything it renders is an npm component of silverpoint, under its parity contract: the same
|
|
19
|
+
markup React, Vue and Angular render.
|
|
20
|
+
|
|
21
|
+
### New in 0.7.1
|
|
22
|
+
|
|
23
|
+
- Wraps **`@silverpoint/react` 0.7.0** (0.7.0 wrapped 0.6.0). silverpoint 0.7 took this package's
|
|
24
|
+
palettes, composed components, overlays and timeline into the library itself, so they are now the
|
|
25
|
+
npm components, not Reflex-composed copies: same Python builders, the library's markup.
|
|
26
|
+
- **Palettes** are the npm `palette` prop: they merge element → dashboard → provider field by field,
|
|
27
|
+
`silverpoint_provider(palette=...)` works, and `silverpoint_palette(...)` is a provider with a
|
|
28
|
+
palette. `check_palette()` measures the core's nine contrast pairs (the focus ring and the white
|
|
29
|
+
heightening included); `"ironGall"` names the `iron_gall` preset too.
|
|
30
|
+
- **Composed components and overlays read `silverpoint_provider`**, as the `Sp` components do.
|
|
31
|
+
Overlays are a native `<dialog>` and the Popover API (no Radix); they render in place, so a
|
|
32
|
+
section's palette reaches them.
|
|
33
|
+
- **Logical sides**: `side="start"`/`"end"` and `position="bottom-end"`…; `left`/`right` still work
|
|
34
|
+
with a `DeprecationWarning`. `sp_drawer(size=)` is `extent=`, `sp_popover(side_offset=)` is
|
|
35
|
+
`offset=`; `sp_modal` gains `label` and `dismissible`, `sp_result`/`sp_descriptions`
|
|
36
|
+
`heading_level`.
|
|
37
|
+
- `sp_textarea(textarea_id=)` and `sp_input_number(input_id=)` are `id=` (deprecated aliases kept);
|
|
38
|
+
`sp_textarea` has no `on_blur`. `sp_collapse_item(on_toggle=)` receives the new open state (a bool).
|
|
39
|
+
- **`sp_timeline`** is the npm `SpTimeline`: TimelineJS is an npm dependency of that component, so the
|
|
40
|
+
`[timeline]` extra pulls in nothing any more (it is kept so existing installs keep working).
|
|
41
|
+
- `sort_rows()` follows the core's `uiSortRows` order (numbers first, then text by code point).
|
|
42
|
+
|
|
43
|
+
### New in 0.7.0
|
|
50
44
|
|
|
51
45
|
- **Reflex 0.10.0**, and therefore **Python 3.11 or later** (Python 3.10 is no longer supported).
|
|
52
46
|
Reflex 0.10 removed `reflex component build`: stubs are regenerated with `scripts/make_stubs.py`.
|
|
@@ -63,7 +57,7 @@ components** built on silverpoint's own frames and tones (tables, overlays, toas
|
|
|
63
57
|
`sp_trigger` as their drawn button. See [Composed components](#composed-components).
|
|
64
58
|
- **`sp_timeline`** — Knight Lab TimelineJS drawn in silverpoint: a skin on the ground's colours and
|
|
65
59
|
type, plus the ground's own hand-inked frames and tone tiles on its markers, eras and buttons.
|
|
66
|
-
Optional extra: `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
|
|
60
|
+
Optional extra (until 0.7.1): `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
|
|
67
61
|
- `sp_surface`, `sp_glyph`: the building blocks, for components of your own.
|
|
68
62
|
|
|
69
63
|
### New in 0.6
|
|
@@ -396,19 +390,19 @@ silverpoint_palette(dashboard(...), sp_card(...), palette="indigo") # a whole s
|
|
|
396
390
|
```
|
|
397
391
|
|
|
398
392
|
Fields: `substrate`, `ink`, `ink_secondary`, `heighten`, `rule`, `grid`, `text`, `text_muted` and
|
|
399
|
-
`focus` (the UI focus ring). Unset fields keep the ground's own.
|
|
400
|
-
wins over its section's. A palette is
|
|
401
|
-
(Art. 6), so a chart has two inks (`ink`
|
|
402
|
-
|
|
403
|
-
|
|
393
|
+
`focus` (the UI focus ring). Unset fields keep the ground's own. Palettes merge field by field,
|
|
394
|
+
element → dashboard → provider, so an element's own `palette` wins over its section's. A palette is
|
|
395
|
+
**monochrome by design**: tone is built from hatch density (Art. 6), so a chart has two inks (`ink`
|
|
396
|
+
for the main series, `ink_secondary` for the second), never a colour per series. `precision` mode and
|
|
397
|
+
the system's high-contrast modes still apply on top. `silverpoint_palette(...)` is
|
|
398
|
+
`silverpoint_provider(palette=...)` around the section.
|
|
404
399
|
|
|
405
400
|
## Composed components
|
|
406
401
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
`silverpoint_provider`: pass `ground`, `substrate`, `mode` and `palette` explicitly.
|
|
402
|
+
silverpoint 0.7's composed components and overlays, the npm components of `@silverpoint/react/ui`:
|
|
403
|
+
native markup drawn by the core with the ground's hand-inked frames, hatched tones and
|
|
404
|
+
heightening, exactly as the `Sp` components are. Like them they read `silverpoint_provider` (and
|
|
405
|
+
the dashboard they sit in); a prop on the component always wins.
|
|
412
406
|
|
|
413
407
|
```python
|
|
414
408
|
from reflex_silverpoint_react import sort_rows, sp_pagination, sp_table
|
|
@@ -428,7 +422,7 @@ sp_table(
|
|
|
428
422
|
sp_pagination(total=240, current=State.page, on_change=State.set_page, show_total=True)
|
|
429
423
|
```
|
|
430
424
|
|
|
431
|
-
|
|
|
425
|
+
| Composed (native markup) | |
|
|
432
426
|
|---|---|
|
|
433
427
|
| `sp_table` | Card-framed table: small-caps header, tabular figures, hatched striping, sortable headers with `aria-sort` |
|
|
434
428
|
| `sp_pagination` | Previous/next, first/last, a window around the current page (heightened); `on_change(page)` |
|
|
@@ -441,7 +435,7 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
|
|
|
441
435
|
| `sp_empty`, `sp_result` | Empty state; outcome with a drawn round mark |
|
|
442
436
|
| `sp_textarea`, `sp_input_number` | On the `SpInput` contract; `on_change` receives the value (text or number) |
|
|
443
437
|
|
|
444
|
-
|
|
|
438
|
+
| Overlays (`<dialog>`, Popover API) | |
|
|
445
439
|
|---|---|
|
|
446
440
|
| `sp_modal`, `sp_drawer` | Dialog on a card frame over a hatched backdrop; drawer from any edge |
|
|
447
441
|
| `sp_popover`, `sp_tooltip` | Anchored content; tooltip on hover or keyboard focus |
|
|
@@ -449,10 +443,15 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
|
|
|
449
443
|
| `sp_dropdown_menu` | Commands with shortcuts, separators and labels; `on_select(key)` |
|
|
450
444
|
| `sp_toast`, `sp_toaster` | Notices that stack in a corner; `error`/`warning` are announced assertively |
|
|
451
445
|
|
|
452
|
-
Behaviour (
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
446
|
+
Behaviour is the platform's: `showModal()` for the modal and the drawer (focus stays inside, Escape
|
|
447
|
+
and the backdrop close it unless `dismissible=False`), the Popover API for the rest (light
|
|
448
|
+
dismiss), keyboard and placement from `@silverpoint/core` (APG listbox and menu, typeahead, flip and
|
|
449
|
+
shift). Overlays render in place (the top layer, no portal), so a section's palette reaches them.
|
|
450
|
+
Sides are logical (`start`/`end`) and mirror in right-to-left text. An overlay clones its `trigger`
|
|
451
|
+
with its ARIA and a toggling click, so the trigger must keep the props it is given: a native
|
|
452
|
+
`rx.el.button`, or `sp_trigger(...)`, the drawn button strings become (`sp_button` drops them in
|
|
453
|
+
silverpoint 0.7.0). `sp_trigger` does not read the provider: give it `ground`, `substrate`, `mode`
|
|
454
|
+
and `palette`.
|
|
456
455
|
|
|
457
456
|
```python
|
|
458
457
|
sp_modal(
|
|
@@ -471,15 +470,15 @@ sp_toaster(sp_toast("Saved", State.text, kind="success", open=State.toast_open,
|
|
|
471
470
|
|
|
472
471
|
## Timeline
|
|
473
472
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
473
|
+
The npm `SpTimeline` of `@silverpoint/react/timeline`. TimelineJS (`@knight-lab/timelinejs` 3.9.13)
|
|
474
|
+
is an npm dependency of this component: Reflex installs it when a page uses `sp_timeline`, and no
|
|
475
|
+
Python extra is needed. If it cannot be loaded, the component warns `SP025` and renders `fallback`.
|
|
477
476
|
|
|
478
477
|
```python
|
|
479
478
|
from reflex_silverpoint_react import sp_timeline
|
|
480
479
|
|
|
481
480
|
sp_timeline(
|
|
482
|
-
DATA, # TimelineJS data: title, events, eras (or
|
|
481
|
+
DATA, # TimelineJS data: title, events, eras (or any object with to_dict())
|
|
483
482
|
height=560,
|
|
484
483
|
ground="silverpoint",
|
|
485
484
|
substrate="cream",
|
|
@@ -564,7 +563,7 @@ The exported SVG carries its own ground colours, so it renders the same outside
|
|
|
564
563
|
## Demo app
|
|
565
564
|
|
|
566
565
|
```bash
|
|
567
|
-
uv venv && uv pip install -e
|
|
566
|
+
uv venv && uv pip install -e .
|
|
568
567
|
cd silverpoint_react_demo
|
|
569
568
|
uv run reflex run
|
|
570
569
|
```
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"""reflex-silverpoint-react: silverpoint charts and UI components for Reflex.
|
|
2
2
|
|
|
3
3
|
Charts and interface components drawn in the manner of a Renaissance silverpoint drawing,
|
|
4
|
-
wrapping ``@silverpoint/react
|
|
4
|
+
wrapping ``@silverpoint/react`` 0.7.0: the 60 charts, the dashboard, the 38 UI, composed and overlay
|
|
5
|
+
components, the palettes and the Knight Lab timeline.
|
|
5
6
|
"""
|
|
6
7
|
|
|
7
8
|
from .base import (
|
|
@@ -11,6 +12,7 @@ from .base import (
|
|
|
11
12
|
GroundName,
|
|
12
13
|
SilverpointChart,
|
|
13
14
|
SilverpointProvider,
|
|
15
|
+
silverpoint_palette,
|
|
14
16
|
silverpoint_provider,
|
|
15
17
|
)
|
|
16
18
|
from .catalog import CHARTS, COMMON_PROPS, FAMILIES, ChartInfo, PropDoc, chart_by_name, chart_by_slug
|
|
@@ -138,6 +140,18 @@ from .charts import (
|
|
|
138
140
|
wind_rose,
|
|
139
141
|
)
|
|
140
142
|
from .composed import (
|
|
143
|
+
SpAvatar,
|
|
144
|
+
SpAvatarGroup,
|
|
145
|
+
SpBreadcrumb,
|
|
146
|
+
SpCollapse,
|
|
147
|
+
SpCollapseItem,
|
|
148
|
+
SpDescriptions,
|
|
149
|
+
SpEmpty,
|
|
150
|
+
SpResult,
|
|
151
|
+
SpStatistic,
|
|
152
|
+
SpTable,
|
|
153
|
+
SpTextarea,
|
|
154
|
+
SpTimelineList,
|
|
141
155
|
sort_rows,
|
|
142
156
|
sp_avatar,
|
|
143
157
|
sp_avatar_group,
|
|
@@ -165,6 +179,15 @@ from .dashboard import (
|
|
|
165
179
|
)
|
|
166
180
|
from .helpers import chart_ref, download_svg, get_geometry, get_svg, tooltip_template
|
|
167
181
|
from .overlays import (
|
|
182
|
+
SpDrawer,
|
|
183
|
+
SpDropdownMenu,
|
|
184
|
+
SpModal,
|
|
185
|
+
SpPopover,
|
|
186
|
+
SpSelect,
|
|
187
|
+
SpToast,
|
|
188
|
+
SpToaster,
|
|
189
|
+
SpTooltip,
|
|
190
|
+
SpTrigger,
|
|
168
191
|
sp_drawer,
|
|
169
192
|
sp_dropdown_menu,
|
|
170
193
|
sp_modal,
|
|
@@ -176,13 +199,15 @@ from .overlays import (
|
|
|
176
199
|
sp_trigger,
|
|
177
200
|
)
|
|
178
201
|
from .palette import (
|
|
202
|
+
PALETTE_JS_FIELDS,
|
|
203
|
+
PALETTE_PAIRS,
|
|
179
204
|
PALETTE_PROPERTIES,
|
|
180
205
|
PALETTES,
|
|
181
206
|
Palette,
|
|
182
207
|
check_palette,
|
|
183
208
|
contrast_ratio,
|
|
184
209
|
palette_css,
|
|
185
|
-
|
|
210
|
+
palette_prop,
|
|
186
211
|
)
|
|
187
212
|
from .surfaces import (
|
|
188
213
|
SpGlyph,
|
|
@@ -194,7 +219,7 @@ from .surfaces import (
|
|
|
194
219
|
sp_pagination,
|
|
195
220
|
sp_surface,
|
|
196
221
|
)
|
|
197
|
-
from .timeline import sp_timeline, timeline_available
|
|
222
|
+
from .timeline import TIMELINEJS_VERSION, SpTimeline, sp_timeline, timeline_available
|
|
198
223
|
from .ui import (
|
|
199
224
|
SILVERPOINT_UI_STYLESHEET,
|
|
200
225
|
SilverpointUi,
|
|
@@ -254,11 +279,14 @@ __all__ = [
|
|
|
254
279
|
"DASHBOARD_DEFAULTS",
|
|
255
280
|
"FAMILIES",
|
|
256
281
|
"PALETTES",
|
|
282
|
+
"PALETTE_JS_FIELDS",
|
|
283
|
+
"PALETTE_PAIRS",
|
|
257
284
|
"PALETTE_PROPERTIES",
|
|
258
285
|
"SILVERPOINT_LIBRARY",
|
|
259
286
|
"SILVERPOINT_STYLESHEETS",
|
|
260
287
|
"SILVERPOINT_UI_STYLESHEET",
|
|
261
288
|
"SILVERPOINT_VERSION",
|
|
289
|
+
"TIMELINEJS_VERSION",
|
|
262
290
|
"UI_COMMON_PROPS",
|
|
263
291
|
"UI_COMPONENTS",
|
|
264
292
|
"UI_DEMOS",
|
|
@@ -321,27 +349,49 @@ __all__ = [
|
|
|
321
349
|
"SilverpointUi",
|
|
322
350
|
"SlopeChart",
|
|
323
351
|
"SpAlert",
|
|
352
|
+
"SpAvatar",
|
|
353
|
+
"SpAvatarGroup",
|
|
324
354
|
"SpBadge",
|
|
355
|
+
"SpBreadcrumb",
|
|
325
356
|
"SpButton",
|
|
326
357
|
"SpCard",
|
|
327
358
|
"SpCheckbox",
|
|
359
|
+
"SpCollapse",
|
|
360
|
+
"SpCollapseItem",
|
|
361
|
+
"SpDescriptions",
|
|
328
362
|
"SpDivider",
|
|
363
|
+
"SpDrawer",
|
|
364
|
+
"SpDropdownMenu",
|
|
365
|
+
"SpEmpty",
|
|
329
366
|
"SpGlyph",
|
|
330
367
|
"SpInput",
|
|
331
368
|
"SpInputNumber",
|
|
369
|
+
"SpModal",
|
|
332
370
|
"SpPagination",
|
|
371
|
+
"SpPopover",
|
|
333
372
|
"SpProgress",
|
|
334
373
|
"SpRadioGroup",
|
|
335
374
|
"SpRate",
|
|
375
|
+
"SpResult",
|
|
336
376
|
"SpSegmented",
|
|
377
|
+
"SpSelect",
|
|
337
378
|
"SpSkeleton",
|
|
338
379
|
"SpSlider",
|
|
380
|
+
"SpStatistic",
|
|
339
381
|
"SpSteps",
|
|
340
382
|
"SpSurface",
|
|
341
383
|
"SpSwitch",
|
|
342
384
|
"SpTabPanel",
|
|
385
|
+
"SpTable",
|
|
343
386
|
"SpTabs",
|
|
344
387
|
"SpTag",
|
|
388
|
+
"SpTextarea",
|
|
389
|
+
"SpTimeline",
|
|
390
|
+
"SpTimelineList",
|
|
391
|
+
"SpToast",
|
|
392
|
+
"SpToaster",
|
|
393
|
+
"SpTooltip",
|
|
394
|
+
"SpTrigger",
|
|
345
395
|
"SparklineRows",
|
|
346
396
|
"SquarifiedTreemap",
|
|
347
397
|
"StackedBarChart",
|
|
@@ -405,6 +455,7 @@ __all__ = [
|
|
|
405
455
|
"network_node",
|
|
406
456
|
"orbit_chart",
|
|
407
457
|
"palette_css",
|
|
458
|
+
"palette_prop",
|
|
408
459
|
"parallel_coordinates_chart",
|
|
409
460
|
"polar_bar_chart",
|
|
410
461
|
"polar_line_chart",
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* reflex-silverpoint-react — sp_trigger: a native <button> drawn as SpButton, that keeps every prop.
|
|
2
|
+
*
|
|
3
|
+
* An overlay of @silverpoint/react clones its trigger with aria-haspopup, aria-expanded,
|
|
4
|
+
* aria-controls, onPointerDown and onClick (useTrigger, REQ-500). SpButton 0.7.0 keeps only its own
|
|
5
|
+
* props, so those would be lost on it; this button renders the very tree @silverpoint/core's
|
|
6
|
+
* uiButtonView builds (resolveUi resolves ground, substrate, mode, size, frame variant and palette)
|
|
7
|
+
* and adds everything else it is given to the native element.
|
|
8
|
+
*/
|
|
9
|
+
const SP_TRIGGER_ATTRS = { class: "className", for: "htmlFor", readonly: "readOnly", tabindex: "tabIndex" };
|
|
10
|
+
|
|
11
|
+
function spTriggerStyle(text) {
|
|
12
|
+
const out = {};
|
|
13
|
+
for (const declaration of (text || "").split(";")) {
|
|
14
|
+
const colon = declaration.indexOf(":");
|
|
15
|
+
if (colon > 0) out[declaration.slice(0, colon).trim()] = declaration.slice(colon + 1).trim();
|
|
16
|
+
}
|
|
17
|
+
return out;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function spTriggerNode(node, content, extra) {
|
|
21
|
+
if ("text" in node) return node.text;
|
|
22
|
+
if ("slot" in node) return node.slot === "content" ? content : null;
|
|
23
|
+
const props = {};
|
|
24
|
+
for (const [name, value] of Object.entries(node.attrs)) {
|
|
25
|
+
if (value === undefined) continue;
|
|
26
|
+
props[SP_TRIGGER_ATTRS[name] || name] = name === "style" ? spTriggerStyle(value) : value;
|
|
27
|
+
}
|
|
28
|
+
if (extra) {
|
|
29
|
+
const { style, ...rest } = extra;
|
|
30
|
+
Object.assign(props, rest);
|
|
31
|
+
if (style) props.style = { ...(props.style || {}), ...style };
|
|
32
|
+
}
|
|
33
|
+
return createElement(node.tag, props, ...node.children.map((child) => spTriggerNode(child, content)));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function useSpTriggerForced() {
|
|
37
|
+
const [forced, setForced] = useState(false);
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
if (typeof matchMedia !== "function") return undefined;
|
|
40
|
+
const query = matchMedia(FORCED_PRECISION_QUERY);
|
|
41
|
+
const update = () => setForced(query.matches);
|
|
42
|
+
update();
|
|
43
|
+
query.addEventListener?.("change", update);
|
|
44
|
+
return () => query.removeEventListener?.("change", update);
|
|
45
|
+
}, []);
|
|
46
|
+
return forced;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const SilverpointTrigger = forwardRef(function SilverpointTrigger(
|
|
50
|
+
{ ground, substrate, mode, size, seed, palette, variant, chevron, disabled, label, children, className, id, ...rest },
|
|
51
|
+
ref,
|
|
52
|
+
) {
|
|
53
|
+
const forcedPrecision = useSpTriggerForced();
|
|
54
|
+
const props = { ground, substrate, mode, size, seed, palette, variant, disabled, label, className, id, type: "button" };
|
|
55
|
+
const resolved = resolveUi(props, { forcedPrecision });
|
|
56
|
+
const text = typeof children === "string" || typeof children === "number" ? String(children) : children == null ? undefined : "·";
|
|
57
|
+
const view = uiButtonView(props, resolved, { text });
|
|
58
|
+
// The chevron sits beside the label, as SpButton's own danger cross does.
|
|
59
|
+
const tree = chevron
|
|
60
|
+
? { ...view, children: [...view.children, { tag: "svg", attrs: { part: "sp-mark", "data-glyph": "chevronDown", viewBox: "0 0 16 16", "aria-hidden": "true" }, children: [{ tag: "path", attrs: { d: UI_GLYPHS.chevronDown }, children: [] }] }] }
|
|
61
|
+
: view;
|
|
62
|
+
return spTriggerNode(tree, children, { ...rest, ref });
|
|
63
|
+
});
|