From 5c8375fadc4b6371886a951c1aae46adfa911bef Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Fri, 20 Feb 2026 13:29:07 +0000 Subject: [PATCH] feat(elements): add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads --- changelog.md | 8 ++++++ html/index.ts | 1 + readme.hints.md | 28 +++++++++++++++++++ ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/sz-certificates-card.ts | 2 ++ ts_web/elements/sz-dashboard-view.ts | 2 ++ ts_web/elements/sz-dns-ssl-card.ts | 2 ++ ts_web/elements/sz-domain-detail-view.ts | 2 ++ ts_web/elements/sz-login-view.ts | 2 ++ ts_web/elements/sz-network-dns-view.ts | 2 ++ ts_web/elements/sz-network-domains-view.ts | 2 ++ ts_web/elements/sz-network-proxy-view.ts | 2 ++ .../sz-platform-service-detail-view.ts | 2 ++ ts_web/elements/sz-platform-services-card.ts | 2 ++ ts_web/elements/sz-quick-actions-card.ts | 2 ++ ts_web/elements/sz-registry-external-view.ts | 2 ++ ts_web/elements/sz-registry-onebox-view.ts | 2 ++ ts_web/elements/sz-resource-usage-card.ts | 2 ++ ts_web/elements/sz-reverse-proxy-card.ts | 2 ++ ts_web/elements/sz-service-create-view.ts | 2 ++ ts_web/elements/sz-service-detail-view.ts | 2 ++ ts_web/elements/sz-services-backups-view.ts | 2 ++ ts_web/elements/sz-services-list-view.ts | 2 ++ ts_web/elements/sz-settings-view.ts | 2 ++ ts_web/elements/sz-stat-card.ts | 2 ++ ts_web/elements/sz-status-grid-cluster.ts | 2 ++ ts_web/elements/sz-status-grid-infra.ts | 2 ++ ts_web/elements/sz-status-grid-network.ts | 21 +++++++------- ts_web/elements/sz-status-grid-services.ts | 24 +++++++++------- ts_web/elements/sz-tokens-view.ts | 2 ++ ts_web/elements/sz-traffic-card.ts | 2 ++ 31 files changed, 113 insertions(+), 21 deletions(-) create mode 100644 readme.hints.md diff --git a/changelog.md b/changelog.md index ab5f737..508319f 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2026-02-20 - 1.1.0 - feat(elements) +add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads + +- Add public static demoGroups to many web components to enable sidebar categorization in the wcctools dashboard (groups like Dashboard, Dashboard Grids, Network, Services, Platform, Auth & Settings). +- Filter out demo-view wrapper components from the wcctools elements list (html/index.ts) so full-page demo orchestration wrappers are not shown as regular elements. +- Adjust demo/example payload shapes for sz-status-grid-network and sz-status-grid-services (renamed and flattened traffic/status and resource usage properties for the demo fixtures). +- Add readme.hints.md with project structure, web component patterns, demo groups and build/watch instructions. + ## 2026-02-20 - 1.0.1 - fix(deps) bump dependencies and devDependencies, update watch script, add npmextra preset, and remove Playwright artifacts diff --git a/html/index.ts b/html/index.ts index 176cefe..8834597 100644 --- a/html/index.ts +++ b/html/index.ts @@ -13,6 +13,7 @@ deesWccTools.setupWccTools({ name: 'Elements', type: 'elements', items: elements, + filter: (name) => !name.toLowerCase().includes('demoview'), sort: ([a], [b]) => a.localeCompare(b), }, ], diff --git a/readme.hints.md b/readme.hints.md new file mode 100644 index 0000000..c4b5729 --- /dev/null +++ b/readme.hints.md @@ -0,0 +1,28 @@ +# Project Hints + +## Project Structure +- `html/index.ts` - WccTools setup with sections for Pages and Elements +- `ts_web/elements/` - All web components (27 elements + 6 demo-view wrappers) +- `ts_web/elements/index.ts` - Barrel export for all element components +- `ts_web/pages/` - Page components + +## Web Components Pattern +- Each element extends `DeesElement` from `@design.estate/dees-element` +- Uses TC39 standard decorators (`@customElement`, `@property`, `accessor` keyword) +- Each element has `public static demo` for wcctools dashboard preview +- Each element has `public static demoGroups` for sidebar categorization +- Demo views (`sz-demo-view-*`) are full-page orchestration wrappers, filtered out from the wcctools dashboard + +## Demo Groups +| Group | Elements | +|-------|----------| +| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card | +| Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra | +| Platform | sz-platform-services-card, sz-platform-service-detail-view | +| Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view | +| Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view | +| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-onebox-view, sz-registry-external-view | + +## Build +- `pnpm run build` - tsbuild tsfolders + tsbundle element --production +- `pnpm run watch` - starts wcctools dev server diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index d7d0404..5797b60 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/catalog', - version: '1.0.1', + version: '1.1.0', description: 'UI component catalog for serve.zone' } diff --git a/ts_web/elements/sz-certificates-card.ts b/ts_web/elements/sz-certificates-card.ts index 5be9cb7..3cfe354 100644 --- a/ts_web/elements/sz-certificates-card.ts +++ b/ts_web/elements/sz-certificates-card.ts @@ -24,6 +24,8 @@ export class SzCertificatesCard extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: Number }) public accessor validCount: number = 0; diff --git a/ts_web/elements/sz-dashboard-view.ts b/ts_web/elements/sz-dashboard-view.ts index b8c075e..c72c425 100644 --- a/ts_web/elements/sz-dashboard-view.ts +++ b/ts_web/elements/sz-dashboard-view.ts @@ -103,6 +103,8 @@ export class SzDashboardView extends DeesElement { `; + public static demoGroups = ['Dashboard']; + @property({ type: Object }) public accessor data: IDashboardData = { cluster: { diff --git a/ts_web/elements/sz-dns-ssl-card.ts b/ts_web/elements/sz-dns-ssl-card.ts index 2999878..7826ae5 100644 --- a/ts_web/elements/sz-dns-ssl-card.ts +++ b/ts_web/elements/sz-dns-ssl-card.ts @@ -25,6 +25,8 @@ export class SzDnsSslCard extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: Boolean }) public accessor dnsConfigured: boolean = false; diff --git a/ts_web/elements/sz-domain-detail-view.ts b/ts_web/elements/sz-domain-detail-view.ts index bfb865e..bdb8562 100644 --- a/ts_web/elements/sz-domain-detail-view.ts +++ b/ts_web/elements/sz-domain-detail-view.ts @@ -78,6 +78,8 @@ export class SzDomainDetailView extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: Object }) public accessor domain: IDomainDetail | null = null; diff --git a/ts_web/elements/sz-login-view.ts b/ts_web/elements/sz-login-view.ts index 1b22804..e1e381a 100644 --- a/ts_web/elements/sz-login-view.ts +++ b/ts_web/elements/sz-login-view.ts @@ -22,6 +22,8 @@ export class SzLoginView extends DeesElement { `; + public static demoGroups = ['Auth & Settings']; + @property({ type: Boolean }) public accessor loading: boolean = false; diff --git a/ts_web/elements/sz-network-dns-view.ts b/ts_web/elements/sz-network-dns-view.ts index bdccce6..4c5301a 100644 --- a/ts_web/elements/sz-network-dns-view.ts +++ b/ts_web/elements/sz-network-dns-view.ts @@ -37,6 +37,8 @@ export class SzNetworkDnsView extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: Array }) public accessor records: IDnsRecord[] = []; diff --git a/ts_web/elements/sz-network-domains-view.ts b/ts_web/elements/sz-network-domains-view.ts index 52d6a4e..29c53ac 100644 --- a/ts_web/elements/sz-network-domains-view.ts +++ b/ts_web/elements/sz-network-domains-view.ts @@ -39,6 +39,8 @@ export class SzNetworkDomainsView extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: Array }) public accessor domains: IDomainRecord[] = []; diff --git a/ts_web/elements/sz-network-proxy-view.ts b/ts_web/elements/sz-network-proxy-view.ts index 3763a94..3d3bad6 100644 --- a/ts_web/elements/sz-network-proxy-view.ts +++ b/ts_web/elements/sz-network-proxy-view.ts @@ -58,6 +58,8 @@ export class SzNetworkProxyView extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: String }) public accessor proxyStatus: 'running' | 'stopped' = 'stopped'; diff --git a/ts_web/elements/sz-platform-service-detail-view.ts b/ts_web/elements/sz-platform-service-detail-view.ts index e9b1db9..8965fa6 100644 --- a/ts_web/elements/sz-platform-service-detail-view.ts +++ b/ts_web/elements/sz-platform-service-detail-view.ts @@ -70,6 +70,8 @@ export class SzPlatformServiceDetailView extends DeesElement { `; + public static demoGroups = ['Platform']; + @property({ type: Object }) public accessor service: IPlatformServiceDetail | null = null; diff --git a/ts_web/elements/sz-platform-services-card.ts b/ts_web/elements/sz-platform-services-card.ts index 579eafe..983975c 100644 --- a/ts_web/elements/sz-platform-services-card.ts +++ b/ts_web/elements/sz-platform-services-card.ts @@ -36,6 +36,8 @@ export class SzPlatformServicesCard extends DeesElement { `; + public static demoGroups = ['Platform']; + @property({ type: Array }) public accessor services: IPlatformService[] = []; diff --git a/ts_web/elements/sz-quick-actions-card.ts b/ts_web/elements/sz-quick-actions-card.ts index f4bd162..34a60d9 100644 --- a/ts_web/elements/sz-quick-actions-card.ts +++ b/ts_web/elements/sz-quick-actions-card.ts @@ -36,6 +36,8 @@ export class SzQuickActionsCard extends DeesElement { `; + public static demoGroups = ['Dashboard']; + @property({ type: Array }) public accessor actions: IQuickAction[] = []; diff --git a/ts_web/elements/sz-registry-external-view.ts b/ts_web/elements/sz-registry-external-view.ts index e4f3707..42326e0 100644 --- a/ts_web/elements/sz-registry-external-view.ts +++ b/ts_web/elements/sz-registry-external-view.ts @@ -35,6 +35,8 @@ export class SzRegistryExternalView extends DeesElement { `; + public static demoGroups = ['Auth & Settings']; + @property({ type: Array }) public accessor registries: IExternalRegistry[] = []; diff --git a/ts_web/elements/sz-registry-onebox-view.ts b/ts_web/elements/sz-registry-onebox-view.ts index e26b85c..c21c9af 100644 --- a/ts_web/elements/sz-registry-onebox-view.ts +++ b/ts_web/elements/sz-registry-onebox-view.ts @@ -25,6 +25,8 @@ export class SzRegistryOneboxView extends DeesElement { `; + public static demoGroups = ['Auth & Settings']; + @property({ type: String }) public accessor status: 'running' | 'stopped' = 'stopped'; diff --git a/ts_web/elements/sz-resource-usage-card.ts b/ts_web/elements/sz-resource-usage-card.ts index 61ce2e1..8bb4cf9 100644 --- a/ts_web/elements/sz-resource-usage-card.ts +++ b/ts_web/elements/sz-resource-usage-card.ts @@ -44,6 +44,8 @@ export class SzResourceUsageCard extends DeesElement { `; + public static demoGroups = ['Dashboard']; + @property({ type: Object }) public accessor data: IResourceUsage = { cpu: 0, diff --git a/ts_web/elements/sz-reverse-proxy-card.ts b/ts_web/elements/sz-reverse-proxy-card.ts index f370506..0ca1281 100644 --- a/ts_web/elements/sz-reverse-proxy-card.ts +++ b/ts_web/elements/sz-reverse-proxy-card.ts @@ -28,6 +28,8 @@ export class SzReverseProxyCard extends DeesElement { `; + public static demoGroups = ['Network']; + @property({ type: String }) public accessor httpPort: string = '80'; diff --git a/ts_web/elements/sz-service-create-view.ts b/ts_web/elements/sz-service-create-view.ts index e3aae46..937ce16 100644 --- a/ts_web/elements/sz-service-create-view.ts +++ b/ts_web/elements/sz-service-create-view.ts @@ -63,6 +63,8 @@ export class SzServiceCreateView extends DeesElement { `; + public static demoGroups = ['Services']; + @property({ type: Array }) public accessor registries: IRegistry[] = []; diff --git a/ts_web/elements/sz-service-detail-view.ts b/ts_web/elements/sz-service-detail-view.ts index 95511f9..dc4bb79 100644 --- a/ts_web/elements/sz-service-detail-view.ts +++ b/ts_web/elements/sz-service-detail-view.ts @@ -88,6 +88,8 @@ export class SzServiceDetailView extends DeesElement { `; + public static demoGroups = ['Services']; + @property({ type: Object }) public accessor service: IServiceDetail = { name: '', diff --git a/ts_web/elements/sz-services-backups-view.ts b/ts_web/elements/sz-services-backups-view.ts index 79d1e6d..c6d9641 100644 --- a/ts_web/elements/sz-services-backups-view.ts +++ b/ts_web/elements/sz-services-backups-view.ts @@ -50,6 +50,8 @@ export class SzServicesBackupsView extends DeesElement { `; + public static demoGroups = ['Services']; + @property({ type: Array }) public accessor schedules: IBackupSchedule[] = []; diff --git a/ts_web/elements/sz-services-list-view.ts b/ts_web/elements/sz-services-list-view.ts index 57587d3..78494f3 100644 --- a/ts_web/elements/sz-services-list-view.ts +++ b/ts_web/elements/sz-services-list-view.ts @@ -36,6 +36,8 @@ export class SzServicesListView extends DeesElement { `; + public static demoGroups = ['Services']; + @property({ type: Array }) public accessor services: IService[] = []; diff --git a/ts_web/elements/sz-settings-view.ts b/ts_web/elements/sz-settings-view.ts index e8c6cdd..898fed4 100644 --- a/ts_web/elements/sz-settings-view.ts +++ b/ts_web/elements/sz-settings-view.ts @@ -47,6 +47,8 @@ export class SzSettingsView extends DeesElement { `; + public static demoGroups = ['Auth & Settings']; + @property({ type: Object }) public accessor settings: ISettings = { darkMode: false, diff --git a/ts_web/elements/sz-stat-card.ts b/ts_web/elements/sz-stat-card.ts index e33b22c..3805daf 100644 --- a/ts_web/elements/sz-stat-card.ts +++ b/ts_web/elements/sz-stat-card.ts @@ -53,6 +53,8 @@ export class SzStatCard extends DeesElement { `; + public static demoGroups = ['Dashboard']; + @property({ type: String }) public accessor label: string = ''; diff --git a/ts_web/elements/sz-status-grid-cluster.ts b/ts_web/elements/sz-status-grid-cluster.ts index c156dcf..a3c71b6 100644 --- a/ts_web/elements/sz-status-grid-cluster.ts +++ b/ts_web/elements/sz-status-grid-cluster.ts @@ -38,6 +38,8 @@ export class SzStatusGridCluster extends DeesElement { `; + public static demoGroups = ['Dashboard Grids']; + @property({ type: Object }) public accessor stats: IClusterStats = { totalServices: 0, diff --git a/ts_web/elements/sz-status-grid-infra.ts b/ts_web/elements/sz-status-grid-infra.ts index f404f03..aa1b2b9 100644 --- a/ts_web/elements/sz-status-grid-infra.ts +++ b/ts_web/elements/sz-status-grid-infra.ts @@ -36,6 +36,8 @@ export class SzStatusGridInfra extends DeesElement { `; + public static demoGroups = ['Dashboard Grids']; + @property({ type: Boolean }) public accessor dnsConfigured: boolean = false; diff --git a/ts_web/elements/sz-status-grid-network.ts b/ts_web/elements/sz-status-grid-network.ts index a97d021..a613d91 100644 --- a/ts_web/elements/sz-status-grid-network.ts +++ b/ts_web/elements/sz-status-grid-network.ts @@ -40,16 +40,15 @@ export class SzStatusGridNetwork extends DeesElement {
`; + public static demoGroups = ['Dashboard Grids']; + @property({ type: Object }) public accessor traffic: ITrafficData = { requests: 0, diff --git a/ts_web/elements/sz-status-grid-services.ts b/ts_web/elements/sz-status-grid-services.ts index f7d10f9..0eba3ab 100644 --- a/ts_web/elements/sz-status-grid-services.ts +++ b/ts_web/elements/sz-status-grid-services.ts @@ -26,25 +26,29 @@ export class SzStatusGridServices extends DeesElement {
`; + public static demoGroups = ['Dashboard Grids']; + @property({ type: Object }) public accessor resourceUsage: IResourceUsage = { cpu: 0, diff --git a/ts_web/elements/sz-tokens-view.ts b/ts_web/elements/sz-tokens-view.ts index ad84392..15fd35f 100644 --- a/ts_web/elements/sz-tokens-view.ts +++ b/ts_web/elements/sz-tokens-view.ts @@ -40,6 +40,8 @@ export class SzTokensView extends DeesElement {
`; + public static demoGroups = ['Auth & Settings']; + @property({ type: Array }) public accessor globalTokens: IToken[] = []; diff --git a/ts_web/elements/sz-traffic-card.ts b/ts_web/elements/sz-traffic-card.ts index 70cdddc..312040b 100644 --- a/ts_web/elements/sz-traffic-card.ts +++ b/ts_web/elements/sz-traffic-card.ts @@ -46,6 +46,8 @@ export class SzTrafficCard extends DeesElement { `; + public static demoGroups = ['Dashboard']; + @property({ type: Object }) public accessor data: ITrafficData = { requests: 0,