feat(stepper,updater): add progress-aware stepper flows and updater countdown states

2026-04-16 14:21:16 +00:00
parent 2f4c47f0d2
commit 428d2741d1
7 changed files with 806 additions and 141 deletions
@@ -2,9 +2,73 @@ import { html } from '@design.estate/dees-element';

 import { DeesUpdater } from '../dees-updater/dees-updater.js';

-export const demoFunc = async () => {
-  const updater = await DeesUpdater.createAndShow();
-  setTimeout(async () => {
-    await updater.destroy();
-  }, 10000);
-}
+const waitForDemoStep = async (timeoutArg: number): Promise<void> => {
+  await new Promise<void>((resolve) => {
+    window.setTimeout(() => resolve(), timeoutArg);
+  });
+};
+
+export const demoFunc = () => {
+  let updaterRunning = false;
+
+  return html`
+    <div style="display: grid; gap: 16px; place-items: center; padding: 32px; text-align: center;">
+      <p style="margin: 0; max-width: 540px; line-height: 1.6; color: var(--dees-color-text-secondary);">
+        Launches the updater as a stepper flow. The first step streams terminal-style
+        progress updates and then moves automatically to the ready step.
+      </p>
+      <dees-button
+        @click=${async () => {
+          if (updaterRunning) {
+            return;
+          }
+
+          updaterRunning = true;
+
+          try {
+            const updater = await DeesUpdater.createAndShow({
+              currentVersion: '3.79.0',
+              updatedVersion: '3.80.0',
+              moreInfoUrl: 'https://code.foss.global/design.estate/dees-catalog',
+              changelogUrl: 'https://code.foss.global/design.estate/dees-catalog/-/blob/main/changelog.md',
+              successAction: 'close',
+              successDelayMs: 10000,
+            });
+
+            const progressFrames = [
+              { line: 'Checking release manifest', percentage: 12, delay: 550 },
+              { line: 'Downloading signed bundle', percentage: 33, delay: 700 },
+              { line: 'Verifying checksum', percentage: 51, delay: 650 },
+              { line: 'Applying update files', percentage: 74, delay: 800 },
+              { line: 'Cleaning up previous release', percentage: 91, delay: 600 },
+            ];
+
+            updater.updateProgress({
+              statusText: 'Checking release manifest...',
+              terminalLines: ['Checking release manifest'],
+              percentage: 12,
+              indeterminate: true,
+            });
+
+            for (const [index, progressFrame] of progressFrames.entries()) {
+              if (index > 0) {
+                updater.appendProgressLine(progressFrame.line);
+                updater.updateProgress({
+                  percentage: progressFrame.percentage,
+                  statusText: `${progressFrame.line}...`,
+                });
+              }
+
+              await waitForDemoStep(progressFrame.delay);
+            }
+
+            await updater.markUpdateReady();
+            await waitForDemoStep(10500);
+          } finally {
+            updaterRunning = false;
+          }
+        }}
+      >Show updater flow</dees-button>
+    </div>
+  `;
+};