From 9331c8a6e4c3e3a77315df12c97fd4c746bac3c0 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 8 Jun 2023 16:29:39 +0100
Subject: [PATCH 1/3] Start removing the opening and closing anim on modal

---
 src/App.tsx                                   | 31 +++++-----
 src/components/Modal/Modal.stories.tsx        | 59 ++++++-------------
 src/components/Modal/Modal.styled.tsx         | 14 +----
 src/components/Modal/Modal.tsx                | 49 +++++++--------
 .../WelcomeModal/WelcomeModal.stories.tsx     |  6 +-
 src/features/WelcomeModal/WelcomeModal.tsx    | 18 +++---
 .../WriteStoriesModal/WriteStoriesModal.tsx   |  6 +-
 7 files changed, 66 insertions(+), 117 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a068c89d197..39818ab8fd1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -90,11 +90,12 @@ export default function App({ api }: { api: API }) {
           }}
         />
       )}
-      <WelcomeModal
-        onProceed={() => setStep("2:StorybookTour")}
-        isOpen={enabled && step === "1:Welcome"}
-        skipOnboarding={skipOnboarding}
-      />
+      {enabled && step === "1:Welcome" && (
+        <WelcomeModal
+          onProceed={() => setStep("2:StorybookTour")}
+          skipOnboarding={skipOnboarding}
+        />
+      )}
       {(step === "2:StorybookTour" || step === "5:ConfigureYourProject") && (
         <GuidedTour
           api={api}
@@ -104,16 +105,16 @@ export default function App({ api }: { api: API }) {
           }}
         />
       )}
-      <WriteStoriesModal
-        api={api}
-        addonsStore={addons}
-        onFinish={() => {
-          api.selectStory("example-button--warning");
-          setStep("4:VisitNewStory");
-        }}
-        isOpen={enabled && step === "3:WriteYourStory"}
-        skipOnboarding={skipOnboarding}
-      />
+      {enabled && step === "3:WriteYourStory" && (
+        <WriteStoriesModal
+          api={api}
+          addonsStore={addons}
+          onFinish={() => {
+            api.selectStory("example-button--warning");
+            setStep("4:VisitNewStory");
+          }}
+        />
+      )}
     </ThemeProvider>
   );
 }
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 400c132ad68..0aa4edce32e 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
@@ -21,30 +21,23 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    isOpen: false,
     width: undefined,
     height: undefined,
   },
   render: (props) => {
-    const [, updateArgs] = useArgs();
+    const [isOpen, setOpen] = useState(false);
 
     return (
       <>
-        <Modal
-          {...props}
-          isOpen={props.isOpen}
-          setOpen={() => updateArgs({ isOpen: !props.isOpen })}
-        >
+        <Modal {...props} open={isOpen}>
           {({ Close }) => (
             <div style={{ padding: 15 }}>
               <div>Hello world!</div>
-              <Close asChild>
-                <button>Close modal</button>
-              </Close>
+              <Close onClick={() => setOpen(false)}>Close</Close>
             </div>
           )}
         </Modal>
-        <button onClick={() => updateArgs({ isOpen: true })}>Open modal</button>
+        <button onClick={() => setOpen(true)}>Open modal</button>
       </>
     );
   },
@@ -64,25 +57,19 @@ export const FixedWidth: Story = {
     width: 1024,
   },
   render: (props) => {
-    const [, updateArgs] = useArgs();
+    const [isOpen, setOpen] = useState(false);
 
     return (
       <>
-        <Modal
-          {...props}
-          isOpen={props.isOpen}
-          setOpen={() => updateArgs({ isOpen: !props.isOpen })}
-        >
+        <Modal {...props} open={isOpen}>
           {({ Close }) => (
             <div style={{ padding: 15 }}>
               <div>Hello world!</div>
-              <Close asChild>
-                <button>Close modal</button>
-              </Close>
+              <Close onClick={() => setOpen(false)}>Close</Close>
             </div>
           )}
         </Modal>
-        <button onClick={() => updateArgs({ isOpen: true })}>Open modal</button>
+        <button onClick={() => setOpen(true)}>Open modal</button>
       </>
     );
   },
