72 lines
2.1 KiB
Markdown
72 lines
2.1 KiB
Markdown
# WRNexus UI component showcase
|
|
|
|
The showcase is generated from `packages/ui/component-reference.json`. It stays
|
|
synchronized with the current component source rather than maintaining a second
|
|
hand-written catalog.
|
|
|
|
```bash
|
|
bun run --cwd examples/component-showcase dev
|
|
```
|
|
|
|
Open `http://localhost:3000`.
|
|
|
|
## Detail-page coverage
|
|
|
|
Every current UI component receives a dedicated detail page with:
|
|
|
|
- an interactive server-rendered playground for every declared prop
|
|
- typed boolean, number, array, and object controls
|
|
- public component-tag syntax with single-quoted dynamic WRN expressions
|
|
- component-specific production use cases when a profile exists
|
|
- responsive fallback examples for every remaining component
|
|
- copyable `.wrn` source beside every live preview
|
|
- complete props, slots, and explicitly declared public events
|
|
- live `event.detail` output for interactive components
|
|
- previous and next component navigation
|
|
|
|
The specialized profiles for new and recently repaired components live in:
|
|
|
|
```text
|
|
scripts/showcase-profiles.mjs
|
|
```
|
|
|
|
Update that file to add product-quality examples or public enum options. Do not
|
|
infer allowed prop values from implementation comparisons; unrestricted values
|
|
such as icon classes, labels, IDs, and URLs must remain free-form inputs.
|
|
|
|
## Generated files
|
|
|
|
The generator creates:
|
|
|
|
```text
|
|
app/layouts/showcase.wrn
|
|
app/layouts/document.wrn
|
|
app/pages/*.wrn
|
|
app/pages/components/*.wrn
|
|
showcase-manifest.json
|
|
```
|
|
|
|
`showcase-manifest.json` records component, category, demo, prop, slot, and event
|
|
coverage and is used by the test suite. Do not hand-edit generated pages.
|
|
|
|
## Validation
|
|
|
|
After changing UI components, metadata, profiles, the playground, or showcase
|
|
styles, run:
|
|
|
|
```bash
|
|
bun run scripts/generate-ui-component-reference.mjs
|
|
bun run --cwd examples/component-showcase generate
|
|
bun run --cwd examples/component-showcase test
|
|
bun run --cwd examples/component-showcase build
|
|
```
|
|
|
|
The complete local check is:
|
|
|
|
```bash
|
|
bun run --cwd examples/component-showcase check
|
|
```
|
|
|
|
Review representative component pages at mobile, tablet, and desktop widths and
|
|
in light, dark, keyboard-only, and reduced-motion modes before publishing.
|