Add guided tour example

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+  body {
+    font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
+  }
+</style>

package.json

@@ -81,7 +81,7 @@
     "@storybook/testing-library": "^0.0.14-next.1",
     "@storybook/theming": "^7.0.17",
     "@types/node": "^18.15.0",
-    "@types/react": "^18.0.34",
+    "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react": "^3.1.0",
     "auto": "^10.3.0",

src/App.tsx

@@ -1,10 +1,8 @@
+import React, { useCallback, useEffect, useState } from "react";
 import { ThemeProvider, ensure, themes } from "@storybook/theming";
+import { STORY_CHANGED, CURRENT_STORY_WAS_SET } from "@storybook/core-events";
 import { type API } from "@storybook/manager-api";
 
-const theme = ensure(themes.light);
-
-import React, { useCallback, useEffect, useState } from "react";
-import { STORY_CHANGED, CURRENT_STORY_WAS_SET } from "@storybook/core-events";
 import { GuidedTour } from "./features/GuidedTour/GuidedTour";
 import { WelcomeModal } from "./features/WelcomeModal/WelcomeModal";
 import { WriteStoriesModal } from "./features/WriteStoriesModal/WriteStoriesModal";
@@ -17,6 +15,8 @@ type Step =
   | "4:VisitNewStory"
   | "5:ConfigureYourProject";
 