@@ -102,25 +89,19 @@ export const FixedHeight: Story = {
     height: 430,
   },
   render: (props) => {
-    const [, updateArgs] = useArgs();
+    const [isOpen, setOpen] = useState(false);
 
     return (
       <>
-        <Modal
-          {...props}
-          isOpen={props.isOpen}
-          setOpen={() => updateArgs({ isOpen: !props.isOpen })}
-        >
+        <Modal {...props} open={isOpen}>
           {({ Close }) => (
             <div style={{ padding: 15 }}>
               <div>Hello world!</div>
-              <Close asChild>
-                <button>Close modal</button>
-              </Close>
+              <Close onClick={() => setOpen(false)}>Close</Close>
             </div>
           )}
         </Modal>
-        <button onClick={() => updateArgs({ isOpen: true })}>Open modal</button>
+        <button onClick={() => setOpen(true)}>Open modal</button>
       </>
     );
   },
@@ -141,25 +122,19 @@ export const FixedWidthAndHeight: Story = {
     height: 430,
   },
   render: (props) => {
-    const [, updateArgs] = useArgs();
+    const [isOpen, setOpen] = useState(false);
 
     return (
       <>
-        <Modal
-          {...props}
-          isOpen={props.isOpen}
-          setOpen={() => updateArgs({ isOpen: !props.isOpen })}
-        >
+        <Modal {...props} open={isOpen}>
           {({ Close }) => (
             <div style={{ padding: 15 }}>
               <div>Hello world!</div>
-              <Close asChild>
-                <button>Close modal</button>
-              </Close>
+              <Close onClick={() => setOpen(false)}>Close</Close>
             </div>
           )}
         </Modal>
-        <button onClick={() => updateArgs({ isOpen: true })}>Open modal</button>
+        <button onClick={() => setOpen(true)}>Open modal</button>
       </>
     );
   },
diff --git a/src/components/Modal/Modal.styled.tsx b/src/components/Modal/Modal.styled.tsx
index cb2e0e545b8..b5ef254ab08 100644
--- a/src/components/Modal/Modal.styled.tsx
+++ b/src/components/Modal/Modal.styled.tsx
@@ -1,10 +1,8 @@
 import { css, styled } from "@storybook/theming";
 import * as Dialog from "@radix-ui/react-dialog";
 import React from "react";
-import { motion } from "framer-motion";
-import { animate, exit, initial } from "./Modal";
 
-export const StyledOverlay = styled(motion.div)`
+export const StyledOverlay = styled.div`
   background-color: rgba(27, 28, 29, 0.48);
   position: fixed;
   inset: 0px;
@@ -12,7 +10,7 @@ export const StyledOverlay = styled(motion.div)`
   height: 100%;
 `;
 
