Pull type defs from constants into types.ts and fix eyebrow progress …

…overview

package.json

@@ -62,6 +62,7 @@
     "@storybook/design-system": "^7.15.15",
     "chromatic": "^7.1.0",
     "date-fns": "^2.30.0",
+    "filesize": "^10.0.12",
     "pluralize": "^8.0.0",
     "ts-dedent": "^2.2.0",
     "urql": "^4.0.3",

src/Panel.tsx

@@ -4,22 +4,13 @@ import { useChannel, useStorybookState } from "@storybook/manager-api";
 import React, { useCallback } from "react";
 
 import { Sections } from "./components/layout";
-import {
-  ADDON_ID,
-  GIT_INFO,
-  GitInfoPayload,
-  IS_OUTDATED,
-  PANEL_ID,
-  RUNNING_BUILD,
-  RunningBuildPayload,
-  START_BUILD,
-} from "./constants";
+import { ADDON_ID, GIT_INFO, IS_OUTDATED, PANEL_ID, RUNNING_BUILD, START_BUILD } from "./constants";
 import { Authentication } from "./screens/Authentication/Authentication";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkingProjectFailed } from "./screens/LinkProject/LinkingProjectFailed";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
-import { UpdateStatusFunction } from "./types";
+import { GitInfoPayload, RunningBuildPayload, UpdateStatusFunction } from "./types";
 import { useAddonState } from "./useAddonState/manager";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
 import { useProjectId } from "./utils/useProjectId";

src/SidebarTop.tsx

@@ -4,13 +4,8 @@ import pluralize from "pluralize";
 import React, { useEffect, useRef } from "react";
 
 import { SidebarTopButton } from "./components/SidebarTopButton";
-import {
-  ADDON_ID,
-  IS_OUTDATED,
-  RUNNING_BUILD,
-  RunningBuildPayload,
-  START_BUILD,
-} from "./constants";
+import { ADDON_ID, IS_OUTDATED, RUNNING_BUILD, START_BUILD } from "./constants";
+import { RunningBuildPayload } from "./types";
 import { useAddonState } from "./useAddonState/manager";
 import { useAccessToken } from "./utils/graphQLClient";
 import { useProjectId } from "./utils/useProjectId";

src/buildSteps.ts

@@ -0,0 +1,102 @@
+import { TaskName } from "chromatic/node";
+import { filesize } from "filesize";
+
+import { KnownStep, RunningBuildPayload } from "./types";
+
+export const isKnownStep = (task: TaskName): task is KnownStep =>
+  BUILD_STEP_ORDER.includes(task as KnownStep);
+
+// Note this does not include the "complete" and "error" steps
+export const BUILD_STEP_ORDER: KnownStep[] = [
+  "initialize",
+  "build",
+  "upload",
+  "verify",
+  "snapshot",
+];
+
+export const BUILD_STEP_CONFIG: Record<
+  RunningBuildPayload["step"],
+  {
+    key: RunningBuildPayload["step"];
+    emoji: string;
+    renderName: () => string;
+    renderProgress: (payload: RunningBuildPayload) => string;
+    renderComplete: () => string;
+    weight: number;
+  }
+> = {
+  initialize: {
+    key: "initialize",
+    emoji: "🚀",
+    renderName: () => `Initialize build`,
+    renderProgress: () => `Initializing build`,
+    renderComplete: () => `Initialized`,
+    weight: 5,
+  },
+  build: {
+    key: "build",
+    emoji: "🏗",
+    renderName: () => `Build Storybook`,
+    renderProgress: () => `Building your Storybook...`,
+    renderComplete: () => `Storybook built`,
+    weight: 35,
+  },
+  upload: {
+    key: "upload",
+    emoji: "📡",
+    renderName: () => `Publish your Storybook`,
+    renderProgress: (payload) => {
+      if (!payload.stepProgressTotal) return `Uploading files`;
+      const { value: total, exponent } = filesize(payload.stepProgressTotal, {
+        output: "object",
+        round: 1,
+      });
+      const { value: progress, symbol } = filesize(payload.stepProgressValue, {
+        exponent,
+        output: "object",
+        round: 1,
+      });
+      return `Uploading files (${progress}/${total} ${symbol})`;
+    },
+    renderComplete: () => `Publish complete`,
+    weight: 15,
+  },
+  verify: {
+    key: "verify",
+    emoji: "🔍",
+    renderName: () => `Verify your Storybook`,
+    renderProgress: () => `Verifying contents...`,
+    renderComplete: () => `Storybook verified`,
+    weight: 10,
+  },
+  snapshot: {
+    key: "snapshot",
+    emoji: "📸",
+    renderName: () => `Run visual tests`,
+    renderProgress: (payload) =>
+      payload.stepProgressTotal
+        ? `Running visual tests (${payload.stepProgressValue}/${payload.stepProgressTotal})`
+        : `Running visual tests`,
+    renderComplete: () => `Tested your stories`,
+    weight: 35,
+  },
+
+  // These are special steps that are not part of the build process
+  complete: {
+    key: "complete",
+    emoji: "🎉",
+    renderName: () => `Visual tests completed!`,
+    renderProgress: () => `Visual tests completed!`,
+    renderComplete: () => `Visual tests completed!`,
+    weight: 0,
+  },
+  error: {
+    key: "error",
+    emoji: "🚨",
+    renderName: () => `Build failed`,
+    renderProgress: () => `Build failed`,
+    renderComplete: () => `Build failed`,
+    weight: 0,
+  },
+};

