npm - @serve.zone/catalog - Versions diffs - 1.0.1 → 1.1.0 - Mend

@serve.zone/catalog 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/dist_watch/index.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="user-scalable=no, initial-scale=1">
+    <meta charset="utf-8" />
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body></body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",

package/readme.hints.md ADDED Viewed

@@ -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

package/ts_web/00_commitinfo_data.ts CHANGED Viewed

@@ -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'
 }

package/ts_web/elements/sz-certificates-card.ts CHANGED Viewed

@@ -24,6 +24,8 @@ export class SzCertificatesCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: Number })
   public accessor validCount: number = 0;

package/ts_web/elements/sz-dashboard-view.ts CHANGED Viewed

@@ -103,6 +103,8 @@ export class SzDashboardView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard'];
   @property({ type: Object })
   public accessor data: IDashboardData = {
     cluster: {

package/ts_web/elements/sz-dns-ssl-card.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export class SzDnsSslCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: Boolean })
   public accessor dnsConfigured: boolean = false;

package/ts_web/elements/sz-domain-detail-view.ts CHANGED Viewed

@@ -78,6 +78,8 @@ export class SzDomainDetailView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: Object })
   public accessor domain: IDomainDetail | null = null;

package/ts_web/elements/sz-login-view.ts CHANGED Viewed

@@ -22,6 +22,8 @@ export class SzLoginView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Auth & Settings'];
   @property({ type: Boolean })
   public accessor loading: boolean = false;

package/ts_web/elements/sz-network-dns-view.ts CHANGED Viewed

@@ -37,6 +37,8 @@ export class SzNetworkDnsView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: Array })
   public accessor records: IDnsRecord[] = [];

package/ts_web/elements/sz-network-domains-view.ts CHANGED Viewed

@@ -39,6 +39,8 @@ export class SzNetworkDomainsView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: Array })
   public accessor domains: IDomainRecord[] = [];

package/ts_web/elements/sz-network-proxy-view.ts CHANGED Viewed

@@ -58,6 +58,8 @@ export class SzNetworkProxyView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: String })
   public accessor proxyStatus: 'running' | 'stopped' = 'stopped';

package/ts_web/elements/sz-platform-service-detail-view.ts CHANGED Viewed

@@ -70,6 +70,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Platform'];
   @property({ type: Object })
   public accessor service: IPlatformServiceDetail | null = null;

package/ts_web/elements/sz-platform-services-card.ts CHANGED Viewed

@@ -36,6 +36,8 @@ export class SzPlatformServicesCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Platform'];
   @property({ type: Array })
   public accessor services: IPlatformService[] = [];

package/ts_web/elements/sz-quick-actions-card.ts CHANGED Viewed

@@ -36,6 +36,8 @@ export class SzQuickActionsCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard'];
   @property({ type: Array })
   public accessor actions: IQuickAction[] = [];

package/ts_web/elements/sz-registry-external-view.ts CHANGED Viewed

@@ -35,6 +35,8 @@ export class SzRegistryExternalView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Auth & Settings'];
   @property({ type: Array })
   public accessor registries: IExternalRegistry[] = [];

package/ts_web/elements/sz-registry-onebox-view.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export class SzRegistryOneboxView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Auth & Settings'];
   @property({ type: String })
   public accessor status: 'running' | 'stopped' = 'stopped';

package/ts_web/elements/sz-resource-usage-card.ts CHANGED Viewed

