UI to uninstall addon

.eslintrc.cjs

@@ -8,6 +8,16 @@ module.exports = {
     "simple-import-sort/exports": "error",
     "import/order": "off",
     "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "ts-ignore": "allow-with-description",
+        "ts-nocheck": "allow-with-description",
+        "ts-check": "allow-with-description",
+        minimumDescriptionLength: 3,
+      },
+    ],
   },
   parser: "@typescript-eslint/parser",
   parserOptions: {

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.tslint": "explicit"
   },
   "editor.formatOnSave": true,
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],

package.json

@@ -70,26 +70,27 @@
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@storybook/addon-actions": "7.6.4",
-    "@storybook/addon-designs": "^7.0.7",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-mdx-gfm": "7.6.4",
-    "@storybook/blocks": "7.6.4",
-    "@storybook/channels": "7.6.4",
-    "@storybook/client-logger": "7.6.4",
-    "@storybook/components": "7.6.4",
-    "@storybook/core-events": "7.6.4",
+    "@storybook/addon-actions": "^8.0.0-alpha.14",
+    "@storybook/addon-designs": "^8.0.0-next.0",
+    "@storybook/addon-essentials": "^8.0.0-alpha.14",
+    "@storybook/addon-interactions": "^8.0.0-alpha.14",
+    "@storybook/addon-mdx-gfm": "^8.0.0-alpha.14",
+    "@storybook/blocks": "^8.0.0-alpha.14",
+    "@storybook/channels": "^8.0.0-alpha.14",
+    "@storybook/client-logger": "^8.0.0-alpha.14",
+    "@storybook/components": "^8.0.0-alpha.14",
+    "@storybook/core-events": "^8.0.0-alpha.14",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager": "7.6.4",
-    "@storybook/manager-api": "7.6.4",
-    "@storybook/preview": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-vite": "7.6.4",
+    "@storybook/manager": "^8.0.0-alpha.14",
+    "@storybook/manager-api": "^8.0.0-alpha.14",
+    "@storybook/preview": "^8.0.0-alpha.14",
+    "@storybook/react": "^8.0.0-alpha.14",
+    "@storybook/react-vite": "^8.0.0-alpha.14",
+    "@storybook/test": "^8.0.0-alpha.14",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "7.6.4",
-    "@storybook/types": "7.6.4",
+    "@storybook/theming": "^8.0.0-alpha.14",
+    "@storybook/types": "^8.0.0-alpha.14",
     "@types/jest": "^29.5.3",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^18.15.0",
@@ -118,7 +119,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "storybook": "7.6.4",
+    "storybook": "^8.0.0-alpha.14",
     "ts-jest": "^29.1.1",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",

src/Panel.tsx

@@ -11,6 +11,7 @@ import {
   IS_OUTDATED,
   LOCAL_BUILD_PROGRESS,
   PANEL_ID,
+  REMOVE_ADDON,
   START_BUILD,
 } from "./constants";
 import { Project } from "./gql/graphql";
