Revert "UI to uninstall addon"

.eslintrc.cjs

@@ -7,16 +7,6 @@ module.exports = {
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
     "import/order": "off",
-    '@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: {

.storybook/main.ts

@@ -29,7 +29,6 @@ const config: StorybookConfig = {
         configFile: configFileMap[CHROMATIC_BASE_URL || '"https://www.chromatic.com"'],
       },
     },
-    "@storybook/addon-mdx-gfm"
   ],
   docs: {
     autodocs: "tag",

.vscode/settings.json

@@ -1,9 +1,10 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.fixAll.tslint": "explicit"
+    "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true,
-  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "eslint.rules.customizations": [
+    { "rule": "*", "severity": "warn" }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
 }

package.json

@@ -68,21 +68,20 @@
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@storybook/addon-actions": "^8.0.0-alpha.14",
-    "@storybook/test": "^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/channels": "^8.0.0-alpha.14",
-    "@storybook/client-logger": "^8.0.0-alpha.14",
+    "@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/channels": "7.6.4",
+    "@storybook/client-logger": "7.6.4",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.0-alpha.14",
-    "@storybook/react": "^8.0.0-alpha.14",
-    "@storybook/react-vite": "^8.0.0-alpha.14",
+    "@storybook/manager-api": "7.6.4",
+    "@storybook/react": "7.6.4",
+    "@storybook/react-vite": "7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.0-alpha.14",
+    "@storybook/theming": "7.6.4",
     "@types/jest": "^29.5.3",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^18.15.0",
@@ -110,7 +109,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "storybook": "^8.0.0-alpha.14",
+    "storybook": "7.6.4",
     "ts-jest": "^29.1.1",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
@@ -120,15 +119,14 @@
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/client-logger": "^8.0.0",
-    "@storybook/components": "^8.0.0",
-    "@storybook/core-events": "^8.0.0",
-    "@storybook/manager-api": "^8.0.0",
-    "@storybook/preview-api": "^8.0.0",
-    "@storybook/theming": "^8.0.0",
-    "@storybook/types": "^8.0.0",
-    "@storybook/core-common": "^8.0.0",
+    "@storybook/blocks": "^7.2.0",
+    "@storybook/client-logger": "^7.2.0",
+    "@storybook/components": "^7.2.0",
+    "@storybook/core-events": "^7.2.0",
+    "@storybook/manager-api": "^7.2.0",
+    "@storybook/preview-api": "^7.2.0",
+    "@storybook/theming": "^7.2.0",
+    "@storybook/types": "^7.2.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -166,4 +164,4 @@
     ],
     "icon": "https://user-images.githubusercontent.com/341738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   }
-}
+}

src/Panel.tsx

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

src/components/BackButton.tsx

@@ -13,7 +13,7 @@ const OpaqueLink = styled(Link)({
 });
 
 export const BackButton = ({ onClick, children }: any) => (
-  <OpaqueLink variant="solid" isButton onClick={onClick}>
+  <OpaqueLink secondary isButton onClick={onClick}>
     {children}
   </OpaqueLink>
 );

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 secondary onClick={() => startBuild()} aria-label="Rerun tests">
+          <IconButton onClick={() => startBuild()} aria-label="Rerun tests">
             <Icons icon="sync" />
             Rerun tests
           </IconButton>

src/components/SnapshotImage.stories.tsx

@@ -1,4 +1,3 @@
-// @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,7 +1,6 @@
 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

@@ -18,5 +18,3 @@ 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,6 +1,5 @@
 /* eslint-disable no-console */
 import type { Channel } from "@storybook/channels";
-import { removeAddon } from "@storybook/core-common";
 // eslint-disable-next-line import/no-unresolved
 import { getConfiguration, getGitInfo, GitInfo } from "chromatic/node";
 
@@ -10,7 +9,6 @@ import {
   GIT_INFO_ERROR,
   LOCAL_BUILD_PROGRESS,
   PROJECT_INFO,
-  REMOVE_ADDON,
   START_BUILD,
   STOP_BUILD,
 } from "./constants";
