Update onboarding flow with animation and better error handling

package.json

@@ -28,6 +28,7 @@
   },
   "main": "dist/index.js",
   "files": [
+    "assets/**/*",
     "dist/**/*",
     "README.md",
     "*.js",

src/Panel.tsx

@@ -15,7 +15,7 @@
   TELEMETRY,
 } from './constants';
 import { Authentication } from './screens/Authentication/Authentication';
-import { GitNotFound } from './screens/Errors/GitNotFound';
+import { GitError } from './screens/Errors/GitError';
 import { LinkedProject } from './screens/LinkProject/LinkedProject';
 import { LinkingProjectFailed } from './screens/LinkProject/LinkingProjectFailed';
 import { LinkProject } from './screens/LinkProject/LinkProject';
@@ -149,7 +149,7 @@
   }
 
   if (gitInfoError || !gitInfo) {
-    return withProviders(<GitNotFound />);
+    return withProviders(<GitError gitInfoError={gitInfoError} />);
   }
 
   // Momentarily wait on addonState (should be very fast)

src/TestProviderRender.tsx

@@ -103,21 +103,21 @@
   });
 
   let warning: string | undefined;
-  if (!projectId) warning = 'Select a project';
-  if (!isLoggedIn) warning = 'Login required';
-  if (gitInfoError) warning = 'Git synchronization problem';
+  if (isOffline) warning = 'Not available offline';
   if (hasConfigProblem) warning = 'Configuration problem';
-  if (isOffline) warning = 'Not available while offline';
+  if (gitInfoError) warning = 'Git synchronization problem';
+  if (!isLoggedIn) warning = 'Login required';
+  if (!projectId) warning = 'Set up visual tests';
 
   const isRunnable = !warning && testProviderState !== 'test-provider-state:crashed';
 
   const startBuildIfPossible = useCallback(() => {
     if (isRunnable) {
       startBuild();
     }
   }, [isRunnable, startBuild]);
 
   useEffect(
     () => experimental_getTestProviderStore(TEST_PROVIDER_ID).onRunAll(startBuildIfPossible),
     [startBuildIfPossible]
   );

src/components/Box.tsx

@@ -17,9 +17,3 @@ export const Box = styled.div<{ warning?: boolean }>(
   ({ theme, warning }) =>
     warning && { background: theme.base === 'dark' ? '#342e1a' : theme.background.warning }
 );
-
-export const BoxList = styled.ul({
-  margin: 0,
-  padding: 4,
-  listStylePosition: 'inside',
-});

src/components/Screen.tsx

@@ -99,6 +99,7 @@
   footer?: ReactNode;
   ignoreConfig?: boolean;
   ignoreSuggestions?: boolean;
+  interstitial?: boolean;
 }
 
 const Container = styled.div({
@@ -107,14 +108,16 @@
   height: '100%',
 });
 
-const Content = styled.div<{ hidden?: boolean }>(({ hidden, theme }) => ({
-  background: theme.background.app,
-  display: hidden ? 'none' : 'flex',
-  flexDirection: 'column',
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'auto',
-}));
+const Content = styled.div<{ hidden?: boolean; interstitial?: boolean }>(
+  ({ hidden, interstitial, theme }) => ({
+    background: interstitial ? theme.background.content : theme.background.app,
+    display: hidden ? 'none' : 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    height: '100%',
+    overflowY: 'auto',
+  })
+);
 
 export const Footer = styled.div(({ theme }) => ({
   background: theme.background.bar,
@@ -140,6 +143,7 @@
   ),
   ignoreConfig = false,
   ignoreSuggestions = !footer,
+  interstitial = false,
 }: ScreenProps) => {
   const { configVisible } = useControlsState();
   const { toggleConfig } = useControlsDispatch();
@@ -164,7 +168,9 @@
         ignoreConfig={ignoreConfig}
         ignoreSuggestions={ignoreSuggestions}
       />
-      <Content hidden={configVisible}>{children}</Content>
+      <Content hidden={configVisible} interstitial={interstitial}>
+        {children}
+      </Content>
       <Content hidden={!configVisible}>
         <Configuration onClose={() => toggleConfig(false)} />
       </Content>

src/components/icons/CheckIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const CheckIcon = (props: any) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M13.85 3.35a.5.5 0 0 0-.7-.7L5 10.79.85 6.65a.5.5 0 1 0-.7.7l4.5 4.5c.2.2.5.2.7 0l8.5-8.5Z"
+    ></path>
+  </svg>
+);

src/components/icons/ChevronRightIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const ChevronRightIcon = (props: any) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
+    ></path>
+  </svg>
+);

