120 lines
4.0 KiB
Markdown
120 lines
4.0 KiB
Markdown
# WRNexusJS component showcase complete update
|
|
|
|
This patch upgrades `examples/component-showcase` so the showcase follows the
|
|
current `@wrnexus/ui` source automatically and documents the new and recently
|
|
repaired components through real detail-page examples.
|
|
|
|
## Apply
|
|
|
|
From the extracted patch directory:
|
|
|
|
```powershell
|
|
powershell `
|
|
-ExecutionPolicy Bypass `
|
|
-File ".\APPLY_COMPONENT_SHOWCASE_UPDATE.ps1" `
|
|
-Root "E:\WireJS"
|
|
```
|
|
|
|
The script backs up replaced source files, the generated component reference,
|
|
the generated pages, layouts, and showcase manifest under:
|
|
|
|
```text
|
|
E:\WireJS\.wrnexus\component-showcase-backup-<timestamp>
|
|
```
|
|
|
|
It then regenerates the current UI reference, regenerates every showcase page,
|
|
and runs the component showcase check. Use `-SkipValidation` only when you need
|
|
to copy and generate first and validate manually afterward.
|
|
|
|
## Main changes
|
|
|
|
### Complete dynamic catalog
|
|
|
|
- Generates one detail page for every unique component declaration.
|
|
- Deduplicates legacy lowercase component files in the reference generator and
|
|
prefers the canonical `<ComponentName>.wrn` source.
|
|
- Uses only explicitly declared `@event ... = function` entries as the public
|
|
event contract.
|
|
- Generates `showcase-manifest.json` with component, category, demo, prop, slot,
|
|
event, and profile coverage.
|
|
|
|
### Component-specific examples
|
|
|
|
`scripts/showcase-profiles.mjs` contains production use cases for the new and
|
|
recently repaired components, including:
|
|
|
|
- PublicPageShell, Section, SectionHeader, MarketingSectionHeader
|
|
- AnnouncementBar, Breadcrumb, PageHeader, TextLink
|
|
- Hero, HeroActions, SplitHero
|
|
- FeatureGrid, FeatureCard, FeatureIconCard
|
|
- MetricGrid, MetricCard, StatsBar
|
|
- CTASection, BackToTop, Footer
|
|
- ContextMenu, Drawer, Dropdown, Modal, Popover, Tooltip
|
|
- Container, Grid, Columns, Card, Link, Image, SearchBox, Map, List, Marquee,
|
|
Tabs, Timeline, Typography, and Divider
|
|
|
|
Every other catalog component keeps responsive generated baseline examples.
|
|
|
|
### Correct WRN source generation
|
|
|
|
- Uses public component tags such as `<MetricGrid />` instead of legacy mounts.
|
|
- Self-closes components without slots and uses paired tags only when content is
|
|
present.
|
|
- Uses `data-slot="..."` for named WRNexusJS slots.
|
|
- Uses single-quoted dynamic WRN expressions in playground previews.
|
|
- Safely serializes arrays and objects without breaking on apostrophes in data
|
|
or data URLs.
|
|
|
|
### Typed playground
|
|
|
|
- Boolean controls preserve explicit `true` and `false` values.
|
|
- Number controls remain numbers.
|
|
- Array and object controls are validated JSON and remain structured values.
|
|
- Free-form props such as icons, labels, IDs, and URLs remain text inputs.
|
|
- Enum controls come from explicit public showcase profiles rather than source
|
|
comparisons, preventing false VS Code-style restrictions.
|
|
- Preview replacement uses `replaceChildren`, rehydrates WRN scopes, rebinds the
|
|
theme runtime, and never uses unsafe `innerHTML`.
|
|
- Interactive components display live `event.detail` output.
|
|
|
|
### Responsive detail pages
|
|
|
|
The showcase stylesheet now gives shell, hero, grid, statistics, CTA, footer,
|
|
and overlay components the correct preview width and height. In particular,
|
|
MetricGrid and FeatureGrid use the complete available stage instead of being
|
|
compressed into narrow cards.
|
|
|
|
### Event documentation
|
|
|
|
Every component with declared public events receives:
|
|
|
|
- a complete event list
|
|
- declarative `.wrn` handler examples
|
|
- browser `addEventListener` examples
|
|
- live event output in the playground
|
|
|
|
### Tests
|
|
|
|
The test suite is manifest-driven rather than using hardcoded component or demo
|
|
counts. It verifies generated coverage, typed playground behavior, safe source
|
|
syntax, profile coverage, event documentation, responsive stages, specialized
|
|
form examples, and compilation of every generated page.
|
|
|
|
## Manual commands
|
|
|
|
```powershell
|
|
cd E:\WireJS
|
|
bun run scripts/generate-ui-component-reference.mjs
|
|
|
|
cd E:\WireJS\examples\component-showcase
|
|
bun run generate
|
|
bun run test
|
|
bun run build
|
|
```
|
|
|
|
For the complete example validation:
|
|
|
|
```powershell
|
|
bun run check
|
|
```
|