From a7dd5e3b186f31d4beb7e4abbb160fc59dde462f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 31 May 2023 13:09:15 +0200
Subject: [PATCH] introduce feature components

---
 README.md                                     |   3 +-
 src/App.tsx                                   | 153 +++++-----------
 src/components/Button/Button.tsx              |  22 +++
 src/components/GuidedTour/GuidedTour.tsx      | 140 ---------------
 src/components/Modal/Modal.styled.tsx         |   2 +-
 src/features/GuidedTour/GuidedTour.tsx        | 166 ++++++++++++++++++
 .../WelcomeModal/WelcomeModal.stories.tsx     |  19 ++
 src/features/WelcomeModal/WelcomeModal.tsx    |  98 +++++++++++
 .../WriteStoriesModal.stories.tsx             |  19 ++
 .../WriteStoriesModal/WriteStoriesModal.tsx   |  29 +++
 10 files changed, 403 insertions(+), 248 deletions(-)
 create mode 100644 src/components/Button/Button.tsx
 delete mode 100644 src/components/GuidedTour/GuidedTour.tsx
 create mode 100644 src/features/GuidedTour/GuidedTour.tsx
 create mode 100644 src/features/WelcomeModal/WelcomeModal.stories.tsx
 create mode 100644 src/features/WelcomeModal/WelcomeModal.tsx
 create mode 100644 src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx
 create mode 100644 src/features/WriteStoriesModal/WriteStoriesModal.tsx

diff --git a/README.md b/README.md
index d4ac3cb..97c578d 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,9 @@ Storybook Addon Onboarding - Introduces a new onboarding experience
 
 ### Development scripts
 
-- `yarn start` runs babel in watch mode and starts Storybook
+- `yarn start` runs tsup in watch mode and starts Storybook
 - `yarn build` build and package your addon code
+- `yarn storybook:watch` runs nodemon in watch mode so it reruns Storybook on changes. This is useful when testing the actual addon (as we cannot have HMR for addon changes) rather than just stories in Storybook
 
 ## Release Management
 
