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 `
  -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:

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

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:

bun run check

4.0 KiB Raw Blame History