-export const StyledContent = styled(motion.div)<{
+export const StyledContent = styled.div<{
   width: number;
   height: number;
 }>(
@@ -38,13 +36,7 @@ export const ContentWrapper = React.forwardRef<
     React.ComponentProps<typeof Dialog.Content>
 >(({ width, height, children, ...contentProps }, ref) => (
   <Dialog.Content ref={ref} asChild {...contentProps}>
-    <StyledContent
-      width={width}
-      height={height}
-      initial={initial}
-      animate={animate}
-      exit={exit}
-    >
+    <StyledContent width={width} height={height}>
       {children}
     </StyledContent>
   </Dialog.Content>
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 560c2a36d56..26d31d2dbfa 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { ContentWrapper, StyledOverlay } from "./Modal.styled";
-import { AnimatePresence } from "framer-motion";
 
 type ContentProps = React.ComponentProps<typeof ContentWrapper>;
 
-interface ModalProps {
+interface ModalProps
+  extends Omit<React.ComponentProps<typeof Dialog.Root>, "children"> {
   width?: number;
   height?: number;
-  isOpen?: boolean;
-  setOpen?: (open: boolean) => void;
   children: (props: {
     Title: typeof Dialog.Title;
     Description: typeof Dialog.Description;
@@ -27,34 +25,29 @@ export function Modal({
   children,
   width,
   height,
-  isOpen,
-  setOpen,
   onEscapeKeyDown,
   onInteractOutside = (ev) => ev.preventDefault(),
+  ...rootProps
 }: ModalProps) {
   return (
-    <Dialog.Root open={isOpen} onOpenChange={setOpen}>
-      <AnimatePresence>
-        {isOpen && (
-          <Dialog.Portal forceMount>
-            <Dialog.Overlay asChild>
-              <StyledOverlay initial={initial} animate={animate} exit={exit} />
-            </Dialog.Overlay>
-            <ContentWrapper
-              width={width}
-              height={height}
-              onInteractOutside={onInteractOutside}
-              onEscapeKeyDown={onEscapeKeyDown}
-            >
-              {children({
-                Title: Dialog.Title,
-                Description: Dialog.Description,
-                Close: Dialog.Close,
-              })}
-            </ContentWrapper>
-          </Dialog.Portal>
-        )}
-      </AnimatePresence>
+    <Dialog.Root {...rootProps}>
+      <Dialog.Portal>
+        <Dialog.Overlay asChild>
+          <StyledOverlay />
+        </Dialog.Overlay>
+        <ContentWrapper
+          width={width}
+          height={height}
+          onInteractOutside={onInteractOutside}
+          onEscapeKeyDown={onEscapeKeyDown}
+        >
+          {children({
+            Title: Dialog.Title,
+            Description: Dialog.Description,
+            Close: Dialog.Close,
+          })}
+        </ContentWrapper>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 }
diff --git a/src/features/WelcomeModal/WelcomeModal.stories.tsx b/src/features/WelcomeModal/WelcomeModal.stories.tsx
index 7351ea7af2f..334eef5c7f7 100644
--- a/src/features/WelcomeModal/WelcomeModal.stories.tsx
+++ b/src/features/WelcomeModal/WelcomeModal.stories.tsx
@@ -16,8 +16,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    isOpen: true,
-  },
-};
+export const Default: Story = {};
diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx
index 8089285f20d..733b92cc409 100644
--- a/src/features/WelcomeModal/WelcomeModal.tsx
+++ b/src/features/WelcomeModal/WelcomeModal.tsx
@@ -17,18 +17,16 @@ import {
 } from "./WelcomeModal.styled";
 
 interface WelcomeModalProps {
-  skipOnboarding: () => void;
   onProceed: () => void;
-  isOpen: boolean;
+  skipOnboarding: () => void;
 }
 
 export const WelcomeModal: FC<WelcomeModalProps> = ({
-  skipOnboarding,
   onProceed,
-  isOpen,
+  skipOnboarding,
 }) => {
   return (
-    <Modal width={540} height={430} isOpen={isOpen} setOpen={skipOnboarding}>
+    <Modal width={540} height={430} defaultOpen>
       {({ Close }) => (
         <ModalContentWrapper data-chromatic="ignore">
           <TopContent>
@@ -42,12 +40,10 @@ export const WelcomeModal: FC<WelcomeModalProps> = ({
               Start your 3 minute tour
             </Button>
           </TopContent>
-          <Close asChild>
-            <SkipButton>
-              Skip tour
-              <StyledIcon icon="arrowright" />
-            </SkipButton>
-          </Close>
+          <SkipButton onClick={skipOnboarding}>
+            Skip tour
+            <StyledIcon icon="arrowright" />
+          </SkipButton>
           <Background>
             <Circle1 />
             <Circle2 />
diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
index b463bfca1f2..183b326e886 100644
--- a/src/features/WriteStoriesModal/WriteStoriesModal.tsx
+++ b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -38,16 +38,12 @@ interface WriteStoriesModalProps {
   onFinish: () => void;
   api: API;
   addonsStore: AddonStore;
-  skipOnboarding: () => void;
-  isOpen: boolean;
 }
 
 export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
   onFinish,
   api,
   addonsStore,
-  skipOnboarding,
-  isOpen,
 }) => {
   const [step, setStep] = useState<
     "imports" | "meta" | "story" | "args" | "customStory"
@@ -94,7 +90,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
   };
 
   return (
-    <Modal width={740} height={430} isOpen={isOpen} setOpen={skipOnboarding}>
+    <Modal width={740} height={430} defaultOpen>
       {({ Title, Description, Close }) => (
         <ModalContent>
           {data ? (

From 7f9dcc725a948932e6f26f65bfaefa06fdc31bbd Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 8 Jun 2023 17:05:50 +0100
Subject: [PATCH 2/3] Skip onboarding cleanup

---
 src/App.tsx                                          |  1 +
 src/features/WriteStoriesModal/WriteStoriesModal.tsx | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 39818ab8fd1..7d6df0c2ba5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -113,6 +113,7 @@ export default function App({ api }: { api: API }) {
             api.selectStory("example-button--warning");
             setStep("4:VisitNewStory");
           }}
+          skipOnboarding={skipOnboarding}
         />
       )}
     </ThemeProvider>
diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
index 183b326e886..341beec3430 100644
--- a/src/features/WriteStoriesModal/WriteStoriesModal.tsx
+++ b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -38,12 +38,14 @@ interface WriteStoriesModalProps {
   onFinish: () => void;
   api: API;
   addonsStore: AddonStore;
+  skipOnboarding: () => void;
 }
 
 export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
   onFinish,
   api,
   addonsStore,
+  skipOnboarding,
 }) => {
   const [step, setStep] = useState<
     "imports" | "meta" | "story" | "args" | "customStory"
@@ -128,9 +130,13 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                   <span>How to write a story</span>
                 </ModalTitle>
               </Title>
-              <Close asChild>
-                <Icons style={{ cursor: "pointer" }} icon="cross" width={13} />
-              </Close>
+
+              <Icons
+                style={{ cursor: "pointer" }}
+                icon="cross"
+                width={13}
+                onClick={skipOnboarding}
+              />
             </Header>
             <Description asChild>
               <Content>

From 69a984a127f49316c82114ae4c950ece856f0658 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 8 Jun 2023 18:04:50 +0100
Subject: [PATCH 3/3] Fix conflicts

---
 src/App.tsx                                   | 52 ++++++++++---------
 .../WriteStoriesModal.stories.tsx             | 14 ++---
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 636ebcc5362..34193879efb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { ThemeProvider, ensure, themes } from "@storybook/theming";
-import { STORY_CHANGED } from "@storybook/core-events";
 import { addons, type API } from "@storybook/manager-api";
 
 import { GuidedTour } from "./features/GuidedTour/GuidedTour";
@@ -72,34 +71,37 @@ export default function App({ api }: { api: API }) {
           }}
         />
       )}
-      <WelcomeModal
-        onProceed={() => setStep("2:StorybookTour")}
-        isOpen={enabled && step === "1:Welcome"}
-        skipOnboarding={skipOnboarding}
-      />
-      {enabled && (step === "2:StorybookTour" || step === "5:ConfigureYourProject") && (
-        <GuidedTour
+      {enabled && step === "1:Welcome" && (
+        <WelcomeModal
+          onProceed={() => setStep("2:StorybookTour")}
+          skipOnboarding={skipOnboarding}
+        />
+      )}
+      {enabled &&
+        (step === "2:StorybookTour" || step === "5:ConfigureYourProject") && (
+          <GuidedTour
+            api={api}
+            isFinalStep={step === "5:ConfigureYourProject"}
+            onFirstTourDone={() => {
+              setStep("3:WriteYourStory");
+            }}
+            onLastTourDone={() => {
+              api.selectStory("configure-your-project--docs");
+              skipOnboarding();
+            }}
+          />
+        )}
+      {enabled && step === "3:WriteYourStory" && (
+        <WriteStoriesModal
           api={api}
-          isFinalStep={step === "5:ConfigureYourProject"}
-          onFirstTourDone={() => {
-            setStep("3:WriteYourStory");
-          }}
-          onLastTourDone={() => {
-            api.selectStory("configure-your-project--docs");
-            skipOnboarding();
+          addonsStore={addons}
+          onFinish={() => {
+            api.selectStory("example-button--warning");
+            setStep("4:VisitNewStory");
           }}
+          skipOnboarding={skipOnboarding}
         />
       )}
-      <WriteStoriesModal
-        api={api}
-        addonsStore={addons}
-        onFinish={() => {
-          api.selectStory("example-button--warning");
-          setStep("4:VisitNewStory");
-        }}
-        isOpen={enabled && step === "3:WriteYourStory"}
-        skipOnboarding={skipOnboarding}
-      />
     </ThemeProvider>
   );
 }
diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx
index 1aa9896f580..cb10e43bca5 100644
--- a/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx
+++ b/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx
@@ -9,7 +9,7 @@ import {
   STORY_RENDERED,
 } from "@storybook/core-events";
 
-const getData = jest.fn()
+const getData = jest.fn();
 
 const meta: Meta<typeof WriteStoriesModal> = {
   component: WriteStoriesModal,
@@ -33,7 +33,7 @@ const meta: Meta<typeof WriteStoriesModal> = {
             storyIndexInvalidatedCb = cb;
           }
         },
-        off: () => { },
+        off: () => {},
       }),
     } as any,
   },
@@ -43,10 +43,10 @@ const meta: Meta<typeof WriteStoriesModal> = {
         // do not respond to the first call, this would only return the data correctly if the story already exists
         // which is not the case in this story, it only makes sense in the real scenario
         .mockReturnValueOnce(null)
-        .mockReturnValueOnce({ some: "data" })
+        .mockReturnValueOnce({ some: "data" });
       return (
         <div style={{ width: "1200px", height: "800px" }}>{storyFn()}</div>
-      )
+      );
     },
   ],
 };
@@ -57,11 +57,7 @@ type Story = StoryObj<typeof meta>;
 
 let storyIndexInvalidatedCb: () => void;
 
-export const Default: Story = {
-  args: {
-    isOpen: true,
-  },
-};
+export const Default: Story = {};
 
 export const DefaultPlayed: Story = {
   args: {