+const theme = ensure(themes.light);
+
 export default function App({ api }: { api: API }) {
   const [enabled, setEnabled] = useState(true);
   const [showConfetti, setShowConfetti] = useState(false);
@@ -33,18 +33,16 @@ export default function App({ api }: { api: API }) {
   }, [setEnabled]);
 
   useEffect(() => {
-    let stepTimeout: NodeJS.Timeout;
-    let confettiTimeout: NodeJS.Timeout;
+    let stepTimeout: number;
     if (step === "4:VisitNewStory") {
-      stepTimeout = setTimeout(() => {
+      stepTimeout = window.setTimeout(() => {
         setShowConfetti(true);
         setStep("5:ConfigureYourProject");
       }, 2000);
     }
 
     return () => {
       clearTimeout(stepTimeout);
-      clearTimeout(confettiTimeout);
     };
   }, [step]);
 

src/components/Modal/Modal.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Modal } from "./Modal";
 import React, { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 
+import { Modal } from "./Modal";
+
 const meta: Meta<typeof Modal> = {
   component: Modal,
   decorators: [

src/components/Modal/Modal.styled.tsx

@@ -7,7 +7,6 @@ import {
   Close,
 } from "@radix-ui/react-dialog";
 import React from "react";
-import { Icons } from "@storybook/components";
 
 export const StyledOverlay = styled(Overlay)`
   background-color: rgba(0, 0, 0, 0.25);
@@ -17,7 +16,6 @@ export const StyledOverlay = styled(Overlay)`
   height: 100%;
 })`;
 
-// @ts-ignore FIXME
 export const StyledContent = styled.div<{ width: string }>(
   ({ width }) => css`
     background-color: white;
@@ -31,9 +29,8 @@ export const StyledContent = styled.div<{ width: string }>(
     max-width: calc(100% - 40px);
     max-height: 85vh;
   `
-) as any;
+);
 
-// @ts-ignore FIXME
 export const ContentWrapper = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof StyledContent> &
@@ -57,22 +54,4 @@ export const StyledDescription = styled(Description)`
   color: #454e54;
 `;
 
-const StyledIcon = styled(Icons)`
-  margin-left: 2px;
-  height: 10px;
-`
-
-const CloseButton = ({ ...props }: any) => {
-  return (
-    <Close {...props}>
-      {props.children}
-      <StyledIcon icon="arrowright" />
-    </Close>
-  );
-};
-export const StyledClose = styled(CloseButton)`
-  all: unset;
-  cursor: pointer;
-  font-size: 13px;
-  color: #798186;
-`;
+export const StyledClose = styled(Close)``;

src/components/TitleBody/TitleBody.styled.tsx

@@ -0,0 +1,19 @@
+import { styled } from "@storybook/theming";
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const Title = styled.strong`
+  font-size: 13px;
+`;
+
+export const Body = styled.p`
+  font-size: 13px;
+  text-align: start;
+  color: #798186;
+  margin: 0;
+  margin-top: 4px;
+`;

src/components/TitleBody/TitleBody.tsx

@@ -1,23 +1,5 @@
 import React from "react";
-import { styled } from "@storybook/theming";
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-
-const Title = styled.strong`
-  font-size: 13px;
-`;
-
-const Body = styled.p`
-  font-size: 13px;
-  text-align: start;
-  color: #798186;
-  margin: 0;
-  margin-top: 4px;
-`;
+import { Body, Title, Wrapper } from "./TitleBody.styled";
 
 export function TitleBody({
   prefix,

src/features/WelcomeModal/WelcomeModal.styled.tsx

@@ -0,0 +1,80 @@
+import { Icons } from "@storybook/components";
+import { keyframes, styled } from "@storybook/theming";
+
+export const rainbowAnimation = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`;
+
+export const ModalContentWrapper = styled.div`
+  background: radial-gradient(
+        circle at left,
+        #ffccd2,
+        #ffdbcb,
+        #ffe9c5,
+        #fff8c0,
+        #f2ffd8,
+        #d2f8e5,
+        #b3f0f1,
+        #a1e6f0,
+        #9fd8df
+      )
+      left,
+    radial-gradient(
+        circle at right,
+        #ffccd2,
+        #ffdbcb,
+        #ffe9c5,
+        #fff8c0,
+        #f2ffd8,
+        #d2f8e5,
+        #b3f0f1,
+        #a1e6f0,
+        #9fd8df
+      )
+      right,
+    linear-gradient(
+      45deg,
+      #ffccd2,
+      #ffdbcb,
+      #ffe9c5,
+      #fff8c0,
+      #f2ffd8,
+      #d2f8e5,
+      #b3f0f1,
+      #a1e6f0,
+      #9fd8df
+    );
+  background-size: 300% 300%;
+  background-repeat: no-repeat;
+  animation: ${rainbowAnimation} 10s linear infinite;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 100px;
+  padding-bottom: 20px;
+`;
+
+export const StyledIcon = styled(Icons)`
+  margin-left: 2px;
+  height: 10px;
+`;
+
+export const SkipButton = styled.button`
+  all: unset;
+  margin-top: 90px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #798186;
+  :focus-visible {
+    outline: auto;
+  }
+`;

src/features/WelcomeModal/WelcomeModal.tsx

@@ -1,72 +1,13 @@
-import { styled, keyframes } from "@storybook/theming";
-import { Button } from "../../components/Button/Button";
-
 import React from "react";
+
+import { Button } from "../../components/Button/Button";
 import { Modal } from "../../components/Modal/Modal";
 import { StorybookLogo } from "../../components/Icons/StorybookLogo";
-
-const rainbowAnimation = keyframes`
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-`;
-
-// @ts-ignore FIXME
-export const ModalContentWrapper = styled.div`
-  background: radial-gradient(
-        circle at left,
-        #ffccd2,
-        #ffdbcb,
-        #ffe9c5,
-        #fff8c0,
-        #f2ffd8,
-        #d2f8e5,
-        #b3f0f1,
-        #a1e6f0,
-        #9fd8df
-      )
-      left,
-    radial-gradient(
-        circle at right,
-        #ffccd2,
-        #ffdbcb,
-        #ffe9c5,
-        #fff8c0,
-        #f2ffd8,
-        #d2f8e5,
-        #b3f0f1,
-        #a1e6f0,
-        #9fd8df
-      )
-      right,
-    linear-gradient(
-      45deg,
-      #ffccd2,
-      #ffdbcb,
-      #ffe9c5,
-      #fff8c0,
-      #f2ffd8,
-      #d2f8e5,
-      #b3f0f1,
-      #a1e6f0,
-      #9fd8df
-    );
-  background-size: 300% 300%;
-  background-repeat: no-repeat;
-  animation: ${rainbowAnimation} 10s linear infinite;
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 100px;
-  padding-bottom: 20px;
-` as any;
+import {
+  ModalContentWrapper,
+  SkipButton,
+  StyledIcon,
+} from "./WelcomeModal.styled";
 
 export const WelcomeModal = ({
   onSkip,
@@ -89,8 +30,11 @@ export const WelcomeModal = ({
           <Button style={{ marginTop: 4 }} onClick={onProceed}>
             Start your 3 minute tour
           </Button>
-          <Close style={{ marginTop: 90 }} onClick={onSkip}>
-            Skip tour
+          <Close asChild>
+            <SkipButton onClick={onSkip}>
+              Skip tour
+              <StyledIcon icon="arrowright" />
+            </SkipButton>
           </Close>
         </ModalContentWrapper>
       )}

src/features/WriteStoriesModal/WriteStoriesModal.tsx

@@ -3,7 +3,7 @@ import { Button } from "../../components/Button/Button";
 
 import { Modal } from "../../components/Modal/Modal";
 import { StorybookLogo } from "../../components/Icons/StorybookLogo";
-import { ModalContentWrapper } from "../WelcomeModal/WelcomeModal";
+import { ModalContentWrapper } from "../WelcomeModal/WelcomeModal.styled";
 
 export function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {
   return (