Merge pull request #47 from storybookjs/remove-animation-modal

Remove animation modal
storybookjs · Jun 8, 2023 · 191af16 · 191af16
2 parents 1395d78 + 69a984a
commit 191af16
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 137 deletions.
diff --git 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/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
@@ -1,18 +1,16 @@
 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;
   width: 100%;
   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
@@ -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
@@ -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
@@ -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 />