Merge branch 'main' into 239-sidebarbottom-create-story-for-visual-te…

…st-coverage

.github/workflows/chromatic.yml

@@ -10,7 +10,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts
+        run: yarn install --immutable
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
         run: git fetch --unshallow --tags
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts
+        run: yarn install --immutable
 
       - name: Create Release
         run: yarn run release

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts
+        run: yarn install --immutable
 
       - name: Lint
         run: yarn lint

.gitignore

@@ -8,3 +8,11 @@ build-storybook.log
 chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics.json
+
+**/.pnp.*
+**/.yarn/*
+!**/.yarn/patches
+!**/.yarn/plugins
+!**/.yarn/releases
+!**/.yarn/sdks
+!**/.yarn/versions

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
 }

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-berry.cjs

package.json

@@ -44,8 +44,8 @@
     "prerelease": "zx scripts/prepublish-checks.mjs",
     "release": "yarn run build && auto shipit",
     "start": "run-p build:watch 'storybook --quiet'",
-    "storybook": "CHROMATIC_ADDON_NAME='../src/dev.ts' storybook dev -p 6006",
-    "storybook-from-dist": "CHROMATIC_USE_DIST_VERSION=true CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006",
+    "storybook": "CHROMATIC_ADDON_NAME='../src/dev.ts' storybook dev -p 6004",
+    "storybook-from-dist": "CHROMATIC_USE_DIST_VERSION=true CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6004",
     "test": "vitest",
     "typecheck": "tsc --noemit"
   },