@@ -116,9 +114,6 @@ async function serverChannel(
   });
 
   channel.on(STOP_BUILD, stopChromaticBuild);
-  channel.on(REMOVE_ADDON, async () => {
-    await removeAddon("@chromaui/addon-visual-tests");
-  });
 
   const gitInfoState = SharedState.subscribe<GitInfoPayload>(GIT_INFO, channel);
 

src/screens/Authentication/Authentication.stories.tsx

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

src/screens/Authentication/SignIn.tsx

@@ -34,7 +34,7 @@ export const SignIn = ({ onBack, onSignIn, onSignInWithSSO }: SignInProps) => (
           parallel.
         </Text>
       </div>
-      <Button variant="solid" size="medium" onClick={() => onSignIn()}>
+      <Button secondary 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 variant="solid" size="medium" onClick={() => openDialog(verificationUrl)}>
+        <Button secondary onClick={() => openDialog(verificationUrl)}>
           Go to Chromatic
         </Button>
       </Stack>

src/screens/Authentication/Welcome.tsx

@@ -1,4 +1,3 @@
-import { Link } from "@storybook/design-system";
 import React from "react";
 
 import { Button } from "../../components/Button";
@@ -10,44 +9,22 @@ import { Text } from "../../components/Text";
 
 interface WelcomeProps {
   onNext: () => void;
-  onUninstall: () => void;
 }
 
-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>
-  );
-};
+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>
+);

src/screens/GitNotFound/GitNotFound.stories.tsx

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

src/screens/LinkProject/LinkProject.stories.ts

@@ -1,4 +1,3 @@
-// @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 variant="solid" size="medium" onClick={() => goToNext()}>
+                <Button secondary onClick={() => goToNext()}>
                   Catch a UI change
                 </Button>
                 <Text>

src/screens/LinkProject/LinkingProjectFailed.stories.ts

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

src/screens/VisualTests/BuildEyebrow.stories.ts

@@ -1,7 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
 import { fireEvent, within } from "@storybook/testing-library";
 
 import * as buildProgressStories from "../../components/BuildProgressLabel.stories";
@@ -13,7 +12,7 @@ import { BuildEyebrow } from "./BuildEyebrow";
 const meta = {
   args: {
     branch: "feature",
-    dismissBuildError: fn(),
+    dismissBuildError: action("dismissBuildError"),
     switchToLastBuildOnBranch: action("switchToLastBuildOnBranch"),
   },
   component: BuildEyebrow,

src/screens/VisualTests/BuildResults.tsx

@@ -117,8 +117,8 @@ export const BuildResults = ({
                 <br />
                 <Button
                   belowText
-                  size="medium"
-                  variant="solid"
+                  small
+                  secondary
                   onClick={() => startDevBuild()}
                   disabled={isLocalBuildInProgress}
                 >
@@ -147,15 +147,16 @@ export const BuildResults = ({
             </CenterText>
             <Button
               belowText
-              size="medium"
+              small
               tertiary
+              containsIcon
               // @ts-expect-error Button component is not quite typed properly
               target="_new"
+              isLink
+              href="https://www.chromatic.com/docs/ignoring-elements#ignore-stories"
             >
-              <a href="https://www.chromatic.com/docs/ignoring-elements#ignore-stories">
-                <Icons icon="document" />
-                View Docs
-              </a>
+              <Icons icon="document" />
+              View Docs
             </Button>
           </Container>
         </Section>

src/screens/VisualTests/NoBuild.tsx

@@ -49,7 +49,7 @@ export const NoBuild = ({
 }: NoBuildProps) => {
   const getDetails = () => {
     const button = (
-      <Button size="medium" variant="solid" onClick={startDevBuild}>
+      <Button small secondary onClick={startDevBuild}>
         <Icons icon="play" />
         Take snapshots
       </Button>