Merge pull request #306 from chromaui/255-automatically-configure-tur…

…bosnap Suggest enabling TurboSnap and use all suggestions in generated config file
chromaui · May 15, 2024 · 41487ab · 41487ab
2 parents 77a14e4 + 7d1ae70
commit 41487ab
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/components/Screen.stories.tsx b/src/components/Screen.stories.tsx
@@ -29,7 +29,6 @@ export const Default: Story = {};
 const configuration = {
   configFile: "chromatic.config.json",
   projectId: "Project:6480e1b0042842f149cfd74c",
-  onlyChanged: true,
   externals: ["public/**"],
   autoAcceptChanges: "main",
   exitOnceUploaded: true,
@@ -40,7 +39,7 @@ export const Configuration: Story = {
     withSharedState(CONFIG_INFO, {
       configuration,
       problems: { storybookBaseDir: "src/frontend" },
-      suggestions: { zip: true },
+      suggestions: { onlyChanged: true, zip: true },
     } satisfies ConfigInfoPayload),
   ],
   parameters: {
@@ -55,7 +54,6 @@ export const ConfigurationProblems = {
     withSharedState(CONFIG_INFO, {
       configuration,
       problems: { storybookBaseDir: "src/frontend" },
-      suggestions: { zip: true },
     }),
   ],
 } satisfies StoryObj<typeof meta>;
@@ -65,7 +63,7 @@ export const ConfigurationSuggestions = {
     withSetup(() => localStorage.removeItem(CONFIG_INFO_DISMISSED)),
     withSharedState(CONFIG_INFO, {
       configuration,
-      suggestions: { zip: true },
+      suggestions: { onlyChanged: true, zip: true },
     }),
   ],
 } satisfies StoryObj<typeof meta>;

diff --git a/src/preset.ts b/src/preset.ts
@@ -97,7 +97,11 @@ const getConfigInfo = async (
     problems.storybookConfigDir = configDir;
   }
 
-  if (!configuration.zip) {
+  if (configuration.onlyChanged === undefined) {
+    suggestions.onlyChanged = true;
+  }
+
+  if (configuration.zip === undefined) {
     suggestions.zip = true;
   }
 
@@ -209,7 +213,13 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
       // 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, zip: true });
+      const { problems, suggestions } = await getConfigInfo(config, options);
+      await updateChromaticConfig(targetConfigFile, {
+        ...config,
+        ...problems,
+        ...suggestions,
+        projectId,
+      });
 
       projectInfoState.value = {
         ...projectInfoState.value,

diff --git a/src/screens/VisualTests/Configuration.tsx b/src/screens/VisualTests/Configuration.tsx
@@ -302,7 +302,7 @@ export const Configuration = ({ onClose }: ConfigurationProps) => {
         <CloseIcon aria-label="Close" />
       </StyledCloseButton>
       <PageWrapper>
-        <Heading>Configuration </Heading>
+        <Heading>Configuration</Heading>
         {configFile ? (
           <PageDescription>
             This is a read-only representation of the Chromatic configuration options found in{" "}

diff --git a/src/utils/updateChromaticConfig.ts b/src/utils/updateChromaticConfig.ts
@@ -2,5 +2,8 @@ import type { Configuration } from "chromatic/node";
 import { writeFile } from "jsonfile";
 
 export async function updateChromaticConfig(configFile: string, configuration: Configuration) {
-  await writeFile(configFile, configuration, { spaces: 2 });
+  const formatted = Object.entries(configuration)
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .reduce((acc, [key, val]) => (val === null ? acc : Object.assign(acc, { [key]: val })), {});
+  await writeFile(configFile, formatted, { spaces: 2 });
 }