refactor: isolate Popover stories (#5618)

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: ryo-manba

packages/react-aria-components/stories/Popover.stories.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, Dialog, DialogTrigger, Heading, Popover} from 'react-aria-components';
+import React from 'react';
+
+export default {
+  title: 'React Aria Components'
+};
+
+export const PopoverExample = () => (
+  <DialogTrigger>
+    <Button>Open popover</Button>
+    <Popover
+      placement="bottom start"
+      style={{
+        background: 'Canvas',
+        color: 'CanvasText',
+        border: '1px solid gray',
+        padding: 30,
+        zIndex: 5
+      }}>
+      <Dialog>
+        {({close}) => (
+          <form style={{display: 'flex', flexDirection: 'column'}}>
+            <Heading slot="title">Sign up</Heading>
+            <label>
+              First Name: <input placeholder="John" />
+            </label>
+            <label>
+              Last Name: <input placeholder="Smith" />
+            </label>
+            <Button onPress={close} style={{marginTop: 10}}>
+              Submit
+            </Button>
+          </form>
+        )}
+      </Dialog>
+    </Popover>
+  </DialogTrigger>
+);

packages/react-aria-components/stories/index.stories.tsx

@@ -389,38 +389,6 @@ export const TooltipExample = () => (
   </TooltipTrigger>
 );
 
-export const PopoverExample = () => (
-  <DialogTrigger>
-    <Button>Open popover</Button>
-    <Popover
-      placement="bottom start"
-      style={{
-        background: 'Canvas',
-        color: 'CanvasText',
-        border: '1px solid gray',
-        padding: 30,
-        zIndex: 5
-      }}>
-      <Dialog>
-        {({close}) => (
-          <form style={{display: 'flex', flexDirection: 'column'}}>
-            <Heading slot="title">Sign up</Heading>
-            <label>
-              First Name: <input placeholder="John" />
-            </label>
-            <label>
-              Last Name: <input placeholder="Smith" />
-            </label>
-            <Button onPress={close} style={{marginTop: 10}}>
-              Submit
-            </Button>
-          </form>
-        )}
-      </Dialog>
-    </Popover>
-  </DialogTrigger>
-);
-
 export const ModalExample = () => (
   <DialogTrigger>
     <Button>Open modal</Button>