dees-catalog/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesProgressbar } from './dees-progressbar.js';

export const demoFunc = () => {
  const terminalSnapshots = [
    ['Resolving workspace packages'],
    ['Resolving workspace packages', 'Downloading ui-assets.tar.gz'],
    ['Resolving workspace packages', 'Downloading ui-assets.tar.gz', 'Verifying checksum'],
    ['Resolving workspace packages', 'Downloading ui-assets.tar.gz', 'Verifying checksum', 'Extracting release bundle'],
    ['Resolving workspace packages', 'Downloading ui-assets.tar.gz', 'Verifying checksum', 'Extracting release bundle', 'Restarting application'],
  ];

  const getUploadStatus = (percentage: number): string => {
    if (percentage >= 100) {
      return 'Upload complete. Finalizing package manifest...';
    }

    if (percentage >= 82) {
      return 'Verifying checksums before handoff...';
    }

    if (percentage >= 55) {
      return 'Uploading thumbnails to edge cache...';
    }

    if (percentage >= 25) {
      return 'Streaming source files to the remote worker...';
    }

    return 'Preparing archive and dependency graph...';
  };

  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const liveProgressbar = elementArg.querySelector('#live-progress') as DeesProgressbar | null;
      const terminalProgressbar = elementArg.querySelector('#terminal-progress') as DeesProgressbar | null;
      const demoElement = elementArg as HTMLElement & {
        __progressbarDemoIntervalId?: number;
      };

      if (!liveProgressbar || !terminalProgressbar) {
        return;
      }

      if (demoElement.__progressbarDemoIntervalId) {
        window.clearInterval(demoElement.__progressbarDemoIntervalId);
      }

      let livePercentage = 12;
      let terminalSnapshotIndex = 0;

      const updateDemo = () => {
        liveProgressbar.percentage = livePercentage;
        liveProgressbar.statusText = getUploadStatus(livePercentage);

        terminalProgressbar.terminalLines = [...terminalSnapshots[terminalSnapshotIndex]];
        terminalProgressbar.percentage = Math.min(100, (terminalSnapshotIndex + 1) * 20);
        terminalProgressbar.indeterminate = terminalSnapshotIndex < terminalSnapshots.length - 1;

        livePercentage = livePercentage >= 100 ? 12 : Math.min(100, livePercentage + 11);
        terminalSnapshotIndex = terminalSnapshotIndex >= terminalSnapshots.length - 1 ? 0 : terminalSnapshotIndex + 1;
      };

      updateDemo();
      demoElement.__progressbarDemoIntervalId = window.setInterval(updateDemo, 1400);
    }}>
      <style>
        ${css`
          .demoBox {
            position: relative;
            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 24px;
          }

          .demoIntro {
            max-width: 720px;
            color: ${cssManager.bdTheme('hsl(215 20% 30%)', 'hsl(215 18% 76%)')};
            font-size: 14px;
            line-height: 1.6;
          }

          .showcaseGrid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 18px;
          }

          .showcaseCard {
            background: ${cssManager.bdTheme('rgba(255,255,255,0.78)', 'rgba(255,255,255,0.04)')};
            border: 1px solid ${cssManager.bdTheme('hsl(210 22% 86%)', 'hsl(210 10% 18%)')};
            border-radius: 16px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            backdrop-filter: blur(8px);
          }

          .showcaseCard.wide {
            grid-column: span 2;
          }

          .showcaseCard h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
          }

          .showcaseCard p {
            margin: 0;
            color: ${cssManager.bdTheme('hsl(215 14% 40%)', 'hsl(215 10% 66%)')};
            font-size: 13px;
            line-height: 1.55;
          }

          .progressStack {
            display: flex;
            flex-direction: column;
            gap: 14px;
          }

          .codeLabel {
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
            font-size: 11px;
            color: ${cssManager.bdTheme('hsl(215 14% 44%)', 'hsl(215 10% 70%)')};
            letter-spacing: 0.03em;
            text-transform: uppercase;
          }

          @media (max-width: 900px) {
            .demoBox {
              padding: 24px;
            }

            .showcaseCard.wide {
              grid-column: span 1;
            }
          }
        `}
      </style>
      <div class="demoBox">
        <div class="demoIntro">
          <code>dees-progressbar</code> can now pair a classic progress bar with a fixed-height status area. Use simple status text for clear user-facing updates or switch to terminal-like lines when you want recent steps to stay visible without causing layout jumps.
        </div>
        <div class="showcaseGrid">
          <section class="showcaseCard">
            <div class="codeLabel">Determinate</div>
            <h3>Percentage plus current task</h3>
            <p>Use a label, a percentage, and one short status line when the work is measurable.</p>
            <div class="progressStack">
              <dees-progressbar
                label="Media upload"
                .percentage=${68}
                statusText="Uploading thumbnails to edge cache..."
                .statusRows=${2}
              ></dees-progressbar>
              <dees-progressbar
                label="Asset sync"
                .percentage=${100}
                statusText="All files are synced and available."
                .statusRows=${2}
              ></dees-progressbar>
            </div>
          </section>

          <section class="showcaseCard">
            <div class="codeLabel">Indeterminate</div>
            <h3>Spinner-style text indicator</h3>
            <p>When there is no trustworthy percentage yet, keep the bar moving and let the text explain what is happening.</p>
            <div class="progressStack">
              <dees-progressbar
                label="Dependency install"
                .indeterminate=${true}
                statusText="Downloading package metadata..."
                .statusRows=${2}
              ></dees-progressbar>
              <dees-progressbar
                label="Queued job"
                .percentage=${32}
                .showPercentage=${false}
                statusText="Waiting for a worker slot to become available..."
                .statusRows=${2}
              ></dees-progressbar>
            </div>
          </section>

          <section class="showcaseCard wide">
            <div class="codeLabel">Terminal Lines</div>
            <h3>Fixed-height terminal-style status output</h3>
            <p>The panel stays the same height while the latest step stays visible. This is useful for update flows, downloads, and staged background work.</p>
            <dees-progressbar
              id="terminal-progress"
              label="Release bundle"
              .percentage=${20}
              .indeterminate=${true}
              .statusRows=${4}
              .terminalLines=${terminalSnapshots[0]}
            ></dees-progressbar>
          </section>

          <section class="showcaseCard">
            <div class="codeLabel">Live Demo</div>
            <h3>Updating percentage and text together</h3>
            <p>A single component can express both how far the job is and which phase is currently active.</p>
            <dees-progressbar
              id="live-progress"
              label="Customer export"
              .percentage=${12}
              statusText="Preparing archive and dependency graph..."
              .statusRows=${2}
            ></dees-progressbar>
          </section>

          <section class="showcaseCard">
            <div class="codeLabel">Compatibility</div>
            <h3>Legacy <code>value</code> and <code>progress</code> inputs</h3>
            <p>Existing usages can keep passing percentages directly or normalized progress values from 0 to 1.</p>
            <div class="progressStack">
              <dees-progressbar
                label="From value"
                .value=${75}
                statusText="Migrating existing readme-style usage..."
                .statusRows=${2}
              ></dees-progressbar>
              <dees-progressbar
                label="From progress"
                .progress=${0.42}
                .showPercentage=${false}
                statusText="Rendering normalized progress input..."
                .statusRows=${2}
              ></dees-progressbar>
            </div>
          </section>
        </div>
      </div>
    </dees-demowrapper>
  `;
};