Pre Release New Changes
This commit is contained in:
@@ -1,23 +1,71 @@
|
||||
# WRNexus UI component showcase
|
||||
|
||||
This example renders every component from `@wrnexus/ui` with representative,
|
||||
prop-driven data. Pages are generated from `packages/ui/component-reference.json`
|
||||
so coverage stays synchronized with the packaged component catalog.
|
||||
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`. The index links to the category catalog, and every
|
||||
component card opens a dedicated documentation page with three live use cases,
|
||||
usage examples, its prop API, events, slots, and related navigation.
|
||||
Open `http://localhost:3000`.
|
||||
|
||||
After changing UI component props, regenerate and verify the catalog:
|
||||
## 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
|
||||
```
|
||||
|
||||
Files under `app/pages/` are generated. Customize the generator or stylesheet
|
||||
instead of editing those pages directly.
|
||||
Review representative component pages at mobile, tablet, and desktop widths and
|
||||
in light, dark, keyboard-only, and reduced-motion modes before publishing.
|
||||
|
||||
Reference in New Issue
Block a user