diff --git a/src/App.tsx b/src/App.tsx
index 14b5238..d46ffc2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,89 +1,22 @@
-import {
-  ThemeProvider,
-  ensure,
-  themes,
-  styled,
-  keyframes,
-} from "@storybook/theming";
-import { Button } from "@storybook/components";
+import { ThemeProvider, ensure, themes } from "@storybook/theming";
 import { type API } from "@storybook/manager-api";
 
 const theme = ensure(themes.light);
 
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { STORY_CHANGED, CURRENT_STORY_WAS_SET } from "@storybook/core-events";
-import { GuidedTour } from "./components/GuidedTour/GuidedTour";
-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%;
-  }
-`;
-
-// Styled component for the card
-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;
-`;
+import { GuidedTour } from "./features/GuidedTour/GuidedTour";
+import { WelcomeModal } from "./features/WelcomeModal/WelcomeModal";
+import { WriteStoriesModal } from "./features/WriteStoriesModal/WriteStoriesModal";
 
 export const App = ({ api }: { api: API }) => {
-  const [enabled, setEnabled] = useState<boolean>(true);
-  const [showGuidedTour, setShowGuidedTour] = useState<boolean>(false);
+  const [enabled, setEnabled] = useState(true);
+  const [showGuidedTour, setShowGuidedTour] = useState(false);
+  const [showWriteStoriesModal, setShowWriteStoriesModal] = useState(false);
+  const [showWelcomeModal, setShowWelcomeModal] = useState(true);
+  const [isFinalStep, setIsFinalStep] = useState(false);
 
-  const skipTour = () => {
+  const skipTour = useCallback(() => {
     // remove onboarding query parameter from current url
     const url = new URL(window.location.href);
     url.searchParams.delete("onboarding");
@@ -91,7 +24,7 @@ export const App = ({ api }: { api: API }) => {
     url.search = `?path=${path}`;
     history.replaceState({}, "", url.href);
     setEnabled(false);
-  };
+  }, [setEnabled]);
 
   useEffect(() => {
     api.once(CURRENT_STORY_WAS_SET, ({ storyId }) => {
@@ -110,11 +43,17 @@ export const App = ({ api }: { api: API }) => {
   }, []);
 
   useEffect(() => {
-    api.on(STORY_CHANGED, (storyId: string) => {
+    const onStoryChanged = (storyId: string) => {
       if (storyId === "introduction-configure-your-project--docs") {
         setEnabled(false);
       }
-    });
+    };
+
+    api.on(STORY_CHANGED, onStoryChanged);
+
+    return () => {
+      api.off(STORY_CHANGED, onStoryChanged);
+    };
   }, []);
 
   if (!enabled) {
@@ -123,32 +62,34 @@ export const App = ({ api }: { api: API }) => {
 
   return (
     <ThemeProvider theme={theme}>
-      {!showGuidedTour && (
-        <Modal width="540px" defaultOpen>
-          {({ Title, Description, Close }) => (
-            <ModalContentWrapper>
-              <StorybookLogo />
-              <Title style={{ marginTop: 20 }}>Welcome to Storybook</Title>
-              <Description>
-                Storybook helps you develop UI components.
-                <br />
-                Learn the basics in a few simple steps.
-              </Description>
-              <Button
-                style={{ marginTop: 4 }}
-                secondary
-                onClick={() => setShowGuidedTour(true)}
-              >
-                Start 3 minute tour
-              </Button>
-              <Close style={{ marginTop: 90 }} onClick={skipTour}>
-                Skip tour
-              </Close>
-            </ModalContentWrapper>
-          )}
-        </Modal>
+      {showGuidedTour && (
+        <GuidedTour
+          api={api}
+          isFinalStep={isFinalStep}
+          onFirstTourDone={() => {
+            setShowWriteStoriesModal(true);
+            setShowGuidedTour(false);
+          }}
+        />
+      )}
+      {showWelcomeModal && (
+        <WelcomeModal
+          onProceed={() => {
+            setShowWelcomeModal(false);
+            setShowGuidedTour(true);
+          }}
+          onSkip={skipTour}
+        />
+      )}
+      {showWriteStoriesModal && (
+        <WriteStoriesModal
+          onFinish={() => {
+            setShowWriteStoriesModal(false);
+            setIsFinalStep(true);
+            setShowGuidedTour(true);
+          }}
+        />
       )}
-      {showGuidedTour && <GuidedTour api={api} />}
     </ThemeProvider>
   );
 };
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 0000000..263d01d
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,22 @@
+import React 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 function Button(props: React.ComponentProps<"button">) {
+  const style = {
+    ...buttonStyles,
+    ...(props.style || {}),
+  };
+
+  return <button type="button" {...props} style={style} />;
+}
diff --git a/src/components/GuidedTour/GuidedTour.tsx b/src/components/GuidedTour/GuidedTour.tsx
deleted file mode 100644
index db9ca1e..0000000
--- a/src/components/GuidedTour/GuidedTour.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Joyride, { Step } from "react-joyride";
-
-import { PulsatingEffect } from "../PulsatingEffect/PulsatingEffect";
-import { Confetti } from "../Confetti/Confetti";
-import { TitleBody } from "../TitleBody/TitleBody";
-import { API } from "@storybook/manager-api";
-import { STORY_ARGS_UPDATED } from "@storybook/core-events";
-
-let INTERACTIONS_COUNT = 0;
-
-export function GuidedTour({ api }: { api: API }) {
-  const [stepIndex, setStepIndex] = useState<number>();
-
-  useEffect(() => {
-    api.on(STORY_ARGS_UPDATED, () => {
-      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;
-      if (INTERACTIONS_COUNT === 2) {
-        setStepIndex(3);
-      }
-    });
-  }, []);
-
-  const steps: Step[] = [
-    {
-      target: "div:has(> div > #example-button--primary):first-of-type",
-      content: (
-        <TitleBody
-          title="Your stories"
-          body="A story is a key state that a component supports. This Button component
-        has four stories."
-        />
-      ),
-      placement: "right",
-    },
-    {
-      target: "#storybook-preview-iframe",
-      content: (
-        <TitleBody
-          title="Interactive story preview"
-          body="Whenever you modify a component's code or story, the changes will live update here."
-        />
-      ),
-      placement: "bottom",
-    },
-    {
-      target: "#control-primary",
-      content: (
-        <>
-          <TitleBody
-            title="Interactive story playground"
-            body={
-              <>
-                See how a story renders with different data and state without
-                touching code.
-                <br />
-                Press this button a couple times to try it out.
-              </>
-            }
-          />
-          <PulsatingEffect targetSelector="#control-primary" />
-        </>
-      ),
-      placement: "right",
-      spotlightPadding: 5,
-      spotlightClicks: true,
-      disableOverlay: true,
-      disableScrolling: true,
-      styles: {
-        buttonNext: {
-          display: "none",
-        },
-        spotlight: {
-          borderRadius: 200,
-        },
-      },
-    },
-    {
-      target: "#control-primary",
-      content: (
-        <>
-          <Confetti numberOfPieces={100} />
-          <TitleBody
-            title="Nice one!"
-            body="Now you know how to control your stories interactively. Let's see how to write a story."
-          />
-        </>
-      ),
-      placement: "right",
-      disableOverlay: true,
-      disableScrolling: true,
-    },
-    {
-      target: "#introduction-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,
-      styles: {
-        buttonNext: {
-          display: "none",
-        },
-      },
-    },
-  ];
-
-  return (
-    <Joyride
-      steps={steps}
-      continuous
-      stepIndex={stepIndex}
-      spotlightPadding={0}
-      hideBackButton
-      styles={{
-        spotlight: {
-          border: "solid 2px #004c7c",
-        },
-        tooltip: {
-          maxWidth: 260,
-        },
-        buttonNext: {
-          backgroundColor: "#029CFD",
-          width: "100%",
-          padding: "12px 9px",
-          margin: 0,
-        },
-        tooltipContent: {
-          paddingBottom: 0,
-        },
-        options: {
-          zIndex: 10000,
-        },
-      }}
-    />
-  );
-}
diff --git a/src/components/Modal/Modal.styled.tsx b/src/components/Modal/Modal.styled.tsx
index 3a9caeb..87e9b3b 100644
--- a/src/components/Modal/Modal.styled.tsx
+++ b/src/components/Modal/Modal.styled.tsx
@@ -59,7 +59,7 @@ const CloseButton = ({ ...props }: any) => {
   return (
     <Close {...props}>
       {props.children}
-      <Icons icon="arrowright" style={{ marginLeft: 4 }} />
+      <Icons icon="arrowright" style={{ marginLeft: 2 }} height={10} />
     </Close>
   );
 };
diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
new file mode 100644
index 0000000..aa9a8ad
--- /dev/null
+++ b/src/features/GuidedTour/GuidedTour.tsx
@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+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";
+
+let INTERACTIONS_COUNT = 0;
+
+export function GuidedTour({
+  api,
+  isFinalStep,
+  onFirstTourDone,
+}: {
+  api: API;
+  isFinalStep?: boolean;
+  onFirstTourDone: () => void;
+}) {
+  const [stepIndex, setStepIndex] = useState<number>();
+
+  useEffect(() => {
+    api.on(STORY_ARGS_UPDATED, () => {
+      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;
+      if (INTERACTIONS_COUNT === 2) {
+        setStepIndex(3);
+      }
+    });
+  }, []);
+
+  const steps: Step[] = isFinalStep
+    ? [
+        {
+          target: "#introduction-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",
+            },
+          },
+          floaterProps: {
+            disableAnimation: true,
+          },
+        },
+      ]
+    : [
+        {
+          target: "div:has(> div > #example-button--primary):first-of-type",
+          content: (
+            <TitleBody
+              title="Your stories"
+              body="A story is a key state that a component supports. This Button component
+        has four stories."
+            />
+          ),
+          placement: "right",
+          disableBeacon: true,
+          floaterProps: {
+            disableAnimation: true,
+          },
+        },
+        {
+          target: "#storybook-preview-iframe",
+          content: (
+            <TitleBody
+              title="Interactive story preview"
+              body="Whenever you modify a component's code or story, the changes will live update here."
+            />
+          ),
+          placement: "bottom",
+        },
+        {
+          target: "#control-primary",
+          content: (
+            <>
+              <TitleBody
+                title="Interactive story playground"
+                body={
+                  <>
+                    See how a story renders with different data and state
+                    without touching code.
+                    <br />
+                    Press this button a couple times to try it out.
+                  </>
+                }
+              />
+              <PulsatingEffect targetSelector="#control-primary" />
+            </>
+          ),
+          placement: "right",
+          spotlightPadding: 5,
+          spotlightClicks: true,
+          disableOverlay: true,
+          styles: {
+            buttonNext: {
+              display: "none",
+            },
+            spotlight: {
+              borderRadius: 200,
+            },
+          },
+        },
+        {
+          target: "#control-primary",
+          content: (
+            <>
+              <Confetti numberOfPieces={100} />
+              <TitleBody
+                title="Nice one!"
+                body="Now you know how to control your stories interactively. Let's see how to write a story."
+              />
+            </>
+          ),
+          placement: "right",
+          disableOverlay: true,
+          locale: {
+            last: "Next",
+          },
+        },
+      ];
+
+  return (
+    <Joyride
+      steps={steps}
+      continuous
+      stepIndex={stepIndex}
+      spotlightPadding={0}
+      hideBackButton
+      disableCloseOnEsc
+      disableOverlayClose
+      disableScrolling
+      hideCloseButton
+      callback={(data: CallBackProps) => {
+        if (!isFinalStep && data.status === STATUS.FINISHED) {
+          onFirstTourDone();
+        }
+      }}
+      styles={{
+        spotlight: {
+          border: "solid 2px #004c7c",
+        },
+        tooltip: {
+          maxWidth: 260,
+        },
+        buttonNext: buttonStyles,
+        tooltipContent: {
+          paddingBottom: 0,
+        },
+        options: {
+          zIndex: 10000,
+          primaryColor: "#029CFD",
+        },
+      }}
+    />
+  );
+}
diff --git a/src/features/WelcomeModal/WelcomeModal.stories.tsx b/src/features/WelcomeModal/WelcomeModal.stories.tsx
new file mode 100644
index 0000000..334eef5
--- /dev/null
+++ b/src/features/WelcomeModal/WelcomeModal.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { WelcomeModal } from "./WelcomeModal";
+
+const meta: Meta<typeof WelcomeModal> = {
+  component: WelcomeModal,
+  decorators: [
+    (storyFn) => (
+      <div style={{ width: "1200px", height: "800px" }}>{storyFn()}</div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx
new file mode 100644
index 0000000..eac5bc5
--- /dev/null
+++ b/src/features/WelcomeModal/WelcomeModal.tsx
@@ -0,0 +1,98 @@
+import { styled, keyframes } from "@storybook/theming";
+import { Button } from "../../components/Button/Button";
+
+import React from "react";
+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%;
+  }
+`;
+
+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 WelcomeModal = ({
+  onSkip,
+  onProceed,
+}: {
+  onSkip: () => void;
+  onProceed: () => void;
+}) => {
+  return (
+    <Modal width="540px" defaultOpen>
+      {({ Title, Description, Close }) => (
+        <ModalContentWrapper data-chromatic="ignore">
+          <StorybookLogo />
+          <Title style={{ marginTop: 20 }}>Welcome to Storybook</Title>
+          <Description>
+            Storybook helps you develop UI components.
+            <br />
+            Learn the basics in a few simple steps.
+          </Description>
+          <Button style={{ marginTop: 4 }} onClick={onProceed}>
+            Start your 3 minute tour
+          </Button>
+          <Close style={{ marginTop: 90 }} onClick={onSkip}>
+            Skip tour
+          </Close>
+        </ModalContentWrapper>
+      )}
+    </Modal>
+  );
+};
diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx
new file mode 100644
index 0000000..90af238
--- /dev/null
+++ b/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { WriteStoriesModal } from "./WriteStoriesModal";
+
+const meta: Meta<typeof WriteStoriesModal> = {
+  component: WriteStoriesModal,
+  decorators: [
+    (storyFn) => (
+      <div style={{ width: "1200px", height: "800px" }}>{storyFn()}</div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
new file mode 100644
index 0000000..c940947
--- /dev/null
+++ b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Button } from "../../components/Button/Button";
+
+import { Modal } from "../../components/Modal/Modal";
+import { StorybookLogo } from "../../components/Icons/StorybookLogo";
+import { ModalContentWrapper } from "../WelcomeModal/WelcomeModal";
+
+export function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {
+  return (
+    <Modal width="540px" defaultOpen>
+      {({ Title, Description }) => (
+        <ModalContentWrapper data-chromatic="ignore">
+          <StorybookLogo />
+          <Title style={{ marginTop: 20 }}>
+            Create your first story (WORK IN PROGRESS)
+          </Title>
+          <Description>
+            Now it's your turn. <br />
+            See how easy it is to create your first story by following these
+            steps below.
+          </Description>
+          <Button style={{ marginTop: 4 }} onClick={onFinish}>
+            Go to story
+          </Button>
+        </ModalContentWrapper>
+      )}
+    </Modal>
+  );
+}