src/components/BuildProgressLabel.tsx

@@ -1,21 +1,17 @@
 import React from "react";
 
-import { RunningBuildPayload } from "../constants";
-
-const messageMap: Record<RunningBuildPayload["step"], (payload: RunningBuildPayload) => string> = {
-  initialize: () => `📦 Validating Storybook files...`,
-  build: () => `📦 Validating Storybook files...`,
-  upload: () => `📡 Uploading to Chromatic...`, // TODO represent progress in bytes
-  verify: () => `🛠️ Initiating build...`, // TODO build number
-  snapshot: () => `👀 Running visual tests...`, // TODO count
-  complete: () => `🎉 Visual tests completed!`,
-  error: () => `❌ Build failed`, // TODO error
-};
+import { BUILD_STEP_CONFIG } from "../buildSteps";
+import { RunningBuildPayload } from "../types";
 
 interface BuildProgressLabelProps {
   runningBuild: RunningBuildPayload;
 }
 
-export const BuildProgressLabel = ({ runningBuild }: BuildProgressLabelProps) => (
-  <>{messageMap[runningBuild.step](runningBuild)}</>
-);
+export const BuildProgressLabel = ({ runningBuild }: BuildProgressLabelProps) => {
+  const { emoji, renderProgress } = BUILD_STEP_CONFIG[runningBuild.step];
+  return (
+    <>
+      {emoji} {renderProgress(runningBuild)}
+    </>
+  );
+};

src/components/SidebarTopButton.tsx

@@ -2,7 +2,7 @@ import { Icons, WithTooltip } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 
-import { RunningBuildPayload } from "../constants";
+import { RunningBuildPayload } from "../types";
 import { BuildProgressLabel } from "./BuildProgressLabel";
 import { IconButton } from "./IconButton";
 import { StatusDotWrapper } from "./StatusDot";

src/constants.ts

