From 186f97de371de0c44fd182ec41766a5f4a5122b9 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Mon, 10 Aug 2026 14:00:37 +0530 Subject: [PATCH] feat: sync showcase with WRNexusJS 0.8.7 --- README.md | 66 +- app/layouts/showcase.wrn | 33 +- app/pages/accessibility.wrn | 7 +- app/pages/advanced-forms.wrn | 54 +- app/pages/base.wrn | 130 +- app/pages/{blocks.wrn => block-library.wrn} | 2 +- app/pages/colors.wrn | 7 +- app/pages/components/accordion.wrn | 1499 ++++++--- app/pages/components/advanced-date-picker.wrn | 668 ---- .../components/advanced-range-slider.wrn | 668 ---- app/pages/components/advanced-select.wrn | 1199 +++---- app/pages/components/alert.wrn | 1527 ++++++--- app/pages/components/announcement-bar.wrn | 175 + app/pages/components/auth-form.wrn | 169 + app/pages/components/auth-split-layout.wrn | 281 ++ app/pages/components/avatar-group.wrn | 823 +++-- app/pages/components/avatar.wrn | 390 +-- app/pages/components/back-to-top.wrn | 152 + app/pages/components/badge.wrn | 355 +- app/pages/components/blockquote.wrn | 60 +- app/pages/components/breadcrumb.wrn | 526 +-- app/pages/components/button-group.wrn | 823 +++-- app/pages/components/button.wrn | 67 +- app/pages/components/card.wrn | 2286 +++++++++---- app/pages/components/carousel.wrn | 1356 ++++---- app/pages/components/chart.wrn | 267 +- app/pages/components/chat-bubble.wrn | 860 +++-- app/pages/components/checkbox.wrn | 1576 ++++++--- app/pages/components/clipboard.wrn | 619 +--- app/pages/components/collapse.wrn | 1188 ++++++- app/pages/components/color-picker.wrn | 258 +- app/pages/components/columns.wrn | 58 +- app/pages/components/combo-box.wrn | 679 ++-- app/pages/components/confetti.wrn | 607 +--- app/pages/components/container.wrn | 59 +- app/pages/components/context-menu.wrn | 354 +- app/pages/components/copy-markup.wrn | 135 - app/pages/components/ctasection.wrn | 774 +++++ app/pages/components/custom-scrollbar.wrn | 73 +- app/pages/components/data-map.wrn | 245 +- app/pages/components/data-table.wrn | 1580 ++++----- app/pages/components/date-picker.wrn | 74 +- app/pages/components/device-frame.wrn | 245 +- app/pages/components/divider.wrn | 54 +- app/pages/components/drag-and-drop.wrn | 267 +- app/pages/components/drawer.wrn | 158 +- app/pages/components/dropdown.wrn | 371 ++- app/pages/components/feature-card.wrn | 211 ++ app/pages/components/feature-grid.wrn | 408 +++ app/pages/components/feature-icon-card.wrn | 167 + app/pages/components/file-input.wrn | 287 +- app/pages/components/file-upload-progress.wrn | 174 +- app/pages/components/file-upload.wrn | 668 ---- app/pages/components/footer.wrn | 575 ++++ app/pages/components/grid.wrn | 67 +- app/pages/components/hero-actions.wrn | 293 ++ app/pages/components/hero.wrn | 1705 ++++++++++ app/pages/components/image.wrn | 65 +- app/pages/components/input-group.wrn | 301 +- app/pages/components/input-number.wrn | 106 +- app/pages/components/input.wrn | 296 +- app/pages/components/kbd.wrn | 22 +- app/pages/components/layout-splitter.wrn | 103 +- app/pages/components/legend-indicator.wrn | 243 +- app/pages/components/link.wrn | 63 +- app/pages/components/list-group.wrn | 243 +- app/pages/components/list.wrn | 505 +-- app/pages/components/map.wrn | 508 +-- .../components/marketing-section-header.wrn | 171 + app/pages/components/marquee.wrn | 502 +-- app/pages/components/mega-menu.wrn | 541 +-- app/pages/components/metric-card.wrn | 213 ++ app/pages/components/metric-grid.wrn | 392 +++ app/pages/components/modal.wrn | 185 +- app/pages/components/nav.wrn | 540 +-- app/pages/components/navbar.wrn | 1090 +++--- app/pages/components/page-header.wrn | 564 ++++ app/pages/components/pagination.wrn | 633 +--- app/pages/components/pin-input.wrn | 118 +- app/pages/components/popover.wrn | 180 +- app/pages/components/portal-dashboard.wrn | 2319 +++++++++++++ app/pages/components/preference-switcher.wrn | 154 + app/pages/components/progress.wrn | 26 +- app/pages/components/public-page-shell.wrn | 190 ++ app/pages/components/radio.wrn | 1014 +++--- app/pages/components/range-slider.wrn | 893 +++-- app/pages/components/rating.wrn | 243 +- app/pages/components/scrollspy.wrn | 506 +-- app/pages/components/search-box.wrn | 81 +- app/pages/components/section-header.wrn | 160 + app/pages/components/section.wrn | 137 + app/pages/components/select.wrn | 1501 +++++++-- app/pages/components/sidebar.wrn | 557 +--- app/pages/components/skeleton.wrn | 22 +- app/pages/components/spinner.wrn | 22 +- app/pages/components/split-hero.wrn | 1238 +++++++ app/pages/components/stats-bar.wrn | 351 ++ app/pages/components/stepper.wrn | 661 ++-- app/pages/components/strong-password.wrn | 73 +- app/pages/components/styled-icon.wrn | 228 +- app/pages/components/switch.wrn | 269 +- app/pages/components/table.wrn | 1201 ------- app/pages/components/tabs.wrn | 580 ++-- app/pages/components/text-link.wrn | 160 + app/pages/components/textarea.wrn | 274 +- app/pages/components/time-picker.wrn | 310 +- app/pages/components/timeline.wrn | 512 +-- app/pages/components/toast-notifications.wrn | 668 ---- app/pages/components/toast.wrn | 668 ---- app/pages/components/toaster.wrn | 109 + app/pages/components/toggle-count.wrn | 759 ++++- app/pages/components/toggle-password.wrn | 87 +- app/pages/components/tooltip.wrn | 128 +- app/pages/components/tree-view.wrn | 811 ++++- app/pages/components/typography.wrn | 57 +- app/pages/components/wysiwyg-editor.wrn | 255 +- app/pages/core.wrn | 67 + app/pages/dark-mode.wrn | 9 +- app/pages/data.wrn | 47 + app/pages/fonts.wrn | 9 +- app/pages/forms.wrn | 62 +- app/pages/framework-guides.wrn | 7 +- app/pages/index.wrn | 14 +- app/pages/installation.wrn | 9 +- app/pages/integrations.wrn | 92 +- app/pages/layout.wrn | 129 +- app/pages/marketing.wrn | 132 + app/pages/navigation.wrn | 72 +- app/pages/overlays.wrn | 48 +- app/pages/resources.wrn | 8 +- app/pages/sizing.wrn | 7 +- app/pages/tables.wrn | 10 +- app/pages/templates.wrn | 2 +- app/pages/themes.wrn | 10 +- app/pages/v06-functions.wrn | 16 + app/pages/v06-imports.wrn | 16 + app/pages/v06-migration.wrn | 16 + app/pages/v06-outputs.wrn | 16 + app/pages/v06-runtime.wrn | 16 + app/pages/v06-state.wrn | 16 + app/pages/v06-stores.wrn | 16 + app/pages/v06-types.wrn | 16 + app/routes.gen.ts | 367 ++- app/styles/global.css | 570 +++- app/types/wrnexus.generated.d.ts | 42 + app/types/wrnexus.plugins.generated.d.ts | 1 + bun.lock | 125 +- package.json | 23 +- public/playground.js | 96 +- public/showcase-images/avatar-design.svg | 1 + public/showcase-images/avatar-engineering.svg | 1 + public/showcase-images/avatar-growth.svg | 1 + public/showcase-images/blue-mountain.svg | 1 + public/showcase-images/dashboard-preview.svg | 1 + public/showcase-images/green-hero.svg | 1 + public/showcase-images/logo-0-0.svg | 1 + public/showcase-images/logo-0-1.svg | 1 + public/showcase-images/logo-0-2.svg | 1 + public/showcase-images/logo-0-3.svg | 1 + public/showcase-images/logo-1-0.svg | 1 + public/showcase-images/logo-1-1.svg | 1 + public/showcase-images/logo-1-2.svg | 1 + public/showcase-images/logo-1-3.svg | 1 + public/showcase-images/logo-2-0.svg | 1 + public/showcase-images/logo-2-1.svg | 1 + public/showcase-images/logo-2-2.svg | 1 + public/showcase-images/logo-2-3.svg | 1 + public/showcase-images/violet-circle.svg | 1 + scripts/generate-showcase.mjs | 2724 ++++----------- scripts/showcase-profiles.mjs | 2914 +++++++++++++++++ showcase-manifest.json | 1252 +++++++ test/showcase.test.ts | 713 ++-- 172 files changed, 38454 insertions(+), 24441 deletions(-) rename app/pages/{blocks.wrn => block-library.wrn} (99%) delete mode 100644 app/pages/components/advanced-date-picker.wrn delete mode 100644 app/pages/components/advanced-range-slider.wrn create mode 100644 app/pages/components/announcement-bar.wrn create mode 100644 app/pages/components/auth-form.wrn create mode 100644 app/pages/components/auth-split-layout.wrn create mode 100644 app/pages/components/back-to-top.wrn delete mode 100644 app/pages/components/copy-markup.wrn create mode 100644 app/pages/components/ctasection.wrn create mode 100644 app/pages/components/feature-card.wrn create mode 100644 app/pages/components/feature-grid.wrn create mode 100644 app/pages/components/feature-icon-card.wrn delete mode 100644 app/pages/components/file-upload.wrn create mode 100644 app/pages/components/footer.wrn create mode 100644 app/pages/components/hero-actions.wrn create mode 100644 app/pages/components/hero.wrn create mode 100644 app/pages/components/marketing-section-header.wrn create mode 100644 app/pages/components/metric-card.wrn create mode 100644 app/pages/components/metric-grid.wrn create mode 100644 app/pages/components/page-header.wrn create mode 100644 app/pages/components/portal-dashboard.wrn create mode 100644 app/pages/components/preference-switcher.wrn create mode 100644 app/pages/components/public-page-shell.wrn create mode 100644 app/pages/components/section-header.wrn create mode 100644 app/pages/components/section.wrn create mode 100644 app/pages/components/split-hero.wrn create mode 100644 app/pages/components/stats-bar.wrn delete mode 100644 app/pages/components/table.wrn create mode 100644 app/pages/components/text-link.wrn delete mode 100644 app/pages/components/toast-notifications.wrn delete mode 100644 app/pages/components/toast.wrn create mode 100644 app/pages/components/toaster.wrn create mode 100644 app/pages/core.wrn create mode 100644 app/pages/data.wrn create mode 100644 app/pages/marketing.wrn create mode 100644 app/pages/v06-functions.wrn create mode 100644 app/pages/v06-imports.wrn create mode 100644 app/pages/v06-migration.wrn create mode 100644 app/pages/v06-outputs.wrn create mode 100644 app/pages/v06-runtime.wrn create mode 100644 app/pages/v06-state.wrn create mode 100644 app/pages/v06-stores.wrn create mode 100644 app/pages/v06-types.wrn create mode 100644 app/types/wrnexus.generated.d.ts create mode 100644 app/types/wrnexus.plugins.generated.d.ts create mode 100644 public/showcase-images/avatar-design.svg create mode 100644 public/showcase-images/avatar-engineering.svg create mode 100644 public/showcase-images/avatar-growth.svg create mode 100644 public/showcase-images/blue-mountain.svg create mode 100644 public/showcase-images/dashboard-preview.svg create mode 100644 public/showcase-images/green-hero.svg create mode 100644 public/showcase-images/logo-0-0.svg create mode 100644 public/showcase-images/logo-0-1.svg create mode 100644 public/showcase-images/logo-0-2.svg create mode 100644 public/showcase-images/logo-0-3.svg create mode 100644 public/showcase-images/logo-1-0.svg create mode 100644 public/showcase-images/logo-1-1.svg create mode 100644 public/showcase-images/logo-1-2.svg create mode 100644 public/showcase-images/logo-1-3.svg create mode 100644 public/showcase-images/logo-2-0.svg create mode 100644 public/showcase-images/logo-2-1.svg create mode 100644 public/showcase-images/logo-2-2.svg create mode 100644 public/showcase-images/logo-2-3.svg create mode 100644 public/showcase-images/violet-circle.svg create mode 100644 scripts/showcase-profiles.mjs create mode 100644 showcase-manifest.json diff --git a/README.md b/README.md index 841d026..8279af3 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/app/layouts/showcase.wrn b/app/layouts/showcase.wrn index ff353cf..3e13b77 100644 --- a/app/layouts/showcase.wrn +++ b/app/layouts/showcase.wrn @@ -9,7 +9,7 @@ layout Showcase {
- +
@@ -26,39 +26,52 @@ layout Showcase {