introduce feature components

storybookjs · May 31, 2023 · a7dd5e3 · a7dd5e3
1 parent 23da8fb
commit a7dd5e3
Show file tree

Hide file tree

Showing 10 changed files with 403 additions and 248 deletions.
diff --git 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
@@ -1,97 +1,30 @@
-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");
     const path = decodeURIComponent(url.searchParams.get("path"));
     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
@@ -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
diff --git 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>
   );
 };