@@ -44,6 +44,8 @@ export class SzResourceUsageCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard'];
   @property({ type: Object })
   public accessor data: IResourceUsage = {
     cpu: 0,

package/ts_web/elements/sz-reverse-proxy-card.ts CHANGED Viewed

@@ -28,6 +28,8 @@ export class SzReverseProxyCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Network'];
   @property({ type: String })
   public accessor httpPort: string = '80';

package/ts_web/elements/sz-service-create-view.ts CHANGED Viewed

@@ -63,6 +63,8 @@ export class SzServiceCreateView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Services'];
   @property({ type: Array })
   public accessor registries: IRegistry[] = [];

package/ts_web/elements/sz-service-detail-view.ts CHANGED Viewed

@@ -88,6 +88,8 @@ export class SzServiceDetailView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Services'];
   @property({ type: Object })
   public accessor service: IServiceDetail = {
     name: '',

package/ts_web/elements/sz-services-backups-view.ts CHANGED Viewed

@@ -50,6 +50,8 @@ export class SzServicesBackupsView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Services'];
   @property({ type: Array })
   public accessor schedules: IBackupSchedule[] = [];

package/ts_web/elements/sz-services-list-view.ts CHANGED Viewed

@@ -36,6 +36,8 @@ export class SzServicesListView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Services'];
   @property({ type: Array })
   public accessor services: IService[] = [];

package/ts_web/elements/sz-settings-view.ts CHANGED Viewed

@@ -47,6 +47,8 @@ export class SzSettingsView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Auth & Settings'];
   @property({ type: Object })
   public accessor settings: ISettings = {
     darkMode: false,

package/ts_web/elements/sz-stat-card.ts CHANGED Viewed

@@ -53,6 +53,8 @@ export class SzStatCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard'];
   @property({ type: String })
   public accessor label: string = '';

package/ts_web/elements/sz-status-grid-cluster.ts CHANGED Viewed

@@ -38,6 +38,8 @@ export class SzStatusGridCluster extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard Grids'];
   @property({ type: Object })
   public accessor stats: IClusterStats = {
     totalServices: 0,

package/ts_web/elements/sz-status-grid-infra.ts CHANGED Viewed

@@ -36,6 +36,8 @@ export class SzStatusGridInfra extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard Grids'];
   @property({ type: Boolean })
   public accessor dnsConfigured: boolean = false;

package/ts_web/elements/sz-status-grid-network.ts CHANGED Viewed

@@ -40,16 +40,15 @@ export class SzStatusGridNetwork extends DeesElement {
     <div style="padding: 24px; max-width: 1400px;">
       <sz-status-grid-network
         .traffic=${{
-          totalRequests: 125420,
-          requestsPerMinute: 847,
-          errorRate: 0.12,
-          avgResponseTime: 45,
-          statusDistribution: {
-            '2xx': 95.2,
-            '3xx': 2.1,
-            '4xx': 2.3,
-            '5xx': 0.4,
-          },
+          requests: 125420,
+          errors: 150,
+          errorPercent: 0.12,
+          avgResponse: 45,
+          reqPerMin: 847,
+          status2xx: 95.2,
+          status3xx: 2.1,
+          status4xx: 2.3,
+          status5xx: 0.4,
         }}
         .proxy=${{
           httpPort: '80',
@@ -67,6 +66,8 @@ export class SzStatusGridNetwork extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard Grids'];
   @property({ type: Object })
   public accessor traffic: ITrafficData = {
     requests: 0,

package/ts_web/elements/sz-status-grid-services.ts CHANGED Viewed

@@ -26,25 +26,29 @@ export class SzStatusGridServices extends DeesElement {
     <div style="padding: 24px; max-width: 1200px;">
       <sz-status-grid-services
         .resourceUsage=${{
-          cpu: { percentage: 45, label: 'CPU Usage' },
-          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
-          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
+          cpu: 45,
+          memoryUsed: '4.96 GB',
+          memoryTotal: '8 GB',
+          networkIn: '1.2 MB/s',
+          networkOut: '0.8 MB/s',
           topConsumers: [
-            { name: 'api-service', cpu: 25, memory: 512 },
-            { name: 'web-frontend', cpu: 15, memory: 256 },
-            { name: 'worker', cpu: 5, memory: 128 },
+            { name: 'api-service', memory: '512 MB' },
+            { name: 'web-frontend', memory: '256 MB' },
+            { name: 'worker', memory: '128 MB' },
           ],
         }}
         .platformServices=${[
-          { name: 'MongoDB', status: 'running' },
-          { name: 'S3 Storage', status: 'running' },
-          { name: 'ClickHouse', status: 'stopped' },
-          { name: 'Redis Cache', status: 'running' },
+          { name: 'MongoDB', status: '1 DB', running: true },
+          { name: 'S3 Storage', status: '1 bucket', running: true },
+          { name: 'ClickHouse', status: 'Stopped', running: false },
+          { name: 'Redis Cache', status: 'Running', running: true },
         ]}
       ></sz-status-grid-services>
     </div>
   `;
+  public static demoGroups = ['Dashboard Grids'];
   @property({ type: Object })
   public accessor resourceUsage: IResourceUsage = {
     cpu: 0,

package/ts_web/elements/sz-tokens-view.ts CHANGED Viewed

@@ -40,6 +40,8 @@ export class SzTokensView extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Auth & Settings'];
   @property({ type: Array })
   public accessor globalTokens: IToken[] = [];

package/ts_web/elements/sz-traffic-card.ts CHANGED Viewed

@@ -46,6 +46,8 @@ export class SzTrafficCard extends DeesElement {
     </div>
   `;
+  public static demoGroups = ['Dashboard'];
   @property({ type: Object })
   public accessor data: ITrafficData = {
     requests: 0,