@@ -82,6 +83,7 @@ export const Panel = ({ active, api }: PanelProps) => {
             setAccessToken={setAccessToken}
             setCreatedProjectId={setCreatedProjectId}
             hasProjectId={!!projectId}
+            onUninstall={() => emit(REMOVE_ADDON)}
           />
         </Sections>
       </Provider>

src/components/SidebarTopButton.tsx

@@ -142,7 +142,7 @@ export const SidebarTopButton = ({
       tooltip={
         <TooltipContent>
           <div>No code changes detected. Rerun tests to take new snapshots.</div>
-          <IconButton onClick={() => startBuild()} aria-label="Rerun tests">
+          <IconButton secondary onClick={() => startBuild()} aria-label="Rerun tests">
             <Icons icon="sync" />
             Rerun tests
           </IconButton>

src/components/SnapshotImage.stories.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck TODO: Address SB 8 type errors
 import type { Meta, StoryObj } from "@storybook/react";
 import { delay, http } from "msw";
 

src/components/Stack.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from "@storybook/theming";
 import { styled } from "@storybook/theming";
 
+// @ts-expect-error TODO fix overload
 export const Stack = styled.div<Pick<CSSObject, "alignItems" | "textAlign">>((props) => ({
   display: "flex",
   flexDirection: "column",

src/constants.ts

@@ -4,6 +4,8 @@ export const {
   CHROMATIC_API_URL = `${CHROMATIC_BASE_URL}/api`,
 } = process.env;
 
+export const PACKAGE_NAME = "@chromatic-com/storybook";
+
 export const ADDON_ID = "chromaui/addon-visual-tests";
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const SIDEBAR_TOP_ID = `${ADDON_ID}/sidebarTop`;
@@ -20,3 +22,5 @@ export const IS_OUTDATED = `${ADDON_ID}/isOutdated`;
 export const START_BUILD = `${ADDON_ID}/startBuild`;
 export const STOP_BUILD = `${ADDON_ID}/stopBuild`;
 export const LOCAL_BUILD_PROGRESS = `${ADDON_ID}/localBuildProgress`;
+
+export const REMOVE_ADDON = `${ADDON_ID}/removeAddon`;

src/index.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import type { Channel } from "@storybook/channels";
+import type { Options } from "@storybook/types";
 // eslint-disable-next-line import/no-unresolved
 import { getConfiguration, getGitInfo, GitInfo } from "chromatic/node";
 
@@ -8,7 +9,9 @@ import {
   GIT_INFO,
   GIT_INFO_ERROR,
   LOCAL_BUILD_PROGRESS,
+  PACKAGE_NAME,
   PROJECT_INFO,
+  REMOVE_ADDON,
   START_BUILD,
   STOP_BUILD,
 } from "./constants";
@@ -63,8 +66,9 @@ async function serverChannel(
   // 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 }
+  { configDir, configFile, presets }: Options & { configFile: string }
 ) {
+  const api = await presets.apply<any>("experimental_serverAPI");
   const configuration = await getConfiguration(configFile);
   const { projectId: initialProjectId } = configuration;
 
@@ -114,6 +118,9 @@ async function serverChannel(
   });
 
   channel.on(STOP_BUILD, stopChromaticBuild);
+  channel.on(REMOVE_ADDON, async () => {
+    await api.removeAddon(PACKAGE_NAME);
+  });
 
   const gitInfoState = SharedState.subscribe<GitInfoPayload>(GIT_INFO, channel);
 

src/screens/Authentication/Authentication.stories.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck TODO: Address SB 8 type errors
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { findByRole, userEvent } from "@storybook/testing-library";

src/screens/Authentication/Authentication.tsx

@@ -12,6 +12,7 @@ interface AuthenticationProps {
   setAccessToken: (token: string | null) => void;
   setCreatedProjectId: (projectId: Project["id"]) => void;
   hasProjectId: boolean;
+  onUninstall: () => void;
 }
 
 type AuthenticationScreen = "welcome" | "signin" | "subdomain" | "verify";
@@ -20,6 +21,7 @@ export const Authentication = ({
   setAccessToken,
   setCreatedProjectId,
   hasProjectId,
+  onUninstall,
 }: AuthenticationProps) => {
   const [screen, setScreen] = useState<AuthenticationScreen>(hasProjectId ? "signin" : "welcome");
   const [exchangeParameters, setExchangeParameters] = useState<TokenExchangeParameters>();
@@ -38,7 +40,7 @@ export const Authentication = ({
   );
 
   if (screen === "welcome" && !hasProjectId) {
-    return <Welcome onNext={() => setScreen("signin")} />;
+    return <Welcome onNext={() => setScreen("signin")} onUninstall={onUninstall} />;
   }
 
   if (screen === "signin" || (screen === "welcome" && hasProjectId)) {

src/screens/Authentication/SetSubdomain.tsx

@@ -78,7 +78,7 @@ export const SetSubdomain = ({ onBack, onSignIn }: SetSubdomainProps) => {
           error={inputError}
           errorTooltipPlacement="top"
         />
-        <SubmitButton type="submit" secondary>
+        <SubmitButton type="submit" variant="solid" size="medium">
           Continue
         </SubmitButton>
       </Form>

src/screens/Authentication/SignIn.tsx

@@ -34,7 +34,7 @@ export const SignIn = ({ onBack, onSignIn, onSignInWithSSO }: SignInProps) => (
           parallel.
         </Text>
       </div>
-      <Button secondary onClick={() => onSignIn()}>
+      <Button variant="solid" size="medium" onClick={() => onSignIn()}>
         Sign in with Chromatic
       </Button>
       <Button link onClick={() => onSignInWithSSO()}>

src/screens/Authentication/Verify.tsx

@@ -153,7 +153,7 @@ export const Verify = ({
             ))}
           </Digits>
         </div>
-        <Button secondary onClick={() => openDialog(verificationUrl)}>
+        <Button variant="solid" size="medium" onClick={() => openDialog(verificationUrl)}>
           Go to Chromatic
         </Button>
       </Stack>

src/screens/Authentication/Welcome.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@storybook/design-system";
 import React from "react";
 
 import { Button } from "../../components/Button";
@@ -9,22 +10,44 @@ import { Text } from "../../components/Text";
 
 interface WelcomeProps {
   onNext: () => void;
+  onUninstall: () => void;
 }
 
-export const Welcome = ({ onNext }: WelcomeProps) => (
-  <Container>
-    <Stack>
-      <div>
-        <VisualTestsIcon />
-        <Heading>Visual tests</Heading>
-        <Text>
-          Catch bugs in UI appearance automatically. Compare image snapshots to detect visual
-          changes.
-        </Text>
-      </div>
-      <Button secondary onClick={onNext}>
-        Enable
-      </Button>
-    </Stack>
-  </Container>
-);
+export const Welcome = ({ onNext, onUninstall }: WelcomeProps) => {
+  const [showRestart, setShowRestart] = React.useState(false);
+
+  return (
+    <Container>
+      <Stack>
+        <div>
+          <VisualTestsIcon />
+          <Heading>Visual tests</Heading>
+          <Text>
+            Catch bugs in UI appearance automatically. Compare image snapshots to detect visual
+            changes.
+          </Text>
+        </div>
+        {showRestart ? (
+          <Text>Visual tests has been uninstalled. Please restart your Storybook.</Text>
+        ) : (
+          <>
+            <Button variant="solid" onClick={onNext}>
+              Enable
+            </Button>
+
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <Link
+              secondary
+              onClick={() => {
+                onUninstall();
+                setShowRestart(true);
+              }}
+            >
+              Uninstall
+            </Link>
+          </>
+        )}
+      </Stack>
+    </Container>
+  );
+};

src/screens/GitNotFound/GitNotFound.stories.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck TODO: Address SB 8 type errors
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { GraphQLClientProvider } from "../../utils/graphQLClient";

src/screens/GuidedTour/Confetti.tsx

@@ -77,7 +77,6 @@ function getRandomInt(min: number, max: number) {
 
 function draw(context: CanvasRenderingContext2D) {
   // All of these are needed to avoid type checking on this because our eslint and ts rules are more strict than @storybook/addon-onboarding
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore - react-confetti uses this to pass context, but it isn't defined here so it need to be an implicit any. Ignoring to avoid conflicts - otherwise the code is the same as in addon-onboarding
   // eslint-disable-next-line @typescript-eslint/no-this-alias
   const self: any = this;

src/screens/GuidedTour/Tooltip.tsx

@@ -1,5 +1,5 @@
 import { css, styled } from "@storybook/theming";
-import React from "react";
+import React, { MouseEventHandler, SyntheticEvent } from "react";
 import { TooltipRenderProps } from "react-joyride";
 
 import { Button } from "../../components/Button";
@@ -82,6 +82,8 @@ export const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => {
             <NextButton
               {...{
                 ...primaryProps,
+                // @tmeasday - I'm not sure if we ever use this, but this makes the types work
+                onClick: primaryProps.onClick as (event: SyntheticEvent) => void,
                 secondary: true,
                 ...(step.onNextButtonClick ? { onClick: step.onNextButtonClick } : {}),
               }}

src/screens/LinkProject/LinkProject.stories.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck TODO: Address SB 8 type errors
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { findByTestId } from "@storybook/testing-library";

src/screens/LinkProject/LinkedProject.tsx

@@ -67,7 +67,7 @@ export const LinkedProject = ({
                   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()}>
+                <Button variant="solid" size="medium" onClick={() => goToNext()}>
                   Catch a UI change
                 </Button>
                 <Text>

src/screens/LinkProject/LinkingProjectFailed.stories.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck TODO: Address SB 8 type errors
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { panelModes } from "../../modes";