@@ -1,5 +1,3 @@
-import type { GitInfo, TaskName } from "chromatic/node";
-
 export const {
   CHROMATIC_INDEX_URL,
   CHROMATIC_BASE_URL = CHROMATIC_INDEX_URL || "https://www.chromatic.com",
@@ -15,52 +13,7 @@ export const ACCESS_TOKEN_KEY = `${ADDON_ID}/access-token/${CHROMATIC_BASE_URL}`
 export const DEV_BUILD_ID_KEY = `${ADDON_ID}/dev-build-id`;
 
 export const GIT_INFO = `${ADDON_ID}/gitInfo`;
-export type GitInfoPayload = Omit<GitInfo, "committerEmail" | "committerName">;
-
 export const PROJECT_INFO = `${ADDON_ID}/projectInfo`;
-export type ProjectInfoPayload = {
-  projectId?: string;
-  projectToken?: string;
-  written?: boolean;
-  configDir?: string;
-  mainPath?: string;
-};
-
-// The CLI may have other steps that we don't respond to, so we just ignore updates
-// to those steps and focus on the ones we know.
-type KnownStep = Extract<TaskName, "initialize" | "build" | "upload" | "verify" | "snapshot">;
-export const knownSteps = ["initialize", "build", "upload", "verify", "snapshot"];
-export const isKnownStep = (task: TaskName): task is KnownStep => knownSteps.includes(task);
-
 export const IS_OUTDATED = `${ADDON_ID}/isOutdated`;
 export const START_BUILD = `${ADDON_ID}/startBuild`;
 export const RUNNING_BUILD = `${ADDON_ID}/runningBuild`;
-export type RunningBuildPayload = {
-  /** The id of the build, available after the initialize step */
-  buildId?: string;
-
-  /** Overall percentage of build progress */
-  buildProgressPercentage?: number;
-
-  // Possibly this should be a type exported by the CLI -- these correspond to tasks
-  /** The step of the build process we have reached */
-  step: KnownStep | "error" | "complete";
-
-  /** Current task progress value (e.g. bytes or snapshots) */
-  stepProgressValue?: number;
-
-  /** Current task progress total (e.g. bytes or snapshots)  */
-  stepProgressTotal?: number;
-
-  /** Number of visual changes detected */
-  changeCount?: number;
-
-  /** Number of component errors detected */
-  errorCount?: number;
-
-  /** The error message formatted to display in CLI */
-  formattedError?: string;
-
-  /** The original error without formatting */
-  originalError?: Error | Error[];
-};

src/index.ts

@@ -4,18 +4,15 @@ import type { Channel } from "@storybook/channels";
 import { Context, getGitInfo, GitInfo, run, TaskName } from "chromatic/node";
 import { basename, relative } from "path";
 
+import { BUILD_STEP_ORDER, isKnownStep } from "./buildSteps";
 import {
   CHROMATIC_BASE_URL,
   GIT_INFO,
-  GitInfoPayload,
-  isKnownStep,
-  knownSteps,
   PROJECT_INFO,
-  ProjectInfoPayload,
   RUNNING_BUILD,
-  RunningBuildPayload,
   START_BUILD,
 } from "./constants";
+import { GitInfoPayload, KnownStep, ProjectInfoPayload, RunningBuildPayload } from "./types";
 import { useAddonState } from "./useAddonState/server";
 import { findConfig } from "./utils/storybook.config.utils";
 import { updateMain } from "./utils/updateMain";
@@ -113,9 +110,10 @@ async function serverChannel(
       { progress, total }: { progress?: number; total?: number } = {}
     ) => {
       if (isKnownStep(ctx.task)) {
-        let buildProgressPercentage = (knownSteps.indexOf(ctx.task) / knownSteps.length) * 100;
+        let buildProgressPercentage =
+          (BUILD_STEP_ORDER.indexOf(ctx.task) / BUILD_STEP_ORDER.length) * 100;
         if (progress && total) {
-          buildProgressPercentage += (progress / total) * (100 / knownSteps.length);
+          buildProgressPercentage += (progress / total) * (100 / BUILD_STEP_ORDER.length);
         }
         runningBuildState.value = {
           buildId: ctx.announcedBuild?.id,
@@ -127,7 +125,10 @@ async function serverChannel(
       }
     };
 
-    runningBuildState.value = { step: "initialize" };
+    runningBuildState.value = {
+      step: "initialize",
+      buildProgressPercentage: 0,
+    };
     await run({
       // Currently we have to have these flags.
       // We should move the checks to after flags have been parsed into options.
@@ -160,7 +161,7 @@ async function serverChannel(
             buildId: ctx.announcedBuild?.id,
             buildProgressPercentage:
               runningBuildState.value.buildProgressPercentage ??
-              knownSteps.indexOf(ctx.task) / knownSteps.length,
+              BUILD_STEP_ORDER.indexOf(ctx.task as KnownStep) / BUILD_STEP_ORDER.length,
             step: "error",
             formattedError,
             originalError,

src/screens/VisualTests/BuildEyebrow.stories.ts

@@ -18,6 +18,7 @@ export const Initialize: Story = {
   args: {
     runningBuild: {
       step: "initialize",
+      buildProgressPercentage: 0,
     },
   },
   parameters: withFigmaDesign(
@@ -29,7 +30,7 @@ export const Build: Story = {
   args: {
     runningBuild: {
       step: "build",
-      buildProgressPercentage: 30,
+      buildProgressPercentage: 8,
     },
   },
   parameters: withFigmaDesign(
@@ -41,8 +42,8 @@ export const Upload: Story = {
   args: {
     runningBuild: {
       step: "upload",
-      stepProgressValue: 500,
-      stepProgressTotal: 1000,
+      stepProgressValue: 4_200_000,
+      stepProgressTotal: 123_000_000,
       buildProgressPercentage: 50,
     },
   },