Merge pull request #35 from storybookjs/improve-guided-tour

Improve guided tour

package.json

@@ -65,7 +65,7 @@
       "vite.config.ts"
     ],
     "ext": "js,jsx,ts,tsx",
-    "exec": "yarn storybook"
+    "exec": "yarn storybook --ci"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.0",

src/components/Button/Button.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: { children: "Button" },
+};

src/components/Button/Button.tsx

@@ -1,22 +1,42 @@
-import React from "react";
+import { styled } from "@storybook/theming";
+import React, { FC } from "react";
 
-export const buttonStyles: React.ComponentProps<"button">["style"] = {
-  border: 0,
-  cursor: "pointer",
-  fontSize: 13,
-  lineHeight: 1,
-  padding: "9px 12px",
-  backgroundColor: "#029CFD",
-  borderRadius: 4,
-  color: "#fff",
-  fontWeight: 700,
-};
+export interface ButtonProps {
+  children: string;
+  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
 
-export function Button(props: React.ComponentProps<"button">) {
-  const style = {
-    ...buttonStyles,
-    ...(props.style || {}),
-  };
+const Container = styled.button`
+  all: unset;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75rem;
+  background: ${({ theme }) => theme.color.secondary};
+  color: ${({ theme }) => theme.color.lightest};
+  height: 32px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: ${({ theme }) => theme.typography.fonts.base};
+  transition: all 0.16s ease-in-out;
+  text-decoration: none;
 
-  return <button type="button" {...props} style={style} />;
-}
+  &:hover {
+    background-color: #0b94eb;
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+export const Button: FC<ButtonProps> = ({ children, onClick, ...rest }) => {
+  return (
+    <Container onClick={onClick} {...rest}>
+      {children}
+    </Container>
+  );
+};

src/components/PulsatingEffect/PulsatingEffect.tsx

@@ -7,6 +7,7 @@ export function PulsatingEffect({
 }): JSX.Element {
   useEffect(() => {
     const element = document.querySelector<HTMLElement>(targetSelector);
+
     if (element) {
       element.style.animation = "pulsate 3s infinite";
       element.style.transformOrigin = "center";
@@ -35,7 +36,14 @@ export function PulsatingEffect({
       const styleElement = document.querySelector(
         "#sb-onboarding-pulsating-effect"
       );
-      styleElement?.remove();
+
+      if (styleElement) {
+        styleElement.remove();
+      }
+
+      if (element) {
+        element.style.animation = "auto";
+      }
     };
   }, [targetSelector]);
 

src/features/GuidedTour/GuidedTour.tsx

@@ -3,12 +3,11 @@ import Joyride, { CallBackProps, STATUS, Step } from "react-joyride";
 
 import { PulsatingEffect } from "../../components/PulsatingEffect/PulsatingEffect";
 import { Confetti } from "../../components/Confetti/Confetti";
-import { TitleBody } from "../../components/TitleBody/TitleBody";
 import { API } from "@storybook/manager-api";
 import { STORY_ARGS_UPDATED } from "@storybook/core-events";
-import { buttonStyles } from "src/components/Button/Button";
+import { Tooltip } from "./Tooltip";
 
-let INTERACTIONS_COUNT = 0;
+type GuidedTourStep = Step & { hideNextButton?: boolean };
 
 export function GuidedTour({
   api,
@@ -22,114 +21,85 @@ export function GuidedTour({
   const [stepIndex, setStepIndex] = useState<number>();
 
   useEffect(() => {
-    api.on(STORY_ARGS_UPDATED, () => {
-      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;
-      if (INTERACTIONS_COUNT === 2) {
-        setStepIndex(3);
-      }
+    api.once(STORY_ARGS_UPDATED, () => {
+      setStepIndex(3);
     });
   }, []);
 
-  const steps: Step[] = isFinalStep
+  const steps: GuidedTourStep[] = isFinalStep
     ? [
-      {
-        target: "#configure-your-project--docs",
-        content: (
-          <TitleBody
-            title="Continue setting up your project"
-            body="You nailed the basics. Now get started writing stories for your own components."
-          />
-        ),
-        placement: "right",
-        disableOverlay: true,
-        disableBeacon: true,
-        styles: {
-          buttonNext: {
-            display: "none",
+        {
+          target: "#configure-your-project--docs",
+          title: "Continue setting up your project",
+          content:
+            "You nailed the basics. Now get started writing stories for your own components.",
+          placement: "right",
+          disableOverlay: true,
+          disableBeacon: true,
+          floaterProps: {
+            disableAnimation: true,
           },
+          hideNextButton: true
         },
-        floaterProps: {
-          disableAnimation: true,
-        },
-      },
-    ]
+      ]
     : [
-      {
-        target: "#storybook-explorer-tree > div",
-        content: (
-          <TitleBody
-            title="Storybook is built from stories"
-            body="Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories."
-          />
-        ),
-        placement: "right",
-        disableBeacon: true,
-        styles: {
-          spotlight: {
-            transform: 'translateY(30px)',
+        {
+          target: "#storybook-explorer-tree > div",
+          title: "Storybook is built from stories",
+          content:
+            "Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.",
+          placement: "right",
+          disableBeacon: true,
+          styles: {
+            spotlight: {
+              transform: "translateY(30px)",
+            },
+          },
+          floaterProps: {
+            disableAnimation: true,
           },
         },
-        floaterProps: {
-          disableAnimation: true,
-        },
-      },
-      {
-        target: "#storybook-preview-iframe",
-        content: (
-          <TitleBody
-            title="Storybook previews are interactive"
-            body="Whenever you modify code or stories, Storybook automatically updates how it previews your components."
-          />
-        ),
-        placement: "bottom",
-      },
-      {
-        target: "#root div[role=main]",
-        content: (
-          <>
-            <TitleBody
-              title="Interactive story playground"
-              body={
-                <>
-                  See how a story renders with different data and state
-                  without touching code.
-                  <br />
-                  Try it out by pressing this button.
-                </>
-              }
-            />
-            <PulsatingEffect targetSelector="#control-primary" />
-          </>
-        ),
-        placement: "right",
-        spotlightClicks: true,
-        floaterProps: {
-          target: "#control-primary",
+        {
+          target: "#storybook-preview-iframe",
+          title: "Storybook previews are interactive",
+          content:
+            "Whenever you modify code or stories, Storybook automatically updates how it previews your components.",
+          placement: "bottom",
         },
-        styles: {
-          buttonNext: {
-            display: "none",
+        {
+          target: "#root div[role=main]",
+          title: "Interactive story playground",
+          content: (
+            <>
+              See how a story renders with different data and state without
+              touching code.
+              <br />
+              <br />
+              Try it out by pressing this button.
+              <PulsatingEffect targetSelector="#control-primary" />
+            </>
+          ),
+          placement: "right",
+          spotlightClicks: true,
+          floaterProps: {
+            target: "#control-primary",
           },
+          hideNextButton: true
         },
-      },
-      {
-        target: "#control-primary",
-        content: (
-          <>
-            <Confetti numberOfPieces={100} />
-            <TitleBody
-              title="Congratulations!"
-              body="You've learned how to control your stories interactively. Now: let's explore how to write your first story."
-            />
-          </>
-        ),
-        placement: "right",
-        disableOverlay: true,
-        locale: {
-          last: "Next",
+        {
+          target: "#control-primary",
+          title: "Congratulations!",
+          content: (
+            <>
+              You've learned how to control your stories interactively. Now:
+              let's explore how to write your first story.
+              <Confetti numberOfPieces={100} />
+            </>
+          ),
+          placement: "right",
+          disableOverlay: true,
         },
-      },
-    ];
+      ];
 
   return (
     <Joyride
@@ -158,26 +128,14 @@ export function GuidedTour({
           },
         },
       }}
+      tooltipComponent={Tooltip}
       styles={{
         spotlight: {
           border: "solid 2px #004c7c",
         },
-        tooltip: {
-          maxWidth: 260,
-          borderRadius: 4,
-          padding: 15,
-        },
         overlay: {
           backgroundColor: "rgba(0, 0, 0, 0.48)",
         },
-        buttonNext: {
-          ...buttonStyles,
-          marginTop: 5,
-        },
-        tooltipContent: {
-          paddingTop: 4,
-          padding: 0,
-        },
         options: {
           zIndex: 10000,
           primaryColor: "#029CFD",