From f9f4a3ed9f569a743d2efc733ac54f2d971b889e Mon Sep 17 00:00:00 2001
From: DenisVorop <saskeazaske@icloud.com>
Date: Fri, 13 Oct 2023 19:22:07 +0300
Subject: [PATCH] chore(Popup): add story

---
 .storybook/external/icons.stories.tsx         |  6 +-
 src/components/ComboBox.tsx                   |  2 +-
 src/components/Dropdown.tsx                   |  2 +-
 src/components/ErrorPopup.tsx                 |  2 +-
 src/components/FormEditor.tsx                 |  2 +-
 src/components/FormInput/FormInput.tsx        |  2 +-
 src/components/GlobalSearch.tsx               |  2 +-
 .../InlineForm/InlineForm.stories.tsx         |  2 +-
 src/components/Popup/Popup.stories.tsx        | 85 +++++++++++++++++++
 src/components/{ => Popup}/Popup.tsx          |  0
 src/components/UserGroup/UserGroup.tsx        |  2 +-
 src/components/index.tsx                      |  2 +-
 12 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Popup/Popup.stories.tsx
 rename src/components/{ => Popup}/Popup.tsx (100%)

diff --git a/.storybook/external/icons.stories.tsx b/.storybook/external/icons.stories.tsx
index 7a6e5937..fe62e93f 100644
--- a/.storybook/external/icons.stories.tsx
+++ b/.storybook/external/icons.stories.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import { Text } from '../../src/components/Text/Text';
 import { Input } from '../../src/components/Input/Input';
-import { Popup } from '../../src/components/Popup'
+import { Popup } from '../../src/components/Popup/Popup'
 
 type IconStory = React.ComponentType<{ type: 'solid' | 'outline' } & Omit<BaseIconProps, 'value'>>
 
@@ -149,7 +149,7 @@ const Item: React.FC<
             >
                 <code>{`import { ${originalName} } from '@taskany/icons';`}</code>
             </Popup>
-            
+
             <Popup visible={showTooltip} reference={nodeRef} placement="top">
                 <Text size="xs" onClick={hide}>Copied!</Text>
             </Popup>
@@ -199,4 +199,4 @@ export const All: StoryFn<IconStory> = (args) => {
             <Results type={args.type} size={args.size} color={args.color} searchValue={deferredValue} />
         </Wrapper>
     )
-}
\ No newline at end of file
+}
diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx
index 996ce2fd..923cf13d 100644
--- a/src/components/ComboBox.tsx
+++ b/src/components/ComboBox.tsx
@@ -9,7 +9,7 @@ import { useKeyboard, KeyCode, KeyboardEvents } from '../hooks/useKeyboard';
 import { nullable } from '../utils/nullable';
 import { flatten } from '../utils/flatten';
 
