From e40416136a33b3c26d39fabf429b103abb46f3ff Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@yandex-team.ru>
Date: Wed, 14 Feb 2024 12:26:14 +0100
Subject: [PATCH] chore: update Popup stories (#1337)

---
 .../Popup/__stories__/Popup.stories.tsx       | 233 ++++++++++--------
 1 file changed, 129 insertions(+), 104 deletions(-)

diff --git a/src/components/Popup/__stories__/Popup.stories.tsx b/src/components/Popup/__stories__/Popup.stories.tsx
index 05cc21d0ba..2824695128 100644
--- a/src/components/Popup/__stories__/Popup.stories.tsx
+++ b/src/components/Popup/__stories__/Popup.stories.tsx
@@ -1,132 +1,157 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
-import {useUniqId, useVirtualElementRef} from '../../../hooks';
+import {useVirtualElementRef} from '../../../hooks';
 import {Button} from '../../Button';
-import {TextInput} from '../../controls';
+import {Text} from '../../Text';
 import {Popup} from '../Popup';
-import type {PopupPlacement, PopupProps} from '../Popup';
+import type {PopupPlacement} from '../Popup';
 
-export default {
+const meta: Meta<typeof Popup> = {
     title: 'Components/Overlays/Popup',
     component: Popup,
-} as Meta;
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popup>;
+
+export const Default: Story = {
+    render: function PopupStory(props) {
+        const anchorRef = React.useRef<HTMLButtonElement>(null);
+        const [open, setOpen] = React.useState(false);
+
+        return (
+            <React.Fragment>
+                <Popup {...props} open={open} anchorRef={anchorRef} onClose={() => setOpen(false)}>
+                    <div style={{padding: 10}}>Popup content</div>
+                </Popup>
+                <div
+                    style={{
+                        width: '100%',
+                        height: 200,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Button ref={anchorRef} onClick={() => setOpen(!open)}>
+                        {open ? 'Hide' : 'Show'}
+                    </Button>
+                </div>
+            </React.Fragment>
+        );
+    },
+};
 
-export const Default: StoryFn<PopupProps> = (props: PopupProps) => {
-    const anchorRef = React.useRef<HTMLButtonElement>(null);
-    const [open, setOpen] = React.useState(false);
+export const Placement: Story = {
+    render: function PopupStory(props) {
+        const anchorRef = React.useRef<HTMLDivElement>(null);
+        const [open, setOpen] = React.useState(true);
+        const contentStyle = {padding: 10};
+        const placements: PopupPlacement = [
+            'top-start',
+            'top',
+            'top-end',
+            'right-start',
+            'right',
+            'right-end',
+            'bottom-end',
+            'bottom',
+            'bottom-start',
+            'left-end',
+            'left',
+            'left-start',
+        ];
 
-    return (
-        <React.Fragment>
-            <Popup {...props} open={open} anchorRef={anchorRef} onClose={() => setOpen(false)}>
-                <div style={{padding: 10}}>Popup content</div>
-            </Popup>
+        return (
             <div
+                ref={anchorRef}
                 style={{
-                    width: '100%',
+                    width: 300,
                     height: 200,
+                    border: '2px dashed black',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}
             >
-                <Button ref={anchorRef} onClick={() => setOpen(!open)}>
-                    {open ? 'Hide' : 'Show'}
-                </Button>
+                <Button onClick={() => setOpen(!open)}>Toggle open</Button>
+                {placements.map((placement) => (
+                    <Popup
+                        key={placement}
+                        {...props}
+                        open={open}
+                        anchorRef={anchorRef}
+                        placement={placement}
+                    >
+                        <div style={contentStyle}>{placement}</div>
+                    </Popup>
+                ))}
             </div>
-        </React.Fragment>
-    );
+        );
+    },
+    parameters: {
+        layout: 'centered',
+    },
 };
 
-export const Placement: StoryFn<PopupProps> = (args) => {
-    const anchorRef = React.useRef<HTMLDivElement>(null);
-    const [open, setOpen] = React.useState(true);
-    const contentStyle = {padding: 10};
-    const placements: PopupPlacement = [
-        'top-start',
-        'top',
-        'top-end',
-        'right-start',
-        'right',
-        'right-end',
-        'bottom-end',
-        'bottom',
-        'bottom-start',
-        'left-end',
-        'left',
-        'left-start',
-    ];
+export const Position: Story = {
+    render: function PopupStory(props) {
+        const [left, setLeft] = React.useState(0);
+        const [top, setTop] = React.useState(0);
 
-    return (
-        <div
-            ref={anchorRef}
-            style={{
-                width: 300,
-                height: 200,
-                border: '2px dashed black',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}
-        >
-            <Button onClick={() => setOpen(!open)}>Toggle open</Button>
-            {placements.map((placement) => (
-                <Popup
-                    key={placement}
-                    {...args}
-                    open={open}
-                    anchorRef={anchorRef}
-                    placement={placement}
-                >
-                    <div style={contentStyle}>{placement}</div>
-                </Popup>
-            ))}
-        </div>
-    );
-};
-Placement.parameters = {
-    layout: 'centered',
-};
+        const [contextElement, setContextElement] = React.useState<HTMLDivElement | null>(null);
+        const anchorRef = useVirtualElementRef({
+            rect: {top, left},
+            contextElement: contextElement ?? undefined,
+        });
+        const [open, setOpen] = React.useState(false);
 
-export const Position: StoryFn<PopupProps> = (args) => {
-    const [left, setLeft] = React.useState(100);
-    const [top, setTop] = React.useState(100);
-    const anchorRef = useVirtualElementRef({rect: {top, left}});
+        const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+            setLeft(event.clientX);
+            setTop(event.clientY);
+        };
 
-    const id = useUniqId();
+        React.useEffect(() => {
+            window.dispatchEvent(new CustomEvent('scroll'));
+        }, [left, top]);
 
-    return (
-        <div>
-            <label htmlFor={id + '1'} style={{display: 'flex', alignItems: 'center'}}>
-                x:
-                <TextInput
-                    id={id + '1'}
-                    value={String(left)}
-                    onUpdate={(value) => {
-                        setLeft(Number(value));
-                        window.dispatchEvent(new CustomEvent('scroll'));
+        return (
+            <div>
+                <div
+                    style={{
+                        width: 400,
+                        height: 400,
+                        position: 'relative',
+                        overflow: 'hidden',
+                        border: '2px dashed black',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                    onMouseMove={handleMouseMove}
+                    onMouseEnter={() => {
+                        setOpen(true);
                     }}
-                    type="number"
-                    style={{width: 100}}
-                />
-            </label>
-            <label htmlFor={id + '2'} style={{display: 'flex', alignItems: 'center'}}>
-                y:
-                <TextInput
-                    id={id + '2'}
-                    value={String(top)}
-                    onUpdate={(value) => {
-                        setTop(Number(value));
-                        window.dispatchEvent(new CustomEvent('scroll'));
+                    onMouseLeave={() => {
+                        setOpen(false);
                     }}
-                    type="number"
-                    style={{width: 100}}
-                />
-            </label>
-            <Popup {...args} open anchorRef={anchorRef}>
-                <div style={{padding: 10}}>Popup content</div>
-            </Popup>
-        </div>
-    );
+                >
+                    <div ref={setContextElement} />
+                    <Text color="complementary">Move cursor here</Text>
+                    <Popup {...props} open={open} anchorRef={anchorRef}>
+                        <div style={{padding: 10}}>Popup content</div>
+                    </Popup>
+                </div>
+            </div>
+        );
+    },
+    args: {
+        disablePortal: true,
+    },
+    parameters: {
+        layout: 'centered',
+    },
 };