chore(Popup): add story

.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>
     )
-}
+}

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'];

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';

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;

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'> {

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;

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';

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';

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 = {};

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 }>[];

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';