-import { Popup } from './Popup';
+import { Popup } from './Popup/Popup';
 
 interface ComboBoxTriggerProps {
     text: ComboBoxProps['text'];
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 1a016162..7f8ee206 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -7,7 +7,7 @@ import { nullable } from '../utils/nullable';
 import { useKeyPress } from '../hooks/useKeyPress';
 import { useKeyboard, KeyCode } from '../hooks/useKeyboard';
 
-import { Popup } from './Popup';
+import { Popup } from './Popup/Popup';
 import { Input } from './Input/Input';
 import { MenuItem } from './MenuItem';
 import { ErrorPopup } from './ErrorPopup';
diff --git a/src/components/ErrorPopup.tsx b/src/components/ErrorPopup.tsx
index 7201a198..eb44e000 100644
--- a/src/components/ErrorPopup.tsx
+++ b/src/components/ErrorPopup.tsx
@@ -2,7 +2,7 @@ import React, { ComponentProps, useCallback, useEffect, useRef, useState } from
 import { danger10 } from '@taskany/colors';
 import styled from 'styled-components';
 
-import { Popup } from './Popup';
+import { Popup } from './Popup/Popup';
 
 const StyledErrorTrigger = styled.div`
     position: absolute;
diff --git a/src/components/FormEditor.tsx b/src/components/FormEditor.tsx
index fd3d574a..d9da5191 100644
--- a/src/components/FormEditor.tsx
+++ b/src/components/FormEditor.tsx
@@ -12,7 +12,7 @@ import { useMounted } from '../hooks/useMounted';
 import { useUpload } from '../hooks/useUpload';
 import { formContext } from '../context/form';
 
-import { Popup } from './Popup';
+import { Popup } from './Popup/Popup';
 import { Link } from './Link/Link';
 
 interface FormEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus'> {
diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx
index 055fa338..ca888519 100644
--- a/src/components/FormInput/FormInput.tsx
+++ b/src/components/FormInput/FormInput.tsx
@@ -6,7 +6,7 @@ import { danger10, gray2, gray3, gray8, radiusS, textColor } from '@taskany/colo
 import { nullable } from '../../utils/nullable';
 import { formContext } from '../../context/form';
 import { Text } from '../Text/Text';
-import { Popup } from '../Popup';
+import { Popup } from '../Popup/Popup';
 
 interface FormInputProps extends React.HTMLAttributes<HTMLInputElement> {
     id?: string;
diff --git a/src/components/GlobalSearch.tsx b/src/components/GlobalSearch.tsx
index e9e3c123..86158311 100644
--- a/src/components/GlobalSearch.tsx
+++ b/src/components/GlobalSearch.tsx
@@ -8,7 +8,7 @@ import { useClickOutside } from '../hooks/useClickOutside';
 import { useHotkey } from '../hooks/useHotkeys';
 import { KeyCode, useKeyboard } from '../hooks/useKeyboard';
 
-import { Popup } from './Popup';
+import { Popup } from './Popup/Popup';
 import { Keyboard } from './Keyboard/Keyboard';
 import { Input } from './Input/Input';
 import { Text } from './Text/Text';
diff --git a/src/components/InlineForm/InlineForm.stories.tsx b/src/components/InlineForm/InlineForm.stories.tsx
index e8c8a4e8..e2fb83de 100644
--- a/src/components/InlineForm/InlineForm.stories.tsx
+++ b/src/components/InlineForm/InlineForm.stories.tsx
@@ -5,7 +5,7 @@ import { IconQuestionCircleOutline } from '@taskany/icons';
 
 import { Button } from '../Button/Button';
 import { Form } from '../Form';
-import { Popup } from '../Popup';
+import { Popup } from '../Popup/Popup';
 import { FormInput } from '../FormInput/FormInput';
 
 import { InlineForm } from './InlineForm';
diff --git a/src/components/Popup/Popup.stories.tsx b/src/components/Popup/Popup.stories.tsx
new file mode 100644
index 00000000..29f6488e
--- /dev/null
+++ b/src/components/Popup/Popup.stories.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconEditOutline } from '@taskany/icons';
+import styled from 'styled-components';
+
+import { Button } from '../Button/Button';
+import { MenuItem } from '../MenuItem';
+import { Text } from '../Text/Text';
+
+import { Popup } from './Popup';
+
+const Box = styled.div`
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 36px;
+`;
+
+const meta: Meta<typeof Popup> = {
+    title: 'Popup',
+    component: Popup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+interface ShownPopupProps {
+    items: { title: string }[];
+    minWidth?: number;
+    maxWidth?: number;
+    placement: React.ComponentProps<typeof Popup>['placement'];
+    text?: string;
+}
+
+const ShownPopup: React.FC<ShownPopupProps> = ({ items, minWidth = 100, maxWidth, placement }) => {
+    const ref = React.useRef(null);
+    return (
+        <div>
+            <Button text="open" ref={ref} />
+            <Popup visible reference={ref} minWidth={minWidth} maxWidth={maxWidth} placement={placement} interactive>
+                <div>
+                    <Text size="xxs">
+                        minW={minWidth}; maxW={maxWidth}
+                    </Text>
+                    {items?.map((item, index) => {
+                        return (
+                            <MenuItem
+                                key={index}
+                                focused={index === 0}
+                                // eslint-disable-next-line no-console
+                                onClick={() => console.log('click')}
+                                view="primary"
+                                ghost
+                                icon={<IconEditOutline size="xxs" />}
+                            >
+                                {item.title}
+                            </MenuItem>
+                        );
+                    })}
+                </div>
+            </Popup>
+        </div>
+    );
+};
+
+const items1 = [{ title: 'lorem ipsum' }, { title: 'lorem ipsum' }, { title: 'lorem ipsum' }];
+const items2 = [{ title: 'lor' }, { title: 'em' }];
+const items3 = [
+    { title: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum' },
+    { title: 'lorem' },
+    { title: 'lorem ipsum' },
+];
+
+export const PopupContent: Story = () => {
+    return (
+        <Box>
+            <ShownPopup items={items1} placement="top-end" minWidth={50} maxWidth={150} />
+            <ShownPopup items={items2} placement="top-start" />
+            <ShownPopup items={items3} placement="bottom-end" minWidth={150} maxWidth={250} />
+            <ShownPopup items={items3} placement="bottom-start" minWidth={200} />
+        </Box>
+    );
+};
+
+PopupContent.args = {};
diff --git a/src/components/Popup.tsx b/src/components/Popup/Popup.tsx
similarity index 100%
rename from src/components/Popup.tsx
rename to src/components/Popup/Popup.tsx
diff --git a/src/components/UserGroup/UserGroup.tsx b/src/components/UserGroup/UserGroup.tsx
index 448bf82f..90102891 100644
--- a/src/components/UserGroup/UserGroup.tsx
+++ b/src/components/UserGroup/UserGroup.tsx
@@ -5,7 +5,7 @@ import { gapSm, gray4, gray9, gray6, radiusL, radiusXl } from '@taskany/colors';
 import { Nullish } from '../../types/void';
 import { UserPic } from '../UserPic';
 import { Text } from '../Text/Text';
-import { Popup } from '../Popup';
+import { Popup } from '../Popup/Popup';
 
 interface UserGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     users: Nullish<{ name: string; email: string; image: string }>[];
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 3e6c7303..1aba865b 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -48,7 +48,7 @@ export * from './FiltersDropdown/FiltersDropdown';
 export * from './UserMenuItem';
 export * from './Table/Table';
 export * from './UserGroup/UserGroup';
-export * from './Popup';
+export * from './Popup/Popup';
 export * from './ListView/ListView';
 export * from './ErrorPopup';
 export * from './Spinner/Spinner';