Various fixes

package.json

@@ -9,7 +9,7 @@
     ]
   },
   "dependencies": {
-    "chromatic": "^10.8.0",
+    "chromatic": "^11.0.0",
     "filesize": "^10.0.12",
     "jsonfile": "^6.1.0",
     "react-confetti": "^6.1.0"

src/buildSteps.ts

@@ -44,7 +44,7 @@ export const BUILD_STEP_CONFIG: Record<
     renderName: () => `Build Storybook`,
     renderProgress: () => `Building your Storybook...`,
     renderComplete: () => `Storybook built`,
-    estimateDuration: 30_000,
+    estimateDuration: 20_000,
   },
   upload: {
     key: "upload",
@@ -65,15 +65,15 @@ export const BUILD_STEP_CONFIG: Record<
       return `Uploading files (${progress}/${total} ${symbol})...`;
     },
     renderComplete: () => `Publish complete`,
-    estimateDuration: 30_000,
+    estimateDuration: 20_000,
   },
   verify: {
     key: "verify",
     emoji: "🔍",
     renderName: () => `Verify your Storybook`,
     renderProgress: () => `Verifying contents...`,
     renderComplete: () => `Storybook verified`,
-    estimateDuration: 10_000,
+    estimateDuration: 20_000,
   },
   snapshot: {
     key: "snapshot",
@@ -86,7 +86,7 @@ export const BUILD_STEP_CONFIG: Record<
         : `Running visual tests...`;
     },
     renderComplete: () => `Tested your stories`,
-    estimateDuration: 60_000,
+    estimateDuration: 90_000,
   },
 
   // These are special steps that are not part of the build process

src/index.ts

@@ -152,16 +152,15 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
 
     const writtenConfigFile = configFile;
     try {
-      const { configFile: actualConfigFile, ...config } = await getConfiguration(writtenConfigFile);
-      await updateChromaticConfig(writtenConfigFile || "chromatic.config.json", {
-        ...config,
-        projectId,
-      });
+      // No config file may be found (file is about to be created)
+      const { configFile: foundConfigFile, ...config } = await getConfiguration(writtenConfigFile);
+      const targetConfigFile = foundConfigFile || writtenConfigFile || "chromatic.config.json";
+      await updateChromaticConfig(targetConfigFile, { ...config, projectId });
 
       projectInfoState.value = {
         ...projectInfoState.value,
         written: true,
-        configFile: actualConfigFile,
+        configFile: targetConfigFile,
       };
     } catch (err) {
       console.warn(`Failed to update your main configuration:\n\n ${err}`);

src/runChromaticBuild.test.ts

@@ -74,55 +74,55 @@ describe("onStartOrProgress", () => {
 
     onStartOrProgress(store)({ task: "upload" } as any);
     expect(store.value).toMatchObject({
-      buildProgressPercentage: expect.closeTo(24, 0),
+      buildProgressPercentage: expect.closeTo(14, 0),
       currentStep: "upload",
       stepProgress: { upload: { startedAt: expect.any(Number) } },
     });
 
     onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value).toMatchObject({
-      buildProgressPercentage: expect.closeTo(48, 0),
+      buildProgressPercentage: expect.closeTo(29, 0),
       currentStep: "verify",
       stepProgress: { verify: { startedAt: expect.any(Number) } },
     });
 
     onStartOrProgress(store)({ task: "snapshot" } as any);
     expect(store.value).toMatchObject({
-      buildProgressPercentage: expect.closeTo(55, 0),
+      buildProgressPercentage: expect.closeTo(41, 0),
       currentStep: "snapshot",
       stepProgress: { snapshot: { startedAt: expect.any(Number) } },
     });
   });
 
   it("updates progress with each invocation", () => {
     onStartOrProgress(store)({ task: "verify" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(48, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(29, 0);
 
     onStartOrProgress(store)({ task: "verify" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(50, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(30, 0);
 
     onStartOrProgress(store)({ task: "verify" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(52, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(32, 0);
   });
 
   it("can never exceed progress for a step beyond the next step", () => {
     for (let n = 10; n; n -= 1) onStartOrProgress(store)({ task: "verify" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0);
 
     for (let n = 10; n; n -= 1) onStartOrProgress(store)({ task: "verify" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0);
 
     onStartOrProgress(store)({ task: "snapshot" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0);
   });
 
   it('updates build progress based on "progress" and "total" values', () => {
     onStartOrProgress(store)({ task: "snapshot" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0);
 
     onStartOrProgress(store)({ task: "snapshot" } as any, { progress: 1, total: 2 });
     expect(store.value.stepProgress.snapshot).toMatchObject({ numerator: 1, denominator: 2 });
-    expect(store.value.buildProgressPercentage).toBeCloseTo(77, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(70, 0);
 
     onStartOrProgress(store)({ task: "snapshot" } as any, { progress: 2, total: 2 });
     expect(store.value.stepProgress.snapshot).toMatchObject({ numerator: 2, denominator: 2 });
@@ -149,12 +149,12 @@ describe("onCompleteOrError", () => {
 
   it("does not set build progress to 100% on error", () => {
     onStartOrProgress(store)({ task: "snapshot" } as any);
-    expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
+    expect(store.value.buildProgressPercentage).toBeCloseTo(41, 0);
 
     const error = { formattedError: "Oops!", originalError: new Error("Oops!") };
     onCompleteOrError(store)({ task: "snapshot" } as any, error);
     expect(store.value).toMatchObject({
-      buildProgressPercentage: expect.closeTo(55, 0),
+      buildProgressPercentage: expect.closeTo(41, 0),
       currentStep: "error",
       stepProgress: { snapshot: { completedAt: expect.any(Number) } },
       ...error,

src/screens/Authentication/Verify.tsx

@@ -149,7 +149,7 @@ export const Verify = ({
           <div>
             <Heading>Verify your account</Heading>
             <Text>
-              Enter this verification code on Chromatic to grant access to your published
+              Check this verification code on Chromatic to grant access to your published
               Storybooks.
             </Text>
             <Digits>

src/utils/updateChromaticConfig.ts

@@ -2,5 +2,5 @@ import type { Configuration } from "chromatic/node";
 import { writeFile } from "jsonfile";
 
 export async function updateChromaticConfig(configFile: string, configuration: Configuration) {
-  await writeFile(configFile, configuration);
+  await writeFile(configFile, configuration, { spaces: 2 });
 }

yarn.lock

@@ -4975,10 +4975,10 @@ chownr@^2.0.0:
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chromatic@^10.8.0:
-  version "10.8.0"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-10.8.0.tgz#741b0af9ba0e9605408f8a452fca2066a4b28ad4"
-  integrity sha512-DdgUSJJ5u+Czf+KZI+1NRz4RP/PbpcytWSUtpgqEBolGDw65VYwjI489yis+jfwKMev1VWEhj1xMYGITbD6XIA==
+chromatic@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.0.0.tgz#3fcd5129a01c9b6bbd5ed46a11795ad5ac0731d3"
+  integrity sha512-utzRVqdMrpzYwZNf7dHWU0z0/rx6SH/FUVNozQxYHDtQfYUdEj+Ro4OSch5+Wsk2FoUmznJyLkaC2J839z1N7A==
 
 citty@^0.1.5:
   version "0.1.5"