dees-catalog/ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts

import { html } from '@design.estate/dees-element';
import { DeesStepper, type IStep } from './dees-stepper.js';

const waitForProgressTick = async (timeoutArg: number, signal?: AbortSignal): Promise<boolean> => {
  return new Promise((resolve) => {
    let completed = false;

    const finish = (result: boolean) => {
      if (completed) {
        return;
      }

      completed = true;
      if (signal) {
        signal.removeEventListener('abort', handleAbort);
      }
      resolve(result);
    };

    const handleAbort = () => {
      window.clearTimeout(timeoutId);
      finish(false);
    };

    const timeoutId = window.setTimeout(() => {
      finish(true);
    }, timeoutArg);

    if (signal) {
      signal.addEventListener('abort', handleAbort, { once: true });
    }
  });
};

const createContinueMenuOptions = (labelArg = 'Continue') => [
  {
    name: labelArg,
    action: async (stepper?: DeesStepper) => stepper?.goNext(),
  },
];

const createDemoSteps = (): IStep[] => [
  {
    title: 'Account Setup',
    content: html`
      <dees-form>
        <dees-input-text key="email" label="Work Email" required></dees-input-text>
        <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
      </dees-form>
    `,
    menuOptions: createContinueMenuOptions(),
  },
  {
    title: 'Profile Details',
    content: html`
      <dees-form>
        <dees-input-text key="firstName" label="First Name" required></dees-input-text>
        <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
      </dees-form>
    `,
    menuOptions: createContinueMenuOptions(),
  },
  {
    title: 'Contact Information',
    content: html`
      <dees-form>
        <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
        <dees-input-text key="company" label="Company"></dees-input-text>
      </dees-form>
    `,
    menuOptions: createContinueMenuOptions(),
  },
  {
    title: 'Provision Workspace',
    content: html`
      <dees-panel>
        <p>
          We are creating your starter workspace, applying your onboarding choices,
          and preparing a live preview. This step moves forward automatically when
          the environment is ready.
        </p>
      </dees-panel>
    `,
    progressStep: {
      label: 'Workspace setup',
      percentage: 8,
      indeterminate: true,
      statusRows: 4,
      statusText: 'Allocating a clean workspace...',
      terminalLines: ['Allocating a clean workspace'],
    },
    validationFunc: async (stepper, _htmlElement, signal) => {
      const progressFrames = [
        { line: 'Allocating a clean workspace', percentage: 8, delay: 500 },
        { line: 'Syncing account preferences', percentage: 24, delay: 650 },
        { line: 'Installing selected integrations', percentage: 47, delay: 700 },
        { line: 'Generating starter project files', percentage: 71, delay: 650 },
        { line: 'Booting the live preview environment', percentage: 92, delay: 700 },
      ];

      stepper.resetProgressStep();

      for (const [index, progressFrame] of progressFrames.entries()) {
        if (signal?.aborted) {
          return;
        }

        if (index === 0) {
          stepper.updateProgressStep({
            percentage: progressFrame.percentage,
            indeterminate: true,
            statusText: `${progressFrame.line}...`,
            terminalLines: [progressFrame.line],
          });
        } else {
          stepper.appendProgressStepLine(progressFrame.line);
          stepper.updateProgressStep({
            percentage: progressFrame.percentage,
            indeterminate: true,
            statusText: `${progressFrame.line}...`,
          });
        }

        const completed = await waitForProgressTick(progressFrame.delay, signal);
        if (!completed) {
          return;
        }
      }

      stepper.appendProgressStepLine('Workspace ready');
      stepper.updateProgressStep({
        percentage: 100,
        indeterminate: false,
        statusText: 'Workspace ready.',
      });

      await waitForProgressTick(350, signal);
    },
  },
  {
    title: 'Team Size',
    content: html`
      <dees-form>
        <dees-input-dropdown
          key="teamSize"
          label="How big is your team?"
          .options=${[
            { label: '1-5', value: '1-5' },
            { label: '6-20', value: '6-20' },
            { label: '21-50', value: '21-50' },
            { label: '51+', value: '51+' },
          ]}
          required
        ></dees-input-dropdown>
      </dees-form>
    `,
    menuOptions: createContinueMenuOptions(),
  },
  {
    title: 'Goals',
    content: html`
      <dees-form>
        <dees-input-multitoggle
          key="goal"
          label="Main objective"
          .options=${[
            { label: 'Onboarding', value: 'onboarding' },
            { label: 'Analytics', value: 'analytics' },
            { label: 'Automation', value: 'automation' },
          ]}
          required
        ></dees-input-multitoggle>
      </dees-form>
    `,
    menuOptions: createContinueMenuOptions(),
  },
  {
    title: 'Review & Launch',
    content: html`
      <dees-panel>
        <p>
          Your workspace is ready. Review the collected details and launch when
          you are ready to start.
        </p>
      </dees-panel>
    `,
    menuOptions: [
      {
        name: 'Launch',
        action: async (stepper?: DeesStepper) => {
          if (stepper?.overlay) {
            await stepper.destroy();
          }
        },
      },
    ],
  },
];

export const stepperDemo = () => html`
  <div style="position: absolute; inset: 0;">
    <div
      style="position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;"
    >
      <dees-button
        @click=${async () => {
          await DeesStepper.createAndShow({ steps: createDemoSteps() });
        }}
      >Open stepper as overlay</dees-button>
    </div>
    <dees-stepper .steps=${createDemoSteps()}></dees-stepper>
  </div>
`;