src/components/icons/ChromaticIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const ChromaticIcon = (props: any) => (
+  <svg
+    width="250"
+    height="250"
+    viewBox="0 0 250 250"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle fill="#FC521F" cx="125" cy="125" r="125"></circle>
+    <g transform="translate(41.666667, 35.714286)" fill="#FFFFFF">
+      <path d="M112.708657,146.772329 L92.8458667,135.31254 L152.602092,100.844023 C154.891568,99.5203449 157.049482,98.0062747 159.0592,96.3139009 C166.825876,107.373262 167.589539,121.939765 160.66516,133.92842 C154.409175,144.750546 142.73799,151.473199 130.221483,151.473199 C124.09706,151.473199 118.045223,149.847312 112.708657,146.772329 L112.708657,146.772329 Z M107.923895,155.053476 C110.216395,156.378666 112.605676,157.490797 115.07964,158.385337 C109.377122,170.633893 97.1373485,178.571429 83.2734687,178.571429 C63.9218033,178.571429 48.1691815,162.835374 48.1691815,143.496981 L48.1691815,74.5554134 L78.4888574,92.0503277 L78.4888574,135.313145 C78.4888574,137.020629 79.4022283,138.599674 80.8796509,139.453416 L107.923895,155.053476 Z M36.4190595,151.46776 C23.8995283,151.46776 12.2480021,144.751151 5.98899256,133.933558 C1.30721131,125.820741 0.0551068452,116.370646 2.48672976,107.316446 C4.91684048,98.2622464 10.7176524,90.6979399 18.8427205,86.0152018 L38.6994619,74.5584354 L38.7024863,143.484893 C38.7024863,146.129227 38.929317,148.752406 39.390539,151.346876 C38.401558,151.429983 37.4080405,151.46776 36.4190595,151.46776 L36.4190595,151.46776 Z M113.68917,66.2735101 L83.3815914,83.7593583 L45.8819741,62.1302164 C45.1440188,61.7056119 44.3183557,61.4895318 43.486644,61.4895318 C42.6655176,61.4895318 41.8398545,61.7056119 41.0973628,62.1302164 L14.0576557,77.7302765 C11.7666676,79.0463994 9.60270476,80.5574473 7.59298661,82.2573765 C-0.170665179,71.1995268 -0.928278869,56.6345345 5.98853899,44.6413461 C12.2475482,33.820731 23.9066357,27.0920339 36.4307033,27.0920339 C42.5475658,27.0920339 48.6024277,28.7239658 53.9435298,31.8004598 L113.68917,66.2735101 L113.68917,66.2735101 Z M83.2737711,0 C102.63451,0 118.376546,15.7360545 118.376546,35.0820027 L118.376546,57.9985577 L58.6384673,23.5360845 C56.3459673,22.2078732 53.9551738,21.0927199 51.4736482,20.1951574 C57.1761667,7.94206845 69.4189646,0 83.2737711,0 Z M160.664858,44.652528 C170.33691,61.4040065 164.575415,82.8986652 147.809618,92.5663506 L88.0639777,127.036379 L88.0639777,92.0586387 L125.559058,70.4264747 C127.041018,69.5727324 127.954388,67.9936872 127.954388,66.284692 L127.954388,35.0845714 C127.957412,32.4493039 127.718485,29.8231021 127.266336,27.2376991 C128.247756,27.1515693 129.236737,27.1107708 130.228742,27.1107708 C142.749785,27.1107708 154.411897,33.8334238 160.664858,44.652528 L160.664858,44.652528 Z"></path>
+    </g>
+  </svg>
+);

src/preset.ts

@@ -1,6 +1,6 @@
 import { watch } from 'node:fs';
 import { readFile } from 'node:fs/promises';
-import { normalize, relative } from 'node:path';
+import { dirname, join, normalize, relative } from 'node:path';
 
 import { type Configuration, getConfiguration, getGitInfo, type GitInfo } from 'chromatic/node';
 import type { Channel } from 'storybook/internal/channels';
@@ -270,6 +270,13 @@
 const config = {
   managerEntries,
   experimental_serverChannel: serverChannel,
+  staticDirs: async (inputDirs: string[]) => [
+    ...inputDirs,
+    {
+      from: join(dirname(require.resolve('@chromatic-com/storybook/package.json')), 'assets'),
+      to: 'addon-visual-tests-assets',
+    },
+  ],
   env: async (
     env: Record<string, string>,
     { configType }: { configType: 'DEVELOPMENT' | 'PRODUCTION' }