Skip to content

Commit 4b85806

Browse files
serpentbladeclaude
serpentblade
and
claude
committed
docs: dedicated /components/ section for @rozie-ui families (move from /guide/)
- git mv 33 component pages (11 families x showcase/comparison/demo) from docs/guide/ to docs/components/ (history preserved) - rewrite absolute /guide/<component> links to /components/<component> across all docs source (.md + config.ts), longest-basename-first with boundary guard - add Components nav entry; split the 11 @rozie-ui sidebar groups out of the /guide/ rail into a new /components/ sidebar key (Overview + 11 collapsed groups) - new docs/components/index.md catalog landing page - repoint guideRelPath docs/guide/<name>.md -> docs/components/<name>.md in all 11 codegen.mjs + matching readme.mjs prose (SKIP_GUIDE env names unchanged) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 36998c1 commit 4b85806

60 files changed

Lines changed: 242 additions & 195 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/.vitepress/config.ts‎

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export default defineConfig({
6868
},
6969
nav: [
7070
{ text: 'Guide', link: '/guide/why' },
71+
{ text: 'Components', link: '/components/' },
7172
{ text: 'Examples', link: '/examples/' },
7273
{ text: 'Compatibility', link: '/compatibility' },
7374
{ text: 'GitHub', link: 'https://github.com/One-Learning-Community/rozie.js' },
@@ -101,94 +102,111 @@ export default defineConfig({
101102
{ text: 'For vanilla-JS + plugin shops', link: '/guide/for-vanilla-js-shops' },
102103
],
103104
},
105+
],
106+
'/components/': [
107+
{
108+
text: 'Overview',
109+
items: [{ text: 'All components', link: '/components/' }],
110+
},
104111
{
105112
text: '@rozie-ui/sortable-list',
113+
collapsed: true,
106114
items: [
107-
{ text: 'SortableList — showcase & API', link: '/guide/sortable-list' },
108-
{ text: 'Sortable libraries comparison', link: '/guide/sortable-comparison' },
115+
{ text: 'SortableList — showcase & API', link: '/components/sortable-list' },
116+
{ text: 'Sortable libraries comparison', link: '/components/sortable-comparison' },
109117
{ text: 'SortableList example & output', link: '/examples/sortable-list' },
110-
{ text: 'SortableList — live demo', link: '/guide/sortable-list-demo' },
118+
{ text: 'SortableList — live demo', link: '/components/sortable-list-demo' },
111119
],
112120
},
113121
{
114122
text: '@rozie-ui/flatpickr',
123+
collapsed: true,
115124
items: [
116-
{ text: 'Flatpickr — showcase & API', link: '/guide/flatpickr' },
117-
{ text: 'Flatpickr libraries comparison', link: '/guide/flatpickr-comparison' },
125+
{ text: 'Flatpickr — showcase & API', link: '/components/flatpickr' },
126+
{ text: 'Flatpickr libraries comparison', link: '/components/flatpickr-comparison' },
118127
{ text: 'Flatpickr example & output', link: '/examples/flatpickr' },
119-
{ text: 'Flatpickr — live demo', link: '/guide/flatpickr-demo' },
128+
{ text: 'Flatpickr — live demo', link: '/components/flatpickr-demo' },
120129
],
121130
},
122131
{
123132
text: '@rozie-ui/fullcalendar',
133+
collapsed: true,
124134
items: [
125-
{ text: 'FullCalendar — showcase & API', link: '/guide/fullcalendar' },
126-
{ text: 'FullCalendar libraries comparison', link: '/guide/fullcalendar-comparison' },
127-
{ text: 'FullCalendar — live demo', link: '/guide/fullcalendar-demo' },
135+
{ text: 'FullCalendar — showcase & API', link: '/components/fullcalendar' },
136+
{ text: 'FullCalendar libraries comparison', link: '/components/fullcalendar-comparison' },
137+
{ text: 'FullCalendar — live demo', link: '/components/fullcalendar-demo' },
128138
],
129139
},
130140
{
131141
text: '@rozie-ui/codemirror',
142+
collapsed: true,
132143
items: [
133-
{ text: 'CodeMirror — showcase & API', link: '/guide/codemirror' },
134-
{ text: 'CodeMirror libraries comparison', link: '/guide/codemirror-comparison' },
135-
{ text: 'CodeMirror — live demo', link: '/guide/codemirror-demo' },
144+
{ text: 'CodeMirror — showcase & API', link: '/components/codemirror' },
145+
{ text: 'CodeMirror libraries comparison', link: '/components/codemirror-comparison' },
146+
{ text: 'CodeMirror — live demo', link: '/components/codemirror-demo' },
136147
],
137148
},
138149
{
139150
text: '@rozie-ui/chartjs',
151+
collapsed: true,
140152
items: [
141-
{ text: 'Chart.js — showcase & API', link: '/guide/chartjs' },
142-
{ text: 'Chart.js libraries comparison', link: '/guide/chartjs-comparison' },
143-
{ text: 'Chart.js — live demo', link: '/guide/chartjs-demo' },
153+
{ text: 'Chart.js — showcase & API', link: '/components/chartjs' },
154+
{ text: 'Chart.js libraries comparison', link: '/components/chartjs-comparison' },
155+
{ text: 'Chart.js — live demo', link: '/components/chartjs-demo' },
144156
],
145157
},
146158
{
147159
text: '@rozie-ui/tiptap',
160+
collapsed: true,
148161
items: [
149-
{ text: 'TipTap — showcase & API', link: '/guide/tiptap' },
150-
{ text: 'TipTap libraries comparison', link: '/guide/tiptap-comparison' },
151-
{ text: 'TipTap — live demo', link: '/guide/tiptap-demo' },
162+
{ text: 'TipTap — showcase & API', link: '/components/tiptap' },
163+
{ text: 'TipTap libraries comparison', link: '/components/tiptap-comparison' },
164+
{ text: 'TipTap — live demo', link: '/components/tiptap-demo' },
152165
],
153166
},
154167
{
155168
text: '@rozie-ui/maplibre',
169+
collapsed: true,
156170
items: [
157-
{ text: 'MapLibre — showcase & API', link: '/guide/maplibre' },
158-
{ text: 'MapLibre libraries comparison', link: '/guide/maplibre-comparison' },
159-
{ text: 'MapLibre — live demo', link: '/guide/maplibre-demo' },
171+
{ text: 'MapLibre — showcase & API', link: '/components/maplibre' },
172+
{ text: 'MapLibre libraries comparison', link: '/components/maplibre-comparison' },
173+
{ text: 'MapLibre — live demo', link: '/components/maplibre-demo' },
160174
],
161175
},
162176
{
163177
text: '@rozie-ui/cropper',
178+
collapsed: true,
164179
items: [
165-
{ text: 'Cropper — showcase & API', link: '/guide/cropper' },
166-
{ text: 'Cropper libraries comparison', link: '/guide/cropper-comparison' },
167-
{ text: 'Cropper — live demo', link: '/guide/cropper-demo' },
180+
{ text: 'Cropper — showcase & API', link: '/components/cropper' },
181+
{ text: 'Cropper libraries comparison', link: '/components/cropper-comparison' },
182+
{ text: 'Cropper — live demo', link: '/components/cropper-demo' },
168183
],
169184
},
170185
{
171186
text: '@rozie-ui/pdf',
187+
collapsed: true,
172188
items: [
173-
{ text: 'PdfViewer — showcase & API', link: '/guide/pdf' },
174-
{ text: 'PDF libraries comparison', link: '/guide/pdf-comparison' },
175-
{ text: 'PdfViewer — live demo', link: '/guide/pdf-demo' },
189+
{ text: 'PdfViewer — showcase & API', link: '/components/pdf' },
190+
{ text: 'PDF libraries comparison', link: '/components/pdf-comparison' },
191+
{ text: 'PdfViewer — live demo', link: '/components/pdf-demo' },
176192
],
177193
},
178194
{
179195
text: '@rozie-ui/rete',
196+
collapsed: true,
180197
items: [
181-
{ text: 'FlowCanvas — showcase & API', link: '/guide/rete' },
182-
{ text: 'Node-flow editor comparison', link: '/guide/rete-comparison' },
183-
{ text: 'FlowCanvas — live demo', link: '/guide/rete-demo' },
198+
{ text: 'FlowCanvas — showcase & API', link: '/components/rete' },
199+
{ text: 'Node-flow editor comparison', link: '/components/rete-comparison' },
200+
{ text: 'FlowCanvas — live demo', link: '/components/rete-demo' },
184201
],
185202
},
186203
{
187204
text: '@rozie-ui/embla',
205+
collapsed: true,
188206
items: [
189-
{ text: 'Embla — showcase & API', link: '/guide/embla' },
190-
{ text: 'Embla libraries comparison', link: '/guide/embla-comparison' },
191-
{ text: 'Embla — live demo', link: '/guide/embla-demo' },
207+
{ text: 'Embla — showcase & API', link: '/components/embla' },
208+
{ text: 'Embla libraries comparison', link: '/components/embla-comparison' },
209+
{ text: 'Embla — live demo', link: '/components/embla-demo' },
192210
],
193211
},
194212
],

docs/guide/chartjs-comparison.md renamed to docs/components/chartjs-comparison.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ quality varies wildly: React and Vue are served by large, healthy wrappers;
77
Angular and Svelte have solid maintained ones; **Solid's only option has been
88
frozen since mid-2024; and Lit has no modern Chart.js wrapper at all.**
99

10-
Rozie's [`@rozie-ui/chartjs`](/guide/chartjs) compiles one `.rozie` file to
10+
Rozie's [`@rozie-ui/chartjs`](/components/chartjs) compiles one `.rozie` file to
1111
idiomatic React, Vue, Svelte, Angular, Solid, and Lit consumers — six framework
1212
targets from a single source, each a pre-compiled `@rozie-ui/chartjs-*` package
1313
with no Rozie toolchain required. The same generic `Chart` (the `type` prop
@@ -30,7 +30,7 @@ of absence.)
3030

3131
| Wrapper | Frameworks | Latest published | Framework support | Structured events | Imperative handle | HTML-tooltip slot | Per-type components | Selective (tree-shakable) registration |
3232
| --- | --- | --- | --- | :---: | :---: | :---: | :---: | :---: |
33-
| **[Rozie @rozie-ui/chartjs](/guide/chartjs)** | **6 — React + Vue + Svelte + Angular + Solid + Lit** | this repo (2026-06) | R18+ / V3.4+ / Sv5 / **Ng19+ signals** / Solid / Lit | ✓ **3 uniform** (`click`/`hover`/`datasetClick`, structured, composed) on all 6 | ✓ **uniform `$expose`** (8 verbs) on all 6 | ✓ **portal slot** on all 6 | ✓ **8 typed components** + generic `Chart`, all 6 | ✓ consumer-registers + `/auto` entry (per-type tree-shakes on source leaves) |
33+
| **[Rozie @rozie-ui/chartjs](/components/chartjs)** | **6 — React + Vue + Svelte + Angular + Solid + Lit** | this repo (2026-06) | R18+ / V3.4+ / Sv5 / **Ng19+ signals** / Solid / Lit | ✓ **3 uniform** (`click`/`hover`/`datasetClick`, structured, composed) on all 6 | ✓ **uniform `$expose`** (8 verbs) on all 6 | ✓ **portal slot** on all 6 | ✓ **8 typed components** + generic `Chart`, all 6 | ✓ consumer-registers + `/auto` entry (per-type tree-shakes on source leaves) |
3434
| [react-chartjs-2](https://react-chartjs-2.js.org/) | React | **5.3.1** · 2025-10 | React 16.8 – **19** | ~ `options.onClick` + `getElement*AtEvent` helpers (no React events) | ✓ `ref` → Chart.js instance | ✗ external-handler only (no React slot) | ✓ 8 typed + generic `Chart` | ✓ typed components auto-register their controller |
3535
| [vue-chartjs](https://vue-chartjs.org/) | Vue 3 | **5.3.3** · 2025 | Vue 3 (3.x+) | ✗ emits no Vue events | ✓ `ref.chart` → instance | ✗ external-handler only (canvas-fallback slot only) | ✓ 8 typed + generic + `createTypedChart` | ✓ manual `ChartJS.register(...)` |
3636
| [ng2-charts](https://valor-software.com/ng2-charts) | Angular | **10.0.0** · 2026-03 *(v8 = Ng19)* | Angular 17 – **21** *(no signals — `@Input`/`OnChanges`)* | ✓ `chartClick` / `chartHover` (2, Angular only) | ✓ `ViewChild(BaseChartDirective).chart` | ✗ no `ng-template` tooltip | ~ one `canvas[baseChart]` directive (`type` input) | ✓ `provideCharts(...)` selective |
@@ -70,7 +70,7 @@ dates before relying on them.
7070
vue-chartjs emits **no** Vue events at all; ng2-charts is the only one with
7171
native framework events (`chartClick` / `chartHover`); Solid and Lit have none.
7272
Rozie surfaces **three** events — [`@click` / `@hover` /
73-
`@datasetClick`](/guide/chartjs#events) — with structured payloads
73+
`@datasetClick`](/components/chartjs#events) — with structured payloads
7474
(`{ event, elements, chart }`, the hit elements already resolved via
7575
`getElementsAtEventForMode`) **identically on all six targets**, and each is
7676
*composed* over any consumer-supplied `options.onClick`/`onHover` rather than
@@ -81,7 +81,7 @@ dates before relying on them.
8181
one of them a custom HTML tooltip means hand-writing
8282
`options.plugins.tooltip.external`, a DOM-building callback that lives outside
8383
the framework's rendering model. Rozie surfaces it as
84-
[one `tooltip` portal slot](/guide/chartjs#slots) that emits the framework's
84+
[one `tooltip` portal slot](/components/chartjs#slots) that emits the framework's
8585
idiomatic consumer surface — React/Solid render-prop, Vue scoped-slot, Svelte
8686
snippet, Angular `ng-template` content-child, Lit slot bridge — fed the live
8787
tooltip model (`{ title, body, dataPoints, opacity }`). The slot is guarded:
@@ -94,7 +94,7 @@ dates before relying on them.
9494
Chart.js instance its own way — a React `ref` to the instance, vue-chartjs's
9595
`ref.chart`, ng2-charts's `ViewChild(BaseChartDirective).chart`, svelte-chartjs's
9696
`bind:chart`, and nothing documented on Solid/Lit. Rozie's
97-
[`$expose` handle](/guide/chartjs#imperative-handle) is the *same* eight verbs —
97+
[`$expose` handle](/components/chartjs#imperative-handle) is the *same* eight verbs —
9898
`getChart` / `updateChart` / `resizeChart` / `resetChart` / `renderChart` /
9999
`stopChart` / `clearChart` / **`toBase64Image`** (PNG export) — on every target,
100100
grabbed with each framework's native ref mechanism. `getChart()` returns the raw
@@ -109,7 +109,7 @@ dates before relying on them.
109109

110110
- **`:plugins` consumer-extensibility, applied uniformly.** Chart.js plugins
111111
(datalabels, annotation, zoom, a custom crosshair) are passed per-instance
112-
through [`:plugins`](/guide/chartjs#extending-with-plugins) — the Chart.js
112+
through [`:plugins`](/components/chartjs#extending-with-plugins) — the Chart.js
113113
analog of an options bag — identically on all six targets, with no per-plugin
114114
wrapper code and zero bundle cost for plugins you don't engage. (This matches
115115
the per-instance `plugins` prop the React/Vue/Svelte wrappers also offer; the
@@ -133,7 +133,7 @@ comparison credible, and it doubles as Rozie's own roadmap.
133133
controller. Both are resolved: the generic `Chart` no longer auto-registers
134134
(the consumer registers what they use, or imports the `/auto` kitchen-sink
135135
entry), and each package now also exports the eight
136-
[per-type components](/guide/chartjs#per-type-components) — `Line`/`Bar`/…/`Bubble`
136+
[per-type components](/components/chartjs#per-type-components) — `Line`/`Bar`/…/`Bubble`
137137
— each registering only its own controller set. The bundled React/Solid/Lit
138138
packages now expose a **per-variant subpath** for each typed component
139139
(`@rozie-ui/chartjs-react/line`, `…/bar`, …, `…/bubble`), and each subpath
@@ -146,7 +146,7 @@ comparison credible, and it doubles as Rozie's own roadmap.
146146

147147
- **`datasetIdKey` and a11y `fallback` — now covered.** The `datasetIdKey` prop
148148
(default `'label'`) matches datasets by a stable key across updates (with index
149-
fallback), and a non-portal [`fallback` slot](/guide/chartjs#slots) renders a11y
149+
fallback), and a non-portal [`fallback` slot](/components/chartjs#slots) renders a11y
150150
content inside the `<canvas>` (alongside the `ariaLabel` prop) — closing the
151151
react/vue parity gap on both.
152152

@@ -159,7 +159,7 @@ comparison credible, and it doubles as Rozie's own roadmap.
159159

160160
## Try it
161161

162-
The [`@rozie-ui/chartjs` showcase + API reference](/guide/chartjs) documents the
162+
The [`@rozie-ui/chartjs` showcase + API reference](/components/chartjs) documents the
163163
`@rozie-ui/chartjs-*` packages — one pre-compiled, per-framework install
164164
(`npm i @rozie-ui/chartjs-react chart.js`, etc.). The
165165
[`ChartScreenshotDemo` source](https://github.com/One-Learning-Community/rozie.js/blob/main/examples/demos/ChartScreenshotDemo.rozie)

docs/guide/chartjs-demo.md renamed to docs/components/chartjs-demo.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ This is the **real `@rozie-ui/chartjs-vue` package** running on this page (ViteP
9393
</div>
9494
</ClientOnly>
9595

96-
The `type` prop is bound reactively — flipping it re-creates the instance (Chart.js has no stable runtime type-swap), while **Randomize** mutates the bound `data` object so the wrapper reconciles it into the live chart in place. The **Export PNG** button drives the imperative handle (`toBase64Image`). See the [full API](/guide/chartjs) for the complete prop / event / handle surface.
96+
The `type` prop is bound reactively — flipping it re-creates the instance (Chart.js has no stable runtime type-swap), while **Randomize** mutates the bound `data` object so the wrapper reconciles it into the live chart in place. The **Export PNG** button drives the imperative handle (`toBase64Image`). See the [full API](/components/chartjs) for the complete prop / event / handle surface.
9797

9898
## One source, six outputs
9999

@@ -118,7 +118,7 @@ Each is a real, idiomatic component for its framework — React `forwardRef` + h
118118

119119
## See also
120120

121-
- [Chart.js — showcase & API](/guide/chartjs) — install, quick starts for all six frameworks, per-type components, and the full reference.
121+
- [Chart.js — showcase & API](/components/chartjs) — install, quick starts for all six frameworks, per-type components, and the full reference.
122122
- [The LineChart example](/examples/line-chart) — a focused single-type walkthrough of the same wrapper.
123123

124124
<style scoped>

docs/guide/chartjs.md renamed to docs/components/chartjs.md

File renamed without changes.

0 commit comments

Comments
 (0)