Use chromatic.config.json rather than setting options in main.js

.storybook/main.ts

@@ -1,29 +1,12 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { CHROMATIC_BASE_URL } from "../src/constants";
 
-const prodConfig = {
-  projectToken: "chpt_5a1a378a1392c49",
-  projectId: "Project:6480e1b0042842f149cfd74c",
-};
-
-const stagingConfig = {
-  projectToken: "chpt_fdc053b44dc78f3",
-  projectId: "Project:64936c844fd570be8b75bdac",
-};
-
-// You probably want to tweak your dev database to have these values.
-// Otherwise run with env vars set
-const devConfig = {
-  projectToken: process.env.CHROMATIC_PROJECT_TOKEN || "chpt_a898d6d22bcc592",
-  projectId: process.env.CHROMATIC_PROJECT_ID || "Project:64c0b64ef4c47fe31e1262f5",
-};
-
 const useDistVersion = process.env.CHROMATIC_USE_DIST_VERSION === "true";
 
-const addonOptionsMap = {
-  "https://www.chromatic.com": prodConfig,
-  "https://www.staging-chromatic.com": stagingConfig,
-  "https://www.dev-chromatic.com": devConfig,
+const configFileMap = {
+  "https://www.chromatic.com": "production.config.json",
+  "https://www.staging-chromatic.com": "staging.config.json",
+  "https://www.dev-chromatic.com": "development.config.json",
 };
 
 const config: StorybookConfig = {
@@ -39,7 +22,9 @@ const config: StorybookConfig = {
     "@storybook/addon-designs",
     {
       name: useDistVersion ? "../dist/index.js" : "../src/dev.ts",
-      options: addonOptionsMap[CHROMATIC_BASE_URL],
+      options: {
+        configFile: configFileMap[CHROMATIC_BASE_URL || '"https://www.chromatic.com"'],
+      },
     },
   ],
   docs: {

Development.md

@@ -8,10 +8,10 @@ CHROMATIC_BASE_URL=https://www.staging-chromatic.com yarn storybook
 
 If running with the index URL set in against the addon's Storybook, we'll also update the configured
 project identifier appropriately. If you are running in dev, you can either tweak your database to have
-the correct project identifier/token, or you can run with the extra environment variables set:
+the correct project identifier/token, or you can alter `development.config.json` and run with:
 
 ```bash
-CHROMATIC_PROJECT_ID=xyz CHROMATIC_PROJECT_TOKEN=abc CHROMATIC_BASE_URL=https://www.dev-chromatic.com yarn storybook
+CHROMATIC_BASE_URL=https://www.dev-chromatic.com yarn storybook
 ```
 
 ## Running against an outside Storybook

development.config.json

@@ -0,0 +1,5 @@
+{
+  "projectToken": "chpt_a898d6d22bcc592",
+  "projectId": "Project:64c0b64ef4c47fe31e1262f5",
+  "zip": true
+}

package.json

@@ -58,10 +58,10 @@
     "typecheck": "tsc --noemit"
   },
   "dependencies": {
-    "@storybook/csf-tools": "7.5.0-alpha.1",
     "@storybook/design-system": "^7.15.15",
-    "chromatic": "^7.1.0",
+    "chromatic": "7.2.0-next.1",
     "date-fns": "^2.30.0",
+    "jsonfile": "^6.1.0",
     "filesize": "^10.0.12",
     "pluralize": "^8.0.0",
     "ts-dedent": "^2.2.0",
@@ -87,6 +87,7 @@
     "@storybook/testing-library": "^0.2.1-next.0",
     "@storybook/theming": "7.5.0-alpha.1",
     "@types/jest": "^29.5.3",
+    "@types/jsonfile": "^6.1.1",
     "@types/node": "^18.15.0",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^16.14.0",

production.config.json

@@ -0,0 +1,5 @@
+{
+  "projectId": "Project:6480e1b0042842f149cfd74c",
+  "projectToken": "chpt_5a1a378a1392c49",
+  "zip": true
+}

src/Panel.tsx

@@ -37,8 +37,7 @@ export const Panel = ({ active, api }: PanelProps) => {
     loading: projectInfoLoading,
     projectId,
     projectToken,
-    configDir,
-    mainPath,
+    configFile,
     updateProject,
     projectUpdatingFailed,
     projectIdUpdated,
@@ -73,8 +72,7 @@ export const Panel = ({ active, api }: PanelProps) => {
         <LinkingProjectFailed
           projectId={projectId}
           projectToken={projectToken}
-          mainPath={mainPath}
-          configDir={configDir}
+          configFile={configFile}
         />
       </Sections>
     );
@@ -86,7 +84,7 @@ export const Panel = ({ active, api }: PanelProps) => {
         <Sections hidden={!active}>
           <LinkedProject
             projectId={projectId}
-            mainPath={mainPath}
+            configFile={configFile}
             goToNext={clearProjectIdUpdated}
             setAccessToken={setAccessToken}
           />

src/constants.ts

@@ -1,7 +1,6 @@
 export const {
   CHROMATIC_INDEX_URL,
   CHROMATIC_BASE_URL = CHROMATIC_INDEX_URL || "https://www.chromatic.com",
-  CHROMATIC_ADDON_NAME = "@chromaui/addon-visual-tests",
   CHROMATIC_API_URL = `${CHROMATIC_BASE_URL}/api`,
 } = process.env;
 

src/index.ts

@@ -1,8 +1,7 @@
 /* eslint-disable no-console */
 import type { Channel } from "@storybook/channels";
 // eslint-disable-next-line import/no-unresolved
-import { getGitInfo, GitInfo } from "chromatic/node";
-import { basename, relative } from "path";
+import { getConfiguration, getGitInfo, GitInfo } from "chromatic/node";
 
 import {
   CHROMATIC_BASE_URL,
@@ -14,8 +13,7 @@ import {
 import { runChromaticBuild } from "./runChromaticBuild";
 import { GitInfoPayload, ProjectInfoPayload, RunningBuildPayload } from "./types";
 import { useAddonState } from "./useAddonState/server";
-import { findConfig } from "./utils/storybook.config.utils";
-import { updateMain } from "./utils/updateMain";
+import { updateChromaticConfig } from "./utils/updateChromaticConfig";
 
 /**
  * to load the built addon in this test Storybook
@@ -47,24 +45,14 @@ const observeGitInfo = async (
 
 async function serverChannel(
   channel: Channel,
-  {
-    configDir,
-    projectId: initialProjectId,
-    projectToken: initialProjectToken,
-
-    // This is a small subset of the flags available to the CLI.
-    buildScriptName,
-    debug,
-    zip,
-  }: {
-    configDir: string;
-    projectId: string;
-    projectToken: string;
-    buildScriptName?: string;
-    debug?: boolean;
-    zip?: boolean;
-  }
+  // configDir is the standard storybook flag (-c to the storybook CLI)
+  // configFile is the `main.js` option, which should be set by the user to correspond to the
+  //   chromatic option (-c to the chromatic CLI)
+  { configDir, configFile }: { configDir: string; configFile?: string }
 ) {
+  const configuration = await getConfiguration(configFile);
+  const { projectId: initialProjectId, projectToken: initialProjectToken } = configuration;
+
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const projectInfoState = useAddonState<ProjectInfoPayload>(channel, PROJECT_INFO);
   projectInfoState.value = initialProjectId
@@ -73,29 +61,30 @@ async function serverChannel(
 
   let lastProjectToken = initialProjectToken;
   projectInfoState.on("change", async ({ projectId, projectToken }) => {
+    if (!projectId || !projectToken) return;
     if (projectToken === lastProjectToken) return;
     lastProjectToken = projectToken;
 
-    const relativeConfigDir = relative(process.cwd(), configDir);
-    let mainPath: string;
+    const writtenConfigFile = configFile || "chromatic.config.json";
     try {
-      mainPath = await findConfig(configDir, "main");
-      await updateMain({ mainPath, projectId, projectToken });
+      await updateChromaticConfig(writtenConfigFile, {
+        ...configuration,
+        projectId,
+        projectToken,
+      });
 
       projectInfoState.value = {
         ...projectInfoState.value,
         written: true,
-        mainPath: basename(mainPath),
-        configDir: relativeConfigDir,
+        configFile: writtenConfigFile,
       };
     } catch (err) {
       console.warn(`Failed to update your main configuration:\n\n ${err}`);
 
       projectInfoState.value = {
         ...projectInfoState.value,
         written: false,
-        mainPath: mainPath && basename(mainPath),
-        configDir: relativeConfigDir,
+        configFile: writtenConfigFile,
       };
     }
   });
@@ -105,7 +94,7 @@ async function serverChannel(
 
   channel.on(START_BUILD, async () => {
     const { projectToken } = projectInfoState.value;
-    await runChromaticBuild(runningBuildState, { projectToken, buildScriptName, debug, zip });
+    await runChromaticBuild(runningBuildState, { projectToken });
   });
 
   // eslint-disable-next-line react-hooks/rules-of-hooks

src/screens/LinkProject/LinkedProject.stories.ts

@@ -17,7 +17,7 @@ const meta = {
   component: LinkedProject,
   args: {
     projectId: "Project:abc123",
-    mainPath: "main.ts",
+    configFile: "chromatic.config.json",
     goToNext: action("goToNext"),
     setAccessToken: action("setAccessToken"),
   },

src/screens/LinkProject/LinkedProject.tsx

@@ -37,12 +37,12 @@ const ProjectQuery = graphql(/* GraphQL */ `
 
 export const LinkedProject = ({
   projectId,
-  mainPath,
+  configFile,
   goToNext,
   setAccessToken,
 }: {
   projectId: string;
-  mainPath: string;
+  configFile: string;
   goToNext: () => void;
   setAccessToken: (accessToken: string | null) => void;
 }) => {
@@ -64,8 +64,8 @@ export const LinkedProject = ({
                 <Heading>Project linked!</Heading>
                 <Text style={{ maxWidth: 380 }}>
                   The <code>projectId</code> for {data.project.name} has been added to this
-                  Storybook&apos;s <code>{mainPath}</code>. This will be used to sync with
-                  Chromatic. Please commit this change to continue using this addon.
+                  project's <code>{configFile}</code>. This will be used to sync with Chromatic.
+                  Please commit this change to continue using this addon.
                 </Text>
                 <Button secondary onClick={() => goToNext()}>
                   Catch a UI change

src/screens/LinkProject/LinkingProjectFailed.stories.ts

@@ -7,7 +7,7 @@ const meta = {
   args: {
     projectId: "Project:abc123",
     projectToken: "xzy789",
-    configDir: ".storybook",
+    configFile: "chromatic.config.json",
   },
 } satisfies Meta<typeof LinkingProjectFailed>;
 
@@ -16,8 +16,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const WithMainPath: Story = {
+export const WithCustomConfig: Story = {
   args: {
-    mainPath: "main.ts",
+    configFile: "production.chromatic.config.json",
   },
 };

src/screens/LinkProject/LinkingProjectFailed.tsx

@@ -10,45 +10,32 @@ import { Text as CenterText } from "../../components/Text";
 type LinkingProjectFailedProps = {
   projectId: string;
   projectToken: string;
-  configDir: string;
-  mainPath?: string;
+  configFile: string;
 };
 
-const addonName = "@chromaui/addon-visual-tests";
 const configureDocsLink = "https://www.chromatic.com/docs/addon-visual-tests#configure";
 
 export function LinkingProjectFailed({
   projectId,
   projectToken,
-  configDir,
-  mainPath,
+  configFile,
 }: LinkingProjectFailedProps) {
   return (
     <Sections>
       <Section grow>
         <Container>
           <CenterText>
-            <Heading>Add the Project ID to your Storybook config</Heading>
+            <Heading>Add the Project ID to your Chromatic config</Heading>
             The <code>projectId</code> will be used to reference prior tests. Please commit this
-            change to continue using this addon.
+            change to continue using this addon. The file should be saved at{" "}
+            <code>{configFile}</code>.
           </CenterText>
           <Code>
             {dedent`
-            // ${configDir}/${mainPath ?? `main.js|ts|tsx`}
-
-            module.exports = {
-              // ...,
-              addons: [
-                // ...
-                {
-                  name: '${addonName}',
-                  options: {
-                    projectId: '${projectId}',
-                    projectToken: '${projectToken}',
-                  },
-                },
-              ],
-            };
+            {
+              "projectId": "${projectId}",
+              "projectToken": "${projectToken}",
+            }
             `}
           </Code>
           <CenterText>

src/types.ts

@@ -22,8 +22,7 @@ export type ProjectInfoPayload = {
   projectId?: string;
   projectToken?: string;
   written?: boolean;
-  configDir?: string;
-  mainPath?: string;
+  configFile?: string;
 };
 
 // The CLI may have other steps that we don't respond to, so we just ignore updates

src/utils/updateChromaticConfig.ts

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