@@ -137,6 +137,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "packageManager": "yarn@4.1.1",
   "bundler": {
     "exportEntries": [
       "./src/index.ts"

src/components/ActionButton.tsx

@@ -4,8 +4,8 @@ import { ComponentProps } from "react";
 
 import { IconButton } from "./IconButton";
 
-const themeColors = ({ theme, secondary, status }: { theme: Theme } & ActionButtonProps) => {
-  if (secondary) {
+const themeColors = ({ theme, status, variant }: { theme: Theme } & ActionButtonProps) => {
+  if (variant === "outline") {
     return {
       color: theme.base === "light" ? theme.color.dark : theme.color.medium,
       backgroundColor: theme.background.app,
@@ -54,29 +54,29 @@ const themeColors = ({ theme, secondary, status }: { theme: Theme } & ActionButt
 };
 
 interface ActionButtonProps extends ComponentProps<typeof IconButton> {
-  containsIcon?: boolean;
+  square?: boolean;
   side?: "left" | "right";
 }
 
 export const ActionButton: React.FC<ActionButtonProps> = styled(IconButton)<ActionButtonProps>(
-  ({ containsIcon }) => ({
+  ({ square }) => ({
     border: `1px solid transparent`,
     boxShadow: "none",
     fontSize: 12,
     fontWeight: 700,
     height: 28,
-    padding: containsIcon ? "8px 6px" : 8,
+    padding: square ? "8px 6px" : 8,
     transition: "background-color 150ms ease-out",
     "@container (min-width: 300px)": {
       height: 32,
-      width: containsIcon ? 32 : "auto",
-      padding: containsIcon ? "9px 8px" : 9,
+      width: square ? 32 : "auto",
+      padding: square ? "9px 8px" : 9,
     },
     "@container (min-width: 800px)": {
       height: 28,
       fontSize: 12,
-      width: containsIcon ? 28 : "auto",
-      padding: containsIcon ? "8px 6px" : 8,
+      width: square ? 28 : "auto",
+      padding: square ? "8px 6px" : 8,
     },
   }),
   themeColors,

src/components/IconButton.tsx

@@ -13,18 +13,17 @@ const getStatusStyles = (theme: Theme, status?: IconButtonProps["status"]) =>
 interface IconButtonProps extends ComponentProps<typeof BaseIconButton> {
   active?: boolean;
   as?: string;
-  secondary?: boolean;
   status?: "positive" | "warning";
 }
 
 export const IconButton: React.FC<IconButtonProps> = styled(BaseIconButton)<IconButtonProps>(
-  ({ active, secondary, theme }) => ({
+  ({ active, variant, theme }) => ({
     display: "inline-flex",
     alignItems: "center",
     verticalAlign: "top",
     gap: 6,
     margin: 0,
-    color: active || secondary ? theme.color.secondary : theme.color.mediumdark,
+    color: active || variant === "outline" ? theme.color.secondary : theme.color.mediumdark,
     fontWeight: "normal",
     "& > svg": {
       width: "auto",

src/components/SidebarTop.tsx

@@ -1,3 +1,4 @@
+import { FailedIcon, PassedIcon } from "@storybook/icons";
 import { type API, useStorybookState } from "@storybook/manager-api";
 import { color } from "@storybook/theming";
 import pluralize from "pluralize";
@@ -84,10 +85,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           headline: "Build started",
           subHeadline: "Check the visual test addon to see the progress of your build.",
         },
-        icon: {
-          name: "passed",
-          color: color.positive,
-        },
+        icon: <PassedIcon color={color.positive} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
@@ -104,10 +102,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           headline: "Build canceled",
           subHeadline: "Aborted by user.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
@@ -132,10 +127,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
               )}`
             : "No visual changes detected",
         },
-        icon: {
-          name: "passed",
-          color: color.positive,
-        },
+        icon: <PassedIcon color={color.positive} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
@@ -152,10 +144,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           headline: "Build error",
           subHeadline: "Check the Storybook process on the command line for more details.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
@@ -169,10 +158,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline:
             "Your account has insufficient snapshots remaining to run this build. Visit your billing page to find out more.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
@@ -187,7 +173,10 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
     changedStoryCount.length,
   ]);
 
-  const { isRunning, startBuild, stopBuild } = useBuildEvents({ localBuildProgress, accessToken });
+  const { isDisallowed, isRunning, startBuild, stopBuild } = useBuildEvents({
+    localBuildProgress,
+    accessToken,
+  });
 
   let warning: string | undefined;
   if (apiInfo?.connected === false) warning = "Visual tests locked while waiting for network.";
@@ -208,6 +197,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
   return (
     <SidebarTopButton
       isDisabled={!!warning}
+      isDisallowed={isDisallowed}
       isOutdated={isOutdated}
       isRunning={isRunning}
       localBuildProgress={localBuildProgress}

src/components/SidebarTopButton.stories.tsx

@@ -74,7 +74,7 @@ const WithProgress = (props: ComponentProps<typeof SidebarTopButton>) => {
   );
 };
 
-export const IsRunning: Story = {
+export const Running: Story = {
   render: WithProgress,
   play: playAll(async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -85,3 +85,10 @@ export const IsRunning: Story = {
     await screen.findAllByText("🏗 Building your Storybook...");
   }),
 };
+
+export const Unstoppable: Story = {
+  ...Running,
+  args: {
+    isDisallowed: true,
+  },
+};

src/components/SidebarTopButton.tsx

@@ -1,10 +1,11 @@
 import { WithTooltip } from "@storybook/components";
-import { PlayIcon, StopAltIcon, SyncIcon } from "@storybook/icons";
+import { PlayIcon, StopAltIcon } from "@storybook/icons";
 import { keyframes, styled } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 
 import { LocalBuildProgress } from "../types";
 import { BuildProgressLabel } from "./BuildProgressLabel";
+import { jiggle } from "./design-system/shared/animation";
 import { IconButton } from "./IconButton";
 import { StatusDotWrapper } from "./StatusDot";
 import { TooltipNote } from "./TooltipNote";
@@ -67,19 +68,28 @@ export const ProgressCircle = styled.svg<{ progress?: boolean; spinner?: boolean
     }
 );
 
-export const SidebarIconButton = styled(IconButton)<ComponentProps<typeof IconButton>>(
-  ({ theme }) => ({
-    position: "relative",
-    overflow: "visible",
-    color: theme.textMutedColor,
-    marginTop: 0,
-    zIndex: 1,
-    marginRight: 4,
-  })
-);
+const WarningText = styled.div(({ theme }) => ({
+  color: theme.color.warningText,
+  "&&": { marginTop: 10 },
+}));
+
+export const SidebarIconButton = styled(IconButton)<
+  ComponentProps<typeof IconButton> & { isDisallowed?: boolean }
+>(({ isDisallowed, theme }) => ({
+  position: "relative",
+  overflow: "visible",
+  color: theme.textMutedColor,
+  marginTop: 0,
+  zIndex: 1,
+  marginRight: 4,
+  ...(isDisallowed && {
+    animation: `${jiggle} 700ms ease-out`,
+  }),
+}));
 
 export const SidebarTopButton = ({
   isDisabled = false,
+  isDisallowed = false,
   isOutdated = false,
   isRunning = false,
   localBuildProgress,
@@ -89,6 +99,7 @@ export const SidebarTopButton = ({
   stopBuild,
 }: {
   isDisabled?: boolean;
+  isDisallowed?: boolean;
   isOutdated?: boolean;
   isRunning?: boolean;
   localBuildProgress?: LocalBuildProgress;
@@ -126,17 +137,26 @@ export const SidebarTopButton = ({
         tooltip={
           <TooltipContent>
             <div>
-              <BuildProgressLabel localBuildProgress={localBuildProgress} withEmoji />
+              <BuildProgressLabel localBuildProgress={localBuildProgress} small withEmoji />
             </div>
             <ProgressTrack>
               {typeof buildProgressPercentage === "number" && (
                 <ProgressBar style={{ width: `${buildProgressPercentage}%` }} />
               )}
             </ProgressTrack>
+            {isDisallowed && (
+              <WarningText>
+                This job has already reached the capture cloud and cannot be stopped locally.
+              </WarningText>
+            )}
           </TooltipContent>
         }
       >
-        <SidebarIconButton aria-label="Stop tests" onClick={() => stopBuild()}>
+        <SidebarIconButton
+          aria-label="Stop tests"
+          isDisallowed={isDisallowed}
+          onClick={() => stopBuild()}
+        >
           <StopAltIcon style={{ width: 10, margin: 2 }} />
           <ProgressCircle xmlns="http://www.w3.org/2000/svg">
             <circle />